Les Animations Explicites dans Flutter

Objectifs

• À l'issue de ce tutoriel, vous serez capable de :
  • Comprendre les concepts de base des animations dans Flutter.
  • Créer des animations explicites à l'aide d'AnimationController et de Tween.
  • Appliquer vos connaissances à des projets réels.

Introduction aux Animations implicites

• Les animations sont un élément clé pour améliorer l'expérience utilisateur dans les applications Flutter.
• Les animations explicites dans Flutter sont des animations que vous contrôlez directement en spécifiant comment et quand elles doivent se produire.
• Les animations explicites offrent plus de contrôle et de flexibilité que les animations implicites. Elles sont utilisées pour des animations plus complexes impliquant plusieurs propriétés ou une synchronisation personnalisée. Les animations explicites nécessitent que les développeurs définissent le comportement de l'animation, y compris le contrôleur d'animation, les courbes d'animation et la transition elle-même.
• Les animations explicites vous permettent de définir le comportement de l’animation, y compris la durée, la courbe d'animation et les états intermédiaires.
• Contrairement aux animations implicites, qui gèrent automatiquement les transitions, les animations explicites nécessitent une gestion manuelle des états et des transitions
• Flutter fournit une API riche pour créer des animations fluides et réactives.
• Exemples d'animations explicites :
  • AnimationController
  • Tween
  • CurvedAnimation
  • AnimatedBuilder

Étapes pour Créer une Animation Explicite

1. Créer un Projet Flutter

   • Pour commencer, créez un nouveau projet Flutter en utilisant la commande suivante dans votre terminal :flutter create nom_du_projet
   • Ouvrez ensuite le projet dans votre éditeur de code (par exemple, VS Code).

2. Configurer le Fichier main.dart

   • Dans le fichier main.dart, supprimez tout le contenu par défaut et importez les bibliothèques nécessaires :
     Exemple

     import 'package:flutter/material.dart';
     
     void main() {
       runApp(MyApp());
     }
     
     class MyApp extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
         return MaterialApp(
           title: 'Animations Explicites',
           home: AnimationExample(),
         );
       }
     }

3. Créer un Widget d'Animation

   • Créez un widget qui utilisera l'AnimationController pour gérer l'animation :
     Exemple
     class AnimationExample extends StatefulWidget {
       @override
       _AnimationExampleState createState() => _AnimationExampleState();
     }
     
     class _AnimationExampleState extends State with SingleTickerProviderStateMixin {
       late AnimationController _controller;
       late Animation _animation;
     
       @override
       void initState() {
         super.initState();
         _controller = AnimationController(
           duration: const Duration(seconds: 2),
           vsync: this,
         );
     
         _animation = Tween(begin: 0.0, end: 300.0).animate(_controller);
     
         // Démarrer l'animation
         _controller.forward();
       }
     
       @override
       void dispose() {
         _controller.dispose();
         super.dispose();
       }
     
       @override
       Widget build(BuildContext context) {
         return Scaffold(
           appBar: AppBar(title: Text('Animation Explicite')),
           body: Center(
             child: AnimatedBuilder(
               animation: _animation,
               builder: (context, child) {
                 return Container(
                   width: _animation.value,
                   height: _animation.value,
                   color: Colors.blue,
                 );
               },
             ),
           ),
         );
       }
     }
     Explication du Code
     • AnimationController: Gère la durée et le cycle de vie de l'animation.
     • Tween: Définit la plage de valeurs que l'animation va parcourir (ici de 0.0 à 300.0).
     • AnimatedBuilder : Un widget qui reconstruit son enfant chaque fois que l'animation change.

Attributs des animations explicites dans Flutter

1. L'AnimationController

• Le Contrôleur d'animation ou la classe AnimationController contrôle le cycle de vie de l'animation.
• Elle permet de spécifier la durée, de démarrer et d'arrêter l'animation et de contrôler le comportement de l'animation à l'aide de courbes.

1. Qu'est-ce qu'un AnimationController ?

   • L'AnimationController est une classe qui permet de contrôler le progrès d'une animation. Il est responsable de la génération des valeurs d'animation sur une certaine durée, généralement entre 0.0 et 1.0. Chaque fois que l'animation est mise à jour, l'AnimationController produit une nouvelle valeur, permettant ainsi de créer des effets dynamiques et interactifs dans l'application14.

2. Fonctionnalités Clés

   • Durée : Vous pouvez définir la durée de l'animation lors de l'initialisation de l'AnimationController.
   • Contrôle: Il permet de jouer l'animation en avant ou en arrière, de la mettre en pause ou de la redémarrer.
   • VSync: L'AnimationController nécessite un TickerProvider pour synchroniser les mises à jour avec le cycle de rendu de Flutter, ce qui garantit que les animations sont fluides26.

