UIView.animate : qu'est-ce que c'est, animation des propriétés UIView sous iOS

Qu'est-ce que UIView.animate ?

UIView.animate est une méthode statique de la classe UIView, introduite dans iOS 4 (2010). Elle fournit une API déclarative pour animer les propriétés animables de UIView : frame, bounds, center, alpha, transform, backgroundColor. La méthode accepte un bloc (fermeture) avec des modifications de propriétés — le système crée automatiquement CABasicAnimation pour chaque propriété modifiée.

La syntaxe par blocs a remplacé l'ancienne beginAnimations/commitAnimations (iOS 2-3) et est devenue la norme d'animation dans UIKit. Les animations UIView.animate s'exécutent sur le thread principal et ne bloquent pas l'interface utilisateur. Par défaut, la durée d'animation est de 0,25 seconde avec une courbe easeInOut.

Selon Apple WWDC 2023, l'approche d'animation recommandée dans les nouveaux projets est SwiftUI avec les modificateurs .animation() et .transition(), mais UIView.animate reste l'outil principal pour la prise en charge d'iOS 16 et inférieur, ainsi que pour les transitions personnalisées complexes.

Paramètres et options d'animation

UIView.animate fournit trois paramètres clés : duration (durée en secondes), delay (délai avant le début) et options (ensemble de masques de bits UIView.AnimationOptions). Les options incluent curve (easeInOut, easeIn, easeOut, linear), repeat, autoreverse, allowUserInteraction, beginFromCurrentState et overrideInheritedDuration.

Le paramètre options est combiné via un tableau : [.curveEaseOut, .repeat, .autoreverse]. L'animation avec repeat et autoreverse ramène doucement la View à son état initial et se répète indéfiniment. Pour un nombre fini de répétitions, utilisez animateKeyframes.

Animation Spring via UIView.animate

L'animation Spring ajoute un effet de ressort physique : l'objet ne se contente pas de passer du point A au point B, mais dépasse la cible avec des oscillations amorties. Paramètres : usingSpringWithDamping (amortissement 0-1, où 0 est l'oscillation maximale) et initialSpringVelocity (vitesse initiale du ressort).

Apple recommande usingSpringWithDamping dans la plage 0,4-0,8 pour des animations UI naturelles. Une valeur de 0,5 crée un rebond notable sans sensation de « caoutchouc ». initialSpringVelocity = 1,0 correspond à une vitesse de 1 pt/s. À 0, l'animation démarre à partir du repos.

// Exemple d'animation spring et keyframe
import UIKit

class AnimatedView: UIView {

    func springBounce() {
        // Animation spring avec amortissement
        UIView.animate(
            withDuration: 0.8,
            delay: 0,
            usingSpringWithDamping: 0.5,
            initialSpringVelocity: 1.0,
            options: [.allowUserInteraction],
            animations: {
                self.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
                self.alpha = 0.7
            },
            completion: { _ in
                UIView.animate(withDuration: 0.3) {
                    self.transform = .identity
                    self.alpha = 1.0
                }
            }
        )
    }

    func slideIn(from offset: CGFloat) {
        self.transform = CGAffineTransform(translationX: offset, y: 0)
        self.alpha = 0.0

        UIView.animate(
            withDuration: 0.6,
            delay: 0.1,
            options: [.curveEaseOut]
        ) {
            self.transform = .identity
            self.alpha = 1.0
        }
    }
}

Animation Keyframe

UIView.animateKeyframes permet de diviser une animation en plusieurs étapes (keyframes), chacune avec son propre temps et durée relatifs. La méthode addKeyframe(withRelativeStartTime:relativeDuration:) accepte des valeurs de temps de 0 à 1 relatives à la durée totale de l'animation.

Les animations keyframe sont utiles pour les effets multi-étapes : pulsation de bouton (augmentation → pause → retour), apparition séquentielle d'éléments, déformations complexes avec états intermédiaires. Chaque keyframe peut avoir sa propre courbe d'animation via options.

// Animation keyframe avec séquence complexe
func complexPulse() {
    UIView.animateKeyframes(withDuration: 2.0, delay: 0, options: [.repeat]) {
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25) {
            self.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
            self.alpha = 0.5
        }
        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
            self.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
            self.alpha = 0.8
        }
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {
            self.transform = .identity
            self.alpha = 1.0
        }
    }
}

// Animation avec fermetures imbriquées
func animateCardTransition() {
    UIView.animate(withDuration: 0.4, delay: 0, options: [.curveEaseOut]) {
        self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
    } completion: { _ in
        UIView.animate(withDuration: 0.3, delay: 0, options: [.curveEaseIn]) {
            self.transform = .identity
        }
    }
}

Structure interne : Core Animation sous le capot

Sous le capot, UIView.animate délègue l'animation au CALayer de chaque UIView via Core Animation (CAAnimation). Lorsque vous modifiez le frame dans le bloc d'animation, le système crée CABasicAnimation pour les propriétés position et bounds de la couche correspondante. Si alpha est modifié — CABasicAnimation pour la propriété opacity de la couche.

Core Animation utilise un processus de serveur de rendu séparé (backboardd sur iOS) qui traite les animations à 120 Hz (ProMotion). UIView.animate ne bloque pas le thread principal — les modifications de propriétés sont envoyées au serveur de rendu, qui interpole les images sans intervention de l'application.

Selon Apple, les animations via UIView.animate ont une surcharge d'environ 2-3% de CPU par couche modifiée à 60 FPS. Pour les animations de masse (20+ objets simultanément), il est recommandé d'utiliser CATransaction et la gestion manuelle des couches.

Pour déboguer et visualiser les animations UIKit, utilisez Xcode Debug View Hierarchy — il montre les CAAnimations actives sur chaque couche, leur durée, courbe et état actuel. Comprendre la structure interne de Core Animation aide à éviter les problèmes de performance avec les animations complexes et à choisir l'approche optimale entre UIView.animate et l'utilisation directe de CABasicAnimation.