Übergang von After Effects zu CSS-Übergängen und Keyframes

Websites sehen immer mehr wie mobile Apps aus. Benutzer erwarten auch zunehmend ein mehr App-ähnliches Erlebnis. Von Push-Benachrichtigungen bis hin zum Offline-Modus kommen native Web-Apps ans Ziel.

Sobald Web-Apps wie native Apps funktionieren, würden sich auch die Design-Interaktionen ändern, um den Anwendungsfall zu adressieren – nämlich die Allgegenwart von Animationen. Animationen fördern Interaktionen in all unseren Lieblings-Apps, von Uber bis Lyft und Snapchat bis Instagram.

Als Webentwickler brauchen wir eine gute Grundlage, um Animationen zu erstellen, die sowohl performant als auch wartbar sind, was für die native Web-App-Landschaft von größter Bedeutung ist. Wir müssen in der Lage sein, von After Effects zu CSS-Übergängen, Animationen und Keyframes zu wechseln.

Was ist After Effects?

After Effects ist ein Industriestandardprodukt von Adobe, das von Grafik- und Bewegungsdesignern zum Keyen, Komponieren und Verfolgen von Animationen verwendet wird. Es ist das De-facto -Tool, das von vielen Designern verwendet wird, um Ideen an ein Team zu kommunizieren, indem die Animationsebenen in ein einfach zu visualisierendes Beispielvideo exportiert werden, mit einer Referenztabelle der Start- und Endzeiten der Animation.

Zusammen geben das Demovideo und die Referenztabelle dem Entwicklungsteam eine gute Grundlage für die Implementierung der Animation. Das Video wird verwendet, um das Gesamtbild zu sehen, während die Referenztabelle die winzigen Details liefert, die die Animationsinteraktion ausmachen oder unterbrechen.

Dinge, die wir mit After Effects machen können

Was wir mit After Effects erschaffen können, ist nur durch unsere Vorstellungskraft begrenzt. Es kann eine endlose Anzahl von Postproduktionseffekten für ein Bild oder Video bereitstellen. Im Rahmen des Webs bietet es eine Plattform für den Austausch von Ideen.

Betrachten Sie den roten Ball oben. Der Ball wird mit After Effects animiert, um langsam in die Mitte zu rollen, eine Sekunde anzuhalten und dann langsam zu beschleunigen, um das Ansichtsfenster zu verlassen. Die klassischen Webanimationen von Bewegung, Skalierung, Drehung und sogar Farbwechsel sind in After Effects einfach zu realisieren und dienen als sofort generiertes Anforderungsdokument (oder Video oder GIF) für die umzusetzenden Animationen.

Tools, die Sie für den Einstieg benötigen

Da JavaScript, HTML5, CSS3 und viele andere Sprachen bei den meisten großen Benutzeragenten, von denen eine Website Datenverkehr erhält, zum Standard werden, wird die Verwendung dieser Tools im Großhandel immer praktikabler. Im Folgenden sind einige Schlüsseltechnologien aufgeführt, die Sie bei der Implementierung von Animationen beachten sollten.

CSS-Übergänge

CSS-Übergänge bieten eine Möglichkeit zu steuern, wie schnell eine Änderung der CSS-Eigenschaft auf ein Element angewendet wird. Anstatt einen Stil sofort (ohne Übergänge) anzuwenden, könnte er unter Verwendung von Anpassungsregeln schrittweise über eine definierte Beschleunigungskurve angewendet werden. Ein Beispiel wäre das Ändern einer Hintergrundfarbe von Schwarz auf Weiß über einen bestimmten Zeitraum.

 transition-property: background-color; transition-duration: 3s;

Mit dieser Regel für das Element würde es drei Sekunden dauern, bis sich die Hintergrundfarbe ändert, wobei sie allmählich von Schwarz zu Weiß wechselt und Grauschattierungen durchläuft. Dies kann weiter angepasst werden, indem eine Übergangszeitfunktion hinzugefügt wird, um Zwischenwerte zu berechnen, und eine Übergangsverzögerung, um den Start der Animation zu verzögern.

