試試看：建立重疊動畫

發行項
10/11/2017

本頁僅適用 WPF 專案

Microsoft Expression Blend 中的時間軸結構可讓您在應用程式中同時執行多個動畫時間軸。下列程序顯示如何建立一個不斷繞著圓圈移動的蝴蝶動畫，而且蝴蝶會在使用者將滑鼠移至蝴蝶上時拍打翅膀。

注意：
下列程序使用 Windows Presentation Foundation (WPF) 專案中的觸發程序來控制腳本。或者，您可以在 WPF 或 Microsoft Silverlight 中，使用 ControlStoryboardAction 行為來控制腳本。如需使用行為的詳細資訊，請參閱將行為新增至物件。

建立重疊的動畫

在 Microsoft Expression Blend 中，開啟或建立新的 WPF 專案。如需詳細資訊，請參閱建立新專案。
切換至 [動畫] 工作區 (F6 會在可用的工作區之間切換。在 [動畫] 工作區中，[物件與時間軸] 面板位於畫板下)。
如果畫板已開啟，請在 [物件與時間軸] 面板中，按一下 [關閉腳本] 。

注意：

只要選取的時間軸不是 [預設] 時間軸，您所做的任何屬性變更即會自動在時間軸上錄製主要畫面格。
從 [工具] 面板選取 [橢圓形] 。在畫板右邊繪製兩個小圓形。您可以將 [屬性] 面板之 [版面配置] 類別下的 [Height] 及 [Width] 屬性設為相同的值，讓橢圓形變成正圓形。若發生裁剪行為，請調整 [Margin] 屬性。
從 [工具] 面板選擇 [選取] ，並將所有圓形互相移近 (如下圖所示)：

在畫板上繪製的兩個圓形
若要同時使用這兩個圓形，請先在 [物件與時間軸] 面板中選取一個圓形、按住 CTRL 鍵再選取另一個圓形、以滑鼠右鍵按一下選取的圓形、選取 [群組置入]，然後按一下 Grid 。

[物件與時間軸] 面板中會出現含有這兩個圓形的新 Grid 版面配置面板。
以滑鼠右鍵按一下 Grid 物件，然後選擇 [重新命名] 以重新命名該物件。請將名稱變更為 Butterfly 。
若要建立圓形動畫，您可以使用 [轉換成移動路徑] 工具，產生路徑的動畫時間軸。請在畫板中央繪製第三個橢圓形，寬度約為畫板表面的一半。
確定已在 [物件與時間軸] 面板中選取新的橢圓形，接著選取 [物件] 功能表上的 [路徑]，然後按一下 [轉換成移動路徑]。

[選擇移動路徑的目標] 對話方塊隨即出現。
從畫板上的物件清單中選取 [Butterfly] Grid 物件，然後按一下 [確定]。

隨即建立新的時間軸。Expression Blend 會進入新時間軸的記錄模式，讓您能夠按一下 [播放] 按鈕，以檢視畫板上的動畫。目標 (Butterfly) 會沿著從橢圓形產生的移動路徑移動。請注意，若橢圓形的 [Fill] 屬性設為筆刷，則會覆蓋掉部分的 Butterfly 物件。
您已經不再需要第三個橢圓形，所以請刪除該橢圓形。
在 [物件與時間軸] 面板中，展開 [Butterfly]、[RenderTransform] 與 [Translation] 等元素的節點，以檢視 [移動路徑] 時間範圍。以滑鼠右鍵按一下 [移動路徑] 元素或代表時間範圍的灰色長條，然後按一下 [編輯重複次數]。

[編輯重複] 對話方塊隨即出現。
若要永遠重複時間軸，請按一下 [設為永久] ，然後按一下 [確定]。

以後此動畫只要一執行，就會不斷重複地執行。
在 [物件與時間軸] 面板中，按一下 [新增] 。

[建立腳本資源] 對話方塊隨即出現。
在 [資源名稱 (索引碼)] 欄位中，輸入名稱 Flap ，然後按一下 [確定]。

Expression Blend 會進入新時間軸的時間軸記錄模式，而播放點會停在 0 秒標記處。在記錄模式下，任何您設定的屬性都會自動在時間軸上記錄一個主要畫面格。
若要將主要畫面格設在 0 秒的位置，請選取 [Butterfly] Grid 物件，然後按一下 [錄製主要畫面格] 。

主要畫面格會出現在時間軸上與 [Butterfly] Grid 物件對應的那一列中。
將播放點拖曳至 1 秒標記處，然後記錄另一個主要畫面格。

如此，動畫的開始及結束位置即已設定完畢。
將播放點拖曳至前兩個主要畫面格之間 0.5 秒的標記處。
從 [工具] 面板選擇 [選取] 工具，並按住 ALT 鍵，然後在畫板上拉大 [Butterfly] Grid 物件的高度並縮短寬度，使其如下圖所示。

由於 Expression Blend 處於 Flap 動畫時間軸的記錄模式中，因此修改 [Butterfly] Grid 物件的動作會針對 Grid 物件的 ScaleX 和 ScaleY 屬性，在 0.5 秒標記處設定新的主要畫面格。

延展畫板上的 Grid 物件
在 [物件與時間軸] 面板中，展開 [Butterfly] Grid 物件的節點，直到看到 ScaleX 及 ScaleY 節點為止。依序對這兩個節點執行下列動作：選取節點、以滑鼠右鍵按一下節點、選取 [編輯重複次數]，然後在 [編輯重複] 對話方塊中輸入 2 讓時間軸執行兩次，按一下 [確定]。

注意：
只要選取的時間軸不是 [預設] 時間軸，您所做的任何屬性變更即會自動在時間軸上錄製主要畫面格。

按一下 [播放] 按鈕，以測試畫板上的動畫。請注意，重複值不會儲存在畫板的播放設定中。若要調整動畫時間，則可以移動灰色時間範圍長條上的主要畫面格。

注意：
若沒有足夠的空間可以檢視整個時間軸，您可以使用 [時間軸縮放] 文字方塊將時間軸縮小。您也可以變更面板寬度，以檢視 [物件與時間軸] 面板的更多內容。

您現在可以設定動畫的觸發程序。在文件根元素中建立的任何新時間軸，都會在 [觸發程序] 面板中新增 Window.Loaded 事件的預設事件觸發程序，該事件會在應用程式啟動時發生。

您可以保留圓形時間軸的這個觸發程序，並為 Flap 時間軸新增另一個觸發程序。

在 [觸發程序] 面板中，選取 Window.Loaded 觸發程序。觸發程序的動作會顯示在 [當 Window.Loaded 引發時] 之下。請按一下 [Flap.Begin] 旁的減號，以刪除該動作。

現在，在應用程式啟動時，仍然會啟動圓形動畫，但是不會啟動 Flap 動畫。

注意：
您可能必須調整 [觸發程序] 面板的大小，才能看到 [使用時的屬性] 區段。若要調整大小，請按一下並拖曳面板的框線及面板內的框線。

從 Window.Loaded 觸發程序移除 Flap 動畫

Cc294767.7f6ed2c1-373a-4bf1-8008-0380917c618d(zh-tw,Expression.40).png

若要新增 [Flap] 動畫的觸發程序，請按一下 [觸發程序] 面板中的 [新增事件觸發程序] 。

隨即建立新的 Window.Loaded 觸發程序。
選取 [物件與時間軸] 面板中的 [Butterfly] Grid 物件，然後使用 [觸發程序] 面板中的下拉式方塊，將新的觸發程序從 [當 Window.Loaded 引發時] 變更為 [當 Butterly.MouseEnter 引發時]。
按一下 [當 Butterly.MouseEnter 引發時] 旁的 [新增動作] ，然後使用下拉式方塊將新的動作變更為 [Flap.Begin]。

現在，只要使用者將滑鼠指標移至蝴蝶上，就會啟動 Flap 動畫時間軸。

為 Grid 物件建立新的 MouseEnter 事件觸發程序

若要查看動畫時間軸的行為及剛剛所建立的事件觸發程序，請按一下 [專案] 功能表上的 [測試專案] 來測試您的場景。

注意：
如果圓形動畫的執行速度太快，則可以調整時間軸的執行時間。在 [物件與時間軸] 面板中，從下拉式方塊中選取移動路徑時間軸、展開 Grid 物件下的節點直到看到 [移動路徑] 節點、按住灰色時間範圍長條的右端，然後將它拖曳至右邊以延後它的結束時間。此外，您也可以刪除圓形時間軸、建立新的時間軸，然後開始執行步驟 8 (繪製橢圓形) 以建立移動路徑。(如果還沒有建立新的時間軸就開始執行步驟 8，則會將圓形動畫新增至 Flap 動畫時間軸)。

如果圓形動畫的執行速度太快，則可以調整時間軸的執行時間。在 [物件與時間軸] 面板中，從下拉式方塊中選取移動路徑時間軸、展開 Grid 物件下的節點直到看到 [移動路徑] 節點、按住灰色時間範圍長條的右端，然後將它拖曳至右邊以延後它的結束時間。

此外，您也可以刪除圓形時間軸、建立新的時間軸，然後開始執行步驟 8 (繪製橢圓形) 以建立移動路徑。(如果還沒有建立新的時間軸就開始執行步驟 8，則會將圓形動畫新增至 Flap 動畫時間軸)。

共用方式為

試試看：建立重疊動畫

建立重疊的動畫

其他資源