写点什么

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

评论

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

景区共享电动车投放:助力打造智慧景区

共享电单车厂家

共享电单车投放 校园共享电单车 景区共享电动车 共享电动车合作 共享电单车厂家

完美!啃透P9大佬这份完整版的《并发编程宝典》,成为Offer收割机

Java 并发编程 高并发

万众瞩目的Nautilus Chain即将上线主网,生态正式起航

鳄鱼视界

Wallys/Qualcomm network chip/ipq9574/ipq9554/wireless connectivity solutions.

Cindy-wallys

ipq9554 ipq9574

史上最全MySQL各种锁详解

Java你猿哥

MySQL 乐观锁 悲观锁 事务/行级锁

烂怂if-else代码优化方案 | 京东云技术团队

京东科技开发者

Java 代码优化 if-else 企业号 5 月 PK 榜

软件测试 | 应用程序签名机制实现的源代码分析

测吧(北京)科技有限公司

测试

被性能优化撂倒无数次后的顿悟!465页调优笔记助力大厂面试之旅

Java 性能优化 性能调优

你了解LED显示屏的安装方式吗?

Dylan

安装 LED LED显示屏

ClickHouse进阶|如何自研一款企业级高性能网关组件?

字节跳动数据平台

数据库 字节跳动 Clickhouse 企业网关

C端用户体验度量实战篇-京东快递小程序体验度量全面升级 | 京东云技术团队

京东科技开发者

用户体验 用户体验设计 企业号 5 月 PK 榜 京东小程序

已膜拜,GitHub大佬的微服务资源库太强了,每份学习手册都优质详细

Java Kubernetes 微服务 Spring Cloud Spring Boot

【云计算】云存储是什么意思?与本地存储有什么区别?

行云管家

云计算 云存储 云管理 云支出

软件测试 | JMeter函数和变量

测吧(北京)科技有限公司

测试

软件测试/测试开发丨Web自动化 option 常用操作headless无头浏览器

测试人

程序员 软件测试 自动化测试 测试开发

图解Redis和Zookeeper分布式锁 | 京东云技术团队

京东科技开发者

redis zookeeper 分布式锁 zookeeper分布式锁 企业号 5 月 PK 榜

巅峰对谈:迈向 AGI 时代,除了优秀的大模型,还需要什么?丨Fabarta&蓝驰创投

Fabarta

人工智能 图数据库 AI大模型 AGI 图智能

基于数据驱动 U-Net 模型的大气污染物扩散快速预测,提升计算速度近6000倍

飞桨PaddlePaddle

人工智能 深度学习 百度飞桨

软件测试中的维恩图详解

测吧(北京)科技有限公司

测试

【堡垒机】云堡垒机可以安装在外部数据库上吗?

行云管家

数据库 IT运维 云堡垒机 运维安全

直播预告 | 博睿学院:算法平台底座-数据湖应用

博睿数据

数据湖 可观测性 智能运维 博睿数据 博睿学院

基于AIGC的京东购物助手的技术方案设想 | 京东云技术团队

京东科技开发者

人工智能 智能客服 AIGC 企业号 5 月 PK 榜

MoE 系列(五)|Envoy Go 扩展之内存安全

SOFAStack

golang 开发者 后端 网关 C++

共探Serverless架构的资源平衡管理,腾讯云2023年第二期TechoDay活动圆满落幕

科技热闻

软件测试 | 软件开发的几个阶段

测吧(北京)科技有限公司

测试

软件测试 | 测试贯穿整个项目流程

测吧(北京)科技有限公司

测试

软件测试 |JMeter怎样引用函数和变量

测吧(北京)科技有限公司

测试

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