Uwp Button样式【半圆旋转动画】

效果截图：

页面page:

<Button Style="{StaticResource ButtonStyle2}" Content="按钮" Background="#ED556A"  Height="100" Width="100"  />

资源字典ButtonStyle2:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="ButtonStyle2" TargetType="Button">
        <Setter Property="Background" Value="{ThemeResource ButtonBackground}"/>
        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/>
        <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}"/>
        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <!--**************************************-ButtonEllipse-圆环动画由大到小************************************************-->
                        <Ellipse x:Name="Ellipse1" StrokeThickness="1"
                            Stroke="#FED71A"
                            StrokeDashArray="120"
                            StrokeDashCap="Flat"
                            Height="80"
                            Width="80">
                            <Ellipse.Triggers>
                                <EventTrigger RoutedEvent="Ellipse.Loaded"><!--加载页面时开始动画-->
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <!--【TargetProperty】更改控件StrokeDashOffset属性值【TargetName】指定控件名称【RepeatBehavior】动画无限循环-->
                                                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
                                                                     Storyboard.TargetProperty="(Shape.StrokeDashOffset)"
                                                                     Storyboard.TargetName="Ellipse1"
                                                                     RepeatBehavior="Forever">
                                                    <!--【KeyTime】动画帧间距时间【Value】StrokeDashOffset属性值变动-->
                                                    <EasingDoubleKeyFrame KeyTime="0:0:9" Value="-500"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                            </Ellipse.Triggers>
                        </Ellipse>
                        <Ellipse x:Name="Ellipse2" StrokeThickness="1"
                            Stroke="{TemplateBinding Background}"
                            StrokeDashArray="120"
                            StrokeDashCap="Flat"
                            Height="70"
                            Width="70">
                            <Ellipse.Triggers>
                                <EventTrigger RoutedEvent="Ellipse.Loaded">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
                                       Storyboard.TargetProperty="(Shape.StrokeDashOffset)"
                                       Storyboard.TargetName="Ellipse2" RepeatBehavior="Forever">
                                                    <EasingDoubleKeyFrame KeyTime="0:0:9" Value="700"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                            </Ellipse.Triggers>
                        </Ellipse>
                        <Ellipse x:Name="Ellipse3" StrokeThickness="1"
                            Stroke="#12A182"
                            StrokeDashArray="90"
                            StrokeDashCap="Flat"
                            Height="60"
                            Width="60">
                            <Ellipse.Triggers>
                                <EventTrigger RoutedEvent="Ellipse.Loaded">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
                                       Storyboard.TargetProperty="(Shape.StrokeDashOffset)"
                                       Storyboard.TargetName="Ellipse3" RepeatBehavior="Forever">
                                                    <EasingDoubleKeyFrame KeyTime="0:0:9" Value="-1000"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                            </Ellipse.Triggers>
                        </Ellipse>
                        <!--**************************************-ButtonBorder-边框样式************************************************-->
                        <Border BorderBrush="{TemplateBinding Background}" BorderThickness="1" CornerRadius="50">
                            <Grid x:Name="RootGrid" Background="Transparent">
                                <!--**************************************-ButtonEllipse-圆形按钮样式************************************************-->
                                <Ellipse Width="40" Height="40" Fill="{TemplateBinding Background}"></Ellipse>
                                <ContentPresenter x:Name="ContentPresenter"
                                              AutomationProperties.AccessibilityView="Raw"
                                              BorderBrush="{TemplateBinding BorderBrush}"
                                              BorderThickness="{TemplateBinding BorderThickness}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              ContentTransitions="{TemplateBinding ContentTransitions}"
                                              Content="{TemplateBinding Content}"
                                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              Padding="{TemplateBinding Padding}"
                                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>