Animation dans le développement mobile : qu'est-ce que c'est, quels types et comment l'utiliser

Animation sous Android : Property Animation et View Animation

Android fournit deux systèmes d'animation principaux : View Animation (hérité) et Property Animation (moderne). View Animation (ou Tween Animation) fonctionne uniquement avec la représentation visuelle — elle modifie l'affichage de la vue mais pas ses propriétés réelles (par exemple, les coordonnées de clic restent en place). Property Animation, introduite dans Android 3.0, modifie les propriétés réelles de l'objet via Animator — ValueAnimator, ObjectAnimator ou AnimatorSet.

ObjectAnimator et ValueAnimator

ObjectAnimator est la classe la plus populaire de Property Animation. Elle anime une propriété spécifique d'un objet (par exemple, translationX, alpha, scaleY) pendant une durée déterminée avec un Interpolator donné.

ObjectAnimator.ofFloat(myView, "translationX", 0f, 300f).apply {
    duration = 500
    interpolator = FastOutSlowInInterpolator()
    startDelay = 200
}.start()

ValueAnimator n'est pas lié à un objet spécifique — il génère des valeurs qui peuvent être utilisées pour n'importe quelle propriété ou logique personnalisée.

View Animation et animations XML

View Animation est décrite dans des fichiers XML res/anim/. Quatre types sont pris en charge : scale, translate, rotate, alpha. L'inconvénient est que l'animation ne modifie pas les paramètres réels de la vue. Pour les effets simples (clignotement, rotation), View Animation est toujours applicable, mais pour les nouveaux projets, Property Animation est recommandée.

Animation dans Jetpack Compose

Jetpack Compose propose une API d'animation moderne : animateAsState, Animatable, AnimatedVisibility et AnimatedContent. L'animation dans Compose est réactive : lorsque l'état change, l'animation démarre automatiquement.

var expanded = remember { mutableStateOf(false) }
val size = animateAsState(
    if (expanded) 200f else 50f
)
Box(
    modifier = Modifier
        .size(size.value, size.value)
        .clickable { expanded = !expanded }
        .background(Color.Blue)
)

Animation sous iOS : Core Animation et UIView.animate

iOS offre une puissante pile d'animations basée sur Core Animation — un framework de bas niveau qui travaille avec CALayer. UIKit se construit au-dessus de Core Animation avec les méthodes pratiques UIView.animate et UIViewPropertyAnimator.

UIView.animate

UIView.animate est la façon la plus simple d'animer sous iOS. Permet d'animer le frame, l'alpha, le transform, le backgroundColor et d'autres propriétés de UIView.

UIView.animate(
    withDuration: 0.5,
    delay: 0.2,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1.0,
    options: [.curveEaseInOut]
) {
    myView.frame.origin.x += 300
    myView.alpha = 0.5
}

UIKit Dynamics

UIKit Dynamics — un framework pour l'animation physique : gravité, collisions, ressorts, forces d'attraction. Permet de créer un comportement réaliste des objets sans calcul manuel de la physique. Utilisé pour les transitions personnalisées, les menus animés et les éléments de jeu.

CAAnimation et Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — une API de bas niveau pour l'animation de CALayer. Prend en charge les transformations 3D, l'animation de chemin (keyframe), le masquage et la composition. SwiftUI utilise Core Animation en coulisse via les modificateurs animation et withAnimation.

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = CGFloat.pi * 2
animation.duration = 1.0
animation.repeatCount = .infinity
myLayer.add(animation, forKey: "rotation")

Pour la majorité des projets iOS, SwiftUI avec son animation intégrée est utilisé. Par exemple, withAnimation encapsule les changements d'état dans un contexte animé.

Animation vectorielle : Lottie et Rive

Les animations complexes (personnages, transitions, chargeurs) sont difficiles à implémenter en code. Lottie et Rive résolvent ce problème en permettant aux designers de créer des animations dans des éditeurs visuels et aux développeurs de les intégrer dans l'application comme un composant prêt à l'emploi.

