Animieren Sie SVG mit JavaScript

Grafik von 4 Bergszenen in Kreisen auf einem Computerbildschirm

Mit CSS3 oder der Webanimations-API in JavaScript kann im Browser so viel erreicht werden. Einfache Animationen und Übergänge eignen sich gut für CSS3 - während komplexere Animationen mit JavaScript erstellt werden müssen.

Das Problem mit der Webanimations-API ist die Browserunterstützung und der aktuelle Funktionsumfang. Da es sich um eine relativ junge Spezifikation handelt, wird sich diese in den kommenden Jahren verbessern.

  • Die vollständige Anleitung zu SVG

Um diese Funktion und das Defizit der Browserunterstützung zu bekämpfen, können wir uns an Animationsbibliotheken wenden, wie z GreenSock (GSAP). Mit GSAP können wir komplexe Animationen und mehrere Zeitleisten erstellen und nahezu jedes Element- oder Eigenschafts- / Wertepaar animieren - alles mit einer einfachen und intuitiven Syntax.



In diesem Tutorial werden wir die GSAP-Bibliothek verwenden, um einige Animationen zu erstellen. Die wichtigste und komplexeste Animation, die wir erstellen werden, ist der Übergang der Szene von Tag zu Nacht, und wir werden sehen, wie einfach wir mehrere Übergänge miteinander verketten können, um komplizierte Animationen zu erstellen. Wir werden auch ein paar einfache Animationen erstellen, die ständig ausgeführt werden.

Wenn Sie weitere Optionen für Ihr Animationsprojekt wünschen, lesen Sie unsere Zusammenstellung der beste kostenlose Grafikdesign-Software .

Laden Sie die Dateien herunter für dieses Tutorial.

01. Dokument einrichten

Zu Beginn müssen wir die Gabelung GreenSock Pen um seine Premium-Plugins zu testen. Für das Tutorial verwenden wir eine SVG, die bereits optimiert und in unseren HTML-Editor eingefügt wurde. Wenn Sie jedoch Ihr eigenes SVG verwenden, müssen Sie sicherstellen, dass alle Elemente eindeutige IDs haben.

bester Stift für iPad Mini mit Retina-Display

02. Erstellen Sie die erste Zeitleiste

GSAP bietet zwei Timeline-Typen: TimelineLite und TimelineMax. Die TimeLineMax-Version bietet Zugriff auf zusätzliche Funktionen, z. B. die Möglichkeit, Animationen zu wiederholen und sie unter anderem in umgekehrter Reihenfolge abzuspielen. Unsere erste Zeitachse wird das Wasser sein, das wir unendlich und yoyo hin und her wiederholen werden.

var animation_water = new TimelineMax({ repeat: -1, yoyo: true });

03. Erstellen Sie die erste Animation

Um das Wasser zu animieren, haben wir einen anderen Pfad in unserer SVG, der mit einer Deckkraft von '0' verborgen ist. Wir werden das nutzen morphSVG Plugin, um unseren ursprünglichen Wasserweg in den neuen Wasserweg umzuwandeln. Wir bewegen das Wasserelement '12px' auf der y-Achse nach unten. Die beiden Zahlen am Ende der Eigenschaft geben die Verzögerung bzw. die Startzeiten an.

animation_water .to('#water', 2, { y: 12, morphSVG:'#water-2', ease:Linear.easeNone }, 0 , 0) ;

04. Wiederverwendbare Eigenschaften

Da wir eine Reihe von Eigenschaften und Werten mehrmals wiederverwenden, werden wir Variablen für diese Eigenschaften erstellen.

var animation_ease = Linear.easeNone;

05. Konsolenprotokollierung

Die GSAP-Bibliothek bietet uns die Möglichkeit, eine Reihe von Eigenschaften von einer bestimmten Zeitachse abzurufen. Wir können diese in der Konsole protokollieren, um sicherzustellen, dass alles so funktioniert, wie wir es erwarten.

console.log( 'animation_water duration: ' + animation_water.duration() .toFixed(2) );

06. Cloud-Timeline und Konsolenprotokoll

Für jedes Element, das wir separat und ständig animieren möchten, müssen wir eine neue Zeitleiste erstellen. Wir möchten diese Zeitleiste auch in der Konsole protokollieren, während wir fortfahren.

var animation_cloud = new TimelineMax({ repeat: -1, yoyo: true }); console.log( ' ' + ... animation_cloud.duration().toFixed(2) + ' ' );

07. Wolkenanimation

Nachdem wir unsere Zeitleiste fertig haben, können wir unsere Cloud-Animation erstellen. Der Animationsabschnitt, der die neuen Eigenschaften verwendet, kann mehrere durch Kommas getrennte Eigenschafts- / Wertepaare verarbeiten.

Unsere Cloud-Animation muss nur subtil sein, daher müssen wir die Werte nur geringfügig ändern.

Clip Studio Paint Neue Sub-Tool-Gruppe erstellen
animation_cloud .to('#cloud', 3, { x: -2, y: 1, scale: 0.95, rotation: 1, ease: animation_ease}, 0, 0) ;

08. Erstellen Sie die Nachtanimation

Als nächstes beginnen wir mit der Erstellung unserer Tag-zu-Nacht-Animation. Wir erstellen eine Variable für die Zykluszeit und den Tag. Die Einstellung 'Jojo' in GSAP ermöglicht es uns auch, die Animation vor dem Wiederholen zu verzögern.

var day_night_cycle_time = 15; var animation_delay = day_night_cycle_time / 2; var animation_toNight = new TimelineMax({ repeat: -1, yoyo: true, repeatDelay: animation_delay });

09. Animieren Sie die Überlagerungsebene

In unserem SVG befindet sich eine Überlagerungsebene aus einem Rechteck, die das gesamte Bild mit demselben Hintergrundverlauf wie unser nächtlicher Hintergrund abdeckt. Die Überlagerung wendet den Mischmodus 'Multiplizieren' an, um das gesamte Bild abzudunkeln. Unsere Animation ändert einfach die Deckkraft dieses Elements.

animation_toNight .to('#nighttime-overlay', day_night_cycle_time, { opacity: 1, ease: animation_ease } , 0 , 0) ;

10. Animieren Sie den Farbverlauf

GSAP bietet zusätzlich zu den üblichen 'to' - und 'from' -Typen weitere Tweens an. Der Tween-Typ, den wir benötigen, um unseren Farbverlauf zu animieren, ist das 'taggerTo'-Tween. Wir können auch die Eigenschaft 'cycle' verwenden, um das Farbrad auf unsere neuen Werte zu drehen.

.staggerTo('#daytime-gradient stop', day_night_cycle_time, { cycle:{ stopColor: ['#060414','#416584'] }, ease: animation_ease, }, 0 , 0)

elf. Beleben Sie die Sonne

Wir können unserer 'toNight'-Animation weiterhin Animationen hinzufügen. Dieses Mal werden wir ein neues 'to'-Tween hinzufügen, um unsere Sonne unterzugehen. Wir werden die Anzeigezeit auf einen Bruchteil der Zykluszeit einstellen, um die Sonne vor dem Mond zu animieren. Mit GSAP können wir fast jedes Attribut festlegen. Wir werden dies verwenden, um die Eigenschaften 'cx' und 'cy' unterhalb des Hügels auf der rechten Seite zu animieren.

.to('#sun', day_night_cycle_time / 1.25, { scale: 0.9, attr:{cx:'753', cy:'697'}, ease:animation_ease} , 0, 0)

12. Animiere den Mond

Wir verwenden dieselbe Technik, mit der wir die Sonne außer Sichtweite animiert haben (siehe Schritt 11 oben), um den Mond in Sichtweite zu animieren. Wir könnten dies natürlich mit einem Tween erreichen, aber um einen künstlichen Bogen zu erzeugen, werden wir dies in zwei Teilen tun. In beiden Teilen werden wir auch einen neuen Wert auf die Eigenschaft scale anwenden.

.to('#moon', day_night_cycle_time / 2, { scale: 0.9, attr:{cx:'174.5', cy:'202.5'}, ease:animation_ease} , 0 , 0)

Der zweite Teil der Mondanimation wartet, bis der erste Abschnitt beendet ist, bevor er beginnt. Hinweis: Diese beiden Teile der Mondanimation sind im Animationscode zusammen mit den anderen von uns verwendeten Tag-zu-Nacht-Eigenschaften miteinander verkettet.

animation_toNight ... .to('#moon', day_night_cycle_time / 2, { scale: 0.9, attr:{cx:'410.5', cy:'114.5'}, ease:animation_ease} , day_night_cycle_time / 2, 0) ;

13. Animiere die Sterne

