Google Flutter From Scratch Animere Widgets

Animasjoner, når de brukes riktig, kan gjøre en stor forskjell i hvordan brukerne oppfatter appen din. En app med mange raske, subtile animasjoner har en tendens til å se mye mer polert og profesjonelt enn en uten. På Google Play, en overfylt markedsplass, som kan bety forskjellen mellom suksess og fiasko.

Flutter er kanskje det eneste hybrid app utviklingsramme som er tilgjengelig i dag, som lar deg lage komplekse animasjoner som kan kjøre hele tiden på 60 bilder per sekund. I denne veiledningen hjelper jeg deg å forstå grunnleggende om animerende flutter-widgets. Jeg vil også introdusere deg til noen få nye widgets som kan forenkle animasjonskoden din.

1. Forberede en widget for animasjon

Flutter-rammen forventer at du følger en funksjonell, reaktiv tilnærming til programmering. Derfor, for å kunne animere en widget, må du kunne oppdatere tilstanden gjentatte ganger, med tidsintervaller.

For å lage en widget som er lett å animere, start med å lage en klasse som strekker seg StatefulWidget klasse og overstyrer sin createState () metode. Inne i metoden, sørg for at du returnerer a Stat forekomst.

klasse MyApp utvider StatefulWidget @override State createState () returner nytt MyState (); 

For å være animerbar må statobjektet du knytter sammen med din stateful widget, ikke bare utvide Stat klassen, må den også bruke en mixin som heter SingleTickerProviderStateMixin. Som navnet antyder, tilbyr mixin en ticker objekt, som gjentatte ganger genererer tilbakeringinger, kjent som ticks. Fordi flåttene genereres gjentatte ganger på ensartede tidspunkter, kan du bruke dem til å bestemme når de individuelle rammene av animasjonen blir gjengitt.

klassen MyState utvider staten med SingleTickerProviderStateMixin @override Widget build (BuildContext kontekst) // Mer kode her

2. Opprette en Tween Animasjon

En tween animasjon er en av de enkleste animasjonene du kan lage med Flutter. Mens du oppretter det, er alt du trenger å gjøre, å gi to forskjellige verdier: en startverdi og en sluttverdi. Rammen vil da automatisk generere et sett med mellomverdier - eller mellomliggende verdier - som starter fra startverdien og vokser jevnt for å matche sluttverdien. Ved å bruke disse mellomverdiene gradvis til en egenskap av din widget, animerer du den egenskapen.

La oss nå lage en enkel tween animasjon som flytter en widget fra øverste venstre hjørne av skjermen til øverste høyre hjørne av skjermen. Med andre ord, la oss animere venstre Egenskapen til en widget.

For å opprette og kontrollere animasjonen, trenger du en animasjon objekt og en AnimationController gjenstand. Legg dem til som medlemsvariabler av staten din:

animasjon animasjon; AnimationController controller;

Du må initialisere begge objektene ved å overstyre initState () metode for din klasse. Inne i metoden, ring konstruktøren til AnimationController klasse for å initialisere kontrolleren. Det forventer en TickerProvider objekt som en av dens innganger. Fordi staten allerede bruker SingleTickerProviderStateMixin mixin, du kan passere dette til det. I tillegg kan du bruke varighet Egenskap for å angi varigheten av animasjonen.

Følgende kode oppretter en animasjonsregulator hvis varighet er fire sekunder:

@override void initState () super.initState (); controller = ny AnimationController (vsync: dette, varighet: ny Varighet (sekunder: 4)); // Mer kode her

På dette tidspunktet kan du opprette en Tween objekt angir begynnelses- og sluttverdiene til animasjonen din.

Tween Tween = Ny Tween(begynn: 10,0, slutt: 180,0);

For å forbinde Tween objekt med AnimationController objekt, du må ringe det animere () metode. Avkastningsverdien til metoden er en animasjon objekt, som du kan lagre i variabelen til andre medlem i klassen din.

animasjon = tween.animate (controller);

