Animations implicites
Animations implicites avec « built-in » : les AnimatedFoo
Qu'est-ce qu'un Foo ?
Tout au long de ce cours, vous pourrez être amené à voir le mot « Foo » apparaître, comme dans AnimatedFoo ou FooTransition. A vrai dire, cela signifie que « Foo » peut être remplacé par certains widgets communs. Ainsi, Positioned devient AnimatedPositioned ou encore PositionedTransition !
Fondamental :
Flutter possède une série de widgets, qui sont simplement des versions animées de widgets déjà existants. Ces widgets créent une animation à chaque fois qu'une des propriétés du widget change et se nomment (entre autres) les AnimatedFoo.
Liste des AnimatedFoo :
AnimatedContainer
AnimatedAlign
AnimatedDefaultTextStyle
AnimatedOpacity
AnimatedPadding
AnimatedPhysicalModel
AnimatedPositioned
AnimatedPositionedDirectional
Nous allons ensemble réaliser cette toute première animation à l'aide d'un AnimatedContainer. Pour ceci, rien de plus simple : il suffit de rajouter Animated devant notre Container.
AnimatedContainer(
height: _bigger ? 300 : 500,
width: _bigger ? 300 : 500, color: Colors.blue,
duration: Duration(seconds: 3),
curve: Curves.elasticInOut),
2 propriétés supplémentaires s'offrent alors à nous : duration et curve.
Duration va nous permettre de déterminer combien de temps le changement de propriété jusqu'à la nouvelle valeur va prendre. Ici, il faudra 3 secondes pour que la largeur et la hauteur passent de 300 à 500 et vice-versa.
Curve nous permet, par la suite, de rendre cette animation plus personnalisée en créant des variations supplémentaires de valeur au sein même du temps imparti par la propriété duration. C'est ainsi que nous pouvons obtenir cette animation non-linéaire. Je vous invite vivement à explorer les différents effets proposés par la classe Curves ! Ici, nous avons utilisé l'effet « elasticInOut ».
TweenAnimationBuilder
Il existe parfois des widgets que nous souhaitons animer, mais qui ne possèdent pas de version « built-in ». C'est là que le TweenAnimationBuilder rentre en scène !
Fondamental :
Le TweenAnimationBuilder vous permet d'animer tous types de widgets communs. Pour ce faire, il est nécessaire de notamment définir trois paramètres : duration, tween et builder.
Tween est un paramètre permettant d'indiquer entre quelles valeurs notre animations doit varier, tandis que le builder, retourne ce à quoi notre widget doit ressembler à un moment donné.
Comme exemple, nous allons essayer d'animer un widget ColorFiltered, qui ne possède donc pas de version animée « built-in ». Pour que nous puissions voir au mieux les transitions de couleurs, nous appliquons le filtre à un container blanc simple.
Attention :
L'animation ne se répète pas comme pourrait le laisser penser ce gif. Elle ne se fait qu'une fois au moment du hot reload. Sinon, ce serait une animation explicite !
Fondamental :
TweenAnimationBuilder<Color>(
tween: ColorTween(begin: Colors.red, end: Colors.yellow), duration: Duration(seconds: 3),
builder: (BuildContext _, Color value, Widget ) { return ColorFiltered(
colorFilter: ColorFilter.mode(value, BlendMode.modulate), child: Container(
color: Colors.white, height: 300, width: 300));
},
)
Ici, puisque la propriété que nous souhaitons faire varier est une couleur, nous utilisons un ColorTween. Celui-ci nous permet d'indiquer 2 couleurs : une couleur de début d'animation et une couleur de fin.
Dans le builder, il ne nous manque plus qu'à indiquer le widget qui prendra comme paramètre la couleur variable ! Ici, il s'agit donc du ColorFiltered, qui prend la valeur de la couleur fournie par le tween en second paramètre. Et voilà, le tour est joué !
Il existe une multitude de Tween pour tous types de variables : AlignmentGeometryTween, ConstantTween, SizeTween, TextStyleTween, etc.