限时领|《AI 百问百答》专栏课+实体书(包邮)! 了解详情
写点什么

所有主流浏览器都已支持 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:302558

评论

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

一文领略 HTTP 的前世今生

yes

互联网 网络 HTTP 阿帕网

华为全联接2020:环信AI领跑,输出5大行业最佳实践

DT极客

中国Prime会员独享巅峰64小时超长跨境网购时间

爱极客侠

一文纵览向量检索

华为云开发者联盟

数据 搜索 检索 检查

世界的下一个主宰——人工智能

CECBC

人工智能 智能时代

bug 回忆录(一)

志学Python

三年筑一“用”:长跑中的智能IP网络

脑极体

大学四年我是怎么写操作系统和计算机网络的?掏心掏肺的分享!

小林coding

学习 程序员 计算机网络 操作系统 计算机基础

关于深浅拷贝

西贝

Java 大前端 基础

融云技术分享:基于WebRTC的实时音视频首帧显示时间优化实践

JackJiang

音视频 即时通讯 实时通信

公有云厂商哪家强?本月UCloud、百度云、阿里云位居三甲——2020年8月云主机性能评测排名

博睿数据

Binder那么弱怎么面大厂?

博文视点Broadview

Java android 通信 移动开发 Android进阶

戴尔G系列游戏本助玩家激战英特尔大师挑战赛

E科讯

架构1期第三周作业一

道长

极客大学架构师训练营

第 0 次面试

escray

程序员 面试 面经

关于互联网留存和收益你知道多少—带你走近用户成长体系

滴滴普惠出行

实践分享丨物联网操作系统中的任务管理

华为云开发者联盟

华为 数据 物联网 进程

奈学开发者社区分享:Java - 设计模式的7个设计原则

奈学教育

Java 设计模式 设计原则

Electron 快速入门及最新安装教程

程序员学院

Java html 大前端 Electron node,js

一个草根的日常杂碎(9月27日)

刘新吾

随笔杂谈 生活记录 社会百态

奈学开发者社区分享:Java - 设计模式的7个设计原则

古月木易

Java 设计模式

数字货币是大势所趋,新冠疫情后必须率先发展DCEP

CECBC

数字货币 银行

区块链会替代大数据吗?

CECBC

区块链 大数据

一个草根的日常杂碎(9月28日)

刘新吾

随笔杂谈 生活记录 社会百态

牛皮!应届生面试阿里Java岗,七轮过后定级P6,薪资44.8W

面试 计算机基础 编程开发 架构师技能

查看mac电脑的温度信息, 并且给mac电脑降温

lmymirror

macos Mac terminal

for-range造就循环永动机?快来看看go中for-range的那些事!

Gopher指北

后端 for Go 语言

深入理解MySQL中事务隔离级别的实现原理

X先生

MySQL 数据库 后端 事务

PPT画成这样,述职答辩还能过吗?

小傅哥

Java 小傅哥 流程图 架构师 PPT

H5选图预览到上传最佳实践

阿里云金融线TAM SRE专家服务团队

android H5

初学源码之——银行案例手写IOC和AOP

Java架构师迁哥

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