首頁 > 動畫和互動功能 > 概觀

動畫和互動功能概觀

• 動畫在 Expression Blend 中的運作方式
• 時間軸
• 主要畫面格
• 手動建立移動路徑或使用移動路徑
• 使用多個及重疊的動畫時間軸
• 畫面格速率
• 場景
• 觸發程序
• 事件處理常式
• 以程式碼編寫的動畫

動畫是由一連串前後稍有不同的影像，在快速播放下所產生的錯覺。人類腦部會將一組影像解讀為單一變化場景。要在影片中製造這種錯覺，需由攝影機每秒錄製大量畫面 (或畫面格)。當放映機將這些畫面格播放出來時，我們就能看到動態的影片。

放映機所播放的畫面格

電腦動畫的原理也很類似。例如，在動畫製作程式中，讓矩形從左邊移到右邊的動畫產生過程如下：

• 程式建立計時器。
• 程式定期檢查計時器來查看已經歷多少時間。
• 程式每次檢查計時器時，就會根據經歷時間來計算矩形目前的位置。
• 程式更新矩形的位置屬性，然後重新繪製矩形。

• 回到頁首

動畫在 Expression Blend 中的運作方式

在 Microsoft® Expression Blend™ 中，動畫是根據「主要畫面格」來進行。若要在 Expression Blend 中建立動畫，您必須在「時間軸」上設定主要畫面格，以標示屬性變更。例如，您可以在 0 秒標記處設定主要畫面格，將矩形的位置記錄在畫板的左邊，然後在 1 秒標記處設定主要畫面格，將相同矩形的位置記錄在畫板的右邊。在這一秒內，矩形的 X 及 Y 屬性會連續發生轉換而形成動畫。當您執行動畫時間軸時，Expression Blend 會在指定的一段時間內連續內插屬性變更，並將結果顯示在應用程式中。您可以對畫板上物件的任何屬性 (包括非視覺屬性) 運用此技巧來製作動畫。

MoveRight 時間軸上設定的主要畫面格，標示 rectangle 物件之 X 及 Y 平移屬性中的屬性變更

在某些電腦動畫程式中，您可以建立「逐格」動畫，也就是說每個畫面格都包含不同的影像 (或物件)。但執行時產生的動畫可能會很大，而且十分耗資源。因此，Expression Blend 動畫的原理是先使用「主要畫面格」記錄屬性變更，然後在執行時期切換屬性變更，藉此形成動畫效果。此外，在 Expression Blend 中，所有您要在動畫時間軸中播放的物件 (不論是要出現或消失的物件) 始終都會存在於時間軸中，但是您可以使用主要畫面格變更它們的可見度屬性，讓物件出現或消失。

雖然您無法在 Expression Blend 的動畫時間軸期間自發地建立新物件，但是可以利用程式碼後置檔案以程式設計方式產生新的物件及新的動畫時間軸。如需詳細資訊，請參閱 MSDN 之＜Windows Presentation Foundation＞一節的＜動畫與計時＞(英文) 主題。

• 回到頁首

時間軸

時間軸提供應用程式中的動畫順序結構。Expression Blend 中的動畫是由時間軸所組成，您可以在時間軸上記錄主要畫面格來代表屬性變更的時間。您可將時間軸想像成畫板上，一層層套用到物件上的屬性變更。

動畫時間軸是使用 [互動] 面板的 [物件與時間軸] 區段所建立 (如需導覽，請參閱互動面板)。您可以使用此面板中提供的控制項，檢視畫板隨時間變化的情形、新增時間軸、修改時間軸等等。

您可以在應用程式的下列位置 (或「範圍」) 建立時間軸：

• 在文件的主要本文中   　如果應用程式的目的是呈現動畫，或您不需要在其他地方重複使用動畫，則可以在文件的主要本文中建立動畫時間軸。如需範例，請參閱建立簡單動畫。
• 在場景 (或「使用者控制項」) 中　   如果需要在單一文件或另一個應用程式中多次重複使用動畫，則可以在使用者控制項中建立動畫時間軸。這也適用於想要將動畫組織在不同文件或專案中的時候。使用者控制項可以新增至畫板，就和其他任何控制項 (如按鈕) 一樣。如需詳細資訊，請參閱下面的場景。如需範例，請參閱建立使用者控制項。
• 在控制項範本中   若要讓應用程式中某種類型 (如按鈕) 的所有控制項都依照相同方式移動，則可以在控制項範本中建立動畫。這並不表示所有控制項都需要看起來完全一樣。如果使用範本繫結 (將範本中的屬性繫結至套用該範本之控制項中的屬性)，每個控制項的動畫中都可以使用不同的色彩或其他視覺外觀。如需詳細資訊，請參閱樣式與範本。如需範例，請參閱將動畫新增至按鈕。

您可以在物件上設定觸發程序來控制時間軸 (啟動、停止、暫停)。如需詳細資訊，請參閱下面的觸發程序。

• 回到頁首

主要畫面格

「主要畫面格」 是時間軸上的標記，指出發生屬性變更的時間。Expression Blend 中有四種主要畫面格：

• 物件層級主要畫面格   物件層級主要畫面格會套用至整個物件 (如矩形物件) 或含有多個物件的格線。除非物件層級主要畫面格是經由按一下 [記錄主要畫面格] 按鈕來手動設定，否則物件層級主要畫面格通常表示其中一個子物件的屬性已變更，而展開該物件下的節點就可以進行查看。例如，上圖 (在動畫在 Expression Blend 中的運作方式下方) 的時間軸上與 rectangle 對應之那一列中設定的主要畫面格，就是物件層級主要畫面格。
• 複合主要畫面格   複合主要畫面格表示屬性具有以動畫方式顯示的子屬性。例如，上圖的時間軸上與 Translation 屬性對應之那一列中設定的主要畫面格，就是複合主要畫面格。使用複合主要畫面格時，只要選取一次就可以修改大量的屬性 (例如，沿著時間軸移動主要畫面格時)。
• 簡單主要畫面格   簡單主要畫面格代表在該時間點只有一項屬性變更。例如，上圖的時間軸上與 X 及 Y 屬性對應之那兩列中設定的主要畫面格，就是簡單主要畫面格。您需要使用簡單主要畫面格來執行特定的動作 (例如編輯動畫的重複計數)。如需範例，請參閱設定重複持續時間。
• 隱含主要畫面格   當其中一個動畫中斷另一個動畫，而第二個動畫的 0 秒標記處未設定主要畫面格時，就會存在隱含主要畫面格。中斷時，Expression Blend 會將屬性的最後一個已知值與在第二個動畫中第一個主要畫面格上設定的值之間的差異以動畫填補。即使最後一個已知值介於第一個動畫的兩個主要畫面格之間，該值還是會視為隱含主要畫面格。此切換效果稱為「遞移式動畫」，會在下面的使用多個及重疊的動畫時間軸中詳細予以說明。

瞭解主要畫面格間的差異十分有用，因為您不一定都需要看到以動畫展示的每一個屬性的詳細資料。您可以摺疊每個物件的屬性，只檢視物件層級主要畫面格。使用物件層級及複合主要畫面格時，只要選取一次就可以一次修改大量的屬性 (例如想要沿著時間軸移動主要畫面格時)。如需範例，請參閱移動主要畫面格。您只需使用簡單主要畫面格就可執行特定的動作 (例如編輯動畫的重複計數)。如需範例，請參閱設定重複持續時間。

「主要畫面格內插」是指一種在兩個主要畫面格之間的時間範圍中以動畫填補屬性變更的方式。可以在一段時間內指派多種內插方法來建立更複雜的值變更：

• 加速   加速值可修改如何隨著時間接近主要畫面格而變更屬性值。您可以指定介於 0% (不加速) 和 100% (全速，等於前一個主要畫面格與所編輯主要畫面格之間的時間間隔的一半) 之間的值，以設定急緩程度。
• 減速   減速值可修改如何隨著時間遠離主要畫面格而變更屬性值。您可以指定介於 0% (不加速) 和 100% (全速，等於所編輯主要畫面格與下一個主要畫面格之間的時間間隔的一半) 之間的值，以設定急緩程度。
• 維持   「維持」不會隨著時間而內插變更，而是在磁頭到達發生變更的主要畫面格時，突然變更為新的屬性值。
• 線性   線性內插會在主要畫面格之間以相等增量來變更屬性值。如果第一個主要畫面格的 [減速] 值是 0%，而第二個主要畫面格的 [加速] 值是 0%，則兩個主要畫面格之間的內插會是線性的。

您可以以滑鼠右鍵按一下時間軸上的主要畫面格，以修改主要畫面格內插值。如需範例，請參閱變更主要畫面格間的動畫內插。

• 回到頁首

手動建立移動路徑或使用移動路徑

手動建立動畫時間軸，可讓您在時間軸中充分控制動畫物件的移動方式及數目。您也可以製作色彩漸變動畫。若要手動在 Expression Blend 中建立動畫時間軸，請按一下 [物件與時間軸] 下的 [建立新的時間軸] 按鈕，然後記錄主要畫面格，方法是先移動時間軸磁頭 ，再修改畫板上的物件以產生主要畫面格。如需範例，請參閱建立簡單動畫。

不論畫板上的路徑是線條或圖形 (如橢圓形或矩形) 的周邊，都可以使用 [轉換成移動路徑] 工具自動產生動畫時間軸，讓目標物件沿著路徑移動。如下圖所示，橢圓形的周邊變成藍色圓形的移動路徑。

	兩個不同的物件：橢圓形及圓形 (使用 [橢圓形] 工具所建立)。
	橢圓形變成移動路徑。此時，您可以選擇是否要刪除橢圓形。
	產生新的時間軸，當播放該時間軸時，圓形就會沿著橢圓形路徑移動。

如需範例，請參閱建立移動路徑。移動路徑並不是使用時間軸上的主要畫面格來呈現，因此您無法修改內插效果。不過，您可以編輯重複計數 (請參閱設定重複持續時間)。產生移動路徑之後，您可以手動將動畫新增至移動路徑所在的相同時間軸。

• 回到頁首

使用多個及重疊的動畫時間軸

Expression Blend 中的時間軸結構可讓您在應用程式中同時執行多個動畫。例如，您可以繪製兩個圓形來代表一隻蝴蝶、建立動畫時間軸讓蝴蝶沿著圓形移動路徑移動，然後建立另一個動畫時間軸讓蝴蝶拍打翅膀。蝴蝶拍打翅膀的動畫和蝴蝶沿著圓形移動的動畫可以同時進行，而不會中斷蝴蝶沿著圓形移動的動畫，因為這兩個時間軸不會使用蝴蝶物件的同一個屬性製作動畫。如需範例，請參閱建立重疊的動畫。

如果兩個動畫時間軸同時利用同一個屬性製作動畫，則時間軸之間的切換效果會因第二個動畫的 0 秒標記處是否已記錄主要畫面格而有所不同。如果 0 秒標記處未記錄主要畫面格，則 Expression Blend 會假設您想要從動畫中斷時屬性最後出現的值，切換至該屬性在第二個時間軸中第一個主要畫面格上的值。此類型的切換稱為「遞移式動畫」。例如，假設有個時間軸會將某個圓形拉成兩倍寬，而另一個時間軸會將該圓形拉成四倍寬。如果第二個動畫時間軸會中斷第一個動畫時間軸，且第二個動畫時間軸的 0 秒標記處未設定主要畫面格，則拉成兩倍寬的橢圓形會從第一個時間軸中斷的時間點平順地展開至第二個時間軸的端點 (原始圓形的四倍寬)。如果第二個動畫時間軸不是遞移式動畫 (即 0 秒標記處設有主要畫面格)，則圓形會突然跳至第二個動畫的起點。如需範例，請參閱播放遞移式動畫。

如果兩個時間軸都利用物件的同一個屬性製作動畫，則即使第一個時間軸是設定為永久重複，該時間軸還是會在中斷時停止。

• 回到頁首

畫面格速率

因為 Expression Blend 中的動畫是經由沿著時間軸設定主要畫面格，再於執行時在主要畫面格間進行內插的方式來建立，所以不需要設定動畫的「畫面格速率」。當您執行應用程式時，.NET Framework 執行時期會以允許的最高畫面格速率來轉譯動畫時間軸。

不過，您可以指定時間軸上設定主要畫面格的間隔。因為此間隔率指的是時間軸上的磁頭 及主要畫面格 可以貼齊的位置，所以稱為「貼齊解析度」。例如，如果將貼齊解析度變更為每秒 10 個主要畫面格，則可以在時間軸的每個十分之一秒處設定主要畫面格。若要變更貼齊解析度，請按一下 [物件與時間軸] 之貼齊格線 切換按鈕旁的下拉式箭號，然後按一下 [貼齊格線] 以顯示 [貼齊解析度] 對話方塊。

• 回到頁首

場景

在 Expression Blend 中，您可以將動畫封裝在場景 (或「使用者控制項」) 內，然後在應用程式的其他文件中重複使用那些動畫。您可以在單一文件或 .dll (控制項庫) 中建立使用者控制項。應用程式內的所有使用者控制項都可以從 [資產庫] 的 [自訂控制項] 索引標籤取得，然後繪製在文件中，就和其他任何控制項一樣。

在專案中新增使用者控制項之後，需要建置專案，才能讓使用者控制項顯示在 [資產庫] 中。請在 [專案] 功能表上，按一下 [建置專案]。

規劃使用者控制項中要以動畫顯示的內容時，請考慮下列事項：

• 各項動畫的計時。例如，假設有個應用程式會先以動畫顯示開頭顯示畫面，再以動畫淡入顯示使用者介面。您可以將每個動畫各置於一個使用者控制項中，但是在第二個動畫的開頭保留足夠的時間，讓開頭顯示畫面動畫完成。
• 想要供動畫使用的屬性及觸發程序。例如，假設有個應用程式含有一個按鈕，以及一個包含在使用者控制項中的動畫。除非按鈕也是使用者控制項的一部分，否則您無法將按一下按鈕時會啟動動畫時間軸的觸發程序新增至使用者控制項。此外，只有在兩個屬性都是位在相同使用者控制項中，才能在這兩個屬性值之間進行資料繫結。

如需範例，請參閱建立使用者控制項。

• 回到頁首

觸發程序

觸發程序可以用來變更畫板上的物件狀態，以回應事件或屬性變更。您可以使用「觸發程序」啟動及停止動畫時間軸。例如，當您建立時間軸時，系統會建立預設的觸發程序，以在第一次載入應用程式時執行時間軸。您可以修改此觸發程序或建立其他觸發程序，以在使用者按一下按鈕時或執行其他某個動作時執行時間軸。如需觸發程序的詳細資訊，請參閱觸發程序的基本資訊。

• 回到頁首

事件處理常式

事件處理常式是您以程式設計方式建立的方法，會在發生特定事件 (例如 MouseOver) 時執行。如果您希望應用程式發生事件時，不只是要設定屬性或控制動畫時間軸，則可以使用事件處理常式，而不要使用觸發程序。事件處理常式方法可讓您新增其他程式設計邏輯，例如設定另一個物件的屬性、載入新的文件、建立新的物件、使用數學計算來製作物件的動畫等等。例如，若要判斷發生 KeyDown 事件時所按的按鍵，則需要建立會在按下按鍵時呼叫的事件處理常式方法，然後新增程式碼來判斷是哪個按鍵。

事件處理常式方法是以 C# 或 Microsoft® Visual Basic® .NET 定義於文件的程式碼後置檔案。如需詳細資訊，請參閱事件處理。如需範例，請參閱建立新的事件處理常式方法。

• 回到頁首

以程式碼編寫的動畫

使用 Expression Blend 的 [設計] 檢視時，您可以建立整個動畫時間軸，而不需要修改 XAML 或程式碼後置檔案中的程式碼。您也可以設定根據使用者互動來啟動、停止及暫停動畫時間軸的觸發程序。在 Expression Blend 的 [設計] 檢視中，您幾乎可以完成所有想要進行的動畫設計工作。

有些進階動畫設計狀況則需要編寫程式碼 (以 C# 或 Visual Basic .NET)，例如使用數學計算來決定物件的移動。因為您以視覺方式在 Expression Blend 中建立的應用程式就是 Windows Presentation Foundation (WPF) 應用程式，所以如果想要在程式碼後置檔案中操作動畫時間軸，就需要瞭解 WPF 的動畫模型。

動畫時間軸在 XAML 中是以 Storyboard 元素代表。例如，當您在 Expression Blend 的 [設計] 檢視中建立動畫時間軸時，會為動畫產生與下列類似的 XAML 程式碼：

  <Window.Resources>
<Storyboard x:Key="MoveRight">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
Storyboard.TargetName="rectangle" 
Storyboard.TargetProperty="...(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="375"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>

上述 XAML 範例的屬性如下：

• x:Key 屬性指定時間軸 (或稱分鏡板) 的名稱。
• BeginTime 屬性指定動畫的開始時間 (在此範例中是在 0 秒標記處)。
• TargetName 屬性指定分鏡板 (或稱時間軸) 以動畫顯示之元素的名稱 (在此範例中是名為 "rectangle" 的物件)。
• TargetProperty 屬性指定要變更的屬性 (在此範例中是矩形的 Y 位置屬性)。
• KeyTime 屬性指定目標屬性變更的時間間隔，以及變更的目標值。在 Expression Blend 的 [設計] 檢視中，上述元素在時間軸上是以主要畫面格代表。

您可以使用 C# 或 Visual Basic.NET 在程式碼後置檔案中以程式設計方式控制動畫時間軸。例如，若要在程式碼後置檔案中啟動上述的動畫時間軸，則 C# 程式碼可能會與下列類似：

    Storyboard moveRight;
moveRight = (Storyboard)this.Resources["MoveRight"];
moveRight.Begin(this);

如需以 XAML 及程式碼後置檔案建立及操作動畫時間軸的詳細資訊，請參閱 MSDN 之＜Windows Presentation Foundation＞一節的＜動畫與計時＞(英文) 主題，或參閱 Microsoft Expression 網站上公佈的範例及教學課程。

• 回到頁首