3. Comment Utiliser AnimationController

   Exemple simple d'utilisation d'un AnimationController dans un widget Stateful
   import 'package:flutter/material.dart';
   import 'dart:math'; // Import pour générer des valeurs aléatoires
   
   void main() => runApp(MyAnimatedWidget());
   
   class MyAnimatedWidget extends StatefulWidget {
     @override
     _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
   }
   
   class _MyAnimatedWidgetState extends State
       with SingleTickerProviderStateMixin {
     late AnimationController _controller;
     late Animation _animation;
     Color _currentColor = Colors.blue; // Couleur initiale du conteneur
   
     @override
     void initState() {
       super.initState();
       // Initialisation de l'AnimationController
       _controller = AnimationController(
         duration: const Duration(seconds: 2),
         vsync: this,
       );
   
       // Définition d'une animation Tween
       _animation = Tween(begin: 0.0, end: 300.0).animate(_controller)
         ..addListener(() {
           setState(() {}); // Met à jour l'état lorsque la valeur change
         });
     }
   
     // Fonction pour générer une couleur aléatoire
     Color _generateRandomColor() {
       final Random random = Random();
       return Color.fromRGBO(
         random.nextInt(256), // Rouge
         random.nextInt(256), // Vert
         random.nextInt(256), // Bleu
         1.0, // Opacité
       );
     }
   
     @override
     void dispose() {
       _controller.dispose(); // Libération des ressources
       super.dispose();
     }
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         debugShowCheckedModeBanner: false,
         home: Scaffold(
           appBar: AppBar(
             elevation: 4,         
             title: Text('AnimationController'),
             centerTitle: true,
           ),
           body: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Center(
                 child: Container(
                   width: _animation.value,
                   height: _animation.value,
                   color: _currentColor, // Utilisation de la couleur actuelle
                 ),
               ),
               const SizedBox(height: 20), // Espacement entre le conteneur et le bouton
               ElevatedButton(
                 onPressed: () {
                   setState(() {
                     _currentColor = _generateRandomColor(); // Change la couleur
                   });
   
                   if (_controller.status == AnimationStatus.completed) {
                     _controller.reverse();
                   } else {
                     _controller.forward();
                   }
                 },
                 child: Text('Animer le conteneur'),
               ),
             ],
           ),
         ),
       );
     }
   }
   Explication du Code
   • Initialisation: L'AnimationController est initialisé dans initState() avec une durée spécifiée.
   • Animation Tween: Un Tween est utilisé pour définir la plage des valeurs que l'animation va parcourir.
   • Listener: Un listener est ajouté pour mettre à jour l'état du widget chaque fois que la valeur de l'animation change.
   • Démarrage: L'animation commence avec _controller.forward().
   • Nettoyage: Il est important d'appeler _controller.dispose() pour libérer les ressources lorsque le widget est détruit.
   • Animation: La classe Animation représente l'état actuel d'une animation. Elle contient les valeurs intermédiaires que l'animation a atteintes au cours de son exécution. Ces valeurs peuvent être mappées aux propriétés des éléments de l'interface utilisateur pour obtenir des animations fluides.
   • Tween: la classe Tween permet de mapper la plage de valeurs d'animation aux valeurs de propriété souhaitées. Elle définit comment les valeurs d'animation intermédiaires doivent être interpolées pour produire la sortie finale.

Tween en Flutter

• Un Tween (abréviation de "in-between") est un concept fondamental dans le cadre des animations Flutter, utilisé pour interpoler entre deux valeurs. Il permet de créer des transitions fluides entre un état initial et un état final d'un widget. Voici un aperçu détaillé de son fonctionnement et de son utilisation.

1. Qu'est-ce qu'un Tween ?

   • Un Tween est un objet stateless qui génère une série de valeurs intermédiaires basées sur une valeur de départ (begin) et une valeur d'arrivée (end). Par exemple, si vous souhaitez animer la taille d'un widget de 0 à 100, vous pouvez utiliser un Tween pour définir ces valeurs.

2. Syntaxe de Définition d'un Tween

   • Voici comment définir un Tween en Flutter :

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

   • Dans cet exemple, myTween représente une animation qui va interpoler entre 0.0 et 100.0.

3. Utilisation avec AnimationController

   • Pour utiliser un Tween, il doit être associé à un AnimationController, qui gère le timing de l'animation. Voici un exemple typique :

   AnimationController _controller = AnimationController(
     duration: const Duration(seconds: 2),
     vsync: this,
   );
   Animation<double> _animation = myTween.animate(_controller);

   • Dans cet exemple, _animation contiendra les valeurs interpolées générées par le Tween pendant la durée spécifiée par l'AnimationController.

4. Exemples Pratiques

   • Animation de Taille :
     • Pour animer la taille d'un widget, vous pourriez écrire :

       void _startAnimation() {
         _controller.forward();
       }

     • Et dans votre méthode build, appliquez la valeur animée :

       Container(
         width: _animation.value,
         height: _animation.value,
         color: Colors.blue,
       );

   • Animation d'Opacité :
     • Vous pouvez également utiliser Tween pour animer l'opacité d'un widget :

       
       Tween opacityTween = Tween(begin: 0.0, end: 1.0);
       Animation<double> opacityAnimation = opacityTween.animate(_controller);

     • Réinitialisation et Rejouement :
     • Pour réanimer un widget, vous pouvez réinitialiser le contrôleur et le redémarrer :

       void _restartAnimation() {
         _controller.reset();
         _controller.forward();
       }

5. Types de Tweens

   • Flutter prend en charge plusieurs types de Tweens, notamment :
     • SizeTween : Pour animer les dimensions d'un widget.
     • ColorTween: Pour animer les couleurs.
     • RectTween: Pour animer des rectangles.