使用 Chrome DevTools 的 Animations 抽屉式导航栏标签页检查和修改动画。
概览
如需拍摄动画,请打开动画面板。它会自动检测动画并将其分类。
Animations 面板有两个主要用途:
- 检查动画。减慢动画速度、重放动画或检查动画的源代码 。
- 修改动画。修改 动画组。不支持修改关键帧和贝塞尔曲线。
动画面板支持 CSS 动画、CSS 过渡、网页动画和 View Transitions API。
尚不支持 requestAnimationFrame
动画。
什么是动画组?
动画组是一组看起来彼此相关的动画。
目前,网络还没有真正的组动画概念,因此动画设计人员和开发者需要组合各个动画并为其设置时间,使它们呈现为一种连贯的视觉效果。Animations 面板会根据开始时间(不包括延迟)预测相关动画,并将其并排分组。
换言之,Animations面板可将同一脚本块中触发的动画归为一组,但如果是异步的,则归为不同的组。
打开“动画”面板
您可以通过以下两种方式打开 Animations 面板:
- 选择
自定义和控制开发者工具 >更多工具 >动画。
按以下任一键打开命令菜单:
- 在 macOS 上:Command + Shift + P
- 在 Windows、Linux 或 ChromeOS 上:Ctrl + Shift + P
然后,开始输入
Show Animations
并选择相应的抽屉式导航栏面板。
默认情况下,动画面板会在控制台抽屉式导航栏旁边作为标签页打开。作为抽屉式导航栏标签页,您可以将其用于任何面板,也可以将其移至开发者工具顶部。
当您打开动画面板时,该面板会自动拍摄正在播放的动画。如果动画在网页加载时触发或已经停止,请在面板处于打开状态时重新加载页面。
熟悉“动画”面板界面
Animations 面板包含四个主要部分:
- 控制措施。在这里,您可以屏蔽 清除所有捕获的动画组、暂停 暂停或play_arrow 恢复动画,或者更改所选动画组的速度。
概览 - 显示截取的两类动画组(带有图标:鼠标滚动驱动型动画和 schedule 常规(基于时间)动画组)。
在此处选择一个动画组,以在 Details 窗格中进行检查和修改。
时间轴。根据动画组的类型,时间轴可采用以下格式:
- 对于鼠标滚动驱动的动画,以像素为单位。
- 对于调度基于时间的动画,以毫秒为单位。
在时间轴中,您可以重放 重放动画、拖动动画或跳转到特定时间点。
详情。检查和修改所选的动画组。
如需拍摄动画,请在 Animations 面板处于打开状态时触发该动画。
检查动画
捕获动画后,您可以通过以下几种方式重放动画:
- 在 Overview 窗格中将鼠标悬停在相应缩略图的缩略图上,即可查看它的预览。
- 拖动进度条指针(红色竖线)可拖动视口动画;点击时间轴上的任意位置,即可将进度条指针定位到特定时间点。如果动画已在播放,则继续播放;否则停止。
- 从 Overview 窗格中选择动画组(使其显示在详细信息中)
窗格),然后按
Replay 按钮。通过 动画会在视口中重放。
点击控件栏中的 动画速度按钮,即可更改所选动画组的预览速度。
查看动画详情
拍摄动画组后,在 Overview 窗格中点击该动画组即可查看其详细信息。
在 Details 窗格中,每个动画都各成一行。要查看相应元素的完整名称,请调整名称列的大小。
将鼠标悬停在动画上,在视口中突出显示该动画。点击动画,在 Elements面板。
如果某些动画的 animation-iteration-count
属性设置为 infinite
,则这些动画会无限重复播放。动画面板会显示其定义和迭代。
动画最左侧的深色部分是其定义。右侧较淡的版块 代表迭代。
例如,在下一个屏幕截图中,第二部分和第三部分分别表示 第一部分的迭代。
![动画迭代示意图。](https://developer.chrome.google.cn/static/docs/devtools/css/animations/image/diagram-animation-iterat-82c9f85b419de.png?authuser=7&hl=ro)
如果两个元素应用了同一个动画,Animations 面板就会为它们分配
相同颜色。颜色本身是随机的,没有意义。例如,在下面的屏幕截图中
div.eye.left::after
和 div.eye.right::after
这两个元素具有相同的动画 (eyes
)
以及 div.feet::before
和 div.feet::after
元素。
![使用颜色标识的动画。](https://developer.chrome.google.cn/static/docs/devtools/css/animations/image/color-coded-animations-b834763e8f9d9.png?authuser=7&hl=ro)
修改动画
您可以通过以下三种方式使用 Animations 面板修改动画:
- 动画时长。
- 关键帧时间。
- 开始时间延迟。
在本部分中,假设下一个屏幕截图代表原始动画:
要更改动画的时长,请拖动第一个或最后一个圆圈。
如果动画定义了任何关键帧规则,那么这些规则将表示为白色内圈。 拖动其中一个,更改关键帧的显示时间。
要为动画添加延迟,请点击动画本身(而不是圆圈),然后将其拖动到任意位置。
修改已发布的@keyframes
修改样式中的 @keyframes
后,您可以立即在动画面板中看到相应的效果。
请在此演示页面上试用:
- 打开动画面板。它会自动捕捉网页上正在播放的脉冲动画。在操作栏中的控件下选择动画。
- 在Elements中,使用
class="pulser"
检查元素,并在Elements中找到@keyframes pulse
部分。 - 请尝试修改关键帧,例如,将第二个关键帧从
50%
更改为20%
。 - 观察您在样式中的更改对动画面板捕获的动画有何影响。
在动画期间修改 ::view-transition
伪元素
借助 View Transitions API,您只需执行一个步骤即可更改 DOM,同时可在两种状态之间创建动画过渡效果。在动画播放期间,API 会构建一个具有以下结构的伪元素树:
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)
如需在Elements中修改此结构,请执行以下操作:样式:
- 打开开发者工具并检查使用 View Transitions API 的页面。例如,此演示页面。
- 在动画中,点击暂停 暂停。
在网页上触发动画。Animations 面板被捕获后会立即暂停。现在,您可以在 DOM 中的
<head>
元素顶部找到::view-transition
结构。在Elements >样式中,用于修改
::view-transition
伪元素的 CSS。恢复动画并重放以查看结果。
如需了解详情,请参阅使用 View Transitions API 实现平滑简单的过渡。