Thêm hoạt ảnh vào ứng dụng web là một trong những cách tiếp cận tốt nhất để cải thiện giao diện của ứng dụng.
Hoạt ảnh là các đối tượng chuyển động mà các nhà thiết kế/phát triển web sử dụng để thu hút sự chú ý của người dùng và hướng họ thực hiện một số hành động nhất định.
Viết mã để thêm hoạt ảnh có thể tốn rất nhiều công sức. May mắn thay, bạn có thể tận dụng thư viện hoạt hình.
Thư viện hoạt ảnh là tập hợp các tệp hoạt ảnh được tạo sẵn mà nhà thiết kế có thể thêm vào trang web của họ.
Tại sao nên sử dụng thư viện hoạt hình?
- Tiết kiệm thời gian: Thư viện hoạt ảnh sẽ cung cấp khung, giúp bạn có nhiều thời gian hơn để tập trung vào chức năng của ứng dụng.
- Khả năng tùy chỉnh: Thư viện hoạt ảnh thường cung cấp mã mẫu mà bạn có thể tùy chỉnh cho phù hợp với nhu cầu của mình.
- Thật dễ dàng để có được một thiết kế nhất quán: nếu bạn có hình động trên các trang web khác nhau, bạn có thể sử dụng một thư viện để đảm bảo việc trộn màu và phông chữ được nhất quán.
- Cung cấp nhiều hiệu ứng: Một số thư viện hoạt ảnh có nhiều hoạt ảnh để bạn lựa chọn.
Tôi đã xem xét một số thư viện hoạt ảnh JavaScript tốt nhất mà bạn có thể sử dụng như sau;
anime.js
Anime.js là một thư viện JavaScript nhẹ với API mạnh mẽ. Bạn có thể sử dụng thư viện này với các đối tượng JavaScript, thuộc tính DOM, thuộc tính SVG và CSS.
Cài đặt
npm cài đặt animejs – lưu
Sử dụng
nhập anime từ “animejs/lib/anime.es.js”;
Các tính năng chính:
- Dễ sử dụng: Tôi thấy Anime.js dễ sử dụng, ngay cả đối với những người có kiến thức hạn chế về JavaScript vì nó được ghi chép đầy đủ.
- Có thể mở rộng: bạn có thể điều chỉnh các khối mã từ thư viện này theo nhu cầu của mình. Bạn cũng có thể tạo các chức năng gọi lại, tiến trình và giảm nhẹ.
- Tính linh hoạt: Anime.js không chỉ là một thư viện hoạt ảnh JavaScript; bạn có thể sử dụng nó với các thuộc tính SVG và CSS.
- Hỗ trợ nhiều trình duyệt: Hoạt ảnh Anime.js hoạt động trên các trình duyệt, chẳng hạn như Chrome, Safari, IE/Edge, Firefox và Opera.
Anime.js là một thư viện mã nguồn mở và miễn phí.
Của tôi
Mo.js là một thư viện đồ họa chuyển động bằng JavaScript. Thư viện cung cấp toàn quyền kiểm soát hoạt ảnh thông qua API khai báo.
Cài đặt
cài đặt npm @mojs/core
Hoặc
sợi thêm @mojs/core
Sử dụng;
nhập mojs từ “@mojs/core”;
Các tính năng chính:
- Tính mô đun: Các thành phần trong thư viện này được chia thành các khối mã nhỏ có thể tái sử dụng. Trong khi thử nghiệm thư viện này, tôi có thể thêm hoặc xóa các thành phần khác nhau mà không cần viết lại toàn bộ mã.
- Đơn giản: Thiết kế API khai báo giúp bạn dễ dàng sử dụng thư viện này và tùy chỉnh các thành phần của nó.
- Phản hồi nhanh: Mo.js đã sẵn sàng cho retina, giúp nó phản hồi nhanh với các kích thước màn hình khác nhau.
- Mạnh mẽ: Thư viện này đã được thử nghiệm rộng rãi để đảm bảo nó hoạt động như mong đợi.
Mo.js là một thư viện mã nguồn mở và miễn phí.
popmotion
Popmotion là một thư viện hoạt hình đơn giản để tạo giao diện người dùng tuyệt đẹp. Tôi thấy thật dễ dàng khi sử dụng thư viện này với JavaScript nguyên bản cũng như hầu hết các thư viện và khung công tác JavaScript.
Cài đặt
npm cài đặt popmotion
Sử dụng
nhập {animate} từ “popmotion”
Các tính năng chính:
- Mạnh mẽ: mặc dù chức năng hoạt hình chỉ mất 4,5 KB, hỗ trợ hoạt ảnh lò xo, quán tính và khung hình chính cho màu sắc, số và chuỗi phức tạp.
- Hỗ trợ TypeScript: Popmotion được viết bằng TypeScript, JavaScript siêu ký tự. Bằng cách này, bạn có thể sử dụng các loại nếu bạn đang sử dụng TypeScript trong dự án của mình.
- Có thể tùy chỉnh: Các thành phần trong thư viện này có thể được tùy chỉnh để phù hợp với nhu cầu hoạt hình của bạn.
- Ổn định: Tất cả các thành phần Popmotion đã được kiểm tra kỹ lưỡng.
Sử dụng Popmotion là miễn phí.
rạp hát.js
Theater.js là một thư viện có bộ công cụ thiết kế chuyển động chuyên nghiệp. Với nó, bạn có thể thiết kế các cảnh phim và tương tác giao diện người dùng tuyệt đẹp.
Để sử dụng Theater.js với HTML và JavaScript đơn giản, bạn có thể thêm liên kết CDN của nó vào phần đầu của tài liệu HTML.
Các tính năng chính:
- Hoạt động với một số khung và thư viện JavaScript: Bạn có thể sử dụng Theater.js với React Three Fiber và THREE.js.
- Có thể tùy chỉnh: Thư viện này có trình chỉnh sửa trình tự hiện đại giúp bạn chặn các chuỗi trong vài giây. Bạn cũng có thể tinh chỉnh từng khung hình trong ứng dụng của mình bằng trình chỉnh sửa biểu đồ.
- Có thể mở rộng: Theater.js có nhiều tiện ích mở rộng khác nhau để nâng cao khả năng sử dụng của nó. Bạn có thể sử dụng các công cụ của mình hoặc thêm tiện ích mở rộng vào thư viện này.
Theater.js là một thư viện mã nguồn mở.
ScrollReveal.js là một thư viện JavaScript cho phép bạn tạo hiệu ứng cho các mục khi chúng cuộn vào khung nhìn.
Cài đặt;
npm cài đặt cuộn tiết lộ
Sử dụng;
const ScrollReveal = require(‘scrollreveal’)
Các tính năng chính:
- Dễ sử dụng: Thêm lớp Scrollreveal vào các thành phần bạn muốn tạo hiệu ứng động và bạn có thể bắt đầu sử dụng thư viện này.
- Có thể mở rộng: Bạn có thể thêm các phần tử mới hoặc xóa chúng khỏi các thành phần bạn lấy từ thư viện này.
- Tính linh hoạt: Bạn có thể đặt ScrollReveal.js để hiển thị các mục khi được di chuột, nhấp hoặc cuộn. Thư viện cũng cho phép bạn kiểm soát việc nới lỏng, hướng và tốc độ mộc mạc.
ScrollReveal.js là thư viện trả phí với các gói bắt đầu từ $30.
GreenSock GSAP
GreenSock GSAP là một thư viện JavaScript để tạo hoạt ảnh cho các thành phần SVG, UI, React hoặc Three.js. Thư viện chứa mọi thứ bạn cần để tạo hoạt ảnh nhanh và hấp dẫn.
Các tính năng chính:
- Khả năng tương thích cao: GSAP có thể được sử dụng với các thư viện và framework Canvas, CSS, HTML, SVG và JavaScript như Angular, React, Vue và jQuery.
- Khả năng mở rộng: Kiến trúc mô-đun của GSAP cho phép các thành phần được điều chỉnh phù hợp với nhu cầu hoạt hình của bạn.
- Tính linh hoạt: GSAP không có danh sách xác định trước các phần tử có thể tạo hoạt ảnh. Bạn có thể tạo hiệu ứng động cho bất kỳ thuộc tính số nào của một đối tượng.
- Mạnh mẽ: Với GSAP, bạn có thể tạo hoạt ảnh cho mảng, bezier, thuộc tính CSS, màu sắc, v.v. Thư viện này cũng cho phép bạn xây dựng trình tự, lặp lại, yoyo và xác định lệnh gọi lại.
GreenSock Animation Platform (GSAP) có gói miễn phí, gói trả phí bắt đầu từ £88.
ProgressBar.js
ProgressBar.js là một thư viện hoạt ảnh để tạo các thanh tiến trình đáp ứng và phong cách cho web.
Cài đặt
Sử dụng vọng lâu
tiến trình cài đặt bower bar.js
Sử dụng npm
tiến trình cài đặt npm bar.js
Các tính năng chính:
- Nhiều hình dạng tích hợp khác nhau: ProgressBar.js có ba hình dạng tích hợp sẵn: Hình bán nguyệt, Hình tròn và Đường thẳng. Bạn cũng có thể tạo hình dạng tùy chỉnh bằng thư viện này.
- Responsive: Thanh tiến trình từ thư viện này hoạt động hoàn hảo trên các màn hình có kích thước khác nhau.
- Có thể tùy chỉnh: Bạn có thể tùy chỉnh màu sắc thành phần, kích thước phông chữ và kiểu dáng.
ProgressBar.js là một thư viện mã nguồn mở.
AnisJS
AniJS là một thư viện tương tác giao diện người dùng cung cấp một cách nhanh chóng và dễ dàng để tạo và tạo nguyên mẫu giao diện người dùng. Thư viện này làm 9,0 kb sau khi đóng gói.
Cài đặt;
gazebo cài đặt anijs – lưu
Sử dụng;
Các tính năng chính:
- Sử dụng đơn giản: Để sử dụng thư viện này, hãy thêm lớp AnisJS vào thành phần bạn muốn tạo hiệu ứng động.
- Có thể mở rộng: Bạn có thể điều chỉnh các thành phần từ AnisJS theo nhu cầu của mình.
- Tính linh hoạt: Bạn có thể sử dụng AnisJS với các đối tượng JavaScript, thuộc tính SVG, thuộc tính CSS và thành phần DOM.
- Tương thích với các trình duyệt chính: Bạn có thể sử dụng AnisJS từ Chrome, Firefox, Safari và Edge.
AnisJS là một thư viện mã nguồn mở miễn phí sử dụng.
ba.js
Three.js là một thư viện 3D có mục đích chung. Thư viện sử dụng trình kết xuất WebGL nhưng cũng hỗ trợ trình kết xuất SVG và CSS3D dưới dạng tiện ích bổ sung.
Cài đặt;
cài đặt npm – lưu ba
Sử dụng;
nhập * dưới dạng BA của “ba”;
Các tính năng chính:
- Dễ sử dụng: Three.js có API được ghi chép đầy đủ, giúp dễ dàng thiết lập và sử dụng.
- Mạnh mẽ: Bạn có thể tạo các cảnh 3D phức tạp với thư viện này. Three.js cũng hỗ trợ nhiều tính năng khác nhau như hoạt ảnh, vật liệu và ánh sáng.
- Tính linh hoạt: bạn có thể tạo nhiều hoạt ảnh 3D khác nhau, từ trò chơi, hình ảnh trực quan đến mô phỏng.
- Tương thích với nhiều khung và thư viện khác nhau: Bạn có thể sử dụng thư viện Three.js với React Three Fiber, Egret, Aframe, PlayCanvas và Babylon.js.
Three.js là một thư viện JavaScript mã nguồn mở.
Vivus.js
vivus.js là một thư viện JavaScript nhẹ để tạo hoạt ảnh cho các tệp SVG. Khi bạn tạo hoạt ảnh cho các tệp SVG bằng thư viện này, chúng trông như thể được vẽ.
Cài đặt;
npm cài đặt vivus
Hoặc
gazebo cài đặt vivus
Các tính năng chính:
- Các loại hoạt ảnh khác nhau: Vivus.js cho phép bạn tạo các hoạt ảnh bị trì hoãn, từng cái một và được đồng bộ hóa. Trì hoãn là loại hoạt ảnh mặc định trong thư viện này.
- Cho phép tập lệnh tùy chỉnh: Thay vì sử dụng các loại hoạt ảnh được cung cấp trong thư viện này, bạn có thể tạo tập lệnh tùy chỉnh để tạo hiệu ứng cho các tệp SVG.
- Không phụ thuộc: Bạn có thể sử dụng thư viện này trong hầu hết các dự án web vì nó không phụ thuộc.
Vivus.js là một thư viện miễn phí.
nghiêng.js
Tilt.js là một thư viện JavaScript nhỏ cho phép các nhà phát triển tạo hiệu ứng nghiêng 3D trong DOM. Bạn có thể sử dụng Tilt.js với JavaScript cơ bản hoặc các thư viện và framework như React, Preact, Angular và Polymer.
Cài đặt;
cài đặt npm – lưu tệp nghiêng.js
Hoặc
sợi thêm nghiêng.js
Sử dụng;
Thêm tập lệnh này ngay trước thẻ đóng
