如何在Chrome DevTools中使用动画检查器

最新推荐文章于 2024-06-17 17:35:06 发布

daique1908

最新推荐文章于 2024-06-17 17:35:06 发布

阅读量2k

点赞数 2

文章标签：可视化 python java 人工智能 javascript ViewUI

下次将一些基于CSS3的动画放在一起时，您可能会发现跳入Chrome DevTools并利用其动画检查和调整功能会有所帮助。在此快速提示中，我们将简要介绍Chrome中可用的动画开发工具，如何访问它们以及它们可以为您做什么。

在进行过程中，如果您希望一些CSS3动画来测试每个工具，则可以使用我们的课程10个CSS3项目中的这支笔：UI和Layout ：

在运行CSS3动画的页面上，首先转到视图>开发人员>开发人员工具 ，打开Chrome DevTools。或者，您可以使用键盘快捷键F12或CTRL + SHIFT + I。

开发工具打开后，转到右上角由三个垂直点表示的菜单，然后选择“ 更多工具”>“动画” ，如下所示：

首次打开“动画”选项卡时，您将看不到任何与动画相关的内容，只会看到一条消息，提示您正在收听动画 。这样做的原因是，为了正常工作，第一次加载页面时，该选项卡需要已经打开。

要允许面板捕获有关动画的信息，请刷新页面，您将看到以下内容：

左上方的彩色图形图标表示页面的动画。单击该图标以打开动画检查工具：

在播放动画时，您会看到红色播放头在时间轴上移动。可以用鼠标抓住此播放头并对其进行手动擦洗，或将其放置在特定位置。

界面上的每一行代表页面中的单个动画。您会注意到每行都有一部分具有更暗，更饱和的颜色。这表示动画的长度，随后出现的较亮部分表示动画重复自身。

您还将在每条动画线上看到几个小圆圈。这些与动画的关键帧相对应。深色圆圈代表动画的开始和结束，而空心圆圈代表介于两者之间的插页式关键帧。

插页式关键帧（每个动画周期的开始和结束之间的关键帧）可以拖动到不同的位置，并且在移动它们时，您会在浏览器窗口中看到动画更改其时间。这对于精确地测试插页式关键帧应落在哪个百分点上非常有用。

但是，棘手的是，在进行这些实验时，您不会在“ 样式”选项卡中看到代码的任何更新。相反，当您确实将插页式关键帧放置在正确的位置时，您可以手动确定关键帧应设置为使用的百分比值。

将播放头直接放在有问题的关键帧上，您会在面板的左上方看到一个时间戳，告诉您动画以秒为单位的距离。然后，您可以确定这次占整个动画持续时间的百分比。在下面的示例中，播放头大约是2s动画中的1s，因此我们知道此关键帧为50％。

您还可以在“ 动画”选项卡中进行其他更改，这些更改将更新“ 样式”选项卡中的代码，因此您可以确切地看到要移植到CSS中的值。其中第一个是动画开始播放之前的延迟，第二个是动画的持续时间。

要调整动画播放之前的延迟，请将鼠标悬停在其直线上，直到看到手形光标，然后水平拖动。您会在“ 样式”选项卡中看到延迟值的更新：

要修改动画的持续时间，将鼠标悬停在其最后一个关键帧上，直到看到一个双箭头光标，然后水平拖动。同样，将在“ 样式”选项卡中看到该值正在更新。

您还可以使用Chrome的开发工具来修改控制动画时间的速度曲线。首先检查已应用动画的元素。在当前指定的计时功能的左侧，您会看到一个小框，其中带有“花样”。单击它以打开三次方贝塞尔曲线编辑器：

将打开一个框，为您显示说明当前计时功能的贝塞尔曲线。在这里，您可以通过单击左侧的缩略图之一来选择现有的预设，或者您可以左右拖动主曲线图像的手柄以创建自定义三次贝塞尔值，然后可以将其复制到CSS中：

在浏览过程中，您会看到一个紫色的小球在编辑器顶部从左到右移动，以预览您正在使用的计时功能。

另一个额外的有用功能是能够可视化动画中使用的图层的功能，其中包括旋转所述可视化效果并从各个角度对其进行查看以更好地了解事物工作方式的选项。

要打开“ 图层”面板，请转到Chrome开发者工具菜单，然后选择更多工具>图层 。

打开“ 图层”选项卡后，选择左上方的“ 旋转”模式工具：

现在，您可以使用此工具将图层可视化旋转到所需的任何角度，以最好地了解动画各部分的工作方式：

让我们快速总结一下Chrome的动画开发工具：

有时使动画看起来恰到好处可能是一个非常精确而挑剔的过程。这些工具可以为您的动画提供急需的洞察力，以及实时反馈，以帮助您使一切都完美。

翻译自: https://webdesign.tutsplus.com/articles/quick-tip-chrome-animation-dev-tools--cms-31505

关注