Flutter SDK bietet Entwicklern ein eingebautes Widget mit dem Namen AnimatedContainer . Wie der Name schon sagt, handelt es sich um einen Container, der in irgendeiner Weise animiert werden kann. Seine Attribute sind also genau wie das übliche Container Widget, mit der Ausnahme, dass es bei jeder Änderung eines seiner Attribute einen nahtlosen Übergang zum geänderten Wert bietet. Ich spiele schon seit einiger Zeit mit diesem Widget herum und könnte einige Animationen ausprobieren, die ich später in diesem Artikel mit Ihnen teilen möchte.

Bevor wir tatsächlich mit AnimatedContainer beginnen, möchte ich das Verhalten eines üblichen Container Widgets für die Änderung von Werten zeigen und dann zu AnimatedContainer . Auf diese Weise können wir besser verstehen, was AnimatedContainer auf den Tisch bringt, was Container nicht tut.

Wir werden die height und width Attribute der Container bei einem Ereignis wie click ändern und sehen, wie der Übergang aussieht.

In diesem Beispiel ändern wir die height und width unserer Container, indem wir auf die Container selbst klicken. Der Widget-Baum wird also einfach eine Container in der Mitte des Bildschirms sein, die mit einer GestureDetector umwickelt ist, um den Klick auf die Container mit onTap Rückruf. Es folgt der Code dafür:

Wir ändern hier also die Werte der Variablen containerHeight und containerWidth auf das Tippen von Container . Lassen Sie uns laufen und das Verhalten sehen

Sie sehen, der Übergang ist abrupt und überhaupt nicht klar!

Versuchen wir nun dasselbe mit AnimatedContainer und probieren Sie dann weitere coole Animationen aus.

Animiertes Containerverhalten

Der Code dafür ist so ziemlich der gleiche wie zuvor, außer dass wir das Widget von Container zu AnimatedContainer ändern müssen. Nachdem Sie das Widget in AnimatedContainer geändert haben, müssen Sie das Attribut Duration für AnimatedContainer . Dies gibt den Zeitraum oder die Dauer an, über die das Animationsverhalten abgeschlossen werden soll. Setzen Sie also die Eigenschaft Duration wie folgt:

Lassen Sie uns den aktualisierten Code ausführen und diesmal das Verhalten beobachten

Voilà !!!

Das ist so viel besser zu sehen. Versuchen wir, mit mehr Attributen zu experimentieren.

Farbänderung:

Da die Anzahl der Attribute, die wir animieren, zunimmt, ist es besser, einen Booleschen Wert zu verwenden, um zu wissen, in welchem Zustand sich der Container gerade befindet. Ob es erweitert wird oder nicht. Der Vorteil dabei ist, dass wir innerhalb von setState() weniger Attribute zu behandeln haben. Wir werden einfach den booleschen Wert umschalten und das wird es sein.

Fügen Sie also eine boolesche Variable hinzu:

bool isExpanded = false;

Aktualisieren Sie auch das AnimatedContainer Widget im Widget-Baum wie folgt:

Die Änderung hier ist, dass wir der AnimatedContainer und den anderen beiden Attributen height und width ein color hinzugefügt haben Werte basierend darauf, ob die AnimatedContainer wird erweitert oder nicht.

Eine letzte Änderung muss vorgenommen werden, dh die setState() wie folgt aktualisiert werden:

setState((){
isExpanded = !isExpanded;
});

Änderung im borderRadius:

Genau wie andere Attribute können wir auch den borderradius des AnimatedContainer zur Laufzeit animieren. Um die Eigenschaft borderRadius hinzuzufügen, müssen wir zuerst BoxDecoration an das Attribut decoration übergeben und dann innerhalb dessen die borderRadius übergeben. 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. Aber im Moment ist die Animation ziemlich ‚Vanille‘, was bedeutet, dass sie nur linear zwischen den beiden Werten animiert wird. Wie wäre es mit der Kurve oder dem Rhythmus der Animation zu spielen.

Kurvenattribut hinzufügen:

Meine Lieblingskurve ist Curves.bounceOut. Lass es uns versuchen. Lassen Sie uns auch die duration ein wenig erhöhen.

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 :

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.