Wie man eine interaktive RIVE-Animation erstellt
Das Erstellen ansprechender und interaktiver Animationen ist für jeden Designer spannend. In diesem Blogbeitrag zeige ich meinen Zugang zu einer interaktive 2D-Animation mit Rive. Machen Sie sich bereit, den entzückenden und faszinierenden AI-Bot kennenzulernen! Mit Mausverfolgung, einem Mouseover-Effekt und einer winkenden Hand soll diese Animation Benutzer fesseln und ihrer digitalen Erfahrung ein bisschen Humor und Enagement geben.
Probieren Sie die Rive-Animation hier selbst aus:
Konzept und Ziele der RIVE Animation
Der AI Bot soll symbolisieren, wie KI Künstlern im Brainstorming-Prozess helfen kannIch hatte die Vision, eine Animation zu erstellen, die nicht nur die Nutzer bezauberte, sondern sie auch dazu einlud, sich zu engagieren und zu spielen. Das Hauptziel bestand darin, ein unterhaltsames und visuell ansprechendes Erlebnis zu bieten, das beim Publikum einen bleibenden Eindruck hinterlässt. Mit dem AI-Bot wollte ich ein Lächeln hervorrufen und Neugierde wecken durch nahtlose Interaktion.
Als erstes skizzierte ich am Papier:
Dann kam ein detaillierterer Sketch in Adobe Fresco:
Mit der fertigen Idee ging es in die RIVE app.
Der Animationsprozess in RIVE
Rive, die Animationssoftware, wurde zu meinem bevorzugten Werkzeug für dieses Projekt aufgrund ihrer Vielseitigkeit und leistungsstarken Funktionen. Ihre intuitive Benutzeroberfläche und umfangreiche Funktionalität ermöglichten es mir, den Cute Bot in einem schrittweisen Prozess zum Leben zu erwecken. Zuerst habe ich den Charakter selbst entworfen und mich auf einen bezaubernden 2D-Flat-Stil konzentriert, der Persönlichkeit ausstrahlte.
Dann nutzte ich die State-Machine-Funktion von Rive, um Eye-Tracking umzusetzen und dem Bot zu ermöglichen, dem Mauszeiger des Benutzers zu folgen.
Here’s a great tutorial for the process: https://www.youtube.com/watch?v=uLsrLpl2HYE&t=675s&ab_channel=Rive
Simultaneously, I employed Rive’s capabilities to create a mouse-over effect, changing the color of the light bulb above the bot’s head from black to yellow when hovered over.
Um eine zusätzliche Portion Charme hinzuzufügen, habe ich eine winkende Handanimation mit Hilfe der Bone-Funktion von RIVE hinzugefügt, um den Bot noch liebenswerter zu machen.
Benutzererfahrung und Interaktion
Die Benutzererfahrung mit der Cute Bot-Animation soll erfreulich und fesselnd sein. Wenn der Benutzer seine Maus bewegt, verfolgen die Augen des Bots die Bewegungen, was ein Gefühl von Verbindung und Interaktivität erzeugt. Wenn der Cursor über den Kopf des Bots schwebt, leuchtet die Glühbirne in einem lebendigen Gelb auf, lenkt die Aufmerksamkeit auf sich und lädt zur Erkundung ein. Diese dynamische Reaktion verbessert die gesamte Interaktion und fügt eine zusätzliche Ebene der Immersion hinzu. Darüber hinaus bringt die winkende Handanimation eine verspielte und verspielte Note in den Charakter des Bots und lässt ihn lebendig und nachvollziehbar wirken.
Zusammenfassung
Die Erstellung der interaktiven Rive-App-Animation mit dem Cute Bot war eine aufregende Reise. Durch sorgfältiges Design und die Nutzung der State-Machine-Funktion von Rive konnte ich diesem charmanten Charakter Leben und Interaktivität einhauchen. Die Kombination aus Eye-Tracking, dem Mouseover-Effekt und der winkenden Handanimation hat zu einer fesselnden Erfahrung für die Benutzer geführt. Ich bin dankbar für die Gelegenheit, mit Rive zusammenzuarbeiten und ein so ansprechendes Projekt zum Leben zu erwecken.
Sie können hier einen genaueren Blick auf die Projektdateien werfen: https://rive.app/community/5120-10304-ai-helps-brainstorming/
Deutsch 
English