Anime JS – Thư viện JavaScript hiệu ứng chuyển động mã nguồn mở
Anime JS là một thư viện JavaScript mã nguồn mở giúp tạo các hiệu ứng chuyển động mượt mà cho các thành phần HTML, SVG, CSS, và JavaScript object. Thư viện này được sử dụng rộng rãi trong thiết kế web hiện đại để tạo trải nghiệm người dùng sinh động và hấp dẫn.
Tính năng chính của Anime JS
1. Hỗ trợ đa dạng đối tượng
- HTML/CSS: Animate các thuộc tính như
opacity,transform,width,height, v.v. - SVG: Animate đường path, stroke, fill, v.v.
- DOM attributes: Hỗ trợ animate các thuộc tính HTML như
value,d,x,y,… - JavaScript object: Animate bất kỳ giá trị số nào trong JS object.
2. Timeline và đồng bộ hóa
- Tạo timeline animation để dễ dàng phối hợp nhiều hiệu ứng theo chuỗi hoặc song song.
3. Keyframes
- Hỗ trợ keyframe giống như CSS, cho phép tạo chuỗi chuyển động phức tạp.
4. Easing function
- Cung cấp hàng chục hiệu ứng easing (
easeInOutQuad,easeOutExpo,spring,…) để chuyển động tự nhiên hơn.
5. Điều khiển playback
- Có thể điều khiển animation với các phương thức như
.play(),.pause(),.restart(),.reverse(),.seek(),…
6. Callbacks và Promise
- Hỗ trợ callback (
begin,update,complete) và Promise để xử lý logic khi animation kết thúc.
7. Hiệu suất cao
- Nhẹ (chỉ ~14KB gzip), hoạt động tốt trên cả trình duyệt hiện đại và thiết bị di động.
Truy cập ngay trang chủ Anime https://animejs.com