- Anime.js là một thư viện JavaScript nhanh và đa năng, có thể tạo hoạt ảnh cho mọi thứ trên web
- V4 được viết lại toàn bộ cấu trúc, cải thiện hiệu năng đáng kể và tái thiết kế API theo hướng hiện đại hơn
- Đặc biệt, trải nghiệm lập trình viên được cải thiện nhờ hỗ trợ ES Module, tối ưu tree shaking và cải tiến việc kết hợp các hoạt ảnh phức tạp
Tóm tắt các thay đổi chính trong Anime.js V4
-
ES module hóa và thay đổi API
- Mọi tính năng giờ đều được cung cấp dưới dạng ES module (
anime() → animate())
- Thuận lợi cho tree shaking nên có thể chỉ import những tính năng cần dùng
- Cú pháp được đổi từ
anime({ targets }) → animate(targets, params)
-
Các thay đổi API chính
easeInOutQuad → 'inOutQuad' (bỏ tiền tố)- Đổi tên hàm callback:
begin() → onBegin()update() → onUpdate()complete() → onComplete()change() → onRender()- Các callback liên quan đến loop được hợp nhất thành một
onLoop()
.finished → .then() để thay đổi cách xử lý Promise- Cách biểu diễn giá trị đổi từ
{ value: 100 } → { to: 100 }
round: 100 → modifier: utils.round(2) để điều chỉnh số liệu linh hoạt hơn
-
Cải thiện cấu hình và kết hợp hoạt ảnh
- Giá trị easing mặc định được đổi thành
outQuad
- Khi trùng hoạt ảnh cùng thuộc tính trên cùng target, tween trước đó sẽ bị hủy theo mặc định (
composition: 'replace')
composition: 'none' → cách của V3 (cho phép lồng chồng)composition: 'add' → có thể áp dụng hoạt ảnh cộng dồn
-
Thay đổi liên quan đến cách phát
direction: 'reverse' hoặc 'alternate' → được tách thành reversed: true, alternate: true và có thể dùng đồng thờiloop: 1 → loop mặc định được đổi thành 0
-
Cải tiến hệ thống timeline
anime.timeline() → createTimeline()- Có thể dùng
loop, reversed trong hoạt ảnh con
- Có thể thiết lập tùy chọn chung cho các phần tử con bằng thuộc tính
defaults
- Bổ sung các tính năng điều khiển thời gian linh hoạt hơn như
set(), label, stagger()
- Các thuộc tính CSS transform được nối tiếp tự nhiên hơn giữa các hoạt ảnh con
-
Stagger và hoạt ảnh SVG
anime.stagger() → import trực tiếp stagger() để sử dụnganime.path() → dùng svg.createMotionPath()- Các thuộc tính SVG như
strokeDashoffset, points cũng được xử lý bằng svg.drawLine(), svg.morphTo()
-
Tách riêng các hàm tiện ích
anime.get() → utils.get()anime.set() → utils.set()anime.remove() → utils.remove()anime.round() → utils.round()
-
Thay đổi cấu hình engine
anime.suspendWhenDocumentHidden = false → engine.pauseWhenHidden = falseanime.speed = 0.5 → engine.playbackRate = 0.5
-
Cải thiện hiệu năng và cấu trúc
- Refactor toàn bộ mã nguồn giúp giảm mức sử dụng bộ nhớ và tăng hiệu năng
- Viết lại hệ thống tween giúp giảm lỗi khi có hoạt ảnh trùng lặp
- Hỗ trợ hoạt ảnh cộng dồn với
composition: 'add'
- Cải thiện tính liên kết tự nhiên khi cấu thành CSS Transform
Tính năng mới
- Hỗ trợ hoạt ảnh cho biến CSS: ví dụ
animate('#target', { '--radius': '20px' })
- Hỗ trợ hoạt ảnh from: có thể dùng dạng
{ from: 50, to: 100 }
- Hỗ trợ alpha trong màu hex: hỗ trợ định dạng như
#FF4433AA
- Bổ sung tính năng createTimer:
- Thay thế
setTimeout, setInterval
- Có thể dùng
onLoop, onUpdate, onComplete v.v.
- Có thể dùng cho game loop nhờ điều chỉnh
frameRate
- Hỗ trợ tốc độ khung hình biến thiên: có thể cấu hình riêng cho từng animation, timeline và timer
Đặc điểm của Anime.js
-
API trực quan
- Cung cấp API hoạt ảnh mạnh mẽ nhưng vẫn dễ sử dụng.
- Hỗ trợ tham số theo từng thuộc tính và hệ thống keyframe linh hoạt.
- Cung cấp sẵn easing tích hợp và các tính năng transform nâng cao.
-
Bộ công cụ SVG
- Các tiện ích SVG tích hợp giúp dễ dàng thực hiện biến đổi hình dạng, bám theo motion path và vẽ nét.
- Bao gồm morphing, line drawing và motion path.
-
Scroll Observer
- Cung cấp Scroll Observer API cho phép đồng bộ và kích hoạt hoạt ảnh theo thao tác cuộn.
- Hỗ trợ nhiều chế độ đồng bộ và ngưỡng nâng cao.
-
Stagger nâng cao
- Hàm tiện ích Stagger tích hợp giúp tạo hiệu ứng ấn tượng chỉ trong vài giây.
- Bao gồm stagger theo thời gian, stagger theo giá trị và stagger theo vị trí timeline.
-
Tính năng spring và drag
- Thông qua Draggable API, có thể kéo, snap, flick và ném các phần tử HTML.
- Cung cấp nhiều tùy chọn cấu hình, callback đầy đủ và các phương thức hữu ích.
-
Timeline API
- Timeline API mạnh mẽ giúp điều phối chuỗi hoạt ảnh và đồng bộ callback.
- Hỗ trợ đồng bộ hoạt ảnh, vị trí thời gian nâng cao và cài đặt phát.
-
Hoạt ảnh responsive
- Có thể dùng Scope API để dễ dàng tạo hoạt ảnh phản hồi theo media query.
- Bao gồm media query, phần tử gốc tùy chỉnh và các phương thức scope.
2 bình luận
Wow, quá đỉnh
Ý kiến trên Hacker News