So sánh các tùy chọn cho Hoạt ảnh trên Web

Hoạt hình là một chủ đề hấp dẫn. Cho dù bạn muốn thêm hoạt ảnh tương tác như chuyển tiếp hay xây dựng trải nghiệm toàn màn hình, bạn đều có tất cả các công cụ cần thiết

Hoạt hình là một chủ đề hấp dẫn. Cho dù bạn muốn thêm các hoạt ảnh tương tác như chuyển tiếp hay xây dựng trải nghiệm toàn màn hình, bạn đều có tất cả các công cụ cần thiết.

Và bạn có khá nhiều sự lựa chọn, tất cả đều hoàn toàn khác nhau và phục vụ các mục đích khác nhau.

CSSthường được biết đến là có hiệu suất cao hơn, mặc dù JavaScript cũng có thể rất hiệu quả. Tất cả phụ thuộc vào những gì bạn cần làm và mất bao nhiêu thời gian để kết xuất mỗi khung hình.

Chúng ta hãy xem tổng quan về các tùy chọn này, để tìm ra một trong những lựa chọn phù hợp.

Chuyển đổi CSS

Chuyển đổi CSScó bắt đầu và kết thúc. Chúng di chuyển một điểm từ X đến Y hoặc từ hiển thị sang vô hình.

Đây là hoạt ảnh đơn giản nhất và chủ yếu được sử dụng cho các hoạt ảnh tinh tế tích hợp tốt với phần còn lại của trang.

Với quá trình chuyển đổi, bạn đi từ trạng thái này sang trạng thái khác, nhưng bạn không thể có nhiều hơn nữa.

Hoạt ảnh CSS

Hoạt ảnh CSSso với chuyển tiếp CSS cho phép bạn có nhiều hơn chỉ 2 trạng thái, trên thực tế, bạn có thể có rất nhiều trạng thái và chúng có thể được sử dụng để tạo các hoạt ảnh phức tạp hơn.

Hoạt ảnh CSS được khuyến nghị khi bạn cần các hoạt ảnh tương đối đơn giản mà không thể thực hiện với các hiệu ứng chuyển tiếp.

SVG Animations

SVGlà một định dạng dựa trên vectơ tuyệt vời cho phép tạo hoạt ảnh bằng SMIL, định dạng hoạt ảnh SVG “gốc”.

SMIL sắp không được dùng nữa trong Chrome, nhưng nhóm đã đảo ngược quyết định này trong thời điểm hiện tại do sự phản kháng, mặc dù SMIL có sự mâu thuẫn giữa các trình duyệt (và IE / Edge không hỗ trợ nó).

Họ muốn đẩy CSS Animations và API Web Animations thay vì SMIL.

Hoạt ảnh API Canvas

CácAPI canvascung cấp một cách để vẽ trên màn hình, sử dụng raster thay vì vectơ.

Hoạt ảnh có thể được thực hiện mặc dù không phải là hiệu suất

API hoạt ảnh trên web

API hoạt ảnh web là tương lai của hoạt ảnh trên Web. Nó nhằm mục đích mang lại hiệu suất của hoạt ảnh CSS với khả năng sử dụng JavaScript để tạo các hoạt ảnh dài hơn một cách dễ dàng.

Nó hiện chỉ hoạt động trong Chrome và Firefox. Safari, IE và Edge vẫn đang xem xét nó, nhưngmột polyfill tồn tạiđể làm cho nó hoạt động trên tất cả các trình duyệt.

WebGL

WebGL cho phép bạn tạo hoạt ảnh 3D và nó phù hợp hơn với trải nghiệm hoạt ảnh toàn màn hình và VR nhập vai, mặc dù phức tạp hơn.


Ngoài các API gốc, có những thư viện tuyệt vời tóm tắt hầu hết các chi tiết cho bạn: