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

2020 年 7 月 15 日

所有主流浏览器都已支持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 年 7 月 15 日 13:301480

评论

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

牛逼!支付宝超级 App 的架构演进

周老师

Java 编程 程序员 架构 面试

About Me

翎君

android

智慧公安二维码报警定位系统,高速路二维码定位报警开发

13530558032

【薪火计划】05 - 坦诚是领导力的根基

brave heart

管理

上分工具,凭这份《数据结构与算法》核心文档,我“跳”进了字节

Crud的程序员

程序员 架构 算法

第一周 架构方法 作业一 「架构师训练营 3 期」

feiyun123

架构方法 「架构师训练营 3 期」

他在滕王阁上醒来,见到智慧视觉第一城

脑极体

面试专题-Java基础面试技术

李浩宇/Alex

甲方日常 56

大橘子

工作 随笔杂谈 日常

大厂经验:埋点数据质量之埋点验证

阿亮

埋点 数据验证

架构师训练营第九周作业

四夕晖

面试 | 程序猿面试,Elasticsearch被坑被虐的体无完肤...

Java架构师迁哥

百度的五年乌镇行旅:AI如何穿越过漫漫时光,成为世界的发展新动能?

脑极体

面试JVM一问三不知??来看看这个

程序员的时光

JVM Java虚拟机

耗子尾汁,你居然还不懂什么是架构师?那你编码为了什么?还不看阿里人怎么判定吗?

小Q

Java 学习 编程 架构 面试

对话机器人70年:科幻与现实的交融

华为云开发者社区

AI 机器人 对话

MySQL如何实现万亿级数据存储?

冰河

MySQL 分布式 微服务 高可用 mycat

区块链应用场景有哪些?区块链应用开发

t13823115967

区块链应用场景有哪些 区块链应用开发

市值管理软件,交易平台挂单机器人,做市机器人

WX13823153201

市值管理软件

图解 | 不得错过的Binder浅析(二)

哈利迪

android

架构师训练营第 1 期 - 第 9 周 - 学习总结

wgl

架构师训练营第 1 期

市值管理机器人、自动跑k线机器人开发

t13823115967

市值管理机器人 自动跑k线机器人开发

从前世今生聊一聊,大厂为啥亲睐时序数据库

华为云开发者社区

数据库 场景 时序

Appium上下文和H5测试(一)

清菡

App

架构师训练营第 1 期 - 第 9 周 - 命题作业

wgl

《华为数据之道》读书笔记:第 2 章 建立企业级数据综合治理体系

方志

数据中台 数据仓库 数字化转型 数据治理

彻底搞懂 IO 底层原理

vivo互联网技术

Java Netty 服务器 语法

Python进阶——元类是怎么创建一个类的?

Kaito

Python

【JAVA】List转换为array

踉踉跄跄走江湖

经典之作——《数学之美》第二版-吴军

计算机与AI

数学

折半查找和插值查找

ilovealt

算法和数据结构

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