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
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:
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:
const shrinkAlice = () => {
// play Alice's animation in reverse
aliceChange.reverse();
// play the bottle's animation
drinking.play();
};
Thông số kỹ thuật
| Specification |
|---|
| Web Animations> # dom-animation-reverse> |
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.Animation.pause()để tạm dừng hoạt ảnh.Animation.play()để đưa hoạt ảnh tiến về phía trước.