Wie man einen SVG mit Grenzbild animieren

Erstellen Sie dynamische Randeffekte mithilfe von CSS- border-image Attribut und animiertem SVG

In diesem Artikel wird vorgestellt, wie das border-image Attribut von CSS und animiertes SVG kombiniert werden kann, um einen dynamischen SVG-Animationseffekt zu erstellen, der den Rand umgibt. Wir werden lernen, wie man animierte SVGs von Ne-Netze von von Hand herstellen, die diesen Effekt nicht nur reproduzieren, sondern ihn auch nach Ihren Anforderungen anpassen können.

Der endgültige Effekt ist wie folgt:

Diese Animation ist tatsächlich Teil eines Fahnenrätsels, das ich "The Skull" entwickelte, um die interne Struktur des Arduino und seines Mikrocontrollers zu erforschen. Ich suchte nach dem Erstellen eines animierten Randes wie diesem, konnte aber keine nützlichen Beispiele finden. Der größte Teil des Inhalts, den ich gefunden habe, bezieht sich auf den "Ameisenmarsch" -Effekt, aber leider funktioniert der stroke-dasharray -Trick nicht mit Schädeln, geschweige denn komplexere Formen.

Im Geiste des Lernens und Teilens werde ich meine Erfahrungen hier mit Ihnen teilen!

Soll ich background oder border-image verwenden?

Zuerst kannte ich nicht einmal die Existenz border-image Attributs. In meinem ersten Versuch habe ich versucht, ::before Pseudoelement zu verwenden und sein background-position zu belasten. Die Ergebnisse sind wie folgt:

Wie Sie sehen können, funktioniert diese Methode, aber um die gesamte Grenze zu vervollständigen, sind mindestens acht verschiedene Elemente (oder Pseudoelemente) erforderlich. Dies wird den HTML -Code verwirren und ist nicht ideal.

Ich habe eine Frage in der israelischen CSS-Entwickler-Facebook-Gruppe veröffentlicht und alle wiesen mir auf border-image -Attribut hin. Es passt genau das, was es heißt: Verwenden Sie ein Bild (oder CSS -Gradient) als Rand des Elements.

Um border-image zu verwenden, müssen Sie ein Bild bereitstellen, das in neun Netz verwendet wird (Stellen Sie sich vor, Sie überlagern ein Tic-Zehenraster auf dem Bild). Jeder dieser neun Bereiche repräsentiert einen anderen Teil der Grenze: die obere, rechte, linke und unten, vier Ecken und die Mitte (der mittlere Teil wird ignoriert).

Wenn wir beispielsweise nur statische Schädel benötigen, können wir das SVG -Muster verwenden, um die Schädel neunmal zu wiederholen. Zuerst verwenden wir den Pfad des Schädels, um ein 24 × 24 -Muster zu definieren, und dann dieses Muster als Füllung für das 72 × 72 -Rechteck:

<svg height="72" version="1.1" width="72" xmlns="http://www.w3.org/2000/svg"><defs><pattern height="24" patternunits="userSpaceOnUse" width="24"><path d="..." fill="red"></path></pattern></defs><rect fill="url(#skull-fill)" height="72" width="72"></rect></svg>

Als nächstes definieren wir eine Grenze und setzen border-image des Zielelements:

 .Skulls {
  Grenze: 24px fest transparent;
  Border-Image: URL ("https://skullctf.com/images/skull-9.svg") 24 Runde;
}

Auf diese Weise erhalten wir eine Grenze, die aus Schädeln besteht:

Fügen Sie SVG -Animation hinzu

Jetzt können wir diesen Schädeln Animationen hinzufügen! Es funktioniert die meiste Zeit gut.

Die Idee ist, für jeden Bereich im Grenzbild unterschiedliche Animationen zu erstellen. Zum Beispiel haben wir in der oberen linken Ecke einen Schädel von rechts nach links, während sich der andere Schädel gleichzeitig von oben nach unten bewegt.

Wir werden transform animieren, um den Bewegungseffekt zu erreichen. Wir werden auch SVG verwenden<use></use> Elemente, um wiederholte lange Wiederholungen für jeden Schädel zu vermeiden<path></path> Definition:

<svg height="96" version="1.1" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  @keyframes links {to {transform: translate (-32px, 0)}}
  @KeyFrames unten {to {Transform: Translate (0, 32px)}}
 <defs><path d="..." fill="red"></path></defs><use href="#skull" style="animation: down .4s infinite linear" x="0" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="32" y="0"></use></svg>

