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

Thử cách 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 đặ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 trau chuốt hơn, mang lại giao diện chất lượng cao hơn cho ứng dụng.

Android bao gồm nhiều API ảnh động, tuỳ thuộc vào loại ảnh động bạn muốn. Tài liệu này cung cấp thông tin tổng quan về những 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 Material Design về chuyển động.

Tạo ảnh động cho bitmap

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

Để tạo ảnh động cho đồ hoạ bitmap, chẳng hạn 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 một tài nguyên có thể vẽ, nhưng bạn cũng có thể xác định hành vi của ả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 2 hành động có liên quan với nhau là tạo ảnh động cho một nút phát sẽ chuyển đổi thành nút tạm dừng khi người dùng nhấn vào.

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

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 giúp cho sự thay đổi giao diện người dùng ít gây khó chịu hơn.

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

Để 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 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 khung hiển thị khi các thuộc tính thay đổi. Ví dụ: khi bạn thay đổi các thuộc tính vị trí, khung hiển thị sẽ di chuyển trên màn hình. Khi bạn thay đổi thuộc tính alpha, khung hiển thị rõ dần hoặc mờ đi.

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

Để tìm hiểu cách tạo ảnh động bằng hệ thống ảnh động thuộc tính, vui lòng đọ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 để 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 vật lý trong thế giới thực cho ảnh động để ảnh trông trông tự nhiên. Ví dụ: chúng nên duy trì động lượng khi mục tiêu thay đổi và thực hiện chuyển đổi mượt mà trong mọi thay đổi.

Để cung cấp những 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 trên định luật vật lý để kiểm soát cách ảnh động xuất hiện.

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

Ảnh động không dựa trên vật lý (chẳng hạn như ảnh đượ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 với 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 trực quan, quá trình này sẽ tạo ra một điểm dừng đột ngột trong ảnh động và sau đó là một chuyển động rời rạc, như minh hoạ trong hình 3.

Ảnh động được tạo bằng các 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 dẫn đến thay đổi về hiệu lực. Lực mới áp dụng trên tốc độ hiện có, giúp 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 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 bạn muốn sử dụng. Sau đó, hệ thống sẽ tìm ra và thực thi ảnh động giữa 2 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/thay thế một số khung 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ư minh hoạ trong hình 5.

Bố cục bắt đầu và kết thúc đều được lưu trữ trong 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 bạn muốn loại ảnh động nào, 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 xem 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. Tính năng này dựa trên cùng một khung chuyển đổi đã mô tả trong phần trước, nhưng hỗ trợ 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 các ảnh động đơn giản như trượt hoạt động mới vào từ một bên 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 khung 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 đổi sang một hoạt động mới bằng ảnh động phát triển liền mạch mục đó để lấp đầy màn hình, như ảnh động như trong hình 5.

Như thường lệ, bạn sẽ gọi startActivity(), nhưng hãy 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 khung 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 khung hiển thị đó trong ảnh động.

Để tham khảo thêm tài nguyên, hãy xem: