Interaktionsgestaltung mit Rive und Flutter von Ergosign

Animationen der FichtelApp für den großen Screen

Nach dem riesigen Erfolg der FichtelApp schafft unsere Anwendung nun auch den Sprung auf den großen Screen, und zwar auf vorerst 8 digitale Stelen, die im Landkreis Wunsiedel ab Ende 2024 zu finden sind. Das Besondere an diesen Stelen ist, dass sie interaktiv sind und somit von allen genutzt werden können.  

Wie auch schon bei der App für das Handy oder Tablet, lädt ein digitaler Werner zum Mitmachen ein. Er führt die Menschen dabei durch das Menü der digitalen Stele und hilft, sich in der Anwendung zu orientieren. Mithilfe von Rive wurden verschiedene Animationen für Werner entworfen, die das Erlebnis mit der Stele besonders einladend gestalten. 

Was es mit der Animation mit Rive im Detail auf sich hat und wie die Implementierung mit Flutter genau funktioniert, wollen wir in diesem Insights-Artikel erläutern. 

Werner im Detail 

„Werner“ ist quasi das Maskottchen des Fichtelgebirges — sowohl in der Realität als auch in digitaler Version. Dadurch ergibt sich ein hoher Wiedererkennungswert, auch weit über die Grenzen des Fichtelgebirges hinaus. Menschen kennen Werner aus der App, Image-Filmen, Print- und Online-Medien: daher war klar, Werner muss auch auf die Stele. 

Er agiert hier als Schnelleinstieg und nach der ersten Interaktion mit der Stele durchläuft die Figur verschiedene States, während sie zusammenschrumpft, wobei sie nie ganz verschwindet. Werner steht jederzeit zur Verfügung und agiert als Ankerpunkt für Menschen, die sich mit der Interaktion an einem digitalen Screen nicht gut auskennen. Dadurch wird die Navigation der Anwendung vereinfacht und einladend gestaltet. Durch den Einsatz von Rive bei der Animationsgestaltung wirken die Übergänge besonders fließend und Bewegungen erscheinen natürlich.  

Rive im Detail 

Rive eignet sich generell für Animationen besonders gut, weil es zum einen unendliche Möglichkeiten für Animationen mit hohem Detailgrad bietet. Zum anderen macht Rive das Handover zu den Entwickler:innen einfach. Denn die Animationssoftware Rive ist - ähnlich wie Figma - vorrangig eine Browseranwendung und somit flexibel und geräteunabhängig einsetzbar.

Die Developer erhalten ein detailliertes Handover mit Animationsvorschau, so dass sie wissen, wie sich die Animation im Detail verhalten soll, und dies auch eigenständig testen können. Allerdings gehen Design und Entwicklung durch Rive Hand in Hand. Das Design Team kann hier viel Vorarbeit leisten und die States vordefinieren. Das Entwicklungsteam kann die von Rive bereitgestellten Trigger initialisieren und hat dadurch vollen Zugriff auf die Animation.

Rive X Flutter Integration

Beide Tools sind regelmäßig bei uns im Einsatz, sowohl getrennt als auch in Kombination. 

Rive-Animationen finden regelmäßig ihren Platz auf unserer Website sowie in Kundenprojekten, um Interaktionen einzuladen oder einen Wow-Effekt zu generieren. Flutter andererseits hat sich als Industriestandard beim App Development entwickelt. 

Flutter erlaubt eine pixelgenaue Entwicklung mit voller Kontrolle über das Aussehen der Elemente. Die Software basiert auf einer einzigen, plattformübergreifenden Codebasis, wodurch die Anwendung auf Android, iOS und mit minimalen Anpassungen auch auf Desktop- und Web-Plattformen läuft. 

Beide Tools sind von plattformübergreifender Natur. Vor allem die Widget-basierte Architektur von Flutter und die nutzerfreundlichen APIs von Rive sorgen dafür, dass Animationen schnell und effizient in eine App integriert werden können.

Suchen auch Sie nach einer App-Lösung, die Kunden und Stakeholder begeistert? Dann ist eine maßgeschneiderte App mit individuell angefertigten Animationen vielleicht genau, was Sie suchen. Sprechen Sie uns an, wir freuen uns auf ein erstes Gespräch!