Anime.js - Thư viện hoạt hình JavaScript nhẹ

Hoạt hình web đã đi một chặng đường dài. Các nhà phát triển không chỉ có thể tạo bất kỳ hoạt hình nào bằng cách sử dụng kết hợp CSS / SVG / JS, mà còn có hàng tá thư viện miễn phí để tiết kiệm thời gian trong quá trình.

Một trong những sở thích của tôi là Anime.js, một nguồn mở hoàn toàn miễn phí Thư viện hoạt hình JavaScript.

Thư viện này có thể làm tất cả. nó là được xây dựng trên JavaScript nhưng nó cũng phụ thuộc rất nhiều vào hoạt hình CSS. Bạn có thể nhắm mục tiêu các yếu tố trang cá nhân thông qua DOM hoặc thậm chí bạn có thể nhắm mục tiêu SVG tùy chỉnh.

Tất cả các tài liệu là tự lưu trữ trên GitHub, vì vậy bạn có thể cần phải cuộn để tìm chính xác những gì bạn đang tìm kiếm. Nhưng mỗi tính năng hoạt hình đi kèm với một vài thông số chẳng hạn như trì hoãn, thời gian và nới lỏng.

Lưu ý thư viện này không đến với nhiều kiểu hoạt hình mặc định. Anime.js là dành cho nhà phát triển ai muốn tùy chỉnh hoạt hình của họ không cần viết mã dài dòng.

Cho một ví dụ sống, kiểm tra bút Codepen dưới đây. Mã là cực kỳ đơn giản nhưng bạn có được một hình ảnh động đáng tin cậy với bí & căng thêm dự đoán, cả hai nguyên tắc cơ bản của hoạt hình.

Một cảnh báo công bằng: thư viện Anime.js là dày đặc. Không khó để tạo ra một hình ảnh động tùy chỉnh nhưng bạn cần phải hiểu một số điều cơ bản như nới lỏng và cú pháp JavaScript phổ biến cho các cuộc gọi lại và các tùy chọn.

Nhưng tất cả thông tin bạn cần là trên trang repo, kể cả rất nhiều mẫu mã và bảng tài liệu chi tiết. Và bạn có thể duyệt qua các báo cáo lỗi mở hoặc kiểm tra hỗ trợ trình duyệt hiện bao gồm tất cả các trình duyệt chính và IE 10+.

Đây dễ dàng là một trong những thư viện hoạt hình tốt nhất cho các nhà phát triển web và nó nên là giải pháp tiếp theo của bạn cho bất kỳ hoạt hình web phức tạp.

Để xem một loạt các ví dụ sống, hãy xem bộ sưu tập các bản demo Anime.js được lưu trữ trên CodePen. Dưới đây, tôi nhúng yêu thích của tôi mà hoạt hình toàn bộ logo từ đầu, với sự hoạt bát thực sự.