Erste Schritte mit dem Animieren von SVG-Pfadstrichen mit CSS3

Ohne auf JavaScript angewiesen zu sein, wird reines CSS verwendet, um svg Strichzeichnungsanimationseffekte und Effektdemonstrationsanimationen zu implementieren.

Grundlagen:

Es gibt einen relativ wichtigen stroke in SVG, der in chinesischer Software „Stroke“ genannt wird. Zu den strichbezogenen Eigenschaften gehören die folgenden:

1. stroke gibt die Strichfarbe an. Der Name, der die Farbe darstellt, ist nicht Strichfarbe, sondern einfach Strich. Sein Wert wird offiziell „paint“ genannt und die optionalen Werttypen umfassen none , currentColor und <color> .

keiner
<Farbe>
aktuelleFarbe

2. stroke-width gibt die Dicke des Strichs an.

3. stroke-linecap gibt den Ausdruck der Strichendpunkte an. Verfügbare Werte sind: butt , round , square , inherit . Das Diagramm sieht wie folgt aus:

4. stroke-linejoin gibt den Ausdruck von Strichecken an. Mögliche Werte: miter , round , bevel , inherit . Das Diagramm sieht wie folgt aus:

5. stroke-miterlimit gibt den Ausdruck des Strichschnittpunkts (spitzer Winkel) an und die Standardgröße ist 4. Es bedeutet so viel wie der Winkelverlust von Fase zu Fase. Je größer der Wert, desto geringer der Verlust.

6. stroke-dasharray zeigt einen gestrichelten Strich an. Die optionalen Werte sind: none , <dasharray> , inherit

keiner
<dasharray>
erben

7. stroke-dashoffset gibt den Startversatz der gestrichelten Linie an. Die optionalen Werte sind: <percentage> , <length> , inherit . Dargestellt werden jeweils: Prozentwert, Längenwert und Vererbung.

8. stroke-opacity gibt die Strichtransparenz an, der Standardwert ist 1.

Die mit diesem Tutorial in Zusammenhang stehenden Animationseffekte sind stroke-dasharray und stroke-dashoffset .

stroke-dasharray und stroke-dashoffset

Der Einfachheit halber und um Störungen zu vermeiden, nehmen wir eine gerade Linie und braten eine Kastanie wie folgt:

Klicken Sie auf den Schieberegler unten (oder geben Sie einen Wert ein), um Folgendes zu erfahren:

Schlaganfall-Dasharray:

Strich-Schlagsatz:

Der HTML-Code lautet:

<svg id="svgForStroke" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
 <g>
  <line fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="0" y1="90" x2="400" y2="90"/>
 </g>
</svg>

Wenn Sie den Schieberegler bewegen (oder in das Textfeld tippen), werden die Werte stroke-dasharray und stroke-dashoffset des Knotenelements <line> über die Methode setAttribute festgelegt, um den oben genannten Effekt zu erzielen.

Ein Sonderfall

Lassen Sie uns jetzt darüber nachdenken. Was würde passieren, wenn stroke-dasharray und stroke-dashoffset beide sehr groß wären und die Gesamtlänge des gezeichneten Pfads überschreiten würden?

Um es auf Chinesisch zu erklären: Eine Wurst ist 12 cm lang und man sollte im Abstand von 15 cm gepunktete Linien darauf zeichnen. Wenn es kein dashoffset gibt, sind die vorderen 15 cm der Wurst mit Chilisoße bedeckt! Tatsächlich ist sie nur 12 Zentimeter lang, wir sehen also die ganze Schinkenwurst, bedeckt mit Chilisauce.

Nun beträgt dashoffset ebenfalls 15 cm, was bedeutet, dass die gepunktete Linie 15 cm nach hinten versetzt ist. Dadurch verteilt sich die Chilisauce außerhalb des Schinkens, sodass keine Chilisauce auf dem Schinken ist. Wenn wir oben das SVG mit der geraden Linie verwenden, wird die gerade Linie unsichtbar.

Wenn wir den dashoffset -Wert schrittweise verringern, werden wir feststellen, dass die Chilisauce auf dem Schinken nach und nach erscheint, als ob die Chilisauce auf die Wurzel des Schinkens geschmiert wäre.

Schieben Sie beide Schieberegler nach rechts und dann langsam den Schieberegler nach links (bitte verwenden Sie einen Browser, der type=range unterstützt). Sie werden sehen, wie langsam eine gerade Linie erscheint. Dies ist das Prinzip der SVG-Pfadanimation.

CSS3 animation

Die Stärke von Inline-SVG liegt in der Tatsache, dass es auch ein HTML-Element ist, das durch CSS-Attribute gesteuert werden kann und die traditionelle Positionierung von Höhe und Breite, Rahmen und Hintergrundfarben usw. handhabt. Einige spezielle Attribute von SVG selbst können auch durch CSS unterstützt werden, sogar in CSS3 animation .

Daher kann der oben besprochene SVG-Strichanimationseffekt problemlos mithilfe einer CSS3- animation ohne JavaScript implementiert werden, und so wurde die Demoseite zu Beginn implementiert.

Der CSS-Code lautet wie folgt:

Weg {
  Strich-Dasharray: 1000;
  Strich-Schlagsatz: 1000;
  Animation: Strich 5 s linear unendlich;
}

@keyframes Strich {
  Zu {
    Strich-Dashoffset: 0;
  }
}

1000 hat keine besondere Bedeutung, es ist nur groß genug, um sicherzustellen, dass es größer ist als die Länge jedes Pfades. Sie können auch 1500 verwenden, der Unterschied besteht darin, dass die Strichgeschwindigkeit etwas schneller ist.

Freunde, die mit den CSS3-Animationseigenschaften vertraut sind, sollten die Bedeutung des obigen Codes auf einen Blick erkennen können. In der 5-Sekunden-Animation geht der Strich-Dashoffset von 1000 auf 0. Die Strichanimation wird gebildet.

Der obige CSS-Code ist nahezu universell.

Unabhängig davon, wie komplex Ihr SVG-Pfad ist, können Sie seinen Strich animieren. Nach meinen eigenen Tests gibt es unter IE10+ keinen Animationseffekt. Das liegt nicht daran, dass CSS die strichbezogenen Attribute von SVG nicht unterstützt, sondern daran, dass die Animation die Animation strichbezogener Attribute nicht unterstützt.

Wozu dienen die oben genannten Effekte? Ich habe an die folgenden Szenarien gedacht: das schrittweise Anzeigen einiger wichtiger Punkte während einer Demonstration; oder Hover-Strich-Effekte auf Bildern; oder Pfeilführungseffekte auf Website-Tippelementen usw., die alle sehr nützlich sind.

Länge des Weges

Wenn Sie den Pfad oder die genaue Länge einer Linie wissen möchten. Möglicherweise müssen Sie JavaScript verwenden, ähnlich dem folgenden Code:

var Pfad = document.querySelector('Pfad');
var Länge = Pfad.getTotalLength();

Verweise

Polygon-Feature-Design: SVG-Animationen für Spaß und Profit

Vektoren mit SVG animieren

So funktioniert die SVG-Linienanimation

Animierte Strichzeichnung in SVG

W3 – Stricheigenschaften

Tutorial übernommen von:

https://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%e5%8a%a8%e7%94%bb-%e8%b7%af%e5%be%84/

Zusammenfassen

Das Obige ist ein Einführungstutorial zur Verwendung von CSS3 zum Erzielen von SVG-Pfadstrich-Animationseffekten. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!