Die SVG-Animationssyntax hier sieht vielleicht vertraut aus, da es sich nicht um eine Art SVG-spezifische Syntax wie Smil handelt, sondern CSS-Animationen verwendet. Sehr cool, oder?

Der endgültige Effekt ist wie folgt:

Wenn wir ein Netz hinzufügen, können wir sehen, dass diese Animation auch einen Teil der oberen und linken Kanten abdeckt:

Nachdem wir die verbleibenden drei Kanten hinzugefügt haben, sieht es beeindruckender aus und deckt so acht Bereiche des Grenzbildes vollständig ab:

<svg height="96" version="1.1" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  @keyframes links {to {transform: translate (-32px, 0)}}
  @KeyFrames unten {to {Transform: Translate (0, 32px)}}
  @keyframes rechts {to {transform: Translate (32px, 0)}}
  @KeyFrames up {to {transform: Translate (0, -32px)}}
 <defs><path d="..." fill="red"></path></defs><use href="#skull" style="animation: down .4s infinite linear" x="0" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="32" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="64" y="0"></use><use href="#skull" style="animation: up .4s infinite linear" x="64" y="32"></use><use href="#skull" style="animation: down .4s infinite linear" x="0" y="32"></use><use href="#skull" style="animation: right .4s infinite linear" x="0" y="64"></use><use href="#skull" style="animation: right .4s infinite linear" x="32" y="64"></use><use href="#skull" style="animation: up .4s infinite linear" x="64" y="64"></use></svg>

Dies bietet uns eine vollständige Schleife:

Stellen Sie alles zusammen und wir verwenden die Animation SVG, die wir gerade als border-image erstellt haben, um das gewünschte Ergebnis zu erzielen:

Ich kann das den ganzen Tag spielen ...

Als ich es zum ersten Mal zum Laufen brachte, begann ich, die Animationseigenschaften anzupassen. Dies ist einer der Vorteile bei der Verwendung von SVG anstelle von GIF: Das Ändern der Art der Animation ist so einfach wie das Ändern einer CSS -Eigenschaft in der SVG -Quelldatei. Sie können die Ergebnisse sofort sehen, ganz zu schweigen von kleineren Dateigrößen (insbesondere bei der Behandlung mit Gradienten), vollen Farbunterstützung und Löschen.

Zunächst versuche ich zu sehen, wie es aussehen würde, wenn ich die Animations -Timing -Funktion so ändern würde, um sie zu ease :

Wir können den Schädel auch zwischen Rot und Grün verblassen:

Wir können sogar den Schädel ändern, wenn sie sich um den High -Score -Tisch bewegt:

Sie können auf die Registerkarte JavaScript zugreifen, wo Sie den SVG -Quellcode anpassen und selbst versuchen können.

Elefant im Raum (ähm, Firefox)

Als ich es zum ersten Mal zum Laufen brachte, war ich so glücklich. Es gibt jedoch einige Dinge, mit denen Sie achten sollten. Der erste und wichtigste Punkt ist, dass Firefox aus irgendeinem Grund keine Animationen an Rändern von Grenzen, sondern nur Animationen auf Ecken rendert:

Interessanterweise funktioniert es perfekt. Edge -Animationen bei Chrome Stop! ? ‍Eitung

Wie auch immer, dies scheint ein Browserfehler zu sein, da Firefox die Kanten animiert, wenn wir border-image-repeat in stretch ändern, aber das Ergebnis ist etwas seltsam (obwohl es möglicherweise zum Thema der Seite passt):

Das Ändern border-image-repeat in space scheint auch zu funktionieren, aber nur, wenn die Breite des Elements kein ganzzahliges Vielfaches der Schädelgröße ist (in diesem Fall 32 Pixel), was bedeutet, dass die Animation einige Lücken geben.

Ich stellte auch fest, dass, wenn die Behältergröße kein Vielfaches der Patchgröße ist (in diesem Fall 32 Pixel), einige visuelle Probleme wie winzige schwarze Linien am Schädel gibt. Ich vermute, dass dies etwas mit einem schwimmenden Punktrundungsproblem zu tun hat. Es neigt auch dazu, beim Zoomen zu brechen.

Nicht perfekt, aber absolut fertig! Wenn Sie die endgültige Version sehen möchten, können Sie die High -Score -Seite von "The Skull" besuchen. Hoffentlich sehen Sie Ihren Namen bald!

Das obige ist der detaillierte Inhalt vonWie man einen SVG mit Grenzbild animieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!