备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

WPF圆形环绕的Loading动画

2018-09-22 883
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:WPF圆形环绕的Loading动画 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yangyisen0713/article/details/18218167 WPF制作一个模仿Silverlight页面还有win8系统的Loading动画效果，其实就用到WPF的ellipse即可，如果想要简单或者更好的效果的话还是要用Blend去做哈。
原文: WPF圆形环绕的Loading动画

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yangyisen0713/article/details/18218167

WPF制作一个模仿Silverlight页面还有win8系统的Loading动画效果，其实就用到WPF的ellipse即可，如果想要简单或者更好的效果的话还是要用Blend去做哈。

xaml代码：

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="Loading动画.Window1" x:Name="Window" Title="Window1" Width="640" Height="480" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        mc:Ignorable="d">
    <Window.Resources>
        <Storyboard x:Key="Storyboard1">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" RepeatBehavior="Forever" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse1">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.1000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse2">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse3">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse4">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse5">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse6">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.1000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.6000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse7">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse8">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.8000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse9">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.9000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse10">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.1000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse11">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.6000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.1000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse12">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.2000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse13">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.8000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.3000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse14">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.9000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.4000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse15">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.6000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.5000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse16">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.1000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever" Storyboard.TargetName="ellipse17">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.8000000" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.2000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" RepeatBehavior="Forever" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="180" />
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="360" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" RepeatBehavior="Forever" Storyboard.TargetName="border1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="180" />
                <SplineDoubleKeyFrame KeyTime="00:00:04" Value="360" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Storyboard1}" />
        </EventTrigger>
    </Window.Triggers>

    <Grid x:Name="LayoutRoot" Background="Black">
        <Viewbox Width="8" Height="8">
            <Grid HorizontalAlignment="Center" x:Name="loading" Margin="0" VerticalAlignment="Center" Width="3.333" Height="3.333" Visibility="Visible">
                <Ellipse RenderTransformOrigin="0.468,3.443" x:Name="ellipse" Fill="RoyalBlue" Stroke="{x:Null}" d:IsHidden="True" />
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse1" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="20" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse2" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="40" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse3" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="60" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse4" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="80" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse5" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="100" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse6" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="120" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse7" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="140" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse8" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="160" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse9" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="180" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse10" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="200" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse11" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="220" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse12" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="240" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse13" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="260" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse14" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="280" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse15" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="300" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse16" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="320" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.468,3.443" Fill="RoyalBlue" Stroke="{x:Null}" x:Name="ellipse17" d:IsHidden="True">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="340" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse RenderTransformOrigin="0.5,0.499" x:Name="ellipse_Copy" Fill="RoyalBlue" Stroke="{x:Null}" Margin="-0.012,0,0.001,-9.67" VerticalAlignment="Bottom" Height="3.344">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="0" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Border RenderTransformOrigin="0.492,1.006" Margin="1.081,0,1.086,-8.056" x:Name="border" VerticalAlignment="Bottom" Height="8.622" Background="RoyalBlue" CornerRadius="1,1,0,0">
                    <Border.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="0" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Border.RenderTransform>
                </Border>
                <Border Height="4.994" Background="RoyalBlue" CornerRadius="1,1,0,0" RenderTransformOrigin="0.496,1.001" Margin="0.705,0,0.714,-8.058" x:Name="border1" VerticalAlignment="Bottom">
                    <Border.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="0" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Border.RenderTransform>
                </Border>
            </Grid>
        </Viewbox>
    </Grid>
</Window>
这里是加上了老外写的带指针旋转的，不想加的可以不加，效果如图：



文章标签：
C#
关键词：
wpf动画
wpf loading
wpf圆形loading
wpf圆形
wpf loading动画
杰克.陈
目录
相关文章
Rick_1/2
|
7月前
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
Rick_1/2
125 0
杰克.陈
|
C# 索引
WPF简单模拟QQ登录背景动画
原文:WPF简单模拟QQ登录背景动画 介绍 之所以说是简单模拟,是因为我不知道QQ登录背景动画是怎么实现的.这里是通过一些办法把它简化了,做成了类似的效果 效果图   大体思路 首先把背景看成是一个4行8列的点的阵距,X轴Y轴都是距离70.
杰克.陈
1200 0
杰克.陈
|
C#
WPF中的PathAnimation（路径动画）
原文:WPF中的PathAnimation（路径动画）                                   WPF中的PathAnimation（路径动画）                                                               周...
杰克.陈
1240 0
杰克.陈
|
API C# 索引
WPF中的动画——（一）基本概念
原文:WPF中的动画——（一）基本概念 WPF的一个特点就是支持动画，我们可以非常容易的实现漂亮大方的界面。首先，我们来复习一下动画的基本概念。计算机中的动画一般是定格动画，也称之为逐帧动画，它通过每帧不同的图像连续播放，从而欺骗眼和脑产生动画效果。
杰克.陈
1035 0
杰克.陈
|
C# 测试技术
WPF中的动画——（二）From/To/By 动画
原文:WPF中的动画——（二）From/To/By 动画 我们所实现的的动画中，很大一部分是让一个属性在起始值和结束值之间变化，例如，我在前文中实现的改变宽度的动画：     var widthAnimation = new DoubleAnimation()    {        From = 0,        To = 320,        Duration = TimeSpan.
杰克.陈
970 0
杰克.陈
|
算法 C#
WPF中的动画——（五）关键帧动画
原文:WPF中的动画——（五）关键帧动画 与 From/To/By 动画类似，关键帧动画以也可以以动画形式显示目标属性值。 和From/To/By 动画不同的是， From/To/By 动画只能控制在两个状态之间变化，而关键帧动画则可以在多个状态之间变化，例如，对于前面那个改变按钮宽度的例子，如果我们要实现如下效果： 在2秒时将宽度从 0变为350 在7秒时将宽度变为50 在9秒的时候将其宽度变为200 虽然我们可以用三个From/To/By 动画组合实现类似效果，但是这样一来麻烦，二来要感知动画完成事件，不方便在XAML中使用。
杰克.陈
1330 0
杰克.陈
|
C#
WPF中的动画——（四）缓动函数
原文:WPF中的动画——（四）缓动函数 缓动函数可以通过一系列公式模拟一些物理效果，如实地弹跳或其行为如同在弹簧上一样。它们一般应用在From/To/By动画上，可以使得其动画更加平滑。     var widthAnimation = new DoubleAnimation()    {    ...
杰克.陈
930 0
杰克.陈
|
C#
WPF中的动画——（三）时间线（TimeLine）
原文:WPF中的动画——（三）时间线（TimeLine） 时间线（TimeLine）表示时间段。 它提供的属性可以让控制该时间段的长度、开始时间、重复次数、该时间段内时间进度的快慢等等。在WPF中内置了如下几种TimeLine： AnimationTimeline ：前面已经介绍过，主要用于属性的过渡，这种是最常见的动画。
杰克.陈
1414 0
杰克.陈
|
C# 容器 调度
WPF中的动画——（六）演示图板
原文:WPF中的动画——（六）演示图板 前面所介绍的都是单一的动画，它只能修改单一属性。有的时候，我们需要将一组动画一起进行，对于一个按钮，我们可能有如下需求： 选择该按钮时，该按钮增大并更改颜色。
杰克.陈
735 0
杰克.陈
|
前端开发 C#
WPF中的动画——（五）路径动画
原文:WPF中的动画——（五）路径动画 路径动画是一种专门用于将对象按照指定的Path移动的动画，虽然我们也可以通过控制动画的旋转和偏移实现对象的移动，但路径动画更专业，它的实现更加简洁明了。 路径动画中最常用的是MatrixAnimationUsingPath，它通常用于控制对象的MatrixT...
杰克.陈
1250 0
为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
解决方案技术解决方案
文档与社区文档开发者社区天池大赛培训与认证
权益中心免费试用高校计划企业扶持计划推荐返现计划
支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
关注阿里云
关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
阿里云APP阿里云微信
联系我们：4008013260
法律声明Cookies政策廉正举报安全举报联系我们加入我们
阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
© 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
浙公网安备 33010602009975号浙B2-20080101-4