Animation: sự kiện finish
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.
Sự kiện finish của Animation được kích hoạt khi hoạt ảnh phát xong, hoặc khi hoạt ảnh hoàn tất một cách tự nhiên, hoặc khi phương thức Animation.finish() được gọi để làm cho hoạt ảnh kết thúc ngay lập tức.
Note:
Trạng thái phát "paused" có ưu tiên cao hơn trạng thái "finished"; nếu hoạt ảnh vừa tạm dừng vừa hoàn tất, trạng thái "paused" là trạng thái sẽ được báo cáo. Bạn có thể ép hoạt ảnh vào trạng thái "finished" bằng cách đặt startTime của nó thành document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate).
Cú pháp
Dùng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt thuộc tính trình xử lý sự kiện.
addEventListener("finish", (event) => { })
onfinish = (event) => { }
Kiểu sự kiện
Một AnimationPlaybackEvent. Kế thừa từ Event.
Thuộc tính sự kiện
Ngoài các thuộc tính được liệt kê bên dưới, các thuộc tính từ giao diện cha Event cũng có sẵn.
AnimationPlaybackEvent.currentTimeRead only-
Thời gian hiện tại của hoạt ảnh đã tạo ra sự kiện.
AnimationPlaybackEvent.timelineTimeRead only-
Giá trị thời gian của timeline của hoạt ảnh đã tạo ra sự kiện.
Ví dụ
Animation.onfinish được dùng nhiều lần trong game Growing/Shrinking Alice Game trong Alice in Web Animations API Land. Đây là một ví dụ khi chúng ta thêm lại pointer events vào một phần tử sau khi hoạt ảnh độ mờ của nó làm nó hiện ra:
// Thêm một hoạt ảnh vào phần credit kết thúc của trò chơi
const endingUI = document.getElementById("ending-ui");
const bringUI = endingUI.animate(keysFade, timingFade);
// Tạm dừng hoạt ảnh đó
bringUI.pause();
// Hàm này xóa pointer events khỏi phần credit.
hide(endingUI);
// Khi phần credit được làm hiện lại sau đó,
// chúng ta thêm lại pointer events khi chúng hoàn tất
bringUI.onfinish = (event) => {
endingUI.style.pointerEvents = "auto";
};
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Web Animations # dom-animation-onfinish |
| Web Animations # finish-event |