Di chuyển khung hiển thị bằng ảnh động dựa trên cử chỉ hất

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.
Spring AnimationSpec →

Ảnh động dựa trên thao tác vuốt sử dụng lực ma sát tỷ lệ thuận với an tốc độ của một đối tượng. Hãy dùng ảnh động này để tạo hiệu ứng cho một thuộc tính của đối tượng và kết thúc ảnh động một cách từ từ. Ảnh động này có động lượng ban đầu (thường nhận được từ tốc độ của cử chỉ) và từ từ chậm lại. Ảnh động kết thúc khi tốc độ của ảnh động đủ chậm để không tạo ra sự thay đổi rõ ràng trên màn hình thiết bị.

Hình 1. Ảnh động vuốt

Để tìm hiểu về các chủ đề liên quan, hãy đọc các hướng dẫn sau:

Thêm thư viện AndroidX

Để sử dụng ảnh động dựa trên vật lý, bạn phải thêm thư viện AndroidX vào dự án như sau:

  1. Mở tệp build.gradle cho mô-đun ứng dụng.
  2. Thêm thư viện AndroidX vào phần dependencies.

    Groovy

            dependencies {
            implementation 'androidx.dynamicanimation:dynamicanimation:1.0.0'
        }

    Kotlin

            dependencies {
            implementation("androidx.dynamicanimation:dynamicanimation:1.0.0")
        }

Tạo ảnh động vuốt

Lớp FlingAnimation cho phép bạn tạo ảnh động hất cho một đối tượng. Để tạo ảnh động vuốt, hãy tạo một thực thể của lớp FlingAnimation và cung cấp một đối tượng cùng thuộc tính của đối tượng mà bạn muốn tạo hiệu ứng.

Kotlin

val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)

Java

FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);

Đặt tốc độ

Tốc độ bắt đầu xác định tốc độ thay đổi thuộc tính ảnh động khi bắt đầu ảnh động. Tốc độ bắt đầu mặc định được đặt là 0 pixel mỗi giây. Do đó, bạn phải xác định tốc độ bắt đầu để đảm bảo ảnh động không kết thúc ngay lập tức.

Bạn có thể sử dụng một giá trị cố định làm tốc độ bắt đầu hoặc dựa vào tốc độ của cử chỉ chạm. Nếu chọn cung cấp một giá trị cố định, bạn nên xác định giá trị đó bằng dp mỗi giây, sau đó chuyển đổi thành pixel mỗi giây. Việc xác định giá trị bằng dp mỗi giây cho phép tốc độ không phụ thuộc vào mật độ và hệ số hình dạng của thiết bị. Để biết thêm thông tin về cách chuyển đổi tốc độ bắt đầu thành pixel mỗi giây, hãy tham khảo phần Chuyển đổi dp mỗi giây thành pixel mỗi giây trong Ảnh động lò xo.

Để đặt tốc độ, hãy gọi phương thức setStartVelocity() và truyền tốc độ tính bằng pixel mỗi giây. Phương thức này trả về đối tượng vuốt on mà tốc độ được đặt.

Lưu ý: Sử dụng lớp GestureDetector.OnGestureListener và lớp VelocityTracker để lần lượt truy xuất và tính toán tốc độ của cử chỉ chạm.

Đặt phạm vi giá trị ảnh động

Bạn có thể đặt giá trị ảnh động tối thiểu và tối đa khi muốn giới hạn giá trị thuộc tính trong một phạm vi nhất định. Tính năng kiểm soát phạm vi này đặc biệt hữu ích khi bạn tạo hiệu ứng cho các thuộc tính có phạm vi nội tại, chẳng hạn như alpha (từ 0 đến 1).

Lưu ý: Khi giá trị của ảnh động hất đạt đến giá trị tối thiểu hoặc tối đa, ảnh động sẽ kết thúc.

Để đặt giá trị tối thiểu và tối đa, hãy gọi phương thức setMinValue() và setMaxValue(). Cả hai phương thức đều trả về đối tượng ảnh động mà bạn đã đặt giá trị.

