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

Thử cách 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 cử chỉ hất sử dụng lực ma sát tỷ lệ với vận tốc của vật thể. Sử dụng đối tượng này để tạo ảnh động cho thuộc tính của đối tượng và để kết thúc dần ảnh động. Nó có động lượng ban đầu là chủ yếu nhận được nhờ tốc độ cử chỉ và dần chậm lại. Chiến lược phát hành đĩa đơn ảnh động kết thúc khi tốc độ của ảnh động đủ thấp để ứng dụng không hiển thị thay đổi nào trên màn hình thiết bị.

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

Để tìm hiểu về các chủ đề có 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 của mình 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 dựa trên cử chỉ hất

Lớp FlingAnimation cho phép bạn tạo ảnh động vuốt nhanh cho một đối tượng. Để tạo ảnh động dựa trên cử chỉ hất, hãy tạo một thực thể của lớp FlingAnimation và cung cấp đố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 độ của thuộc tính ảnh động những thay đổi ở đầu ảnh động. Vận tốc bắt đầu mặc định là đượ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.

Bạn có thể dùng một giá trị cố định làm vận tốc ban đầu hoặc dựa vào giá trị đó tốc độ của cử chỉ chạm. Nếu bạn chọn cung cấp giá trị cố định, bạn nên xác định giá trị theo dp mỗi giây, sau đó chuyển đổi giá trị này thành pixel mỗi giây. Việc xác định giá trị tính bằng dp mỗi giây cho phép tốc độ là không phụ thuộc vào mật độ và các kiểu dáng của thiết bị. Để biết thêm thông tin về chuyển đổi vận tốc ban đầu thành pixel trên giây, tham chiếu đến Đang chuyển đổi dp/giây sang pixel/giây ở Ảnh động vào mùa xuân.

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

Lưu ý: Hãy sử dụng GestureDetector.OnGestureListener và Các lớp VelocityTracker để truy xuất và tính toán tốc độ của các cử chỉ chạm, tương ứng.

Đặ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. Công cụ kiểm soát phạm vi này là đặc biệt hữu ích khi bạn tạo ảnh động cho các thuộc tính có hàm nội tại phạm vi, chẳng hạn như alpha (từ 0 đến 1).

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

Để đặt giá trị tối thiểu và tối đa, hãy gọi setMinValue() và phương thức 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 thao tác

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

Lưu ý: Nếu bạn không đặt bước ngăn cách ở đầu ảnh động 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ụ bên dưới minh hoạ thao tác hất theo chiều ngang. Vận tốc thu được từ công cụ theo dõi tốc độ là velocityX và giới hạn cuộn là đặt thành 0 và maxScroll. Độ ma sát được đặt là 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 thay đổi hiển thị tối thiểu

Khi bạn 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 thuộc tính thay đổi tối thiểu về giá trị ảnh động mà người dùng thấy được. Nó xác định ngưỡng hợp lý để kết thúc ảnh động.

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 đối với chế độ xem các thuộc tính như TRANSLATION_X, TRANSLATION_Y TRANSLATION_Z, SCROLL_X và SCROLL_Y.
  • Đối với ảnh động sử dụng chế độ xoay, chẳng hạn như ROTATION, ROTATION_X và ROTATION_Y – mức hiển thị tối thiểu thay đổi là MIN_VISIBLE_CHANGE_ROTATION_DEGREES hay 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 thay đổi hiển thị tối thiểu cho ảnh động, hãy gọi phương thức Phương thức setMinimumVisibleChange() và truyền một trong hai 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 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, tham chiếu đến Tính toán giá trị thay đổi hiển thị tối thiểu .

Kotlin

anim.minimumVisibleChange = DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE

Java

anim.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);

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

Tính toán giá trị thay đổi hiển thị tối thiểu

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

Mức thay đổi hiển thị tối thiểu = Phạm vi của giá trị thuộc tính tùy chỉnh / Phạm vi hiệu ứng động (tính theo 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ị nhỏ nhất giá trị thay đổi nhìn thấy được là 100 / 200 tương đương với 0,5 pixel.