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.

AnimationController dans Flutter

1. Définition :

   • L'AnimationController est 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.).

2. Caractéristiques clés :

   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.

3. Utilisation :

   • Voici un exemple d'initialisation d'un AnimationController :

     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'),
             ),
           ),
         );
       }
     }

4. Explication :

   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

1. 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.

2. Utilisation :

   • Un Tween est souvent combiné avec un AnimationController pour créer des transitions douces entre deux valeurs.

     Tween _tween = Tween(begin: 0.0, end: 100.0);

3. Exemple pratique :

   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),
         ),
       );
     }
   }

4. 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.