盡管前面介紹的幾種動畫會讓覺得很好玩了，但是，不知道你是否發現，在前面說到的一系列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代碼。+

[html]?view plaincopyprint?

1. <Grid?Loaded="OnGridLoaded">??
2. ????<Ellipse?VerticalAlignment="Top"?HorizontalAlignment="Left"??
3. ?????????????Width="100"?Height="100"?Fill="Blue">??
4. ????????<Ellipse.RenderTransform>??
5. ????????????<TranslateTransform?x:Name="trf"/>??
6. ????????</Ellipse.RenderTransform>??
7. ????</Ellipse>??
8. ????<Grid.Resources>??
9. ????????<Storyboard?x:Name="storybrd">??
10. ????????????<DoubleAnimationUsingKeyFrames?Duration="0:0:6"??
11. ???????????????????????????????????????????RepeatBehavior="Forever"??
12. ???????????????????????????????????????????Storyboard.TargetName="trf"??
13. ???????????????????????????????????????????Storyboard.TargetProperty="X">??
14. ????????????????<LinearDoubleKeyFrame?KeyTime="0:0:6"?Value="420"/>??
15. ????????????</DoubleAnimationUsingKeyFrames>??
16. ????????????<DoubleAnimationUsingKeyFrames?Duration="0:0:6"??
17. ???????????????????????????????????????????RepeatBehavior="Forever"??
18. ???????????????????????????????????????????Storyboard.TargetName="trf"??
19. ???????????????????????????????????????????Storyboard.TargetProperty="Y">??
20. ????????????????<SplineDoubleKeyFrame?KeyTime="0:0:2"?Value="700">??
21. ????????????????????<SplineDoubleKeyFrame.KeySpline>??
22. ????????????????????????<KeySpline?ControlPoint1="0,0"?ControlPoint2="0,1"/>??
23. ????????????????????</SplineDoubleKeyFrame.KeySpline>??
24. ????????????????</SplineDoubleKeyFrame>??
25. ????????????????<SplineDoubleKeyFrame?KeyTime="0:0:3"?Value="550">??
26. ????????????????????<SplineDoubleKeyFrame.KeySpline>??
27. ????????????????????????<KeySpline?ControlPoint1="1,0"?ControlPoint2="0.5,0"/>??
28. ????????????????????</SplineDoubleKeyFrame.KeySpline>??
29. ????????????????</SplineDoubleKeyFrame>??
30. ????????????????<SplineDoubleKeyFrame?KeyTime="0:0:5"?Value="95">??
31. ????????????????????<SplineDoubleKeyFrame.KeySpline>??
32. ????????????????????????<KeySpline?ControlPoint1="0,0"?ControlPoint2="0,0.5"/>??
33. ????????????????????</SplineDoubleKeyFrame.KeySpline>??
34. ????????????????</SplineDoubleKeyFrame>??
35. ????????????????<LinearDoubleKeyFrame?KeyTime="0:0:6"?Value="730"/>??
36. ????????????</DoubleAnimationUsingKeyFrames>??
37. ????????</Storyboard>??
38. ????</Grid.Resources>??
39. </Grid>??

代碼就這樣的，看不懂后果自負，第一節中就說過了，先把WPF和Silverlight耍了，再來耍WP。

?

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

[csharp]?view plaincopyprint?

1. private?void?OnGridLoaded(object?sender,?RoutedEventArgs?e)??
2. {??
3. ????this.storybrd.Begin();??
4. }??

?

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

?

?

?

歷史證明，一個例子是不夠的，下面再來一“瓶”，這個例子我們對一個Image控件玩動畫，讓圖片動著出來，動著滾蛋，主要用到透視變換。

[html]?view plaincopyprint?

1. <Grid?Loaded="OnGridLoaded">??
2. ????<Image?Name="img"?Source="/PhoneApp1;component/1.jpg"?Stretch="Uniform"?Opacity="0">??
3. ????????<Image.Projection>??
4. ????????????<PlaneProjection?x:Name="prj"?/>??
5. ????????</Image.Projection>??
6. ????</Image>??
7. ????<Grid.Resources>??
8. ????????<Storyboard?x:Name="std"?RepeatBehavior="Forever"?Duration="0:0:12">??
9. ????????????<DoubleAnimationUsingKeyFrames?Storyboard.TargetName="img"??
10. ???????????????????????????????????????????Storyboard.TargetProperty="Opacity">??
11. ????????????????<LinearDoubleKeyFrame?KeyTime="0:0:3"?Value="1"/>??
12. ????????????????<LinearDoubleKeyFrame?KeyTime="0:0:8"?Value="1"/>??
13. ????????????????<LinearDoubleKeyFrame?KeyTime="0:0:12"?Value="0"/>??
14. ????????????</DoubleAnimationUsingKeyFrames>??
15. ????????????<DoubleAnimationUsingKeyFrames?Storyboard.TargetName="prj"??
16. ???????????????????????????????????????????Storyboard.TargetProperty="LocalOffsetZ">??
17. ????????????????<LinearDoubleKeyFrame?KeyTime="0:0:0"?Value="-6000"/>??
18. ????????????????<LinearDoubleKeyFrame?KeyTime="0:0:8"?Value="0"?/>??
19. ????????????????<LinearDoubleKeyFrame?KeyTime="0:0:12"?Value='-12'/>??
20. ????????????</DoubleAnimationUsingKeyFrames>??
21. ????????????<DoubleAnimationUsingKeyFrames?Storyboard.TargetName="prj"??
22. ?????????????????????????????Storyboard.TargetProperty="RotationZ">??
23. ????????????????<SplineDoubleKeyFrame?KeyTime="0:0:0"?Value="360"/>??
24. ????????????????<SplineDoubleKeyFrame?KeyTime="0:0:8"?Value="0">??
25. ????????????????????<SplineDoubleKeyFrame.KeySpline>??
26. ????????????????????????<KeySpline?ControlPoint1="0,0"?ControlPoint2="0.25,0.5"/>??
27. ????????????????????</SplineDoubleKeyFrame.KeySpline>??
28. ????????????????</SplineDoubleKeyFrame>??
29. ????????????</DoubleAnimationUsingKeyFrames>??
30. ????????????<DoubleAnimationUsingKeyFrames?Storyboard.TargetName="prj"??
31. ???????????????????????????????????????????Storyboard.TargetProperty="RotationY">??
32. ????????????????<LinearDoubleKeyFrame?KeyTime="0:0:8"?Value="0"/>??
33. ????????????????<LinearDoubleKeyFrame?KeyTime="0:0:12"?Value="90"/>??
34. ????????????</DoubleAnimationUsingKeyFrames>??
35. ????????</Storyboard>??
36. ????</Grid.Resources>??
37. </Grid>??

別忘了處理OnGridLoaded。

[csharp]?view plaincopyprint?

1. private?void?OnGridLoaded(object?sender,?RoutedEventArgs?e)??
2. {??
3. ????this.std.Begin();??
4. }??

?

這個嘛，還是發個圖好點，免得有人說沒真相，圖片大家可以隨便找，只要內容健康就行了。

?

?

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

?

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

?

轉載于:https://www.cnblogs.com/songtzu/archive/2012/07/24/2607100.html

總結

以上是生活随笔為你收集整理的Windows Phone开发（39）：漫谈关键帧动画上篇 转：http://blog.csdn.net/tcjiaan/article/details/7550506...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。