Element.animate()
Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
Element
接口的animate()
方法是一个创建新Animation
的便捷方法,将它应用于元素,然后运行动画。它将返回一个新建的 Animation
对象实例
一个元素上可以应用多个动画效果。你可以通过调用此函数获得这些动画效果的一个列表: Element.getAnimations()
(en-US).
语法
var animation = element.animate(keyframes, options);
参数
keyframes 关键帧
-
一个对象,代表关键帧的一个集合
options 可选项
- 代表动画持续时间的整形数字 (以毫秒为单位), 或者一个包含一个或多个时间属性的对象:
-
id 可选
- 在
animate()里可作为唯一标识的属性
: 一个用来引用动画的字符串(DOMString
)
未来的可选项
下面的可选项目前并非在所有地方都可用,但未来将会被加进来
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 |
浏览器兼容性
BCD tables only load in the browser