Eine Anleitung zur SVG-Animation

Jeder Front-End-Ingenieur, der sein Geld wert ist, ist sich der Herausforderungen bewusst, die das fragmentierte Ökosystem von Geräten mit sich bringt. Unterschiedliche Bildschirmgrößen, Auflösungen und Seitenverhältnisse erschweren die Bereitstellung eines konsistenten Erlebnisses. Mehr noch für diejenigen, die ein pixelperfektes Erlebnis bieten möchten.

Skalierbare Vektorgrafiken (SVGs) helfen bei der Lösung eines Teils dieses Problems und machen es sehr gut. Obwohl sie ihre Grenzen haben, können SVGs für bestimmte Gelegenheiten sehr hilfreich sein, und wenn Sie ein gutes Designteam haben, können Sie auch ein visuell beeindruckenderes Erlebnis schaffen, ohne den Webbrowser übermäßig zu belasten oder die Ladezeiten zu beeinträchtigen.

In den letzten Monaten habe ich an einem Projekt gearbeitet, das SVG und seine Animations- und Effektfunktionen ausgiebig nutzt. In diesem Artikel werde ich Ihnen zeigen, wie Sie SVG und seine Animationstechniken verwenden können, um Ihrer Web-Front-End-Arbeit neues Leben einzuhauchen.

Skalierbare Vektorgrafiken

SVG ist ein Bildformat, das auf XML basiert, ähnlich wie HTML funktioniert. Es definiert verschiedene Elemente für eine Reihe bekannter geometrischer Formen, die im Markup kombiniert werden können, um zweidimensionale Grafiken zu erzeugen.

Die SVG-Spezifikation ist ein offener Standard, der 1999 vom World Wide Web Consortium (W3C) entwickelt wurde.

Alle gängigen Webbrowser unterstützen seit einiger Zeit SVG-Rendering.

Da es sich bei SVG-Grafiken um XML-Dokumente handelt, stellen Webbrowser DOM-Knoten-basierte APIs bereit, die zur Interaktion mit den Bildern verwendet werden können. Sprechen Sie darüber, Bilder zum Leben zu erwecken!

SVG-Pfade

Wenn es in SVG ein übermächtiges Element gibt, wäre das das <path> -Element.

Das Pfadelement ist eine grundlegende Form, die verwendet werden kann, um fast jede fortgeschrittene 2D-Form zu erstellen, die Sie sich vorstellen können.

Das Element funktioniert, indem es eine Folge von Zeichenbefehlen übernimmt. Es ist der Programmiersprache Logo von 1967 sehr ähnlich, nur modernisiert und für ausgefallene Grafiken ausgelegt. Das Element übernimmt diese Folge von Zeichenbefehlen über das Attribut d .

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

Sie können sich einen virtuellen Stift vorstellen, der auf dem Bildschirm zeichnet, und die Zeichnungskommentare im Pfadelement steuern lediglich den Stift. Im obigen Beispiel wird der Stift angewiesen, sich zu Position (10, 10) ( M10 10 ) zu bewegen, eine Linie zu (75, 10) ( L75 10 ) zu ziehen, eine Linie zu (75, 75) L75 75 zu zeichnen L75 75 und dann den Pfad schließen, indem Sie zum Ausgangspunkt ( Z ) zurückkehren.

Mit anderen Zeichenbefehlen wie Bögen ( A ), quadratischen Bezierkurven ( Q ), kubischen Bezierkurven ( C ) usw. können Sie viel komplexere Formen und Grafiken in SVG erstellen.

Hier können Sie viel mehr über das Pfadelement erfahren.

SVG-Pfade und CSS

„Okay Juan, ich verstehe. Pfade sind mächtig, aber wie animiere ich sie?“ du sagst.

Für unsere erste Technik nutzen wir zwei SVG-Attribute: stroke-dasharray und stroke-dashoffset .

Das Stroke-Dasharray-Attribut steuert das Muster der Striche und Lücken, die verwendet werden, um den Pfad zu streichen. Wenn Sie Ihre Linien als eine Gruppe von Strichen und Lücken anstelle eines durchgehenden Tintenstrichs zeichnen möchten, ist dies das Attribut, das Sie verwenden würden.

