Nibblestutotials.net教程 – Blend & Silverlight2系列之States – Part2

第二部分： 變換與KeySpline

這一部分將教你一些Blend 2 SP1的進階技術：怎樣建立變換並進行更多控制。

完成這一部分你需要安裝Expression Blend 2 SP1或更高版本。

本文的代碼可以由此下載

1. 下載並開啟項目

使用上面的連結下載項目並開啟。

你應該看到如所示的一些東西。

 

1. 建立一個新的Over狀態

使用上一篇教程中相同的方法在MouseInteraction組中建立一個新的名為Over的state。

1. 點擊添加狀態來建立一個新的state。
2. 將其重新命名為Over。

 

1. 更改Over狀態的屬性

對Over狀態，減小圖片的尺寸。

1. 在Over狀態選中下，點擊圖片並將Scale Transform改為X=0.55，Y=0.55。

 

1. 添加滑鼠進入及移除事件

1. 點擊圖片來選中它，開啟屬性面板下的事件欄。
2. 在MouseEnter與MouseLeave事件中分別輸入goOver及goLeave。（見圖）

這將在Page.xaml.cs中建立兩個分別成為goOver與goLeave的函數。

 

1. 在Page.xaml.cs中添加代碼

為了讓狀態工作，你需要在goOver函數中添加如下代碼，就像我們在上一教程做的。

VisualStateManager.GoToState(this, "Over", true);

在goLeave函數中添加這些代碼，以返回Normal狀態。

VisualStatusManager.GoToState(this, "Normal", true);

參見圖片。

 

1. 控制變換

如果你現在運行程式，你會看到所有的狀態已可以工作，從Normal到Over，要點擊，返回Over，返回Normal，等等。但是所有的變換髮生在0.3秒，這是我們為狀態組定義的預設值。

為了控制單個變換我們需要添加…變換。讓我們添加一個由Over到Click的變換。

1. 在Over狀態上點擊添加變換。

展示給你的是一個該組內所有可能的變化組合的列表。

1. 在操作功能表中選擇Over-> Click。在Over下一個新的變換。
2. 將時間改為0.1。

如果你運行程式你會看到現在當你點擊，動畫的速度會變得快很多。這是一個強大的特性，因為其允許你控制任何狀態使其成為其他狀態。

(*)符號允許你定義一個變換，使所有(*)變為一個指定的狀態。

 

1. 每一個狀態有一個時間軸

當我們使用state的Duration選項定義每一個變換的時間時，我們沒有選項來定義KeySpline(動畫怎樣加速)。要控制KeySpline我們需要開啟狀態的時間軸。

1. 設定預設變換間隔為0。
2. 點擊刪除變化來移除Over -> Click變換。
3. 選擇Over狀態
4. 點擊Show Timeline來擴充Over狀態的時間軸

你將看到針對image元素只有一個keyframe。現在你可以建立動畫，就像Silverlight中任何其它的Storyboard。

 

1. 使用時間線更改變換

既然你已經訪問到了時間軸，你就可以在這裡控制動畫的時間。

1. 要更改時間，拖動keyframe到目的位置。在樣本圖片中，我們展示的例子是一個持續了1秒的變換。但是一個更好的結果應該是0.3s。

 

1. 更改KeySpline

另一個時間軸的進階應用程式是你可以更改KeySpline並控制每個主要畫面格的緩慢In/Out。

1. 點擊keyframe並更改屬性面板中KeySpline的圖形

在這個例子中我們得到一個更自然的動畫，而不是一個枯燥的開始/結束。