使用 Chrome 開發人員工具「動畫」導覽匣分頁檢查及修改動畫。
總覽
如要擷取動畫,請開啟「動畫」面板。系統會自動偵測動畫並將其分類。
「Animations」面板有兩個主要用途:
- 檢查動畫。放慢、重播或檢查動畫的原始碼 群組。
- 修改動畫。修改時間、延遲、時間長度或主要畫面格偏移。 動畫組。不支援編輯主要畫面格和貝茲。
「動畫」面板支援 CSS 動畫、CSS 轉場效果、網頁動畫和 View Transitions API。目前尚不支援 requestAnimationFrame
動畫。
什麼是動畫群組?
動畫群組是一組「看起來」彼此相關的動畫。
目前,網頁並沒有真正的群組動畫概念,因此動畫設計師和開發人員會將個別動畫組合並調整時間,讓動畫呈現出一致的視覺效果。「動畫」面板會根據開始時間 (不含延遲時間) 預測相關動畫,並將這些動畫並排分組。
換句話說,Animations 面板會將在同一個指令碼區塊中觸發的動畫分組,但如果動畫為非同步,則會歸入不同的群組。
開啟「動畫」面板
開啟「Animations」面板的方法有兩種:
- 依序選取「自訂及控制開發人員工具」圖示 >更多工具 >動畫。
按下列任一選項開啟「Command」選單:
- macOS:Command + Shift + P 鍵
- Windows、Linux 或 ChromeOS:Control + Shift + P 鍵
然後開始輸入
Show Animations
,並選取對應的「導覽匣」面板。
根據預設,「動畫」面板會以分頁形式顯示在「主控台」導覽匣旁邊。您可以將抽屜分頁與任何面板搭配使用,也可以將其移至開發人員工具的頂端。
「Animations」面板會在您開啟播放中的動畫時自動擷取。如果載入網頁時觸發動畫或已停止播放,請重新載入面板開啟的頁面。
熟悉「動畫」面板使用者介面
「Animations」面板有四個主要部分:
- 控管您可以在這裡 清除所有擷取的動畫群組、 暫停或 繼續動畫,或是變更所選動畫群組的速度。
總覽:顯示已擷取的動畫群組,並以圖示標示兩種類型:
捲動驅動和 定期 (以時間為準)。在「Details」窗格中檢查及修改動畫群組。
時間軸。視動畫群組的類型而定,時間軸可能如下:
- 以像素為單位,顯示 捲動導向的動畫。
- 以毫秒為單位,用於 時間動畫。
在時間軸中,您可以
重播動畫、快速瀏覽動畫,或跳到特定時間點。詳細資料:檢查及修改所選動畫群組。
如要擷取動畫,請在「Animations」面板開啟時觸發動畫。
檢查動畫
擷取動畫後,您可以透過以下幾種方式重播動畫:
- 將滑鼠游標懸停在「總覽」窗格中的縮圖上,即可查看預覽畫面。
- 拖曳播放頭 (紅色垂直線) 來拖曳可視區域動畫,或點選時間軸上的任一處,將播放頭設為特定時間點。動畫會繼續播放,若已播放,則會停止。
- 從「Overview」(總覽) 窗格中選取動畫群組,使其顯示在「Details」(詳細資料) 窗格中 窗格),然後按下 「Replay」按鈕。 系統就會在可視區域中重播動畫。
按一下「控制項」列中的 「動畫速度」按鈕,即可變更所選動畫群組的預覽速度。
查看動畫詳細資料
擷取動畫群組後,請在「總覽」窗格中按一下該群組,查看詳細資料。
在「Details」窗格中,每個動畫都會自成一列。如要查看對應元素的完整名稱,請調整名稱欄的大小。
將滑鼠遊標懸停在動畫上,即可在可視區域中醒目顯示動畫。在「Elements」面板中按一下動畫,選取該動畫。
如果某些動畫的 animation-iteration-count
屬性設為 infinite
,則會無限期重複播放。「Animations」面板會顯示定義和迭代。
動畫最左邊的深色部分是其定義。右側較淡出的部分 代表疊代
例如,在下一個螢幕截圖中,第二和第三個區塊代表第一個區塊的迭代。
如果兩個元素套用相同的動畫,則「Animations」面板會為它們指派相同的顏色。顏色本身是隨機產生,沒有任何意義。例如,在下方螢幕截圖中
div.eye.left::after
和 div.eye.right::after
這兩個元素具有相同的動畫 (eyes
)
和 div.feet::before
和 div.feet::after
元素一樣
修改動畫
您可以使用三種方式使用「Animations」面板修改動畫:
- 動畫時間長度。
- 主要畫面格時間。
- 開始時間延遲。
假設本節的下一個螢幕截圖代表原始動畫:
如要變更動畫的時間長度,請拖曳第一個或最後一個圓圈。
如果動畫定義任何主要影格規則,則會以白色內圓表示。拖曳其中一個即可變更主要影格時間。
如要為動畫加上延遲時間,請按一下動畫 (而非圓圈),然後將其拖曳到任何位置。
即時編輯「@keyframes
」
當您在「樣式」中修改 @keyframes
時,可以直接在「動畫」面板中查看特效。
歡迎前往這個示範頁面試用:
- 開啟「動畫」面板。它會自動擷取網頁上進行中的脈動動畫。在動作列的控制項下方選取動畫。
- 在「Elements」中,使用
class="pulser"
檢查元素,然後在「Styles」中找到@keyframes pulse
區段。 - 嘗試修改主要畫面格,例如將第二個主要畫面格從
50%
變更為20%
。 - 觀察「Styles」中變更內容對「Animations」面板擷取的動畫有何影響。
在動畫期間編輯 ::view-transition
疑似元素
使用 View Transitions API,您只要一個步驟就能變更 DOM,並在兩個狀態之間建立動畫轉場效果。在動畫期間,API 會以下列結構建構虛擬元素樹狀結構:
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)
如要在「元素」中編輯這個結構,請前往樣式: