Chrome DevTools：web animation 和 console_html/css_WEB-ITnose

本文是TTT 系列文章第五篇，今天要为大家介绍 4 种好玩的东西！

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 许可。更多细节请查看我们的 服务条款 。