星期六, 1月 14, 2012

[Expression Blend ] 如何製作 2D 動畫

vI

「如何製作 2D 動畫」,算是Silverlight一個很重要的主題,

"動畫"這部分可以說是 Silverlight 的靈魂或血肉。



"動畫"簡單來說,是指由很多張靜態的圖片,以一定的速度(如每秒16張)連續播放時,肉眼因視覺殘象產生錯覺,而誤以為畫面活動的作品。
(此定義來自WiKi-動畫)

(每秒10幀的gif 動畫)


以往使用Windows Form (C#,VB)寫出來的程式,

若要做出動畫效果,往往會相當的費工耗時,

而Blend 4 + Silverlight 則可以很輕鬆的製作出絢麗的動畫效果。


有了簡單對動畫概念的了解後,

可以得知,我們需要一套可以連續切換,

很多張圖片且可以定義順序撥放的工具。

這工具在Silverlight 裡,名為Storyboard 我們通常稱他為腳本。

我們可以在Blend 4, 「視窗=>工作區=>動畫」,看到製作腳本的相關工具

2


製作圖片或物件播放流程的工具:
3

而要讓動畫在Silverlight 來撥放,

我們還需要一個關鍵工具:ControlStoryboardAction(控制腳本行為)


在「資產=>行為=>ControlStoryboardAction」可以找到它

0

而透過ControlStoryboardAction (控制腳本行為)的屬性,

我們可以決定要由什麼事件來觸發,

如:滑鼠左鍵點擊或畫面載入等多種事件來啟動播放動畫。

且可以製作很多個腳本動畫,決定要播放來一個腳本動畫。


1
  • 影片教學



執行結果:




範例原始碼下載: 









  • 延伸練習範例



  • 延伸練習教學影片


範例原始碼下載:




更多詳細資料可參考MSDN:
1.Expression Blend 動畫行為:ControlStoryboardAction 

0 意見 :

張貼留言

回覆意見時,麻煩輸入一下暱稱
(隨便取個名字也好~ ^_^)
好讓我方便回覆您的問題,
選擇「名稱/網址」輸入您的暱稱,
麻煩一下,謝謝大家。

關閉廣告 [X]