Třepotavá animace: 1

Flutter Animation Widgets

Implicitní widgety:
Explicitní widgety: Widgety, které jsou připraveny k animaci ihned po spuštění – widgety jako AnimatedContainer, Hero, FadeTransition:

V tomto článku se zaměříme na to, jak se implicitní animační widgety Flutteru chovají, jak jsou implementovány, a podíváme se, kde je můžeme použít.

Vzor…

Na začátku bych rád poukázal na vzor pro použití implicitně animovaných widgetů. Pokud ne všechny, tak většina widgetů, které zde budeme probírat, bude mít podobné nastavení.

Vzor 101:

1. Definování konkrétních vlastností, které jsou zodpovědné za spuštění animace widgetu.
2. Vytvoření widgetu AnimatedSomething s definovanými vlastnostmi, například height, width.
3. Spuštění animace přestavením widgetu, nejčastěji se provádí u uživatelských rozhraní pomocí setState(), s novými hodnotami přiřazenými definovaným vlastnostem. V tomto článku to budu označovat jako „spouštění“ animace.

Dále budu widgety kategorizovat podle složitosti jejich nastavení (Série 1. část: snadná, Série 2. část: středně pokročilá a pokročilá)- zdrojový kód je k dispozici níže.

AnimatedContainer

Třída Container vám pomůže vytvořit widget se specifickými vlastnostmi, jako jsou height, width, color a další. Běžně se používá k obalování podřízených widgetů, aby bylo možné pohodlně spravovat jejich vlastnosti, jako jsou velikosti, výplně a okraje.

Pomocí AnimatedContainer můžete animovat běžný Container pouhou změnou jeho vlastností. Automaticky přechází barva, velikosti, aniž byste museli explicitně nastavovat vlastní tweeny nebo ovladače.

Nastavení

1. Vytvoří výchozí vlastnosti widgetu.
2. Sestavte AnimationContainer pomocí vlastností.
3. Začněte animaci přestavením widgetu s novými vlastnostmi.

Trigery

• rozměry/velikosti (např. height, width, borderRadius, padding)
• barvy, tvar a další!

Další úpravy
Můžete také nastavit volitelný curve, aby byla animace plynulejší na základě nastavených konfigurací.

AnimatedContainer(
curve: Curves.bounceInOut,
...
)

Vytvořte si pomocí tohoto widgetu úžasné animované sloupcové grafy!

Flutter Widget týdne
https://www.youtube.com/watch?v=yI-8QHpGIP4

AnimatedCrossFade

Cross-fade animace (a.K.a. dissolve) postupně vybledne součást uživatelského rozhraní a současně vybledne jiná součást uživatelského rozhraní.

AnimatedCrossFadeJedná se o widget, který zajišťuje přechod cross-fade při přepínání mezi dvěma danými podřízenými widgety.

Nastavení

1. Definice proměnné bool, která bude sloužit jako příznak pro zobrazování/skrývání widgetů
2. Přiřazení proměnné příznak widgetu AnimatedCrossFade.
3. Začněte animaci aktualizací hodnoty vlastnosti crossFadeState.

Trigger

• crossFadeState

Další úpravy
Prostřednictvím firstCurve a secondCurve můžete nastavit nepovinné curve.

AnimatedCrossFade(
firstCurve: Curves.bounceIn,
secondCurve: Curves.bounceOut,
...
)

Vylepšeme naše sloupcové grafy přidáním ukazatele načítání!

Třída AnimatedDefaultTextStyle

DefaultTextStyle je výchozí textový styl použitý na widget Text. Pomocí AnimatedDefaultTextStyle nyní můžete naše widgety Text nebo i CTA udělat poutavějšími.

Nastavení

1. Definice nefinální proměnné textStyle.
2. Přiřaďte definovanou proměnnou k vlastnosti textStyle widgetu.
3. Začněte animaci aktualizací deklarovaného stylu.

Triggers

• Varianta 1. Přiřazení proměnné k vlastnosti textStyle. Přímou změnou textStyle.

• Možnost 2. Aktualizací vlastností uvnitř TextStyle připojeného k widgetu.

Další úpravy

AnimatedDefaultTextStyle(
curve: Curves.elasticIn,
...
)

Přidáme popisky uvnitř našich sloupcových grafů!

