在進階模式中編輯動畫

在時間軸上建立動畫後,您可以對動畫進行調整,例如編輯動畫元素、變更主要畫面格和跨度,以及循環播放動畫。

Timeline enhancements

編輯動畫元素

如果播放頭的位置沒有主要畫面格,一旦變更動畫元素的屬性,主要畫面格就會自動加入播放頭的位置。您也可以選取現有的主要畫面格,編輯元素在時間軸上這一時間點的狀態。在這前後的所有動畫都會隨之調整,以更改後的屬性做為開頭或結尾。

如果在第一個主要畫面格變更屬性,就等於編輯元素的基本屬性。除非您另行指定其他屬性值,否則後續的主要畫面格都會沿用這些基本屬性。

如果您在選取多個主要畫面格後編輯元素的屬性,變更就會套用至您選取的所有主要畫面格。

如果元素不需要在整個動畫時間軸中顯示,您也可以設定該元素的顯示範圍,讓該元素在範圍外隱藏。

變更動畫的加/減速

如要變更動畫的加/減速,請先在您要變更的跨度上按一下滑鼠右鍵,然後選取新的加/減速,或透過 [加/減速選項…] 自訂加/減速設定

循環播放動畫

  1. 在時間軸上,找到您要循環播放的動畫圖層,按一下「設定動畫重複」按鈕
  2. 選取彈出式選單中的選項:
    • 無限:將無限循環播放動畫。
    • ___ 次:將按照指定總次數循環播放動畫。
    • :不會循環播放動畫。

顯示範圍的圖層無法循環。

循環圖層會改變動畫在發布文件中的呈現方式。

循環播放動畫只會影響中心區域的預覽效果。

在時間軸上調整主要畫面格和跨度

選取主要畫面格和跨度

您可以透過下列多種方式選取主要畫面格和跨度:

  • 按一下主要畫面格或跨度,即可選取。選取兩個連續的主要畫面格時,會同時選取主要畫面格之間的跨度。同樣地,選取跨度時也會自動選取前後的主要畫面格。
  • 按住 Shift 鍵並點選滑鼠,即可選取多個連續的主要畫面格或跨度。
  • 按住 Ctrl 鍵 (Windows) 或 鍵 (Mac) 並點選滑鼠,即可選取或取消選取不連續的主要畫面格或跨度。
  • 按住並拖曳出矩形的選取點線框來選取矩形中的所有主要畫面格。只有在跨度前後的主要畫面格皆位於點線框內時,跨度才會納入選取範圍。
  • 按住 Ctrl 鍵 (Windows) 或 鍵 (Mac) 再拖曳點線框,即可切換選取或取消選取主要畫面格。系統會選取矩形內目前尚未選取的主要畫面格,並取消選取已選取的主要畫面格。同樣地,只有前後主要畫面格皆位於點線框內的跨度才會納入選取範圍。
  • 在時間軸中的圖層上按兩下,即可選取該圖層上所有主要畫面格、跨度和顯示範圍控點。

移動主要畫面格和跨度

選取主要畫面格或跨度後,如要移動,只要將它們沿著時間軸拖曳至新的位置即可。動畫時間會隨之調整。

調整動畫長度

您可以調整動畫長度,同時按比例調整主要畫面格間距。如要調整動畫長度,請按照下列步驟操作:

  1. 選取您要調整的主要畫面格或跨度 (可能位於不同的圖層)。
  2. 按住 Shift 鍵,同時將您所選的任一主要畫面格往左或往右拖曳。往動畫的外圍拖曳可增加動畫長度,而往動畫的中點拖曳則會縮短;其他選取的主要畫面格也會按比例調整間距,只有最遠端的主要畫面格仍保持不動。
    • 如果您已啟用貼齊時間軸設定,只有您拖曳的主要畫面格會套用這項貼齊設定。
    • 主要畫面格不得互相重疊,與其他主要畫面格的距離也不得小於 0.1 毫秒。
    • 未選取的主要畫面格不會移動,但會限制您所選主要畫面格的移動空間。

時間軸主要畫面格調整比例功能

複製及貼上主要畫面格

您可以複製主要畫面格並貼到同一圖層中的其他時間、其他圖層,甚至是其他頁面或文件的時間軸中。主要畫面格在貼上後會保留原本的動畫屬性,但不會保留動畫的加/減速或任何動態路徑

您無法在 AMP 和非 AMP 文件之間複製及貼上主要畫面格。

您可以透過下列任一方式複製並貼上主要畫面格:

  • 選取要複製的主要畫面格,按下 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 面板中編輯主要畫面格規則

限制

  • 您無法修改加/減速。
  • 您無法直接在最後一個主要畫面格的後面新增主要畫面格,請改用時間軸。

進一步瞭解如何使用 CSS 面板

這對您有幫助嗎?

我們應如何改進呢?
true
搜尋
清除搜尋內容
關閉搜尋
主選單
6530145575357773076
true
搜尋說明中心
true
true
true
true
true
5050422
false
false