前端開發(fā)過(guò)程中針對(duì)復(fù)雜的動(dòng)畫，往往調(diào)整起來(lái)比較無(wú)力轻庆，這個(gè)時(shí)候如果借助devTools的Animations工具椒振，就會(huì)把復(fù)雜的動(dòng)畫變得"有跡可循"碰酝。

動(dòng)畫面板示意圖

注意：動(dòng)畫檢查器支持 CSS 動(dòng)畫、CSS 過(guò)渡和網(wǎng)絡(luò)動(dòng)畫趟济，但暫不支持 requestAnimationFrame 動(dòng)畫

面板介紹

打開Chrome的devTools面板乱投，點(diǎn)擊 x（關(guān)閉按鈕）左邊的 更多按鈕，選擇 "More tools"顷编，然后點(diǎn)擊子菜單里的 "Animations"戚炫，就可以調(diào)出該面板：

或者在devTools 輸入 commond + shift + p打開命令面板，然后輸入 Drawer: Show Animations

該面板可以捕捉頁(yè)面里的動(dòng)畫媳纬，并根據(jù)動(dòng)畫的運(yùn)動(dòng)軌跡劃分關(guān)鍵幀双肤，我們可以一目了解地知道該關(guān)鍵幀下的哪些元素正在進(jìn)行何種樣式的變化。

如下圖所示钮惠，動(dòng)畫檢查面板由以下四部分組成：

動(dòng)畫面板組成圖

• 1 Controls茅糜。最左邊按鈕點(diǎn)擊可以清除所有當(dāng)前捕捉的動(dòng)畫組；右按鈕組可以更改當(dāng)前選定動(dòng)畫組的速度素挽。
• 2 Overview蔑赘。在這里選擇動(dòng)畫組，然后在 Details 窗格中進(jìn)行檢查和修改。
• 3 Timeline缩赛。暫停和開始動(dòng)畫耙箍，或者跳到動(dòng)畫中的特定幀
• 4 Details。檢查和修改當(dāng)前選定的動(dòng)畫組

常用功能

animations主要兩個(gè)常用的功能是

• 檢查動(dòng)畫：檢查動(dòng)畫運(yùn)行的關(guān)鍵幀酥馍，并可以調(diào)整動(dòng)畫播放的速度
• 修改動(dòng)畫：在面板里修改元素動(dòng)畫的動(dòng)畫組的時(shí)間辩昆、延遲、持續(xù)時(shí)間或關(guān)鍵幀偏移

檢查動(dòng)畫

捕捉動(dòng)畫后物喷，可以通過(guò)以下幾種方式重播動(dòng)畫：

• 在 Overview 窗格中將鼠標(biāo)懸停在動(dòng)畫的縮略圖上方卤材，查看它的預(yù)覽。
• 從 Overview 窗格中選擇動(dòng)畫組（這樣峦失，動(dòng)畫組就會(huì)顯示在 Details 窗格中）扇丛，然后按 replay 按鈕（replay 按鈕）。動(dòng)畫會(huì)在視口中重播尉辑。點(diǎn)擊 animation speed 按鈕（animation speed 按鈕）更改當(dāng)前選定動(dòng)畫組的預(yù)覽速度帆精。您可以使用紅色的垂直條更改當(dāng)前位置。
• 點(diǎn)擊并拖動(dòng)紅色的垂直條以拖拽視口動(dòng)畫隧魄。

查看動(dòng)畫詳細(xì)信息

捕捉動(dòng)畫組后卓练，在 Overview 窗格點(diǎn)擊動(dòng)畫組可以查看其詳細(xì)信息。 在 Details 窗格中购啄，每個(gè)動(dòng)畫會(huì)單獨(dú)展示成一行

查看動(dòng)畫詳細(xì)信息

將鼠標(biāo)懸停在動(dòng)畫上可以在視口中突出顯示該動(dòng)畫襟企。點(diǎn)擊該動(dòng)畫，在 Elements 面板中將自動(dòng)選中該動(dòng)畫的HTML節(jié)點(diǎn)：

選中動(dòng)畫

理解動(dòng)畫軌跡

• 動(dòng)畫軌跡中實(shí)心圓圈表示動(dòng)畫的起點(diǎn)和終點(diǎn)狮含，而空心圓表示聲明特定規(guī)則的關(guān)鍵幀顽悼。
• 如果動(dòng)畫是循環(huán)的，最左側(cè)的深色部分是其定義几迄。右側(cè)的淺色部分表示重復(fù)蔚龙。 如下圖所示，第二和第三部分表示第一部分的重復(fù)：

動(dòng)畫線段1

• 如果兩個(gè)元素應(yīng)用了同一個(gè)動(dòng)畫映胁，動(dòng)畫檢查器會(huì)給它們分配相同的顏色木羹。 顏色本身是隨機(jī)的且沒有意義。如圖所示解孙，兩個(gè)元素 div.eye.left::after 和 div.eye.right::after 已應(yīng)用了同一個(gè)動(dòng)畫 (eyes)坑填，div.feet::before 和 div.feet::after 元素也同樣如此：

動(dòng)畫線段2

修改動(dòng)畫

可以通過(guò)以下三種方式使用動(dòng)畫檢查器修改動(dòng)畫：

• 動(dòng)畫持續(xù)時(shí)間
• 關(guān)鍵幀時(shí)間
• 開始時(shí)間延遲

對(duì)于本部分，假設(shè)下面的屏幕截圖代表原始動(dòng)畫：

修改動(dòng)畫1

要更改動(dòng)畫的持續(xù)時(shí)間弛姜，請(qǐng)點(diǎn)擊并拖動(dòng)第一個(gè)或最后一個(gè)圓圈

修改動(dòng)畫2

如果動(dòng)畫定義了任何關(guān)鍵幀規(guī)則穷遂，那么這些將表示為白色內(nèi)圈。 點(diǎn)擊并拖動(dòng)其中一個(gè)以更改關(guān)鍵幀的時(shí)間

修改動(dòng)畫3

要為動(dòng)畫添加延遲娱据，請(qǐng)點(diǎn)擊并將其拖動(dòng)至圓圈以外的任何位置

修改動(dòng)畫4

參考文獻(xiàn)

• Inspect Animations by Kayce Basques

本文由博客一文多發(fā)平臺(tái) OpenWrite 發(fā)布蚪黑！