Wie SVG-Linienanimation funktioniert

Ich wette, Sie alle haben diesen kleinen Trick gesehen, bei dem ein SVG-Pfad so animiert wird, dass er aussieht, als würde er sich selbst zeichnen. Es ist super cool. Jake Archibald hat die Technik eingeführt und hat einen super guten interaktiven Blogbeitrag darüber, wie es funktioniert. Brian Suda hat im Rahmen von 24 Ways darüber geschrieben. Polygon hat es in einem maßgeschneiderten Artikel hervorragend eingesetzt und darüber geschrieben. Codrops hat einige nette Beispiele.

Ich habe wenig hinzuzufügen, außer dass mein Gehirn es gerade irgendwie verstanden hat, also dachte ich, ich würde es noch einmal so erklären, wie es für mich klick gemacht hat.

1. Sie haben eine SVG-Form

2. Die Form muss einen Rand (Stroke) haben

3. Ränder können gestrichelt sein

Das könnten wir in Illustrator tun, aber wir können es auch programmgesteuert machen. Zielen wir mit CSS auf den Pfad (vorausgesetzt, wir verwenden hier Inline-SVG oder über ein <object>) und wenden den Strich auf diese Weise an.

<svg ...>
  <path class="path" stroke="#000000" ... >
</svg>

.path {
  stroke-dasharray: 20;
}

Das gibt uns Striche von 20 Pixeln Länge.

4. Diese Striche könnten länger sein...

.path {
  stroke-dasharray: 100;
}

5. Wir können den Rand auch „verschieben“, was die Position dieser Striche verändert

Sehen Sie, wie wir die Verschiebung dieser langen Striche animieren

Das war so einfach wie

.path {
  stroke-dasharray: 100;
  animation: dash 5s linear;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

6. Stellen Sie sich einen Strich vor, der so lang ist, dass er die gesamte Form bedeckt

Nichts Besonderes zu sehen, es sieht genauso aus wie die vollständige Form, wenn sie überhaupt nicht gestrichelt wäre. Sie müssen nur stroke-dasharray auf einen längeren Wert als die Länge des Strichs setzen.

7. Verschieben Sie nun diesen Rand, so dass er die gesamte Form nicht mehr bedeckt, anstatt sie zu bedecken.

Es wird so aussehen, als ob die Form gar nicht vorhanden wäre.

8. Animieren Sie nun den Randversatz zurück auf 0

Wenn Sie dies mit CSS tun, möchten Sie, dass die animation den Wert animation-fill-mode von forwards hat, damit der Endzustand so bleibt, wie die Animation endet.

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Tada!

Live-Beispiel

Warum also all das JavaScript?

Die meisten Beispiele für SVG-Linienanimationen, die Sie sehen, verwenden JavaScript. Das liegt daran, dass es schwierig ist, die tatsächliche Länge dieses Randes zu kennen. Wir haben in unserem Beispiel nur 1000 verwendet, weil das ungefähr die richtige Länge ist.

Sie können diese Länge in JavaScript erhalten, z.

var path = document.querySelector('.path');
var length = path.getTotalLength();

Verwenden Sie sie dann, wie Sie möchten. Die oben genannten Artikel gehen viel mehr auf all dies ein, daher werde ich Sie ermutigen, diese für ausgefallenere Dinge zu konsultieren. Ich wollte nur das Konzept behandeln, damit es vielleicht auch für Sie klick macht.

Es gibt auch einen Trick! Schauen Sie sich A Trick That Makes Drawing SVG Lines Way Easier an.