Smarterer Animationscode schreiben

Wenn Sie jemals eine Animation codiert haben, die länger als 10 Sekunden dauert und Dutzende oder sogar Hunderte von choreografierten Elementen enthält, wissen Sie, wie schwierig es ist, die gefürchtete „Code-Mauer“ zu vermeiden. Schlimmer noch, die Bearbeitung einer Animation, die von jemand anderem (oder sogar von Ihnen selbst vor 2 Monaten) erstellt wurde, kann ein Albtraum sein.

In diesen Videos zeige ich Ihnen die Techniken, die Profis anwenden, um ihren Code sauber, übersichtlich und einfach zu überarbeiten. Skriptbasierte Animation bietet Ihnen die Möglichkeit, Animationen zu erstellen, die unglaublich dynamisch und flexibel sind. Mein Ziel ist es, dass Sie Spaß haben, ohne sich im Prozess zu verzetteln.

Wir werden für die gesamte Animation GSAP verwenden. Wenn Sie es noch nicht verwendet haben, werden Sie schnell sehen, warum es so beliebt ist – die Workflow-Vorteile sind erheblich.

Sehen Sie sich den Pen SVG Wars: May the morph be with you. (Craig Roblewsky) auf CodePen an.

Das obige Demo von Craig Roblewsky ist ein großartiges Beispiel für die Arten komplexer Animationen, die ich Ihnen beim Erstellen helfen möchte.

Dieser Artikel richtet sich an diejenigen, die ein grundlegendes Verständnis von GSAP haben und ihren Code auf intelligentere, effizientere Weise angehen möchten. Selbst wenn Sie GSAP noch nicht verwendet haben oder ein anderes Animationswerkzeug bevorzugen, werden Sie von diesen Lösungen für einige der häufigen Probleme, mit denen alle Animatoren konfrontiert sind, fasziniert sein. Lehnen Sie sich zurück, schauen Sie zu und genießen Sie es!

Video 1: Überblick über die Techniken

Das folgende Video gibt Ihnen einen schnellen Einblick hinter die Kulissen, wie Craig seinen Code in der SVG Wars-Animation strukturiert hat und welche vielen Vorteile diese Workflow-Strategien bieten.

Obwohl dies eine detaillierte und komplexe Animation ist, ist der Code überraschend einfach zu handhaben. Er wurde mit demselben Ansatz geschrieben, den wir bei GreenSock für jede Animation verwenden, die länger als ein paar Sekunden dauert. Das Geheimnis dieser Technik ist zweigeteilt:

1. Teilen Sie Ihre Animation in kleinere Zeitlinien auf, die in einer Haupt-Zeitlinie (übergeordneten) zusammengefügt werden.
2. Verwenden Sie Funktionen, um diese kleineren Zeitlinien zu erstellen und zurückzugeben.

Dies macht Ihren Code modular und einfach zu bearbeiten.

Video 2: Detailliertes Beispiel

Ich zeige Ihnen genau, wie Sie eine Sequenz mit Funktionen erstellen, die Zeitlinien erstellen und zurückgeben. Sie werden sehen, wie das Verpacken von allem in eine große Zeitlinie (keine modulare Verschachtelung) zu dem einschüchternden „Wall of Code“ führt. Ich werde die Animation dann in separate Zeitlinien aufteilen und eine parametrisierte Funktion verwenden, die die ganze schwere Arbeit mit 60 % weniger Code! erledigt.

Lassen Sie uns die wichtigsten Punkte zusammenfassen...

Vermeiden Sie die gefürchtete Code-Mauer

Eine gängige Strategie (insbesondere für Anfänger) ist die Erstellung einer einzigen großen Zeitlinie, die den gesamten Animationscode enthält. Obwohl eine Zeitlinie viele Funktionen bietet, die diesen Programmierstil unterstützen, ist es einfach eine grundlegende Realität jedes Programmierunterfangens, dass zu viel Code an einem Ort unhandlich wird.

Lassen Sie uns den Code verbessern, damit wir dieselben Techniken anwenden können, die Craig in der SVG Wars-Animation verwendet hat...

Sehen Sie sich den Pen Wall of Code auf CodePen an.

Untersuchen Sie unbedingt den Code im „JS“-Tab. Selbst für etwas so Einfaches kann der Code schwer zu scannen und zu bearbeiten sein, insbesondere für jemanden, der neu im Projekt ist. Stellen Sie sich vor, diese Zeitlinie hätte 100 Zeilen. Das mentale Parsen davon kann eine mühsame Arbeit sein.

Erstellen Sie eine separate Zeitlinie für jedes Panel

Indem die Animation für jedes Panel in eine eigene Zeitlinie aufgeteilt wird, wird der Code leichter zu lesen und zu bearbeiten.

var panel1 = new TimelineLite();
panel1.from(...);
  ...

var panel2 = new TimelineLite();
panel2.from(...);
  ...

var panel3 = new TimelineLite();
panel3.from(...);
  ...

Jetzt ist es viel einfacher, schnell zu scannen und den Code für panel2 zu finden. Wenn diese Zeitlinien jedoch erstellt werden, werden sie alle sofort abgespielt, aber wir möchten sie sequenziert haben.

Sehen Sie sich den Pen an

Kein Problem – verschachteln Sie sie einfach in einer übergeordneten Zeitlinie in der gewünschten Reihenfolge.

Verschachteln Sie jede Zeitlinie mit add()

Eines der großartigsten Merkmale von GSAPs Zeitlinien-Werkzeugen (TimelineLite / TimelineMax) ist die Möglichkeit, Animationen beliebig tief zu verschachteln (Zeitlinien in andere Zeitlinien einzufügen).

Die Methode add() ermöglicht es Ihnen, jeden Tween, jede Zeitlinie, jedes Label oder jeden Callback an einer beliebigen Stelle in einer Zeitlinie hinzuzufügen. Standardmäßig werden die Dinge am Ende der Zeitlinie platziert, was perfekt für die Sequenzierung ist. Um diese 3 Zeitlinien nacheinander ablaufen zu lassen, werden wir jede davon wie folgt zu einer Hauptzeitlinie hinzufügen:

//create a new parent timeline
var master = new TimelineMax();

//add child timelines
master.add(panel1)
  .add(panel2)
  .add(panel3);

Demo mit dem gesamten Code für diese Stufe

Sehen Sie sich den Pen an

Die Animation sieht gleich aus, aber der Code ist viel raffinierter und leichter mental zu verarbeiten.
Einige wichtige Vorteile der Verschachtelung von Zeitlinien sind, dass Sie

• Den Code leichter scannen können.
• Die Reihenfolge von Abschnitten ändern können, indem Sie einfach den add()-Code verschieben.
• Die Geschwindigkeit einer einzelnen Zeitlinie ändern können.
• Einen Abschnitt mehrmals wiederholen lassen können.
• Präzise Kontrolle über die Platzierung jeder Zeitlinie mithilfe des Positionsparameters haben (außerhalb des Rahmens dieses Artikels).

Verwenden Sie Funktionen, um Zeitlinien zu erstellen und zurückzugeben

Der letzte Schritt zur Optimierung dieses Codes ist die Erstellung einer Funktion, die die Animationen für jedes Panel generiert. Funktionen sind von Natur aus mächtig, da sie

• Viele Male aufgerufen werden können.
• Parametrisiert werden können, um die Animationen, die sie erstellen, zu variieren.
• Es Ihnen ermöglichen, lokale Variablen zu definieren, die nicht mit anderem Code in Konflikt stehen.

Da jedes Panel mit derselben HTML-Struktur und demselben Animationsstil erstellt wird, gibt es viel repetitiven Code, den wir durch die Verwendung einer Funktion zur Erstellung der Zeitlinien eliminieren können. Sagen Sie dieser Funktion einfach, auf welches Panel sie sich beziehen soll, und sie erledigt den Rest.

Unsere Funktion nimmt einen einzelnen panel-Parameter entgegen, der im Selektor-String für alle Tweens in der Zeitlinie verwendet wird.

