Les Animations explicites dans Flutter
Sommaire
- 1- Objectif du Tutoriel
- 2- Introduction
- 3- Animations explicites avec "
built-in
": les FooTransition - 3.1- Rappel
- 3.1.1- Qu'est-ce qu'un controller ?
- 3.2- Fondamental
- 4- Créer un widget SizeTransition
- 4.1- Exemple
- 4.2- Créer un widget SizeTransition
- 5- AnimatedWidget
- 5.1- Fondamental
- 6- AnimatedBuilder
- 6.1- Définition
- 6.2- Fondamental
- 6.2.1- Cours Flutter
Les Animations explicites dans Flutter
-
Objectif du Tutoriel
- L’objectif de ce tutoriel est de vous apprendre à utiliser les animations explicites dans Flutter pour rendre vos applications plus dynamiques et engageantes. À la fin de ce tutoriel, vous serez capable de :
- Comprendre les Concepts d’Animations Explicites : Appréhender les bases des animations explicites et savoir différencier les widgets animés intégrés de Flutter (FooTransition).
- Utiliser les Widgets Animés Intégrés (FooTransition) : Apprendre à utiliser des widgets comme SizeTransition, FadeTransition, ScaleTransition, etc., pour animer les propriétés de vos widgets de manière simple et efficace.
- Maîtriser l’AnimationController : Savoir utiliser AnimationController pour animer des widgets en définissant des paramètres comme duration, vsync, et curve.
- Personnaliser les Animations avec Curves : Découvrir comment personnaliser les animations en utilisant différentes courbes (Curves) pour créer des transitions douces et fluides.
- Créer des Animations Complexes avec AnimatedBuilder : Explorer comment utiliser AnimatedBuilder pour animer des widgets de manière plus flexible et puissante.
-
Introduction
- Les animations explicites dans Flutter offrent un contrôle précis sur l’état et le comportement des animations. Contrairement aux animations implicites, qui se gèrent automatiquement, les animations explicites nécessitent une manipulation directe via des contrôleurs et des widgets animés spécifiques.
- Les animations explicites dans Flutter utilisent les classes
AnimationController
etTween
. Un AnimationController contrôle l’animation, tandis qu’un Tween définit les valeurs de début et de fin de l’animation. - Ce tutoriel vous guidera à travers la création de vos premières animations explicites en utilisant les widgets intégrés de Flutter, également appelés les « FooTransition ».
-
Animations explicites avec «
built-in
« : les FooTransition -
Rappel
-
Qu’est-ce qu’un controller ?
- Un controller nous permet de suivre l’état d’un widget et de, comme son nom l’indique, le controller. Par exemple, il est possible grâce à ScrollController de comprendre lorsque nous avons atteint le bout d’une liste, et de lui demander de remonter au début. Ici, nous utiliserons principalement le AnimationController, qui n’aura bientôt plus de secrets pour vous !
- Info utile : la valeur d’un controller varie entre 0 et 1, et dans le cas d’un AnimationController, 0 correspond au début de l’animation et 1 au moment où l’animation est terminée. Donc si le paramètre duration est de 3 secondes, le controller aura 0 de valeur à la seconde 0, et 1 de valeur à la seconde 3.
- Comme nous l’avons vu plus tôt dans ce cours, il est d’ores et déjà possible de créer des animations qui vont et viennent entre leurs valeurs de départ et leur valeur finale. Mais comment faisons-nous si nous souhaitons créer des animations qui se répètent depuis le début, encore et encore ? Les animations explicites « built-in » sont là pour vous !
-
Fondamental
- Les animations explicites avec « built-in » (ou FooTransition) sont des extensions des AnimatedWidget que nous étudierons par la suite.
- Les FooTransition comportent notamment :
- SizeTransition
- FadeTransition
- ScaleTransition
- SlideTransition
- RotationTransition
- PositionedTransition
- DecoratedBoxTransition
- DefaultTextStyleTransition
- RelativePosititonedTransition
-
Créer un widget SizeTransition
-
Exemple
- Pour l’exemple, nous allons ici utiliser le
SizeTransition
pour donner l’effet d’une balle rebondissante à notre Container. - L’utilisation d’un controller implique ici l’utilisation d’un SingleTickerProviderStateMixin. Il est ensuite nécessaire d’initialiser notre AnimationController dans
initState((){})
, en lui indiquant notamment le paramètre duration de notre animation, ainsi que vsync. vsync s’occupe de garder le suivi de l’écran, afin de ne pas continuer à générer l’animation lorsque celle-ci n’apparaît pas. - Nous initialisons ensuite notre animation en lui donnant comme parent le controller que nous venons de créer. Ainsi, nous n’avons plus qu’à dire au controller ce que nous souhaitons, et il l’appliquera à l’animation ! Ici, nous lui demandons de se répéter à l’infini grâce à ..repeat(). AnimationController propose ainsi toutes sortes d’actions que nous pouvons appliquer à nos animations, comme stop() pour arrêter l’animation ou forward() pour ne jouer l’animation qu’une fois.
- Attention, il ne faut pas oublier de disposer le controller dans
dispose()
pour éviter les fuites mémoire ! -
Créer un widget SizeTransition
- Maintenant, passons à la création du widget à qui s’appliquera l’animation. Pour ça, rien de plus simple : il faut créer notre widget SizeTransition, lui donner en sizeFactor notre animation (qui dépend donc déjà de notre controller) et mettre le child (ici Center).
-
AnimatedWidget
- Nous venons déjà d’étudier certains AnimatedWidget à travers des extensions déjà disponibles dans flutter. Mais si vous n’y avez pas encore trouvé votre bonheur, il est tout à fait possible de créer vos propres extensions de la classe AnimatedWidget !
-
Fondamental
- Nous allons maintenant essayer de créer notre propre AnimatedWidget de la classe Button, puisque la classe « AnimatedButton » n’existe pas encore.
- Vous venez de créer votre propre AnimatedButton ! Toutofois, pour le moment, il ne fait pas grand chose. Pour y remédier, l’objectif est de faire varier la bordure extérieure de votre bouton. Pour ce faire, il est nécessaire de return un bouton (ici OutlineButton) mais aussi d’indiquer à votre AnimatedWidget à quel changement de paramètre il doit s’animer.
- Ici, puisque nous souhaitons faire varier la largeur de la bordure, nous indiquons au widget que width est un listenable.
- Ensuite, nous n’avons plus qu’à mettre width comme variable de largeur dans le paramètre borderSide du bouton, et le tour est joué !
-
AnimatedBuilder
- Maintenant, vous n’avez plus qu’à utiliser votre AnimatedButton comme n’importe quel autre AnimatedWidget « built-in » !
-
Définition
- Un AnimatedBuilder est utile pour les widgets plus complexes qui souhaitent inclure une animation comme partie d’une fonction plus large.
-
Fondamental
- La création d’un AnimatedBuilder ressemble beaucoup à la création d’un AnimatedWidget, du moins dans les premières étapes : l’ajout d’un SingleTickerProviderStateMixin, l’initialisation d’un controller, etc.
- Ici, nous allons faire tourner un container sur lui-même.
class MyStatefulWidget extends StatefulWidget {
@override
State createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
)..repeat();
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.bounceInOut,
);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
...
}
}
Widget build(BuildContext context) {
return Scaffold(
body: SizeTransition(
sizeFactor: _animation,
axis: Axis.vertical,
axisAlignment: 1,
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Container(
height: 200,
width: 200,
color: Colors.red
)
),
),
),
);
}
Class ButtonTransition extends AnimatedWidget {
@override
Widget build(BuildContext context) {
(...)
}
}
Class ButtonTransition extends AnimatedWidget {
Const ButtonTransition({width} : super(listenable: width);
Animation get width => listenable
@override
Widget build(BuildContext context) {
return OutlineButton(
child: Text(‘Appuie !'),
borderSide: BorderSide(width: width.value),
);
}
}
class _MyStatefulWidgetState extends State with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 5),
vsync: this,
)..repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
child: Container(