WPF实现动画效果（五）之关键帧动画

关键帧动画在WPF中是一种比较常用的动画方式，可以通过关键帧集合来实现复杂的动画效果。下面我将详细讲解 WPF 实现关键帧动画的完整攻略。

1. 了解关键帧动画

在开始之前，需要先了解一下关键帧动画的概念。关键帧动画就是在动画的过程中定义一些关键帧，每一帧都有对应的属性值。动画系统会自动计算中间的帧的属性，从而呈现一个从起始属性到结束属性的动画过程。

在 WPF 中，关键帧动画通常包含以下几个概念：

• 关键帧类型： WPF 支持多种不同的关键帧类型，比如 DoubleKeyFrame、ColorKeyFrame 等。
• 帧率： 每秒钟播放多少帧动画，通常默认为每秒 60 帧。
• 时长： 动画持续的时长，可以通过 TimeSpan 类型的实例指定。
• 插值方式： 在两个关键帧之间如何过渡，通常默认为线性（Linear）。

2. 创建关键帧动画

创建关键帧动画的方式有两种，一种是通过代码来创建，另外一种是通过 XAML 来创建。

通过代码创建

以下示例展示了如何通过代码创建简单的 DoubleAnimationUsingKeyFrames 关键帧动画，让一个控件在 5 秒钟内从 0 移动到 100：

DoubleAnimationUsingKeyFrames anim = new DoubleAnimationUsingKeyFrames();
anim.Duration = TimeSpan.FromSeconds(5);
anim.KeyFrames.Add(new LinearDoubleKeyFrame(0, TimeSpan.FromSeconds(0)));
anim.KeyFrames.Add(new LinearDoubleKeyFrame(100, TimeSpan.FromSeconds(5)));

myControl.BeginAnimation(Canvas.LeftProperty, anim);

通过 XAML 创建

以下示例展示了如何通过 XAML 来创建简单的 DoubleAnimationUsingKeyFrames 关键帧动画：

<Canvas>
    <Rectangle x:Name="myControl" Canvas.Left="0" Canvas.Top="0" Width="50" Height="50" Fill="Red"/>

    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myControl"
                                                   Storyboard.TargetProperty="(Canvas.Left)">
                        <LinearDoubleKeyFrame Value="50" KeyTime="0:0:1"/>
                        <LinearDoubleKeyFrame Value="100" KeyTime="0:0:2"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>
</Canvas>

在上面的示例中，我们先创建了一个矩形控件 myControl，然后在其上方创建了一个 DoubleAnimationUsingKeyFrames 的动画，通过 Canvas.Triggers 把这个动画绑定到 Canvas 的 Loaded 事件上，当 Canvas 加载完毕时开始播放动画。

3. 关键帧动画示例说明

示例一：使用 ColorAnimationUsingKeyFrames 创建颜色渐变动画

以下示例展示了如何使用 ColorAnimationUsingKeyFrames 创建颜色渐变动画，让一个控件的背景颜色从红色变成蓝色：

<Grid>
    <Grid.Resources>
        <Storyboard x:Key="colorAnimation">
            <ColorAnimationUsingKeyFrames Duration="0:0:5" 
                                          RepeatBehavior="Forever" 
                                          AutoReverse="True"
                                          Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                <ColorAnimationUsingKeyFrames.KeyFrames>
                    <LinearColorKeyFrame Value="#FFED5432" KeyTime="0:0:0"/>
                    <LinearColorKeyFrame Value="#FFA07CEC" KeyTime="0:0:2"/>
                    <LinearColorKeyFrame Value="#FF49FA4E" KeyTime="0:0:4"/>
                </ColorAnimationUsingKeyFrames.KeyFrames>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </Grid.Resources>
    <Rectangle Width="200" Height="200" Fill="#FFED5432">
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard Storyboard="{StaticResource colorAnimation}"/>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
</Grid>

在上面的示例中，我们先创建了一个 Rectangle 控件，宽高都是 200，填充了红色（#FFED5432）的颜色。然后创建了一个 ColorAnimationUsingKeyFrames 关键帧动画，通过 KeyTime 属性来指定三个关键帧的开始和结束时间，颜色分别为红、紫、绿，动画的持续时间为 5 秒。

最后，我们再把这个关键帧动画绑定到 Rectangle 控件的 Loaded 事件上，让动画在控件加载完毕后开始播放。

示例二：使用 ObjectAnimationUsingKeyFrames 创建对象渐变动画

以下示例展示了如何使用 ObjectAnimationUsingKeyFrames 创建一个对象渐变动画，让一个控件在动画过程中更换图像：

<Grid>
    <Grid.Resources>
        <Storyboard x:Key="imageAnimation">
            <ObjectAnimationUsingKeyFrames Duration="0:0:5" 
                                           RepeatBehavior="Forever" 
                                           AutoReverse="True"
                                           Storyboard.TargetName="myImage"
                                           Storyboard.TargetProperty="Source">
                <ObjectAnimationUsingKeyFrames.KeyFrames>
                    <DiscreteObjectKeyFrame Value="pack://application:,,,/Images/RedBall.png" KeyTime="0:0:0"/>
                    <DiscreteObjectKeyFrame Value="pack://application:,,,/Images/GreenBall.png" KeyTime="0:0:2"/>
                    <DiscreteObjectKeyFrame Value="pack://application:,,,/Images/BlueBall.png" KeyTime="0:0:4"/>
                </ObjectAnimationUsingKeyFrames.KeyFrames>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </Grid.Resources>
    <Image x:Name="myImage" Source="pack://application:,,,/Images/RedBall.png"/>
    <Button Content="Start Animation" Click="Button_Click"/>
</Grid>

在上面的示例中，我们首先创建了一个 Image 控件，加载了 RedBall.png 资源图片。然后创建了一个 ObjectAnimationUsingKeyFrames 的对象渐变动画，分别在 0s，2s，4s 的关键帧上指定了不同的图片资源文件。

最后，我们在 Button 的 Click 事件中触发了 Storyboard 的 Begin 方法，让动画开始播放。