动画按钮


开始学习动画，做的简单动画应用的按钮样式。
 <Style x:Key="ChangeButton" TargetType="{x:Type Button}">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="Storyboard1">
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="bd">
                                    <EasingColorKeyFrame KeyTime="0" Value="#D3D3D3"/>
                                    <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FFAFAFAF"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="Storyboard2">
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="bd">
                                    <EasingColorKeyFrame KeyTime="0" Value="#FFAFAFAF"/>
                                    <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#D3D3D3"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                            <!--<Storyboard x:Key="Storyboard3" AutoReverse="True">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyAnimatedTranslateTransform" Storyboard.TargetProperty="X" Duration="0:0:0.2" >
                                    --><!-- Using a LinearDoubleKeyFrame, the rectangle moves
                     steadily from its starting position to 500 over 
                     the first 3 seconds.  --><!--
                                    <LinearDoubleKeyFrame Value="3" KeyTime="0:0:0.2" />
                                    --><!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly
                     appears at 400 after the fourth second of the animation. -->
                                    <!--<DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />-->
                                    <!-- Using a SplineDoubleKeyFrame, the rectangle moves
                     back to its starting point. The
                     animation starts out slowly at first and then speeds up. 
                     This KeyFrame ends after the sixth
                     second. -->
                                    <!--<SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6" />--><!--
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyAnimatedTranslateTransform" Storyboard.TargetProperty="Y" Duration="0:0:0.2">
                                    <LinearDoubleKeyFrame Value="3" KeyTime="0:0:0.2" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>-->
                        </ControlTemplate.Resources>
                        <BulletDecorator Background="Transparent">
                            <Border x:Name="bd"  HorizontalAlignment="Center" Background="White" CornerRadius="5">
                                <Border.OpacityMask>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="Black" Offset="0"/>
                                        <GradientStop Color="White" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.OpacityMask>
                                <StackPanel x:Name="stack" HorizontalAlignment="Center"  Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Margin="{TemplateBinding Padding}"
                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <StackPanel.RenderTransform>
                                        <TranslateTransform 
                                          x:Name="MyAnimatedTranslateTransform" 
                                            X="0" Y="0" />
                                    </StackPanel.RenderTransform>
                                    <Image Width="35" Height="35" Margin="0,5" Source="/Images/zongfen.png"/>
                                    <TextBlock HorizontalAlignment="Center"><Run Text="查杀木马"/></TextBlock>
                                </StackPanel>
                                <Border.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Border.RenderTransform>
                            </Border>
                        </BulletDecorator>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="bd" Property="Background" Value="gray" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="false">
                                <Setter TargetName="bd" Property="Background" Value="{x:Null}" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Trigger.EnterActions>
                                    <BeginStoryboard x:Name="Storyboard2_BeginStoryboard" Storyboard="{StaticResource Storyboard2}"/>
                                    <!--<BeginStoryboard x:Name="Storyboard2_BeginStoryboard2" Storyboard="{StaticResource Storyboard3}"/>-->
                                </Trigger.EnterActions>
                                <Setter TargetName="bd" Property="Background" Value="#FF606060" />
                                <Setter Property="RenderTransform" TargetName="stack"><!--改变大小-->
                                    <Setter.Value>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="1.05" ScaleY="1.05"/>
                                            <SkewTransform/>
                                            <RotateTransform/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                                </MultiTrigger.EnterActions>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                    <Condition Property="IsPressed" Value="False"/>
                                </MultiTrigger.Conditions>
                                <Setter TargetName="bd" Property="Background" Value="#D3D3D3" />
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>