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

Các đối tượng trên màn hình thường cần được đặt lại vị trí do người dùng tương tác hoặc xử lý trong hậu trường. 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 cung cấp vị trí kết thúc mà bạn muốn đối tượng dừng lại 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 thành phần hiển thị trong một khoảng thời gian cụ thể. Thư viện 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 thành phần 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. 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ó nhiều pixel từ bên trái màn hình.

Phương thức tiếp theo chỉ định thời lượng của ả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 lộ trình 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 một thành phần 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 vòng cung sẽ có dạng như sau:

Hình 1. Ảnh động theo đườ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 đường cong làm dịu. 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 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). Đường cong này dựa trên đường cong Bézier 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ả các đường cong Bézier đều có điểm bắt đầu và điểm kết thúc cố định lần lượt là (0,0) và (1,1). Các đối số hàm khởi tạo khác phụ thuộc vào loại đường cong Bézier đang đượ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 và giảm tốc khi gần kết thúc.

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();
}

Cách này tạo ra cùng một đường cong chuyển động như ví dụ về Bézier dạng khối, nhưng 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 đố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();