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

Thử cách sử 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 bằng hình ảnh để 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 đẹp 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 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 về chuyển động của Material Design.

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ẽ. Tuy nhiên, 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 là tạo ảnh động cho nút phát biến thành nút tạm dừng khi được nhấn.

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

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

Hình 2. Ảnh động tinh tế khi một hộp thoại xuất hiện rồi biến mất giúp 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 đưa các ảnh động tinh tế vào để 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, chế độ xem sẽ mờ dần hoặc mờ dần.

Cách đơn giản nhất để tạo các ả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 khung hiển thị, một ảnh động sẽ tự động được áp dụng. Để biết thêm thông tin, hãy xem phần Tự động tạo ảnh động cho bản 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 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 để chúng trông tự nhiên. Ví dụ: các ứng dụng nên duy trì động lực khi mục tiêu thay đổi và thực hiện 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 sẽ bao gồm các API ảnh động dựa trên vật lý dựa trên các định luật vật lý để kiểm soát cách ảnh động của bạn xuất hiện.

Sau đây là 2 ả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 giá trị mục tiêu thay đổi, đị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. Rõ ràng, quy trình này tạo ra một điểm dừng đột ngột trong ảnh động và sau đó chuyển động rời rạc, như 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, sẽ được thúc đẩy bằng lực. Việc thay đổi giá trị mục tiêu sẽ dẫn đến sự thay đổi về hiệu lực. Lực mới tác động lên tốc độ hiện tại, 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 cho thấy 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 mảnh hoặc hoạt động hiện tại. Tất cả những gì bạn cần làm là 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 một ả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 hay 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 đượ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 hiệu ứng 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 của mình. Phương thức này dựa trên cùng một khung chuyển đổi đã 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 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 minh hoạ trong hình 5.

Như thường lệ, bạn gọi startActivity(), nhưng truyền vào đó 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 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 quá trình tạo ảnh động.

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