Anime.js: Thư Viện Animation JavaScript Nhẹ

Anime.js Là Gì?

Anime.js là một engine animation JavaScript do Julian Garnier viết, được xây để hoạt ảnh hoá bốn loại mục tiêu khác nhau chỉ từ một API: thuộc tính CSS, SVG, thuộc tính DOM, và đối tượng JavaScript. Các topic trên GitHub gắn nó với animation, canvas, css, và svg, cùng nhãn javascript-library của riêng repo. Bản V4 phát hành dưới dạng ES module, kèm lộ trình migrate được tài liệu hoá cho code còn viết theo API của V3.

Các Tính Năng Animation Cốt Lõi

• ✓Một hàm animate() duy nhất xử lý thuộc tính CSS, SVG, thuộc tính DOM, và đối tượng JavaScript thuần, thay vì mỗi mục tiêu một API riêng.
• ✓stagger() tính độ trễ cho từng phần tử với các tùy chọn hướng, như ví dụ from: 'center' trong README, toả độ trễ ra từ phần tử ở giữa.
• ✓Easing có tên, như 'inOutQuint' trong ví dụ của chính README, thay vì phải tự viết mảng cubic-bezier.
• ✓Cờ loop và alternate đảo chiều và lặp lại animation, cả hai được dùng cùng nhau trong ví dụ xoay hình vuông của README.
• ✓Đối tượng from-value, như rotate: { from: -180 }, cho phép một lệnh gọi thuộc tính tự định nghĩa điểm bắt đầu thay vì cần một state khởi tạo riêng.
• ✓Script build của V4 đóng gói output ESM, UMD, CJS, và IIFE, đồng thời sinh khai báo kiểu TypeScript trong types/.

Cài Đặt Và Thiết Lập

README được cung cấp ở đây không có lệnh npm install dành cho người dùng, nên hãy xem bước này là chưa được tài liệu hoá rõ ràng. Điều được thể hiện: ví dụ sử dụng V4 import animate và stagger từ 'animejs' theo ES module, đây chính là tên package trên npm trong thực tế. Tài liệu đầy đủ của V4, gồm cả phần thiết lập, được liên kết từ README tới animejs.com/documentation. Ngoài ra, README liệt kê các script để phát triển chính Anime.js sau khi chạy npm i — dev, dev:test, build, test:browser, test:node, và open:examples — nhưng đó là để build mã nguồn của thư viện, không phải để thêm nó vào dự án của bạn.

Cách Dùng Animation Cơ Bản

Bề mặt cốt lõi của Anime.js V4 là một hàm duy nhất, animate(), được gọi với một selector và các thuộc tính cần hoạt hoá. Ví dụ trong README import animate và stagger từ 'animejs', rồi nhắm vào .square: đưa x tới 320, xoay from -180 độ, chạy trong duration 1250, làm trễ từng phần tử 65 toả ra from: 'center', dùng easing 'inOutQuint', và loop với alternate: true để chuyển động đảo chiều mỗi lượt. ```javascript import { animate, stagger, } from 'animejs'; animate('.square', { x: 320, rotate: { from: -180 }, duration: 1250, delay: stagger(65, { from: 'center' }), ease: 'inOutQuint', loop: true, alternate: true }); ```

Lựa Chọn Thay Thế Anime.js

Câu Hỏi Thường Gặp

Vấn đề Anime.js giải quyết

Animation gốc trên trình duyệt bị chia ra nhiều hệ thống riêng: CSS transition và keyframe cho phần hiển thị, SVG DOM cho đồ hoạ vector, và JavaScript viết tay cho bất cứ thứ gì không phải thuộc tính CSS, như một con số điều khiển vòng lặp render trên canvas. README của Anime.js đóng khung thư viện quanh việc gộp các hệ thống đó vào một lệnh gọi animate() duy nhất, để một transform CSS, một thuộc tính SVG, và một thuộc tính đối tượng JS thuần đều chạy qua cùng logic timing, easing, và stagger, thay vì ba đường code khác nhau.

Trường hợp sử dụng tốt nhất

• •Hoạt hoá các transform giao diện tương tác — di chuyển, xoay, hoặc scale phần tử DOM khi người dùng tương tác, giống ví dụ x/rotate trong README.
• •Làm so le hiệu ứng xuất hiện hoặc biến mất cho một nhóm phần tử, dùng các tùy chọn hướng của stagger() như from: 'center'.
• •Hoạt hoá phần tử SVG trực tiếp, vì SVG là một trong bốn mục tiêu animation mà README liệt kê cùng CSS, thuộc tính DOM, và đối tượng JS.
• •Điều khiển hình ảnh trên canvas bằng cách hoạt hoá các trường số của một đối tượng JavaScript thuần mỗi frame rồi đọc chúng trong render loop của riêng bạn — canvas nằm trong chính các topic GitHub của repo, cạnh css và svg.
• •Đóng góp cho chính Anime.js bằng các script npm run dev, build, test:browser, và test:node đã được tài liệu hoá.

Ai nên dùng — và ai nên bỏ qua

Hãy thử Anime.js nếu bạn đang xây giao diện tương tác hoặc hình ảnh SVG/canvas và muốn một hàm duy nhất hoạt hoá CSS, SVG, thuộc tính DOM, và đối tượng JS thay vì ba hệ thống riêng biệt. Nó phù hợp với nhà phát triển sẵn sàng đọc tài liệu ở một trang ngoài, vì tài liệu tham khảo sâu nhất nằm trên animejs.com chứ không phải trong repo. Bỏ qua nếu bạn còn kẹt ở V3 mà chưa có thời gian migrate, hoặc nếu CSS transition thuần đã đủ cho mọi thứ bạn cần hoạt hoá.

Repo liên quan