React Motion: hoạt ảnh lò xo cho React
/react-motion
React Motion vẫn làm tốt đúng một việc: điều khiển chuyển động UI bằng vật lý lò xo — stiffness và damping — thay vì duration cố định, và ý tưởng đó chưa lỗi thời. API thì cũ: children function kiểu render-prop, ví dụ vẫn dùng createReactClass, pattern mà nhiều codebase đã bỏ từ lâu. Dự án đã dùng children-as-function thì lắp vào rất gọn; viết React theo hướng hooks thì thấy như mượn idiom thời khác.
React Motion là gì?
React Motion là một thư viện animation JavaScript cho React, thay duration và easing curve cố định bằng vật lý lò xo. Bạn bọc giá trị cần animate — như x hay opacity — trong helper spring(), thiết lập stiffness và damping, rồi thư viện tự tính nội suy theo từng frame. Nó export bốn phần: Motion, StaggeredMotion, TransitionMotion và helper spring, cùng object presets như wobbly và gentle cho các cảm giác chuyển động thường dùng.
Tính năng chính
- ✓Helper spring() — bọc một số đích trong config stiffness/damping (mặc định 170/26) để Motion nội suy tới đó thay vì chạy tween với duration cố định.
- ✓Component Motion — nhận một style object gồm số hoặc config spring(), một defaultStyle cho giá trị khởi đầu, và một children function nhận giá trị đã nội suy ở mỗi frame.
- ✓StaggeredMotion — animate một mảng item độ dài cố định mà giá trị phụ thuộc lẫn nhau, đích của lò xo này là giá trị đang nội suy của lò xo trước, tạo hiệu ứng staggered nối tiếp mà không cần tự tính delay cho từng item.
- ✓TransitionMotion — xử lý mount/unmount: willEnter đặt giá trị khởi đầu cho key mới, willLeave cho phép key bị xoá tự animate ra ngoài trước khi TransitionMotion thật sự bỏ nó khỏi render.
- ✓Object presets có sẵn (như wobbly, gentle) cho các cặp stiffness/damping, đỡ phải tự chỉnh tay bằng demo Spring Parameters Chooser.
- ✓Đi kèm file định nghĩa Flow type có chú thích đầy đủ, và DefinitelyTyped có riêng bộ định nghĩa TypeScript cho react-motion.
Animate với helper spring()
Pattern cốt lõi là `<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>{value => ...}</Motion>` — defaultStyle đặt số khởi đầu, spring(10) trong style đặt đích, và children function nhận giá trị đã nội suy ở mỗi frame để bạn gán vào một prop DOM thật. spring() nhận thêm một config cho stiffness (mặc định 170) và damping (mặc định 26); tăng stiffness để chuyển động nhanh gọn hơn, giảm damping để nảy nhiều hơn, và dùng precision (mặc định 0.01) để kiểm soát độ làm tròn giá trị trước khi Motion coi animation là đã dừng. Thay vì tự dò stiffness và damping, README trỏ tới demo Spring Parameters Chooser, và có sẵn các cặp qua presets, nên `spring(10, presets.wobbly)` hay `spring(20, {...presets.gentle, precision: 0.1})` đều dùng được ngay. Một quy tắc cần nhớ: các key trong style phải giữ nguyên suốt vòng đời component, và defaultStyle chỉ được đọc ở lần render đầu tiên — sau đó giá trị sẽ nội suy từ vị trí hiện tại tới bất cứ gì style chỉ định tiếp theo.
Có thể xây gì với React Motion
- •Animate sắp xếp lại danh sách và hiệu ứng vào/ra staggered, đúng pattern trong demo TodoMVC list transition.
- •Phần tử UI kéo được (draggable) mà vẫn animate tự nhiên sau khi thả tay, như trong demo draggable-balls và draggable-list.
- •Transition khi mount/unmount — một card hay notification tự animate biến mất trước khi bị gỡ khỏi DOM, qua willLeave của TransitionMotion.
- •Giao diện dạng chat xếp chồng, nơi avatar hay bubble cần bật vào đúng vị trí tương đối với nhau, demo chat-heads.
- •Animate UI trên React Native — README ghi rõ thư viện hoạt động với React Native từ bản 0.18+.
Cài đặt và thiết lập React Motion
Cách chuẩn là qua npm: `npm install --save react-motion`. Bower cũng được hỗ trợ nhưng không theo cách thông thường — README nói rõ chạy `bower install react-motion` trực tiếp sẽ không hoạt động; bạn phải trỏ Bower tới file zip đóng gói sẵn (`bower install --save https://unpkg.com/react-motion/bower.zip`) hoặc khai báo URL đó trong bower.json. Ngoài ra còn có script tag lấy từ unpkg, expose ra một global `ReactMotion`, tiện để test mà không cần build step. Muốn chạy demo có sẵn ở local: clone repo, `npm install`, rồi chọn `npm start` để có hot reload (chậm hơn, dùng khi phát triển) hoặc `npm run build-demos` để build bản production mà bạn mở như file HTML tĩnh — README nhắc rõ nên dùng bản production khi đánh giá hiệu năng animation.
Điểm mạnh
- ✓Bề mặt API nhỏ, dễ học: bốn export (Motion, StaggeredMotion, TransitionMotion, spring) bao trọn animate một giá trị, animate chained/staggered, và transition mount/unmount.
- ✓Vật lý lò xo thật sự đơn giản hoá animation bị ngắt — bạn chỉ đặt lại đích cho lò xo thay vì tự viết logic 'nếu bị trigger lại giữa chừng thì sao.'
- ✓Bộ ba willEnter/willLeave/didLeave của TransitionMotion cho quyền kiểm soát chi tiết thời điểm vào/ra mà không cần thêm một thư viện transition-group riêng.
- ✓Có sẵn cả file định nghĩa Flow chú thích đầy đủ lẫn type TypeScript trên DefinitelyTyped, nên dùng có type-check không cần tự viết declaration.
- ✓README ghi thẳng FAQ và các điểm dễ vấp — string ref, thiếu onRest ở hai trong ba component — nên các góc khuất được nói rõ thay vì để người dùng tự phát hiện.
Giới hạn và tình trạng bảo trì
- △Không có onRest ở đây — README nói thẳng như vậy. StaggeredMotion và TransitionMotion đều bỏ qua onRest vì, theo lời tác giả, họ chưa tìm ra semantics phù hợp, nên bạn không thể gắn callback cho 'staggered đã xong' hay 'transition đã xong' như vẫn làm được với Motion thường.
- △String ref không hoạt động bên trong children function của Motion; README trỏ bạn sang pattern callback ref thay thế, thêm một thứ phải nhớ trên mọi component có animate.
- △Đường cài qua Bower khá thủ công — `bower install react-motion` trực tiếp bị nói rõ là hỏng, bạn phải trỏ tới URL file zip đóng gói riêng.
- △Code demo và setup vẫn dùng createReactClass thay vì hooks hay ES6 class, cho thấy docs và ví dụ có từ trước khi các idiom React hiện tại phổ biến.
- △Tài liệu có ở đây không kèm changelog, số version, hay lịch sử commit gần đây, nên không có cách nào xác nhận độc lập mức độ được bảo trì hiện tại.
Lựa chọn thay thế cho React Motion
Câu hỏi thường gặp
React Motion không có setting duration — nó chủ động thay duration cố định bằng vật lý lò xo. Thay vì đặt thời gian, bạn cấu hình spring(value, {stiffness, damping}), độ dài animation là kết quả tự nhiên của hai con số đó. README lập luận rằng duration cố định sẽ bị vỡ khi animation bị ngắt giữa chừng, điều mà vật lý lò xo xử lý tự nhiên.
React Motion hoạt động với React Native từ bản 0.18+ trở lên, theo README của thư viện. Các thành phần cốt lõi vẫn áp dụng như nhau — Motion, StaggeredMotion, TransitionMotion và helper spring() — vì bạn chỉ đang animate các số thuần rồi gán vào style prop của React Native thay vì CSS trên DOM.
TransitionMotion animate việc unmount qua prop willLeave. Khi một item biến mất khỏi mảng styles, TransitionMotion vẫn giữ render nó và gọi willLeave, hàm này trả về một Style (như {height: spring(0)}) mô tả cách item đó animate ra ngoài; chỉ khi giá trị chạm đích, TransitionMotion mới thật sự bỏ nó khỏi dữ liệu mà children function nhận được.
StaggeredMotion nối một mảng lò xo có độ dài cố định sao cho đích của mỗi item là giá trị đang nội suy của item trước, tạo hiệu ứng staggered nối tiếp tự nhiên trong một component. Tự chain animation bằng tay nghĩa là bạn tự điều phối nhiều instance Motion và timer riêng lẻ, cách mà README mô tả là làm được nhưng 'trông kém tự nhiên hơn' so với những gì StaggeredMotion tạo ra sẵn.
String ref không hoạt động bên trong children function của Motion vì cách React tự resolve ref, không phải lỗi riêng của React Motion — README nói rõ điều này và dẫn tới pattern callback ref của React như cách khắc phục. Hãy dùng callback ref, như ref={el => this.el = el}, thay vì string ref trên bất kỳ element nào được render từ trong children.
Tài liệu có sẵn ở đây không có changelog, lịch sử version, hay ngày commit gần đây của React Motion, nên mức độ hoạt động không phải điều có thể khẳng định chắc chắn. Điều có thể kiểm chứng là ví dụ trong tài liệu vẫn dùng createReactClass và API children-as-function, những pattern có từ trước React Hooks — dấu hiệu cho thấy thiết kế thư viện đã ổn định hơn là đang tiếp tục thay đổi tích cực.
Vấn đề mà nó giải quyết
Tự viết animation cho React thường có nghĩa là chọn trước một duration và một easing curve, rồi phải xử lý riêng trường hợp animation bị ngắt giữa chừng — một thao tác kéo đổi hướng giữa lúc đang transition, hay một item trong danh sách bị xoá trong khi vẫn đang animate vào. Cách React Motion giải quyết là bỏ hẳn duration và easing, mô tả chuyển động bằng một lò xo với stiffness và damping, nên việc bị ngắt chỉ đơn giản là lò xo được đặt lại đích, thay vì một state machine bạn phải tự viết.
Nên dùng React Motion khi nào — và khi nào nên bỏ qua
Thử React Motion nếu bạn đang maintain một codebase React cũ vốn đã dùng pattern children-as-function hoặc render-prop, và muốn có chuyển động dựa trên lò xo mà không thêm một dependency animation thứ hai — API đủ nhỏ để đọc hết README trong một buổi. Bỏ qua nếu bạn bắt đầu dự án mới theo hướng hooks và function component; bạn sẽ phải vật lộn với việc bọc mọi thứ trong một children function chỉ để có easing dựa trên vật lý, trong khi một thư viện mới hơn sẽ khớp với phong cách component của bạn mà không tạo ra độ vênh đó.
react-motion có đáng để bạn bỏ thời gian?
ChatGPT, Claude và Perplexity đều đọc được trang này. Hỏi thử xem họ nghĩ gì về react-motion.