《wpf/XAML--控制动画播放功能和改变动画按钮样式》

样式：
店家开始播放，可以播放动画，还可以暂停播放，恢复播放，停止播放，移除播放，按钮的样式我是通过属性窗口，快速调整的，鼠标靠近按钮，白色区域会上升，显示一个动画效果

播放之后的动画效果，详情可以复制下面的代码去wpf运行一下，然后扣去有用部分就可以了。模板调用

总代码：

<Window.Resources>

    <ControlTemplate TargetType="Button" x:Key="ButtonTemplate">
        <Grid>
            <Ellipse Name="faceEllipse" Width="{TemplateBinding Button.Width}" Height="{TemplateBinding Control.Height}"  Fill="{TemplateBinding Button.Background}"/>
            <TextBlock Name="txtBlock" Margin="{TemplateBinding Button.Padding}" VerticalAlignment="Center"  HorizontalAlignment="Center"  Text="{TemplateBinding Button.Content}" />
        </Grid>
        <ControlTemplate.Resources>
            <Storyboard x:Key="MousseClickButtonStoryboard">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="faceEllipse" Storyboard.TargetProperty="Width" BeginTime="00:00:00">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="50"></SplineDoubleKeyFrame>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3" Value="50"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </ControlTemplate.Resources>
        <ControlTemplate.Triggers>
            <Trigger Property="Button.IsMouseOver" Value="True">
                <Setter Property="Button.Foreground" Value="red"></Setter>
            </Trigger>
            <EventTrigger RoutedEvent="Mouse.MouseDown" SourceName="faceEllipse">
                <EventTrigger.Actions>
                    <BeginStoryboard Storyboard="{StaticResource MousseClickButtonStoryboard}"></BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="Mouse.MouseDown" SourceName="txtBlock">
                <EventTrigger.Actions>
                    <BeginStoryboard Storyboard="{StaticResource MousseClickButtonStoryboard}"></BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="buttonLeft" TargetType="Button">
        <ControlTemplate.Resources>
            <Storyboard x:Key="storyboardS1">
                <DoubleAnimation Storyboard.TargetName="bdS" Storyboard.TargetProperty="(Border.BorderBrush).(LinearGradientBrush.GradientStops)[0].(GradientStop.Offset)" To="0" Duration="0:0:0.3"></DoubleAnimation>
                <DoubleAnimation Storyboard.TargetName="bdS" Storyboard.TargetProperty="(Border.BorderBrush).(LinearGradientBrush.GradientStops)[1].(GradientStop.Offset)" To="0.51" Duration="0:0:0.3"></DoubleAnimation>
                <DoubleAnimation Storyboard.TargetName="bdS" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Offset)" To="0" Duration="0:0:0.3"></DoubleAnimation>
                <DoubleAnimation Storyboard.TargetName="bdS" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Offset)" To="0.51" Duration="0:0:0.3"></DoubleAnimation>
            </Storyboard>
            <Storyboard x:Key="storyboardS2">
                <DoubleAnimation Storyboard.TargetName="bdS" Storyboard.TargetProperty="(Border.BorderBrush).(LinearGradientBrush.GradientStops)[0].(GradientStop.Offset)" To="0.5" Duration="0:0:0.3"></DoubleAnimation>
                <DoubleAnimation Storyboard.TargetName="bdS" Storyboard.TargetProperty="(Border.BorderBrush).(LinearGradientBrush.GradientStops)[1].(GradientStop.Offset)" To="0.51" Duration="0:0:0.3"></DoubleAnimation>
                <DoubleAnimation Storyboard.TargetName="bdS" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Offset)" To="0.5" Duration="0:0:0.3"></DoubleAnimation>
                <DoubleAnimation Storyboard.TargetName="bdS" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Offset)" To="0.51" Duration="0:0:0.3"></DoubleAnimation>
            </Storyboard>
        </ControlTemplate.Resources>
        <!--左边功能按钮-->
        <!--RenderTransformOrigin变换原点-->
        <Border BorderThickness="1.5"  x:Name="bdS" RenderTransformOrigin="0.5,0.5">
            <Border.BorderBrush>
                <!--渐变画刷:使用线性渐变绘制区域。线性渐变沿直线定义渐变-->
                <LinearGradientBrush StartPoint="0,1" EndPoint="0,0" >
                    <!--使用LinearGradientBrush渐变画刷：定义一个渐变画刷，然后需要定义渐变颜色，颜色已直线形式渐变-->
                    <!--GradientStop:定义渐变颜色与颜色渐变始点-->
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="Black" Offset="1"/>
                </LinearGradientBrush>
            </Border.BorderBrush>
            <Border.Background>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Color="#FFA5A5A5" Offset="0.5"/>
                    <GradientStop Color="#FF565656" Offset="0.51"/>
                </LinearGradientBrush>
            </Border.Background>
            <ContentPresenter 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center" 
                TextBlock.Foreground="{TemplateBinding Background}" >
            </ContentPresenter>
        </Border>
        <!--end左边功能按钮-->
        <!--leftSmallButton-->
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource storyboardS1}"></BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource storyboardS2}"></BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="Button.Click" SourceName="btn_start">
        <BeginStoryboard Name="beginStoryboard1">
            <Storyboard CurrentTimeInvalidated="Storyboard_CurrentTimeInvalidated">
                <DoubleAnimation
                    Storyboard.TargetName="btn_Runing"
                    Storyboard.TargetProperty="(Canvas.Left)"
                    To="945"
                    Duration="0:0:12"
                    AutoReverse="True"
                    AccelerationRatio="0.3" RepeatBehavior="Forever"
                    >
                    <DoubleAnimation.EasingFunction>
                        <!--设置缓动模式和振荡次数-->
                        <ElasticEase EasingMode="EaseOut" Oscillations="15"></ElasticEase>
                    </DoubleAnimation.EasingFunction>

                </DoubleAnimation>
                <DoubleAnimation
                      Storyboard.TargetName="btn_Runing"
                    Storyboard.TargetProperty="(Canvas.Top)"
                    To="445"
                    Duration="0:0:12"
                    AutoReverse="True"
                    AccelerationRatio="0.3" RepeatBehavior="Forever"
                    >
                    <DoubleAnimation.EasingFunction>
                        <!--设置缓动模式和振荡次数-->
                        <ElasticEase EasingMode="EaseOut" Oscillations="5"></ElasticEase>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="Button.Click" SourceName="btn_pause">
        <PauseStoryboard BeginStoryboardName="beginStoryboard1"></PauseStoryboard>
        <PauseStoryboard BeginStoryboardName="beginStoryboard2"></PauseStoryboard>
        <PauseStoryboard BeginStoryboardName="beginStoryboard21"></PauseStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="Button.Click" SourceName="btn_resume">
        <ResumeStoryboard BeginStoryboardName="beginStoryboard1"></ResumeStoryboard>
        <ResumeStoryboard BeginStoryboardName="beginStoryboard2"></ResumeStoryboard>
        <ResumeStoryboard BeginStoryboardName="beginStoryboard21"></ResumeStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="Button.Click" SourceName="btn_stop">
        <StopStoryboard BeginStoryboardName="beginStoryboard1"></StopStoryboard>
        <StopStoryboard BeginStoryboardName="beginStoryboard2"></StopStoryboard>
        <StopStoryboard BeginStoryboardName="beginStoryboard21"></StopStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="Button.Click" SourceName="btn_remove">
        <RemoveStoryboard BeginStoryboardName="beginStoryboard1"></RemoveStoryboard>
        <RemoveStoryboard BeginStoryboardName="beginStoryboard2"></RemoveStoryboard>
        <RemoveStoryboard BeginStoryboardName="beginStoryboard21"></RemoveStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="Button.Click" SourceName="btn_start">
        <EventTrigger.Actions>
            <BeginStoryboard Name="beginStoryboard2">
                <Storyboard x:Name="storyboard1">
                    <DoubleAnimation Storyboard.TargetName="rec1"
                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
                                         From="0" To="886" Duration="0:0:12" RepeatBehavior="Forever"
                            >
                        <DoubleAnimation.EasingFunction>
                            <!--设置缓动模式和振荡次数-->
                            <ElasticEase EasingMode="EaseOut" Oscillations="15"></ElasticEase>
                        </DoubleAnimation.EasingFunction>

                    </DoubleAnimation>
                    <DoubleAnimation Storyboard.TargetName="rec1"
                                         Storyboard.TargetProperty="(Canvas.Left)"
                                         To="443" 
                                         Duration="0:0:12"
                                         AutoReverse="True"
                                     RepeatBehavior="Forever"
                            >
                        <DoubleAnimation.EasingFunction>
                            <!--设置缓动模式和振荡次数-->
                            <ElasticEase EasingMode="EaseOut" Oscillations="15"></ElasticEase>
                        </DoubleAnimation.EasingFunction>

                    </DoubleAnimation>
                    <DoubleAnimation Storyboard.TargetName="rec1"
                                         Storyboard.TargetProperty="(Canvas.Top)"
                                         To="110"
                                         Duration="0:0:12"
                                         SpeedRatio="1" 
                                      RepeatBehavior="Forever"
                            >
                        <DoubleAnimation.EasingFunction>
                            <!--设置缓动模式和振荡次数-->
                            <ElasticEase EasingMode="EaseOut" Oscillations="15"></ElasticEase>
                        </DoubleAnimation.EasingFunction>

                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="Button.Click" SourceName="btn_start" >
        <EventTrigger.Actions>
            <BeginStoryboard Name="beginStoryboard21">
                <Storyboard x:Name="storyboard11">
                    <DoubleAnimation Storyboard.TargetName="rec"
                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
                                         From="0" To="886" Duration="0:0:12" RepeatBehavior="Forever"
                            >
                        <DoubleAnimation.EasingFunction>
                            <!--设置缓动模式和振荡次数-->
                            <ElasticEase EasingMode="EaseOut" Oscillations="5"></ElasticEase>
                        </DoubleAnimation.EasingFunction>

                    </DoubleAnimation>
                    <DoubleAnimation Storyboard.TargetName="rec"
                                         Storyboard.TargetProperty="(Canvas.Right)"
                                         To="443" 
                                         Duration="0:0:12"
                                         AutoReverse="True"
                                     RepeatBehavior="Forever"
                            >
                        <DoubleAnimation.EasingFunction>
                            <!--设置缓动模式和振荡次数-->
                            <ElasticEase EasingMode="EaseOut" Oscillations="5"></ElasticEase>
                        </DoubleAnimation.EasingFunction>

                    </DoubleAnimation>
                    <DoubleAnimation Storyboard.TargetName="rec"
                                         Storyboard.TargetProperty="(Canvas.Bottom)"
                                         To="190"
                                         Duration="0:0:12"
                                         SpeedRatio="1" 
                                      RepeatBehavior="Forever"
                            >
                        <DoubleAnimation.EasingFunction>
                            <!--设置缓动模式和振荡次数-->
                            <ElasticEase EasingMode="EaseOut" Oscillations="5"></ElasticEase>
                        </DoubleAnimation.EasingFunction>

                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>
<Grid>
   
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"></RowDefinition>
        <RowDefinition Height="20*"></RowDefinition>
        <RowDefinition Height="4*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="开始播放" Name="btn_start" Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1"  Template="{StaticResource buttonLeft}" Background="White" />
        <Button Content="暂停播放" Name="btn_pause" Grid.Column="2" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1"  Template="{StaticResource buttonLeft}" Background="White" />
        <Button Content="恢复播放" Name="btn_resume" Grid.Column="3" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1"  Template="{StaticResource buttonLeft}" Background="White" />
        <Button Content="停止播放" Name="btn_stop" Grid.Column="4" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1"  Template="{StaticResource buttonLeft}" Background="White" />
        <Button Content="移除播放" Name="btn_remove" Grid.Column="5" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1"  Template="{StaticResource buttonLeft}" Background="White" />
        <Button Content="系统管理" Name="btnSystemInformation" Grid.Column="6" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1"  Template="{StaticResource buttonLeft}" Background="White" BorderBrush="White" Foreground="White" />
    </Grid>
    <Canvas Grid.Row="1">
       

        <Rectangle x:Name="rec" Height="200" Width="200"  Canvas.Bottom="0" Canvas.Right="0" Canvas.Left="0" Canvas.Top="0" RenderTransformOrigin="0.5,0.5" >
            <Rectangle.Fill>
                <ImageBrush ImageSource="1.jpg"></ImageBrush>
            </Rectangle.Fill>
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform></ScaleTransform>
                    <SkewTransform></SkewTransform>
                    <RotateTransform></RotateTransform>
                    <TranslateTransform></TranslateTransform>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="rec1" Height="200" Width="200" Canvas.Left="0" Canvas.Top="0" RenderTransformOrigin="0.5,0.5" >
            <Rectangle.Fill>
                <ImageBrush ImageSource="7.jpg" ></ImageBrush>
            </Rectangle.Fill>
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform></ScaleTransform>
                    <SkewTransform></SkewTransform>
                    <RotateTransform></RotateTransform>
                    <TranslateTransform></TranslateTransform>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Button Name="btn_Runing" Canvas.Left="0" Canvas.Top="0" >按钮</Button>
    </Canvas>
    <Grid Grid.Row="2">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Label Name="lblTime" Grid.Row="0">我是时间Label</Label>
        <ProgressBar Name="progressBar1" Grid.Row="1"></ProgressBar>
    </Grid>


</Grid>