Animazioni in Flutter: comprensione semplice in 10 minuti

Blog

Animazioni in Flutter: comprensione semplice in 10 minuti

Questo articolo ti mostrerà come creare animazioni in Flutter passo dopo passo

Se vogliamo animare qualcosa, dobbiamo cambiare la dimensione o cambiare la posizione del nostro oggetto in fotogrammi consecutivi. per esempio. nel frame 1 il nostro oggetto è in posizione x, nel frame 2 sarà in posizione x+1, nel frame 3 sarà in posizione x+2 e così via.



Un altro concetto quando si crea un'animazione sono i fotogrammi al secondo o FPS. Quante volte vogliamo cambiare la posizione o la dimensione del nostro oggetto al secondo? I film di solito utilizzano 24 fotogrammi al secondo. Questo è il numero minimo di FPS in cui le animazioni sembrano fluide e naturali agli occhi umani.

librerie Python per l'apprendimento automatico



FPS (credito immagine)

Per animare un widget in Flutter, abbiamo bisogno dei seguenti widget:



  1. Animazione : un oggetto di animazione è costituito da un valore (di tipo |_+_|) insieme a uno stato. Il valore è come il numero di frame corrente. Ti dice se sei nel frame 1, 2, 3, ecc. A seconda di questo valore, decidi la posizione o la dimensione successiva del tuo widget. Lo stato indica se l'animazione è concettualmente in esecuzione dall'inizio alla fine o dalla fine all'inizio.
  2. Animazione Controller : per creare un'animazione, creare prima un Animazione Controller . Questo widget produce linearmente valori che vanno da 0.0 (limite inferiore) a 1.0 (limite superiore), durante una data durata. Il controller di animazione genera un nuovo valore ogni volta che il dispositivo che esegue la tua app è pronto per visualizzare un nuovo fotogramma (in genere, questa frequenza è di circa 60 valori al secondo). Un Animazione Controller deve essere smaltito quando non è più necessario. Ciò riduce la probabilità di perdite. Quando viene utilizzato con uno StatefulWidget, è normale che venga creato un AnimationController nel State.initState metodo e poi smaltito nel Stato.disponi metodo. Si noti che AnimationController eredita la classe Animation e quindi è di tipo Animation.
  3. Gemello : Questa classe può essere utilizzata per tradurre (o mappare) il limite inferiore e il limite superiore di |_+_| (che è per impostazione predefinita da 0.0 a 1.0) ai valori da |_+_| a |_+_|. Per impostazione predefinita, Tween è di tipo double, se non diversamente specificato. L'unico lavoro di un |_+_| è definire una mappatura da un intervallo di input a un intervallo di output. L'intervallo di input è comunemente compreso tra 0,0 e 1,0, ma non è un requisito.
  4. TickerProvider : Questa è una fabbrica che genera Ticker oggetti. Un oggetto Ticker genera un evento per ogni nuovo frame. La classe AnimationController usa un Ticker per scorrere l'animazione che controlla. Possiamo aggiungere la funzionalità Ticker alla nostra classe stateful usando il |_+_| mixin per implementare la funzionalità TickerProvider. Se non sei sicuro di cosa siano i mixin, leggi Questo articolo . Questo mixin è utile quando hai bisogno di un solo oggetto Ticker (ad esempio se la classe crea solo un singolo Animazione Controller durante tutta la sua vita).
  5. AnimatedBuilder : È ovvio che ogni volta che cambiamo la dimensione o la posizione del nostro widget, vorremmo ricostruirlo. Ma come abbiamo fatto? Questo è dove il AnimatedBuilder il widget torna utile. Diamo a questo widget la nostra animazione e gli diciamo cosa disegnare mentre l'animazione va avanti.

Ok, facciamo qualcosa di pratico.

Innanzitutto, creeremo un cerchio al centro dello schermo e lo faremo diventare grande e piccolo periodicamente.

La nostra funzione principale esegue l'applicazione e visualizza |_+_|:

T

Il |_+_| inizialmente mostra un cerchio al centro della pagina:

AnimationController

Ora ingrandiamo questo cerchio con l'animazione.

Nel codice seguente abbiamo aggiunto un membro di tipo |_+_| e ne abbiamo istanziato l'istanza |_+_| metodo. |_+_|richiede due parametri: |_+_| e |_+_|.

Il parametro durata specifica quanto durerà l'animazione, nel nostro esempio, ci vorrà 1 secondo per essere completata.

Il secondo argomento si chiama |_+_| che è di tipo |_+_|. Poiché abbiamo aggiunto la funzionalità di |_+_| alla nostra classe utilizzando il seguente mixin:

begin

L'istanza corrente della classe può essere passata a |_+_| parametro come |_+_|:

end

Pertanto avremo:

Tween

Chiamando il |_+_| Il metodo avvia l'animazione e genera valori da 0.0 (limite inferiore) a 1.0 (limite superiore). Ma come consumare i valori generati?

Usando il AnimatedBuilder aggeggio!

SingleTickerProviderStateMixin

Il costruttore di AnimationBuilder accetta tre parametri:

  1. |_+_|: Forniamo qui il nostro oggetto di animazione. Ricorda che AnimationController eredita dalla classe Animation. Pertanto il nostro AnimationController è di tipo Animation e può essere passato a questo parametro.
  2. |_+_|: questo parametro opzionale è un widget che non cambia durante l'animazione e viene creato una sola volta (per migliorare le prestazioni). È sempre disponibile per il riutilizzo nella funzione builder (parametro successivo).
  3. |_+_|: Questa è la funzione che viene chiamata per ogni tick dell'animazione. Qui possiamo decidere cosa disegnare nel fotogramma successivo della nostra animazione. Possiamo accedere al numero di frame corrente tramite |_+_| proprietà.

Non appena chiamiamo il |_+_| , la nostra animazione si avvia e il metodo builder di AnimatedBuilder verrà chiamato per ogni fotogramma dell'animazione. In ogni frame, il valore di |_+_| aumenterà gradualmente da 0.0 a 1.0. Possiamo sfruttare questo valore e modificare la larghezza e l'altezza del nostro cerchio in base ad esso:

AnimatedCirclePage

Come puoi vedere, quando il valore dell'animazione è 0.0, la dimensione del cerchio sarà 100 e quando il valore aumenta a 1.0, la dimensione cambierà a 200. Quindi dobbiamo vedere la seguente animazione in cui la dimensione del cerchio cambia da 100 a 200:

Il cerchio che si allarga

Nell'esempio sopra, abbiamo aggiunto 1 a tutti i valori di animazione. In effetti, dovevamo cambiare l'intervallo dell'animazione da [0.0…1.0] a [1.0…2.0]. Ricordi cosa il |_+_| la classe è stata utile per? Era usato per modificare i valori dell'animazione. Quindi potremmo usare la classe Tween qui per mappare i valori dell'animazione da [0.0…1.0] a [1.0…2.0]. Facciamolo:

void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: AnimatedCirclePage(), ); } }

La mappatura dei valori dell'animazione avviene effettivamente in questa riga:

AnimatedCirclePage

Creiamo un'istanza di |_+_| e specificare il |_+_| e |_+_| valori. Quindi chiamiamo |_+_| metodo e passagli un oggetto di animazione. La funzione di animazione restituirà un nuovo |_+_| oggetto i cui valori saranno da|_+_|a |_+_|. Quindi nell'oggetto AnimatedBuilder, imposteremmo semplicemente la proprietà di animazione sul nostro nuovo |_+_| oggetto:

class AnimatedCirclePage extends StatefulWidget { @override _AnimatedCirclePageState createState() => _AnimatedCirclePageState(); } class _AnimatedCirclePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Animated Circle'), ), body: Center( child: Container( width: 50, height: 50, decoration: BoxDecoration( borderRadius: BorderRadius.all( Radius.circular(25), ), color: Colors.red, ), ), ), ); } }

e imposta la dimensione del cerchio su questo:

AnimationController

Invertire l'animazione

Ora facciamo qualcosa di divertente. Non appena la nostra animazione è completata, invertiremo l'animazione (in modo che i suoi valori cambino da 1 a 0 questa volta). Questo farà tornare il cerchio piccolo.

Come possiamo sapere che la nostra animazione è completa?

Ascoltando |_+_|!

Possiamo aggiungere un ascoltatore all'animazione, in modo che ogni volta che il suo stato cambia, saremo avvisati.

initState

La nostra funzione di ascolto verrà chiamata solo quando lo stato cambia. Ci sono quattro stati possibili per un'animazione:

  1. licenziato : L'animazione è interrotta all'inizio
  2. inoltrare : L'animazione va dall'inizio alla fine
  3. inversione : L'animazione scorre all'indietro, dalla fine all'inizio
  4. completato : L'animazione si ferma alla fine

Nel codice sopra, abbiamo verificato lo stato. Se è |_+_|, significa che abbiamo appena raggiunto la fine della nostra animazione, quindi chiamiamo la funzione |_+_|, che riproduce l'animazione al contrario. Quando lo stato diventa |_+_|, significa che l'animazione ha raggiunto l'inizio, quindi chiamiamo |_+_| ancora! Questo ciclo continuerà per sempre!

L'animazione risultante è un cerchio che diventa grande e piccolo continuamente:

Ora facciamo qualcosa di più divertente. Stiamo per ruotare questo cerchio attorno al centro dello schermo!

Crea una nuova pagina chiamata |_+_| con il seguente codice al suo interno:

AnimationController

Per rendere il codice più leggibile, ho appena creato una funzione di supporto chiamata |_+_| che disegna un cerchio rosso di raggio dato. E invece di centrare il cerchio, l'ho allineato un po' sopra il centro della pagina. (guarda questo breve video di Google per familiarizzare con |_+_| widget se non lo sei). Il risultato è:

converti array in float python

Ora animiamo questo cerchio come un pendolo:

Duration

Permettetemi di spiegare le parti importanti del codice di cui sopra.

TickerProvider

Per impostazione predefinita, un |_+_| produce linearmente i numeri da 0.0 a 1.0 durante una data durata e quindi l'animazione viene riprodotta senza alcuna velocità. Se vogliamo cambiare la velocità e lo stile della nostra animazione, possiamo avvolgerla in a Animazione Curva aggeggio:

Animazione Curva è utile quando si desidera applicare un non lineare Curva a un oggetto di animazione, soprattutto se si desiderano curve diverse quando l'animazione sta andando avanti rispetto a quando sta andando indietro.

Nota che è possibile prima avvolgere l'animazione nel widget CurvedAnimation e poi tradurne i limiti inferiore e superiore utilizzando il widget Tween, come il seguente:

vsync

Qui ho usato le curve. fastOutSlowIn curva, ma puoi giocare con altri valori e vedere come influenzano la velocità e la velocità dell'animazione.

Ora lascia che ti spieghi un po' il metodo di compilazione:

TickerProvider

Abbiamo impostato |_+_| proprietà di |_+_| al cerchio. Come mai? Perché vogliamo che venga creato una volta sola, non per ogni fotogramma! (per migliorare le prestazioni, non abbiamo bisogno di ricostruire parti dell'animazione che non cambiano nel tempo. Qui la dimensione del nostro cerchio rimane la stessa durante l'animazione, quindi lo costruiamo una sola volta e lo assegniamo al figlio di | _+_|. Questo figlio sarà disponibile per essere riutilizzato nel metodo |_+_| ogni volta che si deve disegnare un nuovo frame).

Nel |_+_| metodo, che verrà chiamato per ogni fotogramma della nostra animazione, abbiamo usato |_+_| per ruotare il nostro cerchio. Se non specifichiamo il |_+_| parametro, il cerchio ruoterà attorno al centro di se stesso (in questo caso, poiché un cerchio ruota attorno al centro di se stesso, non vedremo alcuna rotazione!). Per questo motivo, abbiamo impostato il centro di rotazione su un punto indicato da Offset(0, 30), che è un punto la cui distanza x dal centro del widget è 0 e la distanza y è 30. Guarda quanto segue foto. Il cerchio ora ruoterà attorno al punto di origine contrassegnato con X:

L'angolo di rotazione è stato impostato su:

TickerProvider

Poiché il valore dell'animazione cambia da 0 a 1, l'angolo di rotazione cambierà da 0 a , che equivale a una rotazione completa di 360°.

Nota importante: Non ho incartato |_+_| nel widget Allinea. Invece, ho avvolto l'intera animazione, che è il nostro oggetto AnimatedWidget, nel widget Align. Questo perché vogliamo ruotare solo il cerchio, non lo spazio attorno ad esso! Se inserissimo il figlio di AnimatedBuilder nel widget Align, ci sarebbe uno spazio extra attorno al nostro cerchio che causerebbe l'errore dei nostri calcoli. Il mio punto è che il seguente codice è sbagliato:

vsync

Come l'animazione precedente, quando l'animazione è completata, la invertiamo in modo che ruoti indietro da 2π a 0 gradi. Il risultato è la seguente animazione:

Cerchio che ruota intorno all'origine

Nell'articolo precedente, abbiamo imparato a disegnare una linea tratteggiata curva. E ti ho parlato della creazione della seguente animazione:


Includerò il codice sorgente dell'animazione sopra nel codice di questo articolo su github. Ma ti suggerirei di provare a crearlo tu stesso come compiti a casa! Nota che non sto spostando il piatto su un percorso curvo. Sto solo animandolo su due linee rette separate usando il Trasforma.traduci aggeggio. |_+_| può essere usato per spostare un oggetto di |_+_| e |_+_| prima di dipingerlo.

Riepilogo, riepilogo e note finali

Questo è tutto. Puoi smettere di leggere proprio qui! Vorrei solo sottolineare le seguenti note che ho preso da tre articoli forniti da Flutter sull'animazione (è bello leggere questi articoli):

  1. Panoramica delle animazioni
  2. Tutorial Animazioni
  3. Introduzione alle animazioni

Per creare un'animazione, prima crea un Animazione Controller . Oltre ad essere un'animazione stessa, un |_+_| consente di controllare l'animazione. Ad esempio, puoi dire al controller di riprodurre l'animazione inoltrare o fermare l'animazione.

Animazione Controller è uno speciale |_+_| oggetto che genera un nuovo valore ogni volta che l'hardware è pronto per un nuovo frame. Per impostazione predefinita, un |_+_| produce linearmente i numeri da 0.0 a 1.0 durante una data durata.

|_+_| deriva da |_+_|, quindi può essere utilizzato ovunque un |_+_| l'oggetto è necessario. Tuttavia, |_+_| ha metodi aggiuntivi per controllare l'animazione. Ad esempio, si avvia un'animazione con |_+_| metodo. La generazione dei numeri è legata all'aggiornamento dello schermo, quindi in genere vengono generati 60 numeri al secondo.

come acquistare criptovaluta al guinzaglio

Il Gemello la classe astratta mappa un valore double nominalmente nell'intervallo 0.0-1.0 su un valore tipizzato (ad esempio un |_+_| o un altro double). È un |_+_|. Per animare oltre l'intervallo da 0.0 a 1.0, puoi usare un |_+_|, che interpola tra i suoi inizio e fine valori. Molti tipi hanno specifici |_+_| sottoclassi che forniscono l'interpolazione specifica del tipo. Per esempio, ColoreTween interpola tra i colori e RettTween interpola tra rettangoli. A |_+_| eredita da |_+_|, non da |_+_|. Un Animatable, come Animation, non deve produrre il doppio. Ad esempio, |_+_| specifica una progressione tra due colori:

TickerProvider

Il codice sorgente di questo articolo può essere trovato su Github .

Grazie per aver letto! Pubblicato originariamente su https://codequs.com

#flutter