Google flattert von Grund auf neu Animieren von Widgets

Bei korrekter Anwendung können Animationen die Wahrnehmung der App durch die Benutzer erheblich beeinflussen. Eine App mit vielen schnellen, subtilen Animationen sieht viel polierter und professioneller aus als eine ohne. Bei Google Play, einem überfüllten Marktplatz, kann dies den Unterschied zwischen Erfolg und Misserfolg ausmachen.

Flutter ist vielleicht das einzige derzeit verfügbare Hybrid-App-Entwicklungsframework, mit dem Sie komplexe Animationen erstellen können, die konstant mit 60 Frames pro Sekunde laufen können. In diesem Tutorial werde ich Ihnen helfen, die Grundlagen der Animation von Flutter-Widgets zu verstehen. Ich werde Ihnen auch einige neue Widgets vorstellen, die Ihren Animationscode vereinfachen können.

1. Ein Widget für die Animation vorbereiten

Das Flutter-Framework erwartet von Ihnen einen funktionalen, reaktiven Ansatz zur Programmierung. Um ein Widget animieren zu können, muss es daher in regelmäßigen Abständen möglich sein, seinen Status wiederholt zu aktualisieren.

Um ein Widget zu erstellen, das leicht zu animieren ist, erstellen Sie zunächst eine Klasse, die die Erweiterung erweitert StatefulWidget Klasse und überschreibt es createState () Methode. Stellen Sie innerhalb der Methode sicher, dass Sie a zurückgeben Zustand Beispiel.

Die Klasse MyApp erweitert StatefulWidget @override State createState () return new MyState (); 

Um animierbar zu sein, muss das Statusobjekt, das Sie mit Ihrem Stateful-Widget verknüpfen, nicht nur das Zustand Klasse muss es auch ein Mixin genannt werden SingleTickerProviderStateMixin. Wie der Name schon sagt, bietet das Mixin a Ticker Objekt, das wiederholt Rückrufe generiert, die üblicherweise als Ticks bezeichnet werden. Da die Ticks in gleichmäßigen Zeitabständen wiederholt generiert werden, können Sie entscheiden, wann die einzelnen Frames Ihrer Animation gerendert werden.

Klasse MyState erweitert State with SingleTickerProviderStateMixin @override Widget build (BuildContext-Kontext) // Mehr Code hier

2. Erstellen einer Tween-Animation

Eine Tween-Animation ist eine der einfachsten Animationen, die Sie mit Flutter erstellen können. Bei der Erstellung müssen Sie lediglich zwei verschiedene Werte angeben: einen Startwert und einen Endwert. Das Framework generiert dann automatisch einen Satz von Zwischenwerten (oder dazwischen liegende Werte), die vom Startwert ausgehen und stufenlos an den Endwert anwachsen. Durch die schrittweise Anwendung dieser Zwischenwerte auf eine Eigenschaft Ihres Widgets animieren Sie diese Eigenschaft.

Lassen Sie uns nun eine einfache Tween-Animation erstellen, mit der ein Widget von der oberen linken Ecke des Bildschirms in die obere rechte Ecke des Bildschirms verschoben wird. Mit anderen Worten, lassen Sie uns das animieren links Eigenschaft eines Widget.

Um die Animation erstellen und steuern zu können, benötigen Sie eine Animation Objekt und ein AnimationController Objekt. Fügen Sie sie als Mitgliedsvariablen Ihres Bundeslandes hinzu:

Animation Animation; AnimationController-Controller;

Sie müssen beide Objekte durch Überschreiben von initialisieren initState () Methode Ihrer Klasse. Rufen Sie innerhalb der Methode den Konstruktor von auf AnimationController Klasse, um den Controller zu initialisieren. Es erwartet a TickerProvider Objekt als eine seiner Eingaben. Weil der Staat das schon benutzt SingleTickerProviderStateMixin mixin, du kannst bestehen diese dazu Zusätzlich können Sie das verwenden Dauer Eigenschaft, um die Dauer der Animation anzugeben.

Der folgende Code erstellt einen Animationscontroller mit einer Dauer von vier Sekunden:

@override void initState () super.initState (); Controller = neuer AnimationController (vsync: this, Dauer: new Dauer (Sekunden: 4)); // Mehr Code hier

An dieser Stelle können Sie ein erstellen Tween Objekt, das den Anfangs- und Endwert Ihrer Animation angibt.

Tween-Tween = neues Tween(Beginn: 10,0, Ende: 180,0);

Zuordnen der Tween Objekt mit der AnimationController Objekt, müssen Sie es nennen animieren() Methode. Der Rückgabewert der Methode ist ein Animation Objekt, das Sie in der zweiten Membervariablen Ihrer Klasse speichern können.

animation = tween.animate (Controller);

Das Animation object generiert für jeden Tick des Tickers ein Animationsereignis, das Sie bearbeiten müssen, damit Ihre Animation funktioniert. Dazu können Sie es verwenden addListener () Methode. Darüber hinaus müssen Sie in der Ereignisbehandlungsroutine das aufrufen setState () Methode, um den Status Ihres Widgets zu aktualisieren und neu zu zeichnen. Der folgende Code zeigt Ihnen wie:

animation.addListener (() setState (() ););

Beachten Sie, dass Sie keinen Code in das schreiben müssen setState () Methode, es sei denn, Sie müssen andere Statusvariablen aktualisieren.

Zum Starten der Animation müssen Sie die nach vorne() Methode des Animationscontrollers.

controller.forward ();

Die Animation ist fertig. Sie haben es jedoch noch nicht auf ein Widget angewendet, das auf dem Bildschirm gezeichnet wird. Im Moment schlage ich vor, dass Sie es auf ein anwenden In Position gebracht Widget, das ein Material enthält Symbol Widget. Legen Sie dazu beim Erstellen des Widgets einfach den Wert des Widget fest links Eigentum an der Wert Eigentum der Animation Objekt.

Fügen Sie dementsprechend folgenden Code hinzu, der das überschreibt bauen() Methode an den Staat:

@override Widget build (BuildContext-Kontext) return new Container (Farbe: Colors.white, child: new Stack (Kinder: [neu positioniert (untergeordnetes: neues Material (untergeordnetes neues Symbol (Icons.airport_shuttle, textDirection: TextDirection.ltr, Größe: 81.0)), links: animation.value, // animierter Wert oben: 30.0 // fester Wert) textDirection: TextDirection.ltr,)); 

Beachten Sie, dass es eine gibt Stapel Widget in der obigen Widget-Struktur, weil a In Position gebracht Widget muss immer in einem eingebettet sein.

Sie können Ihre App jetzt ausführen, um die Animation anzuzeigen.

3. Umgang mit Animationsstatusereignissen

Wenn Sie benachrichtigt werden möchten, wenn Ihre Animation beendet ist, können Sie eine anhängen AnimationStatusListener Einwände gegen deine Animation Objekt. Innerhalb des Listeners, wenn der aktuelle Animationsstatus ist abgeschlossen oder abgewiesen, Sie können sicher sein, dass die Animation beendet ist.

Tween-Animationen in Flutter sind umkehrbar. Aus diesem Grund gibt es zwei verschiedene Statuskonstanten, die das Ende einer Animation kennzeichnen. Wenn der aktuelle Status ist abgeschlossen, Dies bedeutet, dass die Animation am Endwert des Tween beendet wurde. Wenn es so ist abgewiesen, Dies bedeutet, dass die Animation beim Startwert beendet ist. Verwendung der beiden Status und der nach vorne() und umkehren() Methoden können Sie leicht zwischen Animationen hin und her erstellen.

Der folgende Code, den Sie dem hinzufügen können initState () Methode, zeigt Ihnen, wie Sie die im vorherigen Schritt erstellte Animation umkehren und wiederholen:

animation.addStatusListener ((status) if (status == AnimationStatus.completed) controller.reverse (); ansonsten if (status == AnimationStatus.dismissed) controller.forward (););

Wenn Sie die App erneut ausführen, sollten Sie die Animation endlos wiederholen.

4. Animierte Widgets verwenden

Das Flutter-Framework bietet einige leicht animierbare Widgets, die Sie verwenden können, um den Animationscode etwas weniger ausführlich und wiederverwendbar zu machen. Alle sind Unterklassen der AnimatedWidget Klasse und erwarten Animation oder AnimationController Objekte in ihren Konstrukteuren.

Eines der am häufigsten verwendeten animierten Widgets ist das RotationTransition Widget. Sie können damit schnell eine Rotationsanimation auf ihre Kinder anwenden. Erstellen Sie dazu zunächst einen neuen Animationscontroller. Mit dem folgenden Code wird ein Code erstellt, dessen Dauer auf sechs Sekunden festgelegt ist:

Controller = neuer AnimationController (vsync: this, Dauer: new Dauer (Sekunden: 6));

Zum Starten der Animation dieses Mal anstelle der nach vorne() Methode verwenden Sie die wiederholen() Methode. Dadurch wird sichergestellt, dass sich die Animation endlos wiederholt.

Controller.repeat ();

Um die Dinge einfach zu halten, können Sie eine Text Widget als Kind der RotationTransition Widget. Erstellen Sie dementsprechend einen Widget-Baum. Beim Erstellen der RotationTransition Das Widget muss jedoch unbedingt den Wert von its festlegen wendet sich Eigentum an der AnimationController Objekt, das Sie gerade erstellt haben. Optional können Sie beide Widgets in ein Center Widget. Hier ist wie:

@override Widget build (BuildContext-Kontext) return new Center (untergeordnet: neu RotationTransition (dreht sich um: Controller, untergeordnet: neuer Text ("\ u 1F43A"), textDirection: TextDirection.ltr, Stil: neuer TextStyle (fontSize: 85.0) ,))); 

Im obigen Code habe ich einen Unicode-Emoji-Codepunkt als Inhalt des verwendet Text Widget. Dies ist zulässig, da Flutter Emoji direkt nach dem Auspacken unterstützt.

Wenn Sie die App erneut ausführen, sollte auf Ihrem Bildschirm Folgendes angezeigt werden:

Sehr ähnlich dem RotationTransition Widget ist das ScaleTransition Widget. Wie Sie vielleicht schon erraten haben, können Sie die Skala der untergeordneten Elemente animieren. Wenn Sie es erstellen, müssen Sie nur das übergeben AnimationController widerspricht seinem Rahmen Eigentum. Der folgende Code zeigt Ihnen, wie Sie:

@override Widget build (BuildContext-Kontext) return new Center (untergeordnetes: neues ScaleTransition (Maßstab: Controller, untergeordneter: neuer Text ("\ u 1F43A"), textDirection: TextDirection.ltr, Stil: neuer TextStyle (fontSize: 85.0) ,))); 

Sie können jetzt das sehen Text Die Skalierungsänderung des Widgets während der Animation.

Wenn Sie sich fragen, warum wir keine erstellt haben? Tween Objekte für die obigen Animationen, weil standardmäßig die AnimationController Klasse verwendet 0.0 und 1.0 als Start und Ende Werte.

5. Kurven verwenden

Alle Animationen, die wir in früheren Schritten erstellt haben, folgen einer linearen Kurve. Daher sehen sie nicht sehr realistisch aus. Durch die Änderung der Art und Weise der Tween Objekt erzeugt Zwischenwerte, das können Sie ändern.

Flattern hat eine Klasse aufgerufen CurvedAnimation, Dadurch können Sie nichtlineare Kurven auf Ihre Tweens anwenden. Wenn Sie es mit verwenden Kurven Klasse, die eine Vielzahl von Kurven bietet, wie z easeIn und easeOut, Sie können Animationen erstellen, die sich natürlicher anfühlen.

So erstellen Sie eine CurvedAnimation Objekt, brauchen Sie ein AnimationController Objekt als Elternteil. Sie können einen der Controller verwenden, den Sie in früheren Schritten erstellt haben, oder einen neuen Controller erstellen. Mit dem folgenden Code wird ein neuer Controller erstellt, dessen Dauer auf fünf Sekunden festgelegt ist, und a CurvedAnimation Objekt dessen Kurve Eigenschaft ist auf a gesetzt bounceOut Kurve:

Controller = neuer AnimationController (vsync: this, Dauer: new Dauer (Sekunden: 5)); CurvedAnimation CurveAnimation = neue CurvedAnimation (übergeordnet: Controller, Kurve: Curves.bounceOut);

Sie können jetzt ein erstellen Tween Objekt und wende das an CurvedAnimation Einspruch dagegen durch Aufruf von animieren() Methode. Wenn die Animation fertig ist, vergessen Sie nicht, der Animation einen Listener hinzuzufügen, den Status zu aktualisieren und anschließend die nach vorne() Methode, um es zu starten.

Tween myTween = neues Tween(Beginn: 150,0, Ende: 450,0); animation = myTween.animate (gekrümmteAnimation); animation.addListener (() setState (() );); controller.forward ();

Um die Animation zu sehen, wenden wir sie auf a an In Position gebracht Widget oben Eigentum. Sie können jedes untergeordnete Widget hinzufügen. Im folgenden Code füge ich ein Text Widget, das ein anderes Emoji anzeigt.

@override Widget build (BuildContext-Kontext) return new Stack (untergeordnete Elemente: [new Positioned (untergeordneter: neuer Text ("\ u 26BE"), textDirection: TextDirection.ltr, Stil: neuer TextStyle (fontSize: 70.0)), left : 50.0, top: animation.value // animierte Eigenschaft)], textDirection: TextDirection.ltr,); 

Nach einem Neustart sollte Ihre App nun die folgende Animation anzeigen:

Fazit

Sie kennen jetzt die Grundlagen zum Erstellen von Tween-Animationen mit dem Flutter-Framework. In diesem Lernprogramm haben Sie auch gelernt, wie Sie sie mit Kurven natürlicher wirken lassen. Verstehen Sie, dass die Animationen im langsamen Modus, dem Standardmodus während der Entwicklung, ein wenig verzögert und unsicher erscheinen. Nur im Freigabemodus können Sie ihre wahre Leistung sehen.

Weitere Informationen finden Sie in der offiziellen Dokumentation.