Windows Phone开发（39）：漫谈关键帧动画上篇

尽管前面介绍的几种动画会让觉得很好玩了，但是，不知道你是否发现，在前面说到的一系列XXXAnimation中，都有一个共同点，那就是仅仅针对两个值的目标值之间产生动画，如果使用By，将在原值和加上By后的目标值之间进行动画处理；如果使用From，To，那就更好理解了，就是首尾两个值之间值的动画。

那么，如果我希望三个值呢？或者N多个值呢？每个值之间的时间间隔不一样呢？如果我还希望更复杂的动画效果呢？比如可以附加缓动函数的。显然，前面我们提到的几个动画类是不能完成的。

不知道你以前有没有耍过Flash，若是在Flash里面，你会怎么做？对啊，我肯定会说——关键帧啊。是啊，那么，Silverlight for Windows phone里面有没有关键帧动画呢？答案显然是Yes的。

相对于前面说的简单动画而言，关键帧动画会显得更为复杂，更难理解，我问你，你怕了吗？

如果你怕了，那就不要往下看了，你只能中途而废了，回家被母亲骂了。如果你敢于挑战，那就不要犹豫，迎难而上！

先向大家透露一个好消息，其实在实际开发中，你不一定要手写XAML的，还记得那个人类历史上从未有过的强大设计工具——Express Blend吧，嗯，对D，必要的时候，你可以拿出来用一下，不要用这么好的东东在硬盘里生锈，会污染环境的哦。用那家伙，做动画就方便了，你会怀疑你在用Flash，说不定比Flash还爽。

如果你问我当初是怎么学习关键帧动画的，我只能通俗地回答你：唯Coding尔。至于你信不信，反正你想成为高手，你必须相信这句话。

扯蛋的话就不聊了，首先我们要先摸清一下与关键帧有关的一些类的大概线路。

从前面的课程中，大家一定知道，一个Storyboard里面可以放N个Timeline对象，但你知道，Timeline是抽象类，说白了，就是可以在其中放置从Timeline派生的类的对象，Storyboard除外，这个可不能嵌套。

也就是说，Storyboard里央也可以放N个关键帧时间线，和简单动画一个样，关键帧动画无非也是针对Double，Color，Point等目标值的。很好找，只要你看到有XXXAnimationUsingKeyFrames字样的，都是关键帧动画的时间线，为什么后面有个s，呵，复数形式，小学英语了，不用我解释了，既然是复数，当然一个时间线中可以有N个关键帧了。

现在，你一定是云里雾里的，所以说嘛，理论的东西讲得再多也是废话，还是实例可爱一点吧？

这一节先来讲一下DoubleAnimationUsingKeyFrames，里面的关键帧有三种：LinearDoubleKeyFrame、SplineDoubleKeyFrame和EasingDoubleKeyFrame，我们只玩前面两个，后面那个是带缓动函数的动画，由于缓动动画的原理都一样，可以举一反六，所以我打算放到专门的一节中去吹。

LinearDoubleKeyFrame是比较好懂的，其实它和DoubleAnimation很像，只是关键帧的特点就是一个时间点对应一个值，因此，记住这句话：任何关键帧都有KeyTime和Value一一对应的，一个时间点对应一个值。

而线性关键帧动画的特点就是“匀速直线运动”，复习一下初中物理知识。两个关键之间的两个值都是根据时间间隔的大小均匀计算的。

另外，再看一下SplineDoubleKeyFrame，这个东西比较难理解，其实，你不理解它也可以用的，真的，这世界上有些东西不一定非要你弄懂了才能用的，比如，你不太可能在吃药之前要研究一下药是怎么加工出来的再吃，你吃饭之前难道也要想明白大米是如何种出来才吃吗？显然不是的。

SplineDoubleKeyFrame被SDK文档翻译为样条内插，这更增加了神奇感。我在学习的时候，凡是遇到这种根本读不懂的东西的话，我第一时间就写代码来试，写不同的代码，从不同的角度去测试，玩多了，你的灵感就来了。

这个什么内插补间动画，说通俗一点，不就是“变速直线运动”了，你看，又复习中考物理了，唉，当年我差点考满分，就是被加速度这玩儿耍了。

其中关键的是有个KeySpline属性，它设置一个KeySpline对象，KeySpline类有两个属性：ControlPoint1和ControlPoint2，就是两个点，传说是贝塞尔曲线的两个控制点。

真的复杂了，如果你觉得真的难理解的话，有没有兴趣玩一下这个游戏？玩了之后，你一定对这个东东有更深的体会，游戏地址：http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm#/?sref=KeySplineExample

这个游戏很好玩的，一定要认真玩啊。

