Web Animations API cung cấp các dữ liệu nguyên gốc mạnh mẽ để mô tả các ả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 có sẵn dành cho bạn, bao gồm bản minh hoạ và lớp học lập trình của Google.
Thông tin khái quát
Về bản chất, API này cung cấp phương thức Element.animate().
Hãy xem một ví dụ sau đây tạo hiệu ứng động cho 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ả các trình duyệt hiện đại, với tính năng dự phòng polyfill tuyệt vời (sẽ nói thêm ở phần sau). Chúng tôi cung cấp rộng rãi tính năng hỗ trợ riêng cho phương thức này (và đối tượng trình phát của phương thức này) như một phần của Chrome 39. Trình chặn này cũng có sẵn trong Opera và đang trong quá trình phát triển đang hoạt động cho Firefox. Đây là một dữ liệu gốc mạnh mẽ đáng để đưa vào hộp 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 hỗ trợ API Web ảnh động. Đây là những hướng dẫn theo tiến độ riêng thể hiện 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ẽ dùng nội dung tĩnh và cải thiện nội dung đó bằng các hiệu ứng ảnh động.
Các lớp học lập trình này và các đường liên kết hoặc tài nguyên có liên quan là nơi phù hợp nhất để bắt đầu nếu bạn muốn tìm hiểu về các lớp cơ sở mới dành cho bạn trong Ảnh động trên web. Để có ý tưởng về những trò chơi bạn có thể sẽ tạo ra, hãy xem hiệu ứng tiết lộ lấy cảm hứng từ Android này-
Vì vậy, nếu bạn chỉ mới bắt đầu, thì bạn không cần tìm đâu xa!
Bản thu thử
Nếu bạn đang tìm cảm hứng, đừng quên xem Bản minh hoạ ảnh động trên web lấy cảm hứng từ Material, với nguồn được lưu trữ trên GitHub. Những ví dụ này minh hoạ nhiều hiệu ứng thú vị và bạn có thể xem mã nguồn của mỗi bản minh hoạ trong dòng.
Các bản minh hoạ bao gồm một thiên hà xoay tròn nhiều màu sắc, Trái đất đang quay hoặc thậm chí chỉ nhiều hiệu ứng một phần tử cũ đơn giản.
Ống polyfill
Để đảm bảo 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 thư viện polyfill. Web Animations API hiện có sẵn bằng polyfill. API này mang đến cho tất cả các trình duyệt hiện đại, bao gồm cả Internet Explorer, Firefox và Safari.
Nếu muốn phiêu lưu, bạn có thể sử dụng polyfill tiếp theo của ảnh động trên web. Đây cũng là công cụ chưa hoàn thiện – chẳng hạn như hàm khởi tạo GroupEffect và SequenceEffect có thể kết hợp.
Để so sánh giữa hai đoạn mã polyfill, vui lòng xem trang chủ.
Bạn có một số cách để sử dụng đoạn mã polyfill trong mã của mình.
Sử dụng CDN, chẳng hạn như cdnjs, jsDelivr hoặc nhắm mục tiêu một bản phát hành cụ thể thông qua rawgit.com
Cài đặt qua TLD 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 bao gồm đoạn mã polyfill trong thẻ tập lệnh trước bất kỳ đoạn 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 thêm phần giới thiệu kỹ thuật, vui lòng xem thông số W3C.
Dan Wilson cũng đã viết một nhóm bài đăng tuyệt vời về Ảnh động trên web, bao gồm cả cách sử dụng thuộc tính này cùng với thuộc tính CSS motion-path mới.
Để xem một số mẫu sử dụng motion-path, hãy tham khảo tài liệu của Eric Willigers.