零基礎學通Silverlight4（5）：動畫

時間 2020-01-19

標籤零基礎 silverlight4 silverlight 動畫欄目 Silverlight 简体版

原文原文鏈接

5.1 動畫特性

經過動畫能夠建立動態的用戶界面，能夠不使用事件處理代碼，而用聲明的方式建立動畫，使畫面動起來不用編寫任何C#代碼，並將它無縫地集成到普通的頁面中。動畫由靜態圖像快速連續的變換的一種幻覺，各圖形間輕微的不一樣，連串起來，就覺得是產生了一個變化，經過快速播放一系列圖像而產生的錯覺。人腦將這一系列圖像看做是一個不斷變化的場景。在電影中，攝影機經過每秒記錄大量照片（即，幀）來產生這種錯覺。當放映機播放這些幀時，觀衆看到的是運動的圖片。

建立逐幀動畫意味着每一幀均可以包含不一樣的圖像（或對象）。所生成的動畫可能會很是大，而且在運行時要佔用大量資源。出於上述緣由，Expression Blend 動畫將基於記錄屬性更改的關鍵幀，並在運行時動態顯示屬性更改之間的過渡效果。此外，在 Expression Blend 中，全部須要在動畫時間線期間顯示或消失的對象在整個時間線期間均存在。但能夠使用關鍵幀來更改對象的可見性屬性，使其顯示或消失。

動畫類型分爲兩類：

①基本動畫：可稱爲From/To/By動畫，經過指定一個起始和終止值，或屬性的一個偏移來定義動畫，如上面的演示同樣。動畫類型有：DoubleAnimation、ColorAnimation、PointAnimation

②關鍵幀動畫：經過一系列關鍵幀指定的值之間運動。動畫類型有：DoubleAnimationUsingKeyFrames、ColorAnimationUsingKeyFrames、PointAnimationUsingKeyFrames

動畫具備類似的屬性，基本屬性有：

①Duration：指定動畫執行一次所須要的時間。默認值1秒。

②AutoReverse：動畫播放結束時，是否向後播放。

③RepeatBehavior：動畫播放的次數。默認狀況下，只會播放一次。該屬性有三種可能：持續時間、重複次數、永遠。

④Storyboard.TargetName：指定爲哪一個圖形對象設置動畫。

⑤Storyboard.TargetProperty：指定的圖形元素的哪一個屬性應用動畫。

⑥FillBehavior：迴歸到起始位，如設置爲Stop自動迴歸到起始位，默認值是HoldEnd，保持動畫的位置於末尾不變。

⑦EventTrigger對象：具備一系列行爲的觸發器。

⑧BeginStoryboard對象：開始一個故事板中的動畫。

基本操做步驟：

1）Expression Blend 中，打開或新建一個項目。

2）按 F6 切換到"動畫"工做區。（按 F6 可在可用的工做區之間切換。在"動畫"工做區中，"對象和時間線"面板位於美工板的下方。）建立要動態顯示的任何對象。對象是指 Expression Blend 中的美工板上的項目。例如，若是您從"工具"面板中選擇"矩形"，並在美工板上繪製矩形，則會建立一個矩形對象。

3）在"對象和時間線"面板中，單擊"新建"。此時，將顯示"建立情節提要資源"對話框。

4）在"資源名(關鍵字)"字段中，鍵入時間線的名稱，而後單擊"肯定"。Expression Blend 將進入時間線錄製模式，而且播放指針位於 0 秒標記處。當處於錄製模式中時，所設置的任何屬性都將在該時間線上自動記錄一個關鍵幀。

5）在"對象和時間線"面板中，選擇要動態顯示的對象。

6）若是但願選定的對象從其當前位置和外觀開始運行，請單擊"記錄關鍵幀"，以在 0 秒標記處記錄該對象。將在與選定對象對應的行中的時間線上顯示一個關鍵幀。

7）在"對象和時間線"面板中，將播放指針拖動到動畫的結束時間點處。

8）若是但願對象在動畫結束和開始時的外觀相同，請單擊"記錄關鍵幀"按鈕。

9）將播放指針移到時間線上但願屬性發生改變的位置處。

更改選定對象的屬性，例如對象的位置、顏色或大小。時間線上將自動顯示一個用於記錄屬性更改的關鍵幀。

10）若要查看剛纔建立的動畫，可單擊"對象和時間線"頂部的"播放"按鈕。

範例滾動的球

建立一個來回滾動的球。

1 ）啓動 Microsoft Expression Blend ，建 Silverlight 項目，並將其打開以供編輯。您如今便可在項目的主頁 (MainPage.xaml) 中建立內容。

2 ）在 " 工具 " 面板中，選擇其中橢圓形工具，如圖圖 11.3-1 。

圖 11.3-1

