So erstellen Sie eine atemberaubende Animation einer Katze, die tippt

Vor einem Monat haben wir unser agiles Projektmanagement-Tool Scrumpy auf den Markt gebracht. Seitdem werden wir fast täglich gefragt, wie wir die Animationen auf unserer Zielseite erstellt haben. Hier finden Sie alles, was Sie wissen müssen, um Ihrer Website Animationen hinzuzufügen.

️‍ Finden des richtigen Formats

Wann immer Sie eine animierte Illustration in eine Website einfügen möchten, müssen Sie sich entscheiden, welches Format besser passt - ein GIF oder ein Video? Besonders wenn diese Animationen nahtlos sein müssen, wird es ziemlich kompliziert. Hier sind einige Nachteile für diese fromats:

Nachteile für GIFs

Keine Unterstützung für Transparenz
Große Dateigröße
Begrenzte Farben

Nachteile für Videos

Keine Unterstützung für Transparenz
Farben stimmen möglicherweise nicht perfekt überein (abhängig von der Komprimierung)

SVG ist immer noch eine Sache

Neben Videos und GIFs können auch SVGs animiert werden. Es gibt da draußen einige Bibliotheken, z. G. Keyframes, Snap, Anime.js oder GSAP. Aber eine Bibliothek ist einzigartig: Lottie. Mit Lottie können Sie Animationen direkt in After Effects erstellen. Anschließend können Sie sie mit Hilfe von Bodymovin exportieren, um sie z. in Websites. Von ihrer Website:

Lottie ist eine Bibliothek für iOS, Android und React Native, mit der After Effects-Animationen in Echtzeit gerendert werden, sodass Apps Animationen genauso einfach verwenden können wie statische Bilder.
Eine Schreibkatze macht Konfetti

Aber welche Schritte sind notwendig, um eine solche Animation auf Ihrer Website einzubinden? Mal sehen.

‍ Abbildungen in After Effects importieren

Nachdem ich schmerzlich gemerkt hatte, dass es nicht möglich ist, SVG-Dateien in After Effects zu importieren (siehe Adobe®), habe ich mir überlegt, wie ich unsere Katzenillustrationen sonst importieren könnte. Die erste naheliegende Idee war natürlich, das Illustrator-Dateiformat von Adobe (.ai) zu importieren. Das hat bisher funktioniert, und Sie können die importierte Datei auch in alle Ebenen konvertieren und die Pfade direkt in After Effects bearbeiten. Nach einigen Tests stellte ich jedoch fest, dass Bodymovin beim Exportieren seltsame Fehler verursachte, da After Effects .ai-Dateien konvertiert - doh!

Skizze zur Rettung

Sobald unsere Illustrationen erstellt wurden (danke Stella ), verwalten wir sie als Symbole in Sketch. Dies ermöglicht es uns, während des gesamten Projekts darauf zuzugreifen (egal ob App, Landing Page oder Marketingmaterial). Und ja, wir haben eine Skizzendatei für unser gesamtes Scrumpy-Designuniversum. Es ist unglaublich.

Umso besser, dass es ein fantastisches Plugin namens Sketch2AE gibt, das Vektoren direkt von Sketch nach After Effects kopieren kann. Dieses Tool hat so viel besser funktioniert als das Importieren von .ai-Dateien.

Eine weitere winzige Animation, die wir mit Lottie  erstellt haben

🖌 Beleben

Nachdem alle Grafiken in After Effects importiert wurden, können Sie die Pfade animieren. Sie können Ihre Komposition mit dem Bodymovin-Plugin exportieren. Dadurch erhalten Sie eine .json-Datei, die später vom Lottie-Player benötigt wird. Die exportierte Datei enthält Ihre komplette Animation. Aber ich möchte nicht zu tief eintauchen - es gibt bereits einige Tutorials zu diesem Thema.

Unterstützte Funktionen

Die meisten SVG-Funktionen werden unterstützt, es wird jedoch empfohlen, regelmäßig zu überprüfen, ob die Animation nach dem Export noch wie beabsichtigt aussieht. Hier ist eine Liste aller derzeit unterstützten Funktionen:

  • Formen - Pfade, Ellipsen, Sterne, Rechtecke, Füllungen, Striche, Farbverläufe und Farbverläufe, Bindestriche, Trimmpfade (teilweise), abgerundete Ecken, Transformationen (Position, Ankerpunkt, Drehen, Skalieren, Deckkraft, Schräglauf, Schräglaufachse)
  • Feststoffe
  • Bilder
  • Comps
  • Nullen
  • Texte - Die meisten Schriftarten werden unterstützt, sie können als Formen oder als Rohtext exportiert werden (aber Sie müssen die Schrift dann mit CSS laden). Eine einzelne Textdeklination wird pro Textfeld unterstützt. Nicht unterstützt: Textdekorationen wie Kapitälchen oder vertikale Skala.
  • Kameras - Teilweise unterstützt.
  • Ausdrücke - Teilweise unterstützt.

📽 Animation rendern

Hier kommt Lottie ins Spiel. Lottie ist für alle Plattformen verfügbar - iOS, Android, React Native und auch für das Web! Hier ist ein einfaches Beispiel dafür, wie es aussieht, Lottie in Ihre Website einzubetten.

// HTML
// JavaScript
lottie aus 'lottie-web' importieren
Daten aus './data.json' importieren
lottie.loadAnimation ({
  container: '#animation,
  animationData: data,
  Renderer: 'svg',
  Schleife: wahr,
})

Bonus: Aktivieren Sie die Option für reduzierte Bewegung

Safari Browser verfügt über eine Einstellung zum Reduzieren der Bildschirmbewegung. Dies wird zum Beispiel verwendet, um die Batterielebensdauer zu verlängern. Wenn Sie den Benutzern eine Freude machen möchten, können Sie diese Einstellung in JavaScript überprüfen und die Animation bei Bedarf deaktivieren.

const restrictedMotion = !! window.matchMedia ('(bevorzugt-verkleinerte-Bewegung)'). passt
if (! reductionMotion) {
 lottie.loadAnimation ({
  container: '#animation,
  animationData: data,
  Renderer: 'svg',
  Schleife: wahr,
 })
}

Fazit

Lottie ist ein hervorragendes Werkzeug zum Animieren von Vektorgrafiken. Aber seien Sie vorsichtig - es ist sehr rechenintensiv, viele Elemente gleichzeitig zu animieren. Wenn Sie komplexe Partikeleffekte animieren möchten, ist ein klassisches Video möglicherweise die bessere Wahl.

Die Dateigröße ist immer noch beeindruckend, wenn Sie Ihre Assets mit gzip komprimieren. 570kB unkomprimiert vs. 35kB komprimiert für unsere Banneranimation bei scrumpy.io ist absolut erstaunlich.

TL; DR

Illustrationen in Sketch verwalten
Verwenden Sie Sketch2AE, um nach After Effects zu exportieren
3. Installieren Sie Bodymovin for After Effects, um die Animation zu generieren
Verwenden Sie Lottie, um Animationen in Ihrem Browser zu rendern

Haben Sie Kommentare oder Fragen? Schlagen Sie den Abschnitt unten oder fühlen Sie sich frei, mich über Twitter zu kontaktieren!