function createPanel(panel) {
  var tl = new TimelineLite();
  tl.from(panel + " .bg", 0.4, {scale:0, ease:Power1.easeInOut})
    .from(panel + " .bg", 0.3, {rotation:90, ease:Power1.easeInOut}, 0)
    .staggerFrom(panel + " .text span", 1.1, {y:-50, opacity:0, ease:Elastic.easeOut}, 0.06)
    .addLabel("out", "+=1")
      .staggerTo(panel + " .text span", 0.3, {opacity:0, y:50, ease:Power1.easeIn}, -0.06, "out")
    .to(panel + " .bg", 0.4, {scale:0, rotation:-90, ease:Power1.easeInOut});
  return tl; //very important that the timeline gets returned
}

Wir können dann eine Sequenz aus allen Zeitlinien erstellen, indem wir jede davon mithilfe von add() in eine Hauptzeitlinie einfügen.

var master = new TimelineMax();
master.add(createPanel(".panel1"))
  .add(createPanel(".panel2"))
  .add(createPanel(".panel3"));

Abgeschlossene Demo mit vollständigem Code

Sehen Sie sich den Pen an

Diese Animation wurde absichtlich relativ einfach gestaltet und verwendet eine Funktion, die die ganze schwere Arbeit erledigen konnte. Ihre realen Projekte können mehr Varianz aufweisen, aber selbst wenn jede Kindanimation einzigartig ist, empfehle ich dennoch, Funktionen zur Erstellung jedes Abschnitts Ihrer komplexen Animationen zu verwenden.

Schauen Sie sich dieses Beispiel im wunderbaren Pen von Sarah Drasner an, das mithilfe von Funktionen erstellt wurde, die Zeitlinien zurückgeben, um zu veranschaulichen, wie das geht!

Sehen Sie sich den Pen an

Und natürlich wird dieselbe Technik für die Hauptanimation der GSAP-Seite verwendet.

Sehen Sie sich den Pen an

GSDevTools

Sie haben vielleicht den schicken Zeitlinien-Controller bemerkt, der in einigen Demos und Videos verwendet wird. GSDevTools wurde entwickelt, um Ihren Workflow zu optimieren, indem es Ihnen ermöglicht, jede GSAP-Tween oder Zeitlinie schnell zu navigieren und zu steuern. Um mehr über GSDevTools zu erfahren, besuchen Sie greensock.com/GSDevTools.

Fazit

Wenn Sie das nächste Mal ein mäßig komplexes Animationsprojekt haben, probieren Sie diese Techniken aus und sehen Sie, wie viel mehr Spaß es macht und wie schnell Sie experimentieren können. Ihre Kollegen werden Sie loben, wenn sie eine Ihrer Animationen bearbeiten müssen. Sobald Sie sich mit der Modularisierung Ihres Codes und der Nutzung der erweiterten Funktionen von GSAP vertraut gemacht haben, wird sich wahrscheinlich eine ganz neue Welt von Möglichkeiten eröffnen. Vergessen Sie nicht, Funktionen zur Handhabung wiederkehrender Aufgaben zu verwenden.

Wie bei allen Projekten wird ein Kunde oder Art Director wahrscheinlich fragen:

• „Können Sie das Ganze etwas verlangsamen?“
• „Können Sie diesen 10-Sekunden-Teil in der Mitte ans Ende verschieben?“
• „Können Sie das Ende beschleunigen und es ein paar Mal wiederholen lassen?“
• „Können wir zu diesem Teil am Ende springen, damit ich den Text überprüfen kann?“
• „Können wir diese neue, dumme Idee hinzufügen, die mir gerade eingefallen ist?“

Früher hätten diese Anfragen einen Panikanfall ausgelöst und das gesamte Projekt gefährdet, aber jetzt können Sie einfach sagen: „Geben Sie mir 2 Sekunden…“

Additional Resources

Um mehr über GSAP und seine Möglichkeiten zu erfahren, sehen Sie sich die folgenden Links an:

• GreenSock Animation Platform (GSAP)
• GSAP Getting Started Guide
• Offizielles GSAP Video Training
• GSAP Dokumentation
• GSAP Showcase
• GreenSock Support Foren
• GSDevTools
• Club GreenSock (erhalten Sie Bonus-Plugins/Tools)

CSS-Tricks-Leser können den Gutscheincode CSS-Tricks für 25 % Rabatt auf eine Club GreenSock-Mitgliedschaft verwenden, die Ihnen viele Extras wie MorphSVG und GSDevTools (in diesem Artikel erwähnt) bietet. Gültig bis 14.11.2017.