Animation: phương thức pause()

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.

Phương thức pause() của giao diện Animation trong Web Animations API tạm ngừng việc phát của hoạt ảnh.

Cú pháp

js
pause()

Tham số

Không có.

Giá trị trả về

Không có.

Ngoại lệ

InvalidStateError DOMException

Được ném ra nếu currentTime của hoạt ảnh là unresolved (có thể là vì nó chưa bắt đầu phát), và thời điểm kết thúc của hoạt ảnh là dương vô cùng.

Ví dụ

Animation.pause() được dùng nhiều lần trong trò chơi Alice in Web Animations API Land Growing/Shrinking Alice Game, chủ yếu vì các hoạt ảnh được tạo bằng phương thức Element.animate() sẽ bắt đầu phát ngay lập tức và phải được tạm dừng thủ công nếu bạn muốn tránh điều đó:

js
// animation of the cupcake slowly getting eaten up
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,
    },
  );

// doesn't actually need to be eaten until a click event, so pause it initially:
nommingCake.pause();

Ngoài ra, khi đặt lại:

js
// An all-purpose function to pause the animations on Alice, the cupcake, and the bottle that reads "drink me."
const stopPlayingAlice = () => {
  aliceChange.pause();
  nommingCake.pause();
  drinking.pause();
};

// When the user releases the cupcake or the bottle, pause the animations.
cake.addEventListener("mouseup", stopPlayingAlice);
bottle.addEventListener("mouseup", stopPlayingAlice);

Thông số kỹ thuật

Specification
Web Animations
# dom-animation-pause

Tương thích trình duyệt

Xem thêm