Interpolator — qu'est-ce que c'est, courbes d'interpolation dans Android

Qu'est-ce qu'Interpolator ?

Interpolator — une interface dans Android qui mappe la valeur fractionnaire de la progression de l'animation (de 0.0 à 1.0) à une valeur réelle avec une vitesse modifiée. Si une animation dure 300 millisecondes, le système appelle Interpolator pour chaque trame, en transmettant la progression actuelle. Interpolator renvoie une valeur modifiée — par exemple, avec AccelerateInterpolator à 50 % du temps, l'animation n'a parcouru qu'environ 25 % du chemin, simulant une accélération.

Mathématiquement, Interpolator peut être représenté comme une fonction f(t), où t est le temps normalisé [0, 1], et f(t) est la valeur normalisée [0, 1] (ou plus large pour Overshoot/Bounce). LinearInterpolator renvoie f(t) = t — l'objet se déplace à vitesse constante. AccelerateInterpolator approxime f(t) = t², DecelerateInterpolator approxime f(t) = 1 − (1 − t)², créant un début ou une fin en douceur. Dans Android Animation Framework, Interpolator est appliqué à la fois à ValueAnimator, ObjectAnimator et ViewPropertyAnimator, offrant une approche unifiée du contrôle de la vitesse à tous les niveaux.

Interpolateurs intégrés d'Android

Android propose 9 interpolateurs intégrés, chacun avec son propre modèle mathématique. Le choix de l'interpolateur détermine le caractère de l'animation : physicalité (Bounce), élasticité (Overshoot) ou fluidité (AccelerateDecelerate).

Chaque interpolateur a une déclaration XML dans res/interpolator/ et une classe Kotlin dans le package android.view.animation. AccelerateDecelerateInterpolator est le plus utilisé : sa courbe ressemble à la fonction d'easing ease-in-out en CSS. Pour les applications Android avec Material Design, OvershootInterpolator est recommandé pour les boutons d'action flottante (FAB) — il crée un effet de rebond lors de l'apparition.

PathInterpolator : courbes personnalisées

PathInterpolator — un interpolateur basé sur une courbe de Bézier, défini via un objet Path. Disponible depuis l'API 21 (Android 5.0). Permet de concevoir visuellement la courbe de vitesse — le concepteur dessine la courbe, le développeur la transfère dans le code via les coordonnées des points de contrôle. Seule la Bézier cubique est prise en charge (deux points de contrôle C1, C2).

La courbe de PathInterpolator commence toujours au point (0,0) et se termine en (1,1). Les points de contrôle définissent la forme : (x1, y1) — le point de départ, (x2, y2) — le point d'arrivée. Les valeurs x doivent être dans l'intervalle [0,1] — cela garantit la monotonie dans le temps. Les valeurs y peuvent sortir de [0,1] — cela crée un effet de dépassement ou d'anticipation. Par exemple, le Material Design standard utilise la courbe fast-out-slow-in avec les points de contrôle (0.4, 0.0, 0.2, 1.0). Chez IT Sectr, nous construisons des PathInterpolators personnalisés pour chaque système de conception — cela garantit des animations cohérentes sur tous les écrans.

Créer votre propre Interpolator

Si les interpolateurs intégrés ne couvrent pas votre scénario, Android permet d'en créer un personnalisé en implémentant l'interface TimeInterpolator. La seule méthode est getInterpolation(input: Float): Float. Input est la progression actuelle de l'animation de 0 à 1 ; output est la valeur modifiée. Output peut sortir de [0,1] pour les effets de dépassement ou de rebond.

Interpolateurs personnalisés typiques : effet de rebond amorti (dépassement de 1.0 et retour), effet élastique (amortissement sinusoïdal), interpolateur à pas (sauts discrets). Les interpolateurs personnalisés peuvent également être définis via XML à l'aide de la balise <interpolator> et en spécifiant la classe. Android Studio dispose d'un aperçu intégré d'Interpolator dans Layout Inspector — il montre la courbe réelle pour l'interpolateur sélectionné, simplifiant ainsi le débogage.

Exemples de code en Kotlin

Exemple 1 : AccelerateDecelerateInterpolator avec ValueAnimator

Animation de base de l'échelle d'un bouton utilisant un interpolateur symétrique. ValueAnimator change la valeur de 1.0 à 1.2 et inversement, et AccelerateDecelerateInterpolator rend le mouvement fluide.

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 crée une accélération douce au début et une décélération douce à la fin. Le mode REVERSE répète l'animation dans la direction opposée, créant un effet de pulsation. Ce motif est utilisé pour les boutons d'action, attirant l'attention de l'utilisateur sur un élément clé de l'interface.

Exemple 2 : PathInterpolator avec courbe personnalisée

Courbe personnalisée avec effet de dépassement — l'objet dépasse la position cible de 10 % et revient. Les points de contrôle (0.4, 0.0, 0.6, 1.3) définissent une entrée accélérée avec dépassement.

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 accepte un Path avec une courbe de Bézier cubique. Dans l'exemple, l'élément « dépasse » la position cible (y=1.3 à 60 % du temps) et revient à la position finale. Le Path doit être strictement monotone le long de l'axe x, sinon l'animation ira en arrière. Pour vérification, utilisez Layout Inspector dans Android Studio.

Exemple 3 : BounceInterpolator personnalisé

Interpolateur personnalisé avec effet de rebond amorti. Implémentation via TimeInterpolator avec quatre cycles d'amortissement.

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

L'interpolateur personnalisé DampedBounceInterpolator crée 4 rebonds amortis avec un coefficient d'amortissement de 0,85. La méthode getInterpolation prend une entrée linéaire et renvoie une valeur avec un effet de ressort. Chez IT Sectr, nous utilisons cet interpolateur pour l'animation d'apparition des notifications — le rebond crée une sensation de physicalité et attire l'attention.