BLOGAus Alt mach Neu – Animationen-Upcycling

Als Webentwickler:in erfreust du dich des Öfteren an den ausgefallenen Screendesigns deiner Designer-Kolleg:innen. Diese übertreffen dabei zweifellos jedes Vorherige und schaffen somit immer wieder neue Herausforderungen. Besonders anspruchsvoll sind hierbei Animationen. Doch wie und wo diese fordernde Aufgabe angehen?

Zum Glück gibt es da draußen nette Leute, welche ihre Erfahrungen teilen und sich die Mühe machen, alles aufzuschreiben. Dementsprechend viele Anleitungen finden sich online. Also warum etwas Altes, schon Vorhandenes neu entwickeln? Warum sich mit "Problemen" aufhalten, die längst gelöst sind?

Im Folgenden zeige ich dir, wie du aus Alt Neu machen kannst.

Warum kompliziert, wenn’s auch einfach geht?

Auf den ersten Blick erscheinen uns Animationen gelegentlich komplizierter als sie sind. Der Grund hierfür ist meist die Länge und die damit verbundenen Abfolgen. Wollen wir diesen Umstand nun ändern, so können wir die zu Beginn komplizierte Animation in mehrere kleine und leichte Abschnitte unterteilen. Hierbei hilft es, sich Kleinigkeiten zu notieren und diese zu beschreiben. Die Kurzfassung der Beschreibung findest du integriert in den folgenden Animationen.

Das Genie beherrscht … Google

Wie heißt es so schön: „Das Genie beherrscht das Chaos“. Oder in unserem Falle besser: „Das Genie weiß zu googeln“. Wir können und müssen nicht auf Anhieb wissen, wie wir eine bestimmte Animation programmieren. Was wir allerdings wissen sollten ist, wo wir die Informationen herbekommen. Die wie so oft einfachste Lösung: Google.

Bezogen auf die obige Animation: Irgendjemand hat sich sicher schon einmal damit beschäftigt, Punkte gleichmäßig auf einem Kreis anzuordnen. Wahrscheinlich sogar mit einer Funktion, dass der Kreis bei Klick rotiert. Wichtig für diese Animation ist, dass die Anzahl der Elemente variabel ist. Sie soll beliebig und ohne weiteren Aufwand erweiterbar sein. Bei der Suche finden sich unzählige Seiten, wie z.B.:

• http://jsfiddle.net/webtiki/u45c06q0/
• https://css-tricks.com/snippets/sass/placing-items-circle/

Sollte das bei dir nicht der Fall sein und du kannst deine Mini-Animation so noch nicht finden, dann gehe einen Schritt zurück und teile die Animation nochmals in kleinere Komponenten auf. Falls der Abschnitt dann zu kurz ist – bzw. mit wenigen Zeilen Code selbst erzeugt werden kann, dann spare dir die Zeit, um danach zu suchen.

Google ersetzt Denken nicht

Nachdem ich mich durch einige Seiten geklickt hatte, fand ich den ersten passenden Link. Bei diesem handelte es sich jedoch um eine feste Anzahl von Elementen. Und die Rotation sah nicht wirklich toll aus, da sie immer wieder sprang. Mit dem zweiten Link fand ich eine Möglichkeit, variable Elementanzahlen zu verarbeiten. Das Hindernis hierbei war, dass ich bei diesem Projekt nicht mit scss arbeitete. Das heißt, ich musste den Code umschreiben: mit jquery kurzerhand erledigt und so für mich nutzbar.

Die letzte Aufgabe für diese Animation war nun, die Rotation so umzuschreiben, dass sie variabel ist und das schnelle Drehen wegfällt. Die notwendige Rotation ist klar: Einfach den Winkel nehmen, auf welchem das Element platziert wurde. Nun lief die Rotation immer entgegen des Uhrzeigersinns. Hier sollte es jedoch der kurzmöglichste Rotationsweg sein. Mit anderen Worten: Ist der Winkel kleiner als 180°, dann minus diesen Winkel; ist er größer, dann plus die Differenz zu 360°. Somit muss sich bei jeder Rotation gemerkt und angepasst werden, auf welchem Winkel sich das Element befindet. Der Sonderfall 180° kann je nach Präferenz zugeordnet werden.

Für meine Überprüfung nutzte ich nur Zahlen zwischen -90° und 270° (für das Element, welches sich ganz oben befindet). Alle Werte, die kleiner bzw. größer sind, rechnete ich wieder in diesen Bereich um, um diese unschönen schnellen Mehrfachrotationen zu eliminieren. Wirklich wichtig hierbei ist, die Transition Duration auf "0" zu setzen, damit eben diese Korrektur nicht sichtbar wiedergegeben wird. Nun drehen sich alle Kreise immer in die gewünschte Richtung. Die Verschiebung der gesamten Animation nach unten erzeugen wir einfach mit einem entsprechenden Top-Wert und gewünschter Transition Duration.

Sieht aus wie … ja, wie eigentlich?

Die Unterpunkte lassen sich jetzt wie die Elemente auf dem äußeren Kreis anordnen. Hierfür müssen lediglich die Winkel angepasst und anschließend noch eine Linie gezogen werden, um beide Elemente zu verbinden. Für die Demonstration brauchen wir nun noch eine neue Anordnungsmöglichkeit. Auch hier hilft die gute alte Web-Suche – wir müssen uns lediglich im Klaren sein: Wonach sieht die gewünschte visuelle Darstellungform aus? Welchem bekannten Modell ähnelt sie am meisten? Vielleicht wie ein Tortendiagramm? Noch besser, wie eine Kreisnavigation. Die Beschreibung im Link ist sehr detailliert und passt auf Anhieb, sofern sie Schritt für Schritt befolgt wird. Eventuelle Anpassungen, wie in meinem Fall, ausgenommen.

Bei mir hatte jeder der Punkte noch einen eigenen Text, welcher an selber Stelle wie der Haupttext angezeigt werden sollte. Sinnvoll ist es, den Text aus der Anpassung herauszulassen, um ihn nicht verzerren, drehen und anschließend noch verschieben zu müssen. (Die Positionierung danach wäre deutlich aufwändiger.) Für die Verbindungslinie geben wir den Vierecken der Kreisnavigation einfach eine Linie als Hintergrund. Durch Testen, Verschieben und Abändern sieht das Ergebnis und die gesamte Animation direkt viel gleichmäßiger und ordentlicher aus.

Last but not least …

Zu guter Letzt die magnetischen Elemente. Sie geben dem Ganzen noch den letzten Schliff. Damit die Animation nicht zu überladen aussieht, bewegen sich nur die inaktiven äußeren Punkte mit der Maus. Sobald ein Element aktiv ist, bleibt es statisch.

Aus Herausforderungen lernen

Funktioniert auf Anhieb? Sieht gut aus? Dann Glückwunsch! Wenn nicht, nicht gleich das Handtuch werfen! Zuerst einmal das Problem identifizieren und herausfinden, wodurch genau es verursacht wird. In den meisten Fällen hilft der Satz früherer Lehrer/Professoren: „Lesen Sie die Aufgabe GENAU durch“, sofern das tatsächliche Ergebnis nicht dem in der Anleitung verheißenen entspricht. Kleine Flüchtigkeitsfehler passieren schnell – vor allem, wenn die Abgabefrist näher rückt. Die Zeit für die nachträgliche, meist aufwändige Fehlersuche kann oftmals durch sorgfältiges Lesen des Textes zu Beginn eingespart werden.
 

Aufgekommene Probleme bei meiner Animation:

• falsche Transition-Duration
• Linien zwischen den Haupt- und Unterpunkten
• Texte der Unterpunkte positionieren