下面，我们动手干活，先来一段美丽的XAML代码。+

    <Grid Loaded="OnGridLoaded">
        <Ellipse VerticalAlignment="Top" HorizontalAlignment="Left"
                 Width="100" Height="100" Fill="Blue">
            <Ellipse.RenderTransform>
                <TranslateTransform x:Name="trf"/>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Grid.Resources>
            <Storyboard x:Name="storybrd">
                <DoubleAnimationUsingKeyFrames Duration="0:0:6"
                                               RepeatBehavior="Forever"
                                               Storyboard.TargetName="trf"
                                               Storyboard.TargetProperty="X">
                    <LinearDoubleKeyFrame KeyTime="0:0:6" Value="420"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Duration="0:0:6"
                                               RepeatBehavior="Forever"
                                               Storyboard.TargetName="trf"
                                               Storyboard.TargetProperty="Y">
                    <SplineDoubleKeyFrame KeyTime="0:0:2" Value="700">
                        <SplineDoubleKeyFrame.KeySpline>
                            <KeySpline ControlPoint1="0,0" ControlPoint2="0,1"/>
                        </SplineDoubleKeyFrame.KeySpline>
                    </SplineDoubleKeyFrame>
                    <SplineDoubleKeyFrame KeyTime="0:0:3" Value="550">
                        <SplineDoubleKeyFrame.KeySpline>
                            <KeySpline ControlPoint1="1,0" ControlPoint2="0.5,0"/>
                        </SplineDoubleKeyFrame.KeySpline>
                    </SplineDoubleKeyFrame>
                    <SplineDoubleKeyFrame KeyTime="0:0:5" Value="95">
                        <SplineDoubleKeyFrame.KeySpline>
                            <KeySpline ControlPoint1="0,0" ControlPoint2="0,0.5"/>
                        </SplineDoubleKeyFrame.KeySpline>
                    </SplineDoubleKeyFrame>
                    <LinearDoubleKeyFrame KeyTime="0:0:6" Value="730"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>
    </Grid>

代码就这样的，看不懂后果自负，第一节中就说过了，先把WPF和Silverlight耍了，再来耍WP。

后台代码还要加一个，处理上面的OnGridLoaded事件。

        private void OnGridLoaded(object sender, RoutedEventArgs e)
        {
            this.storybrd.Begin();
        }

由于是动画，截图没有意义，就不发了，自己运行一下吧。你的作品，你一定很高兴！

历史证明，一个例子是不够的，下面再来一“瓶”，这个例子我们对一个Image控件玩动画，让图片动着出来，动着滚蛋，主要用到透视变换。

    <Grid Loaded="OnGridLoaded">
        <Image Name="img" Source="/PhoneApp1;component/1.jpg" Stretch="Uniform" Opacity="0">
            <Image.Projection>
                <PlaneProjection x:Name="prj" />
            </Image.Projection>
        </Image>
        <Grid.Resources>
            <Storyboard x:Name="std" RepeatBehavior="Forever" Duration="0:0:12">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="img"
                                               Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="0:0:8" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="0:0:12" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="prj"
                                               Storyboard.TargetProperty="LocalOffsetZ">
                    <LinearDoubleKeyFrame KeyTime="0:0:0" Value="-6000"/>
                    <LinearDoubleKeyFrame KeyTime="0:0:8" Value="0" />
                    <LinearDoubleKeyFrame KeyTime="0:0:12" Value='-12'/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="prj"
                                 Storyboard.TargetProperty="RotationZ">
                    <SplineDoubleKeyFrame KeyTime="0:0:0" Value="360"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:8" Value="0">
                        <SplineDoubleKeyFrame.KeySpline>
                            <KeySpline ControlPoint1="0,0" ControlPoint2="0.25,0.5"/>
                        </SplineDoubleKeyFrame.KeySpline>
                    </SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="prj"
                                               Storyboard.TargetProperty="RotationY">
                    <LinearDoubleKeyFrame KeyTime="0:0:8" Value="0"/>
                    <LinearDoubleKeyFrame KeyTime="0:0:12" Value="90"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>
    </Grid>

别忘了处理OnGridLoaded。

        private void OnGridLoaded(object sender, RoutedEventArgs e)
        {
            this.std.Begin();
        }

这个嘛，还是发个图好点，免得有人说没真相，图片大家可以随便找，只要内容健康就行了。

还要告诉各位一件事，免得大家去“狗狗摆渡”，与动画相关的类，基本上都位于System.Windows.Media.Animation命名空间。

至于源码问题，大部分文章我会保留源码，我这个人比较落后，没有用网盘，所以，暂时这样吧，有需要源码的朋友，请留下你那个心爱的伊妹儿做人质吧，我会善待她的，放心。