动画：play() 方法

基线 广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本上都能正常工作。它自以下时间以来在浏览器中可用 2020 年 3 月.

play() 方法是 Web 动画 API 的 Animation 接口，用于启动或恢复动画的播放。如果动画已完成，则调用 play() 将重新启动动画，从头开始播放。

语法

js
play()

参数

无。

返回值

无 (undefined).

示例

在 Alice 游戏的生长/缩小 示例中，点击或轻触蛋糕会导致 Alice 的生长动画 (aliceChange) 正向播放，使其变大，并触发蛋糕的动画。两个 Animation.play()，一个 EventListener

js
// The cake has its own animation:
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,
    },
  );

// Pause the cake's animation so it doesn't play immediately.
nommingCake.pause();

// This function will play when ever a user clicks or taps
const growAlice = () => {
  // Play Alice's animation.
  aliceChange.play();

  // Play the cake's animation.
  nommingCake.play();
};

// When a user holds their mouse down or taps, call growAlice to make all the animations play.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);

规范

规范
Web 动画
# dom-animation-play

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