Animations décalées et fondées sur la physique
Créez des mouvements riches dans Flutter avec des animations décalées pilotées par des intervalles et des simulations naturelles de ressorts fondées sur la physique.
Animations décalées et fondées sur la physique est une leçon Flutter Mobile Development gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Flutter Mobile Development, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Flutter Mobile Development comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Beyond a Single Tween
You already know implicit and explicit animations. Staggered animations sequence multiple properties on one controller, and physics-based animations make motion feel natural.
One Controller, Many Animations
A single AnimationController can drive several Animation objects, each running during a different slice of time.
final controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
);Intervals
A CurvedAnimation with an Interval restricts an animation to a fraction of the parent timeline.
final fade = CurvedAnimation(
parent: controller,
curve: const Interval(0.0, 0.4, curve: Curves.easeIn),
);Staggering Properties
Give each property its own interval so they animate in sequence — fade first, then slide, then scale.
final slide = CurvedAnimation(
parent: controller,
curve: const Interval(0.4, 0.7, curve: Curves.easeOut),
);
final scale = CurvedAnimation(
parent: controller,
curve: const Interval(0.7, 1.0, curve: Curves.elasticOut),
);Driving the Tweens
Map each curved animation through a Tween to the values you need.
final opacity = Tween<double>(begin: 0, end: 1).animate(fade);
final offset = Tween<Offset>(
begin: const Offset(0, 0.3), end: Offset.zero,
).animate(slide);Building the Widget
Use AnimatedBuilder to rebuild as the controller ticks, applying every staggered value at once.
AnimatedBuilder(
animation: controller,
builder: (context, child) => Opacity(
opacity: opacity.value,
child: SlideTransition(position: offset, child: child),
),
child: const Card(child: Text('Hello')),
);Starting the Sequence
Call forward() to play. Because intervals overlap or chain, the children animate in a pleasing stagger.
@override
void initState() {
super.initState();
controller.forward();
}What Are Physics Simulations?
Physics-based animations ignore fixed durations and instead model forces. A SpringSimulation produces realistic bounce and settle.
Spring Simulation
Define a SpringDescription (mass, stiffness, damping) and run it with the controller.
const spring = SpringDescription(mass: 1, stiffness: 100, damping: 10);
final sim = SpringSimulation(spring, 0, 1, 0);
controller.animateWith(sim);Fling Gestures
The fling method launches an animation with velocity, perfect for swipe-to-dismiss or drag release.
void onDragEnd(DragEndDetails d) {
controller.fling(velocity: d.primaryVelocity! / 1000);
}Dispose the Controller
Always dispose the controller to free its ticker.
@override
void dispose() {
controller.dispose();
super.dispose();
}Quick Check
How do you make several properties of one controller animate in sequence rather than all at once?
Recap
You learned advanced motion:
- Staggered animations via Intervals on one controller
- AnimatedBuilder to apply many values together
- Physics simulations with SpringSimulation and fling
These techniques make your UI feel alive and natural.
Questions Fréquemment Posées
La leçon « Animations décalées et fondées sur la physique » est-elle gratuite ?
Oui — le texte complet de « Animations décalées et fondées sur la physique » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Flutter Mobile Development, passe à CoddyKit PRO. Le cours Flutter Mobile Development comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Animations décalées et fondées sur la physique » ?
Créez des mouvements riches dans Flutter avec des animations décalées pilotées par des intervalles et des simulations naturelles de ressorts fondées sur la physique. Tu pratiques Flutter Mobile Development avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Flutter Mobile Development ?
Aucune expérience préalable n'est requise. Flutter Mobile Development sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Animations décalées et fondées sur la physique » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Flutter Mobile Development ?
Oui. Chaque leçon Flutter Mobile Development inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- CustomPainter et Canvas
- Animations implicites
- Animations explicites et transitions Hero
- Animations décalées et fondées sur la physique