Animation:play() 方法
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
Web 动画 API 的 Animation
接口的 play()
方法可开始或恢复动画的播放。如果动画结束,调用 play()
则会重新开始动画,从头开始播放。
语法
js
play()
参数
无。
返回值
无(undefined
)。
示例
在 Alice 的成长游戏示例中,单击或轻触蛋糕会导致 Alice 长大的动画(aliceChange
)向前播放,从而使她的体型变大并触发蛋糕的动画。包含两个 Animation.play()
和一个 EventListener
:
js
// 蛋糕有它自己的动画:
const nommingCake = document
.getElementById("eat-me_sprite")
.animate(
[{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
{
fill: "forwards",
easing: "steps(4, end)",
duration: aliceChange.effect.timing.duration / 2,
},
);
// 暂停蛋糕的动画,以避免动画立即播放。
nommingCake.pause();
// 该函数会在用户点击或轻触时触发
const growAlice = () => {
// 播放 Alice 的动画。
aliceChange.play();
// 播放蛋糕的动画。
nommingCake.play();
};
// 当用户保持鼠标按下或轻触的状态时,调用 growAlice 来播放所有动画。
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);
规范
Specification |
---|
Web Animations # dom-animation-play |
浏览器兼容性
BCD tables only load in the browser
参见
- Web 动画 API
Animation
包含你可用于控制网页动画的其他方法和属性。Animation.pause()
用于暂停动画。Animation.reverse()
用于反向播放动画。Animation.finish()
用于立即结束动画。Animation.cancel()
用于取消动画。