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

Thử 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 và giao diện chất lượng cao hơn.

Android có 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ề nhiều 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 hướng dẫn của 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 một đồ hoạ bitmap, chẳng hạn như biểu tượng hoặc hình minh hoạ, hãy 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 để cho người dùng biết rằng hai thao tác có liên quan với nhau là tạo ảnh động cho một 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 giúp giao diện người dùng thay đổi ít đột ngột hơn.

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

Để di chuyển, hiển thị hoặc ẩn các khung 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 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ị sẽ mờ dần hoặc hiện dần.

Để tạo những ảnh động này theo cách đơ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 khung 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 để tạo các ả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 luật vật lý trong thế giới thực cho ảnh động để chúng trông tự nhiên. Ví dụ: họ phải duy trì đà tăng trưởng khi mục tiêu thay đổi và thực hiện các 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 hoạt ảnh dựa trên vật lý. Các API này dựa vào các định luật vật lý để kiểm soát cách hoạt ảnh của bạn diễn ra.

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 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, quy trình này 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. Sự thay đổi về giá trị mục tiêu dẫn đến sự thay đổi về lực. Lực mới sẽ tác động lên vậ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 một ả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ông tin chi tiết hơn 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ể 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ẽ xác định và thực thi một ảnh động giữa hai bố cục. Bạn có thể dùng phương thức này để thay thế toàn bộ giao diện người dùng hoặc chỉ di chuyển hoặc 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 một 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 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. Điều 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 các ả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 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 sang một hoạt động mới bằng một ảnh động giúp mục đó phát triển liền mạch để lấp đầy màn hình, chẳng hạn như ảnh động trong hình 5.

Như thường lệ, bạn gọi startActivity(), nhưng truyền cho nó một gói các lựa chọn do ActivityOptions.makeSceneTransitionAnimation() cung cấp. Gói lựa 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 chúng trong quá trình tạo ảnh động.

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