Share
Le animazioni, se usate correttamente, possono fare un'enorme differenza nel modo in cui gli utenti percepiscono la tua app. Un'app con molte animazioni rapide e sottili tende a sembrare molto più raffinata e professionale di quella senza. Su Google Play, un mercato sovraffollato, ciò può significare la differenza tra successo e fallimento.
Flutter è forse l'unico framework di sviluppo di app ibrido oggi disponibile che consente di creare animazioni complesse che possono essere eseguite costantemente a 60 frame al secondo. In questo tutorial, ti aiuterò a capire le basi dell'animazione dei widget Flutter. Ti presenterò anche alcuni nuovi widget che possono semplificare il tuo codice di animazione.
Il framework Flutter si aspetta che tu segua un approccio funzionale e reattivo alla programmazione. Pertanto, per essere in grado di animare un widget, è necessario essere in grado di aggiornare il suo stato ripetutamente, a intervalli regolari.
Per creare un widget facile da animare, inizia creando una classe che estenda il StatefulWidget classe e la sua priorità createState () metodo. All'interno del metodo, assicurati di restituire a Stato esempio.
classe MyApp estende StatefulWidget @override StatecreateState () return new MyState ();
Per essere animabile, l'oggetto stato che si associa al widget di stato non deve solo estendere il Stato classe, deve anche usare un mixin chiamato SingleTickerProviderStateMixin. Come suggerisce il nome, il mixin offre a telescrivente oggetto, che genera ripetutamente callback, convenzionalmente noti come tick. Poiché i segni di graduazione vengono generati ripetutamente a intervalli di tempo uniformi, puoi usarli per decidere quando vengono renderizzati i singoli fotogrammi dell'animazione.
classe MyState estende lo statocon SingleTickerProviderStateMixin @override Widget build (contesto BuildContext) // Altro codice qui
Un'animazione di interpolazione è una delle animazioni più semplici che puoi creare con Flutter. Durante la sua creazione, tutto ciò che devi fare è fornire due valori diversi: un valore iniziale e un valore finale. Il framework genererà automaticamente un insieme di valori intermedi o valori intermedi, che partono dal valore iniziale e crescono gradualmente per corrispondere al valore finale. Applicando gradualmente quei valori intermedi a una proprietà del widget, si anima quella proprietà.
Creiamo ora un'animazione di interpolazione semplice che sposta un widget dall'angolo in alto a sinistra dello schermo all'angolo in alto a destra dello schermo. In altre parole, animiamo il sinistra proprietà di un widget.
Per creare e controllare l'animazione, avrai bisogno di un Animazione oggetto e un AnimationController oggetto. Aggiungili come variabili membro del tuo stato:
Animazioneanimazione; Controller AnimationController;
È necessario inizializzare entrambi gli oggetti sovrascrivendo il initState () metodo della tua classe. All'interno del metodo, chiama il costruttore del file AnimationController classe per inizializzare il controller. Si aspetta a TickerProvider oggetto come uno dei suoi input. Perché lo stato utilizza già il SingleTickerProviderStateMixin mixin, puoi passare Questo ad esso. Inoltre, è possibile utilizzare il durata proprietà per specificare la durata dell'animazione.
Il codice seguente crea un controller di animazione la cui durata è di quattro secondi:
@override void initState () super.initState (); controller = new AnimationController (vsync: this, duration: new Duration (seconds: 4)); // altro codice qui
A questo punto, puoi creare un Gemello oggetto che specifica i valori iniziali e finali dell'animazione.
Tween tween = new Tween(inizio: 10.0, fine: 180.0);
Associare il Gemello oggetto con il AnimationController oggetto, devi chiamarlo animare() metodo. Il valore di ritorno del metodo è un Animazione oggetto, che è possibile memorizzare nella seconda variabile membro della classe.
animation = tween.animate (controller);
Il Animazione oggetto genera un evento di animazione per ogni segno di spunta del ticker, che devi gestire affinché l'animazione funzioni. Per fare ciò, puoi usare il suo addListener () metodo. Inoltre, all'interno del gestore eventi, è necessario chiamare il setState () metodo per aggiornare lo stato del tuo widget e ridisegnarlo. Il seguente codice mostra come:
animation.addListener (() setState (() ););
Si noti che non è necessario scrivere alcun codice all'interno di setState () metodo a meno che non si abbiano altre variabili di stato da aggiornare.
Infine, per avviare l'animazione, devi chiamare il inoltrare() metodo del controller di animazione.
controller.forward ();
L'animazione è pronta. Tuttavia, non lo hai ancora applicato a nessun widget che viene disegnato sullo schermo. Per ora, ti suggerisco di applicarlo a posizionato widget contenente un materiale Icona widget di. Per fare ciò, durante la creazione del widget, è sufficiente impostarne il valore sinistra proprietà al valore proprietà del Animazione oggetto.
Di conseguenza, aggiungere il seguente codice, che sovrascrive il costruire() metodo, allo stato:
@override Widget build (contesto BuildContext) return new Container (colore: Colors.white, child: new Stack (bambini:[nuovo Posizionato (child: new Material (child: new Icon (Icons.airport_shuttle, textDirection: TextDirection.ltr, size: 81.0)), a sinistra: animation.value, // Valore animato top: 30.0 // Fixed value)], textDirection: TextDirection.ltr,));
Nota che c'è un Pila widget nell'albero dei widget sopra perché a posizionato il widget deve sempre essere incorporato in uno.
Puoi ora avviare la tua app per vedere l'animazione.
Se vuoi essere avvisato quando la tua animazione è terminata, puoi allegare un AnimationStatusListener oggetto al tuo Animazione oggetto. All'interno del listener, se lo stato dell'animazione corrente è completato o destituito, puoi essere sicuro che l'animazione è finita.
Le animazioni interpolate in Flutter sono reversibili. Questo è il motivo per cui ci sono due diverse costanti di stato che indicano la fine di un'animazione. Se lo stato attuale è completato, significa che l'animazione è terminata al valore finale dell'interpolazione. Se è destituito, significa che l'animazione è terminata al valore iniziale. Utilizzando i due stati e il inoltrare() e inverso() metodi, puoi facilmente creare avanti e indietro tra le animazioni.
Il seguente codice, che puoi aggiungere al initState () metodo, mostra come invertire e ripetere l'animazione creata nel passaggio precedente:
animation.addStatusListener ((status) if (status == AnimationStatus.completed) controller.reverse (); else if (status == AnimationStatus.dismissed) controller.forward (););
Se esegui nuovamente l'app, dovresti vedere l'animazione ripetere all'infinito.
Il framework Flutter offre alcuni widget facilmente animabili che puoi utilizzare per rendere il tuo codice di animazione leggermente meno dettagliato e più riutilizzabile. Tutti loro sono sottoclassi di AnimatedWidget classe e aspettati Animazione o AnimationController oggetti nei loro costruttori.
Uno dei widget animati più comunemente usati è il RotationTransition widget di. Ti consente di applicare rapidamente un'animazione di rotazione ai suoi figli. Per usarlo, prima crea un nuovo controller di animazione. Il seguente codice crea uno la cui durata è impostata su sei secondi:
controller = new AnimationController (vsync: this, duration: new Duration (seconds: 6));
Per avviare l'animazione questa volta, anziché il inoltrare() metodo, usa il ripetere() metodo. Questo assicura che l'animazione si ripeta all'infinito.
controller.repeat ();
Per mantenere le cose semplici, puoi usare a Testo widget come il figlio di RotationTransition widget di. Quindi creare un albero di widget di conseguenza. Durante la creazione di RotationTransition widget, però, assicurati di impostare il valore del suo giri proprietà al AnimationController oggetto appena creato. Facoltativamente, puoi posizionare entrambi i widget all'interno di a Centro widget di. Ecco come:
Accentsconagua
@override Widget build (contesto BuildContext) return new Center (child: new RotationTransition (turns: controller, child: new Text ("\ u 1F43A", textDirection: TextDirection.ltr, style: new TextStyle (fontSize: 85.0) ,))); Nel codice precedente, ho usato un codice Unicode Unicode come contenuto del Testo widget di. Questo è permesso perché Flutter supporta le emoji appena estratto dalla scatola.
Quando esegui nuovamente l'app, dovresti vedere qualcosa di simile sullo schermo:
Molto simile al RotationTransition il widget è il ScaleTransition widget di. Come avrai intuito, ti permette di animare la scala dei suoi figli. Durante la creazione, tutto quello che devi fare è passare il AnimationController oggetto al suo scala proprietà. Il seguente codice mostra come:
@override Widget build (contesto BuildContext) return new Center (child: new ScaleTransition (scala: controller, child: new Text ("\ u 1F43A", textDirection: TextDirection.ltr, style: new TextStyle (fontSize: 85.0) ,))); Ora sarai in grado di vedere il Testo modifica della scala del widget durante l'animazione.
Se ti stai chiedendo perché non ne abbiamo creato nessuno Gemello oggetti per le animazioni di cui sopra, è perché, per impostazione predefinita, il AnimationController la classe usa 0.0 e 1.0 come inizio e fine valori.
Tutte le animazioni che abbiamo creato nei passaggi precedenti hanno seguito una curva lineare. Di conseguenza, non sembrano molto realistici. Modificando il modo in cui il Gemello oggetto genera valori intermedi, puoi cambiarlo.
Flutter ha una classe chiamata CurvedAnimation, che ti consente di applicare curve non lineari ai tuoi interpolazioni. Quando lo usi con curve classe, che offre una varietà di curve, come ad esempio easeIn e easeOut, puoi creare animazioni che si sentono più naturali.
Per creare un CurvedAnimation oggetto, avrai bisogno di un AnimationController oggetto come genitore. Sei libero di utilizzare uno dei controller creati nei passaggi precedenti o crearne uno nuovo. Il codice seguente crea un nuovo controller la cui durata è impostata su cinque secondi e a CurvedAnimation oggetto di cui curva la proprietà è impostata su a bounceOut curva:
controller = new AnimationController (vsync: this, duration: new Duration (seconds: 5)); CurvedAnimation curvedAnimation = new CurvedAnimation (parent: controller, curve: Curves.bounceOut);
Ora puoi creare un Gemello oggetto e applica il CurvedAnimation obiettare ad esso chiamando il suo animare() metodo. Una volta che l'animazione è pronta, non dimenticare di aggiungere un listener all'animazione, aggiornare lo stato e quindi chiamare il file inoltrare() metodo per avviarlo.
Tween myTween = new Tween(inizio: 150.0, fine: 450.0); animation = myTween.animate (curvedAnimation); animation.addListener (() setState (() );); controller.forward ();
Per vedere l'animazione, applichiamo a a posizionato widget di di superiore proprietà. Sei libero di aggiungere qualsiasi widget figlio al suo interno. Nel seguente codice, aggiungo a Testo widget che mostra un'altra emoji.
@override Widget build (contesto BuildContext) return new Stack (child: [nuovo Positioned (child: new Text ("\ u 26BE", textDirection: TextDirection.ltr, style: new TextStyle (fontSize: 70.0)), a sinistra : 50.0, top: animation.value // Proprietà animata)], textDirection: TextDirection.ltr,); Dopo un riavvio a caldo, la tua app dovrebbe ora mostrare la seguente animazione:
Ora conosci le basi della creazione di animazioni interpolate usando il framework Flutter. In questo tutorial, hai anche imparato a farli apparire più naturali usando le curve. Capisci che in modalità lenta, che è la modalità predefinita durante lo sviluppo, le animazioni possono sembrare un po 'laggose e instabili. È solo nella modalità di rilascio che puoi vedere la loro vera performance.
Per saperne di più, fare riferimento alla documentazione ufficiale.
