Sie drehen sich, hüpfen wild umher oder verwandeln sich. Dank Logo-Animation kann in einer spielerischen Form das Logo zum Leben erweckt werden. Wir zeigen dir anhand unseres eigenen Cmsbox-Logos, wie ein animiertes Logo funktioniert.
Idee
Mit der Einführung unseres neuen Corporate Designs, setzen wir uns zum Ziel, den digitalen Charakter unserer Dienstleistung und unser technisches Know-How besser zu kommunizieren. Durch ein animiertes Logo brachten wir Bewegung in unser Markenzeichen. Wer sich in der Schweiz mit diesem Thema auseinandersetzt, wird unweigerlich an Swisscom denken. Die Einführung eines bewegten Markenzeichens im Jahr 2008 war schliesslich ein Novum in der Schweizer Markengeschichte. Wie wir Nerds halt sind, haben wir die Umsetzung der Logo-Animation auf der Swisscom Webseite analysiert. Da stösst man schnell auf eines spezielle Grafik-Datei.
Die Grafik zeigt die 90 Animationsschritte des Logos für die gesamte Animationssequenz der «Life Form». Wie bei einer Filmrolle werden einzelne Bilder in einer schneller Abfolge angezeigt, genau so kannst du dir die Animation vorstellen. Die Grafik mit allen Animationsschritten int komplett auf der Webseite integriert. Sichtbar wird aber nur immer ein bestimmter Bereich des Bildes. Wenn alle Schritte angezeigt wurden, wird wieder der erste Teil des Bildes angezeigt. Und die Animation startet von vorne. Für Nerds: das verschieben des Bildes funktioniert mit margin-left.
Durch die Frequenz von 15 Bewegungen pro Sekunde bleibt der Austausch des Bildausschnittes für das menschliche Auge unbemerkt und es ergibt sich eine flüssige Bewegung des Logos.
Dieser Lösungsansatz ist naheliegend, auch von älteren Browser-Generationen unterstützt und technisch einfach umzusetzen. Ein Nachteil ergibt sich durch die Verwendung einer Pixelgrafik anstelle einer Vektor-Grafik: Die Grafik-Datei ist mit 96 KB vergleichsweise schwer und eine beliebige Skalierung bei gleichzeitig scharfer Darstellung nicht möglich. Man könnte mittlerweile auch eine Video-Datei oder GIF-Animation mit ähnlichem Resultat einbetten.
Darum wollten wir unsere Logo Animation anders umsetzen, schliesslich wollten wir unsere technischen Fähigkeiten zur Geltung bringen. Das Ziel war, die Animation dem Browser zu überlassen. Das neue Corporate Design und der Entwurf der Logo-Animation entstand bei der Agentur Tollkirsch. Die Animation wurde in Adobe After Effects konzipiert, welches jedoch als Output Video-Formate anbietet. Um eine webfähige, programmierte Sequenz zu erreichen, mussten wir ein Verständnis erarbeiten, wie diese Animation in sich aufgebaut ist.
Formen
Unser neues Markenzeichen besteht aus zwei farbigen Polygonen, innerhalb eines Gerüstes eines Würfels. Vom Designer wurden vier verschiedene Zustände vorgesehen. Die vier Zustände haben wir als SVG-Grafik mit vektorisierten Pfaden exportiert, damit erhielten wir den genauen mathematischen Aufbau dieser Formen.
Für eine flüssige Animation mussten wir nun noch die Zwischenschritte definieren.
Keyframes
Die Übergänge zwischen zwei Zuständen (Keyframes) sollten zu unserer Herausforderung runde Formen beinhalten. Solche Rundungen werden programmatisch mit Bézier-Kurven erstellt, wobei bei jedem Eckpunkt zusätzlich noch zwei Kontrollpunkte gesetzt werden, welche die Form der Kurve beschreiben.
Interpolation
Auf dieser Basis überlassen wir die Generierung der tatsächlichen Bewegung dem Web-Browser. Wir liefern also nicht einfach ein Bild aus und definieren, welcher Teil des Bildes sichtbar ist, sondern wir sagen dem Browser, wie er die Animation berechnen soll. Dies wird Interpolation genannt. Jeder geometrische Punkt hat eine Start-, Zwischen- und Endposition für jede Sequenz. Mit der vorgegebenen Dauer der Sequenz kann unser Skript für jeden Zeitpunkt genau berechnen, wo sich welcher Punkt auf seinem Pfad befindet und die entsprechenden Formen zeichnen (lassen). Diese Berechnung und Zeichnen der Form geschieht während der Animation ungefähr 60x pro Sekunde.
Eine wichtige Erkenntnis dabei war, dass auch die Kontrollpunkte der Beziér-Kurven einen solchen Pfad relativ zu ihren Eckpunkten durchlaufen. Dadurch verstärkt bzw. reduziert sich die Biegung der Kurve im Laufe der Animationssequenz.
Easing
Die Geschwindigkeit eines Punktes auf seinem Pfad von der Start- zur Endposition kann ebenfalls beeinflusst werden. Bei vielen Effekten ist kein linearer Ablauf gewünscht, sondern ein Beschleunigen und Abbremsen zu Beginn bzw. Ende der Animationssequenz (für Kenner: ease-in und ease-out). Wir haben verschiedene Varianten mit stärkerer und schwächerer Beschleunigung getestet, haben aber schlussendlich doch den linearen Verlauf (ganz rechts) bevorzugt.
Endresultat
Mit diesem Verständnis haben wir eine JavaScript Applikation programmiert, welche die Animationssequenz des Markenzeichens auf eine HTML5 Zeichenfläche (Canvas) zeichnet. Diese Lösung setzt ausser JavaScript und einem einigermassen modernen Browser keine weiteren technischen Voraussetzungen voraus und läuft auch auf mobilen Endgeräten einwandfrei. Und im Vergleich zu einem Bild und CSS ist diese Lösung schneller geladen und das Logo wird erst noch schärfer dargestellt. (für Kenner: dank requestAnimationFrame).
Das entwickelte Skript können wir für andere Logos wiederverwenden. Wir brauchen dazu einfach eine Vektorisierte Datei für das Logo und eine Vorlage für die gewünschte Animation.
Und geschätzte Swisscom: wir helfen gerne weiter.
Wir arbeiten mit Hochdruck an einer Lösung zur Behebung der Probleme.
