AICon上海|与字节、阿里、腾讯等企业共同探索Agent 时代的落地应用 了解详情
写点什么

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

评论

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

python DataFrame的shift()方法,从三流Python外包到秒杀阿里P7,

程序媛可鸥

Python 程序员 面试

技术平台&应用开发专题月 | 赋能企业业务快速创新,实现云原生自由

用友BIP

用友 用友iuap

31岁的Python,蝉联年度编程语言排行榜冠军

JackTian

Python 编程 程序员 编程语言 后端

Python 初学者进阶的九大技能,Python校招面试指南

程序媛可鸥

Python 程序员 面试

iuap助力中国一汽数智化转型

用友BIP

用友 用友iuap

龙蜥社区新增100+家合作伙伴,堡塔、东方通、宝德等头部企业均已加入

OpenAnolis小助手

开源 适配 合作伙伴 龙蜥社区 龙头企业

产品手册怎么做?用什么软件?

小炮

Java培训基础高频面试题八股文分享

@零度

JAVA开发

大数据培训flink8 个高频面试实战题分享

@零度

大数据 flink

阿里通过度量把发版过程的不确定变成确定-构建闲鱼版本持续交付管道及度量

阿里云云效

云计算 阿里云 DevOps 云原生 度量

python 两种排序方法 sort() sorted(),高级Python工程师面试题

程序媛可鸥

Python 程序员 面试

Python-Matplotlib可视化(8),毕业工作5年被裁

程序媛可鸥

Python 程序员 面试

Python3十大经典错误及解决办法,这操作真香

程序媛可鸥

Python 程序员 面试

Python——Scipy库,熬夜整理华为最新Python笔试题

程序媛可鸥

Python 程序员 面试

TSP 平台场景中的 MQTT 主题设计|车联网平台搭建从入门到精通 03

EMQ映云科技

开源 物联网 IoT mqtt emq

python下载酷狗音乐上的歌曲,作为一个Python程序员你还不会JetPack

程序媛可鸥

Python 程序员 面试

JSON Schema 实现复杂结构表单数据展示

全象云低代码

前端 低代码 表单 JSON Schema

带你了解2022两会黑科技:阿里云视频云「AI编辑部3.0」

阿里云CloudImagine

云计算 阿里云 AI 音视频 视频云

动态卡片:富媒体内容井喷式增长下,新一代移动端动态研发的模式

蚂蚁集团移动开发平台 mPaaS

ios android 前端 mPaaS 卡片技术

JVM自定义类加载器在代码扩展性的实践

vivo互联网技术

JVM java 编程

云小课|如何实现数据跨链交互?

华为云开发者联盟

区块链 数据 跨链 数据跨链 可信跨链服务

电路模型和电路定律 (Ⅱ)

謓泽

3月月更

web前端培训React合成事件原理解析

@零度

React web前端开发

最好的 6 款 React 后台管理系统模板和框架

蒋川

React

Python 实现二叉树前序,中序,后序,三面美团Python岗

程序媛可鸥

Python 程序员 面试

Python 实现数据结构中的的栈,队列,Python面试自我介绍

程序媛可鸥

Python 程序员 面试

6张图为你分析Kafka Producer 消息缓存模型

华为云开发者联盟

kafka 消息 Kafka Producer 消息缓存模型 消息缓存

技术平台&应用开发专题月 | 应用多实例调试—开发者的福音

用友BIP

用友 用友iuap

Python 提取音乐频谱并可视化,字节面试官

程序媛可鸥

Python 程序员 面试

一个数据顾问的成长之路

用友BIP

用友 用友iuap

科技筑基、高效实战:中科柏诚信云链正当时

联营汇聚

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