Flutter: Giới thiệu về Hoạt ảnh (Animation)
Giải phóng thời gian, khai phóng năng lực
Mục lục bài viết:
- Chọn cách tiếp cận
- Codelabs, hướng dẫn và bài báo
- Các loại hoạt ảnh
- Hoạt ảnh đóng hộp trước
- Các mẫu hoạt ảnh phổ biến
- Các nguồn lực khác
Animation (Hoạt ảnh) được thiết kế tốt làm cho giao diện người dùng cảm thấy trực quan hơn, góp phần vào giao diện mượt mà của một ứng dụng bóng bẩy và cải thiện trải nghiệm người dùng. Hỗ trợ hoạt ảnh của Flutter giúp bạn dễ dàng thực hiện nhiều loại hoạt ảnh khác nhau. Nhiều widget, đặc biệt là Material widget, đi kèm với các hiệu ứng chuyển động tiêu chuẩn được xác định trong thông số thiết kế của chúng, nhưng cũng có thể tùy chỉnh các hiệu ứng này.
Chọn cách tiếp cận
Có nhiều cách tiếp cận khác nhau mà bạn có thể thực hiện khi tạo hoạt ảnh trong Flutter. Cách tiếp cận nào phù hợp với bạn? Để giúp bạn quyết định, hãy xem Làm thế nào để chọn Widget hoạt ảnh Flutter phù hợp với bạn?
Cây quyết định sau đây giúp bạn quyết định phương pháp sử dụng khi triển khai hoạt ảnh Flutter:
Nếu hoạt ảnh ngầm (implicit animation) được đóng gói sẵn (hoạt ảnh dễ triển khai nhất) phù hợp với nhu cầu của bạn, hãy xem kiến thức cơ bản về Hoạt ảnh với hoạt ảnh ngầm.
Để tạo hoạt ảnh ngầm tùy chỉnh, hãy xem Tạo hoạt ảnh ngầm tùy chỉnh của riêng bạn với TweenAnimationBuilder.
Để tạo hoạt ảnh tường minh (explicit animation), trong đó bạn kiểm soát hoạt ảnh, thay vì để framework điều khiển nó, có lẽ bạn có thể sử dụng một trong các lớp hoạt ảnh tường mình được tích hợp sẵn. Để biết thêm thông tin, hãy xem Tạo hoạt ảnh định hướng đầu tiên của bạn với hoạt ảnh tường minh được tích hợp sẵn.
Nếu bạn cần tạo hoạt ảnh tường minh từ đầu, hãy xem Tạo hoạt ảnh tường minh tùy chỉnh với AnimatedBuilder và AnimatedWidget.
Để hiểu sâu hơn về cách hoạt ảnh hoạt động trong Flutter, hãy xem phần Đi sâu về Hoạt ảnh.
Codelabs, hướng dẫn và bài báo
Các tài nguyên sau đây là một nơi tốt để bắt đầu tìm hiểu framework hoạt ảnh Flutter. Mỗi tài nguyên này sẽ chỉ ra cách viết code hoạt ảnh.
- Bảng mã hoạt ảnh ngầm định
Bao gồm cách sử dụng hoạt ảnh ngầm định bằng cách sử dụng hướng dẫn từng bước và ví dụ tương tác. - Hướng dẫn hoạt ảnh
Giải thích các lớp cơ bản trong gói hoạt ảnh Flutter (bộ điều khiển, Animatableđường cong, trình nghe, trình tạo), vì nó hướng dẫn bạn thông qua tiến trình của hoạt ảnh tween bằng cách sử dụng các khía cạnh khác nhau của API hoạt ảnh. Hướng dẫn này cho biết cách tạo hoạt ảnh tục tĩu tùy chỉnh của riêng bạn. - Zero to One với Flutter, phần 1 và phần 2
Hướng dẫn cách tạo biểu đồ hoạt hình bằng cách sử dụng tweening. - Viết ứng dụng Flutter đầu tiên của bạn trên web
Codelab trình bày cách tạo biểu mẫu sử dụng hoạt ảnh để hiển thị tiến trình của người dùng khi họ điền vào các trường. - Xây dựng giao diện người dùng đẹp với Flutter
Codelab trình bày cách tạo một ứng dụng trò chuyện đơn giản. Bước 7 (Tạo hoạt ảnh cho ứng dụng của bạn) cho biết cách tạo hoạt ảnh cho tin nhắn mới — trượt nó từ vùng nhập liệu lên đến danh sách tin nhắn.
Các loại hoạt ảnh
Nói chung, hoạt ảnh dựa trên tween hoặc vật lý. Các phần sau giải thích ý nghĩa của các thuật ngữ này và hướng dẫn bạn đến các tài nguyên nơi bạn có thể tìm hiểu thêm.
Hoạt ảnh tween
Viết tắt của in-betweening. Trong hoạt ảnh tween, điểm bắt đầu và điểm kết thúc được xác định, cũng như dòng thời gian và đường cong xác định thời gian và tốc độ của quá trình chuyển đổi. Khung tính toán cách chuyển đổi từ điểm đầu đến điểm cuối.
Các tài liệu được liệt kê ở trên, chẳng hạn như hướng dẫn Hoạt ảnh, không nói riêng về tweening, nhưng chúng sử dụng tween trong các ví dụ của chúng.
Hoạt ảnh dựa trên vật lý
Trong hoạt ảnh dựa trên vật lý, chuyển động được mô phỏng giống với hành vi trong thế giới thực. Ví dụ, khi bạn tung một quả bóng, vị trí và thời điểm nó tiếp đất phụ thuộc vào tốc độ ném và khoảng cách của nó so với mặt đất. Tương tự, thả một quả cầu gắn vào lò xo sẽ rơi (và nảy) khác với thả một quả cầu gắn vào một sợi dây.
- Tạo hoạt ảnh cho một tiện ích bằng cách sử dụng mô phỏng vật lý
Một công thức trong phần hoạt ảnh của sách dạy nấu ăn Flutter. - Thư viện Flutter
Trong Material Components, ví dụ Grid minh họa một hoạt ảnh chuyển động. Chọn một trong các hình ảnh từ lưới và phóng to. Bạn có thể xoay hình ảnh bằng các cử chỉ kéo hoặc lướt. - Bạn cũng có thể xem tài liệu API với các phần AnimationController.animateWith và SpringSimulation.
Hoạt ảnh đóng hộp trước
Nếu bạn đang sử dụng các widget Material thì bạn có thể xem gói hoạt ảnh có sẵn trên pub.dev. Gói này chứa các hoạt ảnh được tạo sẵn cho các mẫu thường được sử dụng phổ biến: chuyển đổi Container
, chuyển đổi trục chia sẻ, mờ dần qua các chuyển tiếp và chuyển tiếp mờ dần.
Các mẫu hoạt hình phổ biến
Hầu hết các nhà thiết kế UX hoặc chuyển động đều nhận thấy rằng một số mẫu hoạt ảnh nhất định được sử dụng nhiều lần khi thiết kế giao diện người dùng. Phần này liệt kê một số mẫu hoạt ảnh thường được sử dụng và cho bạn biết nơi để tìm hiểu thêm.
Danh sách hoặc lưới hoạt ảnh
Mẫu này liên quan đến việc tạo hoạt ảnh cho việc thêm hoặc xóa các phần tử khỏi danh sách hoặc lưới.
- Ví dụ AnimatedList
Bản demo từ danh mục ứng dụng Mẫu, cho thấy cách tạo hoạt ảnh thêm một phần tử vào danh sách hoặc xóa một phần tử đã chọn. Danh sách Dart nội bộ được đồng bộ hóa khi người dùng sửa đổi danh sách bằng cách sử dụng các nút dấu cộng (+) và dấu trừ (-).
Chuyển đổi phần tử được chia sẻ
Trong mẫu này, người dùng chọn một phần tử - thường là một hình ảnh - từ trang và giao diện người dùng sẽ chuyển phần tử đã chọn sang một trang mới với nhiều chi tiết hơn. Trong Flutter, bạn có thể dễ dàng thực hiện chuyển đổi phần tử được chia sẻ giữa các route (trang) bằng widget Hero
.
- Hoạt ảnh Hero Cách tạo hai kiểu hoạt ảnh anh hùng:
- Anh hùng bay từ trang này sang trang khác trong khi thay đổi vị trí và kích thước.
- Ranh giới của anh hùng thay đổi hình dạng, từ hình tròn thành hình vuông, khi nó bay từ trang này sang trang khác.
- Thư viện Flutter
Bạn có thể tự tạo ứng dụng Thư viện hoặc tải xuống từ Cửa hàng Play. Bản demo của Shrine bao gồm một ví dụ về hoạt hình anh hùng. - Ngoài ra hãy xem tài liệu API cho các lớp Hero, Navigator và PageRoute.
Hoạt ảnh so le
Hoạt ảnh được chia thành các chuyển động nhỏ hơn, trong đó một số chuyển động bị trễ. Các hoạt ảnh nhỏ hơn có thể là tuần tự, hoặc có thể chồng chéo một phần hoặc hoàn toàn.
Các nguồn lực khác
Tìm hiểu thêm về hoạt ảnh Flutter tại các liên kết sau:
- Các mẫu hoạt ảnh từ danh mục ứng dụng Mẫu.
- Công thức tạo hoạt ảnh từ cookbook Flutter.
- Video hoạt ảnh từ kênh YouTube Flutter.
- Hoạt ảnh: tổng quan
Xem qua một số lớp chính trong thư viện hoạt ảnh và kiến trúc hoạt ảnh của Flutter. - Các widget hoạt ảnh và chuyển động
Danh mục một số widget hoạt ảnh được cung cấp trong các API của Flutter. - Các thư viện hình ảnh động trong tài liệu API Flutter
các hình ảnh động API cho các khuôn khổ Flutter. Liên kết này đưa bạn đến trang tổng quan kỹ thuật cho thư viện.
Giải phóng thời gian, khai phóng năng lực