星期五, 1月 20, 2012

[Expression Blend ] 如何製作轉場(過場)動畫

vI

今天 KT 要來介紹,

如何使用VisualState(視覺狀態),來製作轉場(過場)動畫。



所以我們來看一下今天的工具位置:

點擊 <狀態> 面板後,可以在下方找到一個+的符號:<新增狀態群組>

點擊之後會新增一個VisualStateGroup(視覺狀態群組),

在他的右方可以找到一個+的符號:<新增狀態>,


點擊一次則會新增一個VisualState(視覺狀態)

影像 000

我們將點擊三次<新增狀態>,新增三個VisualState(視覺狀態)
影像 001

分別將在三個狀態裡,佈置不一樣的畫面,且加入按鈕,

在按鈕裡加入,「資產=>行為=>GoToStateAction」來切換三個狀態畫面。
影像 002

而在<狀態> 面板裡,有一個fx 的按鈕(TransitionEffect),

則可以加入多樣變化的轉場效果。
(可搭配 EasingFution一起使用,效果更佳)
影像 000
  • 影片教學


執行結果:
(淡進淡出的過場動畫)


範例原始碼下載: 








  • 延伸練習1- 滑動畫面由上至下 :
1.更改TransitionEffect為Slide in,Slide的Direction為TopToBottom
影像 000


2.EasingFution為CubicInOut
影像 001

效果如下:

PS.相對的,如果我們希望畫面是由左至右滑動效果,
Slide的Direction則改為LeftToRight 即可。

更多詳細資料可參考MSDN:
1.GoToStateAction
2.VisualStateGroup 類別
3.Microsoft.Expression.Media.Effects 

0 意見 :

張貼留言

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

關閉廣告 [X]