Transition: bases, animation des transitions dans les applications mobiles

Qu'est-ce que Transition ?

Transition est une animation qui se produit lors du remplacement d'un état d'interface visuelle par un autre. Contrairement à l'Animation de Propriété (animation d'une propriété d'un seul objet), Transition gère un ensemble complet de changements : apparition/disparition d'éléments, modification de leur position, taille et propriétés au sein d'une seule transition. Transition résout le problème du changement fluide de contenu afin que l'utilisateur comprenne ce qui s'est déplacé et où.

Sur les plateformes mobiles, Transition est utilisée dans trois scénarios principaux : navigation entre écrans (push, pop, modal present), changement de fragments (FragmentTransaction Android) et changement d'état dans un écran (expansion de carte, changement d'onglet). Chaque scénario nécessite sa propre approche : transitions de navigation — UIViewControllerAnimatedTransitioning sous iOS ou ActivityOptions sous Android, transitions intra-écran — Transition Framework ou UIView.transition.

Selon l'Apple HIG (2026), la durée d'une transition standard ne doit pas dépasser 400–500 ms — les animations plus longues sont perçues comme un retard. Material Design recommande 300–350 ms pour les transitions mobiles. Pour les grands éléments (cartes, images), le temps peut augmenter jusqu'à 500–600 ms sans perte de performance perçue.

Types d'animations de transition

Les types de transitions sont divisés en plusieurs catégories selon le contenu qui change et comment. Types de base : cross-fade (fondu) — disparition fluide d'un contenu et apparition d'un autre ; slide (glissement) — un écran sort, un autre entre ; scale/zoom (échelle) — un élément s'agrandit pour ouvrir un écran de détail. Les transitions combinées mélangent plusieurs effets.

Règles Material Design : utilisez un seul type de transition dans une application pour créer un langage visuel unifié. Recommandé : slide pour la navigation entre écrans de même niveau (maître → détail), cross-fade pour le changement de contenu dans un écran (onglets, changement de vue), scale/zoom pour la transition d'une carte vers un écran de détail (carte produit → description).

Transitions sous iOS (Swift)

Sous iOS, UIView.transition est le moyen le plus simple d'animer des changements de contenu au sein d'une seule View. Il prend en charge cross-dissolve, curl-up, curl-down, flip-from-left, flip-from-right. Pour les transitions de navigation entre UIViewController, utilisez UINavigationControllerDelegate avec UIViewControllerAnimatedTransitioning — cela donne un contrôle total sur l'animation push/pop.

import UIKit

// UIView.transition : changement d'image avec cross-dissolve
UIView.transition(with: imageView,
    duration: 0.4,
    options: [.transitionCrossDissolve, .curveEaseInOut]
) {
    self.imageView.image = UIImage(named: "new_image")
} completion: { _ in
    print("Transition completed")
}

// UIView.transition : échange de deux vues
UIView.transition(from: firstView, to: secondView,
    duration: 0.5,
    options: [.transitionFlipFromRight, .showHideTransitionViews]
) { _ in
    // firstView masquée, secondView affichée
}

// CATransition pour couche (sans Auto Layout)
let transition = CATransition()
transition.type = .push
transition.subtype = .fromRight
transition.duration = 0.35
transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
view.layer.add(transition, forKey: "pushTransition")

UIViewPropertyAnimator est une alternative moderne pour les transitions personnalisées sous iOS 10+. Contrairement à UIView.transition, PropertyAnimator prend en charge la pause, l'annulation et l'animation inverse, ce qui est important pour les transitions interactives (glisser pour revenir en arrière). Pour l'animation entre UIViewControllers, utilisez UIPercentDrivenInteractiveTransition avec PropertyAnimator — c'est le modèle standard pour la navigation interactive.

Transitions sous Android (Kotlin)

