Flutter animáció: A Flutter Implicit Animation Widgets Pt. 1

Flutter Animation Widgets

Implicit Widgets: Widgetek, amelyek azonnal készen állnak az animációra – olyan widgetek, mint AnimatedContainer, Hero, FadeTransition.
Explicit Widgetek: Itt explicit módon határozzuk meg, hogy az animációs widgetek hogyan nézzenek ki vagy viselkedjenek a Animator, AnimationController, Tween és mások segítségével.

Ebben a cikkben arra fogunk koncentrálni, hogyan viselkednek a Flutter implicit animációs widgetek, hogyan vannak implementálva, és megnézzük, hol tudjuk őket alkalmazni.

A minta…

Azzal szeretném kezdeni, hogy rámutatok az implicit módon animált widgetek használatának mintájára. Ha nem is az összes, de a legtöbb widget, amit itt tárgyalni fogunk, hasonló felépítésű lesz.

A minta 101:

1. A widget animációjának kiváltásáért felelős konkrét tulajdonságok meghatározása.
2. Létrehozzuk az AnimatedSomethingWidgetet a definiált tulajdonságokkal, például height, width.
3. Az animáció elindítása a widget újbóli felépítésével, ami leggyakrabban UI-k esetében a setState() használatával történik, a definiált tulajdonságokhoz rendelt új értékekkel. Ebben a cikkben erre úgy fogok hivatkozni, mint az animáció “kiváltására”.

A továbbiakban a widgeteket a beállítás bonyolultsága alapján kategorizálom (Series Pt. 1: Easy, Series Pt. 2: Intermediate, and Advanced)- a forráskód alább elérhető.

AnimatedContainer

A Container osztály segítségével létrehozhatsz egy widgetet olyan speciális tulajdonságokkal, mint height, width, color és így tovább. Ezt általában gyermek widgetek csomagolására használják, hogy kényelmesen kezelhessék tulajdonságaikat, például a méreteket, a kitöltéseket és a margókat.

A AnimatedContainer segítségével animálhatunk egy hagyományos Container-ot, csak a tulajdonságainak megváltoztatásával. Automatikusan átállítja a színt, a méreteket anélkül, hogy kifejezetten egyéni tweenseket vagy vezérlőket kellene beállítania.

Setup

1. A widget alapértelmezett tulajdonságainak létrehozása.
2. Elkészít egy AnimationContainerot a tulajdonságok felhasználásával.
3. Elindítja az animációt a widget új tulajdonságokkal történő újraépítésével.

Triggerek

• méretek/méretek (pl. height, width, borderRadius, padding)
• színek, alak és így tovább!

További finomítások
Az opcionális curvebeállításokkal is beállíthatod, hogy az animáció a beállított konfigurációk alapján simábbnak tűnjön.

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

Készítsen fantasztikus animált oszlopdiagramokat ezzel a widgettel!

Flutter Widget of the Week
https://www.youtube.com/watch?v=yI-8QHpGIP4

AnimatedCrossFade

Keresztbe haladó animációk (a.k.a. dissolve) fokozatosan elhalványítanak egy UI-komponenst, miközben egyidejűleg egy másik UI-komponenst halványítanak be.

A AnimatedCrossFade egy olyan widget, amely cross-fade átmenetet biztosít két adott gyermek widget közötti váltáskor.

Setup

1. Definiáljunk egy bool változót, amely a widgetek megjelenítésének/elrejtésének zászlójaként fog működni
2. A zászló változót rendeljük a AnimatedCrossFade widgethez.
3. Az animáció elindítása a crossFadeState tulajdonság értékének frissítésével.

Trigger

• crossFadeState

További finomítások
Az opcionális curve beállítását a firstCurve és secondCurve segítségével végezheti el.

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

Piszkáljuk meg a sávdiagramunkat egy betöltési indikátor hozzáadásával!

AnimatedDefaultTextStyle

DefaultTextStyle osztály a Text widgetre alkalmazott kezdeti szövegstílus. A AnimatedDefaultTextStyle segítségével mostantól a Text widgetjeinket, vagy akár a CTA-kat is megnyerőbbé tehetjük.

Setup

1. A nem végleges textStyle változó definiálása.
2. A definiált változót rendelje a widget textStyle tulajdonságához.
3. Az animáció elindítása a deklarált stílus frissítésével.

Triggers

• 1. lehetőség. A textStyle közvetlen megváltoztatásával.

