Wir haben den Startbildschirm unserer App in ein lebendiges Universum verwandelt, das sich im Laufe des Tages verändert. Dies wurde zu einer der künstlerischsten Funktionen unserer App, und in diesem Artikel zeigen wir die Besonderheiten ihrer Umsetzung.
Wenn du das Videoformat bevorzugst, bitte sehr:
Im vergangenen Jahr haben nur 6 % der tTravel-Nutzer ihre Hintergrundbilder geändert – die meisten wussten nicht einmal, dass es diese Funktion gibt, weil sie nicht ausdrücklich gezeigt wurde. Also fragten wir uns: Wie können wir den Nutzern einen kleinen Anstoß geben, ohne das Gefühl eines Easter Eggs zu zerstören?
Um diese Aufgabe zu erfüllen, arbeiteten wir mit Liuba Syrotiuk zusammen, einer talentierten Rive-Animationskünstlerin, die wir auf dem Lisbon Web Summit kennengelernt hatten.
Beim Brainstorming hatten wir zwei Ideen für den Hinweis:
- Leuchtende Ränder der Hintergrundbilder. Inspiriert vom Halo-Effekt in Journey.
- Ein Vogel, der über den Startbildschirm der App fliegt – etwas, das Interesse weckt und dazu verleitet, ihn durch Tippen auf den Bildschirm „fangen“ zu wollen. Beim Tippen ändert sich dann das Hintergrundbild.
Wir entschieden uns für den Vogel und dafür, unsere statischen Hintergrundbilder in Universen voller Leben, Bewegung und Zeit zu verwandeln.
Zunächst erweiterte Liuba die Designs unserer alten Hintergrundbilder
zu sieben neuen Universen und passte ihre Farben an die Palette unserer App an.
Anschließend entwickelte sie in der Illustrator-Datei zeitbasierte Varianten für jedes Universum, um einen vollständigen Tag-Nacht-Zyklus zu schaffen. Öffnest du die App am Morgen, siehst du eine sonnige Landschaft. Kehrst du am Abend zurück, erwartet dich ein leuchtender Sonnenuntergang oder eine sternenklare Nacht.
Darüber hinaus setzte Liuba einen Parallaxeffekt um, der auf die Neigung des Telefons reagiert, und fügte bewegte Elemente wie Wolken oder Meteore hinzu, um die Aufmerksamkeit der Nutzer zu wecken.
Schließlich wollten wir mehrschichtige Übergänge erreichen: Statt statischer Bildwechsel wie in der ersten Version werden Elemente nun sanft ein- und ausgeblendet und verschoben.
Fließende Übergänge gestalten
Hier sind Liubas Notizen zu ihrem Arbeitsprozess und den Schwierigkeiten, auf die sie stieß, als sie unseren Startbildschirm zum Leben erweckte:
Eine der größten Herausforderungen bei Design und Animation bestand für mich nicht darin, den Parallaxeffekt selbst zu erstellen, sondern herauszufinden, wie sich fließende Übergänge zwischen zwei Parametern jedes Universums organisieren lassen: der Tageszeit und dem Wechsel des Universums.
Unser Ziel war ein mehrschichtiger Übergang mit Schwenkeffekt, bei dem ein Element nahtlos durch ein anderes ersetzt wird. Der erste Schritt in Rive bestand darin, alles aus Illustrator zu übertragen, sicherzustellen, dass die Farben funktionierten, Verläufe zu korrigieren und einen einfachen Schwenkeffekt einzurichten.
Nachdem alles nach Rive exportiert worden war, konfigurierte ich den Parallaxeffekt und stimmte die Farben fein ab, bevor ich mich den Übergängen widmete.
Zunächst baute ich zum Testen beide Übergänge als getrennte Ebenen auf, wobei jeder Zustand durch einen einfachen Trigger wechselte. Wir wollten die Übergänge mit zwei numerischen Triggern erstellen: Der erste numerische Trigger ändert das Universum, der zweite steuert die Tageszeit (die sich innerhalb von 24 Stunden automatisch von selbst ändern sollte). Nach dem Test der ersten Rive-Datei erkannten wir, dass wir Trigger für jedes Universum und jede Tageszeit brauchen, damit die Entwickler sie besser steuern können.
Ich testete verschiedene Zustandsmaschinen und versuchte, den Übergang zwischen den Universen zu verbessern, indem ich eine weitere Ebene mit Ein-/Ausgangsanimationen für jedes Universum hinzufügte, in der sich die Ebenen hinein- und herausbewegten. Dieser Ansatz funktionierte sowohl beim Auslösen eines Universumswechsels als auch bei einer Änderung der Tageszeit. In diesem Stadium sah der Übergang besser aus und fühlte sich fließender an, war aber noch nicht perfekt:
Nach mehreren Testrunden erkannte ich, dass die Übergänge am besten aussahen, wenn jede Übergangsebene Ein-/Ausgangsanimationen erhielt. Also baute ich eine komplexe Matrix für Tageszeiten- und Universumsübergänge mit eigenen Ein-/Ausgangszuständen:
Schließlich funktionierte es genauso, wie ich es mir vorgestellt hatte. Ich stimmte das Timing fein ab, indem ich bestimmte Abschnitte verlangsamte und Pausen zwischen den Animationen einfügte. Das Ergebnis war ein fließender, allmählicher Parallaxeffekt. In Rive sah er sehr ausgereift aus:
Als ich die Animation in der echten App laufen sah, wirkte sie noch besser, als ich erwartet hatte. Es fühlte sich an, als wäre der Startbildschirm der App eine kleine interaktive Welt, die auf dich und die Tageszeit reagiert.
Wir durchliefen mehrere Runden der Farbkorrektur, damit alles harmonisch wirkte. Dabei nutzte ich die Gelegenheit, die Ebenen in einzelne Elemente aufzuteilen – etwa Sonne, Wolken, Himmelsverlauf und kleinere Details –, wodurch die Animation mehr Tiefe und Flexibilität erhielt.
Und hier ist das Endergebnis:
Natürlich erwarten wir nicht, dass diese Funktion unsere Kennzahlen in die Höhe schnellen lässt. Wir möchten jedoch, dass unsere App immersiv, kreativ und einfach schön aussieht. Mit diesem Hintergrundbild-Easter-Egg wollen wir jene Nutzer belohnen, die sich so intensiv mit der App beschäftigen, dass sie all ihre Funktionen und Geheimnisse entdecken. Letztlich geht es nicht immer um Kennzahlen, manchmal geht es einfach um unsere Liebe zu tTravel. Für uns sollte jeder Bildschirm unserer App wie ein kleines Kunstwerk wirken.
Wir hoffen, dieser Artikel war hilfreich für dich. Lade tTravel für iOS oder Android herunter, falls du es noch nicht getan hast. Und bleib gespannt auf die nächsten Artikel. Bis zum nächsten Mal.
Von: Artem Shambalov & Liuba Syrotiuk