Tạo hiệu ứng trong react với React Spring

918

Trong bài viết này chúng ta sẽ tìm hiểu về cách tạo animation với thư viện React Spring cho các element trong React

Cài đặt

Để bắt đầu chúng ta khởi tạo project với create-react-app trong command line tool.

Sau đó chúng ta di chuyển đến thư mục react-animations và cài đặt react spring library.

Tạo hiệu ứng đầu tiên với Spring component

Trong App.js ta xoá đi các dòng code mặc định ban đầu và thêm vào đoạn code bên dưới:

Trong đoạn code trên chúng ta import component Spring từ react-spring. Trong component Spring ta sử dụng 1 props là function trả về React Element, và component Spring sẽ render giá trị trả về của hàm đó thay vì trực tiếp render React Element như thông thường.

Sau đó truyền props parameter vào style attribute của thẻ div.

Với Spring component chúng ta sẽ tạo hiệu ứng di chuyển các elements và nó nhận vào 2 props khác là from (initial value) và to (final value):

From: vị trí ban đầu.

To: vị trí khi kết thúc hiệu ứng

Tạo hiệu ứng cho nhiều elements

Để có thể tạo hiệu ứng cho nhiều component spring cung cấp một component là Trail.

Tạo component AllPosts và import Trail từ react-spring theo ví dụ sau đây:

Trail nhận vào 4  props là items, keys, from và to.

Items: là array các element chúng ta cần tạo hiệu ứng

keys: là unique key prop cho mỗi item trong array.

Spring config

Spring cho phép chúng ta  điều chỉnh các thông số delays, tension, friction, resets props là config

Ngoài ra bạn có thể sử dụng các preset có sẵn của spring thay vì chỉnh tay từng thông số

Property Value
config.default { tension: 170, friction: 26 }
config.gentle { tension: 120, friction: 14 }
config.wobbly { tension: 180, friction: 12 }
config.stiff { tension: 210, friction: 20 }
config.slow { tension: 280, friction: 60 }
config.molasses { tension: 280, friction: 120 }

Ví dụ: chúng ta tạo component navbar và sử dụng preset slow của Spring component để tạo hiệu ứng cho thanh navbar như sau:

Kết luận:

Trên đây là những ví dụ cơ bản về cách sử dụng thư viện React Spring thông qua render props api. Thư viện React spring có thể đáp ứng hầu hết các hiệu ứng liên quan đến UI của bạn. Nó cung cấp cho bạn các công cụ đủ linh hoạt để tự tin đưa ý tưởng của bạn vào các chuyển động trên giao diện.

TopDev via Devnow

SHARE