ChromeDevTools：webanimation和console_html/css

1. Cubic Bezier 可視化編輯器

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

圖片內(nèi)容來來自 w3school

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

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

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

2. web animation playback

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

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

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

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

3. 導(dǎo)出 console log 信息

DevTools 中的 console 日志還可以右鍵導(dǎo)出為文本。

4. 2015 Google I/O console 彩蛋

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

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

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

Post Views: 1

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

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