Utilisation d’AnimationController et de Tween dans Flutter
Utilisation d’AnimationController et de Tween dans Flutter
-
Objectifs
- Comprendre les bases de l’AnimationController
- Maîtriser la gestion des états de l’AnimationController
- Utiliser un Tween pour interpoler des valeurs
-
Introduction aux Animations dans Flutter
- Flutter est un framework puissant qui permet de créer des applications animées, fluides et interactives. Une des fonctionnalités les plus couramment utilisées pour les animations est l’AnimationController, associé avec un Tween pour créer des animations personnalisées.
- Dans ce tutoriel, nous allons explorer en détail :
- La définition et le rôle de AnimationController.
- Ce qu’est un Tween et comment l’utiliser.
- Créer une animation simple avec ces deux outils.
- Des activités pour vous aider à maîtriser les concepts.
-
AnimationControllerdans Flutter -
Définition :
- L’
AnimationControllerest une classe de Flutter qui contrôle une animation. Elle se comporte comme un Ticker (chronomètre) qui génère des valeurs de 0 à 1 au fil du temps. Il peut animer des éléments, gérer la durée de l’animation, et contrôler son état (démarrer, arrêter, inverser, etc.). -
Caractéristiques clés :
-
Utilisation :
- Voici un exemple d’initialisation d’un AnimationController :
-
Explication :
-
Tween
-
Définition :
- Un
Tween(abréviation de « in-between ») définit une transition entre deux valeurs, souvent utilisées avec un AnimationController. Le Tween mappe la valeur générée par l’AnimationController (qui va de 0 à 1) sur une autre plage, comme de 0 à 100, de rouge à bleu, etc. -
Utilisation :
- Un Tween est souvent combiné avec un AnimationController pour créer des transitions douces entre deux valeurs.
-
Exemple pratique :
-
Explication :
- Tween
(begin: 0.0, end: 100.0) : Définit la plage de valeurs pour l’animation (ici de 0 à 100). - animate(_controller) : Lie le Tween au contrôleur pour que les valeurs changent selon le temps.
- AnimatedBuilder : Un widget qui reconstruit son contenu à chaque changement de l’animation, appliquant les transformations.
-
Durée : Spécifie combien de temps l’animation va durer.
Valeur : La valeur de l’animation varie de 0 à 1.
Méthodes de contrôle : forward(), reverse(), repeat(), etc.
class MyAnimation extends StatefulWidget {
@override
_MyAnimationState createState() => _MyAnimationState();
}
class _MyAnimationState extends State with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
// Initialisation de l'AnimationController avec une durée de 2 secondes
_controller = AnimationController(
vsync: this, // Ce widget agit comme un ticker pour l'animation
duration: const Duration(seconds: 2),
);
}
@override
void dispose() {
// On arrête le contrôleur quand le widget est détruit
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
// Démarre l'animation en avant
_controller.forward();
},
child: Text('Démarrer l\'animation'),
),
),
);
}
} vsync : Réduit l’utilisation de ressources en synchronisant l’animation avec l’affichage de l’écran.
duration : Durée de l’animation (ici 2 secondes).
forward() : Démarre l’animation.
Tween _tween = Tween(begin: 0.0, end: 100.0); class MyAnimation extends StatefulWidget {
@override
_MyAnimationState createState() => _MyAnimationState();
}
class _MyAnimationState extends State with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
);
// Associe le Tween au contrôleur pour créer l'animation
_animation = Tween(begin: 0.0, end: 100.0).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Container(
width: _animation.value, // Utilisation de la valeur animée
height: _animation.value,
color: Colors.blue,
);
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_controller.forward(); // Démarre l'animation
},
child: Icon(Icons.play_arrow),
),
);
}
} 