不仅仅JavaScript所有主流浏览器都已支持 Web Animations API

发布于 2020-9-7 11:26
浏览
0收藏

随着 Safari 13.1 的发布,所有主流浏览器也都提供了 Web Animations API 支持。

 

早期的 Web 浏览器动画通常是使用 JavaScript API 创建的。这种方法很灵活,但难以让浏览器通过硬件加速来优化动画,也不能将其连接到布局和渲染管道。

 

2007 年,WebKit 团队引入了 CSS Animations 和 CSS Transitions ,并最终成为 Web 标准。这些 API 易于使用,并弥补了早期 JavaScript 动画的不足。

 

但是,CSS Animations 和 CSS Transitions 存在一些限制,特别是在动态创建、回放控制和生命周期管理方面。

 

Web Animations API 引入了一种解决方案,提供了 CSS Animations 和 CSS Transitions 的能力,同时还提供了 JavaScript API 的灵活性。Web Animations API 通过计时模型和动画模型实现了对 Web 动画的编程控制。现在可以通过让 JavaScript 访问 playbackrate、迭代、事件等来创建和控制动画,而之前一般使用 requestAnimationFrame 或效率较低的 setInterval 来实现。

 

现代浏览器(如 Firefox、Safari)和所有基于 Chrome 的浏览器(如 Chrome、Edge 和 Brave)都支持 Web Animations。早期的浏览器可以借助 web-animations-js 和框架(如 Dojo)来使用 Web Animations API。

 

Web Animations 规范为 Web 动画提供了一个共享模型,CSS Animations 和 CSS Transitions 作为这个共享基础模型之上的层而存在。

 

所有主流浏览器都支持 Web Animations 的调试。Safari 的 Web Inspector 在 Timelines 选项卡的媒体动画和动画时间轴中包含了动画。

 

Firefox 动画检查器会沿着时间轴同步显示动画,提供了一个可拖动的小部件,你可以用它在时间轴上的任意点移动,并在该点查看页面。Firefox 动画检查器可以显示使用 Web Animations、CSS Animations 和 CSS @keyframes 规则创建的动画。

 

基于 Chrome 的浏览器提供了 Chrome DevTools 动画检查器,开发者可以用它来查看和修改动画。Chrome 动画检查器支持 CSS Animations、CSS Transitions 和 Web Animations,但不支持 requestAnimationFrame 动画。

 

所有现代浏览器都提供了对原生 Web Animations 的支持和对开发人员的工具支持,JavaScript 和 Web 开发人员可以快速高效地开发原生动画。尽管花了将近 15 年才达到这个成熟阶段,对于 web 平台来说仍然是一个重大的成就。

 

Web Animations 是一个 W3C 工作草案推荐。开发人员可以通过 W3C CSS 工作组的 GitHub 代码库进行协作和反馈。

 

来源:InfoQ 

标签
已于2020-9-7 11:26:51修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