Les animations en Flutter

Les animations.

Dans le dernier article, nous avons vu comment créer notre première application en Flutter. Nous avons déjà vu les fonctionnalités des différents widgets. Nous allons maintenant voir comment nous pouvons rendre notre expérience un peu plus captivante à l'aide des animations.

Tout d'abord, comment fonctionnent les animations dans Flutter :

Il existe principalement deux gros types d'animations :

1. Les Tweens
2. Le animate controller 

Les Tweens.

Pour commencer, qu'est-ce qu'un Tween : Un Tween est une méthode qui permet de gérer automatiquement une animation.

Pour utiliser les Tweens, nous allons avoir besoin de deux valeurs. La première valeur est la valeur de départ et la deuxième est la valeur de fin. Par la suite, Flutter va automatiquement fournir les valeurs entre les deux paramètres à travers un temps désiré pour arriver à la valeur finale à partir de la valeur initiale. Donc, par exemple, si nous avons un Widget de type "Container" et que nous voulons que celui-ci passe de la hauteur 0 à 100 pour occuper tout l'espace. La fonction Tween va nous permettre de rentrer les deux valeurs qui sont 0 et 100, et Flutter va se charger de fournir les données entre les deux. Il est possible de faire plusieurs choses avec le Tween car il existe plusieurs attributs que nous pouvons lui assigner comme par exemple :

• Tween<double>: Pour les animations de valeurs numériques comme la taille, la position, l'opacité, etc.
• Tween<Color>: Pour les animations de couleur.
• Tween<Offset>: Pour les animations de position bidimensionnelles.
• Tween<Rect>: Pour les animations de rectangles.
• Tween<List>, Tween<Map>: Pour les animations de listes ou de cartes.

Animation controller

L'Animation Controller, lui, de son côté, est là pour contrôler le tout.

Un mélange des deux nous fournira un rendu beaucoup plus propre et fluide.

L'Animation Controller, la fonction principale du contrôleur, est de piloter l'animation. Cela signifie qu'il va provoquer le changement de valeur de l'animation et renvoyer une nouvelle valeur du Tween en fonction de la progression de l'animation.

Il a aussi la possibilité d'animer un élément avec une physique particulière. Pour cela, nous devons utiliser la fonction. Nous allons encore une fois utiliser la classe Animation Controller et par la suite, nous allons lui assigner un controller pour la gestion des mouvements

Voici un exemple d'une application avec une animation physique selon le site de Flutter :

import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';

void main() {
 runApp(const MaterialApp(home: PhysicsCardDragDemo()));
}

class PhysicsCardDragDemo extends StatelessWidget {
 const PhysicsCardDragDemo({super.key});

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(),
     body: const DraggableCard(
       child: FlutterLogo(
         size: 128,
       ),
     ),
   );
 }
}

/// A draggable card that moves back to [Alignment.center] when it's
/// released.
class DraggableCard extends StatefulWidget {
 const DraggableCard({required this.child, super.key});

 final Widget child;

 @override
 State<DraggableCard> createState() => _DraggableCardState();
}

class _DraggableCardState extends State<DraggableCard>
   with SingleTickerProviderStateMixin {
 late AnimationController _controller;

 /// The alignment of the card as it is dragged or being animated.
 ///
 /// While the card is being dragged, this value is set to the values computed
 /// in the GestureDetector onPanUpdate callback. If the animation is running,
 /// this value is set to the value of the [_animation].
 Alignment _dragAlignment = Alignment.center;

 late Animation<Alignment> _animation;

 /// Calculates and runs a [SpringSimulation].
 void _runAnimation(Offset pixelsPerSecond, Size size) {
   _animation = _controller.drive(
     AlignmentTween(
       begin: _dragAlignment,
       end: Alignment.center,
     ),
   );
   // Calculate the velocity relative to the unit interval, [0,1],
   // used by the animation controller.
   final unitsPerSecondX = pixelsPerSecond.dx / size.width;
   final unitsPerSecondY = pixelsPerSecond.dy / size.height;
   final unitsPerSecond = Offset(unitsPerSecondX, unitsPerSecondY);
   final unitVelocity = unitsPerSecond.distance;

   const spring = SpringDescription(
     mass: 30,
     stiffness: 1,
     damping: 1,
   );

   final simulation = SpringSimulation(spring, 0, 1, -unitVelocity);

   _controller.animateWith(simulation);
 }

 @override
 void initState() {
   super.initState();
   _controller = AnimationController(vsync: this);

   _controller.addListener(() {
     setState(() {
       _dragAlignment = _animation.value;
     });
   });
 }

 @override
 void dispose() {
   _controller.dispose();
   super.dispose();
 }

 @override
 Widget build(BuildContext context) {
   final size = MediaQuery.of(context).size;
   return GestureDetector(
     onPanDown: (details) {
       _controller.stop();
     },
     onPanUpdate: (details) {
       setState(() {
         _dragAlignment += Alignment(
           details.delta.dx / (size.width / 2),
           details.delta.dy / (size.height / 2),
         );
       });
     },
     onPanEnd: (details) {
       _runAnimation(details.velocity.pixelsPerSecond, size);
     },
     child: Align(
       alignment: _dragAlignment,
       child: Card(
         child: widget.child,
       ),
     ),
   );
 }
}

Références : 

How to Create Custom Animations in Flutter – A Step-by-Step Guide consulté le 24/02/2024

,Animate a widget using a physics simulation consulté le 24/02/2024

,Basics of Flutter Animations – Tweens and Animation Controllers consulté le 24/02/2024