3 ）美工板上，經過拖動鼠標在 MainPage.xaml 的設計界面中繪製一個橢圓，並在「屬性面板」的佈局中設置其下列屬性，如圖 11.3-2

Height=90 ， Width=300 ， StrokeThickness=0

如圖 11.3-2

在按住 Shift 的同時進行拖動，可以使高度和寬度保持相同。這樣作可在繪製矩形時生成正方形，在繪製橢圓時生成圓形。

在按住 Alt 的同時進行拖動，可將點擊的第一個點做爲中心點，而不是以該點做爲所繪形狀的左上角。

4 ）在「屬性面板」的畫筆下單擊 Fill ，再單擊「漸變畫筆」標籤，接着單擊「徑向漸變」畫筆，見如圖 11.3-3

如圖 11.3-3

5 ）單擊「工具箱」中的「漸變工具」，將會看到一個漸變箭頭，如圖 11.3-6 。

11.3-6

6 ）鼠標調整漸變畫筆的中心點，完成後效果以下圖 11.3-7 ：

11.3-7

7 ）重複 8 ）、 9 ），再繪製一個橢圓，並設置其下列屬性，完成後效果如圖 11.3-8 ：

Height=70 ， Width=240 ， StrokeThickness=0

圖 11.3-8

8 ）按住 Shift ，單擊「工具箱」中的「選擇」工具，選中兩個橢圓。

9 ）在「對象」菜單上，單擊合併、排斥。

若要將全部形狀或路徑均合併到單一對象中，請單擊 " 相併 " 。

若要根據相交部分剪切形狀或路徑，但保留全部未相交部分，請單擊 " 相割 "

若要保留對象的重疊區域並刪除不重疊區域，請單擊 " 相交 " 。

若要保留非重疊區域並刪除重疊區域，請單擊 " 相斥 " 。

若要刪除最後選定的形狀之外的其餘全部選定形狀，請單擊 " 相減 " ，如圖圖 11.3-9 。

圖 11.3-9

10 ）在 " 工具 " 面板中，選擇其中橢圓形工具，在美工板上，經過拖動鼠標繪製一個圓，並設置其下列屬性。

Height=30 ， Width=30 ， StrokeThickness=0

11 ）「屬性面板」的畫筆下單擊 Fill ，再單擊「漸變畫筆」標籤，接着單擊「線性漸變」畫筆，在下面的調色板中選擇顏色，設置漸變顏色爲黑到淡紅。效果如圖 11.3-10 ：

圖 11.3-10

12 ） F6 切換到 " 動畫 " 工做區，準備建立腳本（ Storyboard ）實現動畫。

按 F6 可在可用的工做區之間切換。在 " 動畫 " 工做區中， " 對象和時間線 " 面板位於美工板的下方。

13 ） " 對象和時間線 " 面板中，單擊 " 新建 " ，此時，將顯示 " 建立 Storyboard 資源 " 對話框，如圖圖 11.3-11 。

圖 11.3-11

14 ）在 " 名稱 ( 關鍵字 )" 字段中，鍵入資源的名稱，而後單擊 " 肯定 " 。

15 ） " 對象和時間線 " 面板中，選擇圓。

16 ）擊 " 記錄關鍵幀 " ，以便記錄在 0 秒播放點標記上的對象的當前位置處外觀，如圖圖 11.3-12 。

圖 11.3-12

17 ） " 對象和時間線 " 面板中，將播放點拖到 1s 的時間點上，移動圓到新的位置，

18 ）播放點拖到下一時間點上，不斷重複，讓圓繞一圈。

19 ）擊 " 對象和時間線 " 頂部的 " 播放 " 按鈕，可查看剛纔建立的動畫效果

20 ）擊「對象和時間線」中打開的名稱，此時屬性面板會顯示該腳本可供設置的屬性，選中 AutoReverse ， RepeatBehavior 次數設爲 2x 。

AutoReverse 屬性設置爲 True 時，動畫播放結束時，會循着原來的軌跡逆向播放。

RepeatBehavior 屬性用來決定動畫播放的次數，如設置爲 Forever 則爲不斷地重複播放

21 ）現已完成了動畫的設計操做，會保存爲 UserControl 的資源，可切換至 XAML 視圖來查看，以下爲自動產生的動畫資源 XAML 代碼。

<UserControl.Resources>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</UserControl.Resources>

22 ）啓動動畫：

Storyboard1.Begin ();

更詳細內容及源代碼下載：

http://www.amazon.cn/mn/detailApp/ref=sr_1_1?_encoding=UTF8&s=books&qid=1287058088&asin=B0043RT7I2&sr=8-1

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

零基礎學通Silverlight4（5）：動畫

5.1 動畫特性

範例 滾動的球

範例滾動的球