Interpolator — nó là gì, các đường cong nội suy trong Android

Interpolator là gì?

Interpolator — một giao diện trong Android ánh xạ giá trị phân số của tiến trình hoạt ảnh (từ 0.0 đến 1.0) thành giá trị thực tế với tốc độ đã được sửa đổi. Nếu một hoạt ảnh kéo dài 300 mili giây, hệ thống sẽ gọi Interpolator cho mỗi khung hình, truyền tiến trình hiện tại. Interpolator trả về giá trị đã sửa đổi — ví dụ: với AccelerateInterpolator tại 50% thời gian, hoạt ảnh chỉ đi được ~25% quãng đường, mô phỏng sự tăng tốc.

Về mặt toán học, Interpolator có thể được biểu diễn dưới dạng hàm f(t), trong đó t là thời gian chuẩn hóa [0, 1] và f(t) là giá trị chuẩn hóa [0, 1] (hoặc rộng hơn cho Overshoot/Bounce). LinearInterpolator trả về f(t) = t — vật thể di chuyển với tốc độ không đổi. AccelerateInterpolator xấp xỉ f(t) = t², DecelerateInterpolator xấp xỉ f(t) = 1 − (1 − t)², tạo ra sự bắt đầu hoặc kết thúc mượt mà. Trong Android Animation Framework, Interpolator được áp dụng cho cả ValueAnimator, ObjectAnimator và ViewPropertyAnimator, cung cấp một cách tiếp cận thống nhất để kiểm soát tốc độ ở mọi cấp độ.

Các bộ nội suy tích hợp của Android

Android cung cấp 9 bộ nội suy tích hợp, mỗi bộ có mô hình toán học riêng. Việc lựa chọn bộ nội suy quyết định tính chất của hoạt ảnh: tính vật lý (Bounce), tính đàn hồi (Overshoot) hoặc độ mượt (AccelerateDecelerate).

Mỗi bộ nội suy có khai báo XML trong res/interpolator/ và một lớp Kotlin trong gói android.view.animation. AccelerateDecelerateInterpolator được sử dụng nhiều nhất: đường cong của nó giống với hàm easing ease-in-out trong CSS. Đối với các ứng dụng Android với Material Design, OvershootInterpolator được khuyến nghị cho các nút hành động nổi (FAB) — nó tạo hiệu ứng nảy khi xuất hiện.

PathInterpolator: đường cong tùy chỉnh

PathInterpolator — một bộ nội suy dựa trên đường cong Bezier, được xác định qua đối tượng Path. Có sẵn từ API 21 (Android 5.0). Cho phép thiết kế trực quan đường cong tốc độ — nhà thiết kế vẽ đường cong, nhà phát triển chuyển nó thành mã thông qua tọa độ điểm điều khiển. Chỉ hỗ trợ Bezier bậc ba (hai điểm điều khiển C1, C2).

Đường cong PathInterpolator luôn bắt đầu tại điểm (0,0) và kết thúc tại (1,1). Các điểm điều khiển xác định hình dạng: (x1, y1) — điểm bắt đầu, (x2, y2) — điểm kết thúc. Giá trị x phải nằm trong khoảng [0,1] — điều này đảm bảo tính đơn điệu theo thời gian. Giá trị y có thể vượt ra ngoài [0,1] — điều này tạo hiệu ứng vượt quá hoặc dự đoán. Ví dụ, Material Design tiêu chuẩn sử dụng đường cong fast-out-slow-in với các điểm điều khiển (0.4, 0.0, 0.2, 1.0). Tại IT Sectr, chúng tôi xây dựng PathInterpolators tùy chỉnh cho mỗi hệ thống thiết kế — điều này đảm bảo hoạt ảnh nhất quán trên tất cả các màn hình.

Tạo Interpolator của riêng bạn

Nếu các bộ nội suy tích hợp không bao phủ kịch bản của bạn, Android cho phép tạo bộ nội suy tùy chỉnh bằng cách triển khai giao diện TimeInterpolator. Phương thức duy nhất là getInterpolation(input: Float): Float. Input là tiến trình hoạt ảnh hiện tại từ 0 đến 1; output là giá trị đã sửa đổi. Output có thể vượt ra ngoài [0,1] cho hiệu ứng vượt quá hoặc nảy.

