Web Animations API
Web Animations API cho phép đồng bộ hóa và định thời các thay đổi đối với cách trình bày của một trang web, tức là hoạt ảnh của các phần tử DOM. Nó thực hiện điều đó bằng cách kết hợp hai mô hình: Timing Model và Animation Model.
Khái niệm và cách dùng
Web Animations API cung cấp một ngôn ngữ chung để trình duyệt và nhà phát triển mô tả các hoạt ảnh trên phần tử DOM. Để biết thêm về các khái niệm nền tảng và cách sử dụng API này, hãy đọc Using the Web Animations API.
Các giao diện của Web Animations
Animation-
Cung cấp các điều khiển phát lại và một timeline cho một nút hoặc nguồn hoạt ảnh. Có thể nhận một đối tượng được tạo bằng hàm tạo
KeyframeEffect(). KeyframeEffect-
Mô tả các tập hợp thuộc tính và giá trị có thể làm hoạt ảnh, được gọi là keyframes, cùng các tùy chọn định thời của chúng. Sau đó chúng có thể được phát bằng hàm tạo
Animation(). AnimationTimeline-
Đại diện cho timeline của hoạt ảnh. Giao diện này tồn tại để định nghĩa các tính năng timeline và không được nhà phát triển truy cập trực tiếp.
AnimationEvent-
Thuộc mô-đun CSS Animations, ghi nhận tên hoạt ảnh và thời gian đã trôi qua.
DocumentTimeline-
Đại diện cho các timeline hoạt ảnh, bao gồm timeline tài liệu mặc định (được truy cập bằng thuộc tính
Document.timeline).
Mở rộng cho các giao diện khác
Web Animations API bổ sung tính năng cho document và element.
Mở rộng cho giao diện Document
document.timeline-
Đối tượng
DocumentTimelineđại diện cho timeline tài liệu mặc định. document.getAnimations()-
Trả về một mảng các đối tượng
Animationhiện đang có hiệu lực trên các phần tử trongdocument.
Mở rộng cho giao diện Element
Element.animate()-
Một phương thức viết tắt để tạo và phát một hoạt ảnh trên một phần tử. Nó trả về một thể hiện đối tượng
Animationđược tạo. Element.getAnimations()-
Trả về một mảng các đối tượng
Animationhiện đang ảnh hưởng đến một phần tử hoặc được lên lịch để làm như vậy trong tương lai.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Web Animations> |
Xem thêm
- Thuộc tính viết tắt CSS
animation - Thuộc tính CSS
animation-timeline - Using the Web Animations API
- Using CSS animations
- Mô-đun CSS animations
- Mô-đun CSS scroll-driven animations