Come usare l'animazione Lottie nelle app Flutter

Blog

Animazioni in un'applicazione mobile aggiungere intelligenza all'interfaccia utente proprio come alcune visualizzazioni avanzate. Le animazioni, se utilizzate in modo efficace, possono avere un effetto gigantesco su come l'utente vede la tua applicazione. Ogni sviluppatore mobile desidera includere animazioni nella propria applicazione; tuttavia, non riescono a farlo, perché c'è un sacco di complessità e un sacco di cose che uno sviluppatore deve imparare prima di includere le animazioni.



svolazzare ha una fantastica libreria di animazioni che ti permette di creare animazioni complesse che possono essere eseguite continuamente a 60 fotogrammi al secondo senza alcun problema.

In questo articolo, lo faremo Esplora l'animazione di Lottie in Flutter. Implementeremo anche una demo dell'animazione Lottie usando il lottie pacchetto nelle vostre applicazioni flutter.



Lottie Animazione

A Lottie è un formato di file di animazione basato su JSON. I file di animazione Lottie possono essere utilizzati in applicazioni multipiattaforma come risorse statiche.

Generalmente, tutti i principianti hanno una domanda simile; ecco perché usiamo Lottie Animation quando flutter offre molti widget di animazione che sono più semplici da usare rispetto al movimento di animazione Lottie.



Lottie è un widget che offre una fantastica animazione che rende l'applicazione più attraente; Librerie e moduli Lottie accessibili con l'aspettativa di Web, iOS, Android, Flutter, React Native, Xamarin, Native Script, Windows, Vue, Angular, QT, Skia, Framer X, Sketch gratuiti gratuiti.

Senza troppi sforzi, possiamo ottenere il file di animazione di Lottie da https://lottiefiles.com e può utilizzarlo nella nostra applicazione.

Nota : Scaricherai i file di animazione Lottie solo in formato Lottie json.

Immagine per il post

Quindi incolla nella cartella delle risorse nel tuo progetto flutter.

Immagine per il post

Animazione Lottie — Proprietà

Ci sono alcune proprietà dell'animazione Lottie sono:

  • Inversione: Questa proprietà viene utilizzata per invertire il movimento nell'animazione.

  • Ripetere: Questa proprietà viene utilizzata per continuare a ripetere l'animazione. Utilizzerai false, quindi l'animazione ripetuta verrà interrotta.

  • Animato: Questa proprietà viene utilizzata per animare il movimento nell'animazione.

Implementazione:

Passaggio 1: aggiungi le dipendenze

Aggiungi dipendenze a pubspec — file yaml.

dipendenze:

lottie: ^0.6.0

Passaggio 2: importare

import 'package:lottie/lottie.dart';

Passaggio 3: aggiungi risorse

Aggiungi risorse a pubspec — file yaml.

Aggiungeremo immagini nella cartella delle risorse.

assets: - assets/

Passaggio 4 : Correre I pacchetti Flutter ottengono nella directory principale della tua app.

Passaggio 5: abilita AndriodX

Aggiungi questo al tuo file grade.properties:

ledger nano s icx
org.gradle.jvmargs=-Xmx1536M android.enableR8=true android.useAndroidX=true android.enableJetifier=true

#flutter #dart #mobile-apps #programming #developer

medium.com

Come usare l'animazione Lottie nelle app Flutter

Scopri come usare l'animazione Lottie nelle tue app Flutter. Esploreremo l'animazione di Lottie in Flutter. Implementeremo anche una demo dell'animazione Lottie utilizzando il pacchetto lottie nelle tue applicazioni flutter.