Es gibt viele Möglichkeiten, Icons für eine Website zu erstellen. Inline-SVG ist skalierbar, einfach mit CSS zu modifizieren und kann sogar animiert werden. Wenn Sie mehr über die Vorteile der Verwendung von Inline-SVG erfahren möchten, empfehle ich Ihnen, Inline SVG vs Icon Fonts zu lesen. Mit der immer besser werdenden Browserunterstützung war noch nie ein besserer Zeitpunkt, um mit SVGs zu arbeiten. Snap Animation States ist ein JavaScript-Plugin, das auf Snap.svg basiert, um die Erstellung und Erweiterung von Icon-Bibliotheken mit skalierbaren, editierbaren SVG-Icons zu erleichtern. Snap Animation States ermöglicht das einfache Laden und Animieren dieser SVGs mit einem einfachen Schema.
Erste Schritte
Beginnen wir mit einem einfachen SVG-Hamburger-Menü. Dieses wurde mit Affinity Designer erstellt, aber es gibt viele andere kostenlose (Inkscape) und kostenpflichtige (Adobe Illustrator) Optionen zur Erstellung von Vektorgrafiken.
<svg width="100%" height="100%" viewBox="0 0 65 60" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:square;stroke-miterlimit:1.5;" fill="none" stroke="#000" stroke-width="10">
<g>
<path class="hamburger-top" d="m 5,10 55,0" />
<path class="hamburger-middle" d="m 5,30 55,0" />
</g>
<path class="hamburger-bottom" d="m 5,50 55,0" />
</svg>Obwohl dies ein ziemlich einfaches SVG ist, nimmt es immer noch mehrere Zeilen in einem HTML-Dokument ein. Das kann mühsam zu schreiben sein, wenn Sie das SVG an mehreren Stellen auf verschiedenen Webseiten verwenden möchten. Und was, wenn Sie Ihr SVG ändern müssen? Dann müssen Sie sich erinnern, wo Sie das SVG überall verwendet haben, um es aktualisieren zu können. Das ist nicht sehr sauber oder wiederverwendbar. Genau das soll Snap Animation States lösen.
Verwenden wir weiterhin dasselbe SVG, aber diesmal verwenden wir das Plugin, um es in das DOM zu laden. Das Schema für das Plugin erfordert mindestens zwei Eigenschaften: selector: ".some-css-selector" und svg: "svg string". Sehen Sie sich die folgende Demo an
See the Pen Lydgoo by Briant Diehl (@bkdiehl) on CodePen.
Sie werden im obigen Pen feststellen, dass ich icon-hamburger genauso aufrufe, wie ich ein Font-Icon aufrufen würde. Denken Sie daran, dass die Eigenschaft selector einen CSS-Selektor als Wert benötigt.
Da dieses Plugin eine Erweiterung von Snap.svg ist, einer JavaScript-Bibliothek zur Erstellung und Animation von SVGs, können wir noch mehr tun. Lassen Sie uns also sehen, was benötigt wird, um diesem Hamburger-Icon eine einfache Animation zu geben.
Als ich mein SVG erstellt habe, habe ich den Elementen, die ich animieren wollte, Klassen hinzugefügt.
<g>
<path class="hamburger-top" d="m 5,10 55,0" />
<path class="hamburger-middle" d="m 5,30 55,0" />
</g>
<path class="hamburger-bottom" d="m 5,50 55,0" />In meinem Schema kann ich mit den für die Animation benötigten Eigenschaften beginnen, indem ich transitionTime: 250 angebe. Die Übergangszeit wird auf jeden Schritt in der Transformationskette angewendet und kann später durch eine einzelne Transformation überschrieben werden.
Nun ist es an der Zeit, meine Animationszustände einzuschließen. Ich beginne mit der Festlegung der Eigenschaft states:{}. Die Eigenschaftsnamen für dieses Objekt sollten mit dem Zustand korrelieren, zu dem die Animation führen wird. In diesem Fall werde ich meine Eigenschaften open und closed nennen. Die Eigenschaftswerte für dieses Objekt sind Arrays von Transformations-Objekten. Bisher sollten die Ergänzungen zum Schema wie folgt aussehen
transitionTime: 250,
states: {
open:[],
closed: []
}Als Nächstes müssen wir die Transformations-Objekte einschließen, die definieren, wie die SVG-Elemente transformiert werden sollen.
open:[
{ id: "top-lower", element: ".hamburger-top", y:20 },
{ id: "bottom-raise", element: ".hamburger-bottom", y:-20 },
{ waitFor: "top-lower", element: "g", r:45 },
{ waitFor: "bottom-raise", element: ".hamburger-bottom", r:-45},
]Jedes Transformations-Objekt hat entweder eine id, eine waitFor-Eigenschaft oder eine Kombination aus beidem. Jede id muss eindeutig sein. Objekte mit einer id stellen ein Glied in einer Animationskette dar. waitFor muss immer auf eine vorangehende id verweisen. In diesem Fall gibt es ein Objekt mit id:"top-lower" und ein Objekt mit waitFor:"top-lower". Wenn die Animation startet, wird id:top-lower das erste Glied in der Kette sein und 250 ms laufen. Wenn es fertig ist, wird waitFor:"top-lower" 250 ms laufen.
Jedes Transformations-Objekt muss ein Element referenzieren. Der Elementwert kann entweder ein CSS-Selektor oder eine direkte Elementreferenz sein. Zum Beispiel hat eine Eigenschaft für ein Element den Wert "g", der sich auf das <g>-Element im SVG bezieht, während eine andere den Wert ".hamburger-bottom" hat, der sich auf die Klasse bezieht, die ich dem <path>-Element hinzugefügt habe.
Jetzt, wo wir die Reihenfolge der Animation und die zu transformierenden Elemente kennen, müssen wir nur noch die Transformations-Objekte definieren. Für diejenigen unter Ihnen, die mit SVG-Transformationen nicht vertraut sind, könnten Sie mit Transforms on SVG Elements beginnen. Ansonsten, ganz einfach ausgedrückt, stellen Sie sich vor, dass das SVG-Element, das Sie bearbeiten, bei [0, 0] auf einer x/y-Achse beginnt. Etwas anderes, das Sie beachten sollten, ist, dass x von links nach rechts und y von oben nach unten verläuft. Im obigen Beispiel sehen wir
{ id: "top-lower", element: ".hamburger-top", y:20 },Dieses Transformations-Objekt bezieht sich auf die obere Linie des Hamburger-Menüs. y: 20 sagt dem Plugin, dass ich die obere Linie ausgehend vom Ursprungspunkt des Elements [0, 0] um 20px nach unten verschieben möchte. Das Gegenteil gilt für
{ id: "bottom-raise", element: ".hamburger-bottom", y:-20 },Hier sage ich dem Plugin, dass es mein Element um 20px nach oben bewegen soll. Das gleiche Prinzip gilt für die Rotationen
{ waitFor: "top-lower", element: "g", r:45 },
{ waitFor: "bottom-raise", element: ".hamburger-bottom", r:-45}Das rotierte Element beginnt bei einer Rotation von 0 Grad. r: 45 sagt dem Plugin, dass es von 0 Grad auf 45 Grad rotieren soll, und umgekehrt für r: -45.
Unser zweiter Zustand im states-Objekt sieht so aus
closed: [
{ id: "top-angle", element: "g", r: 0 },
{ id: "bottom-angle", element: ".hamburger-bottom", r: 0 },
{ waitFor: "top-angle", element: ".hamburger-top", y: 0 },
{ waitFor: "bottom-angle", element: ".hamburger-bottom", y: 0 }
]Sie werden feststellen, dass für alle transformierten Elemente ihre y- und r-Werte auf 0 gesetzt sind. Das liegt daran, dass der Zweck dieses Zustands darin besteht, die SVG-Elemente in ihren ursprünglichen Zustand zurückzusetzen. Da 0 der Ursprung war, führen wir nur eine Transformation für jedes Element durch, die es zu seinem Ursprung zurückbringt.
Wir sind fast fertig. Jetzt, da die Animationszustände definiert sind, muss ich entscheiden, was diese Animationen auslösen wird. Dies erfordert eine weitere Eigenschaft im Schema: events. events nimmt ein Array von Objekten auf, da Sie Ihre Animation möglicherweise mit mehr als einem Ereignis auslösen möchten. Für das Hamburger-Icon sieht das so aus
events: [
{ event: "click", state: ["open", "closed"] }
]Das Objekt im Array kann die folgenden Eigenschaften enthalten
event: dient dazu, auf JavaScript-Ereignisse zu lauschen. Das Hamburger-Icon lauscht auf ein 'click'-Ereignis auf<i class="icon-hamburger"</i>, da dies der Selektor ist, auf den sich das Schema bezieht.state: nimmt entweder einen String oder ein Array entgegen. Wenn derstatehier"open"ist, dann würde nur die "open"-Animation bei einem Klickereignis ausgeführt, wenn<i class="icon-hamburger"></i>geklickt wird. Da der Wert vonstateein Array ist, wechselt das Klickereignis tatsächlich zwischen der "open"- und der "closed"-Animation. Das Array ist nur für zwei Werte ausgelegt und ermöglicht das Umschalten.- Die letzte Eigenschaft ist optional:
selector. Standardmäßig ist dieser Wert Ihr Schema-selector+ "animate". In diesem Fall wäre esicon-hamburger-animate. Sie können den Selektor ändern, indem Sie ihn hier deklarieren. Sein Zweck ist es, es den JavaScript-Ereignissen zu ermöglichen, an ein übergeordnetes oder Geschwisterelement Ihres SVG gebunden zu werden. Zum Beispiel, wenn ich ein SVG hätte, das ich in einem Button animieren möchte, wenn der Button geklickt wird, müsste ich dies tun
<button class="icon-hamburger-animate">
<i class="icon-hamburger"></i>
</button>Puh, geschafft. Jetzt ist es Zeit, das Endergebnis zu sehen.
See the Pen bWwQJZ by Briant Diehl (@bkdiehl) on CodePen.
Hat es sich gelohnt? Sie denken vielleicht: Das ist viel Arbeit für ein einzelnes Icon. Und dem stimme ich zu. Deshalb habe ich ein Gulp-Plugin entwickelt, das die schwere Arbeit übernimmt.
Gulp Animation States
Bisher haben wir ein einzelnes Icon, das wir überall verwenden können, wo ich das Schema eingebunden habe. Idealerweise würde das Schema für icon-hamburger in einer JS-Datei gespeichert werden, die gebündelt und seitenweit eingebunden wird, was bedeutet, dass ich icon-hamburger überall aufrufen könnte, wo ich möchte. Was wäre, wenn diese JS-Datei automatisch generiert würde und das Schema und den Plugin-Aufruf für so viele SVG-Icons enthielte, wie Sie Zugriff darauf hätten? Sie könnten eine leicht zugängliche Bibliothek von SVG-Icons haben! Das ist der Zweck von Gulp Animation States. Schauen Sie sich unbedingt die Dokumentation hier an.
Beginnen wir mit der Dateistruktur. Nehmen wir an, ich gehe zu IcoMoon und generiere alle benötigten SVG-Dateien für mein neues Projekt. Ich würde all diese neu generierten Dateien in einem Ordner in meinem Projekt ablegen. Nennen wir diesen Ordner `svg`. Meine Dateistruktur würde etwa so aussehen
svg
|-- icon-folder.svg
|-- icon-hamburger.svg
|-- icon-mic.svg
|-- icon-wall.svg
|-- icon-wrench.svgMit Gulp Animation States kann ich alle SVG-Dateien in meinem `svg`-Ordner zu einer einzigen JS-Datei zusammenfassen, wobei der selector für jede Icon-Gruppe entsprechend dem Dateinamen des SVG gesetzt wird. Der Dateiinhalt würde dann etwa so aussehen
var iconFolder = {"selector": ".icon-folder","svg": "<svg>Content</svg>"};
SnapStates(iconFolder);
var iconHamburger= {"selector": ".icon-hamburger","svg": "<svg>Content</svg>"};
SnapStates(iconHamburger);
var iconMic= {"selector": ".icon-mic","svg": "<svg>Content</svg>"};
SnapStates(iconMic);
var iconWall= {"selector": ".icon-wall","svg": "<svg>Content</svg>"};
SnapStates(iconWall);
var iconWrench= {"selector": ".icon-wrench","svg": "<svg>Content</svg>"};
SnapStates(iconWrench);Diese Datei könnte mit dem Rest des JavaScripts einer Website gebündelt werden, was die Verwendung von SVG-Icons ermöglicht, wo immer sie benötigt werden. Aber was ist mit den Animationen? Wie werden sie in diese JavaScript-Datei aufgenommen?
Wir haben bereits die Animation für das Hamburger-Icon, also werden wir diese verwenden. Im `svg`-Ordner müssen wir eine neue Datei namens `icon-hamburger.js` erstellen. Beachten Sie, dass sie den gleichen Namen wie die entsprechende SVG-Datei hat. Hier ist die neue Dateistruktur
svg
|-- icon-folder.svg
|-- icon-hamburger.svg
|-- icon-hamburger.js
|-- icon-mic.svg
|-- icon-wall.svg
|-- icon-wrench.svgUnd der Inhalt von `icon-hamburger.js` wäre
{
transitionTime: 250,
states: {
open:[
{ id: "top-lower", element: ".hamburger-top", y:20 },
{ id: "bottom-raise", element: ".hamburger-bottom", y:-20 },
{ waitFor: "top-lower", element: "g", r:45 },
{ waitFor: "top-lower", element: ".hamburger-bottom", r:-45},
],
closed: [
{ id: "top-angle", element: "g", r: 0 },
{ id: "bottom-angle", element: ".hamburger-bottom", r: 0 },
{ waitFor: "top-angle", element: ".hamburger-top", y: 0 },
{ waitFor: "bottom-angle", element: ".hamburger-bottom", y: 0 },
]
},
events: [
{ event: "click", state: ["open", "closed"] }
]
}Das Gulp-Plugin sucht nach JS-Dateien mit demselben Namen wie die SVG-Datei, für die es ein Schema erstellt. Wir zeigen die Ausgabe erneut mit den Animationszuständen
var iconFolder = {"selector": ".icon-folder","svg": "<svg>Content</svg>"};
SnapStates(iconFolder);
var iconHamburger= {"selector": ".icon-hamburger","svg": "<svg>Content</svg>", "transitionTime":250,"states":{"open":[{"id":"top-lower","element":".hamburger-top","y":20},{"id":"bottom-raise","element":".hamburger-bottom","y":-20},{"waitFor":"top-lower","element":"g","r":45},{"waitFor":"top-lower","element":".hamburger-bottom","r":-45}],"closed":[{"id":"top-angle","element":"g","r":0},{"id":"bottom-angle","element":".hamburger-bottom","r":0},{"waitFor":"top-angle","element":".hamburger-top","y":0},{"waitFor":"bottom-angle","element":".hamburger-bottom","y":0}]},"events":[{"event":"click","state":["open","closed"]}};
SnapStates(iconHamburger);
var iconMic= {"selector": ".icon-mic","svg": "<svg>Content</svg>"};
SnapStates(iconMic);
var iconWall= {"selector": ".icon-wall","svg": "<svg>Content</svg>"};
SnapStates(iconWall);
var iconWrench= {"selector": ".icon-wrench","svg": "<svg>Content</svg>"};
SnapStates(iconWrench);Mit Gulp Animation States behalten Sie kleinere, überschaubare Dateien, die Sie leicht bearbeiten können, wenn Sie etwas ändern müssen. Diese kleinen Stücke werden zu einer einzigen Datei kompiliert, die mit anderen wichtigen Komponenten Ihrer Website gebündelt werden kann, was schnelle und einfache Aufrufe zum Einbinden eines SVG in Ihr HTML-Dokument ermöglicht.
Weitere Beispiele
Das Hamburger-Icon war ziemlich einfach, schauen wir uns also ein paar komplexere Icons an. Wir beginnen mit einem Lautsprecher-Icon.
See the Pen WjoOoy by Briant Diehl (@bkdiehl) on CodePen.
Sie werden feststellen, dass das Schema insgesamt größtenteils gleich geblieben ist. Sie werden die neue Eigenschaft easing bemerken. easing hat einen Standardwert von easeinout. Abgesehen davon sind die einzigen nennenswerten Änderungen in meinen Transformations-Objekten.
{ id: "waveline1", element: ".wave-line-1", x:-10, s:0.1, attr:{ opacity:.8 }, transitionTime: 250 },
{ id: "waveline2", element: ".wave-line-2", x:-16, s:0.1, attr:{ opacity:.8 }, transitionTime: 300 },
{ id: "waveline3", element: ".wave-line-3", x:-22, s:0.1, attr:{ opacity:.8 }, transitionTime: 350 }s steht für Scale und genau wie in CSS beginnt die Skalierung eines Objekts immer bei 1. Die Eigenschaft attr ermöglicht es Ihnen, jedes Attribut eines SVG-Elements zu ändern, in diesem Fall die Opazität. Schließlich erinnern Sie sich am Anfang des Artikels, wie ich erwähnt habe, dass transitionTime durch eine einzelne Transformation überschrieben werden kann? Nun, hier ist, wie es gemacht wird. Ich habe transitionTime nicht einmal im Hauptschema deklariert. Das liegt daran, dass ich wollte, dass jede Transformation eine eindeutige Übergangszeit hat.
Als Nächstes schauen wir uns eine Linienzeichnungsanimation an.
See the Pen OmbxVV by Briant Diehl (@bkdiehl) on CodePen.
Der erste große Unterschied, den ich Ihnen zeigen möchte, ist, dass ich svg nicht im Schema deklariere. Das SVG befindet sich innerhalb von <i class="icon-new-document"></i>. Dies ist hauptsächlich zu Demozwecken, um das Schema, das ich Ihnen zeigen möchte, nicht aufzublähen. Das Plugin ermöglicht jedoch diese Funktionalität. Der Anwendungsfall ist für Benutzer, die nur wenige SVG-Icons benötigen und das Gulp-Plugin nicht verwenden möchten.
Die Transformations-Objekte sind das, worauf ich mich hier wirklich konzentrieren möchte. Hier gibt es viel Neues.
{ id: 'line1-init', element: ".new-document-line1", drawPath: { min: 25, max: 75 }, transitionTime: { min: 500, max: 1000 }, repeat: {times:1} },
{ id: 'line2-init', element: ".new-document-line2", drawPath: { min: 25, max: 75 }, transitionTime: { min: 500, max: 1000 }, repeat: {times:1} },
{ id: 'line3-init', element: ".new-document-line3", drawPath: { min: 25, max: 75 }, transitionTime: { min: 500, max: 1000 }, repeat: {times:1} },
{ id: 'line4-init', element: ".new-document-line4", drawPath: { min: 25, max: 75 }, transitionTime: { min: 500, max: 1000 }, repeat: {times:1} },
{ id: 'line5-init', element: ".new-document-line5", drawPath: { min: 25, max: 75 }, transitionTime: { min: 500, max: 1000 }, repeat: {times:1} },
{ waitFor: 'line1-init', element: ".new-document-line1", drawPath: 100, transitionTime: { min: 500, max: 1000 } },
{ waitFor: 'line2-init', element: ".new-document-line2", drawPath: 100, transitionTime: { min: 500, max: 1000 } },
{ waitFor: 'line3-init', element: ".new-document-line3", drawPath: 100, transitionTime: { min: 500, max: 1000 } },
{ waitFor: 'line4-init', element: ".new-document-line4", drawPath: 100, transitionTime: { min: 500, max: 1000 } },
{ waitFor: 'line5-init', element: ".new-document-line5", drawPath: 100, transitionTime: { min: 500, max: 1000 } },Wenn Sie sich den Pen angesehen haben, werden Sie bemerkt haben, dass das Überfahren des neuen Dokument-Icons dazu führt, dass sich die Linien zusammenziehen und ausdehnen. Jede dieser Linien ist ein path, und ein path kann gezeichnet werden. Das erste Transformations-Objekt oben enthält drawPath. drawpath nimmt entweder eine Zahl oder ein Objekt mit den Eigenschaften min und max an. Die Zahl repräsentiert einen Prozentsatz. Nehmen wir an, das Transformations-Objekt hätte drawPath: 0. Das würde bedeuten, dass ich möchte, dass der aktuelle path zu 0 % seiner Länge gezeichnet wird. Das Transformations-Objekt hat tatsächlich drawPath: { min: 25, max: 75 }. Wenn der Wert von drawpath ein Objekt ist, sage ich meinem Plugin, dass ich möchte, dass der Pfad zu einem zufälligen Prozentsatz zwischen min und max gezeichnet wird. In diesem Fall wäre es eine zufällige Zahl zwischen 25 und 75. Wenn Sie mit der Maus über das Icon fahren, sehen Sie, dass sich die Linienlänge bei jeder Animation ändert. Das gleiche Prinzip, eine Zufallszahl mit min und max festzulegen, gilt auch für transitionTime.
Der letzte Neuling in diesem Animationsschema ist repeat. repeat nimmt ein Objekt mit vier gültigen Eigenschaften auf.
loop: nimmt einen booleschen Wert an. Wenn auf true gesetzt, wiederholen sich die Animation und alle nachfolgenden Transformationen, bis etwas anderes angeordnet wird. Um aus einer Schleife auszubrechen, müssen Sie entweder eineloopDurationfestlegen oder zu einem anderen Animationszustand wechseln.loopDuration: nimmt eine Ganzzahl entgegen. Wenn ichloopauf true undloopDurationauf 5000 setze, wiederholt sich die Animationskette 5000 ms lang. Wenn die Dauer der Animationsschleife nicht genau 5000 ms beträgt, wird die Schleife ihre letzte Animation über die eingestellte Zeit hinaus fortsetzen.times: nimmt eine Ganzzahl entgegen. Wenn ichtimesauf 2 setze, wird meine Animation insgesamt 3 Mal ausgeführt. Einmal, weil die Animation immer mindestens einmal ausgeführt wird, und dann noch 2 Mal.delay: nimmt eine Ganzzahl entgegen. Repräsentiert die Zeit, die zwischen dem Ende der Animation und dem Beginn der Wiederholungsschleife vergehen soll.
Als Nächstes möchte ich eine längere Animationskette veranschaulichen.
See the Pen KmNXdW by Briant Diehl (@bkdiehl) on CodePen.
Betrachten Sie den shake-Zustand. Das erste und letzte Transformations-Objekt haben entweder eine id- oder eine waitFor-Eigenschaft. Jedes andere Transformations-Objekt hat sowohl eine id- als auch eine waitFor-Eigenschaft.
shake: [
{ id: "shake-right", element: '.wrench', r: 10 },
{ id: "shake-left", waitFor: 'shake-right', element: '.wrench', r: -10 },
{ id: "back-to-right", waitFor: 'shake-left', element: '.wrench', r: 10 },
{ id: "back-to-left", waitFor: 'back-to-right', element: '.wrench', r: -10 },
{ waitFor: 'back-to-left', element: '.wrench', r: 0 }
]Jedes der drei mittleren Transformations-Objekte referenziert mit seinem waitFor die id des vorhergehenden Transformations-Objekts. Die erste Animation startet eine Kette, die am Ende zum Reset-Wert r:0 führt.
Schließlich möchte ich demonstrieren, wie wir Linien zeichnen, indem wir stroke-dashoffset und stroke-dasharray setzen.
See the Pen rmWzyW by Briant Diehl (@bkdiehl) on CodePen.
Zuerst möchte ich, dass Sie bemerken, dass ich bei vielen meiner path-Elemente stroke-dashoffset:1000; stroke-dasharray:1000, 1000; einfüge.
<path class="right-upper-branch" d="M45.998,21.196C43.207,23.292 44.195,27.857 47.629,28.59C48.006,28.671 48.399,28.699 48.784,28.672C49.659,28.611 50.276,28.34 50.994,27.849C51.413,27.563 51.839,27.05 52.092,26.616C53.906,23.507 50.981,19.611 47.489,20.486C46.946,20.622 46.446,20.86 45.998,21.196L41.015,14.571" style="fill:none;stroke:#fff;stroke-width:1.7px;stroke-dashoffset:1000; stroke-dasharray:1000, 1000;"/>Für eine detailliertere Erklärung von stroke-dasharray siehe stroke-dasharray. Für meine Zwecke sei gesagt, dass stroke-dasharray im Grunde die Länge des Pfades festlegt, den ich nicht anzeigen möchte. Nun ist mein Pfad sicherlich nicht 1000 Pixel lang. Es ist eine Übertreibung, aber eine Übertreibung, die sicherstellt, dass kein Teil meines Pfades vorzeitig angezeigt wird. Der Pfad wird im folgenden Transformationsschritt vollständig gezeichnet.
{ id:["right-upper-branch", 600], element: ".right-upper-branch", drawPath:100 },Wenn ich drawPath wieder auf 0 setze, werden stroke-dasharray und stroke-dashoffset entsprechend angepasst. Das Letzte, was ich an dieser Zeile hervorheben möchte, ist die id. Es ist ein Array anstelle eines Strings. Der erste Wert im Array ist der Name der id. Der zweite Wert ist immer eine Ganzzahl, die ein Timeout darstellt. Wenn ich dieses Transformations-Objekt nur in der Animation verwenden würde, würde ich nur 600 ms nach dem mouseover-Ereignis einen gezeichneten Pfad sehen.
Weitere Beispiele und zusätzliche Dokumentation finden Sie auf meiner Demo-Seite.
Fazit
Vielleicht sind viele von Ihnen noch unschlüssig, ob der Wechsel Ihres Icon-Systems zu etwas Neuem eine gute Sache ist. Es gibt Vor- und Nachteile bei den verschiedenen derzeit verfügbaren Icon-Systemen. Ich habe versucht, eine einfache Möglichkeit für Sie zu schaffen, den Umstieg auf SVG-Icons zu vollziehen. Ich hoffe, Sie finden es nützlich.
Ich sehe keine Animation ;_;
Chrome 58 64bit