• 2. lehetőség. A tulajdonságok frissítése a widgethez csatolt TextStyle belsejében.

További finomítások

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

Adjunk címkéket az oszlopdiagramunk belsejébe!

AnimatedPadding

AnimatedPadding segítségével a Padding widgetben futás közben egy adott időtartamon belül átmenetileg megváltozik a kitöltés.

Setup

1. A padding változó definiálása.
2. Hozzuk létre a AnimatedPadding változót a deklarált padding értékkel.
3. Kezdjük el az animációt a deklarált padding érték frissítésével.

Trigger

• padding

További finomítások

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

Vissza az animált oszlopdiagramjainkhoz!
Mi lenne, ha hozzáadnánk egy gyermek Container? Csomagoljuk be egy AnimatedPadding belsejébe, a betétekkel felülről tolva.

A hét Flutter Widgetje
https://www.youtube.com/watch?v=PY2m0fhGNz4

AnimatedOpacity

AzOpacity eléggé magától értetődő – egy UI komponens átláthatóságának frissítéséért felelős. A AnimatedOpacity egy widget az alapértelmezett Opacity widget tetején – a opacity tulajdonsága alapján animálja a változásokat.

Setup

1. Az animáció duration.
2. A _opacity változó definiálása.
3. A deklarált _opacity érték frissítésével indítsuk el az animációt.

Trigger

• opacity

Meglátjuk, hogy majdnem hasonló a AnimatedCrossFadehez. Azonban, ahogy a beállításban látható, ehhez nem kell két gyermek widgetet becsomagolni – a widget csak elhalványul.

A hét flutter widgetje
https://www.youtube.com/watch?v=9hltevOHQBw

AnimatedPhysicalModel

Egy widget, amely automatikusan átmenetet képez egy PhysicalModel widget borderRadius és elevation változása között.

Setup

1. Meghatározza a színek és a kívánt borderRadius vagy elevation állapotváltozókat.
2. Az AnimatedPhysicalModel widget írásakor csatolja.
3. A deklarált értékek frissítésével indítsa el az animációt.

Triggers

• borderRadius
• elevation
• shadowColor

További javítások!

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

Ez a widget a elevation színének változásait is átmenetet képez, így úgy tűnik, mintha egy tükröződő árnyék lenne alatta. Ezt opcionálisan engedélyezheti vagy letilthatja a animateShadowColor tulajdonság frissítésével.

AnimatedPositioned

Ez a widget a hagyományos Positioned widget tetejére íródik. Segít átállítani a widget pozícióját egy Stack widgetben, a pozícióértékek frissített készlete alapján.

Figyelem: Ez a widget csak akkor működik, ha egy Stack widget gyermeke.

Használat

1. Az animáció duration meghatározására.
2. Meghatározza a widget pozíciójának állapotváltozóit.
3. Az animáció elindítása a deklarált pozícióértékek frissítésével.

Triggers

• top, right, left, bottom

Próbáljuk meg animálni az oszlopdiagramjaink inicializálását!
Mint mindig, további finomításokat alkalmazhatunk a görbékre! De ezúttal nézzük meg, hogyan nézne ki, ha Curves.fastOutSlowIn használnánk az oszlopdiagramjainkban! 😎

AnimatedSize

AnimatedSize a mérete a gyermek widget méreteinek – height és width – alapján változik. Valószínűleg hasonlít egy AnimatedContainer-hoz, azonban ez a widget csak a fent említett tulajdonságértékekre összpontosít.

MEGJEGYZÉS: A AnimatedSize widgethez egy Ticker objektumot kell hozzáadni a widgetfában. Ellenkező esetben a widget animálásakor futásidőben hiba lép fel.

Usage

1. Meghatározza az animáció duration.
2. Meghatározza a _height és _width változót.
3. Adjunk meg egy Ticker objektumot a widget fában, rendeljük this a widget vsync tulajdonságához.
4. Indítsuk el az animációt a deklarált dimenzióértékek frissítésével.

Triggers

• height és width

Hát, ez elég sok, amit el kell sajátítani…

Hát, a widgetek a Flutter központi elemei a gyönyörű és hatékony alkalmazások építéséhez – minden, amit olvasol, egy Widget! Ne felejts el meginni egy csésze kávét, vagy szundikálj egyet, mielőtt elkezdesz kódolni valami varázslatosat!

Következtetés

Ezek a widgetek közül néhányat könnyen beállíthatónak találtam. Amint befejezem a következő sorozat megírását, hozzáadom a linket!