Interpolator — qué es, curvas de interpolación en Android

¿Qué es Interpolator?

Interpolator — una interfaz en Android que asigna el valor fraccionario del progreso de la animación (de 0.0 a 1.0) a un valor real con velocidad modificada. Si una animación dura 300 milisegundos, el sistema llama a Interpolator para cada fotograma, pasando el progreso actual. El Interpolator devuelve un valor modificado — por ejemplo, con AccelerateInterpolator al 50% del tiempo la animación solo ha recorrido ~25% del camino, simulando aceleración.

Matemáticamente, Interpolator se puede representar como una función f(t), donde t es el tiempo normalizado [0, 1], y f(t) es el valor normalizado [0, 1] (o más amplio para Overshoot/Bounce). LinearInterpolator devuelve f(t) = t — el objeto se mueve a velocidad constante. AccelerateInterpolator aproxima f(t) = t², DecelerateInterpolator aproxima f(t) = 1 − (1 − t)², creando un inicio o final suave. En Android Animation Framework, Interpolator se aplica tanto a ValueAnimator como a ObjectAnimator y ViewPropertyAnimator, proporcionando un enfoque unificado para el control de velocidad en todos los niveles.

Interpoladores incorporados de Android

Android ofrece 9 interpoladores incorporados, cada uno con su propio modelo matemático. La elección del interpolador determina el carácter de la animación: fisicalidad (Bounce), elasticidad (Overshoot) o suavidad (AccelerateDecelerate).

Cada interpolador tiene una declaración XML en res/interpolator/ y una clase Kotlin en el paquete android.view.animation. AccelerateDecelerateInterpolator es el más utilizado: su curva se asemeja a la función de easing ease-in-out en CSS. Para aplicaciones Android con Material Design, se recomienda OvershootInterpolator para botones de acción flotante (FAB) — crea un efecto de "rebote" al aparecer.

PathInterpolator: curvas personalizadas

PathInterpolator — un interpolador basado en una curva Bezier, definido mediante un objeto Path. Disponible desde API 21 (Android 5.0). Permite diseñar visualmente la curva de velocidad — el diseñador dibuja la curva, el desarrollador la traslada al código mediante coordenadas de puntos de control. Solo se admite Bezier cúbica (dos puntos de control C1, C2).

La curva de PathInterpolator siempre comienza en el punto (0,0) y termina en (1,1). Los puntos de control definen la forma: (x1, y1) — el punto inicial, (x2, y2) — el punto final. Los valores de x deben estar en el rango [0,1] — esto garantiza la monotonicidad en el tiempo. Los valores de y pueden salir de [0,1] — esto crea un efecto de sobrepaso (overshoot) o anticipación. Por ejemplo, el Material Design estándar usa la curva fast-out-slow-in con puntos de control (0.4, 0.0, 0.2, 1.0). En IT Sectr construimos PathInterpolators personalizados para cada sistema de diseño — esto garantiza animaciones consistentes en todas las pantallas.

Crear tu propio Interpolator

Si los interpoladores incorporados no cubren tu escenario, Android permite crear uno personalizado implementando la interfaz TimeInterpolator. El único método es getInterpolation(input: Float): Float. Input es el progreso actual de la animación de 0 a 1; output es el valor modificado. Output puede salir de [0,1] para efectos de sobrepaso o rebote.

Interpoladores personalizados típicos: efecto de rebote amortiguado (superando 1.0 y regresando), efecto elástico (amortiguación sinusoidal), interpolador de pasos (saltos discretos). Los interpoladores personalizados también se pueden definir mediante XML usando la etiqueta <interpolator> y especificando la clase. Android Studio tiene una vista previa incorporada de Interpolator en Layout Inspector — muestra la curva real para el interpolador seleccionado, simplificando la depuración.

Ejemplos de código en Kotlin

Ejemplo 1: AccelerateDecelerateInterpolator con ValueAnimator

Animación básica de escala de botón usando un interpolador simétrico. ValueAnimator cambia el valor de 1.0 a 1.2 y viceversa, y AccelerateDecelerateInterpolator hace que el movimiento sea suave.

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 crea una aceleración suave al principio y una desaceleración suave al final. El modo REVERSE repite la animación en dirección opuesta, creando un efecto de pulsación. Este patrón se usa para botones de acción, atrayendo la atención del usuario hacia un elemento clave de la interfaz.

Ejemplo 2: PathInterpolator con curva personalizada

Curva personalizada con efecto de sobrepaso — el objeto sobrepasa la posición objetivo en un 10% y regresa. Los puntos de control (0.4, 0.0, 0.6, 1.3) definen una entrada acelerada con sobrepaso.

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 acepta un Path con una curva Bezier cúbica. En el ejemplo, el elemento "sobrepasa" la posición objetivo (y=1.3 al 60% del tiempo) y regresa a la posición final. El Path debe ser estrictamente monótono en el eje x, de lo contrario la animación irá hacia atrás. Para verificación, usa Layout Inspector en Android Studio.

Ejemplo 3: BounceInterpolator personalizado

Interpolador personalizado con efecto de rebote amortiguado. Implementación mediante TimeInterpolator con cuatro ciclos de amortiguació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 personalizado crea 4 rebotes amortiguados con un coeficiente de amortiguación de 0.85. El método getInterpolation toma una entrada lineal y devuelve un valor con efecto de "resorte". En IT Sectr usamos este interpolador para la animación de aparición de notificaciones — el rebote crea una sensación de fisicalidad y atrae la atención.