在時間軸上建立動畫後,您可以對動畫進行調整,例如編輯動畫元素、變更主要畫面格和跨度,以及循環播放動畫。
本頁內容:
編輯動畫元素
如果播放頭的位置沒有主要畫面格,一旦變更動畫元素的屬性,主要畫面格就會自動加入播放頭的位置。您也可以選取現有的主要畫面格,編輯元素在時間軸上這一時間點的狀態。在這前後的所有動畫都會隨之調整,以更改後的屬性做為開頭或結尾。
如果在第一個主要畫面格變更屬性,就等於編輯元素的基本屬性。除非您另行指定其他屬性值,否則後續的主要畫面格都會沿用這些基本屬性。
如果您在選取多個主要畫面格後編輯元素的屬性,變更就會套用至您選取的所有主要畫面格。
如果元素不需要在整個動畫時間軸中顯示,您也可以設定該元素的顯示範圍,讓該元素在範圍外隱藏。
變更動畫的加/減速
如要變更動畫的加/減速,請先在您要變更的跨度上按一下滑鼠右鍵,然後選取新的加/減速,或透過 [加/減速選項…] 自訂加/減速設定。
循環播放動畫
- 在時間軸上,找到您要循環播放的動畫圖層,按一下「設定動畫重複」按鈕 。
- 選取彈出式選單中的選項:
- 無限:將無限循環播放動畫。
- ___ 次:將按照指定總次數循環播放動畫。
- 無:不會循環播放動畫。
有顯示範圍的圖層無法循環。
循環圖層會改變動畫在發布文件中的呈現方式。
循環播放動畫只會影響中心區域的預覽效果。
在時間軸上調整主要畫面格和跨度
選取主要畫面格和跨度
您可以透過下列多種方式選取主要畫面格和跨度:
- 按一下主要畫面格或跨度,即可選取。選取兩個連續的主要畫面格時,會同時選取主要畫面格之間的跨度。同樣地,選取跨度時也會自動選取前後的主要畫面格。
- 按住 Shift 鍵並點選滑鼠,即可選取多個連續的主要畫面格或跨度。
- 按住 Ctrl 鍵 (Windows) 或 ⌘ 鍵 (Mac) 並點選滑鼠,即可選取或取消選取不連續的主要畫面格或跨度。
- 按住並拖曳出矩形的選取點線框來選取矩形中的所有主要畫面格。只有在跨度前後的主要畫面格皆位於點線框內時,跨度才會納入選取範圍。
- 按住 Ctrl 鍵 (Windows) 或 ⌘ 鍵 (Mac) 再拖曳點線框,即可切換選取或取消選取主要畫面格。系統會選取矩形內目前尚未選取的主要畫面格,並取消選取已選取的主要畫面格。同樣地,只有前後主要畫面格皆位於點線框內的跨度才會納入選取範圍。
-
在時間軸中的圖層上按兩下,即可選取該圖層上所有主要畫面格、跨度和顯示範圍控點。
移動主要畫面格和跨度
選取主要畫面格或跨度後,如要移動,只要將它們沿著時間軸拖曳至新的位置即可。動畫時間會隨之調整。
調整動畫長度
您可以調整動畫長度,同時按比例調整主要畫面格間距。如要調整動畫長度,請按照下列步驟操作:
- 選取您要調整的主要畫面格或跨度 (可能位於不同的圖層)。
- 按住 Shift 鍵,同時將您所選的任一主要畫面格往左或往右拖曳。往動畫的外圍拖曳可增加動畫長度,而往動畫的中點拖曳則會縮短;其他選取的主要畫面格也會按比例調整間距,只有最遠端的主要畫面格仍保持不動。
- 如果您已啟用貼齊時間軸設定,只有您拖曳的主要畫面格會套用這項貼齊設定。
- 主要畫面格不得互相重疊,與其他主要畫面格的距離也不得小於 0.1 毫秒。
- 未選取的主要畫面格不會移動,但會限制您所選主要畫面格的移動空間。
複製及貼上主要畫面格
您可以複製主要畫面格並貼到同一圖層中的其他時間、其他圖層,甚至是其他頁面或文件的時間軸中。主要畫面格在貼上後會保留原本的動畫屬性,但不會保留動畫的加/減速或任何動態路徑。
您可以透過下列任一方式複製並貼上主要畫面格:
-
選取要複製的主要畫面格,按下 Ctrl + C 鍵 (Windows) 或 ⌘ + C 鍵 (Mac),接著按一下時間軸上的新位置,然後選取目標圖層。按下 Ctrl + V 鍵 (Windows) 或 ⌘ + V 鍵 (Mac) 即可貼上。
-
在您要複製的主要畫面格上按一下滑鼠右鍵。在彈出式選單中選取 [複製主要畫面格],接著在目標圖層的新時間軸位置按一下滑鼠右鍵,然後在彈出式選單中選取 [貼上主要畫面格]。
-
按住 Alt 鍵 (Windows)、Option 鍵 (Mac) 或點選滑鼠左鍵後按下 Alt 鍵 (Linux),再拖曳任一主要畫面格,即可將主要畫面格複製到結束位置。這個方法不適用於巢狀動畫的網頁、文件或時間軸。
如果您將主要畫面格複製貼上先前沒有主要畫面格的圖層,新的主要畫面格會自動插入 0 秒處,然後顯示貼上的主要畫面格,除非您將主要畫面格貼到 0 秒處才會直接顯示。
如果您將主要畫面格複製貼上現有的主要畫面格,貼上的主要畫面格動畫屬性會覆寫現有主要畫面格對應的動畫屬性。
刪除主要畫面格
如要刪除主要畫面格,請在特定主要畫面格上按一下滑鼠右鍵 (Windows),或是按住 Control 鍵並點選特定主要畫面格 (Mac),然後從彈出式選單中選取 [刪除]。
在 CSS 面板中編輯主要畫面格規則
如果您熟悉 CSS 主要畫面格規則 (開頭為 @keyframes
關鍵字),就可以在設計檢視模式中透過 CSS 面板查看及編輯動畫樣式。時間軸和中心區域會自動反映您在該面板所做的變更。
使用主要畫面格規則
- 選取單一動畫元素,即可在 CSS 面板中查看該元素的主要畫面格規則。
- 如要在現有的主要畫面格之間新增主要畫面格,請點選 [插入主要畫面格]。
- 編輯主要畫面格百分比。
- 為主要畫面格新增、編輯及刪除動畫屬性。
- 如要切換動畫屬性在整個動畫中的開關狀態,請點選屬性名稱旁邊的核取方塊。
- 如要刪除個別主要畫面格,請清除百分比,或是將主要畫面格的動畫屬性全部刪除。
- 如要將元素的 CSS 動畫全部刪除,請選取主要畫面格規則,然後點選面板底部的「刪除所選規則」按鈕 。
限制
- 您無法修改加/減速。
- 您無法直接在最後一個主要畫面格的後面新增主要畫面格,請改用時間軸。
進一步瞭解如何使用 CSS 面板。