Lottie

Lottie — une bibliothèque d'Airbnb (maintenant LottieFiles) qui rend les animations d'Adobe After Effects exportées au format JSON. Prise en charge sur Android, iOS, Flutter, React Native et Web. Les animations Lottie sont vectorielles, se redimensionnent sans perte de qualité et peuvent être personnalisées par programmation (vitesse, progression, couleurs).

// Android
import com.airbnb.lottie.LottieAnimationView
val lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
lottieView.setAnimation(R.raw.loading_animation)
lottieView.playAnimation()

Rive

Rive (anciennement 2Dimensions) — un outil plus avancé pour l'animation vectorielle. Contrairement à Lottie, Rive prend en charge l'animation interactive : états, déclencheurs, transitions. L'animation est créée dans Rive Editor et contrôlée dans l'application via une State Machine. Rive convient aux interfaces de jeu, aux icônes animées et aux transitions complexes avec retour d'information.

Chez IT Sectr, nous utilisons Lottie pour les animations décoratives (chargeurs, opérations réussies, états vides) et Rive pour les éléments interactifs des écrans d'onboarding. Cela réduit le temps de développement des animations de 60% par rapport à l'implémentation manuelle avec UIKit ou Canvas.

Shared Element Transition et Hero Animation

Shared Element Transition — une animation où un élément (image, texte, carte) se déplace et se transforme en douceur lors de la transition entre les écrans. Cela crée l'illusion de continuité : l'utilisateur ne "va" pas vers un nouvel écran, mais "plonge" dans l'élément.

Android Shared Element Transition

Sous Android, la transition est implémentée via ActivityOptionsCompat et les attributs transitionName. FragmentTransaction prend en charge addSharedElement pour les transitions au sein d'une Activity. Compose utilise SharedTransitionLayout avec SharedContentState.

iOS Hero Transition

iOS n'a pas de Hero Transition intégré, mais la bibliothèque Hero (de Luke Zhao) implémente ce modèle sur UIKit. Il suffit d'assigner un identifiant aux éléments des deux écrans — Hero créera automatiquement une transition fluide. Dans SwiftUI, l'animation de transition est intégrée via NavigationStack et matchedGeometryEffect.

Flutter Hero

Flutter dispose d'un widget Hero intégré avec un paramètre tag. Lorsque deux pages contiennent Hero avec le même tag, Flutter anime automatiquement la transition entre elles. C'est l'un des moyens les plus simples d'implémenter une animation complexe dans une application mobile.

Hero(
    tag: 'profile_avatar',
    child: CircleAvatar(
        backgroundImage: AssetImage('avatar.jpg'),
        radius: 50,
    ),
)

Spring Animation, Interpolator et Easing

Pour qu'une animation paraisse naturelle, on utilise des courbes de vitesse — Interpolator sous Android et Easing sous iOS. Elles déterminent comment la vitesse de l'animation change du début à la fin.

Interpolateurs Android

Android prend en charge plusieurs Interpolators intégrés : LinearInterpolator (uniforme), AccelerateDecelerateInterpolator (lent-rapide-lent), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (avec dépassement) et BounceInterpolator (avec rebond). Un Interpolator personnalisé peut être créé via XML ou la classe TimeInterpolator.

Spring Animation

Spring Animation (animation à ressort) modélise la physique du ressort avec les paramètres d'amortissement (damping) et de raideur (stiffness). Amortissement 0 — oscillations infinies, 1 — pas d'oscillations. La raideur détermine la vitesse de retour. Spring Animation est disponible sous iOS (UIViewPropertyAnimator avec UISpringTimingParameters), Android (SpringAnimation de physics2) et SwiftUI (spring()).

La documentation Spring Animation sous Android contient des exemples détaillés de configuration.

Animation chronologique

Timeline (chronologie) — une approche où l'animation est divisée en images dans le temps. Utilisée pour les séquences complexes où AnimationSet ou l'animation de groupe ne sont pas assez flexibles. Android prend en charge AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval dans AnimationController.