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

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 Animation.reverse() của giao diện Animation đảo ngược hướng phát, nghĩa là hoạt ảnh kết thúc tại điểm bắt đầu của nó. Nếu được gọi trên một hoạt ảnh chưa từng phát, toàn bộ hoạt ảnh sẽ được phát ngược. Nếu được gọi trên một hoạt ảnh đang tạm dừng, hoạt ảnh sẽ tiếp tục theo chiều ngược lại.

Cú pháp

js
reverse()

Tham số

Không có.

Giá trị trả về

Không có (undefined).

Ví dụ

Trong ví dụ Growing/Shrinking Alice Game, việc nhấp hoặc chạm vào chai khiến hoạt ảnh phóng to của Alice (aliceChange) phát ngược lại, làm cô ấy nhỏ đi. Điều đó được thực hiện bằng cách đặt Animation.playbackRate của aliceChange thành -1 như sau:

js
const shrinkAlice = () => {
  // play Alice's animation in reverse
  aliceChange.playbackRate = -1;
  aliceChange.play();

  // play the bottle's animation
  drinking.play();
};

Nhưng điều đó cũng có thể được thực hiện bằng cách gọi reverse() trên aliceChange như sau:

js
const shrinkAlice = () => {
  // play Alice's animation in reverse
  aliceChange.reverse();

  // play the bottle's animation
  drinking.play();
};

Thông số kỹ thuật

Thông số kỹ thuật
Web Animations
# dom-animation-reverse

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

Xem thêm