现代的前端,在页面上做动画,已经是家常便饭。浏览器的渲染性能也越来越好,并且还逐渐提供了一系列的 Web Animations API。此 API 让开发者可以使用 js 来创建动画,相比之前使用 css 做动画会方便很多,同时相比以前传统的用 js 做的动画会更加高效,并且相信未来此 API 的能力会越来越大。
Web Animations 可查看 w3c 的规范文档。在 caniuse 上,可查看浏览器的支持情况,如下:
可看到,目前主流浏览器均已支持此 API 的基本功能。下面我们就来学习一下此 API 的基本用法。
创建动画
创建动画,使用 animate()
方法。语法如下:
var animation = element.animate(keyframes, options);
该方法接收两个参数。
第一个参数是 keyframes,keyframes 可以是一个 keyframe 对象组成的数组,也可以是一个 css 属性组成的对象ÿ