Animation: thuộc tính playState

Giá trị

idle

Thời gian hiện tại của hoạt ảnh là unresolved và không có tác vụ đang chờ nào.

running

Hoạt ảnh đang chạy.

paused

Hoạt ảnh đã bị tạm dừng và thuộc tính Animation.currentTime không còn cập nhật.

finished

Hoạt ảnh đã chạm tới một trong các ranh giới của nó và thuộc tính Animation.currentTime không còn cập nhật.

Trước đây, Web Animations định nghĩa giá trị pending để biểu thị một thao tác bất đồng bộ nào đó như bắt đầu phát vẫn chưa hoàn tất. Điều này hiện được biểu thị bằng thuộc tính riêng Animation.pending.

Ví dụ

Trong ví dụ Growing/Shrinking Alice Game, người chơi có thể đạt tới một kết thúc với cảnh Alice khóc thành một vũng nước mắt. Trong trò chơi, vì lý do hiệu năng, nước mắt chỉ nên được tạo hoạt ảnh khi chúng hiển thị. Vì vậy chúng phải được tạm dừng ngay sau khi được tạo hoạt ảnh như sau:

// Setting up the tear animations

tears.forEach((el) => {
  el.animate(tearsFalling, {
    delay: getRandomMsRange(-1000, 1000), // randomized for each tear
    duration: getRandomMsRange(2000, 6000), // randomized for each tear
    iterations: Infinity,
    easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
  });
  el.pause();
});

// Play the tears falling when the ending needs to be shown.

tears.forEach((el) => {
  el.play();
});

// Reset the crying tears animations and pause them.

tears.forEach((el) => {
  el.pause();
  el.currentTime = 0;
});

Thông số kỹ thuật

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

Xem thêm

• Web Animations API
• Animation để biết các phương thức và thuộc tính khác bạn có thể dùng để điều khiển hoạt ảnh trên trang web.