Da SVG-Bilder Teil des DOM des Webbrowsers sind und Stroke-Dasharray ein Präsentationselement ist, kann das Attribut auch mit CSS gesetzt werden.

In ähnlicher Weise kann das Attribut stroke-dashoffset (das angibt, wie weit im Strichmuster der Strich beginnen soll) auch mit CSS gesteuert werden.

Diese beiden SVG-Attribute können zusammen verwendet werden, um SVG-Pfade zu animieren, was dem Betrachter die Illusion vermittelt, dass die Pfade allmählich gezeichnet werden.

Nehmen Sie zum Beispiel diese quadratische Bezier-Kurve:

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

Um diesen Pfad so zu animieren, als würde er allmählich und gleichmäßig auf dem Bildschirm gezeichnet, müssen wir die Länge der Striche (und Lücken) mithilfe des Attributs stroke-dasharray gleich der Pfadlänge setzen. Dies ist so, dass die Länge jedes Strichs und jeder Lücke in der gestrichelten Kurve gleich der Länge des gesamten Pfads ist.

Als Nächstes setzen wir den Strich-Offset mithilfe des Attributs stroke-dashoffset auf 0. Dadurch erscheint der Pfad auf dem Bildschirm als durchgezogene Kurve (wir betrachten im Wesentlichen den ersten Strich, und wir haben bereits dafür gesorgt, dass sich jeder Strich über den gesamten Strich erstreckt Länge der Kurve). Indem wir den Strich-Offset gleich der Länge der Kurve setzen, erhalten wir am Ende eine unsichtbare Kurve (wir betrachten jetzt die Kurve, die als vollständige Lücke gerendert wird – der Teil, der unmittelbar auf einen Strich folgt).

Indem Sie nun die Eigenschaft stroke-dashoffset animieren, können Sie die Kurve allmählich auf dem Bildschirm erscheinen lassen.

Sehen Sie sich die Pen Toptal - SVG & CSS-Pfade von Toptal Blog (@toptalblog) auf CodePen an.

Wie Sie sehen können, ist die Kurve immer da. Wir ändern nur den Strich-Offset, damit der gestrichelte Teil nach und nach erscheint.

Sie können noch einen Schritt weiter gehen, indem Sie dasselbe Prinzip verwenden, aber mit mehr Pfaden:

Sehen Sie sich die Pen Toptal - SVG & CSS-Pfade von Toptal Blog (@toptalblog) auf CodePen an.

Hier haben Sie eine feste schwarze Kurve, eine rote, die sich entlang des Pfads bewegt, und eine weitere schwarze, die der roten folgt, aber 40 Pixel dahinter.

Stroke-Dasharray und Stroke-Dashoffset sind zwei sehr leistungsfähige Attribute, mit denen Sie eine Vielzahl von Animationen und Effekten auf Ihre SVG-Pfade anwenden können. Sie können dieses praktische Tool ausprobieren, mit dem Sie mit den beiden Attributen experimentieren können.

Animieren von Objekten entlang von SVG-Pfaden

Mit SVG und CSS können Sie auch Objekte oder Elemente animieren, die einem Pfad folgen.

Es gibt 2 SVG-Attribute, die wir für die Animation verwenden werden:

• offset-path: Die CSS-Eigenschaft offset-path gibt den Offset-Pfad an, an dem das Element positioniert wird.

• offset-distance: Die CSS-Eigenschaft offset-distance gibt eine Position entlang eines Offsetpfads an.

Durch die Kombination dieser beiden Eigenschaften können Sie ganz einfach Animationen wie diese erstellen:

Sehen Sie sich die Pen Toptal - SVG & CSS-Pfade von Toptal Blog (@toptalblog) auf CodePen an.

Wie Sie sehen können, haben wir ein neues Element div.ball .

Dieses Element kann alles sein, ein div, ein Bild, Text, was auch immer. Die Idee in diesem Beispiel ist, dass Sie mit der Verwendung von offset-path und offset-distance dem Element einen Pfad geben können, dem es folgen soll, und den Abstand animieren, und das Element bewegt sich durch den Pfad.

SVG-Animationen mit JavaScript

Wem das alles noch nicht ausgefallen genug ist, der kann immer noch auf JavaScript zurückgreifen.

Das Animieren von SVG-Elementen mit JavaScript kann dem Animieren von DOM-Elementen sehr ähnlich sein. Mit JavaScript können Sie jedoch die oben beschriebenen Animationstechniken erreichen, jedoch einfacher.

Bisher mussten wir die Pfadlängen in unserem CSS fest codieren. Mit Hilfe der JavaScript-Funktion path.getTotalLength() ist es möglich, die Länge des Pfades on-the-fly zu berechnen und bei Bedarf zu verwenden. Hier erfahren Sie mehr darüber.

Außerdem stehen Ihnen bereits eine Reihe von Bibliotheken zur Verfügung, die SVG-Animationen viel einfacher machen können, als es ohnehin schon ist.

Snap.svg macht es nicht nur einfach, SVG-Bilder mit JavaScript zu zeichnen, es macht sie so einfach wie das Aufrufen .animate({}) zu animieren.

Mit einer anderen Bibliothek, anime.js, können Sie ein div-Element mit nur wenigen Codezeilen einem SVG-Pfad folgen lassen.

Wenn Sie nach einer Bibliothek suchen, die selbst mehr leistet, aber die Ergebnisse trotzdem umwerfend aussehen lässt, dann ist Vivus genau das, wonach Sie suchen. Es verfolgt einen anderen, stärker konfigurationsgesteuerten Ansatz für die SVG-Pfadanimation. Mit dieser Bibliothek müssen Sie dem SVG-Element, das Sie zeichnen möchten, nur eine ID hinzufügen und ein Vivus-Objekt mit dieser ID definieren. Vivus kümmert sich um den Rest.

Weiterführende Lektüre

Nachfolgend finden Sie eine Liste von Ressourcen, die Sie beim Umgang mit SVG-Bildern und deren Animation nützlich finden können:

Um tiefer in die SVG-Animation einzusteigen, können Sie diesen kurzen Artikel über die drei Möglichkeiten zum Animieren von SVG-Bildern lesen und sich den Video-Screencast von CSS Tricks ansehen.

Eine Sache, die in diesem Artikel nicht behandelt wurde, ist das Animieren von SVG-Bildern mit Synchronized Multimedia Integration Language (SMIL). Während die Verwendung von CSV für SVG Ihnen den Vorteil bietet, mit etwas zu arbeiten, mit dem Sie bereits vertraut sind, bringt SMIL die Dinge auf die nächste Stufe.

Mit SMIL können Sie erweiterte Animationseffekte wie Formmorphing allein mit SVG implementieren. Eine kurze, aber effektive Anleitung zur Verwendung von SMIL für solche Effekte finden Sie hier.

Obwohl die Unterstützung für SMIL im Moment etwas nervös ist (kein Wortspiel beabsichtigt).

Kompromisslose Animationen für das Web

In diesem Artikel haben Sie verschiedene Möglichkeiten zum Animieren von SVG-Elementen mithilfe von CSS- oder HTML-Elementen auf SVG-Pfaden besprochen.

SVG ist leichtgewichtig und kann verwendet werden, um scharfe Grafiken unabhängig von Bildschirmgröße, Zoomstufe und Bildschirmauflösung zu erstellen. Mit SVG ist es jetzt einfacher als je zuvor, ein modernes, lebendiges Erlebnis zu bieten und gleichzeitig die Vorteile der Verwendung von Standard-Webtechnologien zu nutzen.

Und das ist es! Hoffentlich fanden Sie dieses SVG-Animations-Tutorial nützlich und haben es genossen, es zu lesen.

Weiterführende Literatur im Toptal Engineering Blog:

• Annäherung an SVG-Animationen in CSS