試試看：建立重疊動畫

發行項
10/11/2017

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

建立重疊的動畫

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

注意事項：

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

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

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

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

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

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

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

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

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

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

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

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

延伸畫板上的圓形格線
在 [物件與時間軸] 下，展開 [Butterfly] 格線的節點，找出 [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.10).png

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

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

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

為格線建立新的 MouseEnter 事件觸發程序

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

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

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

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

試試看：建立重疊動畫

建立重疊的動畫

其他資源