試試看:播放遞移式及非遞移式動畫

如果有多個動畫時間軸同時操作相同的屬性,則切換行為會因 0 秒標記處是否記錄了主要畫面格而有不同。下列程序協助您瞭解遞移式及非遞移式動畫的運作方式。

比較遞移式及非遞移式動畫

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

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

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

    Cc295058.alert_tip(zh-tw,Expression.10).gif秘訣:

    開啟腳本時,您進行的任何屬性變更,都會自動在腳本的時間軸上記錄一個主要畫面格。

  4. 選取 [工具箱] 中的 [橢圓形] 工具 Cc295058.8938cfdf-9b75-4a33-bc88-b0636e114a0d(zh-tw,Expression.10).png。在畫板中央繪製一個圓形。您可以使用 [屬性] 面板之 [版面配置] 類別下的 [Height] 及 [Width] 屬性,將橢圓形變成正圓形。若發生裁剪行為,請調整 [Margin] 屬性。

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

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

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

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

  7. 請勿在 0 秒標記處設定主要畫面格。請將播放點拖曳至 1 秒標記處。

  8. 從 [工具箱] 中選擇 [選取] Cc295058.2ff91340-477e-4efa-a0f7-af20851e4daa(zh-tw,Expression.10).png 工具,並按住 ALT 鍵,然後拖曳橢圓形的寬度控點,將橢圓形拉大為原始寬度的兩倍。

    1 秒標記處會自動針對 [ScaleX] 屬性設定主要畫面格。

    Cc295058.alert_tip(zh-tw,Expression.10).gif秘訣:

    在調整畫板上的物件大小時按住 ALT 鍵,可以固定中心點。

  9. 在 [物件與時間軸] 節點下,展開橢圓形下方的節點,並找到 [ScaleX] 節點。以滑鼠右鍵按一下 [ScaleX] 節點或灰色時間範圍長條,然後按一下 [編輯重複次數]。

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

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

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

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

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

    Expression Blend 會進入第二個時間軸的時間軸記錄模式,從原始橢圓形大小開始記錄。

  13. 與之前相同,請勿在 0 秒標記處設定主要畫面格。請將播放點拖曳至 1 秒標記處。

  14. 從 [工具箱] 中選擇 [選取] 工具,並按住 ALT 鍵,然後拖曳橢圓形的寬度控點,將橢圓形拉大為原始寬度的四倍。

    1 秒標記處會自動針對 [ScaleX] 屬性設定主要畫面格。

  15. 以滑鼠右鍵按一下 [ScaleX] 節點或灰色時間範圍長條、按一下 [編輯重複次數]、按一下 [設為永久] 按鈕,然後按一下 [確定]。

  16. 您現在可以設定動畫的觸發程序。根據預設,任何在文件的根中建立的新時間軸,都將導致在 [觸發程序] 底下新增 [Window.Loaded] 事件的事件觸發程序。您可以保留 [Double] 時間軸的這個觸發程序,並為 [Quadruple] 時間軸新增另一個觸發程序。

  17. 在 [觸發程序] 下,選取 [Window.Loaded] 觸發程序。觸發程序的動作會顯示在 [當 Window.Loaded 引發時] 下面。按一下 [Quadruple.Begin] 旁的減號,刪除該動作。現在,應用程式啟動時仍然會啟動 Double 動畫,但是不會啟動 Quadruple 動畫。

    Cc295058.alert_tip(zh-tw,Expression.10).gif秘訣:

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

  18. 若要新增 [Quadruple] 動畫的觸發程序,請按一下 [觸發程序] 下的 [新增事件觸發程序] Cc295058.671c69bb-32e9-4ef9-9837-29403524abd0(zh-tw,Expression.10).png 按鈕。

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

  19. 選取 [物件與時間軸] 下的橢圓形,然後使用 [觸發程序] 下的下拉式方塊,將新的觸發程序從 [當 Window.Loaded 引發時] 變更為 [當 ellipse.MouseEnter 引發時]。

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

    現在,只要使用者將滑鼠游標移至橢圓形上,Quadruple 動畫就會中斷 Double 動畫。

  21. 新增事件觸發程序、將事件觸發程序變更為 [當 ellipse.MouseLeave 引發時],然後新增 [Double.Begin] 的動作。

    只要使用者將滑鼠游標移至橢圓形外面,Double 動畫就會中斷 Quadruple 動畫。

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

    這兩個動畫都沒有設定在 0 秒標記上的主要畫面格。動畫之間產生的切換稱為「遞移式」動畫。當您使用其中一個動畫來中斷另一個動畫時,動畫的遞移行為是將中斷時的寬度平滑切換至後續動畫的第一個主要畫面格。如果在 Double 動畫播到結尾時將滑鼠游標移至橢圓形中,則 Quadruple 動畫就不會從橢圓形的原始大小開始播放,而是從移動滑鼠時的橢圓形寬度開始播放。當您將滑鼠移出橢圓形時,因為 Double 動畫與 Quadruple 動畫之間會進行切換,所以 Double 動畫會呈現與 Quadruple 動畫相反的效果。

  23. 結束應用程式,回到 Expression Blend。

  24. 在 [物件與時間軸] 下,選取橢圓形的 [ScaleX] 節點、選取 [Quadruple] 時間軸、將播放點移至 0 秒標記處,然後按一下 [記錄主要畫面格] 按鈕。

  25. 重新測試動畫。切換行為會變更。當您將滑鼠移至橢圓形中時,Quadruple 動畫會從橢圓形的原始寬度開始播放。

    您可以進一步檢查不同的切換行為,例如在 Double 動畫的 0 秒標記處新增主要畫面格,並重新進行測試,然後刪除 Quadruple 動畫之 0 秒標記處的主要畫面格,再重新進行測試。