Web Animations API cung cấp các thành phần cơ bản mạnh mẽ để mô tả ảnh động bắt buộc từ JavaScript – nhưng điều đó có nghĩa là gì? Tìm hiểu về các tài nguyên dành cho bạn, bao gồm cả bản minh hoạ và lớp học lập trình của Google.
Thông tin khái quát
Về cơ bản, API này cung cấp phương thức Element.animate().
Hãy xem một ví dụ minh hoạ ảnh động màu nền từ đỏ sang xanh lục:
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Phương thức này được hỗ trợ trong tất cả trình duyệt hiện đại, với một giải pháp dự phòng polyfill tuyệt vời (sẽ nói thêm về vấn đề này sau). Tính năng hỗ trợ gốc cho phương thức này (và đối tượng trình phát của phương thức) đã được cung cấp rộng rãi trong Chrome 39. Tính năng này cũng có sẵn trong Opera và đang trong quá trình phát triển cho Firefox. Đây là một nguyên tắc cơ bản mạnh mẽ và xứng đáng có mặt trong bộ công cụ của bạn.
Lớp học lập trình
Ngày càng có nhiều lớp học lập trình dành cho Web Animations API. Đây là những hướng dẫn tự học minh hoạ các khái niệm khác nhau trong API. Trong hầu hết các lớp học lập trình này, bạn sẽ lấy nội dung tĩnh và cải thiện nội dung đó bằng hiệu ứng ảnh động.
Các lớp học lập trình này, cùng với các đường liên kết hoặc tài nguyên có liên quan, là nơi tốt nhất để bắt đầu nếu bạn muốn tìm hiểu về các thành phần cơ bản mới có sẵn trong Web Animations. Để biết ý tưởng về những gì bạn có thể tạo, hãy xem hiệu ứng hiển thị lấy cảm hứng từ Android này:
Vì vậy, nếu bạn chỉ mới bắt đầu, thì không cần tìm đâu xa!
Bản minh hoạ
Nếu bạn đang tìm kiếm nguồn cảm hứng, hãy nhớ xem Bản minh hoạ về ảnh động trên web lấy cảm hứng từ Material, với nguồn được lưu trữ trên GitHub. Các hiệu ứng này minh hoạ nhiều hiệu ứng tuyệt vời và bạn có thể xem mã nguồn của từng bản minh hoạ ngay trong dòng.
Các bản minh hoạ bao gồm một thiên hà xoay tròn đầy màu sắc, Trái Đất xoay hoặc thậm chí chỉ là nhiều hiệu ứng trên một phần tử cũ đơn giản.
Polyfill
Để đảm bảo nhận được sự hỗ trợ tốt trên tất cả các trình duyệt hiện đại, bạn có thể sử dụng một thư viện polyfill. Web Animations API hiện có một polyfill giúp API này hoạt động trên mọi trình duyệt hiện đại, bao gồm cả Internet Explorer, Firefox và Safari.
Nếu muốn thử nghiệm, bạn có thể sử dụng polyfill web-animations-next. Polyfill này cũng bao gồm các tính năng chưa hoàn thiện, chẳng hạn như các hàm khởi tạo GroupEffect và SequenceEffect có thể kết hợp.
Để so sánh giữa hai polyfill này, hãy xem trang chủ.
Để sử dụng một trong hai polyfill này trong mã, bạn có một số lựa chọn.
Sử dụng CDN, chẳng hạn như cdnjs, jsDelivr hoặc nhắm đến một bản phát hành cụ thể thông qua rawgit.com
Cài đặt bằng NPM hoặc Bower
$ npm install web-animations-js $ bower install web-animations-js ```
Trong mọi trường hợp, bạn chỉ cần thêm polyfill vào thẻ tập lệnh trước bất kỳ mã nào khác –
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
Tài nguyên khác
Nếu bạn muốn đọc phần giới thiệu mang tính kỹ thuật hơn, hãy xem quy cách W3C.
Dan Wilson cũng đã viết một bộ bài đăng tuyệt vời về Ảnh động trên web, bao gồm cả cách sử dụng ảnh động này cùng với thuộc tính motion-path CSS mới.
Để xem một số mẫu sử dụng motion-path, hãy xem tài liệu của Eric Willigers.