De animasjon objekt genererer en animasjonsbegivenhet for hvert kryss av ticker, som du må håndtere for animasjonen til arbeid. For å gjøre det, kan du bruke det addListener () metode. I tillegg, i hendelseshåndtereren, må du ringe setState () Metode for å oppdatere statusen til widgeten din og omtale den. Følgende kode viser deg hvordan:

animasjon.addListener (() setState (() ););

Vær oppmerksom på at du ikke trenger å skrive noen kode inni setState () metode med mindre du har andre tilstandsvariabler for å oppdatere.

Til slutt, for å starte animasjonen, må du ringe framover() metode for animasjonskontrolleren.

controller.forward ();

Animasjonen er klar. Men du har fortsatt ikke brukt det på noen widget som blir tegnet på skjermen. For nå foreslår jeg at du bruker den til en posisjonert widget som inneholder et materiale Ikon widget. For å gjøre det, må du bare angi verdien av sin, mens du lager widgeten venstre eiendom til verdi eiendom av animasjon gjenstand.

Følgelig legger du til følgende kode som overstyrer bygge() metode til staten:

@override Widget build (BuildContext kontekst) return new Container (farge: Colors.white, barn: new Stack (barn: [nytt posisjonert (barn: nytt materiale (barn: nytt ikon (ikoner.airport_shuttle, textdirection: textdirection.ltr, størrelse: 81.0)), venstre: animation.value, // animert verdi topp: 30.0 // fast verdi) textDirection: TextDirection.ltr,)); 

Legg merke til at det er en Stable widget i det ovennevnte widget-treet fordi a posisjonert Widget må alltid være innebygd i en.

Du kan kjøre appen din nå for å se animasjonen.

3. Håndtering av animasjonsstatus Hendelser

Hvis du vil bli varslet når animasjonen er avsluttet, kan du legge ved en AnimationStatusListener motsette seg din animasjon gjenstand. Inne i lytteren, om den aktuelle animasjonsstatusen er fullført eller avvist, Du kan være sikker på at animasjonen er avsluttet.

Tween animasjoner i Flutter er reversible. Derfor er det to forskjellige statuskonstanter som angir slutten på en animasjon. Hvis gjeldende status er fullført, det betyr at animasjonen er avsluttet på slutten av tweenen. Hvis det er avvist, det betyr at animasjonen er avsluttet ved startverdien. Bruk av de to statusene og framover() og omvendt() metoder, kan du enkelt lage frem og tilbake mellom animasjoner.

Følgende kode, som du kan legge til i initState () metode, viser hvordan du reverserer og gjentar animasjonen du opprettet i forrige trinn:

animasjon.addStatusListener ((status) hvis (status == AnimationStatus.completed) controller.reverse (); ellers hvis (status == AnimationStatus.dismissed) controller.forward (););

Hvis du kjører appen igjen, bør du se animasjonen gjenta uendelig.

4. Bruke animerte widgets

The Flutter-rammeverket tilbyr noen lett animerbare widgets du kan bruke til å gjøre animasjonskoden litt mindre ordentlig og mer gjenbrukbar. Alle av dem er underklasser av AnimatedWidget klasse og forventer animasjon eller AnimationController objekter i sine konstruktører.

En av de mest brukte animerte widgets er RotationTransition widget. Det lar deg raskt bruke en rotasjonsanimasjon til sine barn. For å bruke det, må du først opprette en ny animasjonsregulator. Følgende kode oppretter en hvis varighet er satt til seks sekunder:

controller = ny AnimationController (vsync: dette, varighet: ny Varighet (sekunder: 6));

For å starte animasjonen denne gangen, i stedet for framover() metode, bruk gjenta() metode. Dette sikrer at animasjonen gjentas uendelig.

controller.repeat ();

For å holde ting enkelt, kan du bruke en Tekst widget som barnet til RotationTransition widget. Så opprett et widget tre tilsvarende. Mens du lager RotationTransition widget, men sørg for at du angir verdien av dens svinger eiendom til AnimationController Motta deg nettopp opprettet. Eventuelt kan du plassere begge widgetene inne i en Senter widget. Dette er hvordan:

@override Widget build (BuildContext kontekst) return new Center (barn: ny RotationTransition (svinger: kontroller, barn: ny tekst ("\ u 1F43A", tekstDirection: TextDirection.ltr, stil: ny TextStyle (fontSize: 85.0) ,))); 

I ovennevnte kode har jeg brukt et Unicode emoji-kodepunkt som innholdet i Tekst widget. Dette er tillatt fordi Flutter støtter emoji rett ut av boksen.

Når du kjører appen igjen, bør du se noe slikt på skjermen:

Svært lik den RotationTransition widget er ScaleTransition widget. Som du kanskje har gjettet, kan du animere omfanget av sine barn. Mens du oppretter det, er alt du trenger å gjøre, å passere AnimationController motsette seg det skala eiendom. Følgende kode viser deg hvordan du:

@override Widget build (BuildContext kontekst) return new Centre (barn: ny ScaleTransition (skala: controller, barn: ny tekst ("\ u 1F43A", textDirection: TextDirection.ltr, stil: ny TextStyle (fontSize: 85.0) ,))); 

Nå kan du se Tekst Widgets skalaendring under animasjonen.

Hvis du lurer på hvorfor vi ikke opprettet noen Tween objekter for de ovennevnte animasjonene, er det fordi, som standard, AnimationController klassen bruker 0.0 og 1.0 som begynne og slutt verdier.

5. Bruk kurver

Alle animasjonene vi opprettet i tidligere trinn fulgte en lineær kurve. Som et resultat ser de ikke veldig realistiske ut. Ved å endre måten Tween objekt genererer mellomverdier, du kan endre det.

Flutter har en klasse kalt CurvedAnimation, som lar deg bruke ikke-lineære kurver til dine tweens. Når du bruker den med Curves klassen, som tilbyr en rekke kurver, for eksempel easeIn og easeOut, du kan lage animasjoner som føles mer naturlige.

Å opprette en CurvedAnimation objekt, du trenger en AnimationController objekt som foreldre Du er fri til å bruke en av kontrollerne du opprettet i tidligere trinn eller opprette en ny. Følgende kode oppretter en ny kontroller som har en varighet på fem sekunder, og a CurvedAnimation objekt hvis kurve Eiendommen er satt til a bounceOut kurve:

controller = ny AnimationController (vsync: dette, varighet: ny Varighet (sekunder: 5)); CurvedAnimation curvedAnimation = ny CurvedAnimation (foreldre: controller, kurve: Curves.bounceOut);

Du kan nå opprette en Tween objekt og bruk CurvedAnimation motsette seg det ved å ringe det animere () metode. Når animasjonen er klar, ikke glem å legge til en lytter til animasjonen, oppdatere staten, og ring deretter framover() metode for å starte den.

Tween myTween = new Tween(begynn: 150,0, slutt: 450,0); animasjon = myTween.animate (curvedAnimation); animasjon.addListener (() setState (() );); controller.forward ();

For å se animasjonen, la oss bruke den til a posisjonert widgeten topp eiendom. Du er fri til å legge til noen barn-widget i den. I den følgende koden legger jeg til en Tekst widget som viser en annen emoji.

@override Widget build (BuildContext kontekst) return new Stack (barn: [ny posisjonert (barn: ny tekst ("\ u 26BE", tekstDirection: TextDirection.ltr, stil: ny TextStyle (fontSize: 70.0)) : 50.0, topp: animasjon.value // animert eiendom)], textDirection: TextDirection.ltr,); 

Etter en varm oppstart, bør appen din nå vise følgende animasjon:

Konklusjon

Du kjenner nå grunnleggende om å skape mellom animasjoner ved hjelp av Flutter-rammen. I denne opplæringen lærte du også hvordan du får dem til å virke mer naturlig ved hjelp av kurver. Forstå at i langsom modus, som er standardmodus under utvikling, kan animasjonene virke litt laggy og ustabile. Det er bare i utgivelsesmodusen at du kan se sin sanne ytelse.

For å lære mer, se den offisielle dokumentasjonen.