使用 Web 动画 API 让页面栩栩如生

huma13453

本文由客座作者达德利·斯托里 (Dudley Storey)撰写。 SitePoint 来宾帖子旨在为您带来来自 JavaScript 社区著名作家和演讲者的引人入胜的内容。 一个 API 即可统治一切 网络动画长期以来分为四个不同的阵营： CSS 过渡和动画性能非常好，并提供关键帧，但构建起来也很耗时，并且在 CSS 和JavaScript中仅提供基本的开始和结束控制。这往往将它们归为简单的 UI 响应动画、循环和页面加载动画。 SMIL（同步多媒体集成语言）功能非常强大，但语法也很繁重，并且浏览器支持不完整。它还仅限于仅在 SVG 上下文中控制元素。 JavaScript提供对元素的直接控制，但无法理解关键帧或缓动等设计者友好的功能，并且缺乏 CSS 的本机优化和性能。Canvas API 动画很棒，但仍然缺乏对动画基础知识的理解，并且无法为任意 DOM 元素设置动画。


像Greensock这样的JavaScript 动画框架试图弥补 JavaScript 在动画方面的传统缺陷，但也具有框架的所有相关缺点：页面加载、性能和学习新语法。 Learn to Code with JavaScript Web 动画 API 旨在将所有这些功能的最佳功能集成到一个统一的规范中，同时消除缺点，在 JavaScript 中创建对 华人海外澳洲号码数据 关键帧、缓动和元素控制的本机理解，并具有与 CSS 相同的屏幕性能。随着Chrome 和 Firefox 现在支持该规范的核心组件，并且其他浏览器（包括Safari和 Edge）已宣布或正在进行开发，再加上强大的 polyfill 的可用性，现在是时候认真考虑 Web Animations API 来将 Web生命的页面。 JavaScript 中的关键帧 让我们看一个最简单的关键帧动画示例：将红球元素从页面的一侧移动到另一侧。无论我们使用哪种技术，元素都是相同的我使用了vmin单位。

  

以便元素在响应视口大小的同时始终保持对称。 在 CSS 中，将球从页面的一侧移动到另一侧需要类似以下内容：该动画将从红球元素的声明中调用 结果，在 Codepen 中显示： 此时，关于动画有一些需要注意的事项，包括自动内置的缓动（开始时加速并在结束时减速）这一事实。 输入网页动画 API 保留 HTML 和初始样式，让我们删除 CSS 动画并替换使用 Web 动画 API 的 JavaScript 来完成相同的操作 您可以看到动画采用了与 CSS 大部分相同的语法，但将其表示为一个带有表示关键帧的数组的对象。我们不必在关键帧中显式声明toor - JavaScript 会自动为我们均匀分配关键帧，尽管声明也是完全可能的。from 动画尚未播放；就像在 CSS 中一样，我们必须这样调用它：语法的关键帧部分在未来的浏览器中将变得更加容易。