Rive Animation for Flutter: Ein Leitfaden für Anfänger zum einfachen Erstellen atemberaubender Animationen!

Animationen erhöhen in der Regel die visuelle Attraktivität einer App oder Website und verbessern das allgemeine Engagement der Benutzer. Laut einer Studie von Forrester Research verzeichnen Websites mit gut umgesetzten Animationen eine Steigerung des Nutzerengagements um bis zu 400 %. Ansprechende Animationen können die Aufmerksamkeit der Benutzer fesseln und sie dazu ermutigen, mehr mit der Plattform zu interagieren. Es gibt jedoch eine Lernkurve für Entwickler, um Animationen zu beherrschen, insbesondere wenn sie mit fortgeschritteneren Animationstools und -techniken arbeiten.

Als Entwickler ohne Animationserfahrung kann es im Vergleich zu anderen Animationstools oder Frameworks relativ einfach sein, Rive zu verstehen. Rive (früher bekannt als Flare) ist so konzipiert, dass es benutzerfreundlich und für Entwickler zugänglich ist, auch für diejenigen mit wenig oder keiner Vorkenntnisse im Bereich Animation. In diesem Artikel erfahren Sie, wie Sie ganz einfach einfache, atemberaubende Rive-Animationen erstellen und diese in Ihrer Flutter-App verwalten.

Inhaltsverzeichnis

• Einführung in Rive🧙‍♂️

  • Grundlegende Konzepte in Rive🧗

• Eine einfache interaktive Login-Animation🚀

  • Richten Sie das Element auf Ihrem Artboard ein📃
  • Animationszeit!🕶️
  • Richten Sie Ihre Zustandsmaschine ein🏍️
  • Implementieren Sie Animationen in Ihrer Flutter-App👨‍🚒

• Fazit🏋️‍♀️

• Referenzen🧶

  
  

Einführung in Rive🧙‍♂️

Rive ist ein leistungsstarkes und benutzerfreundliches Animationstool und eine Laufzeit-Engine, mit der Entwickler und Designer atemberaubende und interaktive Animationen für verschiedene Plattformen erstellen können, darunter mobile Apps, Webanwendungen und Spiele.

Grundlegende Konzepte in Rive🧗

Hier sind die Schlüsselkonzepte:

1. Zeichenfläche: Eine Zeichenfläche ist eine Leinwand, auf der Sie Ihre Animation erstellen. Es ist der primäre Ort zum Erstellen und Organisieren von Animationselementen wie Gruppen, Einschränkungen, Knochen usw.
2. Zeitleiste: Auf der Zeitleiste werden Animationen definiert. Sie können damit Keyframes festlegen und festlegen, wie sich Objekte im Laufe der Zeit ändern sollen. Keyframes stellen bestimmte Zeitpunkte dar, an denen die Eigenschaften eines Objekts explizit definiert werden. Das Animationssystem interpoliert zwischen Keyframes, um sanfte Übergänge zu erzeugen.
3. Zustandsmaschine: Rive verfügt über eine Zustandsautomatenfunktion, mit der Sie verschiedene Zustände für Ihre Animation festlegen können. Sie können Zustandsübergänge basierend auf Benutzereingaben oder anderen Bedingungen auslösen und so die Erstellung interaktiver Animationen mit unterschiedlichem Verhalten basierend auf dem aktuellen Status ermöglichen.
4. Code-Export: Mit Rive können Sie Animationen als Code exportieren, was die Integration in Ihre Anwendungen erleichtert. Für Flutter-Entwickler bietet Rive ein Flutter-Laufzeit- und Integrationspaket an, das die Verwendung von Rive-Animationen in Flutter-Projekten erleichtert.

Eine einfache interaktive Login-Animation🚀

Wir werden den Prozess durchlaufen, eine einfache Anmeldeanimation zu erstellen und sie in unsere Flutter-App zu exportieren. Wir werden die StateMachine verwenden, um die Interaktivität dieser Animation in der App zu verwalten. Am Ende sollte es so aussehen 👇🏽

