Di chuyển khung hiển thị có ả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.
Tạo ảnh động cho vị trí →

Các đối tượng trên màn hình thường cần được định vị lại do hoạt động tương tác của người dùng hoặc quá trình xử lý ở chế độ nền. Thay vì cập nhật ngay vị trí của đối tượng, khiến đối tượng đó nhấp nháy từ khu vực này sang khu vực khác, hãy sử dụng ảnh động để di chuyển đối tượng đó từ vị trí bắt đầu đến vị trí kết thúc.

Một cách mà Android cho phép bạn đặt lại vị trí các đối tượng thành phần hiển thị trên màn hình là sử dụng ObjectAnimator. Bạn cần cung cấp vị trí kết thúc mà bạn muốn đối tượng ổn định cũng như thời lượng của ảnh động. Bạn cũng có thể sử dụng bộ nội suy thời gian để kiểm soát tốc độ tăng hoặc giảm của ảnh động.

Thay đổi vị trí khung hiển thị bằng ObjectAnimator

API ObjectAnimator cung cấp cách thay đổi các thuộc tính của một khung hiển thị có thời lượng đã chỉ định. Tệp này chứa các phương thức tĩnh để tạo các thực thể của ObjectAnimator tuỳ thuộc vào loại thuộc tính mà bạn đang tạo ảnh động. Khi đặt lại vị trí các thành phần hiển thị trên màn hình, hãy dùng thuộc tính translationX và translationY.

Dưới đây là ví dụ về ObjectAnimator di chuyển khung hiển thị đến vị trí cách bên trái màn hình 100 pixel trong 2 giây:

Kotlin

ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    duration = 2000
    start()
}

Java

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();

Ví dụ này sử dụng phương thức ObjectAnimator.ofFloat(), vì các giá trị dịch phải là số thực có độ chính xác đơn. Tham số đầu tiên là khung hiển thị mà bạn muốn tạo ảnh động. Tham số thứ hai là thuộc tính bạn đang tạo ảnh động. Vì thành phần hiển thị cần di chuyển theo chiều ngang, nên thuộc tính translationX sẽ được sử dụng. Tham số cuối cùng là giá trị kết thúc của ảnh động. Trong ví dụ này, giá trị 100 cho biết một vị trí có số pixel tính từ bên trái màn hình.

Phương thức tiếp theo sẽ chỉ định khoảng thời gian tạo ảnh động, tính bằng mili giây. Trong ví dụ này, ảnh động chạy trong 2 giây (2000 mili giây).

Phương thức cuối cùng sẽ giúp ảnh động chạy, cập nhật vị trí của thành phần hiển thị trên màn hình.

Để biết thêm thông tin về cách sử dụng ObjectAnimator, hãy xem phần Tạo ảnh động bằng ObjectAnimator.

Thêm chuyển động cong

Mặc dù việc sử dụng ObjectAnimator rất thuận tiện, nhưng theo mặc định, phương thức này sẽ định vị lại thành phần hiển thị dọc theo một đường thẳng giữa điểm bắt đầu và điểm kết thúc. Material Design dựa vào các đường cong để di chuyển không gian của các đối tượng trên màn hình và thời gian của ảnh động. Việc sử dụng chuyển động cong sẽ giúp ứng dụng của bạn có cảm giác chân thực hơn, đồng thời giúp ảnh động trở nên thú vị hơn.

Xác định đường dẫn của riêng bạn

Lớp ObjectAnimator có các hàm khởi tạo cho phép bạn tạo ảnh động cho toạ độ bằng cách sử dụng 2 hoặc nhiều thuộc tính cùng một lúc cùng với một đường dẫn. Ví dụ: trình tạo ảnh động sau đây sử dụng đối tượng Path để tạo ảnh động cho các thuộc tính X và Y của khung hiển thị:

Kotlin

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val path = Path().apply {
        arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
    }
    val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply {
        duration = 2000
        start()
    }
} else {
    // Create animator without using curved path
}

Java

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
  ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
  animator.setDuration(2000);
  animator.start();
} else {
  // Create animator without using curved path
}

Ảnh động hình cung này sẽ có dạng như sau:

Hình 1. Ảnh động dạng đường cong.

Interpolator là một cách triển khai đường cong chuyển động. Hãy xem tài liệu về Material Design để biết thêm thông tin về khái niệm điều chỉnh đường cong. Interpolator xác định cách tính các giá trị cụ thể trong ảnh động dưới dạng hàm thời gian. Hệ thống cung cấp tài nguyên XML cho 3 đường cong cơ bản trong thông số kỹ thuật của Material Design:

  • @interpolator/fast_out_linear_in.xml
  • @interpolator/fast_out_slow_in.xml
  • @interpolator/linear_out_slow_in.xml

Sử dụng PathInterpolator

Lớp PathInterpolator là bộ nội suy được ra mắt trong Android 5.0 (API 21). Công cụ này dựa trên đường cong Bezier hoặc đối tượng Path. Các ví dụ về Android trong tài liệu về Material Design để dễ sử dụng PathInterpolator.

PathInterpolator có các hàm khởi tạo dựa trên nhiều loại đường cong Bézier. Tất cả đường cong Bézier đều có điểm bắt đầu và điểm kết thúc lần lượt cố định tại (0,0) và (1,1). Các đối số khác của hàm khởi tạo phụ thuộc vào loại đường cong Bézier được tạo.

Ví dụ: đối với một đường cong Bézier bậc hai, bạn chỉ cần toạ độ X và Y của một điểm điều khiển:

Kotlin

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.67f, 0.33f)
} else {
    LinearInterpolator()
}

Java

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.67f, 0.33f);
} else {
  myInterpolator = new LinearInterpolator();
}

Điều này tạo ra một đường cong giảm tốc bắt đầu nhanh chóng và giảm tốc khi tiến gần đến phần cuối.

Tương tự như vậy, hàm khởi tạo Bézier dạng khối lập phương cũng có các điểm bắt đầu và kết thúc cố định, nhưng cần có hai điểm điều khiển:

Kotlin

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
    LinearInterpolator()
}

Java

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f);
} else {
  myInterpolator = new LinearInterpolator();
}

Đây là cách triển khai đường cong giúp làm giảm giảm tốc của Material Design.

Để có quyền kiểm soát cao hơn, bạn có thể sử dụng Path tuỳ ý để xác định đường cong:

Kotlin

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  val path = Path().apply {
    moveTo(0.0f, 0.0f)
    cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f)
  }
  PathInterpolator(path)
} else {
  LinearInterpolator()
}

Java

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.moveTo(0.0f, 0.0f);
  path.cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f);
  myInterpolator = new PathInterpolator(path);
} else {
  myInterpolator = new LinearInterpolator();
}

Thao tác này tạo ra cùng một đường cong tốc độ như ví dụ lập phương Bézier, nhưng lại sử dụng Path.

Bạn cũng có thể xác định bộ nội suy đường dẫn dưới dạng tài nguyên XML:

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.5"
    android:controlY1="0.7"
    android:controlX2="0.1f"
    android:controlY2="1.0f"/>

Sau khi tạo một đối tượng PathInterpolator, bạn có thể truyền đối tượng đó vào phương thức Animator.setInterpolator(). Animator sử dụng bộ nội suy để xác định thời gian hoặc đường cong đường dẫn khi bắt đầu.

Kotlin

val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    interpolator = myInterpolator
    start()
}

Java

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(myInterpolator);
animation.start();