Flutter SDK fornisce agli sviluppatori un widget integrato denominato AnimatedContainer . Come suggerisce il nome, è un contenitore che può essere animato in qualche modo. Quindi i suoi attributi sono proprio come il solito widgetContainer tranne che ogni volta che c’è un cambiamento in uno qualsiasi dei suoi attributi, fornisce un modo senza soluzione di continuità di transizione al valore modificato. Ho giocato con questo widget per qualche tempo e ho potuto sperimentare alcune animazioni che mi piacerebbe condividere con voi più avanti in questo articolo.
Prima di iniziare effettivamente con AnimatedContainer, vorrei mostrare il comportamento di un normale widget Container per la modifica dei valori e quindi passare a AnimatedContainer. In questo modo, saremo in grado di capire meglio cosa AnimatedContainer porta al tavolo che Container non lo fa.
Cambieremo gli attributiheight ewidth diContainer su alcuni eventi come fare clic e vedere come appare la transizione.
In questo esempio cambieremo il heighte widthdel nostro Containerfacendo clic sul Container stesso. Quindi l’albero del widget sarà semplicemente un Containeral centro dello schermo avvolto con unGestureDetectorper rilevare il clic sulContainerusandoonTap callback. Seguito è riportato il codice che:
Così che cosa stiamo facendo qui è la modifica dei valori delle variabili containerHeight e containerWidth il rubinetto di Container . Let’s run e vedere il comportamento
Si vede che il passaggio è brusco in natura e non lucida a tutti!
Ora proviamo la stessa cosa conAnimatedContainer e poi passiamo a provare animazioni più interessanti con lo stesso.
Comportamento del contenitore animato
Il codice per questo è praticamente lo stesso del precedente, tranne che dobbiamo cambiare il widget daContainer aAnimatedContainer. Dopo aver modificato il widget in AnimatedContainer, è necessario passare l’attributo Duration per AnimatedContainer. Specifica il periodo di tempo o la durata per cui si desidera completare il comportamento di animazione. Quindi imposta la proprietàDuration proprio come di seguito:
eseguire il codice aggiornato e osservare il comportamento di questo tempo
et Voilà !!!
È molto più bello da vedere. Proviamo a sperimentare con più attributi.
Cambia colore:
Poiché il numero di attributi che stiamo animando sta aumentando , è meglio usare un booleano per sapere quale stato è il contenitore al momento. Se è espanso o meno. Il vantaggio di farlo è che all’interno di setState() avremo meno attributi da gestire. Ci limiteremo a passare il booleano e che sarà.
Quindi vai avanti e aggiungi una variabile booleana:
bool isExpanded = false;
Aggiorna anche il widgetAnimatedContainer nell’albero dei widget come segue:
Il cambiamento è che abbiamo aggiunto un color attributo AnimatedContainer e gli altri due attributi height e width sono assegnati i valori in base a se il AnimatedContainer è espansa o non.
È necessario eseguire un’ultima modifica, ovvero aggiornare setState() come segue:
setState((){
isExpanded = !isExpanded;
});
Cambia in borderRadius:
Proprio come gli altri attributi si può anche animare il confine raggio di AnimatedContainer in fase di runtime. Per aggiungere la proprietàborderRadius, dovremo passare primaBoxDecoration all’attributodecoration e poi all’interno del quale passeremo ad essoborderRadius. Just like how you’d set borderRadius for usual Container.
Notice that I’ve moved the color attribute inside BoxDecoration because we can’t specify color and decoration at the same time, just like Container.
This looks great so far. Ma in questo momento l’animazione è piuttosto “vanilla”, il che significa che si anima linearmente tra i due valori. Che ne dici di giocare con la curva o il ritmo dell’animazione.
Aggiunta dell’attributo curva:
La mia curva preferita è Curves.bounceOut. Proviamoci. Inoltre, aumentiamo un po ‘ duration.
duration: Duration(
milliseconds: 1000,
),
curve: Curves.bounceOut,
As an excercise, I suggest you to also try out other curves.
Similarly, you can also experiment with other parameters of AnimatedContainer like transformmarginpadding etc. You can create complex animations when you combine multiple attributes together. I won’t be explaining these animations in this article for brevity but this is what I was able to achieve :
