Animation printanière : la physique du mouvement naturel de l'interface utilisateur
Découvrez comment l'animation Spring fonctionne dans la conception d'interface utilisateur. Comprendre la rigidité, l'amortissement, la masse et la vitesse. Créez des animations basées sur la physique naturelle pour React et SwiftUI.
À retenir
L'animation Spring modélise le mouvement de l'interface utilisateur en utilisant le comportement physique d'un système masse-ressort-amortisseur, dans lequel le mouvement d'un composant est régi par la rigidité (la force avec laquelle il tire vers le repos), l'amortissement (la rapidité avec laquelle il perd de l'énergie) et la masse (la quantité d'inertie qu'il transporte). Contrairement aux animations basées sur la durée, les ressorts répondent automatiquement à la vitesse de l'utilisateur et peuvent être interrompus à tout moment sans provoquer de discontinuité visuelle.
Pourquoi les sources semblent plus naturelles que les courbes de durée
Le monde physique n'a pas de concepts comme « facilité d'entrée-sortie » ou « cubique-bézier (0,4, 0, 0,2, 1) ». Les objets physiques accélèrent sous l’effet des forces et décélérent sous l’effet du frottement. Lorsqu’un tiroir s’ouvre, il prend de l’élan ; lorsque vous le relâchez, la friction le met au repos. La physique du printemps reproduit cette réalité physique dans le logiciel, c'est pourquoi iOS UIKit, Android Motion Compose et ExodeUI sont tous des systèmes d'animation Spring-First.
Paramètres du ressort expliqués
Comprendre chaque paramètre vous permet de concevoir exactement la sensation physique que vous souhaitez.
Rigidité (Tension)
La force avec laquelle le ressort tire vers sa valeur de repos. La rigidité élevée (600+) crée une interface utilisateur vive et réactive, comme un retour d'information sur une pression sur un bouton. Une faible rigidité (100-200) crée un mouvement lent et flottant adapté aux transitions de page ou aux éléments flottants ambiants.
Amortissement (Friction)
Combien d'énergie le ressort perd par cycle. Lors d'un amortissement critique, le ressort atteint le repos sans osciller. Les ressorts sous-amortis (faible friction) dépasseront et rebondiront. Le rapport amortissement / (2 × sqrt (rigidité × masse)) détermine si vous êtes sous-amorti, amorti de manière critique ou suramorti.
Masse
Quelle est l’inertie de l’élément animé ? Une masse plus élevée rend l’animation plus lourde et met plus de temps à changer de direction. La plupart des animations de l'interface utilisateur maintiennent la masse à 1,0 et contrôlent la sensation grâce à la rigidité et à l'amortissement.
Vitesse initiale
Si l'utilisateur glisse ou lance un élément, le ressort peut être initialisé avec cette vitesse de geste, créant ainsi une continuité transparente entre le geste et l'installation du ressort.
Préréglages de printemps pratiques pour les composants de l'interface utilisateur
Ces préréglages couvrent les modèles d'interaction de l'interface utilisateur les plus courants.
- Pression sur le bouton : rigidité 500, amortissement 30 — rebond instantané, vif et minimal
- Expansion de la carte : rigidité 280, amortissement 24, masse 1,2 — expansion douce et pondérée
- Tiroir / tôle : rigidité 340, amortissement 28 — décisif, avec léger tassement
- Notification rebondissante : rigidité 400, amortissement 18 — dépassement ludique
- Transition de page : rigidité 220, amortissement 22, masse 1,4 — cinématique, pondérée
Extrait d’implémentation en production
// Spring presets in React with the Motion library (motion.dev).
// The same stiffness / damping / mass values can be saved as motion tokens.
import { motion } from 'motion/react';
const springs = {
snappy: { type: 'spring', stiffness: 500, damping: 30, mass: 1 },
smooth: { type: 'spring', stiffness: 280, damping: 24, mass: 1.2 },
bouncy: { type: 'spring', stiffness: 400, damping: 18, mass: 1 },
cinematic: { type: 'spring', stiffness: 220, damping: 22, mass: 1.4 },
};
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ y: open ? 0 : 24, scale: open ? 1 : 0.96 }}
transition={springs.smooth}
>
Smooth physics-based card reveal
</motion.div>
);
}