Animation
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.
Giao diện Animation của Web Animations API biểu diễn một bộ phát hoạt ảnh đơn lẻ và cung cấp các điều khiển phát cũng như một timeline cho một nút hoặc nguồn hoạt ảnh.
Bộ khởi tạo
Animation()-
Tạo một thể hiện đối tượng
Animationmới.
Thuộc tính thể hiện
Animation.currentTime-
Giá trị thời gian hiện tại của hoạt ảnh, tính bằng mili giây, dù đang chạy hay đang tạm dừng. Nếu hoạt ảnh không có
timeline, đang không hoạt động, hoặc chưa từng được phát, giá trị của nó lànull. Animation.effect-
Lấy và đặt
AnimationEffectđược liên kết với hoạt ảnh này. Thông thường đây sẽ là một đối tượngKeyframeEffect. Animation.finishedRead only-
Trả về Promise đã hoàn tất hiện tại của hoạt ảnh này.
Animation.id-
Lấy và đặt chuỗi
Stringdùng để định danh hoạt ảnh. Animation.overallProgressRead only-
Trả về một số từ
0đến1biểu thị mức độ tiến triển tổng thể của hoạt ảnh hướng tới trạng thái hoàn tất. Animation.pendingRead only-
Cho biết hoạt ảnh hiện đang chờ một thao tác không đồng bộ như bắt đầu phát hoặc tạm dừng một hoạt ảnh đang chạy hay không.
Animation.playStateRead only-
Trả về một giá trị liệt kê mô tả trạng thái phát lại của hoạt ảnh.
Animation.playbackRate-
Lấy hoặc đặt tốc độ phát của hoạt ảnh.
Animation.readyRead only-
Trả về Promise sẵn sàng hiện tại của hoạt ảnh này.
Animation.replaceStateRead only-
Cho biết hoạt ảnh đang hoạt động, đã bị tự động gỡ bỏ sau khi được thay thế bởi hoạt ảnh khác, hay đã được lưu cố định rõ ràng bằng cách gọi
Animation.persist(). Animation.startTime-
Lấy hoặc đặt thời điểm đã lên lịch để việc phát lại của hoạt ảnh bắt đầu.
Animation.timeline-
Lấy hoặc đặt
timelineđược liên kết với hoạt ảnh này.
Phương thức thể hiện
Animation.cancel()-
Xóa toàn bộ
keyframeEffectsdo hoạt ảnh này tạo ra và hủy quá trình phát của nó. Animation.commitStyles()-
Ghi trạng thái kiểu hiện tại của hoạt ảnh vào thuộc tính
stylecủa phần tử đang được hoạt ảnh hóa, ngay cả sau khi hoạt ảnh đó đã bị gỡ bỏ. Việc này sẽ khiến trạng thái kiểu hiện tại được ghi vào phần tử dưới dạng các thuộc tính bên trong thuộc tínhstyle. Animation.finish()-
Di chuyển tới một trong hai đầu của hoạt ảnh, tùy thuộc vào việc hoạt ảnh đang phát hay đang phát ngược.
Animation.pause()-
Tạm ngừng việc phát hoạt ảnh.
Animation.persist()-
Lưu cố định hoạt ảnh một cách rõ ràng, ngăn nó bị tự động gỡ bỏ khi một hoạt ảnh khác thay thế nó.
Animation.play()-
Bắt đầu hoặc tiếp tục phát hoạt ảnh, hoặc bắt đầu lại hoạt ảnh nếu trước đó nó đã hoàn tất.
Animation.reverse()-
Đảo ngược hướng phát lại, dừng ở đầu hoạt ảnh. Nếu hoạt ảnh đã hoàn tất hoặc chưa từng được phát, nó sẽ phát từ cuối về đầu.
Animation.updatePlaybackRate()-
Đặt tốc độ của hoạt ảnh sau khi đồng bộ hóa vị trí phát của nó trước.
Sự kiện
cancel-
Được kích hoạt khi phương thức
Animation.cancel()được gọi hoặc khi hoạt ảnh chuyển sang trạng thái phát"idle"từ một trạng thái khác. finish-
Được kích hoạt khi hoạt ảnh phát xong.
remove-
Được kích hoạt khi trình duyệt tự động gỡ bỏ hoạt ảnh.
Các lưu ý về khả năng truy cập
Hoạt ảnh nhấp nháy và chớp sáng có thể gây vấn đề cho những người có các mối quan ngại về nhận thức như Rối loạn tăng động giảm chú ý (ADHD). Ngoài ra, một số kiểu chuyển động có thể là tác nhân khởi phát cho rối loạn tiền đình, động kinh và đau nửa đầu, cũng như chứng nhạy cảm scotopic.
Hãy cân nhắc cung cấp một cơ chế để tạm dừng hoặc vô hiệu hóa hoạt ảnh, đồng thời dùng truy vấn phương tiện Reduced Motion (hoặc user agent client hint tương đương Sec-CH-Prefers-Reduced-Motion) để tạo trải nghiệm phù hợp hơn cho người dùng đã thể hiện mong muốn không dùng các trải nghiệm có chuyển động.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Web Animations # the-animation-interface |