Entfesseln Sie Ihre Kreativität mit Rive in Mendix

Elliot Clements
9. September 2024
Minute gelesen

Dieser Artikel wurde gemeinsam mit Marko Dogramadzi verfasst.

Webdesign-Trends sind in ständiger Bewegung. Eine der aufregendsten neuen Entwicklungen ist der Anstieg der Interaktivität durch bewegte Grafiken und Animationen.

Enter Spalten, eine leistungsstarke Animationsplattform, die die Lücke zwischen Motion Design und Interaktivität schließt. Sie ermöglicht Designern die schnelle Erstellung produktionsreifer Grafiken für den Einsatz im Web, auf Mobilgeräten und in Spielen.

Was Rive so vielversprechend macht, ist seine revolutionäre ZustandsmaschineStellen Sie sich eine animierte Figur vor, die gehen, joggen und laufen kann. Jede Animationssequenz erhält einen eigenen Zustand. Übergeben Sie den aktuellen Zustand an die Rive-Runtime-Engine, und deren Zustandsmaschine verarbeitet nahtlos alle Übergänge, was zu einem flüssigen, fesselnden Erlebnis für den Endbenutzer führt. Ein Wendepunkt in Sachen Interaktivität.

Selbst die aufwendigsten Designs und Animationen bleiben leicht, oft unter 30 KB. Verabschieden Sie sich von großen GIFs oder Videodateien. Mit Rive werden Animationen schnell geladen, was die Gesamtleistung verbessert.

Rive ist intuitiv zu bedienen für diejenigen, die bereits einen Hintergrund im Motion Design haben. Für komplette Neulinge, die die Welt der Animation erkunden möchten, ist die Rive – Erste Schritte Seite ist der perfekte Ausgangspunkt.

Wie Sie sehen, sind wir große Fans von Rive. Das brachte uns zu der Frage, ob wir Rive in Mendix auf Low-Code-Weise?

Ja! Tatsächlich haben wir ein brandneues Widget für die Verwendung von Rives in Ihrem nächsten Mendix Projekt. Egal, ob Sie fesselnde Anmeldeseiten erstellen oder die Produktionslinie einer Fertigungsanlage visualisieren, mit diesem Widget können Sie die Leistungsfähigkeit produktionsreifer Grafiken nutzen.

Rive-Zustandsmaschine

Um das zu konfigurieren Mendix Rive Controller-Widget: Es ist wichtig zu verstehen, wie ein Rive-Widget gesteuert wird.

Eine Rive-Animation ist in einer .riv-Datei gekapselt und kann eine oder mehrere Zustandsmaschinen enthalten. Zustandsmaschinen sind Sammlungen von Animationen, die nahtlose Übergänge zwischen verschiedenen Zuständen ermöglichen, mit denen Sie flüssige und reaktionsfähige UI-Elemente erstellen können.

Eine State Machine hat mehrere Eingänge, das einer von drei Typen sein kann:

Boolesche Eingabe: Fungiert als Schalter, der ein- oder ausgeschaltet werden kann. Zu einem bestimmten Zeitpunkt kann nur ein Boolescher Eingang pro Zustandsmaschine auf „true“ gesetzt werden.
Triggereingang: Ähnlich wie Boolean, kann aber nur für kurze Zeit wahr werden. Nützlich, um eine bestimmte Animationssequenz auszulösen und dann zu einem vordefinierten Zustand zurückzukehren.
Zahleneingabe: Akzeptiert einen Ganzzahlparameter zur Verwaltung der Animationsanzeige, z. B. zur Bestimmung der Laufgeschwindigkeit einer Figur oder zur Verfolgung der Anzahl der Sterne, die für eine Bewertung vergeben werden.

Durch die Steuerung dieser Eingaben können Sie alle möglichen Animationen und Übergänge ausführen, die in der Rive-Datei definiert sind.

Sie haben also eine tolle Idee für eine Rive-Animation. Wie integrieren Sie diese in Ihre Mendix App?

Erstellen Sie Ihren ersten Rive