Richten Sie das Element auf Ihrem Artboard ein📃

Führen Sie die folgenden Schritte aus, um das Element auf der Rive-Zeichenfläche einzurichten:

• Zuerst müssen wir das Element selbst besorgen. Ich habe es von User Personas Illustration Templates auf Figma erhalten. Exportieren Sie das Element als SVG-Datei.
• Gehen Sie zu Rive. Klicken Sie auf die Schaltfläche „GetStarted“ , um Ihre Entwürfe zu öffnen
• Erstellen Sie in Ihren Entwürfen eine neue Datei und wählen Sie eine leere Zeichenfläche aus.
• Ziehen Sie das Element per Drag-and-Drop auf die Zeichenfläche. Es wird automatisch zum Assets-Ordner hinzugefügt und Sie können sehen, wie es auf Ihrer Zeichenfläche platziert wird. Es sollte so aussehen 👇🏽

• In der Seitenleiste gruppieren wir die verschiedenen Formen, aus denen dieses Element besteht, und benennen sie entsprechend. Wählen Sie mit Strg oder Strg + Umschalt alle aus, die Sie gruppieren möchten. Wenn Sie es auswählen, verwenden Sie Strg + G, um sie zu gruppieren. Es sollte so aussehen 👇🏽

• Jetzt werden wir diesem Element Knochen hinzufügen. Knochen helfen dabei, dynamischere und realistischere Animationen zu erstellen. Um zu überlegen, wie diese Animation aussehen soll, werden wir Knochen an Hals und Brust hinzufügen, um eine Illusion von Atmung zu erzeugen. Wir werden dem Haar auch Knochen hinzufügen, weil wir möchten, dass sich das Haar ebenfalls leicht bewegt.
• Wählen Sie das Knochenwerkzeug in der oberen linken Ecke aus oder verwenden Sie Strg + B. Nach dem Hinzufügen der Knochen sollte es so aussehen 👇🏽

• Jetzt werden wir die Knochen zur leichteren Identifizierung umbenennen. Wir werden außerdem alle Elemente des Gesichts gruppieren und dieser neuen Gruppe den Namen „face“ geben. Mithilfe hierarchischer Beziehungen können wir die Knochen mit den Teilen dieses Elements verbinden, die wir beeinflussen oder verformen müssen. Wir können dies tun, indem wir die Knochen in die Formen verschieben, auf die sie sich direkt auswirken. Um eine Gruppe oder einen Knochen zu verschieben, wählen Sie ihn aus und verschieben Sie ihn mit der Maus. Es wird so aussehen 👇🏽

• Als nächstes werden wir unsere Knochen binden und sie wiegen. Durch die Bindung wird sichergestellt, dass sich die entsprechenden Teile der Oberfläche der Figur entsprechend bewegen, wenn sich ein Knochen bewegt, wodurch die Illusion einer Verformung entsteht. Bei der Gewichtung, auch Scheitelpunktgewichtung genannt, werden jedem Scheitelpunkt des Netzes der Figur Einflusswerte (Gewichtungen) zugewiesen, basierend auf seiner Nähe zu bestimmten Knochen. Wir navigieren zum Pfad der Form, die wir binden möchten. Den Hals binden wir so an den Halsknochen.

  

  Nachdem wir die Knochen gebunden haben, legen wir die Scheitelpunkte fest, indem wir ihnen Gewichte zuweisen. Beachten Sie hier, dass wir den letzten Satz von Scheitelpunkten auf 50 % gesetzt haben, weil wir möchten, dass die beiden Knochen einen 50-prozentigen Effekt auf sie haben. Sie sollten 50 % verwenden, insbesondere wenn die festgelegten Scheitelpunkte einen Abschnitt abdecken, der die beiden Knochen betrifft. Jetzt würden wir dasselbe für den Haarpfad tun. Wir werden auch die linken und rechten Knochen von einem auf zwei Knochen ändern, um die fließende Bewegung zu erreichen, die wir für das Haar wünschen.