Der einzige Teil unserer Tag-zu-Nacht-Animation sind die Sterne. Wir animieren die Sterne, indem wir eine Reihe von Eigenschaften ändern. Die erste besteht darin, sie einfach durch Animieren ihrer Deckkraft sichtbar zu machen.

.to('#stars', day_night_cycle_time/2, {opacity: 1}, day_night_cycle_time/2, 0)

Als nächstes verwenden wir das 'Von'-Tween, um die Sterne nach oben zu bewegen und sie aus einem negativen Winkel zu drehen, während sie in Sichtweite animiert werden. Wir verwenden einige einfache Berechnungen, um unsere Animationszeit und -verzögerung basierend auf unserer Variablen 'day_night_cycle_time' zu berechnen.

wie man eine Hand mit Nägeln zeichnet
.from('#stars', day_night_cycle_time - (day_night_cycle_time / 4), {y: 150, rotation: -15, ease: animation_ease}, day_night_cycle_time / 4, 0)

14. Erstellen Sie die Sternzeitleiste und das Konsolenprotokoll

Jetzt haben wir unsere Tag-zu-Nacht-Animation erstellt. Wir können eine weitere konstante Animation erstellen, damit unsere Sterne blinken. Wir erstellen die neue Timeline und protokollieren dann die Timeline-Dauer in der Konsole.

var animation_stars = new TimelineMax({ repeat: -1, yoyo: true });

Nachdem wir die Zeitleiste für die Animation erstellt haben, müssen wir unsere blinkende Animation erstellen. Die Animation ist wirklich einfach - wir möchten nur den Deckkraftwert reduzieren. Dank der 'yoyo'-Eigenschaft wird die Deckkraft ein- und ausgeschaltet und die Sterne sehen so aus, als würden sie blinken.

animation_stars .to('#stars', 0.5, {opacity: 0.5, ease: animation_ease} , 0, 0) ;

16. Verzögern Sie das Blinken

Im letzten Schritt zielen wir auf die Sterngruppe ab, um unsere blinkende Animation anzuwenden. Es würde jedoch viel besser aussehen, wenn die Sterne einzeln blinken würden, anstatt gleichzeitig zusammen. Dies erreichen wir, indem wir jeden Stern einzeln anvisieren und eine andere Animation anwenden.

animation_stars … .to('#star-two', 0.5, {opacity: 0.5, ease: animation_ease} , 1.25, 0) .to('#star-three', 0.5, {opacity: 0.5, ease: animation_ease} , .75, 0) … ;

17. Schnee hinzufügen

Das ist es! Unsere Tag-zu-Nacht-Radsportanimation ist fertig und sieht fantastisch aus, aber wir müssen hier nicht aufhören. Da sich das Bild in SVG befindet, können wir unserer Landschaft problemlos neue Elemente hinzufügen. Fügen wir etwas Schnee hinzu. Wir werden dies mit zwei getrennten Schichten tun. Jede Schicht hat eine Sammlung von Ellipsen, die groß genug sind, um die Landschaft zu bedecken, und dann dieselbe Sammlung, die oben wiederholt wurde.

... ...

18. Erstellen Sie die Schneezeitleisten

Wir erstellen zwei separate Zeitleisten für unseren Schnee, um sie über unterschiedliche Zeiträume animieren zu können. Wir werden auch ihre Dauer in der Konsole protokollieren.

var animation_snowTop = new TimelineMax({ repeat: -1, repeatDelay: 0 }); var animation_snowBottom = new TimelineMax({ repeat: -1, repeatDelay: 0 });

19. Animiere den Schnee

Um unsere Schneeschichten zu animieren, möchten wir die beiden Schichten entlang der vertikalen Achse verschieben. Durch unterschiedliche Dauer erhalten wir das Erscheinungsbild der Schichten, die sich mit unterschiedlichen Geschwindigkeiten bewegen. Bei der Animation wird die Ellipsenkollektion entlang der vertikalen Achse verschoben, bis die zweite Sammlung die erste ersetzt. Wir wiederholen dann die Animation.

animation_snow .to('#snow-top-layer', 7, {attr: {transform: 'translate(24 -108)'} , ease: animation_ease} , 0, 0) ;

Hier finden Sie die vollständige Sammlung von Tutorial-Stiften Hier .

Dieser Artikel wurde ursprünglich im kreativen Webdesign-Magazin Web Designer veröffentlicht. Abonnieren Sie hier den Web Designer .

Zum Thema passende Artikel: