Animieren Sie SVG mit JavaScript

Sep 13, 2025
wie man
Graphic of 4 mountain scenes in circles on a computer screen

Es gibt so viel, dass im Browser mit CSS3 oder den Webanimationen API in JavaScript nativ erreicht werden kann. Einfache Animationen und Übergänge eignen sich gut für CSS3 - in der Regel müssen komplexere Animationen mit JavaScript erreicht werden. (Wenn Sie eine Site ohne Code erstellen, benötigen Sie ein Webseitenersteller .)

Das Problem mit der Webanimations-API ist der Browser-Support und die aktuelle Feature-Set. Eine ziemlich junge Spezifikation zu sein, wird dies in den kommenden Jahren verbessert.

  • Der komplette Anleitung zu SVG

Um dieses Feature- und Browser-Support-Defizit zu bekämpfen, können wir an Animationsbibliotheken wechseln, z. B. GreenSock (GSAP). GSAP gibt uns die Möglichkeit, komplexe Animationen und mehrere Zeitpläne zu erstellen, mit der Möglichkeit, fast jedes Element- oder Eigenartikel- / Wertpaar zu animieren - alle mit einer einfachen und intuitiven Syntax erreicht werden.

In diesem Tutorial verwenden wir die GSAP-Bibliothek, um ein paar Animationen zu erstellen. Die Haupt- und komplexeste Animation, die wir erstellen, werden die Szene von Tag zu Nacht veranlassen, und wir werden sehen, wie leicht wir mehrere Übergänge zusammenketten können, um komplizierte Animationen zu erstellen. Wir erstellen auch ein paar einfache Animationen, die ständig läuft.

Wenn Sie mehr Optionen für Ihr Animationsprojekt wünschen, überprüfen Sie unsere Zusammenstellung der Beste kostenlose Grafikdesign-Software . Animation zu einer komplexen Website hinzufügen? Sie brauchen einen unterstützenden Web-Hosting Bedienung.

Laden Sie die Dateien herunter für dieses Tutorial.

01. Dokument-Setup.

Um zu beginnen, müssen wir das Gabel Greenock Pen um seine Premium-Plugins zu testen. Für das Tutorial verwenden wir ein SVG, das bereits optimiert und in unseren HTML-Editor eingefügt wurde. Wenn Sie jedoch Ihre eigene SVG verwenden, müssen Sie sicherstellen, dass alle Elemente eindeutige IDs haben.

02. Erstellen Sie die erste Timeline

GSAP bietet zwei Timeline-Typen: Timelinelit und Timelinemax. Die TIMELINEMAX-Version bietet Zugriff auf zusätzliche Funktionen, z. B. die Möglichkeit, Animationen wiederholen zu können, und unter anderem in umgekehrter Rückgang. Unsere erste Timeline wird das Wasser sein, das wir hin und her wiederholen werden, um unendlich und Yoyo wiederholen. 

 var animation_water = neues timelinemax ({
  Wiederholen: -1,
  yoyo: true.
});

03. Erstellen Sie die erste Animation

Um das Wasser zu animieren, haben wir einen weiteren Weg in unserem SVG, der mit einer "0" -Opazität versteckt ist. Wir werden das verwenden Morphsvg. Plugin, um unseren ursprünglichen Wasserweg in den neuen Wasserpfad umzuwandeln. Wir bewegen das Wasserelement '12px' auf der Y-Achse. Die beiden Zahlen am Ende der Eigenschaft stellen die Verzögerung bzw. die Startzeiten dar. 

 Animation_Wasser
  .o ("# wasser", 2, {
  y: 12,
  Morphsvg: "# wasser-2",
  Leichtigkeit: linear.Esone.
  }, 0, 0)

04. Wiederverwendbare Eigenschaften

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

 var animation_ease = linear.Esone;

05. Protokollprotokollierung.

Die GSAP-Bibliothek bietet uns die Möglichkeit, eine Reihe von Eigenschaften aus einer bestimmten Zeitleiste zu erhalten. Wir können diese in der Konsole anmelden, um sicherzustellen, dass alles funktioniert, wenn wir davon erwarten. 

 console.log (
  'Animation_Wasserdauer:'
  + animation_water.dauer ()
  .Tofixed (2)
);

06. Cloud-Timeline und Konsolenprotokoll

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

 var animation_cloud = new timelinemax ({
  Wiederholen: -1,
  yoyo: true.
});
console.log ('\ n' +
  ...
  animation_cloud.duation (). TOFIXED (2) + '\ n'
);

07. Cloud-Animation

Nun, da wir unsere Timeline bereit haben, können wir unsere Cloud-Animation erstellen. Der Animationsabschnitt, der die neuen Eigenschaften annimmt, können mehrere Eigenschafts- / Wertpaare mit Kommas getrennt behandeln.

Unsere Cloud-Animation muss nur subtil sein, sodass wir nur die Werte um einen kleinen Betrag ändern müssen. 

animation_cloud.
  .O ("# Cloud", 3, {x: -2, y: 1, Skala: 0,95, Rotation: 1, Leichtigkeit: Animation_Ease}, 0, 0)

08. Erstellen Sie die Nachtanimation

Als nächstes erstellen wir unsere tägliche Animation zur Nacht. Wir erstellen eine Variable für die Zykluszeit und den Tag. Die Einstellung "Yoyo" in GSAP ermöglicht es uns auch, die Animation vor dem Wiederholen zu verzögern. 

 var tag_night_cycle_time = 15;
var animation_delay = day_night_cycle_time / 2;
var animation_tonight = new timelinemax ({
  Wiederholen: -1,
  yoyo: wahr,
  RepeatDelay: Animation_Delay.
});

09. Animieren Sie die Überlagerungsschicht

In unserem SVG haben wir eine Überlagerungsschicht aus einem Rechteck, das das gesamte Bild mit demselben Hintergrundgradienten als unseren Nachthintergrund bedeckt. Das Overlay wendet den Mischungsmodus "Multiplizieren" an, um das gesamte Bild zu verdunkeln. Unsere Animation übergibt einfach die Deckkraft dieses Elements. 

 Animation_tonight
  .O ('# Nighttime-Overlay',
  day_night_cycle_time, {
  Deckkraft: 1,
  Leichtigkeit: animation_ease.
  }
  , 0, 0)

10 Den Gradienten animieren

GSAP bietet anderen Tweens auf dem Common 'to' to 'und' von '. Der Tween-Typ, den wir brauchen, um unseren Gradienten zu animieren, ist der "Staggerto" Tween. Wir können auch die Eigenschaft "Zyklus" verwenden, um das Farbrad zu unseren neuen Werten zu drehen. 

 .staggterto ('# Tagtime-Gradient Haltestelle',
  day_night_cycle_time, {
  Zyklus:{
  STOPCOLOR: ['# 060414', '# 416584']
  },
  Leichtigkeit: animation_ease,
}, 0, 0)

11 Animieren Sie die Sonne

Wir können uns weiterhin Animationen hinzufügen, um unsere heute Nachts-Animation zu fällen. Diesmal werden wir ein neues "To" Tween hinzufügen, um unsere Sonne einzustellen. Wir setzen die Anzeigezeit ein, um ein Bruchteil der Zykluszeit zu sein, um die Sonne vor dem Mond anzuregen. GSAP ermöglicht es uns, fast jedes Attribut einzustellen. Wir werden dies verwenden, um die Eigenschaften "CX" und "CY" auf der rechten Seite unter dem Hügel zu animieren. 

 .O ('# Sun', Day_night_cycle_time / 1.25, {
  Maßstab: 0,9,
  attr: {cx: "753", CY: "697"},
  Leichtigkeit: animation_ease}
, 0, 0)

12. Den Mond animieren

Wir verwenden dieselbe Technik, mit denen wir die Sonne außer Sicht animieren (siehe Schritt 11 oben), um den Mond in Sicht zu animieren. Wir könnten dies natürlich mit einem Tween erreichen, aber um einen Faux-ARC zu erstellen, tun wir dies in zwei Teilen. In beiden Teilen wenden wir auch einen neuen Wert auf das Maßstab an. 

 .O ('# Moon', Day_night_cycle_time / 2, {
  Maßstab: 0,9,
  attr: {cx: "174.5", CY: "202.5"},
  Leichtigkeit: animation_ease}
, 0, 0)

