Di chuyển khung hiển thị có ảnh động

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 lập tức giá trị của đối tượng vị trí, khiến quảng cáo nhấp nháy từ vùng này sang vùng khác, hãy dùng ảnh động để di chuyển nó từ vị trí bắt đầu đến vị trí kết thúc.

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 bằng cách đang sử dụng ObjectAnimator. Bạn cung cấp vị trí kết thúc mình muốn đối tượng ổn định cũng như thời lượng của ảnh động. Bạn có thể Ngoài ra còn sử dụng bộ nội suy thời gian để kiểm soát tăng tốc hoặc giảm tốc của ảnh động.

Thay đổi vị trí xem bằng ObjectAnimator

ObjectAnimator API cung cấp cách thay đổi các thuộc tính của thành phần hiển thị có thời lượng cụ thể. 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 định vị lại chế độ xem của bạn trên hãy sử dụng các thuộc tính translationX và translationY.

Sau đây là ví dụ về ObjectAnimator di chuyển khung hiển thị đến vị trí 100 pixel từ bên trái màn hình 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 pháp 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à tài sản ảnh động. Vì thành phần hiển thị cần di chuyển theo chiều ngang, nên translationX được sử dụng. Tham số cuối cùng là giá trị kết thúc của ảnh động. Trong phần này Ví dụ: giá trị 100 cho biết một vị trí có nhiều 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 phần này ví dụ: ảnh động chạy trong 2 giây (2000 mili giây).

Phương thức cuối cùng 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 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 thuận tiện nhưng theo mặc định, thành phần này sẽ đặt lại vị trí của theo đường thẳng giữa điểm xuất phát và điểm kết thúc. Chất liệu Dựa vào các đường cong để di chuyển trong 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 mang lại cho ứng dụng của bạn cảm giác chất liệu hơn đồng thời làm cho các hoạt ảnh 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ạ độ sử dụng hai hoặc nhiều thuộc tính cùng một lúc cùng với một đường dẫn. Cho ví dụ: hoạ sĩ hoạt hình sau đây sử dụng Path để tạo ảnh động cho X và Y các thuộc tính của khung hiển thị:

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
}

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

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

Interpolator là cách triển khai đường cong tốc độ. Xem Tài liệu về Material Design để biết thêm thông tin về khái niệm giảm bớt đườ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 bất cứ lúc nào. Hệ thống cung cấp tài nguyên XML cho ba đườ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

Chiến lược phát hành đĩa đơn PathInterpolator là một bộ nội suy được giới thiệu trong Android 5.0 (API 21). Chiến dịch này dựa trên một Đườ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 có điểm bắt đầu và điểm kết thúc cố định tại (0,0) và (1,1), . Các đối số hàm khởi tạo khác phụ thuộc vào loại Bézier đang được tạo.

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

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 giảm tốc, bắt đầu nhanh và giảm tốc khi càng gần càng kết thúc.

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

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 Material Design được nhấn mạnh giảm tốc đường cong tốc độ.

Để 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 tương tự như ví dụ lập phương Bézier, nhưng sử dụng Hãy 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 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();