Giới thiệu về ảnh động

Thử cách dùng Compose
Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách sử dụng Ảnh động trong Compose.

Ảnh động có thể thêm chỉ dẫn trực quan để thông báo cho người dùng về những gì đang diễn ra trong ứng dụng của bạn. Các chỉ dẫn trực quan sẽ đặc biệt hữu ích khi giao diện người dùng thay đổi trạng thái, chẳng hạn như khi tải nội dung mới hoặc khi có các thao tác mới. Ảnh động cũng giúp giao diện ứng dụng của bạn trở nên tinh tế hơn, mang lại cảm giác chất lượng cao hơn.

Android bao gồm nhiều API ảnh động tuỳ thuộc vào loại ảnh động mà bạn muốn. Tài liệu này cung cấp thông tin tổng quan về các cách bạn có thể thêm chuyển động vào giao diện người dùng.

Để hiểu rõ hơn về thời điểm bạn nên sử dụng ảnh động, hãy xem thêm Hướng dẫn của Material Design về chuyển động.

Tạo ảnh động bitmap

Hình 1. Một ảnh động có thể vẽ.

Để tạo ảnh động cho đồ hoạ bitmap như biểu tượng hoặc hình minh hoạ, hãy sử dụng các API ảnh động có thể vẽ. Thông thường, các ảnh động này được xác định tĩnh bằng tài nguyên có thể vẽ, nhưng bạn cũng có thể xác định hành vi ảnh động trong thời gian chạy.

Ví dụ: một cách hay để thông báo cho người dùng rằng hai thao tác có liên quan với nhau là tạo ảnh động cho nút phát chuyển thành nút tạm dừng khi người dùng nhấn vào nút đó.

Để biết thêm thông tin, hãy đọc bài viết Tạo ảnh động cho đồ hoạ có thể vẽ được.

Tạo ảnh động cho chế độ hiển thị và chuyển động của giao diện người dùng

Hình 2. Ảnh động tinh tế khi hộp thoại xuất hiện và biến mất sẽ giúp giao diện người dùng thay đổi ít chói mắt hơn.

Khi cần thay đổi chế độ hiển thị hoặc vị trí của các thành phần hiển thị trong bố cục, tốt nhất bạn nên thêm ảnh động tinh tế để giúp người dùng hiểu được cách giao diện người dùng đang thay đổi.

Để di chuyển, hiển thị hoặc ẩn thành phần hiển thị trong bố cục hiện tại, bạn có thể sử dụng hệ thống ảnh động thuộc tính do gói android.animation cung cấp, có trong Android 3.0 (API cấp 11) trở lên. Các API này cập nhật các thuộc tính của đối tượng View trong một khoảng thời gian, liên tục vẽ lại thành phần hiển thị khi các thuộc tính thay đổi. Ví dụ: khi bạn thay đổi thuộc tính vị trí, thành phần hiển thị sẽ di chuyển trên màn hình. Khi bạn thay đổi thuộc tính alpha, chế độ xem sẽ mờ dần hoặc sáng dần.

Để tạo ảnh động đơn giản nhất, hãy bật ảnh động trên bố cục để khi bạn thay đổi chế độ hiển thị của một thành phần hiển thị, ảnh động sẽ tự động áp dụng. Để biết thêm thông tin, hãy xem phần Tự động tạo ảnh động cho sự cập nhật bố cục.

Để tìm hiểu cách tạo ảnh động bằng hệ thống ảnh động thuộc tính, hãy đọc bài viết Tổng quan về ảnh động thuộc tính. Bạn cũng có thể xem các trang sau đây để tạo ảnh động phổ biến:

Chuyển động dựa trên vật lý

Hình 3. Ảnh động được tạo bằng ObjectAnimator.

Hình 4. Ảnh động được tạo bằng các API dựa trên vật lý.

Bất cứ khi nào có thể, hãy áp dụng các quy tắc vật lý thực tế cho ảnh động để ảnh động trông tự nhiên. Ví dụ: các thành phần này phải duy trì đà khi mục tiêu thay đổi và chuyển đổi suôn sẻ trong mọi thay đổi.

Để cung cấp các hành vi này, Thư viện hỗ trợ Android bao gồm các API ảnh động dựa trên vật lý dựa vào các quy luật vật lý để kiểm soát cách ảnh động diễn ra.

Sau đây là hai ảnh động phổ biến dựa trên vật lý:

Ảnh động không dựa trên vật lý (chẳng hạn như ảnh động được tạo bằng API ObjectAnimator) khá tĩnh và có thời lượng cố định. Nếu giá trị mục tiêu thay đổi, bạn phải huỷ ảnh động tại thời điểm thay đổi giá trị mục tiêu, định cấu hình lại ảnh động bằng một giá trị mới làm giá trị bắt đầu mới và thêm giá trị mục tiêu mới. Về mặt hình ảnh, quá trình này tạo ra một điểm dừng đột ngột trong ảnh động và một chuyển động rời rạc sau đó, như minh hoạ trong hình 3.

Ảnh động được tạo bằng API ảnh động dựa trên vật lý, chẳng hạn như DynamicAnimation, được điều khiển bằng lực. Thay đổi về giá trị mục tiêu sẽ dẫn đến thay đổi về lực. Lực mới áp dụng cho vận tốc hiện có, tạo ra quá trình chuyển đổi liên tục sang mục tiêu mới. Quá trình này tạo ra ảnh động trông tự nhiên hơn, như minh hoạ trong hình 4.

Tạo ảnh động cho các thay đổi về bố cục

Hình 5. Bạn có thể tạo ảnh động để hiển thị thêm thông tin chi tiết bằng cách thay đổi bố cục hoặc bắt đầu một hoạt động mới.

Trên Android 4.4 (API cấp 19) trở lên, bạn có thể sử dụng khung chuyển đổi để tạo ảnh động khi hoán đổi bố cục trong hoạt động hoặc mảnh hiện tại. Bạn chỉ cần chỉ định bố cục bắt đầu và kết thúc cũng như loại ảnh động mà bạn muốn sử dụng. Sau đó, hệ thống sẽ tìm ra và thực thi ảnh động giữa hai bố cục. Bạn có thể sử dụng tính năng này để hoán đổi toàn bộ giao diện người dùng hoặc chỉ di chuyển hoặc thay thế một số thành phần hiển thị.

Ví dụ: khi người dùng nhấn vào một mục để xem thêm thông tin, bạn có thể thay thế bố cục bằng thông tin chi tiết về mục đó, áp dụng hiệu ứng chuyển đổi như trong hình 5.

Bố cục bắt đầu và kết thúc được lưu trữ trong một Scene, mặc dù cảnh bắt đầu thường được xác định tự động từ bố cục hiện tại. Bạn tạo một Transition để cho hệ thống biết loại ảnh động bạn muốn, sau đó gọi TransitionManager.go() và hệ thống sẽ chạy ảnh động để hoán đổi bố cục.

Để biết thêm thông tin, hãy đọc bài viết Tạo ảnh động cho các thay đổi về bố cục bằng khung chuyển đổi. Để xem mã mẫu, hãy tham khảo BasicTransition.

Tạo ảnh động giữa các hoạt động

Trên Android 5.0 (API cấp 21) trở lên, bạn cũng có thể tạo ảnh động chuyển đổi giữa các hoạt động. Phương thức này dựa trên cùng một khung chuyển đổi được mô tả trong phần trước, nhưng cho phép bạn tạo ảnh động giữa các bố cục trong các hoạt động riêng biệt.

Bạn có thể áp dụng ảnh động đơn giản như trượt hoạt động mới vào từ bên cạnh hoặc làm mờ hoạt động đó, nhưng bạn cũng có thể tạo ảnh động chuyển đổi giữa các thành phần hiển thị dùng chung trong mỗi hoạt động. Ví dụ: khi người dùng nhấn vào một mục để xem thêm thông tin, bạn có thể chuyển sang một hoạt động mới bằng ảnh động giúp mở rộng liền mạch mục đó để lấp đầy màn hình, như ảnh động trong hình 5.

Như thường lệ, bạn gọi startActivity(), nhưng truyền cho phương thức này một gói tuỳ chọn do ActivityOptions.makeSceneTransitionAnimation() cung cấp. Gói tuỳ chọn này có thể bao gồm những thành phần hiển thị được chia sẻ giữa các hoạt động để khung chuyển đổi có thể kết nối các thành phần hiển thị đó trong ảnh động.

Để biết thêm tài nguyên, hãy xem: