Im Jahr 2013 stellte Jake Archibald diesen coolen Trick vor, eine SVG-Pfad zu animieren, sodass es aussieht, als würde sie sich selbst zeichnen. Wir haben jetzt 2020, und der Trick ist immer noch beliebt. Ich habe ihn auf vielen Websites gesehen, die ich in letzter Zeit besucht habe. Auch ich zeige auf meiner Website einen animierten SVG-Loader, der eine der unten vorgestellten Bibliotheken verwendet.

In einem früheren Artikel schrieb Chris Coyier darüber, wie SVG-Pfad-Animationen unter der Haube funktionieren, indem er die CSS-Eigenschaften stroke-dasharray und stroke-dashoffset verwendete. In diesem Artikel möchte ich Ihnen vier JavaScript-Bibliotheken vorstellen, mit denen Sie SVG-Pfad-Zeichenanimationen mit weniger Codezeilen erstellen können, wie zum Beispiel dieses coole Beispiel. Warum eine Bibliothek? Weil sie ideal für komplexe Animationen sind, die zwei oder mehr SVGs mit mehreren Pfaden beinhalten.

Um zu beginnen, werde ich zuerst ein SVG für die Demo sichern. Nehmen wir diese Burg von svgrepo. Das Burg-SVG wird als SVG-Bild heruntergeladen. Da wir uns aber mit Pfadanimationen beschäftigen, benötigen wir das Codeformat des SVG. Um dies zu erhalten, werde ich die Datei in Figma importieren und die Funktion "Als SVG kopieren" (Rechtsklick → Kopieren/Einfügen → Als SVG kopieren) verwenden, um den SVG-Code zu erhalten.

Um einen SVG-Pfad erfolgreich zu animieren, sollte die SVG-Form eine fill von none haben und jeder einzelne SVG-Pfad muss einen stroke (den wir auf #B2441D setzen) und eine stroke-width (gesetzt auf 2px) haben.

Der Animationseffekt, den wir erzeugen möchten, ist, zuerst die Kontur (oder den Strich) des SVG zu zeichnen und dann die verschiedenen Farben einzufüllen. Insgesamt werden sechs verschiedene Füllfarben im gesamten SVG verwendet, daher entfernen wir die Füllfarbe von jedem Pfad und geben Pfaden mit derselben Farbe denselben Klassennamen.

• #695A69: color-1
• #B2441D: color-2
• #DFDOC6: color-3
• #C8B2A8: color-4
• #DE582A: color-5
• #AO8A8A: color-6

Nach allen Modifikationen sieht der SVG-Code so aus

<svg id="svg-castle" width="480" height="480" viewBox="0 0 480 480" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M231.111 183.761V150.371C231.111 149.553 231.774 148.889 232.592 148.889H24  7.407C248.225 148.889 248.889 149.552 248.889 150.371V183.761L258.342 206.667H271.111  V135.556H240H208.889V206.667H221.658L231.111 183.761Z" stroke="#B2441D" stroke-width="2px" class="color-6" />
  <path d="M311.111 420H288.889V455.556V468.889H311.111V455.556V420Z" stroke="#B2441D"   stroke-width="2px" class="color-1" />
  <path d="M191.111 420H168.889V455.556V468.889H191.111V455.556V420Z" stroke="#B2441D" stroke-width="2px" class="color-1" />
  <path d="M168.889 220V228.889V237.778H222.222V228.889H212.487L221.658 206.667H208.88   9H169.524L177.778 220H168.889Z" stroke="#B2441D" stroke-width="2px" class="color-2"/ >
  <!-- etc. -->
</svg>

Das ist die gesamte SVG-Vorbereitung, die wir benötigen. Sehen wir uns an, wie wir die gewünschte Animation mit den verschiedenen Bibliotheken erreichen können.

Bibliothek 1: Vivus

Vivus ist eine leichtgewichtige JavaScript-Klasse (ohne Abhängigkeiten), die es Ihnen ermöglicht, SVGs zu animieren, als ob sie gezeichnet würden. Die Bibliothek ist über jede der folgenden Optionen verfügbar. Um es einfach zu halten, verwenden wir einen CDN-Link

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.5/vivus.min.js" crossorigin="anonymous"></script>

Als nächstes erstellen wir eine neue Vivus-Instanz. Sie nimmt drei Argumente an

1. Die ID des Zielelements (des SVG)
2. Ein options-Objekt mit einem Dutzend möglicher Werte
3. Eine Callback-Funktion, die am Ende der Animation ausgeführt wird

Wenn wir uns unseren SVG-Code noch einmal ansehen, ist die SVG-ID svg-castle.

new Vivus('svg-castle', { 
  duration: 200, type:'oneByOne'
});

Nun schreiben wir eine Callback-Funktion, die die Pfade mit den verschiedenen Farben füllt, die wir definiert haben

function fillPath(classname, color) {
  const paths = document.querySelectorAll(`#svg-castle .${classname}`);
  for (path of paths){
    path.style.fill = `${color}`;
  }
}

Die Funktion fillPath wählt alle Pfade im Element svg-castle mit der angegebenen classname aus, durchläuft sie und füllt jeden Pfad mit der angegebenen Farbe. Erinnern Sie sich, dass wir in einem vorherigen Schritt die Füllung von jedem Pfad entfernt und jedem Pfad eine gleiche Füllklasse (color-1, color-2 usw.) gegeben haben.

Als nächstes rufen wir die Funktion fillPath für die sechs verschiedenen Klassennamen und ihre entsprechenden Farben auf

function after() {
  fillPath('color-1', '#695a69');
  fillPath('color-2', '#b2441d');
  fillPath('color-3', '#dfd0c6');
  fillPath('color-4', '#c8b2a8');
  fillPath('color-5', '#de582a');
  fillPath('color-6', '#a08a8a')
}

Das ist die Callback-Funktion, die der Vivus-Instanz übergeben wird. Sehen Sie sich Pen für die vollständige Implementierung an.

Bibliothek 2: Walkway.js

Walkway ist eine leichtgewichtige SVG-Animationsbibliothek für path-, line- und polygon-Elemente. Um sie zu verwenden, können wir die Bibliothek entweder über npm, yarn oder mit einem CDN-Link hinzufügen, wie wir es bei Vivus getan haben. Wir entscheiden uns wieder für den CDN-Link

<script src="https://cdn.jsdelivr.net/npm/walkway.js/src/walkway.min.js"></script>

Mit Walkway erstellen wir eine neue Walkway-Instanz und übergeben ein options-Objekt als Argument. Dann rufen wir die draw-Methode auf der neuen Instanz auf und übergeben eine optionale Callback-Funktion, die am Ende der Zeichenanimation ausgeführt wird. Wiederum sehr ähnlich wie bei Vivus.

Wir haben die after-Callback-Funktion bereits im vorherigen Beispiel geschrieben, daher sollte der Rest ein Kinderspiel sein

const svg = new Walkway({
  selector: '#svg-castle',
  duration: 3000,
});

svg.draw(after);

Bibliothek 3: Lazy Line Painter

Lazy Line Painter ist eine moderne JavaScript-Bibliothek für SVG-Pfadanimationen. Sie erfordert minimalen Code zur Einrichtung. Wenn Sie jedoch eine grafische Benutzeroberfläche bevorzugen, können Sie den Lazy Line Composer verwenden, einen kostenlosen Online-Editor für SVG-Pfadanimationen von denselben Machern. Das SVG wird als animierte SVG-Datei exportiert, die überall direkt verwendet werden kann.

Die Grundkonfiguration für Lazy Line Painter ähnelt dem, was wir bereits in den anderen Beispielen getan haben. Zuerst holen wir uns die Bibliothek entweder über npm oder einen CDN-Link. Genau wie bei den vorherigen Beispielen verwenden wir einen CDN-Link

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/lazy-line-painter-1.9.4.min.js"></script>

Dann initialisieren wir eine neue LazyLinePainter-Instanz, die zwei Parameter akzeptiert – einen Selektor (die ID des Ziel-SVG-Elements) und ein Konfigurationsobjekt. Nennen wir die paint-Methode auf der neuen Instanz

// select the svg by id
let svg = document.querySelector('#svg-castle')

// define config options
let options = {
  strokeDash: '2, 2',
}
// initialize new LazyLinePainter instance
let myAnimation = new LazyLinePainter(svg, options)

// call the paint method
myAnimation.paint()

Eine vollständige Liste der Konfigurationsoptionen ist in der Bibliotheksdokumentation verfügbar. Im Gegensatz zu den vorherigen Bibliotheken übergeben wir keine Callback-Funktion an die paint-Methode. Stattdessen hören wir auf den complete:all-Ereignishandler der Animation und übergeben dann die Callback-Funktion.

myAnimation.on('complete:all', (event) => {after()});

Wir können auch steuern, wann die paint-Methode ausgeführt wird, indem wir Ereignis-Listener verwenden, wie wir es im folgenden Codepen-Demo getan haben. Klicken Sie auf die Burg, um die Animation erneut abzuspielen.

Bibliothek 4: Framer Motion

Framer Motion unterscheidet sich etwas von den anderen Bibliotheken, die wir behandelt haben. Es ist eine produktionsreife Open-Source-Animationsbibliothek für React-Komponenten mit unzähligen möglichen Animationstypen. Und ja, dies ist vom selben Team, das auch hinter dem beliebten Framer Prototyping-Tool steckt.

Zuerst installieren wir die Bibliothek mit npm im Terminal

npm install framer-motion

Für SVG-Pfad-Zeichenanimationen bietet Framer Motion eine motion.path-Komponente, die vier Props annimmt

<motion.path
  d={pathDefinition}
  initial={{ pathLength: 1, pathOffset: 0 }}
  animate={{ pathLength: 0, pathOffset: 1 }}
  transition={{ duration: 2 }}
/>

Um sie zu verwenden, konvertieren wir einfach unsere SVG-Pfade in motion.path, wie hier

import React from 'react';
import { motion } from "framer-motion";
const AnimatedCastle = () => {
  return (
    <svg id="svg-castle" width="480" height="480" viewBox="0 0 480 480" fill="non            e" xmlns="http://www.w3.org/2000/svg">
      <motion.path d="M311.111 420H288.889V455.556V468.889H311.111V455.556V420Z"              stroke="#B2441D" stroke-width="2" className="color-1"
       initial={{ pathLength: 1,fill:"none", opacity:0, }}
       animate={{ pathLength: 0,fill:"695A69", opacity:1 }}
       transition={{ duration: 2 }}
      />
      <motion.path d="M191.111 420H168.889V455.556V468.889H191.111V455.556V420Z"                stroke="#B2441D" stroke-width="2" className="color-2"
        initial={{ pathLength: 1, fill:"none", opacity:0, }}
        animate={{ pathLength: 0, fill:"#b2441d", opacity:1}}
        transition={{ duration: 3 }}
      />
         
      <!-- etc. -->
    </svg>
  )
}

Dies muss für jeden SVG-Pfad erfolgen. Sehen Sie sich diese Demo für die vollständige Implementierung an

Es gibt jedoch eine Einschränkung: Das Burg-SVG hat über 60 Pfade, was sehr viel ist. Das Durchgehen war für mich ziemlich entmutigend, und ich fand den Prozess repetitiv und fehleranfällig. Aus diesem Grund empfehle ich Framer Motion nicht, aber ich würde sagen, dass es gut für SVGs in React-Komponenten mit nicht mehr als fünf Pfaden geeignet ist. Für mehr als das sollten Sie eine der zuvor behandelten Bibliotheken wählen.

Fazit

Das ist ein Überblick über vier JavaScript-Bibliotheken, die wir für handgezeichnete SVG-Effekte verwenden können.

Warum haben wir keine reine CSS-Lösung behandelt? Obwohl dies möglich ist, erfordert es viel Code-Wiederholung. Zum Beispiel bedeutet dies, die Gesamtlänge jedes Pfades mit JavaScript oder mit diesem coolen Trick zu ermitteln, der die Länge jedes Pfades auf 1 setzt, und dann stroke-dasharrray und stroke-dashoffset jedes Pfades auf seine Pfadlänge setzt.

Danach müssen wir immer noch Keyframes definieren, um stroke-dashoffset auf Null zu animieren. Dann werden diese Keyframe-Animationen zu jedem Pfad hinzugefügt und mit einer animation-delay, um die Dinge ein wenig zu verzögern. Wir müssen auch sechs verschiedene Keyframe-Regeln schreiben, um die Pfade mit ihren jeweiligen Farben zu füllen. Wenn man bedenkt, dass die Burg über 60 einzelne Pfade hat, sind das über 100 Zeilen CSS! Nicht gerade der effizienteste oder geradlinigste Ansatz.