Chvění SDK poskytuje vývojářům s vestavěný widget s názvem AnimatedContainer . Jak název napovídá, jedná se o kontejner, který lze nějakým způsobem animovat. Takže jeho atributy jsou stejně jako obvykléContainer widget kromě toho, že kdykoli dojde ke změně některého z jeho atributů, poskytuje bezproblémový způsob přechodu na změněnou hodnotu. Hrál jsem si s tímto widgetem už nějakou dobu a mohl bych experimentovat s některými animacemi, které bych s vámi rád sdílel později v tomto článku.
ještě Než začneme s AnimatedContainer, já bych chtěl ukázat chování obvykle Container widget pro změnu v hodnotách a pak se přesunout do AnimatedContainer. Tímto způsobem budeme schopni lépe porozumět tomu, co AnimatedContainer přináší do tabulky, která Container ne.
změnit na heightwidth atributy Container na některé události, jako je kliknutí a uvidíte, jak přechod se objeví.
V tomto příkladu budeme měnit v heightwidthContainer při kliknutí na Container sám. Takže widget tree bude prostě Container ve středu obrazovky zabalené s GestureDetector detekovat kliknutí na Container pomocí onTap zpětné volání. Následující je kód, který:
Takže to, co zde děláme, je změna hodnoty proměnné containerHeightcontainerWidth na klepnutí Container . Pojďme spustit a vidět chování
vidíte, přechod je náhlý charakter a není při smyslech!
nyní zkusme to samé s AnimatedContainer a pak přejděte k pokusu o další skvělé animace se stejným.
Animované Kontejner chování
kód pro to je skoro stejný jako předchozí kromě toho, že musíme změnit widget z prvku ContainerAnimatedContainer. Po změně widget AnimatedContainer, musíte projít Duration atribut AnimatedContainer. To určuje časové období nebo dobu, po kterou chcete animační chování dokončit. Takže nastavte Duration vlastnost stejně jako níže:
Pojďme spustit aktualizovaný kód a sledovat chování této době
Voila !!!
to je mnohem lepší vidět. Zkusme experimentovat s více atributy.
Změna v barvě:
Jako počet atributů jsme animaci se zvyšuje , je lepší použít boolean vědět v jakém stavu kontejneru je v tuto chvíli. Ať už je rozšířen nebo ne. Výhodou přitom je, že uvnitř setState() budeme mít méně atributy řešit. Prostě přepneme boolean a bude to.
tak jděte do toho a přidejte booleovskou proměnnou:
bool isExpanded = false;
také aktualizujteAnimatedContainer widget ve stromu widgetů následovně:
změna tady je, že jsme přidali color atribut AnimatedContainer a další dva atributy heightwidth jsou přiřazeny hodnoty na základě toho, zda AnimatedContainer je rozšířen nebo ne.
je třeba provést jednu poslední změnu, tj. aktualizaci setState() následovně:
setState((){
isExpanded = !isExpanded;
});
Změna v borderRadius:
Stejně jako ostatní atributy můžeme také animovat hranice poloměr AnimatedContainer za běhu. Pro přidání borderRadius majetek, budeme muset projít BoxDecorationdecoration atribut a pak uvnitř kterého budeme projít borderRadius. 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. Ale právě teď je animace docela „vanilková“, což znamená, že se lineárně animuje mezi těmito dvěma hodnotami. Co takhle hrát s křivkou nebo rytmem animace.
přidání atributu křivky:
moje oblíbená křivka je Curves.bounceOut. Zkusíme to. Také trochu zvýšíme 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 :
