盡管前面介紹的幾種動畫會讓覺得很好玩了，但是，不知道你是否發(fā)現(xiàn)，在前面說到的一系列XXXAnimation中，都有一個(gè)共同點(diǎn)，那就是僅僅針對兩個(gè)值的目標(biāo)值之間產(chǎn)生動畫，如果使用By，將在原值和加上By后的目標(biāo)值之間進(jìn)行動畫處理；如果使用From，To，那就更好理解了，就是首尾兩個(gè)值之間值的動畫。

那么，如果我希望三個(gè)值呢？或者N多個(gè)值呢？每個(gè)值之間的時(shí)間間隔不一樣呢？如果我還希望更復(fù)雜的動畫效果呢？比如可以附加緩動函數(shù)的。顯然，前面我們提到的幾個(gè)動畫類是不能完成的。

不知道你以前有沒有耍過Flash，若是在Flash里面，你會怎么做？對啊，我肯定會說——關(guān)鍵幀啊。是啊，那么，Silverlight for Windows phone里面有沒有關(guān)鍵幀動畫呢？答案顯然是Yes的。

相對于前面說的簡單動畫而言，關(guān)鍵幀動畫會顯得更為復(fù)雜，更難理解，我問你，你怕了嗎？

如果你怕了，那就不要往下看了，你只能中途而廢了，回家被母親罵了。如果你敢于挑戰(zhàn)，那就不要猶豫，迎難而上！

先向大家透露一個(gè)好消息，其實(shí)在實(shí)際開發(fā)中，你不一定要手寫XAML的，還記得那個(gè)人類歷史上從未有過的強(qiáng)大設(shè)計(jì)工具——Express Blend吧，嗯，對D，必要的時(shí)候，你可以拿出來用一下，不要用這么好的東東在硬盤里生銹，會污染環(huán)境的哦。用那家伙，做動畫就方便了，你會懷疑你在用 Flash，說不定比Flash還爽。

如果你問我當(dāng)初是怎么學(xué)習(xí)關(guān)鍵幀動畫的，我只能通俗地回答你：唯Coding爾。至于你信不信，反正你想成為高手，你必須相信這句話。

扯蛋的話就不聊了，首先我們要先摸清一下與關(guān)鍵幀有關(guān)的一些類的大概線路。

從前面的課程中，大家一定知道，一個(gè)Storyboard里面可以放N個(gè)Timeline對象，但你知道，Timeline是抽象類，說白了，就是可以在其中放置從Timeline派生的類的對象，Storyboard除外，這個(gè)可不能嵌套。

也就是說，Storyboard里央也可以放N個(gè)關(guān)鍵幀時(shí)間線，和簡單動畫一個(gè)樣，關(guān)鍵幀動畫無非也是針對Double，Color，Point等 目標(biāo)值的。很好找，只要你看到有XXXAnimationUsingKeyFrames字樣的，都是關(guān)鍵幀動畫的時(shí)間線，為什么后面有個(gè)s，呵，復(fù)數(shù)形 式，小學(xué)英語了，不用我解釋了，既然是復(fù)數(shù)，當(dāng)然一個(gè)時(shí)間線中可以有N個(gè)關(guān)鍵幀了。

現(xiàn)在，你一定是云里霧里的，所以說嘛，理論的東西講得再多也是廢話，還是實(shí)例可愛一點(diǎn)吧？

這一節(jié)先來講一下DoubleAnimationUsingKeyFrames，里面的關(guān)鍵幀有三種：LinearDoubleKeyFrame、 SplineDoubleKeyFrame和EasingDoubleKeyFrame，我們只玩前面兩個(gè)，后面那個(gè)是帶緩動函數(shù)的動畫，由于緩動動畫的 原理都一樣，可以舉一反六，所以我打算放到專門的一節(jié)中去吹。

LinearDoubleKeyFrame是比較好懂的，其實(shí)它和DoubleAnimation很像，只是關(guān)鍵幀的特點(diǎn)就是一個(gè)時(shí)間點(diǎn)對應(yīng)一個(gè)值，因此，記住這句話：任何關(guān)鍵幀都有KeyTime和Value一一對應(yīng)的，一個(gè)時(shí)間點(diǎn)對應(yīng)一個(gè)值。

而線性關(guān)鍵幀動畫的特點(diǎn)就是“勻速直線運(yùn)動”，復(fù)習(xí)一下初中物理知識。兩個(gè)關(guān)鍵之間的兩個(gè)值都是根據(jù)時(shí)間間隔的大小均勻計(jì)算的。

另外，再看一下SplineDoubleKeyFrame，這個(gè)東西比較難理解，其實(shí)，你不理解它也可以用的，真的，這世界上有些東西不一定非要你 弄懂了才能用的，比如，你不太可能在吃藥之前要研究一下藥是怎么加工出來的再吃，你吃飯之前難道也要想明白大米是如何種出來才吃嗎？顯然不是的。

SplineDoubleKeyFrame被SDK文檔翻譯為樣條內(nèi)插，這更增加了神奇感。我在學(xué)習(xí)的時(shí)候，凡是遇到這種根本讀不懂的東西的話，我***時(shí)間就寫代碼來試，寫不同的代碼，從不同的角度去測試，玩多了，你的靈感就來了。

這個(gè)什么內(nèi)插補(bǔ)間動畫，說通俗一點(diǎn)，不就是“變速直線運(yùn)動”了，你看，又復(fù)習(xí)中考物理了，唉，當(dāng)年我差點(diǎn)考滿分，就是被加速度這玩兒耍了。

其中關(guān)鍵的是有個(gè)KeySpline屬性，它設(shè)置一個(gè)KeySpline對象，KeySpline類有兩個(gè)屬性：ControlPoint1和ControlPoint2，就是兩個(gè)點(diǎn)，傳說是貝塞爾曲線的兩個(gè)控制點(diǎn)。

真的復(fù)雜了，如果你覺得真的難理解的話，有沒有興趣玩一下這個(gè)游戲？玩了之后，你一定對這個(gè)東東有更深的體會，游戲地址：http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm#/?sref=KeySplineExample

這個(gè)游戲很好玩的，一定要認(rèn)真玩啊。

下面，我們動手干活，先來一段美麗的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>   

代碼就這樣的，看不懂后果自負(fù)，***節(jié)中就說過了，先把WPF和Silverlight耍了，再來耍WP。

后臺代碼還要加一個(gè)，處理上面的OnGridLoaded事件。

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

由于是動畫，截圖沒有意義，就不發(fā)了，自己運(yùn)行一下吧。你的作品，你一定很高興！

歷史證明，一個(gè)例子是不夠的，下面再來一“瓶”，這個(gè)例子我們對一個(gè)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();   
}  

這個(gè)嘛，還是發(fā)個(gè)圖好點(diǎn)，免得有人說沒真相，圖片大家可以隨便找，只要內(nèi)容健康就行了。

還要告訴各位一件事，免得大家去“狗狗擺渡”，與動畫相關(guān)的類，基本上都位于System.Windows.Media.Animation命名空間。

至于源碼問題，大部分文章我會保留源碼，我這個(gè)人比較落后，沒有用網(wǎng)盤，所以，暫時(shí)這樣吧，有需要源碼的朋友，請留下你那個(gè)心愛的伊妹兒做人質(zhì)吧，我會善待她的，放心。