part1: rocket up
Nibble將要教您Silverlight1.0中基本的動畫創作。在第一部分,我們將要製作一個火箭升空的動畫。
完成此教程,你需要安裝Expression Blend 2的9月預覽版。
本教程配套專案檔下載:part1, part2
- 建立一個新的Silverlight 1.0項目。
a.開啟Expression Blend 2的9月預覽版。
b.選擇 檔案>新項目… 開啟建立新項目對話方塊()。
c.選擇Silverlight Application (JavaScript)並點擊OK。新項目被建立同時Page.xaml出現在畫布中。
- 匯入並開啟Rocket插圖(XAML)。
a.在屬性面板的"檔案"的項目名上右擊並選擇添加已存在項目…
b.瀏覽到專案檔夾中的rocket.xaml檔案。()
c.點擊開啟按鈕匯入XAML檔案。
這個XAML包含了我們將用來製作動畫的rocket的插畫。XAML檔案中插畫是由一系列的路徑(向量圖形)組成的。
d.在屬性面板的"檔案"中雙擊剛匯入的rocket.xaml檔案。這樣您就應該能在"舞台"中看到rocket了。
- 由Rocket.xaml中拷貝插畫。
a.在互動面板"對象與時間軸"中選擇rocket項。
b.按Ctrl+C將映像拷貝到剪下板。
- 粘貼插畫到Page.xaml
a.選擇Page.xaml標籤,定位到視窗的上部()。
b.按Ctrl+V鍵將插畫粘貼到Page.xaml檔案中。現在我們可以準備使我們的火箭動起來了。
- 將Rocket置於舞台之外。
a.點擊舞台中的rocket選中它。藍色的控制代碼會出現在插畫的四周作為對選中的響應。
點擊並拖拽rocket到舞台的左下方並在可視地區之外,參考插圖。
- 建立一個故事板。
a.點擊"開啟,建立或管理故事板"(Open,create or manage Storyboards)按鈕,開啟故事板拾取器對話方塊。
b.點擊建立新故事板按鈕開啟建立故事板對話方塊。
c.在名稱欄鍵入flyin。
d.取消選中"作為資源建立",因為我們想讓其一載入時就播放。
e.點擊確定。一條新的時間軸就出現在視窗的底部。
- 繪製Rocket的位置
a.移動playhead到時間0:01.000位置。
要移動時間標記,您即可以點擊並拖動黃色的三角標記,也可以在Playhead position文字框輸入值。
b.點擊並拖動rocket,將其移動到舞台中央。
這將自動在1秒位置處建立一個關鍵楨,因為錄製(recording)預設是開啟的(參考)。
儲存你的工程檔案,選擇 檔案>儲存(Ctrl+s),然後選 項目>測試專案(F5)。你會看到1秒鐘內火箭由左下部移動到中心位置的動畫效果。
- 關閉故事板
a.在互動面板"對象與時間軸"中點擊關閉故事板按鈕(參考圖)。
這將關閉flyin這條時間軸。
- 下一步…
這是一個很簡單的例子,現在你可以準備進入下一步了。
繼續下一個nibble Animations Part:Rocket Down來學習有趣的動畫技術。
part2: rocket down
在第二部分中,我們將使火箭類比自由落體運動,你將控制加速度並建立更多的關鍵楨。
同樣完成此部分教程,你需要安裝Expression Blend 2的9月預覽版。
- 開啟第一部分完成的項目。
a.開啟第一部分Rocket Up項目。完成後效果。
- 開啟時間軸—flyin。
a.在互動面板"對象與時間軸"中點擊"開啟,建立或管理故事板"按鈕開啟故事板拾取器對話方塊。
b.點擊flyin故事板開啟它。參考。
- 在0:00.000處建立關鍵楨。
a.選擇rocket對象。
b.點擊錄製關鍵楨按鈕在0:00.000處建立一個關鍵楨。參考
- 動畫的漸層(Ease)效果
我們建立的第一個動畫非常的枯燥,將火箭由一點移動到另一點而不能控制其加速度。我們可以調整關鍵楨的Ease in及Ease out屬性來控制Expression Blend中對象的加速度。
a.右擊0:01.000處的關鍵楨,在彈出的操作功能表中選擇Ease In > 100%。這樣當火箭將到達中央時將產生減速的效果。參考
給Ease In及Ease Out賦不同的值來測試專案,感受一下有啥不同。
- 在0:01.300處建立關鍵楨
現在我們將使火箭在空中停留一小段時間,然後使其自由落體下降。
a.選擇rocket對象並將時間移動到0:01.300。
b.點擊錄製關鍵楨按鈕建立另一個關鍵楨。這個關鍵楨將使火箭在它的位置保持0.3秒中。
- 在0:02.000處移動並旋轉火箭。
a.將時間軸移動到0:02.000處
b.點擊並垂直向下拖動rocket到舞台外。
c.旋轉rocket使其指向下方。你可以使用藍色的控制代碼來旋轉對象,只需將滑鼠移近一個選中的角一個藍色的旋轉游標就會出現(見圖片)。
正如你看到的,你不需要建立一個關鍵楨,你只需改變對象的屬性Blend會自動使用新屬性建立一個關鍵楨。在本例中我們改變了動畫的位置及方向。
- 通過調整Ease Out類比重力效果
a.右擊0:01.300處的關鍵楨並選擇Ease Out > 100%使其產生類比重力加速度的效果。
按Ctrl+s儲存更改並按F5測試專案,你會看到火箭升空、在空中停留一會,然後垂直下落。
- 2007 9月預覽版新增的KeySpline功能。
除了前面描述的Easy In與Easy Out選項之外,從2007 9月預覽版起你可以使用KeySpline映像來控制動畫。
你只需點擊一個關鍵楨,然後到屬性面板中"Easing"類別下就可以調節KeySpline。參見。
下一步…
記住你可以在動畫中進行其他形式的樣式變化,如縮放及傾斜。
你同樣可以製作出如透明度,顏色,透明標記,漸層色等屬性變化的動畫效果。
現在你已經具備了瀏覽其他動畫效果的基本知識。