WebKit 中的 Web Animations

2018 年 6 月 20 日

作者：Antoine Quint

在过去的 8 个月里，我们一直在致力于增加对 Web Animations 的支持，这是一项 W3C 标准，为 Web 开发人员提供了一个 JavaScript API 来创建、查询和控制动画。虽然将这项实验性功能广泛推向 Web 仍有工作要做，但我们认为我们的实现已经足够成熟，随着 Safari 技术预览版 59 的发布，我们可以为 Web 开发人员群体默认启用 Web Animations。

适用于 Web 的动画 API

多年来，浏览器引擎一直支持各种动画功能，其中 CSS Transitions 和 CSS Animations 是在 Web 上创作高效动画的两种广泛支持的方法。虽然这些功能已证明广受欢迎，但当开发人员尝试通过 JavaScript 集成浏览器实现的动画时，它们就变得有限了。

动态创建 CSS Transition 需要强制或等待样式失效，以便指定开始和结束值
动态创建 CSS Animations 需要生成 @keyframe 规则并将其插入全局样式表
通过 CSS 创建的动画不能通过 JavaScript 表示，也无法查询或控制

例如，开发人员不得不求助于这样的代码，才能将一个元素向右滑动 100 像素

const element = document.getElementById("my-element");

// Set the start value and transition properties.
element.style.transform = "translateX(0)";
element.style.transitionProperty = "transform";
element.style.transitionDuration = "1s";

// Force a style invalidation.
window.getComputedStyle(element);

// Set the end value.
element.style.transform = "translateX(100px)";

这种方法不够优雅，因为它强制进行样式失效，从而导致额外的工作，而不是让浏览器在最合适的时间失效样式。这只是一个单一的过渡，但如果您的网页中另一个库也需要创建过渡呢？这将无缘无故地增加强制样式失效的次数。

Web Animations 的价值在于拥有一个 JavaScript API，它保留了让浏览器引擎高效运行动画的繁重工作能力，同时实现了对动画的更高级控制。使用 Web Animations，我们可以用一个方法调用重写上面的代码：¬…

element.animate({ transform: ["translateX(0)", "translateX(100px)"] }, 1000);

一个方法调用即可完成！但这还不是全部，现在您可以使用功能齐全的 API 来控制此动画，从而驾驭 Web Animations 的强大功能

// Obtain a reference to the animation we created above.
const animation = element.getAnimations()[0];
// Seek the animation to 500ms.
animation.currentTime = 500;
// Pause the animation.
animation.pause();

Web Animations API 非常强大，例如，它允许您获取文档或单个元素上所有正在运行的动画列表，使用 promises 在动画准备开始或完成时运行代码，反转动画等等。

与 CSS 集成

Web Animations 规范不仅仅是指定一个 JavaScript API。它为 Web 浏览器实现 CSS Transitions 和 CSS Animations 等功能提供了计时和动画模型。事实上，在 WebKit 中，我们更新了这些现有 CSS 技术的实现，以便您多年来创作的相同 CSS Transitions 和 Animations 现在在浏览器中表示为 Web Animations 对象。使用 getAnimations() 方法，您可以获得对 CSSTransition 或 CSSAnimation 对象的引用，它们是 Animation 的子类。然后，您可以像我们上面使用 element.animate() 创建动画一样，搜索或暂停在元素上运行的 CSS transition。作为开发人员，您可以将 CSS Transitions 和 Animations 视为 Web Animations 之上的声明式层。

寻求帮助

我们非常高兴能将 Web Animations 的强大功能引入 WebKit 并在 Safari 技术预览版 59 中启用这项技术。但前方仍有相当多的工作，我们需要您的帮助，以确保在 Safari 中启用该功能之前拥有高质量的实现。我们鼓励您尝试新的 API 并报告您发现的问题，请记住我们当前的实现略滞后于规范的当前状态，您可以通过错误 #186518 跟踪所有 API 更改。

检查使用 CSS Transitions 和 Animations 的现有内容是否存在可能的回归也很重要。要查看您可能看到的回归是否由新的 Web Animations 实现引起，可以尝试在开发 → 实验性功能 菜单下切换“Web Animations 和 CSS 集成”选项，看看您的页面行为是否有所不同。