Animation là một quy trình phức tạp trong bất cứ ứng dụng di động nào. Tùy vào độ phức tạp của nó, Animation sẽ nâng tầm trải nghiệm người dùng lên tới một cấp độ hoàn toàn mới và cung cấp đa dạng cho tương tác của người dùng. Do độ đa dạng của nó, Animation đã trở thành một phần tích hợp cần thiết của các ứng dụng di động hiện đại. Nhận thấy được tiềm năng của nó Flutter đã hỗ trợ chúng ta một framework đơn giản và trực quan để phát triển tất cả loại animation.
Các bài viết liên quan:
Animation trong Flutter
Animation là một quá trình hiển thị một loạt các ảnh theo thứ tự nhất định về thời gian để mô phỏng lại các chuyển động. Các khía cạnh quan trọng nhất trong animation sẽ được liệt kê như sau:
Animation có 2 giá trị nhất quán: giá trị bắt đầu (Start) và giá trị kết thúc (End).
Animation bắt đầu từ giá trị Start và đi qua một chuỗi các giá trị trung gian và sau đó sẽ kết thúc tại giá trị End.
Ví dụ như ta có một animation widget từ từ mờ dần, thì giá trị khởi tạo của opacity là 100% và giá trị kết thúc là 0%. Khi chạy thì animation thì 100% opacity sẽ dần đi đến 0%.
Giá trị trung gian có thể là tuyến tính hoặc phi tuyến tính (đường cong) và nó có thể được chỉnh sửa. Mỗi phần cấu hình sẽ cung cấp một cảm giác khác nhau của animation. Ví dụ như làm widget mờ đi thì sẽ là tuyến tính và widget animation một quả banh đang nảy lên thì sẽ là phi tuyến tính.
Thời lượng của một quá trình animation sẽ ảnh hưởng tới tốc độ của animation (nhanh hơn hay chậm hơn).
Khả năng kiểm soát quá trình animation như bắt đầu animation, dừng animation, lặp lại một animation bao nhiêu lần, đảo ngược quá trình của animation, v.v…
Trong Flutter, hệ thống animation không làm ra một animation thực tế nào, mà nó chỉ cung cấp các giá trị cần thiết trên mỗi khung hình để render những tấm hình.
Các lớp hỗ trợ Animation
Animation
- Khởi tạo các giá trị giữa hai số trong một thời lượng cụ thể. Các lớp animation phổ biến nhất là:
- Animation<double> – nội suy các giá trị giữa hai số thập phân
- Animation<Color> – nội suy các giá trị giữa hai màu
- Animation<Size> – nội suy các giá trị giữa hai kích cỡ
- AnimationController – một đối tượng animation đặc biết giúp kiểm soát các animation. Nó tạo các giá trị mới bất kể khi nào ứng dụng sẵn sàng cho một khung mới, Nó hỗ trợ animation tuyến tính và giá trị bắt đầu từ 0.0 đến 1.0.
- ở đoạn code này, controller kiểm soát animation và thời lượng để kiểm soát quy trình của animation, vsync là một lựa chọn đặt biệt để tối ưu tài nguyên được sử dụng trong animation.
CurvedAnimation
Cũng giống như AnimationController những lớp này hỗ trợ animation phi tuyến tính. CurvedAnimation có thể được sử dụng song song với các đối tượng Animation ở trên như sau:
Tween<T>
Tách ra từ Animatable<T> và được sử dụng để tạo các số giữa bất kì 2 số nào. Nó được sử dụng song song với đối tượng Animation bằng cách sử dụng phương thức animate và truyền vào đối tượng Animation.
Thậm chí có thể dùng song song vớiCurvedAnimation như sau:
Quy trình của animation trong Flutter
Đinh nghĩa và bắt đầu một controller của animation trong initState của widget StatefulWidget.
Thêm một listener animation, addListener để thay đổi trạng thái của widget
Các widget có sẵn như AnimationWidget và Animationbuilder có thể được dùng để bỏ qua quá trình này. Cả hai widget đều nhận đối tượng Animation và nhận các giá trị hiện tại cần thiết cho animation.
Lấy các giá trị animation giữa các quá trình xây dựng của widget và áp dụng nó cho chiều dài, rộng hoặc bất cứ thuộc tính nào của các giá trị mặc định.
Áp dụng vào chương trình
Ta sẽ tạo mới một project và copy tất cả file trong thư mục assets ở project cũ vào trong project mới này và add vào trong pubspec.yaml như sau
Xóa tất cả code mặc định trong main.dart
Thêm các package và hàm cơ bản cho main.dart
Tạo widget MyApp kế thừa từ StatefulWidget.
Tạo widget _MyAppState và override các hàm dựng mặc định
Trong phương thức initState, chúng ta đã tạo một đối tượng animation controller, một đối tượng animation và ta đã chạy animation bằng cách sử dụng controller.forward.
trong phương thức dispose, ta đã hủy đối tượng animation controller.
trong phương thức build, ta truyền animation vào widget MyHomePage thông qua hàm dựng. Giờ thì widget MyHomePage có thể sử dụng đối tượng animation.
Giờ ta thêm widget ProductBox
Tạo một widget mới là MyAnimatedWidget để thực hiện hiệu ứng mờ dần
Ở đây ta sử dụng AnimatedBuilder để thực hiện animation. AnimatedBuilder là một widget dựng các nội dung của nó trong khi thực hiện animation cùng một lúc. Nó nhận một đối tượng animation để lấy các giá trị animation hiện tại. Chúng ta đã sử dụng giá trị animation, giá trị animation để đặt độ mờ của widget con. widget sẽ tạo ra hiệu ứng mờ đi.
Cuối cùng ta tạo widget MyHomePage và sử dụng đối tượng animation để làm hiệu ứng.
Ở đây ta đã sử dụng FadeAnimation và MyAnimationWidget để tạo hiệu ứng cho hai sản phẩm đầu tiên của danh sách. FadeAnimation là lớp animation có sẵn để tạo hiệu ứng mờ dần.
Kết quả khi chạy ứng dụng:
