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

Thử cách sử 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.
Spring AnimationSpec →

Ảnh động dựa trên hất sử dụng một lực ma sát tỷ lệ với vận tốc của đối tượng. Sử dụng ảnh động này để tạo ảnh động cho thuộc tính của một đối tượng và kết thúc dần ảnh động. Động lượng này có động lượng ban đầu, chủ yếu nhận được từ tốc độ cử chỉ rồi chậm lại. Ảnh động sẽ kết thúc khi tốc độ của ảnh động đủ thấp để không làm thay đổi gì trên màn hình thiết bị.

Hình 1. Ảnh động hất lên

Để tìm hiểu về các chủ đề có liên quan, hãy đọc những 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 của mình như sau:

  1. Mở tệp build.gradle cho mô-đun ứng dụng của bạn.
  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 dựa trên cử chỉ hấ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 hất, hãy tạo một thực thể của lớp FlingAnimation, đồng thời cung cấp một đối tượng và thuộc tính của đối tượng mà bạn muốn tạo ảnh động.

Kotlin

val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)

Java

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

Đặt tốc độ

Vận tốc bắt đầu xác định tốc độ thay đổi thuộc tính ảnh động ở thời điểm bắt đầu ảnh động. Tốc độ bắt đầu mặc định được đặt thành 0 pixel/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 vận tốc bắt đầu hoặc bạn có thể đặt giá trị đó dựa trên vận tốc của một 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ị theo dp/giây, sau đó chuyển đổi giá trị đó sang pixel/giây. Việc xác định giá trị tính bằng dp/giây cho phép tốc độ độc lập với mật độ và kiểu dáng của thiết bị. Để biết thêm thông tin về cách chuyển đổi tốc độ ban đầu thành pixel/giây, hãy tham khảo phần Chuyển đổi dp mỗi giây thành pixel/giây trong bài viết Ảnh động mùa xuân.

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

Lưu ý: Hãy dùng các lớp GestureDetector.OnGestureListener và VelocityTracker tương ứng để truy xuất và tính toán tốc độ của các 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 ở một phạm vi nhất định. Việc kiểm soát phạm vi này đặc biệt hữu ích khi bạn tạo ảnh độ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() tương ứng. Cả hai phương thức đều trả về đối tượng ảnh động mà bạn đã đặt giá trị.

Thiết lập bước xác thực

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

Lưu ý: Nếu bạn không đặt ma sát ở đầu ảnh động, thì ả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 có ảnh động sử dụng giá trị ma sát mà bạn cung cấp.

Mã mẫu

Ví dụ dưới đây minh hoạ cử chỉ hất theo chiều ngang. Vận tốc thu thập được từ công cụ theo dõi tốc độ là velocityX, giới hạn cuộn được đặt thành 0 và maxScroll. Độ ma sát được đặt ở mức 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 ảnh độ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 đối với giá trị ảnh động mà người dùng nhìn thấy. Thuộc tính này xác định 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 ảnh động DynamicAnimation.ViewProperty vì 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 hiển thị tối thiểu mặc định là 1 pixel cho các thuộc tính chế độ xem 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, thay đổi hiển thị tối thiểu là MIN_VISIBLE_CHANGE_ROTATION_DEGREES hoặc 1/10 pixel.
  • Đối với ảnh động sử dụng độ mờ, thay đổi hiển thị tối thiểu là MIN_VISIBLE_CHANGE_ALPHA hoặc 1/256.

Để đặt mức thay đổi hiển thị tối thiểu cho ảnh động, hãy gọi phương thức setMinimumVisibleChange() và truyền một trong các hằng số hiển thị tối thiểu hoặc một giá trị mà bạn cần tính cho 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ể thấy được.

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 ảnh động cho một thuộc tính tuỳ chỉnh không được xác định bằng pixel.

Đang tính giá trị thay đổi tối thiểu có thể nhìn thấy được

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

Thay đổi tối thiểu có thể nhìn thấy = Phạm vi của giá trị thuộc tính tuỳ chỉnh / Phạm vi bắt chước (tính bằng pixel)

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