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 khuyên dùng 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ừ vùng này sang vùng khác), hãy dùng ảnh động để di chuyển đối tượng từ vị trí bắt đầu đến vị trí kết thúc.

`ObjectAnimator` là một cách để Android cho phép bạn định vị lại các đối tượng khung hiển thị trên màn hình bằng cách sử dụng. 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ể 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 khung hiển thị trong một khoảng thời gian cụ thể. API này chứa các phương thức tĩnh để tạo 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 định vị lại khung hiển thị trên màn hình, hãy dùng các 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:

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

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 mà bạn đang tạo ảnh động. Vì khung hiển thị cần di chuyển theo chiều ngang, nên thuộc tính translationX được 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 vị trí cách bên trái màn hình nhiều pixel.

Phương thức tiếp theo chỉ định thời gian chạy ả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 khiến ảnh động chạy, cập nhật vị trí của khung 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 bài viết Tạo ảnh động bằng ObjectAnimator.

Thêm chuyển động cong

Mặc dù việc sử dụng ObjectAnimator rất tiện lợi, nhưng theo mặc định, phương thức này sẽ định vị lại khung hiển thị dọc theo đường thẳng giữa điểm bắt đầu và điểm kết thúc. Thiết kế Material dựa vào các đường cong để di chuyển 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 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 của bạn thú vị hơn.

Xác định đường dẫn riêng

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 đồng thời 2 hoặc nhiều thuộc tính cùng với đường dẫn. Ví dụ: trình tạo ảnh động sau đây sử dụng đối tượng để tạo ảnh động cho các thuộc tính X và Y của khung hiển thị:Path

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
}

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
}

Đây là ảnh động hình vòng cung:

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

An Interpolator là cách triển khai đường cong gia tốc. Hãy xem tài liệu về Material Design để biết thêm thông tin về khái niệm đường cong gia tốc. Interpolator xác định cách tính các giá trị cụ thể trong ảnh động theo 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à một bộ nội suy được giới thiệu trong Android 5.0 (API 21). Lớp 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 Material Design về gia tốc 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 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 đường cong Bézier bậc hai, bạn chỉ cần toạ độ X và Y của một điểm kiểm soát:

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

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 đường cong làm chậm bắt đầu nhanh và giảm tốc khi gần đến điểm kết thúc.

Tương tự, hàm khởi tạo Bézier bậc ba có điểm bắt đầu và điểm kết thúc cố định, nhưng yêu cầu 2 điểm kiểm soát:

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

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 làm chậm nhấn mạnh giảm tốc của Material Design.

Để kiểm soát tốt hơn, bạn có thể dùng Path tuỳ ý để xác định đường cong:

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

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

Điều này tạo ra đường cong gia tốc giống như ví dụ về Bézier bậc ba, 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 đó đến 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.

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

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