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

参见