WPF 关键帧动画

开发工具与关键技术：Microsoft Visual Studio 2015 、WPF
撰写时间：2019年06月26日

关键帧动画：从一个值突然变成另一值的动画，所有关键帧动画都使用 "类型名 + AnimationUsingKeyFrames " 的形式进行命名，比如：
DoubleAnimationUsingKeyFrames ——>Double型关键帧动画，
ColorAnimationUsingKeyFrames ——>Color型关键帧动画。
关键帧动画根据目标属性值之间的差异产生各种复杂的动画效果，一个关键帧动画可以在任意多个的目标属性值之间进行渐变。
制作一个关键帧动画不能没有故事板（Storyboard）和事件触发器（EventTrigger）,
Storyboard是动画的基本单元，它控制动画的播放、暂停、停止等操作，同时需要指定TargetName、TargetProperty；

动画播放控制属性：

1. BeginTime：动画开始时间。默认单位是天，也可以指定为时：分：秒；充分使用该属性可以将窗口上的很多动画都连续起来，而不是所有动画都同时进行，有连续性的动画看起来更舒服；
2. RepeatBehavior：用来声明动画重复次数，支持三种类型值：重复次数（格式—次数+X）；一个时间段（格式—时：分：秒）；无限循环（Forever）；
3. AutoReverse：指定动画结束后是否向后继续播放，默认值为false，若设置为true，动画结束时会回到起始位置；
4. SpeedRatio：用来增加或减少动画的速度，默认值为1，增加它，动画产生加速播放的效果；
5. FillBehavior：决定什么时候发生动画，什么时候结束。默认值为HoldEnd，表示动画结束后保持当前值不变，也可以设置为Stop，表示动画结束时属性再次回到起始值

实际运用：

1. ColorAnimationUsingKeyFrames：
   先绘制一个圆角矩形，然后再用关键帧动画改变它的Fill（填充：Color）

<!--绘制圆角矩形-->
        <Rectangle Grid.Column="1" 
                   Grid.Row="1" 
                   Name="color" 
                   Width="100" 
                   Height="50" 
                   Fill="White" 
                   Stroke="Red" 
                   StrokeThickness="3" 
                   RadiusX="30" 
                   RadiusY="100">
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="color" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" 
                                                       RepeatBehavior="Forever">
                                    <EasingColorKeyFrame KeyTime="0:0:0.5" Value="Red"/>
                                    <EasingColorKeyFrame KeyTime="0:0:1" Value="Orange"/>
                                    <EasingColorKeyFrame KeyTime="0:0:1.5" Value="Yellow"/>
                                    <EasingColorKeyFrame KeyTime="0:0:2" Value="Green"/>
                                    <EasingColorKeyFrame KeyTime="0:0:2.5" Value="Blue"/>
                                    <EasingColorKeyFrame KeyTime="0:0:3" Value="Violet"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>

2. DoubleAnimationUsingKeyFrames：
   用关键帧动画改变距离，看出有移动的效果

<Canvas Grid.Column="2" Grid.Row="2" Height="100" Width="400" Margin="0,20,0,0">
            <Rectangle Name="OH" Height="100" Width="100" Fill="BurlyWood">
                <Rectangle.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OH" Storyboard.TargetProperty="(Canvas.Left)" 
                                                       RepeatBehavior="Forever">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="50"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="200"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="300"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </Canvas>