Verbesserungen bei Animationen: Kamerapfade sind jetzt flüssiger denn je!

Bei Mapcreator arbeiten wir immer daran, unser Tool zu aktualisieren und zu verbessern. Als wir Ende 2022 die Animationsfunktion eingeführt haben, waren wir unglaublich stolz! Aber selbst die stolzesten Eltern müssen erkennen, dass es noch Luft nach oben gibt. Und jetzt ist es so weit! Animationen ließen sich zwar schon mit nur wenigen Klicks erstellen, aber bei den Übergängen zwischen Keyframes kam es manchmal zu kleinen Pausen oder Rucklern. Schluss mit diesem unguten Gefühl — die Kamerapfade haben jetzt ein echtes Upgrade bekommen, und wir zeigen dir gern, was das für unsere Nutzer bedeutet! 

Unten siehst du einige echte Vorher-Nachher-Beispiele unserer Animationen. Zu jedem Beispiel erklären wir kurz, was genau verbessert wurde.

Beispiel 1:
In dieser Animation siehst du einen Zoom auf Denver, Colorado in den USA über 3 Zwischen-Keyframes. Wie im Vorher-Nachher-Video unten zu sehen ist, wirkt die neue Version sowohl beim Kamerapfad als auch bei den Geschwindigkeitsänderungen deutlich flüssiger.

Beispiel 2:
Diese Animation besteht aus einem Flug zwischen drei Orten in Rotterdam in den Niederlanden, mit wechselnden Zoomstufen, Rotationen und Neigungen. Im Vorher-Video macht die Kamera rund um den zweiten Keyframe eine unnatürliche Bewegung. Nach unseren neuen Verbesserungen läuft das jetzt wieder seidenweich.

Beispiel 3:
Wie dieses Beispiel zeigt, können Nutzer die Kamera jetzt ganz einfach einen parabolischen Überflug ausführen lassen, indem sie nur 3 Keyframes erstellen. Diese Animation führt die Zuschauer von Rotterdam zu einer herausgezoomten Ansicht der Niederlande und anschließend in Eindhoven hinein. Die vorherige Version erzeugt zwei geradlinige Bewegungen mit einem Stopp dazwischen, statt einer weichen, parabelförmigen Kurve.

Wie konnte unser Team das umsetzen?

Auf den ersten Blick klingt die Berechnung eines weichen Kamerapfads nach einem sehr schwierigen Problem. Eine Kamera kann über die Welt schwenken und hinein- oder herauszoomen; sie kann sich außerdem drehen und neigen, um aus verschiedenen Richtungen auf die Karte zu schauen. All diese Änderungen müssen flüssig und nahtlos erfolgen — und zwar allein auf Basis einer Reihe von Keyframes, die der Nutzer festlegt.

Was Entwickler bei einer komplexen Aufgabe wie dieser tun können, ist, sie in mehrere einfachere Teilaufgaben zu zerlegen. In diesem Fall ist das sogar sehr leicht. Um eine Kameraposition vollständig zu definieren, brauchen wir tatsächlich nur fünf Zahlen:

1. Breiten- und Längengrad definieren den Ort auf der Erde, an dem sich die Kamera befindet;
2. Zoom definiert, wie nah die Kamera am Boden ist;
3. Die Winkel für Rotation und Neigung definieren die Blickrichtung der Kamera.

Diese fünf Zahlen siehst du in der oberen Leiste des Mapcreator-Tools, und sie ändern sich sogar live, wenn du die Karte bewegst.

Es zeigt sich, dass wir für flüssige Kamerabewegungen lediglich jeden dieser Parameter separat animieren (also interpolieren) müssen. Das ist deutlich einfacher! Die Interpolation einer einzelnen Zahl ist ein gut erforschtes mathematisches Problem, für das es viele verschiedene Lösungen gibt. Wenn du neugierig bist, schau dir diese Seite an — dort findest du Bilder verschiedener Interpolationsarten für dieselbe Punktmenge. Nach einigen Experimenten haben wir diesen Algorithmus als die für unsere Anforderungen am besten geeignete Interpolation ausgewählt. Es handelt sich um eine Variante des bekannteren kubischen Spline-Algorithmus, die vorhersehbarere Kurven erzeugt als die ursprüngliche Version.

Das reicht allerdings noch nicht ganz für ein wirklich großartiges Ergebnis: Da wartet noch ein weiteres Problem. Ist dir schon einmal aufgefallen, dass der Boden beim Blick aus dem Fenster eines Flugzeugs sehr langsam zu vorbeiziehen scheint, obwohl du in Wirklichkeit sehr schnell fliegst? Das liegt einfach daran, dass der Boden sehr weit entfernt ist. Würdest du mit derselben Geschwindigkeit direkt über dem Boden fliegen, würde alles so schnell vorbeirasen, dass du kaum noch etwas erkennen könntest! Leider betrifft derselbe Effekt auch unsere Kamera: Wenn wir sie sehr schnell hinein- und herauszoomen lassen, entstehen in der wahrgenommenen Geschwindigkeit sehr abrupte und unnatürliche Veränderungen — obwohl ihre tatsächliche Geschwindigkeit technisch gesehen konstant bleibt.

Um das zu lösen, haben wir clevere mathematische Methoden entwickelt, mit denen sich die Kamerageschwindigkeit beim Hoch- und Herunterzoomen anpasst. Je näher die Kamera an den Boden kommt, desto langsamer muss sie sich bewegen — und umgekehrt. Wir sind sogar noch einen Schritt weiter gegangen und haben diese Korrekturen vollständig automatisch und für den Nutzer unsichtbar gemacht. Wahrscheinlich wirst du gar nicht bemerken, dass es überhaupt passiert: Es funktioniert einfach, und die Kamera bewegt sich genau so, wie du es intuitiv erwartest.

Jetzt mussten wir nur noch alles zusammenführen — und da ist es: eine flüssige und natürlich wirkende Kamerabewegung, die automatisch aus einem einfachen Satz von Keyframes berechnet wird.

Probier es selbst aus! 

Was musst du tun, um das auszuprobieren? Öffne einfach die Animationsfunktion! Seit dem neuesten Update erhalten alle deine zukünftigen Kartenanimationen ebenso wie ältere Projekte, die du erneut öffnen kannst, deutlich flüssigere Übergänge. Wir sind gespannt, was du damit erstellen wirst — und wie großartig deine Kartenanimationen aussehen werden!