AnimatedPadding

AnimatedPadding pomáhá přecházet změnám výplně Padding widgetu během běhu v daném čase.

Nastavení

1. Definice proměnné padding.
2. Vytvořte proměnnou AnimatedPadding s deklarovanou hodnotou padding.
3. Začněte animaci aktualizací deklarované hodnoty padding.

Trigger

• padding

Další úpravy

AnimatedPadding(
curve: Curves.elasticInOut,
...
)

Vraťme se k našim animovaným sloupcovým grafům!
Co takhle přidat dítě Container? Zabalíme ji dovnitř AnimatedPadding s vložkami, které ji budou tlačit shora.

Flutter Widget týdne
https://www.youtube.com/watch?v=PY2m0fhGNz4

AnimatedOpacity

Opacity je celkem srozumitelný – je zodpovědný za aktualizaci průhlednosti komponenty uživatelského rozhraní. AnimatedOpacity je widget nad výchozím widgetem Opacity – animuje změny na základě své vlastnosti opacity.

Nastavení

1. Definice proměnné duration animace.
2. Definice proměnné _opacity.
3. Začněte animaci aktualizací deklarované hodnoty _opacity.

Trigger

• opacity

Všimněte si, že je to téměř podobné jako AnimatedCrossFade. Jak je však vidět v nastavení, nevyžaduje to obalení dvou podřízených widgetů – widget prostě zmizí.

Flutter Widget of the Week
https://www.youtube.com/watch?v=9hltevOHQBw

AnimatedPhysicalModel

Widget, který automaticky přechází změnu v borderRadius a elevation widgetu PhysicalModel.

Nastavení

1. Definice stavových proměnných pro barvy a požadované borderRadius nebo elevation.
2. Zapojte ji při zápisu widgetu AnimatedPhysicalModel.
3. Začněte animaci aktualizací deklarovaných hodnot.

Triggers

• borderRadius
• elevation
• shadowColor

Další úpravy!

AnimatedPhysicalModel(
curve: Curves.bounceInOut,
...
)

Tento widget také přechází změny v barvě elevation, takže to vypadá, že je pod ním reflexní stín. Tuto funkci můžete volitelně povolit nebo zakázat aktualizací vlastnosti animateShadowColor.

AnimatedPositioned

Tento widget je napsán nad tradičním widgetem Positioned. Pomáhá vám přecházet pozici vašeho widgetu ve widgetu Stack s ohledem na aktualizovanou sadu hodnot pozice.

POZNÁMKA: Tento widget funguje pouze v případě, že je potomkem widgetu Stack.

Použití

1. Definice duration animace.
2. Definice stavových proměnných pro pozici widgetu.
3. Spuštění animace aktualizací deklarovaných hodnot pozice.

Triggers

• top, right, left, bottom

Zkusíme animovat inicializaci našich sloupcových grafů!
Jako vždy můžete použít další úpravy křivek! Tentokrát se ale podívejme, jak by to vypadalo, kdybychom v našich sloupcových grafech použili Curves.fastOutSlowIn! 😎

AnimatedSize

AnimatedSize mění svou velikost na základě rozměrů svého podřízeného widgetu – height a width. Je to pravděpodobně podobné jako u AnimatedContainer, nicméně tento widget se zaměřuje pouze na výše zmíněné hodnoty vlastností.

POZNÁMKA: Pro widget AnimatedSize je nutné přidat do stromu widgetů objekt Ticker. V opačném případě narazíte za běhu na chybu při animaci widgetu.

Usage

1. Definice proměnné duration animace.
2. Definice proměnné _height a _width.
3. Zajistěte objekt Ticker ve stromu widgetů, přiřaďte this do vlastnosti vsync widgetu.
4. Začněte animaci aktualizací deklarovaných hodnot rozměrů.

Triggers

• height a width

No, to je hodně na zvládnutí…

No, widgety jsou jádrem Flutteru pro vytváření krásných a výkonných aplikací – vše, co čtete, je Widget! Nezapomeňte si vypít šálek kávy nebo si dát energetického šlofíka, než začnete kódovat nějaká kouzla!“

Závěr

Toto jsou některé z widgetů, jejichž nastavení mi přišlo snadné. Odkaz na další sérii přidám, jakmile ji dopíšu!