10 月 23 - 25 日,QCon 上海站即将召开,现在购票,享9折优惠 了解详情
写点什么

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

  • 2020-07-15
  • 本文字数:1006 字

    阅读完需:约 3 分钟

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

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


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


2007 年,WebKit 团队引入了CSS AnimationsCSS 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代码库进行协作和反馈。


原文链接


Web Animations API Now Supported in All Evergreen Browsers


2020-07-15 13:302609

评论

发布
暂无评论
发现更多内容

关于价值、目标、任务的思考

L3C老司机

第4周课后练习-系统架构

潘涛

架构师训练营 4 期

架构师训练营 4 期 第4周

引花眠

架构师训练营 4 期

JavaScript07 - 流程控制语句

Mr.Cactus

JavaScript

【JS】Array.from() 将伪数组转换成数组

德育处主任

JavaScript js ES6 array 28天写作

深入理解MVCC与间隙锁

林一

MySQL MVCC

吐血整理:推荐几款顶级好用的IDEA插件

Silently9527

Java intellij-idea idea插件

能源革命背后的牛公司 (28天写作 Day16/28)

mtfelix

28天写作 能源革命

五分钟学会模板模式

田维常

mybatis

「产品经理训练营」作业02:利益相关方识别

狷介

产品经理训练营

Python 中 lru_cache 的使用和实现

zikcheng

Python 源码分析 LRU

JavaScript06 - 操作符

Mr.Cactus

JavaScript

JavaScript08 - 数组

Mr.Cactus

JavaScript

Java-可重入锁

hepingfly

Java 可重入锁

第4周总结-系统架构

潘涛

架构师训练营 4 期

商务部CECBC区块链专委会副主任、数字经济商学院院长吴桐:建立完善稳健的基础设施 加速区块链与产业深度融合

CECBC

区块链

CSS(二)——CSS核心基础

程序员的时光

CSS 程序员 七日更 28天写作

Scrum Patterns:Sprint计划会(译)

Bruce Talk

敏捷 译文 Agile Scrum Patterns

「架构师训练营 4 期」 第四周 - 002

凯迪

C++静态链接符号冲突的几种处理方法

ElvinYang

GNUCash 2: 缺点

lidaobing

GNUCash 28天写作

【函数计算实践】一个应用案例

程序员架构进阶

阿里云 架构 项目实战 函数计算 28天写作

JVM 垃圾收集算法

看山

JVM 垃圾回收算法

认识产品经理

ALone

人民日报——大力发展数字经济

CECBC

数字经济

优雅编码 | 18个Javascript代码的小技巧

devpoint

代码优化 优雅

【JS】Array.of() 创建数组

德育处主任

JavaScript 大前端 js ES6 28天写作

老师讲的真棒!2021Android精选面试实战总结整理,分享PDF高清版

欢喜学安卓

android 程序员 面试 移动开发

泪目!为什么Flutter能最好地改变移动开发?成功收获美团,小米安卓offer

欢喜学安卓

android 程序员 面试 移动开发

“区块链+产业应用”系列研讨会首场“大健康产业篇”在深圳举行

CECBC

健康产业

自动泊车初步了解 (28天写作 Day17/28)

mtfelix

自动驾驶 28天写作 自动泊车

所有主流浏览器都已支持Web Animations API_大前端_Dylan Schiemann_InfoQ精选文章