【WPF学习】第五十四章 关键帧动画

　　到目前为止，看到的所有动画都使用线性插值从起点到终点。但如果需要创建具有多个分段的动画和不规则移动的动画。例如，可能希望创建一个动画，快速地将一个元素滑入到视图中，然后慢慢地将它移到正确位置。可通过创建两个连续的动画，并使用begintime属性在第一个动画之后开始第二个动画来实现这种效果。然而，还有更简单的方法——可使用关键帧动画。

　　关键帧动画是由许多较短的段构成的动画。每段表示动画中的初始值，最终值或中间值当运行动画时，它平滑地从一个值移到另一个值。

　　例如，分析下面的将radialgradientbrush画刷的中心点从一个位置移到另一个位置的point动画：

<pointanimation storyboard.targetname="ellipse" storyboard.targetproperty="fill.gradientorigin"
                                    from="0.7,0.3" to="0.3,0.7" duration="0:0:10" autoreverse="true" repeatbehavior="forever">
                    </pointanimation>

　　可使用一个效果相同的pointanimationusingkeyframes对象代替这个pointanimation对象，如下所示：

<pointanimationusingkeyframes storyboard.targetname="ellipse" storyboard.targetproperty="fill.gradientorigin" autoreverse="true" repeatbehavior="forever"> 

　　<linearpointkeyframe value="0.7,0.3" keytime="0:0:0"></linearpointkeyframe> 
　　<linearpointkeyframe value="0.3,0.7" keytime="0:0:10"></linearpointkeyframe> 
</pointanimationusingkeyframes>

　　这个动画包含两个关键帧。当动画首次启动时第一个关键帧设置point值(如果希望使用在radialgradientbrush画刷中设置的当前值，可省略这个关键帧)。第二个关键帧定义结束值，这是10秒之后达到的数值。pointanimationusingkeyframes对象执行线性插值。从第一个关键帧平滑移到第二个关键帧，就像pointanimation对象对from和to值执行的操作一样。

　　可使用一系列关键帧创建更有趣的示例。下面的动画通过在不同的时刻到达的一系列位置经历中心点。中心点的移动速度根据关键帧之间的持续时间以及需要移动的距离而改变。

<pointanimationusingkeyframes storyboard.targetname="ellipse" storyboard.targetproperty="fill.gradientorigin"
                                           repeatbehavior="forever">
                        <linearpointkeyframe value="0.7,0.3" keytime="0:0:0"></linearpointkeyframe>
                        <linearpointkeyframe value="0.3,0.7" keytime="0:0:5"></linearpointkeyframe>
                        <linearpointkeyframe value="0.5,0.9" keytime="0:0:8"></linearpointkeyframe>
                        <linearpointkeyframe value="0.9,0.6" keytime="0:0:10"></linearpointkeyframe>
                        <linearpointkeyframe value="0.8,0.2" keytime="0:0:12"></linearpointkeyframe>
                        <linearpointkeyframe value="0.7,0.3" keytime="0:0:14"></linearpointkeyframe>
</pointanimationusingkeyframes>

　　这个动画不是可反转的，但可以重复。为确保在一次迭代的最后数据和下一次迭代的开始数值之间不会出现跳跃，应使动画的结束点和开始点位于相同的中心点。

一、离散的关键帧动画

　　上面示例中的关键帧动画使用线性关键帧。所以，它在关键帧值之间平滑地过渡，另一种选择是使用离散的关键帧。对于这种情况，不进行插值。当到达关键时间时，属性突然改变为新值。

　　线性关键帧类使用“linear+数据类型+keyframe”的形式进行命名。离散关键帧类使用“discrete+数据类型+keyframe”的形式命名。下面是radialgradientbrush画刷示例的修改版本，在该修改版本中使用的是离散关键帧：

<pointanimationusingkeyframes storyboard.targetname="ellipse" storyboard.targetproperty="fill.gradientorigin"
                                           repeatbehavior="forever">
                        <discretepointkeyframe value="0.7,0.3" keytime="0:0:0"></discretepointkeyframe>
                        <discretepointkeyframe value="0.3,0.7" keytime="0:0:5"></discretepointkeyframe>
                        <discretepointkeyframe value="0.5,0.9" keytime="0:0:8"></discretepointkeyframe>
                        <discretepointkeyframe value="0.9,0.6" keytime="0:0:10"></discretepointkeyframe>
                        <discretepointkeyframe value="0.8,0.2" keytime="0:0:12"></discretepointkeyframe>
                        <discretepointkeyframe value="0.7,0.3" keytime="0:0:14"></discretepointkeyframe>
</pointanimationusingkeyframes>

　　当运行这个动画时，中心点在适当的时间从一个位置跳到下一个位置。这是戏剧性的（但是不平稳的）效果。

　　所有关键帧动画类都支持离散关键帧，但只有一部分关键帧动画类支持线性关键帧。这完全取决于数据类型。支持线性关键帧的数据类型也支持线性插值，并提供了相应的datatypeanimation类，如point、color以及double。不支持线性插值的数据类型包括字符串和对象。

二、缓动关键帧

　　通过“【wpf学习】第五十一章 动画缓动 ”的学习，看到了如何使用缓动函数改进普通动画。尽管关键帧动画被分割成多段，但每段仍使用普遍的、令人厌烦的线性插值。

　　如果这不是希望的结果，可使用缓动函数为每个关键帧添加加速和减速的效果。然而，普通的线性插值关键帧类和离散关键帧类不支持该特征。相反，需要使用缓动关键帧，如easingdoublekeyframe、easingcolorkeyframe或easingpointkeyframe。每个缓动关键帧类和对应的线性插值关键帧类的工作方式相同，但是额外提供了easingfunction属性。

　　下面的示例使用动画缓动为前5秒得关键帧动画应用加速效果：

<pointanimationusingkeyframes storyboard.targetname="ellipse" storyboard.targetproperty="fill.gradientorigin"
                                           repeatbehavior="forever">
                        <linearpointkeyframe value="0.7,0.3" keytime="0:0:0"></linearpointkeyframe>
                        <easingpointkeyframe value="0.3,0.7" keytime="0:0:5">
                            <easingpointkeyframe.easingfunction>
                                <circleease></circleease>
                            </easingpointkeyframe.easingfunction>
                        </easingpointkeyframe>
                        <linearpointkeyframe value="0.5,0.9" keytime="0:0:8"></linearpointkeyframe>
                        <linearpointkeyframe value="0.9,0.6" keytime="0:0:10"></linearpointkeyframe>
                        <linearpointkeyframe value="0.8,0.2" keytime="0:0:12"></linearpointkeyframe>
                        <linearpointkeyframe value="0.7,0.3" keytime="0:0:14"></linearpointkeyframe>
</pointanimationusingkeyframes>

　　结合使用关键帧和动画缓动是构建复杂动画模型的简便方式，但仍可能无法提供所需的控制。不使用动画缓动，可创建数学公式指示动画的进度。

三、样条关键帧动画

　　还有一种关键帧类型：样条关键帧。每个支持线性关键帧的类也支持样条关键帧，它们使用“spline+数据类型+keyframe”的形式进行命名。

　　与线性关键帧一样，样条关键帧使用插值从一个键值平滑地移到另一个键值。区别是每个样条关键帧都是keyspline属性。可使用该属性定义能影响插值方式的三次贝塞尔曲线。尽管为了得到希望的效果这样做有些繁琐，但这种技术能创建更加连贯的加速和减速以及更逼真的动画效果。

　　在前面章节学习过，贝塞尔曲线由起点、终点以及两个控制点定义。对于关键样条，起点总是（0，0），终点总是（1,1）。用户只需要提供两个控制点。创建的曲线描述了时间(x轴)和动画值(y值)之间的关系。

