Share
Animaties kunnen, wanneer correct gebruikt, een enorm verschil maken in hoe gebruikers uw app waarnemen. Een app met veel snelle, subtiele animaties heeft de neiging om er veel meer gepolijst en professioneel uit te zien dan een zonder. Op Google Play, een overvolle marktplaats, kan dat het verschil betekenen tussen succes en falen.
Flutter is misschien het enige hybride ontwikkelraamwerk dat vandaag beschikbaar is en waarmee je complexe animaties kunt maken die constant kunnen draaien met 60 frames per seconde. In deze tutorial help ik je de basisprincipes van het animeren van Flutter-widgets te begrijpen. Ik zal u ook een paar nieuwe widgets voorstellen die uw animatiecode kunnen vereenvoudigen.
Het Flutter-raamwerk verwacht dat je een functionele, reactieve benadering van programmeren volgt. Daarom, om een widget te kunnen animeren, moet u de staat ervan herhaaldelijk kunnen bijwerken, met goed getimede intervallen.
Als u een widget wilt maken die gemakkelijk te animeren is, maakt u eerst een klasse die de extensie verlengt StatefulWidget klasse en overschrijft het createState () methode. Zorg er binnen de methode voor dat u a Staat aanleg.
class MyApp breidt StatefulWidget uit @override StatecreateState () return new MyState ();
Om animeerbaar te zijn, moet het statusobject dat u aan uw stateful-widget koppelt, niet alleen de extensie verlengen Staat klasse, moet het ook een mixin gebruiken SingleTickerProviderStateMixin. Zoals de naam al doet vermoeden, biedt de mixin een Ticker object, dat herhaaldelijk callbacks genereert, gewoonlijk bekend als ticks. Omdat de ticks herhaaldelijk met uniforme intervallen worden gegenereerd, kunt u ze gebruiken om te bepalen wanneer de afzonderlijke frames van uw animatie worden gerenderd.
klasse MyState breidt State uitmet SingleTickerProviderStateMixin @override Widget-build (BuildContext-context) // Meer code hier
Een tween-animatie is een van de eenvoudigste animaties die u kunt maken met Flutter. Terwijl u het maakt, hoeft u alleen maar twee verschillende waarden op te geven: een beginwaarde en een eindwaarde. Het framework genereert dan automatisch een set tussentijdse waarden - of tussenwaarden - die starten vanaf de startwaarde en vloeiend groeien om overeen te komen met de eindwaarde. Door deze tussentijdse waarden geleidelijk toe te passen op een eigenschap van uw widget, animeert u die eigenschap.
Laten we nu een eenvoudige tween-animatie maken die een widget verplaatst van de linkerbovenhoek van het scherm naar de rechterbovenhoek van het scherm. Met andere woorden, laten we het animeren links eigenschap van een widget.
Om de animatie te maken en te besturen, heb je een animatie object en een AnimationController voorwerp. Voeg ze toe als lidvariabelen van uw staat:
animatieanimatie; AnimationController-controller;
U moet beide objecten initialiseren door de initState () methode van uw klas. Bel binnen de methode de constructor van de AnimationController klasse om de controller te initialiseren. Het verwacht een TickerProvider object als een van zijn ingangen. Omdat de staat al gebruik maakt van de SingleTickerProviderStateMixin mixin, je kan slagen deze ernaar toe. Bovendien kunt u de looptijd eigenschap om de duur van de animatie te specificeren.
Met de volgende code wordt een animatiecontroller gemaakt met een duur van vier seconden:
@override void initState () super.initState (); controller = nieuwe AnimationController (vsync: dit, duur: nieuwe duur (seconden: 4)); // Meer code hier
Op dit punt kunt u een maken Tween object dat de begin- en eindwaarden van uw animatie opgeeft.
Tween tween = nieuwe Tween(begin: 10.0, einde: 180.0);
Om de te associëren Tween object met de AnimationController object, je moet de zijn animeren () methode. De geretourneerde waarde van de methode is een animatie object, dat u kunt opslaan in de tweede lidvariabele van uw klas.
animatie = tween.animate (controller);
De animatie object genereert een animatiegebeurtenis voor elk vinkje van de ticker, die u moet afhandelen om uw animatie te laten werken. Om dit te doen, kunt u het gebruiken addListener () methode. Bovendien, binnen de gebeurtenishandler, moet u de setstate () methode om de status van je widget bij te werken en opnieuw te tekenen. De volgende code laat zien hoe:
animation.addListener (() setState (() ););
Merk op dat u geen code hoeft te schrijven binnen de setstate () methode, tenzij u andere statusvariabelen hebt om bij te werken.
Als laatste, om de animatie te starten, moet u de vooruit() methode van de animatiecontroller.
controller.forward ();
De animatie is klaar. Je hebt het echter nog steeds niet toegepast op een widget die op het scherm wordt getekend. Voor nu, stel ik voor dat je het toepast op een gepositioneerd widget met een materiaal Icoon widget. Om dit te doen, stelt u tijdens het maken van de widget eenvoudig de waarde ervan in links eigendom van de waarde eigendom van de animatie voorwerp.
Voeg daarom de volgende code toe, die de waarde overschrijft bouwen() methode, naar de staat:
@override Widget-build (BuildContext-context) retourneer nieuwe container (kleur: Colors.white, child: new Stack (kinderen:[new Positioned (child: new Material (child: new Icon (Icons.airport_shuttle, textDirection: TextDirection.ltr, size: 81.0)), links: animation.value, // Geanimeerde waarde top: 30.0 // Fixed value)], textDirection: TextDirection.ltr,));
Merk op dat er een is stack widget in de bovenstaande widgetboom omdat a gepositioneerd widget moet altijd in één worden ingesloten.
U kunt uw app nu uitvoeren om de animatie te bekijken.
Als u een melding wilt ontvangen wanneer uw animatie is beëindigd, kunt u een AnimationStatusListener bezwaar tegen uw animatie voorwerp. In de luisteraar, als de huidige animatiestatus is voltooid of ontslagen, je kunt er zeker van zijn dat de animatie is afgelopen.
Tween-animaties in Flutter zijn omkeerbaar. Dat is de reden waarom er twee verschillende statusconstanten zijn die het einde van een animatie aanduiden. Als de huidige status is voltooid, dit betekent dat de animatie is geëindigd aan de eindwaarde van de tween. Als het is ontslagen, dit betekent dat de animatie is geëindigd bij de startwaarde. Gebruik van de twee statussen en de vooruit() en omgekeerde() methoden, kunt u gemakkelijk heen en weer tussen animaties maken.
De volgende code, die u kunt toevoegen aan de initState () methode, laat u zien hoe u de animatie die u in de vorige stap hebt gemaakt, kunt omkeren en herhalen:
animation.addStatusListener ((status) if (status == AnimationStatus.completed) controller.reverse (); else if (status == AnimationStatus.dismissed) controller.forward (););
Als u de app opnieuw uitvoert, ziet u de animatie eindeloos herhalen.
Het Flutter-framework biedt enkele gemakkelijk animeerbare widgets die u kunt gebruiken om uw animatiecode iets minder breed en meer herbruikbaar te maken. Allemaal subklassen van de AnimatedWidget klasse en verwachten animatie of AnimationController objecten in hun constructors.
Een van de meest gebruikte geanimeerde widgets is de RotationTransition widget. Hiermee kunt u snel een rotatie-animatie toepassen op zijn kinderen. Om het te gebruiken, maakt u eerst een nieuwe animatiecontroller. De volgende code maakt een code waarvan de duur is ingesteld op zes seconden:
controller = nieuwe AnimationController (vsync: dit, duur: nieuw Duur (seconden: 6));
Om deze keer de animatie te starten, in plaats van de vooruit() methode, gebruik de herhaling() methode. Dit zorgt ervoor dat de animatie eindeloos wordt herhaald.
controller.repeat ();
Om dingen eenvoudig te houden, kunt u een Tekst widget als het kind van de RotationTransition widget. Dus maak dienovereenkomstig een widgetstructuur aan. Tijdens het maken van de RotationTransition widget, zorg er echter voor dat je de waarde ervan instelt bochten eigendom van de AnimationController object dat u zojuist hebt gemaakt. Optioneel kunt u beide widgets in een Centrum widget. Hier is hoe:
Accentsconagua
@override Widget-build (context BuildContext) return new Center (child: new RotationTransition (turns: controller, child: new Text ("\ u 1F43A", textDirection: TextDirection.ltr, style: new TextStyle (fontSize: 85.0) ,))); In de bovenstaande code heb ik een Unicode-emoji-codepunt gebruikt als de inhoud van de Tekst widget. Dit is toegestaan omdat Flutter emoji direct uit de doos ondersteunt.
Wanneer u de app opnieuw uitvoert, ziet u iets als dit op uw scherm:
Zeer vergelijkbaar met de RotationTransition widget is de ScaleTransition widget. Zoals je misschien al geraden hebt, kun je hiermee de schaal van zijn kinderen animeren. Terwijl u het maakt, volstaat het om de AnimationController bezwaar tegen zijn schaal eigendom. De volgende code laat zien hoe u:
@override Widget-build (context BuildContext) return new Center (child: new ScaleTransition (schaal: controller, child: new Text ("\ u 1F43A", textDirection: TextDirection.ltr, style: new TextStyle (fontSize: 85.0) ,))); U kunt nu het Tekst widget schaalverandering tijdens de animatie.
Als je je afvraagt waarom we er geen hebben gemaakt Tween objecten voor de bovenstaande animaties, omdat, standaard, de AnimationController klasse gebruikt 0.0 en 1.0 als de beginnen en einde waarden.
Alle animaties die we in eerdere stappen hebben gemaakt, volgden een lineaire curve. Als gevolg hiervan zien ze er niet erg realistisch uit. Door de manier waarop de Tween object genereert tussentijdse waarden, u kunt dit wijzigen.
Flutter heeft een klasse genaamd CurvedAnimation, waarmee je niet-lineaire curves kunt toepassen op je tweens. Wanneer u het gebruikt met de curves klasse, die een verscheidenheid aan bochten biedt, zoals easeIn en easeOut, je kunt animaties creëren die natuurlijker aanvoelen.
Om een te maken CurvedAnimation object, je hebt een AnimationController object als een ouder. U bent vrij om een van de controllers te gebruiken die u in eerdere stappen hebt gemaakt of om een nieuwe controller te maken. De volgende code maakt een nieuwe controller waarvan de duur is ingesteld op vijf seconden, en een CurvedAnimation object waarvan kromme eigenschap is ingesteld op a bounceOut kromme:
controller = nieuwe AnimationController (vsync: dit, duur: nieuwe duur (seconden: 5)); CurvedAnimation curvedAnimation = new CurvedAnimation (parent: controller, curve: Curves.bounceOut);
U kunt nu een maken Tween object en pas de CurvedAnimation bezwaar maken door het te noemen animeren () methode. Zodra de animatie gereed is, vergeet dan niet om een luisteraar aan de animatie toe te voegen, de status bij te werken en vervolgens de vooruit() methode om het te starten.
Tween myTween = nieuwe Tween(begin: 150.0, einde: 450.0); animatie = myTween.animate (curvedAnimation); animation.addListener (() setState (() );); controller.forward ();
Laten we de animatie toepassen op a om de animatie te zien gepositioneerd widget top eigendom. Je bent vrij om een onderliggende widget erin toe te voegen. In de volgende code voeg ik een toe Tekst widget die een andere emoji weergeeft.
@override Widget-build (context BuildContext) return new Stack (children: [new Positioned (child: new Text ("\ u 26BE", textDirection: TextDirection.ltr, style: new TextStyle (fontSize: 70.0)), links : 50.0, top: animation.value // Geanimeerde eigenschap)], textDirection: TextDirection.ltr,); Na een warme herstart moet je app nu de volgende animatie laten zien:
Je kent nu de basis van het maken van tween-animaties met behulp van het Flutter-framework. In deze zelfstudie hebt u ook geleerd hoe u deze met krommen natuurlijker kunt laten lijken. Begrijp dat in de langzame modus, die tijdens de ontwikkeling de standaardmodus is, de animaties een beetje laggy en onstabiel lijken. Alleen in de releasemodus kunt u hun werkelijke prestaties zien.
Raadpleeg de officiële documentatie voor meer informatie.
