Interpolator — o que é, curvas de interpolação no Android

O que é Interpolator?

Interpolator — uma interface no Android que mapeia o valor fracionário do progresso da animação (de 0.0 a 1.0) para um valor real com velocidade modificada. Se uma animação dura 300 milissegundos, o sistema chama o Interpolator para cada quadro, passando o progresso atual. O Interpolator retorna um valor modificado — por exemplo, com AccelerateInterpolator a 50% do tempo a animação percorreu apenas ~25% do caminho, simulando aceleração.

Matematicamente, o Interpolator pode ser representado como uma função f(t), onde t é o tempo normalizado [0, 1], e f(t) é o valor normalizado [0, 1] (ou mais amplo para Overshoot/Bounce). LinearInterpolator retorna f(t) = t — o objeto se move a velocidade constante. AccelerateInterpolator aproxima f(t) = t², DecelerateInterpolator aproxima f(t) = 1 − (1 − t)², criando um início ou fim suave. No Android Animation Framework, o Interpolator é aplicado tanto ao ValueAnimator quanto ao ObjectAnimator e ViewPropertyAnimator, fornecendo uma abordagem unificada para controle de velocidade em todos os níveis.

Interpoladores incorporados do Android

O Android oferece 9 interpoladores incorporados, cada um com seu próprio modelo matemático. A escolha do interpolador determina o caráter da animação: fisicalidade (Bounce), elasticidade (Overshoot) ou suavidade (AccelerateDecelerate).

Cada interpolador tem uma declaração XML em res/interpolator/ e uma classe Kotlin no pacote android.view.animation. AccelerateDecelerateInterpolator é o mais usado: sua curva se assemelha à função de easing ease-in-out em CSS. Para aplicativos Android com Material Design, recomenda-se OvershootInterpolator para botões de ação flutuante (FAB) — ele cria um efeito de "ressalto" ao aparecer.

PathInterpolator: curvas personalizadas

PathInterpolator — um interpolador baseado em uma curva Bezier, definido através de um objeto Path. Disponível desde a API 21 (Android 5.0). Permite projetar visualmente a curva de velocidade — o designer desenha a curva, o desenvolvedor a transfere para o código através de coordenadas de pontos de controle. Apenas Bezier cúbica é suportada (dois pontos de controle C1, C2).

A curva do PathInterpolator sempre começa no ponto (0,0) e termina em (1,1). Os pontos de controle definem a forma: (x1, y1) — o ponto inicial, (x2, y2) — o ponto final. Os valores de x devem estar no intervalo [0,1] — isso garante monotonicidade ao longo do tempo. Os valores de y podem sair de [0,1] — isso cria um efeito de ultrapassagem ou antecipação. Por exemplo, o Material Design padrão usa a curva fast-out-slow-in com pontos de controle (0.4, 0.0, 0.2, 1.0). Na IT Sectr construímos PathInterpolators personalizados para cada sistema de design — isso garante animações consistentes em todas as telas.

Criando seu próprio Interpolator

Se os interpoladores incorporados não cobrirem seu cenário, o Android permite criar um personalizado implementando a interface TimeInterpolator. O único método é getInterpolation(input: Float): Float. Input é o progresso atual da animação de 0 a 1; output é o valor modificado. Output pode sair de [0,1] para efeitos de ultrapassagem ou ressalto.

Interpoladores personalizados típicos: efeito de ressalto amortecido (indo acima de 1.0 e retornando), efeito elástico (amortecimento senoidal), interpolador de passo (saltos discretos). Interpoladores personalizados também podem ser definidos via XML usando a tag <interpolator> e especificando a classe. O Android Studio tem uma prévia incorporada do Interpolator no Layout Inspector — ela mostra a curva real para o interpolador selecionado, simplificando a depuração.

Exemplos de código em Kotlin

Exemplo 1: AccelerateDecelerateInterpolator com ValueAnimator

Animação básica de escala de botão usando um interpolador simétrico. ValueAnimator altera o valor de 1.0 para 1.2 e vice-versa, e AccelerateDecelerateInterpolator torna o movimento 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 cria aceleração suave no início e desaceleração suave no final. O modo REVERSE repete a animação na direção oposta, criando um efeito de pulsação. Este padrão é usado para botões de ação, atraindo a atenção do usuário para um elemento-chave da interface.

Exemplo 2: PathInterpolator com curva personalizada

Curva personalizada com efeito de ultrapassagem — o objeto ultrapassa a posição alvo em 10% e retorna. Os pontos de controle (0.4, 0.0, 0.6, 1.3) definem entrada acelerada com ultrapassagem.

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 aceita um Path com uma curva Bezier cúbica. No exemplo, o elemento "ultrapassa" a posição alvo (y=1.3 a 60% do tempo) e retorna à posição final. O Path deve ser estritamente monótono ao longo do eixo x, caso contrário a animação irá para trás. Para verificação, use Layout Inspector no Android Studio.

Exemplo 3: BounceInterpolator personalizado

Interpolador personalizado com efeito de ressalto amortecido. Implementação via TimeInterpolator com quatro ciclos de amortecimento.

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)
    }
}

O DampedBounceInterpolator personalizado cria 4 ressaltos amortecidos com um coeficiente de amortecimento de 0.85. O método getInterpolation recebe uma entrada linear e retorna um valor com efeito de "mola". Na IT Sectr usamos este interpolador para animação de aparecimento de notificações — o ressalto cria uma sensação de fisicalidade e atrai a atenção.