Sous Android, FragmentTransaction avec setCustomAnimations est le principal moyen d'animer les transitions entre fragments. Paramètres : enter (animation d'entrée du nouveau fragment), exit (animation de sortie de l'ancien fragment), popEnter et popExit — pour la navigation arrière. FragmentTransaction prend en charge les ressources d'animation (R.anim) et Transition Framework (R.transition).

import androidx.fragment.app.FragmentTransaction
import androidx.transition.TransitionInflater

// FragmentTransaction avec animations de ressources
supportFragmentManager.beginTransaction()
    .setCustomAnimations(
        R.anim.slide_in_right,  // enter
        R.anim.slide_out_left,  // exit
        R.anim.slide_in_left,   // popEnter
        R.anim.slide_out_right  // popExit
    )
    .replace(R.id.container, DetailFragment())
    .addToBackStack(null)
    .commit()

// FragmentTransaction avec Transition Framework
val detailFragment = DetailFragment()
detailFragment.enterTransition = TransitionInflater.from(this)
    .inflateTransition(R.transition.slide_right)
detailFragment.exitTransition = TransitionInflater.from(this)
    .inflateTransition(R.transition.fade_out)

supportFragmentManager.beginTransaction()
    .replace(R.id.container, detailFragment)
    .addToBackStack(null)
    .commit()

// ActivityOptions : animation au démarrage d'une Activity
val options = ActivityOptions.makeScaleUpAnimation(
    view, 0, 0, view.width, view.height
).toBundle()
startActivity(intent, options)

Bonnes pratiques Android : Slide() — pour le remplacement de fragment dans la navigation (enter = Slide(Gravity.END), exit = Slide(Gravity.START)). Fade() — pour afficher/masquer les superpositions et dialogues. Explode() — pour les transitions d'accent (suppression d'un élément d'une liste). Pour les anciens appareils (API < 21), utilisez les ressources R.anim comme solution de repli. Transition Framework ne prend pas en charge SurfaceView, TextureView, GLSurfaceView — pour la vidéo et la caméra, utilisez uniquement les animations R.anim.

Transitions personnalisées UIViewController sous iOS

UIViewControllerAnimatedTransitioning est un protocole iOS pour créer des animations de transition entièrement personnalisées entre contrôleurs. Il donne accès à la vue conteneur (transitionContext.containerView), à la vue source et à la vue cible. Combiné avec UIPercentDrivenInteractiveTransition, cette approche permet de créer des transitions interactives avec défilement tactile.

import UIKit

"> Animateur de transition personnalisé
class ScaleTransitionAnimator: NSObject, UIViewControllerAnimatedTransitioning {
    let isPresenting: Bool

    init(presenting: Bool) { self.isPresenting = presenting }

    func transitionDuration(using ctx: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.4
    }

    func animateTransition(using ctx: UIViewControllerContextTransitioning) {
        guard let toView = ctx.view(forKey: .to),
              let fromView = ctx.view(forKey: .from)
        else { return }

        let container = ctx.containerView
        let initialScale: CGAffineTransform = CGAffineTransform(scaleX: 0.8, y: 0.8)
        let finalFrame = ctx.finalFrame(for: toView)

        if isPresenting {
            toView.transform = initialScale
            toView.alpha = 0
            toView.frame = finalFrame
            container.addSubview(toView)
        }

        UIView.animate(withDuration: transitionDuration(using: ctx),
                       delay: 0,
                       usingSpringWithDamping: 0.7,
                       initialSpringVelocity: 0.3) {
            if self.isPresenting {
                toView.transform = .identity
                toView.alpha = 1
                fromView.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
                fromView.alpha = 0
            } else {
                fromView.transform = initialScale
                fromView.alpha = 0
            }
        } completion: { _ in
            fromView.transform = .identity
            ctx.completeTransition(!ctx.transitionWasCancelled)
        }
    }
}

// Application dans UINavigationControllerDelegate
extension MainViewController: UINavigationControllerDelegate {
    func navigationController(
        _ nc: UINavigationController,
        animationControllerFor operation: UINavigationController.Operation,
        from: UIViewController, to: UIViewController
    ) -> UIViewControllerAnimatedTransitioning? {
        return ScaleTransitionAnimator(presenting: operation == .push)
    }
}

Transitions interactives : ajoutez un UIPanGestureRecognizer à l'écran source. Lorsque le geste est déclenché, créez un UIPercentDrivenInteractiveTransition et appelez update(CGFloat(percent)). Pour annuler lorsque le seuil (généralement 30 %) n'est pas atteint, appelez cancel(). Ce modèle est utilisé par défaut dans UINavigationController pour les gestes pop et dans UIScrollView avec pagingEnabled. Pour les gestes personnalisés, implémentez UIViewControllerInteractiveTransitioning.

Transition Framework sous Android : scène à scène

Transition Framework (android.transition) est un système d'animation déclaratif qui anime automatiquement les changements entre deux scènes (Scene). Une scène est un ensemble de Views avec un état spécifique. Lors du passage de la scène A à la scène B, Transition Framework analyse la différence et anime : changement de position (ChangeBounds), changement de taille (ChangeClipBounds, ChangeTransform), apparition (Fade) et disparition (Fade).

import android.transition.Scene
import android.transition.TransitionManager
import android.transition.TransitionSet
import android.transition.AutoTransition
import android.transition.ChangeBounds
import android.transition.Fade

// TransitionSet : combinaison de ChangeBounds + Fade
val transition = TransitionSet().apply {
    ordering = TransitionSet.ORDERING_TOGETHER
    addTransition(ChangeBounds())
    addTransition(Fade(Fade.IN))
    duration = 400L
    interpolator = FastOutSlowInInterpolator()
}

// Transition entre scènes dans un ViewGroup
val sceneRoot = findViewById<ViewGroup>(R.id.scene_root)
val scene1 = Scene.getSceneForLayout(sceneRoot, R.layout.scene_initial)
val scene2 = Scene.getSceneForLayout(sceneRoot, R.layout.scene_expanded)

"> AutoTransition sans configuration manuelle
TransitionManager.go(scene2, AutoTransition().apply {
    duration = 350L
})

// TransitionManager.beginDelayedTransition — sans scènes
TransitionManager.beginDelayedTransition(sceneRoot, ChangeBounds())
itemView.layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT
itemView.requestLayout() "> La modification du layout est animée automatiquement

ChangeBounds est la transition la plus utilisée sous Android, elle anime les changements de position et de taille de View. ChangeTransform anime la rotation et l'échelle. ChangeImageTransform — pour l'animation ImageView (centerCrop → fitCenter). Pour les transitions complexes avec changements de structure hiérarchique, utilisez TransitionSet avec ordering = ORDERING_SEQUENTIAL (les animations s'exécutent en séquence, pas en parallèle). Selon la documentation Android Developers (2026), Transition Framework prend en charge toutes les Views standard mais ne prend pas en charge l'animation de surface (SurfaceView, TextureView, VideoView).