CSS-Übergänge eignen sich gut für einfache Interaktionen , z. B. das Ändern der Hintergrundfarbe oder das Verschieben eines Elements an eine neue Position.

Verwenden von CSS-Animationen

CSS-Animationen bieten mithilfe von Wegpunkten eine noch feinere Kontrolle über die Zwischenschritte zwischen einer Animation. Wegpunkte (oder Keyframes) sind festgelegte Zeitpunkte während der Animation, wenn wir bestimmte Stile auf ein Element anwenden. Mit den definierten Keyframes legen wir dann fest, wie die Animation aussehen soll.

Angenommen, wir möchten, dass ein Element als Sprung animiert wird. Das Element muss sich nach oben bewegen, zurück zur ursprünglichen Position bewegen, ein wenig nach oben bewegen und dann zurück zur ursprünglichen Position bewegen. Mithilfe von Keyframes können wir diesen elastischen Effekt in Prozentsätze der Zeit zerlegen, die die Animation benötigt.

 @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .element { animation-name: bounce; animation-duration: 3s; }

Wie bei CSS-Übergängen gibt es viele Optionen, die Entwickler konfigurieren können. Wir können Animationen endlos wiederholen lassen, indem wir animation-iteration-count mit dem Wert infinite verwenden, oder sogar die Richtung steuern, in die die Animation fließt, indem wir die Eigenschaft animation-direction verwenden. Viele CSS-Animationseigenschaften geben uns eine feinkörnige Kontrolle, um eine Animation an das Design anzupassen.

CSS-Animationen sind nützlich für kurze, sich wiederholende Animationen wie Erweiterung, Rotation und Sprünge.

Verwendung von JavaScript

JavaScript hat eine Vielzahl von Anwendungen, von Raspberry Pi-Servern bis hin zu clientseitigem Code, aber eine seiner Kernanwendungen bleibt das Ändern von Klassennamen auf Elementen. Das Ändern eines Klassennamens ist eine triviale, aber effektive Möglichkeit, den Zustand eines Elements zu verwalten.

Ein Beispiel ist das einfache Hinzufügen einer active Klasse, die einer anfänglich verborgenen Komponente signalisiert, mit der Animation zu beginnen. Betrachten Sie den Ball unten. Wir verwenden JavaScript, um eine Klasse hinzuzufügen, die die Animation mithilfe von CSS-Übergangseigenschaften auslöst.

Der erste Teil dieser Animation kann mit einer einfachen Kombination aus HTML, CSS und JavaScript nachgebildet werden.

HTML:

 <div class="ball"></div>

CSS:

 .ball { width: 100px; height: 100px; color: red; transform: scale(0.25); transition: all 1s ease-in; } .ball.active { transform: scale(1.25); }

Javascript:

 setTimeout(function() { document.querySelector('.ball').addClass('active'); }, 500);

Wenn das Timeout (von 500ms ) abläuft, wird dem ball div eine Klasse von active hinzugefügt, die die transform -Eigenschaft ändert, die dann die transition -Eigenschaft auslöst, die die transform -Eigenschaft auf dem ball -Element überwacht. Das Ändern von CSS-Klassen mit JavaScript hilft uns nicht nur, den Zustand einer Komponente zu verwalten, sondern gibt uns auch mehr Kontrolle über Animationen als CSS-Animationen und -Übergänge.

Das Steuern von Animationen mit JavaScript ist für die Verwaltung von state von Vorteil, um Ereignisse basierend auf dynamischen Faktoren wie Benutzereingaben oder Anwendungsstatus auszulösen.

Von der Idee über After Effects bis hin zu CSS und JavaScript

Stellen Sie sich vor, wir hätten eine Aufgabe, bei der wir ein Element auf der Seite animieren müssten. Lassen Sie uns dieses Element zu einer roten Kugel machen. Der Ball müsste sich um die Seite drehen sowie nach oben und unten skalieren.

Mit After Effects können wir Mockups erstellen, wie die Interaktion aussehen würde, wenn die Animation ausgelöst wird. Der sich bewegende Ball unten ist ein Beispiel dafür. Beachten Sie, wie die rote Kugel zuerst leicht ansteigt, dann beginnt, um eine kreisförmige Schleife zu beschleunigen und wieder in ihre ursprüngliche Position abbremst. Erst dann verkleinert sich die Kugel auf ihre ursprüngliche Größe.

Betrachten Sie die Maßstabsverschiebung darüber, wo der Ball wächst oder schrumpft, bevor er sich bewegt oder stoppt. Dies ist eine winzige Funktion, die der Designer in After Effects erstellt hat und die dem Entwickler klar mitgeteilt werden muss, damit die kleinsten Details nicht übersehen werden.

Aus diesem Grund müssen einige Vorbereitungen getroffen werden, bevor Sie von After Effects zum Entwickler wechseln. Wir konnten nicht einfach eine Videodatei der Animation in Aktion erstellen, sie mit dem Entwickler teilen und Schluss machen.

Eine Möglichkeit, unsere Ideen klar zu vermitteln, besteht darin, eine Tabelle zu erstellen, in der die für die Animation erforderlichen Schritte aufgeführt sind. Je nach Komplexität der Animation können es einfache Kritzeleien auf einem Ticket, eine Textdatei mit einer Liste oder eine ausgewachsene Tabelle sein.

Eine andere Möglichkeit, Informationen über die Animation zu vermitteln, besteht darin, sie in das Video selbst einzubetten . Sie können dies direkt in After Effects tun, indem Sie wichtige Informationen hinzufügen, z. B. wie stark skaliert werden soll, die Anzahl der Schritte und andere Informationen während des Vorgangs, um dem Implementierer Kontext zu geben. Dadurch können wir das Demovideo als universelle Quelle der Wahrheit nutzen .

Diese exportierte Videodatei aus After Effects fungiert als eine Art Vertrag zwischen Designer und Entwickler. Mit einem gemeinsamen Verständnis können wir die besprochenen Tools verwenden, um es zu implementieren – nämlich CSS-Klassen, JavaScript-Ereignisse, CSS-Übergänge, CSS-Animationen und JavaScript-Animationen.

1. Zerlegen Sie die Animation

Suchen Sie nach Mustern und notieren Sie sich die Zeiten.

Als erstes müssen Sie die Zeitleiste der Animationen für jedes der Elemente (oder Gruppen von Elementen) zeichnen. Wir müssen verstehen, wo sich Animationen überschneiden, um das Timing und den Animationslebenszyklus um sie herum zu synchronisieren. Planung ist der Schlüssel zu einer komplexen Animation, damit wir unsere Lösung inkrementell wartbar für zukünftige Anforderungen aufbauen können.

Aus den obigen Informationen gliedern wir es in die folgenden Schritte:

1. Initialisieren Sie die Komponente und warten Sie auf einen Trigger.
2. Skalieren Sie nach dem Auslösen die Größe und erweitern Sie den Schlagschatten.
3. Bewegen Sie sich danach mit ease-in-out Kreis herum.
4. Verkleinern Sie dann die Größe und verringern Sie den Schlagschatten.

Der Vorteil der Gliederung besteht darin, dass wir verstehen, welche Komponenten außerhalb der Animationselemente leben müssen – zum Beispiel muss der Schlagschatten unabhängig vom Ball sein. Ähnlich wie beim Skizzieren eines Aufsatzes organisiert das Aufschlüsseln der Animation unsere Gedanken über die Arbeit, die wir zu erledigen haben. Outlines veranschaulichen den Denkprozess hinter einer Animation und dienen gleichzeitig als Dokumentation unserer Arbeit.

2. Verhandeln Sie mit Stakeholdern

Können wir einige Bereiche vereinfachen? Welche Teile der Animation sind ein Muss? Können wir Zeiten synchronisieren?

Sobald wir die Arbeit untersucht haben, die zur Erfüllung der Aufgabe erforderlich ist, verhandeln wir. Das Verhandeln mit dem Designer und dem Product Owner liegt in der Verantwortung jedes Entwicklers. Der Implementierer hat ein vollständiges Verständnis der wichtigsten Low-Hanging-Fruits, was getan werden kann und was nicht praktikabel ist.

Animationen sind schwierig, da das Entfernen scheinbar winziger Details aus einer Animation die Benutzererfahrung verändern könnte. Um ein entwicklungsbasiertes Beispiel zu geben, ist das Ändern des Verhaltens einer Animation vergleichbar mit dem Ändern der Antwortnutzlast, die wir möglicherweise von einem API-Aufruf erhalten: Bestimmte Dinge könnten geändert werden, aber einige Teile müssen vorhanden sein.

Dies ist eine Fall-zu-Fall-Situation, basierend auf unserer Beziehung zum Designer sowie zum Produkteigentümer angesichts des Zeitplans für die Markteinführung. Es wird nicht empfohlen, die Entfernung bestimmter Animationen zu verlangen, da dies außerhalb unseres Fachgebiets liegen würde.

Ein guter Ansatz zum Verhandeln wäre, Timings zu synchronisieren oder Animationen zu vereinfachen, die der Browser möglicherweise nicht nativ ausführen kann, und Animationen zu vermeiden, die JavaScript verwenden, da sie schwer zu warten wären und zu ruckeliger Leistung führen könnten. Wir können und sollten stattdessen um diese Zugeständnisse bitten.

3. Planen Sie den Angriff

Wissen, was der Start- und Endzustand jedes Elements sein sollte. Sehen Sie sich an, wo die einzelnen Übergangszeiten stattfinden sollen. Nutzen Sie BEM in CSS-Klassen, um Animationen klar anzuwenden. Verstehen Sie die Gründe, warum JavaScript zugunsten von CSS eingeschränkt werden sollte.

Sehen wir uns die zuvor beschriebene Animation an. Fünf Staaten springen uns an:

1. der Anfangszustand mit dem roten Ball und etwas Schlagschatten;
2. die vergrößerte Version des Balls mit einem längeren Schlagschatten;
3. die Bewegung des Balls um einen Kreis;
4. Herunterskalieren des Balls zusammen mit seinem Schlagschatten;
5. die Rückkehr in den Ausgangszustand und wartet darauf, ausgelöst zu werden.

Für alle fünf Zustände sollten wir uns ansehen, was der Stil vorher ist und was er danach sein sollte. Dadurch erhalten wir Informationen darüber, welche Art von Animationstools wir für die Implementierung benötigen würden.

Dazu beginnen wir mit dem Basisfallstil. Dies könnte nichts sein, wenn das Element aus dem Nichts auftaucht, oder es könnte der vorherige Stil sein, im Fall von verketteten Animationen.

Halten Sie es einfach , indem Sie zwischen den Zuständen nur sehr wenige Stiländerungen vornehmen. Sobald wir die Start- und Endzustände identifiziert haben, müssen wir sie als CSS-Klassen kennzeichnen, damit sie einfach auf das Element angewendet werden können. Dies gibt uns die Flexibilität, JavaScript zu verwenden, um die Anwendung von Klassen basierend auf Daten zu handhaben, die von AJAX-Aufrufen empfangen werden, von denen das Element abhängig sein könnte.

BEM CSS ist ideal für unsere Benennungsstrategie, da wir die Zustände unserer laufenden Animationen mit Modifikatoren darstellen würden. Wenn die Animation generisch genug ist, ist BEM auch eine gute Methode, um DRY-CSS-Klassen („don’t repeat yourself“) zu verwalten, die über Codebasen hinweg funktionieren. Wir beginnen nur mit den Block- und Elementmarkierungen und fügen dann Modifikatoren hinzu, während wir durch die Animation gehen.

Hier ist eine Beispielvorlage für eine Klassenreise:

 // State 1 <div class="ball"></div> // State 2 <div class="ball ball--scale-up"></div> // State 3 <div class="ball ball--scale-up ball--circling"></div> // State 4 <div class="ball ball--scale-up ball--circling ball--scale-down"></div> // State 5 <div class="ball"></div>

