匯出 (0) 列印
全部展開

試試看:建立重疊動畫

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

  1. 在 Microsoft Expression Blend 中,開啟或建立新的專案。如需詳細資訊,請參閱建立新文件或專案

  2. 按 F6 切換至 [動畫工作區] (按 F6 可在 [設計工作區] 與 [動畫工作區] 之間切換。在 [動畫工作區] 中,[互動] 面板位於畫板下)。

  3. 在 [物件與時間軸] 下,選取 [關閉腳本] Cc294767.4c066464-3a41-452d-b2e9-e95f6c5659ff(zh-tw,Expression.10).png 按鈕。

    Cc294767.alert_note(zh-tw,Expression.10).gif注意事項:

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

  4. 選取 [工具箱] 中的 [橢圓形] Cc294767.d7a04618-e35a-44f9-b78c-1f22e38016c1(zh-tw,Expression.10).png 工具。在畫板右邊繪製兩個小圓形。您可以將 [屬性] 面板之 [版面配置] 類別下的 [Height] 及 [Width] 屬性設為相同的值,讓橢圓形變成正圓形。若發生裁剪行為,請調整 [Margin] 屬性。

  5. 從 [工具箱] 中選擇 [選取] Cc294767.2ff91340-477e-4efa-a0f7-af20851e4daa(zh-tw,Expression.10).png 工具,並將所有圓形互相移近 (如下圖所示):

    在畫板上繪製的兩個圓形

    Cc294767.9d303fc9-9be5-4904-a740-28ed53f85fdc(zh-tw,Expression.10).png
  6. 若要同時使用這兩個圓形,請先在 [物件與時間軸] 下選取其中一個圓形、按住 CTRL 鍵再選取另一個圓形、以滑鼠右鍵按一下選取的圓形、選取 [群組置入],然後按一下 [格線]。

    [物件與時間軸] 下會出現含有這兩個圓形的新格線面板。

  7. 以滑鼠右鍵按一下格線,然後選擇 [重新命名] 以重新命名格線。請將名稱變更為 [Butterfly]。

  8. 若要建立圓形動畫,您可以使用 [轉換成移動路徑] 工具,產生路徑的動畫時間軸。請在畫板中央繪製第三個橢圓形,寬度約為畫板表面的一半。

  9. 確定 [物件與時間軸] 下已選取新的橢圓形,接著選取 [物件] 功能表的 [路徑],然後按一下 [轉換成移動路徑]。

    [選擇移動路徑的目標] 對話方塊會隨即出現。

  10. 從畫板上的物件清單中選取 [Butterfly] 格線,然後按一下 [確定]。

    隨即建立新的時間軸。Expression Blend 會進入新時間軸的記錄模式,讓您能夠按一下 [播放] Cc294767.64ad8e84-1eec-4154-9d0c-11fef322c0bf(zh-tw,Expression.10).png 按鈕,以檢視畫板上的動畫。目標 (Butterfly) 會沿著從橢圓形產生的移動路徑移動。請注意,若橢圓形的 [Fill] 屬性設為筆刷,則會覆蓋掉部分的 Butterfly 物件。

  11. 您已經不再需要第三個橢圓形,所以請刪除該橢圓形。

  12. 在 [物件與時間軸] 下,展開 [Butterfly]、[RenderTransform] 與 [Translation] 等元素的節點,以檢視 [移動路徑] 時間範圍。以滑鼠右鍵按一下 [移動路徑] 元素或代表時間範圍的灰色長條,然後按一下 [編輯重複次數]。

    [編輯重複] 對話方塊會隨即出現。

  13. 若要永遠重複時間軸,請按一下 [設為永久] Cc294767.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(zh-tw,Expression.10).png 按鈕,然後按一下 [確定]。

    以後此動畫只要一執行,就會不斷重複地執行。

  14. 在 [物件與時間軸] 下,按一下 [新增] Cc294767.86937695-03dd-44ea-aa30-28d4029b3ad0(zh-tw,Expression.10).png 按鈕。

    [建立腳本資源] 對話方塊會隨即出現。

  15. 在 [資源名稱 (索引碼)] 欄位中,輸入名稱 [Flap],然後按一下 [確定]。

    Expression Blend 會進入新時間軸的時間軸記錄模式,而播放點 Cc294767.5626c9eb-40bb-450a-9ca1-3678e5abe429(zh-tw,Expression.10).png 會停在 0 秒標記處。在記錄模式下,任何您設定的屬性都會自動在時間軸上記錄一個主要畫面格。

  16. 若要將主要畫面格設在 0 秒的位置,請選取 [Butterfly] 格線,然後按一下 [記錄主要畫面格] Cc294767.de094a9c-58f2-4466-912a-9bdc18362548(zh-tw,Expression.10).png 按鈕。

    主要畫面格 Cc294767.80da70bb-e635-42e8-b26d-f90453096e21(zh-tw,Expression.10).png 會出現在時間軸上與 [Butterfly] 格線對應的那一列中。

  17. 將播放點拖曳至 1 秒標記處,然後記錄另一個主要畫面格。

    如此,動畫的開始及結束位置即已設定完畢。

  18. 將播放點拖曳至前兩個主要畫面格之間 0.5 秒的標記處。

  19. 從 [工具箱] 中選擇 [選取] 工具,並按住 ALT 鍵,然後在畫板上拉大 [Butterfly] 格線的高度並縮短寬度,使其如下圖所示。

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

    延伸畫板上的圓形格線

    Cc294767.a6857649-160b-446f-b998-a135389a19be(zh-tw,Expression.10).png
  20. 在 [物件與時間軸] 下,展開 [Butterfly] 格線的節點,找出 [ScaleX] 及 [ScaleY] 節點。依序對這兩個節點執行下列動作:選取節點、以滑鼠右鍵按一下節點、選取 [編輯重複次數],然後在 [編輯重複] 對話方塊中輸入 2 讓時間軸執行兩次,按一下 [確定]。

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

    Cc294767.alert_note(zh-tw,Expression.10).gif注意事項:

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

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

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

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

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

    Cc294767.alert_note(zh-tw,Expression.10).gif注意事項:

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

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

    Cc294767.7f6ed2c1-373a-4bf1-8008-0380917c618d(zh-tw,Expression.10).png
  24. 若要新增 Flap 動畫的觸發程序,請按一下 [觸發程序] 下的 [新增事件觸發程序] Cc294767.671c69bb-32e9-4ef9-9837-29403524abd0(zh-tw,Expression.10).png 按鈕。

    隨即建立新的 [Window.Loaded] 觸發程序。

  25. 選取 [物件與時間軸] 下的 [Butterfly] 格線元素,然後使用 [觸發程序] 下的下拉式方塊,將新的觸發程序從 [當引發 Window.Loaded 時] 變更為 [當引發 Butterly.MouseEnter 時]。

  26. 按一下 [當引發 Butterly.MouseEnter 時] 旁的 [新增動作] Cc294767.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(zh-tw,Expression.10).png 按鈕,然後使用下拉式方塊將新的動作變更為 [Flap.Begin]。

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

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

    Cc294767.c0eee764-9e82-492e-92a8-5540d15c3abe(zh-tw,Expression.10).png
  27. 若要查看動畫時間軸的行為及剛剛所建立的事件觸發程序,請按一下 [專案] 功能表上的 [測試專案] 來測試您的場景。

    Cc294767.alert_note(zh-tw,Expression.10).gif注意事項:

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

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

社群新增項目

新增
顯示:
© 2014 Microsoft