Der zweite Teil der Mondanimation wartet auf den ersten Abschnitt, bevor er beginnt. HINWEIS: Diese beiden Teile der Mondanimation werden zusammen mit den anderen Tagen-zu-Night-Eigenschaften zusammen mit den anderen Tagen-zu-Night-Eigenschaften zusammengekettet. 

 Animation_tonight
  ...
  .O ('# Moon', Day_night_cycle_time / 2, {
  Maßstab: 0,9,
   attr: {cx: "410.5", CY: "114.5"},
  Leichtigkeit: animation_ease}
  , day_night_cycle_time / 2, 0)

13 Animieren Sie die Sterne

Der einzige Teil von unserer Tag-zu-Nacht-Animation sind die Sterne. Wir werden die Sterne animieren, indem wir eine Reihe von Eigenschaften übergeben. Der erste von ihnen ist, sie einfach in Sicht bringen, indem sie ihre Deckkraft animieren. 

 .O ('# Sterne', Day_night_cycle_time / 2,
  {Deckkraft: 1},
  day_night_cycle_time / 2,
0)

Als Nächstes verwenden wir das 'von' Tween, um die Sterne zu bewegen und sie aus einem negativen Winkel drehen, während sie in Sicht animieren. Wir verwenden einige einfache Mathematik, um unsere Animationszeit und -verzögerung zu berechnen, alle basierend auf unserer Variablen "Day_night_cycle_time". 

 .von ("# Stars",
  day_night_cycle_time - (day_night_cycle_time / 4),
  {y: 150, Rotation: -15, Leichtigkeit: animation_ease},
  day_night_cycle_time / 4,
0)

14 Erstellen Sie die Sterne-Timeline und das Konsolenprotokoll

Jetzt haben wir unsere Alt-Nacht-Animation erstellt, wir können eine weitere ständige Animation erstellen, um unsere Sterne blinzeln zu lassen. Wir erstellen die neue Timeline und protokollieren Sie die Timeline-Dauer in der Konsole. 

 var animation_stars = new timelinemax ({
  Wiederholen: -1,
  yoyo: true.
});

15. Machen Sie die Sterne blinzeln

Jetzt haben wir die Timeline bereit für die Animation erstellt, wir müssen unsere blinkende Animation erstellen. Die Animation ist wirklich einfach - alles, was wir tun wollen, ist deren Deckkraftwert zu reduzieren. Dank des "Yoyo-Eigentums wird die Opazität ein- und ausbelebt, und damit die Sterne so aussehen, als ob sie blinken. 

 animation_stars
  .ob ("# Stars", 0,5,
  {Deckkraft: 0,5, Leichtigkeit: Animation_Ease}
, 0, 0)

16 Das Blinzeln verzögern

Im letzten Schritt richten wir auf die Stars-Gruppe, um unsere blinkende Animation anzuwenden, aber es würde jedoch viel besser aussehen, wenn die Sterne einen zu einem Zeitpunkt blinken sollten, anstatt gleichzeitig zusammen zu blinken. Wir erreichen dies, indem wir jeden Stern separat ansprechen und eine andere Animation anwenden. 

 animation_stars
  ...
  .O ("# Star-Two", 0,5,
  {Deckkraft: 0,5, Leichtigkeit: Animation_Ease}
  , 1,25, 0)
  .O ("# stern-drei", 0.5,
  {Deckkraft: 0,5, Leichtigkeit: Animation_Ease}
  , .75, 0)
  ...;

17 Schnee hinzufügen

Das ist es! Unsere tägliche Radfahren-Animation ist fertig und es sieht fantastisch aus, aber wir müssen dort nicht aufhören. Da sich das Bild in SVG befindet, können wir unseren Landschaft leicht neue Elemente hinzufügen. Lass uns etwas Schnee hinzufügen. Wir machen das mit zwei separaten Schichten. Jede Schicht verfügt über eine Sammlung von Ellipsen, die groß genug ist, um die Landschaft abzudecken, und dann die gleiche Sammlung wiederholt. 

 & lt; G ID = "Snow-Bottom-Layer" ... & GT;
  ...
  & lt; Ellipse ... / & gt;
& lt; / g & gt;
& lt; g id = "Snow-Top-Layer" ... & GT;
  ...
  & lt; Ellipse ... / & gt;
& lt; / g & gt;

18 Erstellen Sie die Schneekunden

Wir erstellen zwei separate Zeitpläne für unseren Schnee, um sie über verschiedene Dauer animieren zu können. Wir werden auch ihre Dauern an der Konsole anmelden. 

 var animation_snowtop = new timelinemax ({
  Wiederholen: -1,
  Repeatdelay: 0.
});
var animation_snowbottom = new timelinemax ({
  Wiederholen: -1,
  Repeatdelay: 0.
});

19 Den Schnee animieren

Um unsere Schneeschichten zu animieren, möchten wir die beiden Schichten entlang der vertikalen Achse bewegen. Durch die Unterschiede ihrer Dauer erhalten wir das Erscheinungsbild der Schichten, die sich mit unterschiedlichen Geschwindigkeiten bewegen. Die Animation arbeitet durch Bewegen der Sammlung von Ellipsen entlang der vertikalen Achse, bis die zweite Sammlung anstelle der ersten ist. Wir wiederholen dann die Animation. 

 Animation_snow
  .O ("# Snow-Top-Layer", 7,
  {Attrib: {transform: "Übersetzen (24 -108)"}
  , Leichtigkeit: animation_ease}
, 0, 0)

Finden Sie die volle Sammlung von Tutorial-Stiften Hier . Brauchen Sie irgendwo sicher, um Ihre Dateien zu speichern? Siehe unseren Guide zu Cloud-Speicherung. .

Dieser Artikel wurde ursprünglich im Creative Web Design Magazine Webdesigner veröffentlicht. Abonnieren Sie den Webdesigner hier .

Zum Thema passende Artikel:

  • 5 Awesome Javascript-APIs
  • 19 coole CSS-Animationsbeispiele zum Erstellen
  • Die 25 größten animierten Musikvideos

wie man - Die beliebtesten Artikel

Wie zeichnet man Muskeln

wie man Sep 13, 2025

Wenn Sie wissen, wie Muskeln in Bewegung zeichnen, fließt Fließfähigkeit und Bewegung in ein Standbild. Dieses Tutorial wird d..

Cache im BBC-Leistungsverstärker

wie man Sep 13, 2025

Im vergangenen Jahr während einer Anwenderprüfungssitzung für die BBC News-App machte einer der Benutzer einen Kommentar, der ..

So erstellen Sie digitale Assets

wie man Sep 13, 2025

Vorbereitung von Vermögenswerten für digitale Verwendung ist eine Kernaufgabe für Junior-Designer. heute - und ..

Malen Sie nass auf Nass in Ölen

wie man Sep 13, 2025

Die Malerei "Alla Prima" (das heißt, nassnetz in einer Sitzung in einer Sitzung) ist die ideale Technik, um die Art der Ölfarbe..

Erstellen Sie einen gießenden Wassereffekt in Realflow

wie man Sep 13, 2025

Dieses Tutorial zeigt Ihnen, wie Sie einen flüssigen Ausgieß-Effekt simulieren können. Es gibt verschiedene Software- und Plug..

11 Tipps zum Erstellen einer wässrigen Landschaft in 3D

wie man Sep 13, 2025

Klarsicht ist eine relativ neue Anwendung, und es ist mehr als nur eine Render-Engine, ein Layout- oder Look-Entwicklungswerkzeug. Clarisse befreit Künstler aus den Einschränkun..

Wie errichtet man Welten für das Kino

wie man Sep 13, 2025

Als er gebeten wurde, einen Workshop zur Schaffung einer Fantasy-Umgebung zu machen, dachte ich, es würde Spaß machen, an einem..

Bereiten Sie Ihre Arbeit für den 3D-Druck vor: 8 Top-Tipps

wie man Sep 13, 2025

3D-Druck ist sehr beliebt geworden. Wenn Sie Ihre eigenen drucken möchten 3D Art. Es gibt ein paar Dinge, um die besten Ergebnisse zu erhalten. Hier zeige ich Ihnen, wie Sie d..

Kategorien