Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

检查动画

使用 Chrome DevTools 动画检查器检查和修改动画。

动画检查器

TL;DR

  • 通过打开动画检查器捕捉动画。检查器会自动检测动画并将它们分类为多个组。
  • 通过慢速播放、重播或查看动画源代码来检查动画。
  • 通过更改动画时间、延迟、持续时间或关键帧偏移修改动画。

概览

Chrome DevTools 动画检查器有两个主要用途。

  • 检查动画。您希望慢速播放、重播或检查动画组的源代码。

  • 修改动画。您希望修改动画组的时间、延迟、持续时间或关键帧偏移。 当前不支持编辑贝塞尔曲线和关键帧。

动画检查器支持 CSS 动画、CSS 过渡和网络动画。当前不支持 requestAnimationFrame 动画。

什么是动画组?

动画组是一组看上去彼此相关的动画。 当前,网页没有真正概念的组动画,动画设计师和开发者必须编排和设置各个动画的时间,让它们看上去有一种连贯的视觉效果。动画检查器会根据开始时间(不包括延迟等等)预测哪些动画相关并将它们并排分组。也就是说,全部在同一脚本块中触发的一组动画被分为一组,但如果是异步的,它们将单独分组。

使用入门

可以通过两种方式打开动画检查器:

  • 转到 Styles 窗格(位于 Elements 面板上),然后按 Animations 按钮(Animations 按钮)。
  • 打开 Command Menu,键入 Drawer: Show Animations

动画检查器将在 Console 抽屉旁作为标签打开。由于检查器是一个是抽屉式导航栏标签,您可以从任何 DevTools 面板打开它。

空的动画检查器

动画检查器分为四个主要部分(或窗格)。本指南使用以下名称指代各个窗格:

  1. Controls。从这里,您可以清除所有当前捕捉的动画组,或者更改当前选定动画组的速度。
  2. Overview。在这里选择动画组,然后在 Details 窗格中进行检查和修改。
  3. Timeline。 从这里暂停和开始动画,或者跳到动画中的特定点。
  4. Details。 检查和修改当前选定的动画组。

注解动画检查器

要捕捉动画,只需在动画检查器打开时执行可以触发动画的交互。 如果动画在页面加载时触发,您可以重新加载页面,帮助动画检查器检测动画。

检查动画

捕捉动画后,可以通过以下几种方式重播动画:

  • Overview 窗格中将鼠标悬停在动画的缩略图上方,查看它的预览。
  • Overview 窗格中选择动画组(这样,动画组就会显示在 Details 窗格中),然后按 replay 按钮(replay 按钮)。动画会在视口中重播。点击 animation speed 按钮(animation speed 按钮)更改当前选定动画组的预览速度。您可以使用红色的垂直条更改当前位置。
  • 点击并拖动红色的垂直条以拖拽视口动画。

查看动画详细信息

捕捉动画组后,在 Overview 窗格点击动画组可以查看其详细信息。 在 Details 窗格中,每个动画会单独成行。

动画组详情

将鼠标悬停在动画上可以在视口中突出显示该动画。点击动画,在 Elements 面板中将其选中。

将鼠标悬停在动画上,使其在视口中突出显示

动画最左侧的深色部分是其定义。右侧的浅色部分表示重复。 例如,在下方的屏幕截图中,第二和第三部分表示第一部分的重复。

动画重复示意图

如果两个元素应用了同一个动画,动画检查器会给它们分配相同的颜色。 颜色本身是随机的且没有意义。例如,在下方的屏幕截图中,两个元素 div.eye.left::afterdiv.eye.right::after 已应用了同一个动画 (eyes),div.feet::beforediv.feet::after 元素也同样如此。

带有彩色编码的动画

修改动画

可以通过以下三种方式使用动画检查器修改动画:

  • 动画持续时间。
  • 关键帧时间。
  • 开始时间延迟。

对于本部分,假设下面的屏幕截图代表原始动画:

修改之前的原始动画

要更改动画的持续时间,请点击并拖动第一个或最后一个圆圈。

修改的持续时间

如果动画定义了任何关键帧规则,那么这些将表示为白色内圈。 点击并拖动其中一个以更改关键帧的时间。

修改的关键帧

要为动画添加延迟,请点击并将其拖动至圆圈以外的任何位置。

修改的延迟