AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

WPF圆形环绕的Loading动画

2018-09-22 951
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文: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圆形
wpf loading
wpf loading动画
杰克.陈
目录
相关文章
mingupup
|
3月前
|
C#
WPF中动画教程（DoubleAnimation的基本使用）
WPF中动画教程（DoubleAnimation的基本使用）
mingupup
70 0
小王老师呀
|
2月前
|
算法 C# Windows
不可不知的WPF动画（Animation）
【9月更文挑战第19天】在 WPF（Windows Presentation Foundation）中，动画能为应用程序增添生动性和交互性。主要类型包括线性动画和关键帧动画，可针对依赖属性和自定义属性操作。触发方式有事件触发和自动触发，支持暂停、恢复及停止控制。合理使用这些功能并注意性能优化，可创建引人入胜的用户界面。
小王老师呀
49 7
土木林森
|
3月前
|
C# UED 开发者
WPF与性能优化：掌握这些核心技巧，让你的应用从卡顿到丝滑，彻底告别延迟，实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法，详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈，如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着，通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画，从而有效提升应用性能。通过这些优化措施，WPF应用将更加流畅，用户体验也将得到显著改善。
土木林森
234 1
土木林森
|
3月前
|
C# UED 开发者
WPF动画大揭秘：掌握动画技巧，让你的界面动起来，告别枯燥与乏味！
【8月更文挑战第31天】在WPF应用开发中，动画能显著提升用户体验，使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法，包括平移、缩放、旋转等常见类型，并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外，还将介绍动画触发器的使用，帮助开发者更好地控制动画效果，提升应用的吸引力。
土木林森
184 0
mingupup
|
3月前
|
存储 C# 数据格式
WPF动画教程（PointAnimationUsingPath的使用）
WPF动画教程（PointAnimationUsingPath的使用）
mingupup
48 0
李杰-@yd
|
6月前
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放，可沿X或Y轴调整。在故事板中，通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性，并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时，EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后，展示了如何将动画集成到自定义按钮样式中。
李杰-@yd
176 0
Rick_1/2
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
Rick_1/2
220 0
杰克.陈
|
API C# 索引
WPF中的动画——（一）基本概念
原文:WPF中的动画——（一）基本概念 WPF的一个特点就是支持动画，我们可以非常容易的实现漂亮大方的界面。首先，我们来复习一下动画的基本概念。计算机中的动画一般是定格动画，也称之为逐帧动画，它通过每帧不同的图像连续播放，从而欺骗眼和脑产生动画效果。
杰克.陈
1076 0
杰克.陈
|
C# 测试技术
WPF中的动画——（二）From/To/By 动画
原文:WPF中的动画——（二）From/To/By 动画 我们所实现的的动画中，很大一部分是让一个属性在起始值和结束值之间变化，例如，我在前文中实现的改变宽度的动画：     var widthAnimation = new DoubleAnimation()    {        From = 0,        To = 320,        Duration = TimeSpan.
杰克.陈
1009 0
杰克.陈
|
算法 C#
WPF中的动画——（五）关键帧动画
原文:WPF中的动画——（五）关键帧动画 与 From/To/By 动画类似，关键帧动画以也可以以动画形式显示目标属性值。 和From/To/By 动画不同的是， From/To/By 动画只能控制在两个状态之间变化，而关键帧动画则可以在多个状态之间变化，例如，对于前面那个改变按钮宽度的例子，如果我们要实现如下效果： 在2秒时将宽度从 0变为350 在7秒时将宽度变为50 在9秒的时候将其宽度变为200 虽然我们可以用三个From/To/By 动画组合实现类似效果，但是这样一来麻烦，二来要感知动画完成事件，不方便在XAML中使用。
杰克.陈
1379 0