ChromeDevTools：webanimation和console_html/css

1. Cubic Bezier 可視化編輯器

在 CSS3 transition 中，你可以用 transition-timing-function 設置過渡的速度效果。transition-timing-function 提供了 5 個預定義的值：linear、ease、ease-in、ease-out 和 ease-in-out 。這些預定義效果其實都是 cubic-bezier 函數的不同參數時的效果，它們的對應關系如下：

圖片內容來來自 w3school

貝塞爾曲線(Bezier curve)是計算機圖形學中的一種重要的曲線參數，在 Adobe Illustrator 等矢量圖編輯器中都會看到這種曲線，而在動畫中它用于描述移動效果。它由 4 參數構成：

使用這 4 個參數你就可以自定義任何個性化的移動效果，但是這些參數并不直觀。過去我們可以訪問 CSS 專家 Lea Verou 做的這個網站 cubic-bezier.com ，在上面以可視化的形式找到自己想要的效果再把參數復制到自己的應用中。現在 Chrome 已經提供了這個功能，你可以直接在 DevTools 中可視化地編輯自己應用中的實際元素并實時預覽實際的效果。

使用方法很簡單，在元素審查(inspect)中找到你應用了 CSS transition 或 transition-timing-function 的元素，點擊該元素 transition 樣式前面的小方塊就會彈出 Cubic Bezier 可視化編輯器了。動手試試吧！（可以在 cubic-bezier.com 頁面找到 id 是 current 的元素動手嘗試。）

2. web animation playback

除了上面的 Cubic Bezier 編輯器，Chrome 對 web animation 調試還有更多的支持。例如，我們打開這個 3D NES 控制器 的動畫示例，通過元素檢查(inspect)找到 這個元素。

在 CSS 樣式中，點擊右上角 Filter 右側最后一個圖標(Toggle animation controls)則會在下面出現一個 Animations 的功能區。在這里你可以控制動畫播放/暫停，以及播放速度的快慢，還不錯吧。

如果你在 DevTools 中開啟 Animation Inspection 實驗功能，還有更高級的玩意！如何開啟 DevTools 實驗功能見這篇文章。

開啟之后，前面那個簡單的 Animations 的功能區就在 Style 的上面變成這樣了。點擊上方的 animation 區塊，它會顯示詳細動畫執行細節。

3. 導出 console log 信息

DevTools 中的 console 日志還可以右鍵導出為文本。

4. 2015 Google I/O console 彩蛋

訪問 2015 Google I/O 官網 ，打開 DevTools 控制臺，點擊頁面左側的設置按鈕，然后會看到 console 中輸出 Experiment loaded successfully. 的信息。

之后輸入 experiment.consoleDance(); 命令就會在控制臺中看到一個由 ascii 字符構成的跳舞小人。非常有趣，原理當然就是不斷地在控制臺上大量輸出。

作者：韓國愷。本系列文章以 Addy & Matt 的系列視頻 Totally Tooling Tips 的內容為基礎重新整理而成，主要介紹一些(前端)開發者喜歡的工具和技巧。

Post Views: 1

除非特別聲明，此文章內容采用 知識共享署名 3.0 許可，代碼示例采用 Apache 2.0 許可。更多細節請查看我們的 服務條款 。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com