Expression Blend學習動畫基礎

原文:

Expression Blend學習動畫基礎

什麼是動畫（Animation）？

動畫就是時間+換面的組合，畫面跟着時間變化。最常見的是flash的動畫，還有GIF動态圖檔。

動畫的主要元素

時間線（Timeline）：定義了值随着時間的變化方式。有不同類型的時間線，可用于改變不同類型的值。是以時間線的基類都是Timeline。為了連續改變double，可以使用DoubleAnimation類。

Timeline的主要屬性

AutoReverse ：使用該屬性，可以指定連續改變的值在動畫結束後是否傳回初始值。

SpeedRatio：使用該屬性，可以改變動畫的執行速度。在這個屬性中，可以定義父子元素的相對關系。預設值為1，将速率設為較小的值時，動畫的執行速度較慢。

BeginTime：使用該屬性，可以指定從觸發事件開始到動畫開始之間的長度。

Duration：指定動畫執行一次的時間長度。

RepeatBehavior：定義動畫重複的次數或重複的時間。

FillBehavior：如果父元素的時間線有不同的持續時間，則FillBehavior屬性就很重要。

關于更多的Timeline類的屬性可以參考？MSDN：

http://msdn.microsoft.com/zh-cn/library/system.windows.media.animation.timeline_properties%28VS.85%29.aspx

情景闆（Storyboard）：

用于合并動畫。Storyboard類派生子基類TimelineGroup，TimelineGroup又派生自基類Timeline。

情景闆或者故事闆繼承自基類Timeline，但是可以包含幾個時間線。StoryBoard類可以用于控制時間線。

StoryBoard類的主要方法如下：

Begin()：啟動與情景闆相關的動畫

BeginAnimation()：可以為一個依賴屬性啟動單個動畫

CreateClock():傳回一個Clock對象，用于控制動畫

Pause()、Resume()：暫停、恢複動畫

Seek()：使動畫移動到指定的時間處

Stop()：停止動畫

觸發器（Trigger）：通過觸發器可以啟動和停止動畫。

在本文中，将以具體的執行個體建立動畫。

文字圍着地球轉動

1.建立WPF Application，命名為WpfAnimations，往窗體中拖入一張圖檔，如下圖：

tips：可以直接将圖檔拖到美化版中，Expression Blend會自動将圖檔添加到項目中的

2.往美化中添加TextBlock，字型設為Old English Text MT，大小為24，輸入字母A，并選擇按Ctrl+C進行複制，複制5個一模一樣的

複制後會看到時間與對象面闆中如下，但是界面中卻仍然是隻有一個TextBlock，這是因為它們重疊在一起了，我們可以拖動它，如下

3.在其餘的TextBlock分别輸入“Alexis”的其他字母，可以看到其他字母也是Old English Text MT，24大小的。并将它們沿着地球圍轉，可以使用鍵盤的方向鍵進行微調，或者是使用屬性面闆進行微調，最後的形狀如下：

4.接下來，我們将這6個TextBlock合并到一個Grid裡面，将這六個TextBlock選中，可以直接在美化版中選中一個後按住Shift鍵，然後再點選其他的TextBlock

即可選中，或者簡單的在美化版中畫一個區域将這些TextBlock圈住（類似桌面中選中多個檔案一樣），或者是直接在對象與時間線面闆中将這些TextBlock選擇【推薦】，最後的結果圖如下：

5.選擇菜單欄===>對象===>合并==》Gird，如下圖，合并後，觀察對象與時間線面闆中，會發現這些合并的TextBlock多了一個父節點Grid

6.接下來我們就可以開始錄制動畫了，添加一個Trigger，如下圖，并錄制一個StoryBoard

7.會彈出StoryBoard還不存在，是否建立一個情景闆，點選OK，此刻已經開始動畫的錄制了。我們需要做的就是錄制兩個關鍵的幀

8.在時刻0的時候，我們将合并的Grid的中心移到地球的中心處，以便後面Grid随着中心旋轉

9.在時刻 2秒處（或者更長）處，将Grid的旋轉讀書設為360

10.此刻我們就可以點選播放按鈕預覽效果了，如果想要動畫一值播放下去，需要将動畫的循環次數設為無窮次

11.ok，最後的效果圖如下：

PS：如果想要做出文字發光的效果，如在每隔一秒文字的某個部分發光一次，則可以在1秒時刻的時候，将這部分顔色調亮些，然後再使動畫播放次數為無窮次即可這邊就不詳細列出步驟了。