Tài nguyên ảnh động trên web

[Tên người]

API Ảnh động trên web cung cấp các dữ liệu gốc mạnh mẽ để mô tả hoạt ảnh 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 cả cá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ề bản chất, API này cung cấp phương thức Element.animate(). Hãy xem một ví dụ, giúp tạo ảnh độ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ẽ trình bày thêm về điều này sau). 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 đã trở nên phổ biến 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 tích cực cho Firefox. Đây là một dữ liệu nguyên gốc mạnh mẽ xứng đáng có 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 về API Ảnh động trên web. Đây là hướng dẫn theo tiến độ riêng 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 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 các dữ liệu nguyên gốc mới có sẵn trong Ảnh động trên web. Để biết ý tưởng về những gì bạn có thể xây dựng, hãy xem hiệu ứng khám phá lấy cảm hứng từ Android này-

Xem trước kết quả của lớp học lập trình

Vì vậy, nếu bạn chỉ mới bắt đầu, thì không cần phải làm gì thêm!

Bản thu thử

Nếu bạn đang tìm nguồn 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 lưu trữ trên GitHub. Những đoạn mã này thể hiện nhiều hiệu ứng ấn tượng và bạn có thể xem cùng dòng mã nguồn của từng bản minh hoạ.

Các bản minh hoạ bao gồm thiên hà quay tròn đầy màu sắc, trái đất xoay hay thậm chí là nhiều hiệu ứng trên một phần tử cũ thuần tuý.

Vải polyfill

Để đảm bảo khả năng 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. API Ảnh động trên web hiện có một polyfill ngay bây giờ, nhằm đưa API này vào tất cả các trình duyệt hiện đại, bao gồm Internet Explorer, Firefox và Safari.

Nếu muốn thích phiêu lưu, bạn có thể sử dụng hình ảnh polyfill tiếp theo dưới dạng ảnh động trên web. Các tính năng này cũng bao gồm các tính năng 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 loại polyfill, vui lòng xem trang chủ.

Bạn có một số tuỳ chọn để sử dụng polyfill trong mã.

  1. 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

  2. Cài đặt qua MAP hoặc Bower

     $ npm install web-animations-js
 $ bower install web-animations-js
 ```

Trong mọi trường hợp, bạn có thể chỉ cần đưa 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 thêm về kỹ thuật, vui lòng xem thông số kỹ thuật 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 nó 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.