　　下面的示例通过对比canvas面板上两个椭圆的移动，演示了一个关键帧样条动画。第一个椭圆使用doubleanimation动画缓慢匀速地再窗口上移动。第二个椭圆使用具有两个splinedoublekeyframe对象的doubleanimationusingkeyframes动画。两个椭圆同时到达目的位置(10秒后)，但第二个椭圆在运动过程中会有明显的加速和减速，减速时会超过第一个椭圆而减速时又会落后于第一个椭圆。

 <doubleanimationusingkeyframes
             storyboard.targetname="ellipse2" storyboard.targetproperty="(canvas.left)" >
         <splinedoublekeyframe keytime="0:0:5" value="250" keyspline="0.25,0 0.5,0.7"></splinedoublekeyframe>
         <splinedoublekeyframe keytime="0:0:10" value="500" keyspline="0.25,0.8 0.2,0.4"></splinedoublekeyframe>
</doubleanimationusingkeyframes>

 <doubleanimation
            storyboard.targetname="ellipse1" storyboard.targetproperty="(canvas.left)"
            to="500" duration="0:0:10">
</doubleanimation>

　　最快的加速发生在5秒后不久，也就是当进入第二个splinedoublekeyframe关键帧时。贝塞尔曲线的第一个控制点将较大的表示动画进度(0.8)的y轴值与较小的表示时间的x轴值相匹配。所以，在再次减慢速度前，椭圆在一小段距离内会增加速度。

　　下图以图形方式显示了两条控制椭圆运动的曲线。为理解这些曲线，请记住它们从顶部到底部描述了动画过程。观察第一条曲线可以发现，它相对均匀地下降，在开始处有较短的暂停，在末尾处平缓下降。然而第二条曲线快速下降，运动了一个大段距离，然后对于剩余的动画部分，曲线缓缓下降。

　　示例的完整xaml标记如下所示：

<window x:class="animation.keysplineanimation"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        title="keysplineanimation" height="300" width="624" windowstartuplocation="centerscreen">
    <window.triggers>
        <eventtrigger routedevent="window.loaded">
            <eventtrigger.actions>
                <beginstoryboard>
                    <storyboard>
                        <doubleanimationusingkeyframes
             storyboard.targetname="ellipse2" storyboard.targetproperty="(canvas.left)" >
                            <splinedoublekeyframe keytime="0:0:5" value="250" keyspline="0.25,0 0.5,0.7"></splinedoublekeyframe>
                            <splinedoublekeyframe keytime="0:0:10" value="500" keyspline="0.25,0.8 0.2,0.4"></splinedoublekeyframe>
                        </doubleanimationusingkeyframes>

                        <doubleanimation
            storyboard.targetname="ellipse1" storyboard.targetproperty="(canvas.left)"
            to="500" duration="0:0:10">
                        </doubleanimation>
                    </storyboard>
                </beginstoryboard>
            </eventtrigger.actions>
        </eventtrigger>
    </window.triggers>
    <canvas margin="10">
        <ellipse name="ellipse1" canvas.left="0" fill="red" width="10" height="10"></ellipse>

        <path stroke="blue" strokethickness="1" strokedasharray="2 1" canvas.top="25">
            <path.data>
                <pathgeometry>
                    <pathfigure>
                        <beziersegment point1="25,0" point2="50,70" point3="100,100" />
                    </pathfigure>
                </pathgeometry>
            </path.data>
            <path.rendertransform>
                <scaletransform scalex="2.5"></scaletransform>
            </path.rendertransform>
        </path>
        <path stroke="blue" strokethickness="1" strokedasharray="2 1" canvas.left="250" canvas.top="25">
            <path.data>
                <pathgeometry>
                    <pathfigure>
                        <beziersegment point1="25,80" point2="20,40" point3="100,100" />
                    </pathfigure>
                </pathgeometry>
            </path.data>
            <path.rendertransform>
                <scaletransform scalex="2.5"></scaletransform>
            </path.rendertransform>
        </path>

        <ellipse name="ellipse2" canvas.top="150" canvas.left="0" fill="red" width="10" height="10"></ellipse>
    </canvas>
</window>