Interpolator — що це таке, криві інтерполяції в Android

Що таке Interpolator?

Interpolator — інтерфейс в Android, який відображає дробове значення ходу анімації (від 0.0 до 1.0) у фактичне значення зі зміненою швидкістю. Якщо анімація триває 300 мілісекунд, система викликає Interpolator для кожного кадру, передаючи поточний прогрес. Interpolator повертає модифіковане значення — наприклад, для AccelerateInterpolator на 50% часу анімація проходить лише ~25% шляху, імітуючи розгін.

Математично Interpolator можна представити як функцію f(t), де t — нормалізований час [0, 1], а f(t) — нормалізоване значення [0, 1] (або ширше для Overshoot/Bounce). Лінійний інтерполятор повертає f(t) = t — об'єкт рухається з постійною швидкістю. AccelerateInterpolator апроксимує f(t) = t², DecelerateInterpolator — f(t) = 1 − (1 − t)², створюючи плавний початок або завершення. В Android Animation Framework Interpolator застосовується як до ValueAnimator, так і до ObjectAnimator та ViewPropertyAnimator, що дає єдиний підхід до керування швидкістю на всіх рівнях.

Вбудовані інтерполятори Android

Android пропонує 9 вбудованих інтерполяторів, кожен зі своєю математичною моделлю. Вибір інтерполятора визначає характер анімації: фізичність (Bounce), пружність (Overshoot) або плавність (AccelerateDecelerate).

Кожен інтерполятор має XML-декларацію в res/interpolator/ та Kotlin-клас в пакеті android.view.animation. AccelerateDecelerateInterpolator — найбільш часто використовуваний: його крива нагадує easing-функцію ease-in-out в CSS. Для Android-додатків з Material Design рекомендується OvershootInterpolator для кнопок floating action button (FAB) — він створює ефект підстрибування при появі.

PathInterpolator: кастомні криві

PathInterpolator — інтерполятор на основі кривої Безьє, заданий через об'єкт Path. Доступний з API 21 (Android 5.0). Дозволяє візуально спроектувати криву швидкості — дизайнер малює криву, розробник переносить її в код через координати контрольних точок. Підтримується тільки кубічна Безьє (дві контрольні точки C1, C2).

Крива PathInterpolator завжди починається в точці (0,0) і закінчується в (1,1). Контрольні точки визначають форму: (x1, y1) — точка на початку, (x2, y2) — в кінці. Значення x повинні бути в діапазоні [0,1] — це гарантує монотонність за часом. Значення y можуть виходити за [0,1] — це створює ефект перельоту (overshoot) або відкату (anticipate). Наприклад, стандартний Material Design використовує криву fast-out-slow-in з контрольними точками (0.4, 0.0, 0.2, 1.0). В IT Sectr ми будуємо кастомні PathInterpolator під кожну дизайн-систему — це гарантує єдність анімацій у всіх екранах.

Створення власного Interpolator

Якщо вбудовані інтерполятори не покривають сценарій, Android дозволяє створити власний через реалізацію інтерфейсу TimeInterpolator. Єдиний метод — getInterpolation(input: Float): Float. Input — поточний прогрес анімації від 0 до 1; output — модифіковане значення. Output може виходити за [0,1] для ефектів перельоту або відскоку.

Типові кастомні інтерполятори: bounce-ефект із затуханням (вихід за 1.0 і повернення), elastic-ефект (синусоїдальне затухання), step-інтерполятор (дискретні стрибки). Кастомні інтерполятори можна також задати через XML за допомогою тега <interpolator> та вказівки класу. В Android Studio є вбудований прев'ю Interpolator в Layout Inspector — він показує реальну криву для вибраного інтерполятора, що спрощує налагодження.

Приклади коду на Kotlin

Приклад 1: AccelerateDecelerateInterpolator з ValueAnimator

Базова анімація масштабу кнопки з використанням симетричного інтерполятора. ValueAnimator змінює значення від 1.0 до 1.2 і назад, а AccelerateDecelerateInterpolator робить рух плавним.

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 створює плавне збільшення на початку та плавне повернення в кінці. Метод REVERSE повторює анімацію у зворотному напрямку, створюючи ефект пульсації. Цей патерн використовується для кнопок дій, привертаючи увагу користувача до ключового елемента інтерфейсу.

Приклад 2: PathInterpolator з кастомною кривою

Кастомна крива з ефектом overshoot — об'єкт перелітає цільову позицію на 10% і повертається. Контрольні точки (0.4, 0.0, 0.6, 1.3) задають прискорений вхід з перельотом.

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 приймає Path з кубічною кривою Безьє. У прикладі елемент перелітає цільову позицію (y=1.3 на 60% часу) і повертається до фіналу. Path повинен бути строго монотонним по осі x, інакше анімація піде назад. Для перевірки використовуйте Layout Inspector в Android Studio.

Приклад 3: Кастомний BounceInterpolator

Власний інтерполятор з ефектом затухаючих відскоків. Реалізація через TimeInterpolator з чотирма циклами затухання.

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 створює 4 затухаючих відскоки з коефіцієнтом демпфірування 0.85. Метод getInterpolation приймає лінійний input і повертає значення з ефектом пружини. В IT Sectr ми використовуємо цей інтерполятор для анімації появи сповіщень — відскок створює відчуття фізичності та привертає увагу.