Wir werden eine interaktive Anmeldeseite erstellen. Auf dieser Seite kann ein Benutzer unter dem wachsamen Auge eines Bären seine Anmeldeinformationen eingeben!

[Wenn Sie mehr über die Entstehung unseres Bären erfahren möchten, hat das Team von Rive eine ausführlicher Blog Erklärung seiner Entstehung.]

Um zu beginnen, müssen wir zuerst einen Rive als .riv-Datei erstellen und exportieren.

Wir werden den Bären aus der Rive-Community verwenden, erstellt von Juan Carlos, die Sie herunterladen können hier.

Laden Sie die Rive Animation Controller-Modul von dem Mendix Marketplace in Ihr Projekt.

Speichern von .riv-Dateien

Im Rive Controller-Modul gibt es eine Übersichtsseite zur Verwaltung der in der Anwendung anzuzeigenden .riv-Dateien. Dadurch können beliebig viele .riv-Dateien in der Anwendung selbst gehostet und bei Bedarf dem Rive Canvas-Widget bereitgestellt werden, wenn es auf die Seite geladen wird.

Beim Hinzufügen einer Rive-Datei muss die Eigenschaft „Rive-Name“ angegeben werden. Dieser Name wird in den Widget-Parametern des Rive-Controllers (Rive-Name) verwendet, um das Widget auf den richtigen Rive zu verweisen.

Fügen Sie RiveFile_Overview zu Ihrer Navigation hinzu, um es für Administratoren zugänglich zu machen. Hier hosten Sie Ihre .riv-Dateien
Führen Sie Ihre App aus und greifen Sie auf die Seite RiveFile_Overview zu.
Laden Sie unsere .riv-Datei hoch und geben Sie ihr einen eindeutigen „Rive-Namen“ an. In diesem Beispiel nennen wir sie einfach „Bär“.

Überprüfen der Zustandsmaschine

Bevor wir eine Rive-Datei in unsere Anwendung integrieren, möchten wir zunächst alle Interaktionen verstehen, die sie unterstützt.

Visual Studio Code bietet eine praktische Erweiterung, vscode-rive-viewer, mit dem Entwickler eine .riv-Datei direkt im Editor öffnen können. Dieses Tool bietet eine klare Ansicht der verfügbaren Zustandsmaschinen und ihrer entsprechenden Eingaben.

Unser Bear unterstützt fünf Eingänge:

2 Boolesche Eingaben (Erfolg und Fehlschlag)

2 Trigger-Eingänge (Check und Hands Up)

1 Zahleneingabe (Aussehen)

Erstellen Sie eine neue Seite „Anmelden“ mit zwei Eingabefeldern: Benutzername und Passwort.

Verwalten von Rive-Animationen mit der RiveState-Entität

Das Modul Rive Animation Controller verfügt über eine vielseitige nicht persistente Entität (NPE), RiveState, die den aktuellen Status einer Rive-Animation verwalten soll. Diese Entität umfasst alle Standardattribute, die für den Betrieb einer Animation erforderlich sind. Beim Umgang mit Zahleneingaben, die das Verhalten der Animation basierend auf numerischen Werten beeinflussen, sind jedoch zusätzliche Schritte erforderlich.

Wir empfehlen, den RiveState durch die Erstellung einer spezialisierten Entität zu erweitern. Diese spezialisierte Entität erbt die gemeinsamen Attribute und ermöglicht Ihnen das Hinzufügen benutzerdefinierter Zahleneingaben.

Erstellen Sie eine neue Entität „Bear“, die eine Verallgemeinerung von RiveState ist. Fügen Sie unseren Zahlen-Input als ganzzahliges Attribut „LookValue“ hinzu.
Fügen Sie unserer Seite eine Datenansicht hinzu, die das Bärenobjekt zurückgibt und als Datenquelle für unsere Rive-Animation fungiert.
Fügen Sie das RiveController-Widget in dieser Datenansicht hinzu

Konfigurieren Sie die Rive-Controller-Eigenschaften entsprechend dem Bears State Machine Model (aus Schritt 5).

Widget-Parameter

