天天看點

Expression Blend執行個體動畫-大壩水位升高示範

原文:

Expression Blend執行個體動畫-大壩水位升高示範

Expression Blend是個很強大的東西,用它可以完成很多不好做的動畫效果。

動畫的主要元素:

  時間線(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) :通過觸發器可以啟動和停止動畫。

我這裡用vs2013自帶的Blend工具來制作一個簡單的大壩水位升高的動畫示範:

Expression Blend執行個體動畫-大壩水位升高示範

1.打開Blend後建立一個Wpf項目:

Expression Blend執行個體動畫-大壩水位升高示範

2.用左側的“筆”工具畫出所需要的大壩及湖泊的大概形狀出來,用label或者textbox控件加入相應的文字資訊,然後可以填充一下自己需要的顔色:

Expression Blend執行個體動畫-大壩水位升高示範
Expression Blend執行個體動畫-大壩水位升高示範

3.在對象菜單欄下面選擇“建立”按鈕,建立一個StoryBoard,擊“Ok”後,Objects

and Timeline編輯框将載入剛剛建立的StoryBoard,在右邊出現了動畫控制按鈕,關鍵幀設定按鈕以及時間線顯示面闆。

Expression Blend執行個體動畫-大壩水位升高示範

4.在設計主視窗,會看到一個紅色框,這代表着控件處于動畫錄制狀态:

Expression Blend執行個體動畫-大壩水位升高示範

5.在黃色程序線為“0:00:00”的位置,點選添加一個KeyFrame關鍵幀:

Expression Blend執行個體動畫-大壩水位升高示範

6.移動黃色程序線到“0:01:000”位置:

Expression Blend執行個體動畫-大壩水位升高示範

7.最後拖動湖泊這個梯形向上拉即可:

Expression Blend執行個體動畫-大壩水位升高示範

8.如果想一直循環運作或者規定次數的話,可以在屬性進行設定,選擇AutoReverse和RepeatBehavior:

Expression Blend執行個體動畫-大壩水位升高示範

9.運作後效果如圖:

Expression Blend執行個體動畫-大壩水位升高示範