Đối với các lập trình viên front-end thì việc xử lý các animation đã không xa lạ gì. Chúng ta đã quá quen thuộc với việc xử lý các animation một cách time-based, thiết lập duration cho từng hiệu ứng.
Vậy thì hãy thử làm quen với React Spring, một thư viện xử lý animation với concept chính là Spring-Physics based mà sẽ cover hết những nhu cầu xử lý animation mà các lập trình viên front-end sẽ cần
Installation
Để cài đặt tất cả thư viện react-spring :
yarn add react-springhoặc
npm install react-springHiện tại thì ReactSpring hỗ trợ gần như tất cả các trình duyệt hiện tại cũng như đa nền tảng web và native
Basic
Hook cơ bản nhất của ReactSpring là useSpring. Với công dụng chính là biến mọi giá trị trở thành “animated values”. Hãy bắt đầu với import :
import { useSpring, animated } from 'react-spring'Chúng ta có thể ghi đè giá trị để thay đổi hiệu ứng :
Ở đây chỉ với hook useSpring, tôi có thể làm các hiệu ứng cơ bản như fade-in và fade-out, slide left và right, và cả rotate.
Để áp dụng những hiệu ứng trên vào view, chỉ cần thêm animated vào trước tag của element, rất đơn giản phải không
Vậy là ta đã có những hiệu ứng đơn giản rất nhanh và đẹp mắt
React Spring là một thư viện khá đồ sộ với nhiều điều cần tìm hiểu, ở trên chỉ là hướng dẫn cơ bản với hook useSpring. React-Spring còn có :
- useChain: để xử lý một chuỗi các hiệu ứng theo thứ tự
- useSprings: có tác dụng tương tự useSpring, nhưng để áp dụng với một dãy element, với mỗi element có config riêng
- useTrail: để xử lý hiệu ứng cho một dãy element với một config
- useTransition: để xử lý hiệu ứng với life cycle
Dù cho React Spring cung cấp cho chúng ta rất nhiều công cụ để xử lý animation đẹp mắt, nhưng đối với những animation khó nhằn, vẫn đòi hỏi lập trình viên hiểu rõ bản chất của những animation, từ đó xây dựng UI phù hợp với người dùng
Demo : https://quotes-generator-1901.web.app/
Last Words
Although my content is free for everyone, but if you find this article helpful, you can buy me a coffee here