Wir möchten, dass das Rive Controller-Widget alle möglichen Rive-Animationsdateien über konfigurierbare Widget-Eigenschaften anzeigen kann. Die folgenden Parameter müssen als Eingaben für das Widget festgelegt werden:

- Rive-Name: Name der Rive-Datei (wie in der RiveFile-Entität festgelegt)
- State Machine Name: State Machine Name für die Rive-Datei
- Boolesche Eingangsnamen: Name aller 'Booleschen' Zustandsmaschineneingänge für den Rive
- Aktiver Eingang (Boolesch): Name des aktiven Booleschen Zustandsmaschineneingangs (der durch Ändern des Attributwerts aktualisiert werden kann)
- Trigger Input Names: Name aller 'Trigger' State Machine-Eingänge für den Rive
- Aktiver Eingang (Trigger): Name des aktiven Trigger-Eingangs (kann durch Ändern des Attributwerts festgelegt werden)
- Namen der Zahleneingaben: Name aller Zahleneingaben des Zustandsautomaten für den Rive, mit einem Integer-Attribut, das den Wert für jede Zahleneingabe angibt.

Führen Sie das Projekt aus und viel Erfolg! Unser Bär wacht über unser Anmeldeformular.

Als Nächstes fügen wir Interaktivität hinzu, sodass der Bär auf die Eingabe eines Benutzers reagiert.

Steuerung der Animation

Mit den Boolean- und Trigger-State-Machine-Eingabeattributen „aktiv“ können Sie die Animation so konfigurieren, dass sie aktualisiert wird, indem Sie den Wert des Attributs auf den Namen der Eingabe aktualisieren. Dies geschieht am besten in einem Nanoflow.

Legen Sie für Boolesche Eingaben den Wert des Attributs „Aktive Eingabe (Boolesch)“ auf den Namen der Booleschen Eingabe fest, die aktiv sein soll. Der Rest wird als inaktiv festgelegt.

Legen Sie für Trigger-Eingaben den Wert des Attributs „Aktive Eingabe (Trigger)“ auf den Namen der Trigger-Eingabe fest, die Sie auslösen möchten. Das Widget legt den Attributwert automatisch auf eine leere Zeichenfolge fest, nachdem der Trigger ausgelöst wurde.

Bei Zahleneingaben kann das einer bestimmten Zahleneingabe entsprechende Zahlenattribut jederzeit aktualisiert werden. Die Animation wird aktualisiert, um den neuen Wert widerzuspiegeln.

Dies bedeutet, dass Mikro-/Nanoflüsse bestimmte Animationen auslösen können, wodurch sichergestellt wird, dass der Rive vollständig in das Mendix Anwendung.

Fügen Sie unserem Bären Interaktivität hinzu.

Erstellen Sie für jede Interaktion einen Nanoflow, der den Status entsprechend der Benutzeraktion ändert.

Interaktionsmodell

Interaktion	Eingangstyp	Logik
Bei Eingabe des Benutzernamens	Boolean	Ändern Sie den Booleschen Eingang „ActiveStateNameBoolean“ in „Check“. Der Bär wird nach unten schauen.
Bei Änderung der Benutzernameneingabe	Nummer	Ändern Sie die Zahleneingabe „LookValue“ in die Zeichenlänge des Benutzernamens. Die Augen des Bären bewegen sich während der Eingabe durch den Benutzer von links nach rechts.
Bei Eingabe des Passworts	Boolean	Ändern Sie den Booleschen Eingang „ActiveStateNameBoolean“ in „hands_up“. Der Bär bedeckt seine Augen mit den Pfoten.
Klicken Sie auf „Anmelden“	Auslösen	Wenn die Anmeldung erfolgreich war, ändern Sie den Trigger-Eingang „ActiveStateNameTrigger“ in „Erfolg“, damit der Bär lächelt. Wenn die Anmeldung nicht erfolgreich ist, ändern Sie den Trigger-Eingang „ActiveStateNameTrigger“ in „fehlgeschlagen“, woraufhin der Bär nach Luft schnappt.