2009年7月27日 星期一

StepByStep(31):Silverlight 3動畫-轉轉圖


做出以下效果的Silverlight動畫:




開發工具 : Visual Studio 2010 Beta1 + Expression 3
1.使用Visual Studio 2010 Beta1 建一個Silverlight App
2.加一張圖片到Silverlight App 專案
3.開啟Blend設計Page.xaml
4.將圖片拖到 page.xaml設計畫面

5.設定圖片Layout
6.Add state group
7.Add state,做兩次,一個命名為Normal;一個命為Bigger (目前測試不能命中文,無法Run)
8.設Bigger State 的Scale , 放大兩倍,x=2;y=2;
9.設定旋轉 Rotate角度
10.設定Default Transition時間
11.存檔,回到Visual Studio
12.選取畫面上的Image,設定MouseEnter為goBigger;MouseLeave為goNormal;


13. 程式碼:

1 private void goBigger(object sender, MouseEventArgs e)

2 {

3 VisualStateManager.GoToState(this, "Bigger", true);

4 }

5

6 private void goNormal(object sender, MouseEventArgs e)

7 {

8 VisualStateManager.GoToState(this, "Standard", true);

9 }


14.執行測試網頁,滑鼠未移到圖片上時,Image是標準大小
15.滑鼠移到圖片上方,將放大並旋轉

沒有留言:

總瀏覽量