Share
Animațiile, atunci când sunt utilizate corect, pot aduce o mare diferență în modul în care utilizatorii percep aplicația dvs. O aplicație cu o mulțime de animații rapide și subtile tinde să pară mult mai lustruită și mai profesionistă decât una fără. Pe Google Play, o piață supraaglomerată, care poate însemna diferența dintre succes și eșec.
Flutterul este, probabil, singurul framework de dezvoltare a aplicațiilor hibride disponibil astăzi, care vă permite să creați animații complexe care pot rula în mod constant la 60 de cadre pe secundă. În acest tutorial, vă ajut să înțelegeți elementele de bază ale animațiilor widget-uri Flutter. Vă voi prezenta și câteva widget-uri noi care vă pot simplifica codul de animație.
Cadrul Flutter vă așteaptă să urmați o abordare funcțională, reactivă a programării. Prin urmare, pentru a putea anima un widget, trebuie să aveți posibilitatea să actualizați starea sa în mod repetat, la intervale bine definite.
Pentru a crea un widget ușor de animat, începeți prin a crea o clasă care extinde StatefulWidget clasa și suprascrie createState () metodă. În interiorul metodei, asigurați-vă că returnați a Stat instanță.
clasa MyApp extinde StatefulWidget @override StatecreateState () returnează noua MyState ();
Pentru a fi animat, obiectul de stat pe care îl asociați cu widgetul dvs. statal nu trebuie doar să extinde Stat clasa, trebuie să utilizeze și un mixin numit SingleTickerProviderStateMixin. După cum sugerează și numele, mixinul oferă a pendulă obiect, care generează în mod repetat callback-uri, cunoscute în mod convențional drept căpușe. Deoarece căpușele sunt generate în mod repetat la intervale uniforme de timp, le puteți folosi pentru a decide când cadrele individuale ale animației dvs. sunt redate.
clasa MyState extinde statulcu SingleTickerProviderStateMixin @override Widget build (Context BuildContext) // Mai mult cod aici
O animație tween este una dintre cele mai simple animații pe care le puteți crea cu Flutter. În timp ce îl creați, tot ce trebuie să faceți este să oferiți două valori diferite: o valoare de pornire și o valoare finală. Cadrul va genera automat un set de valori intermediare - sau valori între valori - care pornesc de la valoarea de pornire și cresc ușor pentru a se potrivi cu valoarea finală. Aplicând treptat aceste valori intermediare unei proprietăți a widget-ului, animați acea proprietate.
Să creați acum o animație simplă tween care să mute un widget din colțul din stânga sus al ecranului în colțul din dreapta sus al ecranului. Cu alte cuvinte, hai să animăm stânga proprietatea unui widget.
Pentru a crea și controla animația, vei avea nevoie de un Animaţie obiect și an AnimationController obiect. Adăugați-le ca variabile membre ale statului dvs.:
Animaţieanimaţie; Controler controller AnimationController;
Trebuie să inițializați ambele obiecte prin suprascrierea initState () metoda din clasa ta. În interiorul metodei, apelați constructorul AnimationController pentru a inițializa controlerul. Se așteaptă a TickerProvider obiect ca una dintre intrările sale. Deoarece statul folosește deja SingleTickerProviderStateMixin mixin, poți trece acest la el. În plus, puteți utiliza funcția durată proprietate pentru a specifica durata animației.
Următorul cod creează un controler de animație a cărui durată este de patru secunde:
@override void initState () super.initState (); controller = new AnimationController (vsync: aceasta, durata: noua Durata (secunde: 4)); // Mai multe coduri aici
În acest moment, puteți crea un Tween obiect care specifică valorile de început și sfârșit ale animației.
Tween tween = nou Tween(începutul: 10,0, sfârșitul: 180,0);
Pentru a asocia Tween obiect cu AnimationController obiect, trebuie să-i numiți anima() metodă. Valoarea returnată a metodei este a Animaţie obiect, pe care îl puteți stoca în cea de-a doua variabilă membru a clasei dvs..
animație = tween.animate (controler);
Animaţie obiect generează un eveniment de animație pentru fiecare bifă a biletului, pe care trebuie să o ocupați pentru ca animația dvs. să funcționeze. Pentru a face acest lucru, puteți să îl utilizați addListener () metodă. În plus, în cadrul procesatorului de evenimente, trebuie să apelați setState () pentru a actualiza starea widget-ului dvs. și pentru a-l reprograma. Următorul cod vă arată cum:
animație.addListener (() setState (() ););
Rețineți că nu trebuie să scrieți niciun cod în interiorul setState () dacă nu aveți alte variabile de stare pentru actualizare.
În cele din urmă, pentru a începe animația, trebuie să apelați redirecţiona() metoda controlerului de animație.
controller.forward ();
Animația este gata. Cu toate acestea, încă nu l-ați aplicat la niciun widget care este desenat pe ecran. Pentru moment, vă sugerez să o aplicați unui a poziţionat widget care conține un material icoană widget. Pentru a face acest lucru, în timp ce creați widgetul, setați pur și simplu valoarea acestuia stânga proprietate la valoare proprietate a Animaţie obiect.
În consecință, adăugați următorul cod, care înlocuiește codul construi() metoda, la stat:
@override Widget build (Context BuildContext) retur nou Container (culoare: Colors.white, child: new Stack (copii:[new Positioned (copil: nou material (copil: noul Icon (Icons.airport_shuttle, textDirection: TextDirection.ltr, dimensiune: 81.0)), stânga: animație.value, textDirection: TextDirection.ltr,));
Rețineți că există a Grămadă widgetul din arborele widget de mai sus pentru că a poziţionat widget-ul trebuie să fie întotdeauna încorporat într-unul.
Puteți rula aplicația acum pentru a vedea animația.
Dacă doriți să fiți anunțat când animația sa încheiat, puteți atașa un mesaj AnimationStatusListener obiect față de dvs. Animaţie obiect. În interiorul ascultătorului, dacă starea curentă de animație este terminat sau respins, puteți fi siguri că animația sa încheiat.
Animațiile tween din Flutter sunt reversibile. Acesta este motivul pentru care există două constante de stare diferite care semnifică sfârșitul unei animații. Dacă este starea curentă terminat, înseamnă că animația sa încheiat la valoarea finală a versiunii tween. Dacă este respins, înseamnă că animația sa încheiat la valoarea de pornire. Folosind cele două stări și redirecţiona() și inversa() metode, puteți crea cu ușurință între animații.
Următorul cod, pe care îl puteți adăuga la initState () , vă arată cum să inversați și să repetați animația creată în etapa anterioară:
animation.addStatusListener ((status) if (status == AnimationStatus.com completat) controller.reverse (); else if (status == AnimationStatus.dismissed) controller.forward (););
Dacă rulați aplicația din nou, ar trebui să vedeți că animația se repetă fără sfârșit.
Cadrul Flutter oferă câteva widget-uri ușor de animat pe care le puteți folosi pentru a vă face codul de animație puțin mai complicat și mai reutilizabil. Toate acestea sunt subclase ale AnimatedWidget clasa și așteptați Animaţie sau AnimationController obiecte din constructorii lor.
Una dintre cele mai frecvent utilizate widget-uri animate este RotationTransition widget. Vă permite să aplicați rapid o animație de rotație copiilor săi. Pentru ao folosi, creați mai întâi un nou controller de animație. Următorul cod creează unul a cărui durată este setată la șase secunde:
controller = new AnimationController (vsync: aceasta, durata: noua durată (secunde: 6));
Pentru a începe animația de data aceasta, în loc de redirecţiona() utilizați metoda repeta() metodă. Acest lucru asigură faptul că animația se repetă fără sfârșit.
controller.repeat ();
Pentru a păstra lucrurile simple, puteți folosi a Text widget ca copil al RotationTransition widget. Deci, creați un copac widget în consecință. În timp ce creați RotationTransition widget, totuși, asigurați-vă că setați valoarea acestuia transformă proprietate la AnimationController obiect pe care l-ai creat. Opțional, puteți plasa atât widget-urile în interiorul unui Centru widget. Iată cum:
Accentsconagua
@override Widget build (Context BuildContext) retur nou centru (copil: new RotationTransition (transformă: controler, copil: text nou ("\ u 1F43A", textDirection: TextDirection.ltr, ,))); În codul de mai sus, am folosit un cod de cod emodian Unicode ca fiind conținutul codului Text widget. Acest lucru este permis deoarece flutter acceptă emoji chiar din cutie.
La rularea aplicației din nou, ar trebui să vedeți ceva de genul ăsta pe ecran:
Foarte similar cu RotationTransition widget-ul este ScaleTransition widget. După cum probabil ați ghicit, vă permite să animați amploarea copiilor săi. În timp ce îl creați, tot ce trebuie să faceți este să treceți AnimationController obiecte față de ei scară proprietate. Următorul cod vă arată cum:
@override Widget build (Context BuildContext) retur nou centru (copil: nou ScaleTransition (scară: controler, copil: text nou ("\ u 1F43A", textDirection: TextDirection.ltr, ,))); Veți putea vedea acum Text Modificarea scării widget-ului în timpul animației.
Dacă vă întrebați de ce nu am creat nimic Tween obiecte pentru animațiile de mai sus, este pentru că, în mod implicit, AnimationController clasa folosește 0.0 și 1.0 ca începe și Sfârșit valorile.
Toate animațiile create în etapele anterioare au urmat o curbă liniară. Ca urmare, ele nu par foarte realiste. Prin modificarea modului Tween obiect generează valori intermediare, puteți schimba acest lucru.
Flutter are o clasă numită CurvedAnimation, care vă permite să aplicați curbele neliniare către tweens. Când îl utilizați cu curbe clasa, care oferă o varietate de curbe, cum ar fi easeIn și easeOut, puteți crea animații care se simt mai naturale.
Pentru a crea un CurvedAnimation obiect, veți avea nevoie de un AnimationController obiect ca părinte. Sunteți liber să utilizați unul dintre controlorii pe care i-ați creat în pașii anteriori sau să creați unul nou. Următorul cod creează un nou controler a cărui durată este setată la cinci secunde și a CurvedAnimation obiect al cărui curba proprietatea este setată la bounceOut curba:
controller = new AnimationController (vsync: aceasta, durata: noua durată (secunde: 5)); CurvedAnimation curvedAnimation = CurveAnimation nou (parentă: controler, curbă: Curves.bounceOut);
Acum puteți crea o Tween obiect și aplicați CurvedAnimation obiectează la el prin chemarea lui anima() metodă. Odată ce animația este gata, nu uitați să adăugați un ascultător la animație, să actualizați starea și apoi să apelați redirecţiona() metodă de pornire.
Tween myTween = noul Tween(început: 150,0, sfârșit: 450,0); animație = myTween.animate (curvedAnimation); animație.addListener (() setState (() );); controller.forward ();
Pentru a vedea animația, hai să o aplicăm la poziţionat lui widget top proprietate. Sunteți liber să adăugați orice widget copil în interiorul lui. În următorul cod, adaug o Text widget afișând un alt emoji.
@override Widget build (Context BuildContext) returnează Stack nou (copii: [new Positioned (copil: text nou ("\ u 26BE", textDirection: TextDirection.ltr, stil: new TextStyle (fontSize: 70.0) : 50.0, top: animație.value // animație)], textDirection: TextDirection.ltr,); După o repornire fierbinte, aplicația dvs. ar trebui să afișeze acum următoarea animație:
Acum cunoașteți elementele de bază ale creării animațiilor tween utilizând cadrul Flutter. În acest tutorial, ați învățat, de asemenea, cum să le faceți să pară mai natural folosind curbele. Înțelegem că, în modul lent, care este modul implicit în timpul dezvoltării, animațiile pot părea un pic leneș și instabil. Doar în modul de lansare puteți vedea adevărata lor performanță.
Pentru a afla mai multe, consultați documentația oficială.