Wir beginnen mit dem Containerelement mit dem Klassenball, der den roten Ball darstellen würde, den wir animieren. Wenn die Animation das Erlebnis durchläuft, tun dies auch unsere BEM-Klassennamen , von der Skalierung bis zur Bewegung im Kreis. Dies ist eine Methode, um zu verfolgen, wie das Element aussehen soll, wenn die Stile angewendet werden.

4. Stetige Umsetzung

Mit einem Entwurf zur Hand und einsatzbereiten Werkzeugen sollten wir das Projekt Zustand für Zustand bearbeiten.

Wir können jeden Zustand iterativ als separates Element angehen und bei Bedarf auf dem vorherigen Zustand aufbauen. Da jeder Zustand klar definiert ist, können wir uns mehr darauf konzentrieren, unseren Code TROCKEN und leicht lesbar zu machen, anstatt auf Details der Implementierung. Und natürlich wäre es schön, Tests hinzuzufügen, um unsere Logik abzudecken.

Ausgangszustand

Wir beginnen mit einem einfachen roten Ball mit einem leichten Schlagschatten.

 .ball { background-color: #D24D57; width: 25px; height: 25px; margin: 5px; display: inline-block; border-radius: 50%; box-shadow: 0 8px 6px -6px #6C7A89; }

Hochskalieren

Das Hochskalieren besteht aus zwei Teilen: der Größe des Elements und seinem Schlagschatten. Wir verwenden einen Keyframe namens scale , der sowohl von der Skalierung nach oben als auch nach unten für DRY-ness geteilt wird, um diese Animation zu handhaben.

 @keyframes ball-scale { from { transform: scale(1); box-shadow: 0 8px 6px -6px #6C7A89; } to { transform: scale(1.25); box-shadow: 0 10px 6px -6px #6C7A89; } } .ball--scale-up { animation: ball-scale 1s ease-out forwards; }

Kreisen (nach Anwendung der Skalierungsanimation)

Wir verwenden einen Keyframe namens circle und verschieben seine Eigenschaft transform-origin , um das Element von Anfang an circular zu bewegen. Denken Sie daran, dass das Kreisen nur stattfindet, wenn die Skalierungsanimation abgeschlossen ist.

 @keyframes ball-circular { from { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg); } to { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg); } } .ball--circling { animation: ball-circular 2s ease-in-out forwards; }

Herunterskalieren (nachdem Kreisen und Hochskalieren von Animationen angewendet wurden)

Um herunterzuskalieren, verwenden wir die Keyframe-Skalierung wieder, mit animation-direction: reverse , um das Gegenteil von dem zu tun, was die Scale-up-Klasse tut. Dies bringt uns zurück zu unserem ursprünglichen Zustand.

 .ball--scale-down { animation: ball-scale 1s ease-in forwards; animation-direction: reverse; }

Arbeitsdemo

Wenn wir alle diese Klassen zu einer Sequenz kombinieren, hätten wir eine CSS-Darstellung des Renderings in After Effects.

Klicken Sie auf den Ball, um zu beginnen.

Sehen Sie sich den Pen Animating Ball von Chris Ng (@chrisrng) auf CodePen an.

Fazit

Die in diesem Artikel behandelten Tools sind kaum auf dem neuesten Stand, werden aber im Allgemeinen von den meisten gängigen Browsern unterstützt, was sie heute verwendbar macht.

Früher war die Implementierung von Animationen schwierig, da externe Tools wie jQuery Animate verwendet werden mussten, um einfache Dinge wie das Verschieben von Elementen auf der Seite zu erledigen. Heute können CSS-Übergänge und -Animationen nativ und effizient durchgeführt werden, indem die GPU genutzt wird.

Animationen sind immer ein Tauziehen zwischen Entwickler, Designer und Product Owner. Die Kunst besteht darin, den Mittelweg zu finden, bei dem alle Beteiligten mit der Qualität des Produkts zufrieden sind. Hoffentlich hilft Ihnen dieser Leitfaden bei diesem Übergang.