• Wir möchten in dieser Animation einen Blinkeffekt erzielen. Um dies zu erreichen, verwenden wir die Clip-Funktion für die beiden Augenformen wie folgt 👇🏽

• Als Nächstes fügen wir diesem Element die Kopfverfolgung mithilfe von Übersetzungsbeschränkungen hinzu, da wir den Kopf während der Animation bewegen möchten. Da es sich um ein 2D-Element handelt, verleiht das Hinzufügen von Übersetzungseinschränkungen ihm Tiefe und eine Art 3D-Effekt. Wählen Sie alles aus und gruppieren Sie es. Jetzt haben wir eine einzige Gruppe.

• Wählen Sie dann in der oberen linken Ecke das Gruppenwerkzeug aus und erstellen Sie eine Gruppe in der Mitte des Kopfes (im Nasenbereich). Ändern Sie in der Symbolleiste auf der rechten Seite den Stil von „Gruppe“ in „Ziel“, nennen Sie es „ctrl_front“, duplizieren Sie es und benennen Sie das Duplikat „ctrl_back“.

• Wählen Sie für das Ziel „ctrl_back“ in der Symbolleiste rechts die Option „Einschränkungen“ aus. Wählen Sie Übersetzungseinschränkungen aus der Liste der verfügbaren Einschränkungsoptionen aus. Klicken Sie auf das Symbol vor der ausgewählten Einschränkungsoption, um deren Eigenschaften festzulegen.

• Stellen Sie die Stärke auf -100 und das Ziel auf Strg vorne ein. Wenn Sie nun die Strg-Taste nach vorne bewegen, bewegt sich die Strg-Taste nach hinten in die entgegengesetzte Richtung. Es wird uns helfen, Einschränkungen für Teile des Gesichts festzulegen, die sich in die entgegengesetzte Richtung bewegen sollen, wie z. B. die Ohren. Es sollte so aussehen 👇🏽

  
  

  

• Jetzt legen wir Einschränkungen für den Rest des Gesichts fest. Wir werden auch die Augen (links und rechts) und Ohren (links und rechts) gruppieren, um sie besser verwalten zu können. Wir werden solche Einschränkungen für die Augen festlegen 👇🏽

• Beachten Sie, wie wir zunächst den Ursprung der Augengruppe auf den gleichen Wert wie den von ctrl_front festlegen. Wenn wir also das ctrl_front- Ziel verschieben, bewegt sich die Augengruppe, die jetzt auf dieses Ziel beschränkt ist, mit, ohne unbeholfen herumzuspringen. Das Gleiche machen wir auch für Folgendes:

Wir müssen den Lippen keine Einschränkungen auferlegen.

So sieht es aus, nachdem wir alle unsere Einschränkungen hinzugefügt haben 👇🏽

💃🏽 🥳 Herzlichen Glückwunsch, wir haben unser Element erfolgreich für die Art von Animation vorbereitet, die wir erreichen möchten. Wütend!!

Animationszeit!🕶️

Klicken Sie in der Symbolleiste rechts auf die Schaltfläche „Animieren“ , um zur Animationsoberfläche zu wechseln. Wir werden sechs Animationszeitleisten erstellen und alles mit einer Zustandsmaschine verknüpfen. In der Zeitleiste können wir mithilfe dessen, was wir zuvor mit Knochen und Einschränkungen eingerichtet haben, Keyframes festlegen, um die Animation zu erstellen, die wir erreichen möchten.

Die erste Timeline-Animation ist die Leerlaufanimation. Es handelt sich um den Ruhezustand der Animation. Wir verwenden dies, wenn das animierte Element nicht aktiviert ist.

• Zuerst gruppieren wir alle Teile unseres Elements und benennen es „Charakter“, bevor wir mit dem Animationsprozess beginnen.
• Dann stellen wir die Dauer auf 4 Minuten ein,
• Legen Sie unseren Arbeitsbereich fest und stellen Sie den Timeline-Typ auf Schleife ein. Es ist ideal für eine Leerlaufanimation.

Für diese Leerlaufanimation erzeugen wir eine Illusion aus Atmung, leichten Haarbewegungen und Blinzeln. Anhand des Halsknochens, der Haarknochen und der Elemente für das rechte/linke Auge werden wir die erforderlichen Keyframes in verschiedenen Posen festlegen, was bedeutet, dass wir die spezifischen Eigenschaften des ausgewählten Elements an den Punkten auf der Zeitachse festlegen können. Unter Berücksichtigung des Übergangsstils von einem Keyframe zum nächsten wählen wir die Art der Interpolation aus, die wir benötigen. Sie finden es unten rechts im Abschnitt „Zeitleiste“. Die Interpolation erfolgt entweder gehalten, linear oder kurvenförmig, je nachdem, wie Sie von einem Keyframe zum nächsten wechseln möchten. Es wird so aussehen 👇🏽

Aus dem GIF oben können Sie erkennen, dass wir auf den verschiedenen Keyframes auf der Zeitleiste unterschiedliche Posen für die ausgewählten Elemente festgelegt haben. Dieser Übergang von einem Keyframe zum anderen bildet die Animation. Mit demselben Verfahren erstellen wir die anderen fünf Zeitleisten. Sie können hier klicken, um diese Animation anzusehen und sich die verschiedenen Zeitpläne im Detail anzusehen. Es sieht so aus 👇🏽

Richten Sie Ihre Zustandsmaschine ein🏍️

Wir sind am letzten Teil dieses Animationsprozesses angelangt. Eine Zustandsmaschine ist eine visuelle Möglichkeit, Animationen zu verbinden. Mit der Zustandsmaschine können wir steuern, welche Animation basierend auf der von uns festgelegten Eingabe abgespielt wird. Wir können zwei oder mehr Timeline-Animationen mischen oder überblenden, sodass sie gleichzeitig abgespielt werden. Wir müssen die richtigen Eingaben in der Zustandsmaschine auswählen, da diese zur Steuerung der Animation in der App verwendet werden.

In der Zustandsmaschine haben wir drei Arten von Eingaben:

• Zahl: Eine Zahleneingabe ist ein numerischer Wert, der in einer Zustandsmaschine zur Darstellung und Steuerung quantitativer Daten verwendet wird. Sie können die Zustandsmaschine so einstellen, dass sie abhängig vom eingegebenen numerischen Wert in einen bestimmten Zustand übergeht.
• Boolescher Wert: Eine boolesche Eingabe ist ein Binärwert, der wahr oder falsch sein kann. Nun geht die Zustandsmaschine je nach Eingabewert in einen bestimmten Zustand über, entweder wahr oder falsch.
• Trigger: Ein Triggereingang ist ein Eingang, der zur Signalisierung eines Ereignisses verwendet wird. Im Gegensatz zu booleschen Eingaben, die ihren Zustand beibehalten, bis sie explizit geändert werden, werden Trigger nach dem Auslösen auf ihren Standardzustand zurückgesetzt.

Klicken Sie im Animationsfenster auf die Plus-Schaltfläche und erstellen Sie eine Zustandsmaschine. Wir werden es Login State Machine nennen. Dieser Name ist wichtig, da wir ihn später im Code zur Identifizierung unserer Zustandsmaschine benötigen.

Führen Sie die folgenden Schritte aus, um Ihre Zustandsmaschine einzurichten:

1. Erstellen Sie zwei Ebenen in unserer Zustandsmaschine und benennen Sie eine in Type um. Mehrere Ebenen helfen uns, mehrere Zustände gleichzeitig abzuspielen. Um eine weitere Ebene in Ihre Zustandsmaschine aufzunehmen, klicken Sie auf das Plus-Symbol oben im StateMachine-Diagramm.
2. Im Abschnitt „Eingaben“ sollten Sie die Beschriftung direkt neben der Zustandsmaschine sehen. Klicken Sie auf das Plus-Symbol, wählen Sie eine Zahleneingabe aus und benennen Sie sie „look“ . Wir werden diese Eingabe beim Mischen (Mischen) der Timeline-Animationen „look_left “ und „look_right“ verwenden, sodass es bei steigenden Zahlen so aussieht, als würde die Figur von links nach rechts schauen.
3. Erstellen Sie eine weitere Eingabe, diesmal einen booleschen Wert, und nennen Sie sie check . Es steuert, wann die Animation aussehen soll. Erstellen Sie zwei Trigger-Eingänge, benennen Sie einen in „fail“ und den anderen in „success“ um. Sie benötigen dies, um die Erfolgs- und Fehlerzustände auszulösen.
4. Ziehen Sie nun die Animation „look_idle“ und die Animation „look_left“ per Drag-and-Drop auf das Diagramm der Typebene . In diesem Diagramm sehen Sie einige Standardzustände:
   • Eintrag – Dies ist der Einstiegspunkt eines beliebigen Animationsstatus, der mit diesem Status verbunden ist.
   • Exit – Dies ist der Ausstiegspunkt eines beliebigen Animationsstatus, der mit diesem Status verbunden ist
   • Anystate – Jeder damit verbundene Animationsstatus wird abgespielt, solange er die Bedingungen im Übergang erfüllt.
5. Der Übergang ist die Linie und der Pfeil, die zwei oder mehr Zustände verbinden. Wenn Sie die Pfeilrichtung betrachten, können Sie sehen, wie die Zustände jetzt verbunden sind. Wenn Sie darauf klicken, können Sie die Eigenschaften des Übergangs sehen. In den Eigenschaften können Sie eine Bedingung erstellen. Mithilfe einer der zuvor erstellten Eingaben können Sie die Bedingung definieren, die vor dem nächsten Zustand im Übergang erfüllt sein muss.
6. Verbinden Sie in der Typebene die Zustände „Entry “, „look_Idle “ und „look_left“ mithilfe des Übergangs linear. Für den Zustand „look_left“ möchten wir, dass es sich um eine Mischung aus der Animation „look_left “ und „look_right“ handelt. Wählen Sie dazu den Status „look_left“ im Diagramm aus und wählen Sie auf der linken Seite des Bedienfelds „Blend 1d“ aus. Wählen Sie für die Eingabeoption die Look- Eingabe aus. Diese Eingabe steuert unsere Mischung. Wählen Sie dann im Abschnitt „Zeitleisten“ die Zeitleisten „look_left “ und „look_right “ aus und legen Sie sie auf 0 und 100 fest. Wenn Sie den Look- Eingabewert erhöhen, werden die beiden Animationen gemischt.
7. Verbinden Sie den Blend-Status mithilfe der Übergangslinie und des Pfeils mit dem Look_idle . Klicken Sie nun auf den Pfeil und legen Sie die Bedingung fest, wenn die Prüfeingabe falsch ist. Es wird uns helfen, die Animation zu steuern und der StateMachine mitzuteilen, dass sie den Status „look_idle“ anzeigen soll, wenn der boolesche Prüfwert falsch ist. Machen Sie dasselbe für den Übergangspfeil, der von „look_idle“ zurück zum Mischzustand zeigt, aber überprüfen Sie jetzt, ob „boolean“ auf „true“ gesetzt ist.
8. Wenn Sie nun auf das Kontrollkästchen für die Prüfeingabe klicken, können Sie es auf wahr oder falsch setzen. Wenn Sie die Zustandsmaschine abspielen, zeigt sie so lange den Status „ look_Idle “ an, bis Sie den booleschen Wert „check“ auf „true“ ändern. Anschließend wird die Animation „ look_left“ gestartet. Um „look_left“ und „look_right“ zu verschmelzen, erhöhen Sie den Wert der Look-Eingabenummer.
9. In Layer 1 fügen Sie nun die Erfolgs- und Fehlerauslöser hinzu. Vom Eintrittszustand aus gelangen Sie in den Ruhezustand . Verbinden Sie vom Ruhezustand aus sowohl den Erfolgs- als auch den Fehlerzustand . Fügen Sie beim Übergang vom Leerlauf- in den Erfolgszustand eine Bedingung hinzu. Fügen Sie in dieser Bedingung die Erfolgsauslösereingabe hinzu. Es heißt, dass die Zustandsmaschine die Erfolgsanimation nur dann abspielen soll, wenn die Erfolgseingabe ausgelöst wird.
10. Machen Sie dasselbe für den Fail- State-Übergang, fügen Sie jedoch stattdessen den Fail- Trigger in die Bedingung ein. Erstellen Sie nun vom Erfolg eine Übergangslinie zurück zum Leerlauf. Wählen Sie hier „Exit time“ und legen Sie den Wert auf 100 % fest. Dies bedeutet, dass die Leerlaufanimation erst abgespielt wird, wenn die Erfolgsanimation beendet ist. Machen Sie dasselbe für den Failback -zu -Leerlauf- Übergang.

Nun sieht die komplette Animation in der Zustandsmaschine so aus 👇🏽

Sehen Sie sich hier die vollständige Animation und den Zustandsautomaten an.

Herzlichen Glückwunsch 🥳, wir haben unser Element erfolgreich animiert und mit einer Zustandsmaschine eingerichtet! Bevor wir jedoch die Rive-Datei exportieren, ändern wir den Hintergrund und die Hemdfarben des Charakters. Es wird so aussehen👇🏽

Die Hintergrundfarbe ist (#B581EB) und die Hemdfarbe des Charakters ist (#BD08D7)

Hier ist der Link zur Animation, um alles im Detail zu sehen

Implementieren Sie Animationen in Ihrer Flutter-App👨‍🚒

Wir werden diese Animation auf unserer Anmeldeseite verwenden. Erstellen Sie ein Flutter-App-Projekt und fügen Sie die Rive-Abhängigkeit zur pubspec.yaml hinzu

 dependencies: rive: ^0.11.12

Fügen Sie außerdem die exportierte Rive-Datei zu Ihren Projektressourcen hinzu. Jetzt können wir mit der Erstellung der Benutzeroberfläche basierend auf unserem Design fortfahren. Unser Ziel ist es, dass die Animation Folgendes bewirkt:

• Reagieren Sie mit der Erfolgsanimation, wenn E-Mail/Passwort korrekt sind
• Reagieren Sie mit der Fehleranimation, wenn die E-Mail-Adresse/das Passwort falsch ist
• reagieren Sie mit der Richtung des Cursors im Textfeld

Wir werden zunächst einige Dinge vor der Widget Build-Funktion definieren.

 ///Login details String emailCred = "[email protected]"; String passwordCred = "123456"; /// input form controller FocusNode emailFocusNode = FocusNode(); TextEditingController emailCtr = TextEditingController(); FocusNode passwordFocusNode = FocusNode(); TextEditingController passwordCtr = TextEditingController(); /// rive controller and input values StateMachineController? controller; SMIInput<bool>? check; SMIInput<double>? look; SMIInput<bool>? success; SMIInput<bool>? fail; bool isLoading = false; bool isError = false; @override void initState() { emailFocusNode.addListener(emailFocus); passwordFocusNode.addListener(passwordFocus); super.initState(); } @override void dispose() { emailFocusNode.removeListener(emailFocus); passwordFocusNode.removeListener(passwordFocus); super.dispose(); } void emailFocus() { check?.change(emailFocusNode.hasFocus); } void passwordFocus() { check?.change(passwordFocusNode.hasFocus); }

Hier können wir Folgendes feststellen:

• Die richtige E-Mail-Adresse und das richtige Passwort sind definiert.
• Der Fokusknoten und der Textbearbeitungscontroller für E-Mail und Passwort sind ebenfalls definiert.
• Hier werden der Rive-Controller und die Eingänge als nullbar definiert. Sie bemerken, dass die Eingaben mit dem genauen Namen definiert werden, den sie in der Zustandsmaschine verwenden.
• Der Lade- und Fehler-Boolesche Wert ist definiert.
• In den Funktionen emailFocus und passwordFocus wird die Prüfeingabe basierend auf dem booleschen FocusNode.hasFocus geändert
• Dann sehen wir in den Funktionen initState und dispose , dass die Listener hinzugefügt und entfernt werden. Die Zuhörer sind es gewohnt, Fokusveränderungen zuzuhören.

Sie können sich den Code für die Benutzeroberfläche und den Rest des Codes hier ansehen. Dieser Code zeigt, wie man das RiveAsset hinzufügt:

 SizedBox( height: 250, width: 250, child: RiveAnimation.asset( "assets/login_screen.riv", fit: BoxFit.fitHeight, stateMachines: const ["Login State Machine"], onInit: (artboard) { controller = StateMachineController.fromArtboard( artboard, "Login State Machine", ); if (controller == null) return; artboard.addController(controller!); check = controller?.findInput("check"); look = controller?.findInput("look"); success = controller?.findInput("success"); fail = controller?.findInput("fail"); }, ), ),

Aus dem obigen Code können wir Folgendes feststellen:

• Die StateMachine hat denselben Namen, den wir ihr im Rive-Editor gegeben haben
• Der Controller und die Eingänge sind definiert

Hier ist der Code für die Login-Funktion:

 void login()async{ //extract the text coming from the text fields final email = emailCtr.text; final password = passwordCtr.text; //Set loading boolean to true and delay to give an illusion of loading setState(() { isLoading = true; }); await Future.delayed( const Duration(milliseconds: 2000), ); // check if details entered is the same as the correct creditials defined if (email == emailCred && password == passwordCred) { //if correct trigger the success input and set error boolean to false success?.change(true); setState(() { isError = false; }); if(context.mounted){ // delay and navigate to home screen await Future.delayed( const Duration(seconds: 2),(){ Navigator.push(context, MaterialPageRoute(builder: (context) =>const HomeScreen())); }); } } else { // if details don't match defined credentials // set error boolean to true and trigger the fail input // set loading boolean to false setState(() { isError = true; }); fail?.change(true); } setState(() { isLoading = false; }); }

Sehen Sie sich den vollständigen Code hier an.

Damit haben wir unseren Login-Animationscode fertiggestellt. So sieht alles aus:

Fazit🏋️‍♀️

Glückwunsch! Wir haben diese einfache interaktive Anmeldeanimation fertiggestellt. Hier finden Sie einen Überblick über alles, was wir erreichen konnten:

• Richten Sie unser Element auf der Rive-Zeichenfläche ein.
• Erstellen Sie verschiedene animierte Zustände dieses Elements.
• Fügen Sie alle diese Zustände mit Hilfe der Zustandsmaschine zusammen
• Exportieren Sie es und fügen Sie es der Flutter-App hinzu

Wenn Sie dieses Tutorial Schritt für Schritt befolgen, kann es sein, dass Sie auf einige Engpässe stoßen, aber mit etwas Übung wird es einfacher. Sie können mich auf Twitter erreichen oder kommentieren, wenn Sie Hilfe bei der Durchführung dieses Tutorials benötigen.

Schauen Sie sich diese Video-Tutorials an, um die Rive-Animation besser zu verstehen

Sie können auch auf dem Rive-Kanal nach mehreren Video-Tutorials zu Rive-Animationen suchen.

Referenzen🧶

Animierter Login-Charakter