Animation: phương thức play()
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 play() của giao diện Animation trong Web Animations API bắt đầu hoặc tiếp tục phát một hoạt ảnh. Nếu hoạt ảnh đã kết thúc, việc gọi play() sẽ khởi động lại hoạt ảnh và phát nó từ đầu.
Cú pháp
js
play()
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 chiếc bánh khiến hoạt ảnh phóng to của Alice (aliceChange) phát theo chiều thuận làm cô ấy to lên, đồng thời kích hoạt hoạt ảnh của chiếc bánh. Hai lệnh Animation.play(), một 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);
cake.addEventListener("touchstart", growAlice);
Thông số kỹ thuật
| Specification |
|---|
| Web Animations> # dom-animation-play> |
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.reverse()để phát hoạt ảnh ngược lại.Animation.finish()để kết thúc hoạt ảnh.Animation.cancel()để hủy hoạt ảnh.