將物件製作成動畫

動畫是由一連串前後稍有不同的影像，在快速播放下所產生的錯覺。人類腦部會將影像序列解讀為單一變化場景。在影片中，攝影機會藉由每秒錄製大量畫面 (或畫面格) 來製造這種錯覺。當放映機將這些畫面格播放出來時，我們就能看到動態的影片。電腦動畫的原理也很類似，只不過所錄製的畫面格可進一步按時間分解，因為電腦會在中間內插變更並以動畫方式顯示這些變更。

動畫在 Expression Blend 中的運作方式

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

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

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

注意：
雖然您無法在 Expression Blend 的腳本中自發地建立新物件，但是可以利用「程式碼後置檔案」以程式設計方式產生新的物件及新的動畫腳本。 如需詳細資訊，請參閱 MSDN 上＜Windows Presentation Foundation＞章節的動畫和計時 主題。

腳本

腳本是一種可保存動畫時間軸的容器。Expression Blend 包含一個腳本選擇器控制項，您可以從中選取和搜尋您專案中的腳本。

如需詳細資訊，請參閱開啟或關閉腳本。

列出多個可開啟之腳本的腳本選擇器

選取腳本後，您就可以使用快顯功能表來複製、反轉、刪除、重新命名或關閉目前所選取的腳本，此外您也可以建立新腳本。

如需詳細資訊，請參閱複製或反轉腳本與重新命名腳本。

腳本快顯功能表

您可以設定腳本的屬性，讓腳本在到達其最後一個時間軸的結尾時自動反轉或重複。

如需詳細資訊，請參閱修改腳本使其重複或反轉。

您可以在應用程式的下列位置 (或範圍) 建立腳本：

• 在文件的主要本文中    　如果應用程式的目的是呈現動畫，或您不需要在其他地方重複使用動畫，則可以在文件的主要本文中建立動畫時間軸。

  如需範例，請參閱建立簡單動畫。

• 在場景或使用者控制項中    如果必須在單一文件或另一個應用程式中多次重複使用動畫，則可以在「使用者控制項」中建立動畫時間軸。 ** 這也適用於想要將動畫組織在不同文件或專案中的時候。使用者控制項可以新增至畫板，就和其他任何控制項 (如按鈕) 一樣。如需詳細資訊，請參閱後面的＜場景＞一節。

  如需範例，請參閱建立空白使用者控制項或在專案中建立新的使用者控制項。

• 在控制項範本中    若要讓應用程式中某種類型 (如按鈕) 的所有控制項都依照相同方式移動，則可以在控制項範本中建立動畫。這並不表示所有控制項都必須看起來完全一樣。如果使用「範本繫結」(將範本中的屬性繫結至套用該範本之控制項中的屬性)，每個控制項的動畫中都可以使用不同的色彩或其他視覺外觀。 **

  如需詳細資訊，請參閱選擇及使用互動式控制項。如需 Windows Presentation Foundation (WPF) 範例，請參閱試試看：將動畫新增至按鈕。

• 在狀態中    若要修改切換為新狀態後出現的動畫，您可在 [狀態] 面板中選取狀態，然後按一下 [物件與時間軸] 面板中的 [顯示時間軸]  以進行變更。

  如需使用狀態的詳細資訊，請參閱定義控制項的不同視覺狀態。

您可以使用物件上設定的觸發程序、使用行為或是使用事件處理常式來控制腳本 (啟動、停止、暫停)。

如需詳細資訊，請參閱控制何時執行腳本。

時間軸

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

您可在 [物件與時間軸] 面板中處理動畫時間軸。您可以使用此面板中提供的控制項，檢視畫板隨時間變化的情形、新增時間軸、修改時間軸等等。

主要畫面格

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

• 物件層級主要畫面格 會套用至整個物件 (如 rectangle 物件) 或含有多個物件的 grid 。除非物件層級主要畫面格是經由按一下 [記錄主要畫面格] 按鈕來手動設定，否則物件層級主要畫面格通常表示其中一個子物件的屬性已變更，而展開該物件下的節點就可以進行查看。例如，前面的影像 (在本主題前面的＜動畫在 Expression Blend 中的運作方式＞一節中)，時間軸上與 Rectangle 對應一列中設定的主要畫面格，就是物件層級主要畫面格。

• 複合主要畫面格 表示屬性具有以動畫方式顯示的子屬性。例如，上圖的時間軸上與 Translate 屬性對應之那一列中設定的主要畫面格，就是複合主要畫面格。使用複合主要畫面格時，只要選取一次就可以同時修改大量的屬性 (例如，沿著時間軸移動主要畫面格時)。

• 簡單主要畫面格 代表在該時間點只有一項屬性變更。例如，上圖的時間軸上與 X 和 Y 屬性對應之那兩列中設定的主要畫面格，就是簡單主要畫面格。您需要使用簡單主要畫面格來執行特定的動作 (例如修改動畫的重複次數)。

  如需範例，請參閱設定循環持續時間。

• 隱含主要畫面格 ：當其中一個動畫中斷另一個動畫，而第二個動畫的 0 秒標記處未設定主要畫面格時，就會存在隱含主要畫面格。中斷時，Expression Blend 會將屬性的最後一個已知值與在第二個動畫中第一個主要畫面格上設定的值之間的差異以動畫填補。即使最後一個已知值介於第一個動畫的兩個主要畫面格之間，該值還是會視為隱含主要畫面格。此切換效果稱為「遞移式動畫」 ** ；後面的＜使用多個及重疊的動畫時間軸＞一節中將詳述這種切換效果。

瞭解主要畫面格間的差異十分有用，因為您不一定想要看到以動畫展示的每一個屬性的詳細資料。您可以改為摺疊每個物件的屬性，只檢視物件層級主要畫面格。使用物件層級主要畫面格和複合主要畫面格時，只要選取一次就可以同時修改大量的屬性 (例如，想沿著時間軸移動主要畫面格時)。

如需範例，請參閱貼上或移動主要畫面格。

您必須使用簡單主要畫面格來執行特定的動作 (例如修改動畫的重複次數)。

如需範例，請參閱設定循環持續時間。

切換主要畫面格

「主要畫面格內插」是指一種在兩個主要畫面格之間的時間範圍中以動畫填補屬性變更的方式。 **

您可以透過下列方式修改主要畫面格內插補點值：選取預先定義的 [加速] 或 [減速] 值、修改 [KeySpline] 圖形，或是使用顯示複雜 [KeySpline] 圖形的預設 [EasingFunction] 選項。

用於建立主要畫面格間自訂內插補點的主要曲線編輯器

如需詳細資訊，請參閱變更主要畫面格間的動畫內插補點。

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

注意：
Microsoft Silverlight 專案不支援移動路徑。

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

如需範例，請參閱建立簡單動畫。

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

使用移動路徑建立動畫時間軸

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

如需如何使用移動路徑產生動畫時間軸的範例，請參閱建立、修改或刪除移動路徑。

移動路徑並不是使用時間軸上的主要畫面格來呈現。因此，您無法修改內插效果。不過，您可以修改重複次數。

如需詳細資訊，請參閱設定循環持續時間。

此外，也可以讓動畫物件朝向路徑，如此一來，物件的任何一面都會指向路徑的中心，而在整個時間軸內都會持續指向路徑的中心。

如需詳細資訊，請參閱建立、修改或刪除移動路徑下的＜讓移動的物件持續沿向路徑＞。

產生移動路徑之後，您可以手動將動畫新增至移動路徑所在的相同時間軸。

注意：
您不能在　Expression Blend 中透過反轉包含移動路徑的腳本來反轉移動路徑。不過，您可以轉換 (翻轉) 路徑讓它反向執行，也可以使用 [AutoReverse] 腳本屬性讓腳本先向前播放後再反向播放。

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

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

如需範例，請參閱試試看：建立重疊動畫。

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

如需範例，請參閱試試看：播放遞移式及非遞移式動畫。

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

畫面格速率

沿著時間軸設定主要動畫格，即可在 Expression Blend 中建立動畫。而主要動畫格之間的內插補點會於執行階段予以執行。因此，您不必設定動畫的「畫面格速率」。 ** 當您執行應用程式時，.NET Framework 執行階段會儘可能以最高的畫面格速率來轉譯動畫時間軸。

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

場景

在 Expression Blend 中，您可以將動畫封裝在場景 (或使用者控制項) 內，然後在應用程式的其他文件中重複使用那些動畫。您可以在單一文件或 .dll (控制項程式庫) 檔中建立使用者控制項。應用程式內的所有使用者控制項都可以從 [資產] 面板  的 [專案] 類別進行存取，然後繪製在文件中，就和其他任何控制項一樣。

注意：
在專案中新增使用者控制項之後，您必須建置專案，才能讓使用者控制項顯示在 [資產] 面板中。在 [專案] 功能表上，按一下 [建置專案]。

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

• 各項動畫的時間安排    例如，假設有個應用程式會先以動畫顯示開頭顯示畫面，再以動畫淡入顯示使用者介面。您可以將每個動畫各置於一個使用者控制項中，但是在第二個動畫的開頭保留足夠的時間，讓開頭顯示畫面動畫完成。

• 想要供動畫使用的屬性及觸發程序    例如，假設有個應用程式含有一個按鈕，以及一個包含在使用者控制項中的動畫。除非按鈕也是使用者控制項的一部分，否則您無法將按一下按鈕時會啟動動畫時間軸的觸發程序新增至使用者控制項。此外，只有在兩個屬性都是位在相同使用者控制項中，才能在這兩個屬性值之間進行資料繫結。

  注意：
  Silverlight 專案中無法使用觸發程序。不過，您可以使用行為來控制腳本和狀態切換。 如需詳細資訊，請參閱使用行為。

如需使用者控制項的詳細資訊，請參閱建立空白使用者控制項或參閱控制何時執行腳本中的＜使用者控制項中的腳本＞。

測試腳本

有許多方法可以測試 Expression Blend 專案中的腳本，包括在製作環境中，或在編譯應用程式時的執行階段 (按一下 [專案] 功能表上的 [執行專案]，或按 F5)。在製作環境中，您可以在 [物件與時間軸] 面板中使用播放控制項。

[物件與時間軸] 面板中的播放控制項

• 第一個畫面格    將播放點 移至動畫的第一個畫面格。

• 前一個畫面格    將播放點移至前一個畫面格。

• 播放    從目前的時間點開始播放動畫。

• 下一個畫面格    將播放點移至下一個畫面格。

• 最後一個畫面格    將播放點移至動畫的最後一個畫面格。

快轉時間軸

快轉時間軸是一項實用的技巧，可以精確地控制您要預覽或測試的動畫速度與位置。拖曳播放點即可進行快轉。拖曳播放點時，畫板上會顯示動畫。畫面格可以正常快轉或反向快轉。動畫的播放速度視您拖曳播放點的速度而定。

如需範例，請參閱快轉時間軸。

時間貼齊

[物件與時間軸] 面板包含的控制項，可讓您以貼齊解析度所決定的不連續單位 (每秒的畫面格數) 來控制動畫播放和瀏覽時間。使用播放控制項來瀏覽時間時會用到時間貼齊功能。當您按下一個畫面格和前一個畫面格按鈕時，播放點會向前或向後移動您所指定的每秒畫面格數。此時間量是由貼齊解析度所決定。

[貼齊解析度] 對話方塊

如需詳細資訊，請參閱開啟或關閉時間軸貼齊和變更貼齊解析度。

注意：
時間軸貼齊功能並不適用於畫面格速率，也不適用於執行應用程式時的動畫速度。如需詳細資訊，請參閱本主題前面的＜畫面格速率＞。

顯示時間

目前時間顯示會以 MM:SS:xxx (分、杪、毫秒) 來顯示目前選取的時間點。若要快速跳至特定的時間點，您可以在此欄位中輸入數值直接跳到那一點。

[播放點位置] 文字方塊，已讀取 1.450 秒

如需使用時間顯示的範例，請參閱移至時間軸中的特定點。

觸發程序

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

如需有關觸發程序的詳細資訊，請參閱使用觸發程序定義 WPF 控制項的行為。

注意：
Silverlight 專案中無法使用觸發程序。不過，您可以使用行為來控制腳本和狀態切換。 如需詳細資訊，請參閱使用行為。

事件處理常式

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

事件處理常式方法是定義於文件的程式碼後置檔案中。在 WPF 或 Silverlight 專案中，程式碼後置檔案是以 Microsoft Visual C# 或 Microsoft Visual Basic .NET 撰寫。

如需範例，請參閱在時間軸中使用觸發程序來控制媒體與試試看：在 Silverlight 應用程式中動態載入新網頁。

以程式碼編寫的動畫

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

有些進階動畫設計狀況需要編寫程式碼 (以 C# 或 Visual Basic .NET)，例如使用數學計算來決定物件的移動。如果您要在程式碼後置檔案中操作動畫時間軸，瞭解應用程式使用之技術 (WPF 或 Silverlight) 的動畫模型會很有幫助。

動畫時間軸在 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 屬性指定要變更的屬性 (在此例中是 rectangle 的 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  網站上公佈的範例及教學課程。

Copyright © 2011 by Microsoft Corporation. All rights reserved.