[RN] React Native Animations
Trong bài viết này chúng ta sẽ cùng đi tìm hiểu về React Native Animated API. Mình sẽ tạo một project nho nhỏ để các bạn có thể hiểu rõ hơn về Animation trong RN, kết quả chúng ta thu được sẽ như hình bên dưới, nào cùng bắt tay vào làm thôi ^^
Project Setup
Toàn bộ source code của bài viết các bạn có thể download tại đây.
Bước đầu tiên, khởi tạo project
react-native init AnimatedChartTạo file AnimatedBar.js có dạng như sau
và file App.js
Cả 2 file đều rất đơn giản phải không nào, bây giờ chúng ta sẽ đi vào chi tiết từng file nhé.
Creating Data
Trước khi view có thể render được chúng ta phải cần dữ liệu đầu vào. Đầu tiên chúng ta sẽ tạo ra 10 phần tử mẫu, mỗi phần tử có chiều cao từ 0 cho đến 100
Với đoạn code trên khi component mounts nó sẽ tạo ra 10 view có chiều cao khác nhau. Bây giờ chúng ta sẽ tạo ra 1 thanh bar theo chiều dọc. Trong app/AnimatedBar.js chúng ta sẽ tạo ra style cho thanh bar.
Những thanh bar sẽ có dạng như sau khi chúng ta chạy chương trình
Trông thật tuyệt phải không nào, nhưng chưa kết thúc đâu, bây giờ chúng ta sẽ đi tạo animation sinh động cho từng thanh bar nhé.
Animation Upon Entry
Vậy bây giờ chúng ta muốn animate chiều cao của thanh bar khi lần đầu render. Để làm điều đó, trong app/AnimatedBar.js chúng ta sẽ tạo ra một Animated.Value sau đó chúng ta sẽ dùng nó để thiết lập chiều cao cho thanh bar.
Như vậy các thanh bar luôn có chiều cao bằng 0, bây giờ chúng ta sẽ animate value từ 0 cho đến giá trị được truyền qua AnimatedBar. Tại componentDidMount trong AnimateBar chúng ta sẽ lấy ra value được truyền sang từ bên App.js
Ban đầu chiều dài this._height là 0 và sẽ dần dần tiến từ 0 tới Y (Y là giá trị ngẫu nhiên được truyền từ bên App.js)
Bây giờ các bạn có thể xem thay đổi khi chúng ta reload app
Delaying the Animation
Như các bạn đã thấy ở hình trên, animation ở mỗi thanh bar được chạy 1 cách tuần tự, để làm được điều đó chúng ta sẽ phải sử dụng đến Animated.sequence , và Animated.delay
Animated.sequence có nghĩa là nó sẽ chạy tuần tự, nó sẽ nhận vào 1 mảng các animation và chúng sẽ phải đợi cho 1 animation kết thúc rồi mới chạy animation kế tiếp cho tới hết thì thôi.Animated.delay có nghĩa là nó sẽ đợi 1 khoảng thời gian rồi mới thực thi animation tiếp theo.
Ý tưởng thực hiện sẽ như sau: Chúng ta sẽ khai báo 1 static number có giá trị là 100 chẳng hạn. Chúng ta sẽ gửi giá trị (100) * index của một thanh bar trong mảng phần tử có sẵn tới AnimatedBar. Do đó giá trị delay của phần tử đầu tiên sẽ là 100*0 = 0, tiếp theo là 100*1 = 100, …, 100*9 = 900 vậy nên thanh bar đầu tiên sẽ chạy ngay lập tức tiếp theo đó sẽ là thanh thứ 2, 3,…. 9
Bây giờ để dữ liệu của thanh bar thay đổi liên tục chúng ta cần tạo ra một interval, chức năng của nó là sau mỗi 0.5 giây sẽ tạo mới dữ liệu một lần
Và đây là kết quả chúng ta đạt được