Các bộ nội suy tùy chỉnh điển hình: hiệu ứng nảy tắt dần (vượt quá 1.0 và quay lại), hiệu ứng đàn hồi (tắt dần hình sin), bộ nội suy bước (nhảy rời rạc). Các bộ nội suy tùy chỉnh cũng có thể được xác định qua XML bằng thẻ <interpolator> và chỉ định lớp. Android Studio có tính năng xem trước Interpolator tích hợp trong Layout Inspector — nó hiển thị đường cong thực tế cho bộ nội suy đã chọn, giúp việc gỡ lỗi đơn giản hơn.

Ví dụ mã bằng Kotlin

Ví dụ 1: AccelerateDecelerateInterpolator với ValueAnimator

Hoạt ảnh tỷ lệ nút cơ bản sử dụng bộ nội suy đối xứng. ValueAnimator thay đổi giá trị từ 1.0 lên 1.2 và quay lại, và AccelerateDecelerateInterpolator làm cho chuyển động mượt mà.

import android.animation.ValueAnimator
import android.view.animation.AccelerateDecelerateInterpolator
import android.view.View

fun View.pulseAnimation() {
    ValueAnimator.ofFloat(1.0f, 1.2f).apply {
        duration = 300
        interpolator = AccelerateDecelerateInterpolator()
        repeatCount = 1
        repeatMode = ValueAnimator.REVERSE

        addUpdateListener { animator ->
            val scale = animator.animatedValue as Float
            this@pulseAnimation.scaleX = scale
            this@pulseAnimation.scaleY = scale
        }

        start()
    }
}

AccelerateDecelerateInterpolator tạo ra sự tăng tốc mượt mà ở đầu và giảm tốc mượt mà ở cuối. Chế độ REVERSE lặp lại hoạt ảnh theo hướng ngược lại, tạo hiệu ứng xung động. Mẫu này được sử dụng cho các nút hành động, thu hút sự chú ý của người dùng đến một phần tử giao diện chính.

Ví dụ 2: PathInterpolator với đường cong tùy chỉnh

Đường cong tùy chỉnh với hiệu ứng vượt quá — vật thể vượt quá vị trí mục tiêu 10% và quay lại. Các điểm điều khiển (0.4, 0.0, 0.6, 1.3) xác định lối vào tăng tốc với vượt quá.

import android.animation.ObjectAnimator
import android.graphics.Path
import android.view.animation.PathInterpolator
import android.view.View

fun View.slideWithOvershoot() {
    val path = Path().apply {
        cubicTo(0.4f, 0.0f, 0.6f, 1.3f, 1.0f, 1.0f)
    }
    val interpolator = PathInterpolator(path)

    ObjectAnimator.ofFloat(this, "translationY", 200f, 0f).apply {
        duration = 400
        interpolator = interpolator
        start()
    }
}

PathInterpolator chấp nhận một Path với đường cong Bezier bậc ba. Trong ví dụ, phần tử vượt quá vị trí mục tiêu (y=1.3 tại 60% thời gian) và quay lại vị trí cuối cùng. Path phải đơn điệu chặt chẽ theo trục x, nếu không hoạt ảnh sẽ chạy ngược lại. Để xác minh, hãy sử dụng Layout Inspector trong Android Studio.

Ví dụ 3: BounceInterpolator tùy chỉnh

Bộ nội suy tùy chỉnh với hiệu ứng nảy tắt dần. Triển khai qua TimeInterpolator với bốn chu kỳ tắt dần.

import android.animation.TimeInterpolator

class DampedBounceInterpolator : TimeInterpolator {

    private val cycles = 4
    private val damping = 0.85f

    override fun getInterpolation(input: Float): Float {
        val t = input * cycles
        val decay = Math.pow(damping.toDouble(), cycles.toDouble()).toFloat()
        val peak = t - (Math.floor(t.toDouble())).toFloat()
        val bounce = Math.sin(peak * Math.PI).toFloat()
        return 1f - bounce * decay * (1f - input)
    }
}

DampedBounceInterpolator tùy chỉnh tạo ra 4 lần nảy tắt dần với hệ số tắt dần 0,85. Phương thức getInterpolation nhận đầu vào tuyến tính và trả về giá trị với hiệu ứng lò xo. Tại IT Sectr, chúng tôi sử dụng bộ nội suy này cho hoạt ảnh xuất hiện thông báo — sự nảy tạo ra cảm giác vật lý và thu hút sự chú ý.