7月QCon广州站2022,关注Web 3.0、数据架构选型、数字化转型等热门话题,点击了解 了解详情
写点什么

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

  • 2020 年 7 月 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 年 7 月 15 日 13:301797

评论

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

Linux:为什么性能工具需要 BPF 技术

博文视点Broadview

悟透前端 | ECMAScript 6的Map映射

devpoint

json 大前端 map ES6

图说丨京东《技术重构社会供应链——未来科技趋势白皮书》

京东科技开发者

京东 智能供应链

懂分析、会预测,你见过这样的华为云DAS吗?

华为云开发者联盟

人工智能 sql 数据管理系统 智能运维 华为云DAS

Elasticsearch document 的 _source 元数据

escray

elastic 七日更 28天写作 死磕Elasticsearch 60天通过Elastic认证考试

刷屏的微信8.0(文末附安卓下载链接) | 视频号 28 天 (15)

赵新龙

28天写作

如何理解新技术带来的新资产类别?

CECBC

区块链

联动链金-魔方支付体系整理

软件测试--cookie学习

测试人生路

软件测试

Soul 源码阅读 02|WebSocket建立连接的过程

哼干嘛

Soul 学习笔记---使用 nacos 实现数据同步上篇(七)

fightingting

Soul网关

一文带你搞懂从动态代理实现到Spring AOP

华为云开发者联盟

spring jdk 容器 aop 动态代理

2020年终总结:回顾、反思、期待

书旅

年终总结

在胡萝卜和大棒失效的当下,如何焕发员工的热情?

一笑

团队管理 管理 驱动力量 28天写作

HPC on Volcano:容器在气象行业HPC高性能计算场景的应用

华为云原生团队

大数据 容器 云原生 k8s 分布式计算

2021年数字货币时代加速到来

CECBC

数字人民币

基于用户画像/AB测试的产品定价

无誉

人类为啥要睡觉?

Justin

心理学 28天写作 睡眠

AWS CDK | IaC 何必只用 Yaml

郭旭东

AWS 基础设施即代码 IaC

连云港:“云底座”构建智慧教育的未来图景

浪潮云

数据库运维家中常备:上限约400MB/s,比COPY等工具还好用的数据利器

华为云开发者联盟

数据 GaussDB 数据迁移 gds FDW

MDF智能合约APP开发|MDF智能合约软件系统开发

系统开发

数字货币呼之欲出,但这些套路须警惕!

CECBC

数字货币

项目管理系列(7)-PMO有啥用

Ian哥

28天写作

接到需求,你要先做哪件事?

熊斌

学习 需求分析 28天写作

数字货币交易所系统开发|数字货币交易所软件APP开发

系统开发

深度解读设备的“万能语言”鸿蒙系统的分布式软总线能力

华为云开发者联盟

鸿蒙 操作系统 智能设备 HarmonyOS 分布式软总线

Nine Ring九环智能合约软件开发|Nine Ring九环智能合约APP系统开发

系统开发

点位盘,点位盘开发,点位盘合约交易。

v16629866266

谈谈敏捷开发中的文档

张老蔫

28天写作

【CSS】内圆角(box-shadow、outline)

德育处主任

html5 大前端 Web CSS小技巧 28天写作

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