Element.animate()

 

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

Element 接口的animate() 方法是一个创建新Animation的便捷方法,将它应用于元素,然后运行动画。它将返回一个新建的 Animation 对象实例

一个元素上可以应用多个动画效果。你可以通过调用此函数获得这些动画效果的一个列表: Element.getAnimations() (en-US).

语法

var animation = element.animate(keyframes, options); 

参数

keyframes 关键帧

一个对象,代表关键帧的一个集合

options 可选项
代表动画持续时间的整形数字 (以毫秒为单位), 或者一个包含一个或多个时间属性的对象:
id 可选
在 animate()里可作为唯一标识的属性: 一个用来引用动画的字符串( DOMString )
{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}

未来的可选项

下面的可选项目前并非在所有地方都可用,但未来将会被加进来

composite 可选 合成
决定动画彼此之间的值如何结合起来, 单独的动画不指定自己的特定复合操作。 默认为 replace.
  • add 表示追加影响,每一次连续的迭代建立在前一个的基础上。 比如transform, translateX(-200px) 将不会覆盖 rotate(20deg) 的值,最终结果是 translateX(-200px) rotate(20deg)
  • accumulate 效果类似但是更智能一些: blur(2) 和blur(5) 的结果为blur(7), 而不是 blur(2) blur(5)
  • replace 新的值将会覆盖掉旧的
iterationComposite 可选 迭代合成 
决定动画迭代之间的值如何结合起来, 可以被设置为 accumulate 或者 replace (同上)。默认值为 replace.
spacing 可选
决定在动画持续时间内如何分配没有时间偏移的关键帧. 默认值为distribute.
  • distribute 分配的关键帧位置,使连续关键帧之间的距离相等。也就是说,没有任何偏移时,将会使关键帧均匀分到整个运行时间内
  • paced 分配的关键帧位置,使连续关键帧之间的距离让某个步增的属性值的增长速度相同,也就是说,属性值差异越大,关键帧之间的距离越远

 

返回值

返回 Animation.

示例

在示例 Down the Rabbit Hole (with the Web Animation API) 中, 我们用 animate() 来快速创建并运行使 #tunnel 元素无限循环缓慢升起的动画。注意关键帧的对象数组和时间可选项

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // timing options
  duration: 1000,
  iterations: Infinity
});

规范

规范 状态 注释
Web Animations
animate()
Working Draft Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 36 未实现 48.0 (48.0) 未实现 23 ?
id option 50.0 未实现 48.0 (48.0) 未实现 37 ?
composite, iterationComposite, and spacing options 未实现 未实现 未实现 未实现 未实现 未实现
Feature Android Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support ? 39.0 39.0 48.0 (48.0) ? ? ? ?
id option 未实现 50.0 50.0 48.0 (48.0) ? ? ? ?
composite, iterationComposite, and spacing options 未实现 未实现 未实现 未实现 未实现 未实现 未实现 未实现

更多