Animations explicites
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
Pour l'exemple, nous allons ici utiliser le SizeTransition pour donner l'effet d'une balle rebondissante à notre Container.
class MyStatefulWidget extends StatefulWidget { @override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> with SingleTickerProviderStateMixin {
AnimationController _controller; Animation _animation;
@overridevoid 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();
}
@overrideWidget build(BuildContext context) {
}}
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 !
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).
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)),
),
),
);
}
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.
Class ButtonTransition extends AnimatedWidget { @override
Widget build(BuildContext context) { ()
}
}
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é !
Class ButtonTransition extends AnimatedWidget {
Const ButtonTransition({width} : super(listenable: width);
Animation<double> get width => listenable @override
Widget build(BuildContext context) { return OutlineButton(
child: Text(‘Appuie !'),
borderSide: BoderSide(width: width.value),
);
}
}
Maintenant, vous n'avez plus qu'à utiliser votre AnimatedButton comme n'importe quel autre AnimatedWidget « built-in » !
AnimatedBuilder
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 _MyStatefulWidgetState extends State<MyStatefulWidget> with SingleTickerProviderStateMixin {
AnimationController _controller;
@overridevoid initState() { super.initState();
_controller = AnimationController( duration: const Duration(seconds: 5), vsync: this,
)..repeat();
}
@override void dispose() {
_controller.dispose(); super.dispose();
}
@overrideWidget build(BuildContext context) { return AnimatedBuilder( animation: _controller,
child: Container(width: 250.0, height: 250.0, color: Colors.purple), builder: (BuildContext context, Widget child) {
return Transform.rotate(
angle: _controller.value * 2.0 * math.pi, child: child,
);
},
);
}
}
Le builder a reçu en paramètre le child défini plus haut, à savoir le Container. Comme nous l'avons dit plus haut, la valeur d'un controller varie entre 0 et 1. Nous utilisons donc cette valeur pour savoir où en est le controller, mais aussi pour déterminer où doit en être la rotation de notre Container avec « angle: _controller.value * 2.0 * math.pi ».
Remarque :
Il est possible de faire à peu près les mêmes choses avec un AnimatedBuilder qu'avec un AnimatedWidget. Le type que vous choisirez sera plus une question de goût ! La plupart du temps, l'AnimatedBuilder peut vite représenter un certain nombre de lignes de codes, alors qu'un AnimatedWidget pourrait faire le même travail en moins de lignes.