检查动画Inspect animations

使用 Microsoft Edge DevTools 动画检查器检查和修改动画。Inspect and modify animations with the Microsoft Edge DevTools Animation Inspector.

动画检查器

摘要Summary

  • 打开动画检查器捕获动画。Capture animations by opening the Animation Inspector. 动画检查器自动检测动画并按组排序。The Animation Inspector automatically detects and sorts animations into groups.
  • 通过减慢动画的速度、重播每个动画或查看源代码来检查动画。Inspect animations by slowing down each one, replaying each one, or viewing the source code.
  • 通过更改计时、延迟、持续时间或关键帧偏移来修改动画。Modify animations by changing the timing, delay, duration, or keyframe offsets.

概述Overview

Microsoft Edge DevTools 动画检查器有两个主要用途。The Microsoft Edge DevTools Animation Inspector has two main purposes.

  • 检查动画。Inspecting animations. 你可以减慢、重播或检查动画组的源代码。You want to slow down, replay, or inspect the source code for an Animation Group.
  • 修改动画。Modifying animations. 你可以修改动画组的计时、延迟、持续时间或关键帧偏移。You want to modify the timing, delay, duration, or keyframe offsets of an Animation Group. 贝塞尔编辑和关键帧编辑当前不受支持。Bezier editing and keyframe editing are currently not supported.

动画检查器支持 CSS 动画、CSS 过渡和 Web 动画。The Animation Inspector supports CSS animations, CSS transitions, and web animations. requestAnimationFrame 动画当前不受支持。animations are currently not supported.

什么是动画组?What is an Animation Group?

动画组是一组相互相关的动画。An Animation Group is a group of animations that may be related to each other. 目前,Web 没有组动画的实际概念,因此动画设计人员和开发人员必须撰写各个动画并设置动画时间,以便动画呈现为一致的视觉效果。Currently, the web has no real concept of a group animation, so motion designers and developers have to compose and time individual animations so that the animations render as one coherent visual effect. 动画检查器根据开始时间 \(等,不包括延迟)来预测哪些动画是相关的。The Animation Inspector predicts which animations are related based on start time (excluding delays, and so on). 动画检查器还会将动画并排分组。The Animation Inspector also groups the animations side-by-side.
换句话说,在同一脚本块中触发的一组动画会被组合在一起。In other words, a set of animations that are all triggered in the same script block are grouped together. 如果动画是异步动画,它会被放置在单独的组中。If an animation is asynchronous, it is placed in a separate group.

入门Get started

有两种方法可以打开动画检查器:There are two ways to open the Animation Inspector:

  • 打开“自定义和控制 DevTools”菜单Open the Customize and Control DevTools menu

    1. 导航到“更多工具”子菜单。Navigate to the More tools sub-menu.

    2. 选择“动画”:Choose Animations:

      使用主菜单的动画

  • 打开命令菜单Open the Command Menu

    1. 键入 Drawer: Show AnimationsType Drawer: Show Animations.

动画检查器将在控制台工具旁打开The Animation Inspector opens next to the Console tool. 由于动画检查器是一个箱工具,因此你可以从任何 DevTools 面板使用动画检查器。Since the Animation Inspector is a Drawer tool, you may use the Animation Inspector from any DevTools panel.

空动画检查器

动画检查器分为四个主要部分 (或窗格)。The Animation Inspector is grouped into four main sections (or panes). 本指南按以下方式指代每个窗格:This guide refers to each pane as follows:

索引Index 窗格Pane 描述Description
11 控件Controls 你可以在此处清除当前捕获的所有动画组,或更改当前选定的动画组的速度。From here you may clear all currently captured Animation Groups, or change the speed of the currently selected Animation Group.
22 概述Overview 在此处选择动画组以检查和修改详细信息窗格中的动画组。Choose an Animation Group here to inspect and modify it in the Details pane.
33 时间线Timeline 从此处暂停并启动动画,或跳转到动画中的特定点。Pause and start an animation from here, or jump to a specific point in the animation.
44 详细信息Details 检查和修改当前选定的动画组。Inspect and modify the currently selected Animation Group.

批注动画检查器