Đặt ma sát

Phương thức setFriction() cho phép bạn thay đổi ma sát của ảnh động. Phương thức này xác định tốc độ giảm tốc độ trong ảnh động.

Lưu ý: Nếu bạn không đặt ma sát khi bắt đầu ảnh động, ảnh động sẽ sử dụng giá trị ma sát mặc định là 1.

Phương thức này trả về đối tượng mà ảnh động sử dụng giá trị ma sát bạn cung cấp.

Mã mẫu

Ví dụ dưới đây minh hoạ thao tác hất ngang. Tốc độ được ghi lại từ trình theo dõi tốc độ là velocityX và giới hạn cuộn được đặt thành 0 và maxScroll. Ma sát được đặt thành 1,1.

Kotlin

FlingAnimation(view, DynamicAnimation.SCROLL_X).apply {
    setStartVelocity(-velocityX)
    setMinValue(0f)
    setMaxValue(maxScroll)
    friction = 1.1f
    start()
}

Java

FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);
fling.setStartVelocity(-velocityX)
        .setMinValue(0)
        .setMaxValue(maxScroll)
        .setFriction(1.1f)
        .start();

Đặt mức thay đổi tối thiểu có thể nhìn thấy

Khi tạo hiệu ứng cho một thuộc tính tuỳ chỉnh không được xác định bằng pixel, bạn nên đặt mức thay đổi tối thiểu của giá trị ảnh động mà người dùng có thể nhìn thấy. Thuộc tính này xác định một ngưỡng hợp lý để kết thúc ảnh động.

Bạn không cần gọi phương thức này khi tạo hiệu ứng cho DynamicAnimation.ViewProperty vì mức thay đổi tối thiểu có thể nhìn thấy được lấy từ thuộc tính. Ví dụ:

  • Giá trị thay đổi tối thiểu có thể nhìn thấy mặc định là 1 pixel cho các thuộc tính khung hiển thị như TRANSLATION_X, TRANSLATION_Y, TRANSLATION_Z, SCROLL_X, và SCROLL_Y.
  • Đối với ảnh động sử dụng tính năng xoay, chẳng hạn như ROTATION, ROTATION_X, và ROTATION_Y, mức thay đổi tối thiểu có thể nhìn thấy là MIN_VISIBLE_CHANGE_ROTATION_DEGREES, hoặc 1/10 pixel.
  • Đối với ảnh động sử dụng độ mờ, mức thay đổi tối thiểu có thể nhìn thấy là MIN_VISIBLE_CHANGE_ALPHA, hoặc 1/256.

Để đặt mức thay đổi tối thiểu có thể nhìn thấy cho ảnh động, hãy gọi phương thức setMinimumVisibleChange() và truyền một trong các hằng số tối thiểu có thể nhìn thấy hoặc một giá trị mà bạn cần tính cho một thuộc tính tuỳ chỉnh. Để biết thêm thông tin về cách tính giá trị này, hãy tham khảo phần Tính toán giá trị thay đổi tối thiểu có thể nhìn thấy.

Kotlin

anim.minimumVisibleChange = DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE

Java

anim.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);

Lưu ý: Bạn chỉ cần truyền một giá trị khi tạo hiệu ứng cho một thuộc tính tuỳ chỉnh không được xác định bằng pixel.

Tính toán giá trị thay đổi tối thiểu có thể nhìn thấy

Để tính toán giá trị thay đổi tối thiểu có thể nhìn thấy cho một thuộc tính tuỳ chỉnh, hãy sử dụng công thức sau:

Mức thay đổi tối thiểu có thể nhìn thấy = Phạm vi giá trị thuộc tính tuỳ chỉnh / Phạm vi ảnh động tính bằng pixel

Ví dụ: thuộc tính mà bạn muốn tạo hiệu ứng tiến triển từ 0 đến 100. Điều này tương ứng với mức thay đổi 200 pixel. Theo công thức, giá trị thay đổi tối thiểu có thể nhìn thấy là 100 / 200, bằng 0,5 pixel.