【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

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

评论

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

Java开发中常用的消息队列工具 ActiveMQ

编程江湖

Activemq Java 开发

云原生数据库TDSQL-C关键技术内核解密

腾讯云数据库

tdsql 国产数据库

开源应用中心|程序员的崩溃瞬间,太形象了!

Java php 开源 插件

使用 Litho 改进 News Feed 上的 Android 视频表现

CatTalk

android facebook 性能优化 Feed流 Litho

行云管家Proxy特点及其部署要求详细解析

行云管家

数据库 IT运维 行云管家 跳板机

百度:YOLOX和NanoDet都没我优秀!轻量型实时目标检测模型PP-PicoDet开源

百度开发者中心

目标检测 开源技术

博文推荐|深入解析 Apache Pulsar 中的事务

Apache Pulsar

大数据 架构 分布式 云原生 Apache Pulsar

处理可能超时的异步操作

编程江湖

大前端

Google I/O 2021 移动和 Web应用上的设备端机器学习

CatTalk

机器学习 tensorflow android Google

大数据开发之Hive

@零度

大数据 hive

“异地多活”设计辣么难?其实是你想多了!

阿里技术

一些常用的hive sql函数

编程江湖

大数据 hive Hive SQL

很好用的压测工具 - Apache Bench工具

恒生LIGHT云社区

测试 AB AB testing实战

Python代码阅读(第65篇):根据条件应用指定函数

Felix

Python 编程 Code 阅读代码 Python初学者

技术探究:Apache Pulsar 的事务型事件流

Apache Pulsar

Java 架构 分布式 云原生 Apache Pulsar

数据分析从零开始实战,Pandas读取HTML页面+数据处理解析

老表

Python 数据分析 数据处理 11月日更

从社区贡献者到加入核心团队,开源给他带来了这些变化

TDengine

tdengine 时序数据库

Linux一学就会之文件的基本管理和XFS文件系统备份恢复

学神来啦

Linux 运维 文件系统 linux云计算 linux基础

PackML从会到不会——模式(2)

陈的错题集

标准化 PackML

面向容器的资源调度技术对比

阿里技术

TDSQL | 国产化浪潮下,数据库+云如何跑上核心业务?

腾讯云数据库

tdsql 国产数据库

聊聊 ab 和 jmeter 的并发模型

恒生LIGHT云社区

测试 AB

喜报!Nocalhost 成功加入 CNCF 沙箱

CODING DevOps

Kubernetes DevOps cncf Nocalhost 本地化开发

混合云管理策略是什么?如何又快又好的管理混合云?

行云管家

云计算 混合云 云管理

为云而生,云原生数据库TDSQL-C技术突破与演进

腾讯云数据库

tdsql 国产数据库

NDPQ(NDP+PQ),定义分布式数据库新方向

华为云开发者联盟

数据库 查询 GaussDB(for MySQL) 近数据处理 NDP

安全经典JWT算法漏洞

网络安全学海

网络安全 信息安全 渗透测试 WEB安全 安全漏洞

云边协同产业方阵成立,中国信通院与 EMQ 共建边缘计算技术规范

EMQ映云科技

物联网 IoT 边缘计算 边云协同

TDSQL演进与突破:把企业级分布式数据库做到极致

腾讯云数据库

tdsql 国产数据库

Java SPI 机制从原理到实战

江璇Up

Java spi JavaSPI

阿里研究员华先胜:图像搜索的前世今生

阿里技术

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