前端開發程序中針對復雜的影片，往往調整起來比較無力，這個時候如果借助devTools的Animations工具，就會把復雜的影片變得"有跡可循"，
注意：影片檢查器支持 CSS 影片、CSS 過渡和網路影片，但暫不支持 requestAnimationFrame 影片
面板介紹
打開Chrome的devTools面板，點擊 x（關閉按鈕）左邊的 更多按鈕，選擇 "More tools"，然后點擊子選單里的 "Animations"，就可以調出該面板：
或者在devTools 輸入 commond + shift + p打開命令面板，然后輸入 Drawer: Show Animations
該面板可以捕捉頁面里的影片，并根據影片的運動軌跡劃分關鍵幀，我們可以一目了解地知道該關鍵幀下的哪些元素正在進行何種樣式的變化，
如下圖所示，影片檢查面板由以下四部分組成：
- 1 Controls，最左邊按鈕點擊可以清除所有當前捕捉的影片組；右按鈕組可以更改當前選定影片組的速度，
- 2 Overview，在這里選擇影片組，然后在 Details 窗格中進行檢查和修改，
- 3 Timeline，暫停和開始影片，或者跳到影片中的特定幀
- 4 Details，檢查和修改當前選定的影片組
常用功能
animations主要兩個常用的功能是
- 檢查影片：檢查影片運行的關鍵幀，并可以調整影片播放的速度
- 修改影片：在面板里修改元素影片的影片組的時間、延遲、持續時間或關鍵幀偏移
檢查影片
捕捉影片后，可以通過以下幾種方式重播影片：
- 在 Overview 窗格中將滑鼠懸停在影片的縮略圖上方，查看它的預覽，
- 從 Overview 窗格中選擇影片組（這樣，影片組就會顯示在 Details 窗格中），然后按 replay 按鈕（replay 按鈕），影片會在視口中重播，點擊 animation speed 按鈕（animation speed 按鈕）更改當前選定影片組的預覽速度，您可以使用紅色的垂直條更改當前位置，
- 點擊并拖動紅色的垂直條以拖拽視口影片，
查看影片詳細資訊
捕捉影片組后，在 Overview 窗格點擊影片組可以查看其詳細資訊， 在 Details 窗格中，每個影片會單獨展示成一行
將滑鼠懸停在影片上可以在視口中突出顯示該影片，點擊該影片，在 Elements 面板中將自動選中該影片的HTML節點：
理解影片軌跡
- 影片軌跡中實心圓圈表示影片的起點和終點，而空心圓表示宣告特定規則的關鍵幀，
- 如果影片是回圈的，最左側的深色部分是其定義，右側的淺色部分表示重復， 如下圖所示，第二和第三部分表示第一部分的重復：
- 如果兩個元素應用了同一個影片，影片檢查器會給它們分配相同的顏色， 顏色本身是隨機的且沒有意義，如圖所示，兩個元素
div.eye.left::after和div.eye.right::after已應用了同一個影片 (eyes)，div.feet::before和div.feet::after元素也同樣如此：
修改影片
可以通過以下三種方式使用影片檢查器修改影片：
- 影片持續時間
- 關鍵幀時間
- 開始時間延遲
對于本部分，假設下面的螢屏截圖代表原始影片：
要更改影片的持續時間，請點擊并拖動第一個或最后一個圓圈
如果影片定義了任何關鍵幀規則，那么這些將表示為白色內圈， 點擊并拖動其中一個以更改關鍵幀的時間
要為影片添加延遲，請點擊并將其拖動至圓圈以外的任何位置
參考文獻
- Inspect Animations by Kayce Basques
本文由博客一文多發平臺 OpenWrite 發布！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/930.html
標籤：JavaScript
上一篇：layui hint:upload is not a valid module
下一篇：WEB前端第三十七課——jsBOM操作-DataParse、jsEngine、性能、history、道岔、closure