若要捕获动画,只需执行在动画检查器打开时触发动画的交互。To capture an animation, just perform the interaction that triggers the animation while the Animation Inspector is open. 如果在页面加载时触发了动画,请刷新页面,同时打开动画检查器以检测动画。If an animation is triggered on page load, refresh the page with the Animation Inspector open to detect the animation.

检查动画Inspect animations

捕获动画后,有多种方式可以重播它:After you capture an animation, there are a few ways to replay it:

  • 将鼠标悬停在“概述”窗格中的缩略图上,查看缩略图的预览。Hover on the thumbnail in the Overview pane to view a preview of it.
  • 从“概述”窗格选择动画组,(以便它显示在“详细信息”窗格中) 并选择”重播” (重播图标) 图标。Choose the Animation Group from the Overview pane (so that it is displayed in the Details pane) and choose the replay (replay icon) icon. 动画会在视区中重播。The animation is replayed in the viewport. 选择“动画速度 (动画速度图标)” 图标可更改当前选定的动画组的预览速度。Choose the animation speed (animation speed icons) icons to change the preview speed of the currently selected Animation Group. 可以使用红色竖线更改当前位置。You may use the red vertical bar to change your current position.
  • 选择并拖动红色竖线以清理视区动画。Choose and drag the red vertical bar to scrub the viewport animation.

查看动画详细信息View animation details

捕获动画组后,从“概述”窗格中选择它以查看详细信息。After you capture an Animation Group, choose on it from the Overview pane to view the details. 在“详细信息”窗格中,将为每个单独的动画分配一行。In the Details pane each individual animation is assigned the a row.

动画组详细信息

将鼠标悬停在动画上以在视区中突出显示它。Hover on an animation to highlight it in the viewport. 选择动画以在“元素”工具中选择它。Choose the animation to select it in the Elements tool.

将鼠标悬停在动画上以在视区中突出显示它

动画最左侧较暗的部分就是定义。The leftmost, darker section of an animation is the definition. 右侧更淡出的部分表示迭代。The right, more faded section represents iterations. 例如,在下图中,第二节和第三节表示第一节的迭代。For example, in the following figure, sections two and three represent iterations of section one.

动画迭代关系图

如果两个元素应用了相同的动画,则动画检查器会向这些元素分配相同的颜色。If two elements have the same animation applied, the Animation Inspector assigns the same color to the elements. 颜色是随机的,没有意义。The color is random and has no significance. 例如,在下图中,这两个元素 div.cwccw.earlierdiv.cwccw.later 应用了相同的动画 (spinrightleft), div.ccwcw.earlierdiv.ccwcw.later 元素也是。For example, in the following figure, the two elements div.cwccw.earlier and div.cwccw.later have the same animation (spinrightleft) applied, as do the div.ccwcw.earlier and div.ccwcw.later elements.

颜色编码动画

修改动画Modify animations

有三种方法可以使用动画检查器修改动画。There are three ways you are able to modify an animation with the Animation Inspector.

  • 动画持续时间。Animation duration.
  • 关键帧计时。Keyframe timings.
  • 开始时间延迟。Start time delay.

下图中显示了原始动画。In the following figure, the original animation is represented.

修改前的原始动画

若要更改动画的持续时间,请选择并拖动第一个或最后一个圆。To change the duration of an animation, choose and drag the first or last circle.

修改持续时间

如果动画定义任何关键帧规则,则这些规则表示为白色内部圆。If the animation defines any keyframe rules, then these are represented as white inner circles. 选择并拖动其中一个以更改关键帧的计时。Choose and drag one of these to change the timing of the keyframe.

修改后的关键帧

若要向动画添加延迟,请选择并将其拖动到除圆形之外的任何位置。To add a delay to an animation, choose and drag it anywhere except the circles.

修改后的延迟

联系 Microsoft Edge DevTools 团队Getting in touch with the Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标

(../media/animation-speed-buttons-icon.msft.png): ../media/animation-speed-buttons-icon.msft.png(../media/animation-speed-buttons-icon.msft.png): ../media/animation-speed-buttons-icon.msft.png
(../media/replay-button-icon.msft.png): ../media/replay-button-icon.msft.png(../media/replay-button-icon.msft.png): ../media/replay-button-icon.msft.png

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
原始页面位于此处,由 Kayce Basques\(Chrome DevTools & Lighthouse 的技术作家\)撰写。The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。This work is licensed under a Creative Commons Attribution 4.0 International License.