Share
Das vorherige Tutorial der Serie hat Ihnen gezeigt, wie Sie verschiedene CSS-Eigenschaften eines Elements mithilfe von KUTE.js animieren können. Mit der Core Engine können Sie jedoch keine Eigenschaften animieren, die für SVG-Elemente spezifisch sind. Ebenso können Sie das SVG-Morphing verschiedener Pfadformen oder das Zeichnen verschiedener SVG-Elemente nicht mit Strichen animieren. Sie müssen das SVG-Plugin KUTE.js verwenden, um eine dieser Aufgaben auszuführen.
Bevor Sie beginnen, sollten Sie bedenken, dass Sie sowohl die KUTE.js-Core-Engine als auch das SVG-Plugin hinzufügen müssen, damit die Beispiele in diesem Lernprogramm funktionieren.
Das Verwandeln einer SVG-Form in eine andere ist eine sehr häufige Funktion, auf die Sie stoßen werden. Das KUTE.js-SVG-Plugin bietet uns alles, was wir benötigen, um mühelos eigene Morphing-Animationen zu erstellen.
Es gibt drei Möglichkeiten, SVG-Formen mithilfe dieser Bibliothek zu transformieren:
Accentsconagua
von zu() Methode, um sowohl den ursprünglichen als auch den endgültigen SVG-Pfad für Ihr Element anzugeben. zu() Methode und vermeiden Sie die Angabe des ursprünglichen Pfads. In diesem Fall wird der Startwert für das Morphing auf der Grundlage des Werts von bestimmt d Attribut des ausgewählten Elements, das Sie ändern möchten. KUTE.fromTo ('# shape-a', Pfad: '# Shape-a'), Pfad: '# Shape-b'); KUTE.to ('# shape-a', Pfad: '# shape-b'); KUTE.fromTo ('# shape-a', Pfad: '# Shape-a', Pfad: 'Der Pfad von # Shape-b als gültiger String.'); KUTE.to ('# shape-a', path: 'Der Pfad von # shape-b als gültiger String.');Während der Initialisierung tastet die Bibliothek einige Punkte basierend auf den von uns angegebenen Pfaden ab. Diese Punkte werden dann in zwei verschiedenen Arrays gespeichert. Schließlich werden diese Arrays für die Interpolation verwendet. Es gibt eine Reihe von Optionen, die Sie konfigurieren können, um das Verhalten beim Verändern verschiedener Pfade zu steuern.
morphPrecisionWie Sie vielleicht schon vermutet haben, können Sie mit dieser Option die Genauigkeit oder Genauigkeit des Morphings festlegen. Sie wird als Zahl angegeben und ein niedrigerer Wert bedeutet höhere Genauigkeit. Beachten Sie, dass eine höhere Genauigkeit zu einer höheren Genauigkeit führt, jedoch auch die Leistung beeinträchtigt. Diese Option gilt nicht, wenn Sie mit polygonalen Formen oder Pfaden arbeiten, bei denen das Attribut d nur besteht h, l, und v. In solchen Fällen werden die ursprünglichen Polygonpfade verwendet, anstatt neue zu probieren.reverseFirstPath: Sie können den Wert dieser Option auf einstellen wahr um den Zeichenpfad für Ihre erste Form umzukehren. Der Standardwert ist falsch.reverseSecondPath: Sie können den Wert dieser Option auf einstellen wahr um den Zeichenpfad für die zweite Form umzukehren. Der Standardwert ist ebenfalls falsch.MorphIndex: Manchmal müssen die Punkte auf einem Pfad beim Morphing eine große Entfernung zurücklegen. Sie können dieses Verhalten mithilfe von steuern MorphIndex Parameter. Wenn dieser Parameter festgelegt ist, können Sie den endgültigen Pfad so drehen, dass alle Punkte die geringste Entfernung zurücklegen.Verwenden Sie das bisher Gelernte, um ein Akkusymbol in ein Lesezeichensymbol zu verwandeln. Sie sollten beachten, dass ich Kleinbuchstaben verwendet habe l um den Pfad relativ anzugeben. Dies ist das erforderliche Markup:
Das folgende JavaScript erstellt das Tween-Objekt und startet die Animation beim Klicken auf die Schaltfläche:
var morphA = KUTE.to ('# battery-a', Pfad: '# bookmark-a', Dauer: 5000); startButton.addEventListener ("click", function () morphA.start ();, false);Hier ist eine Demo, die den obigen Code in Aktion zeigt. Ich habe auch ein zusätzliches Element hinzugefügt, in dem die Morph-Animation festgelegt wird reverseFirstPath zu wahr. Auf diese Weise können Sie die Auswirkungen verschiedener Konfigurationsoptionen auf das Morphing verstehen. Die Animationsdauer wurde auf 5 Sekunden eingestellt, sodass Sie beide Animationen genau beobachten und die Unterschiede erkennen können.
Im vorherigen Beispiel hatte der Hauptpfad keine Unterpfade. Dies machte das Morphing sehr einfach. Dies kann jedoch nicht immer der Fall sein.
Fügen Sie unserem Lesezeichen einen zusätzlichen Unterpfad sowie das Akkusymbol hinzu. Wenn Sie die Symbole jetzt umwandeln, werden Sie feststellen, dass nur der erste Unterpfad animiert wird. Der zweite Teilpfad verschwindet nur am Anfang der Animation und wird am Ende wieder angezeigt. Die einzige Möglichkeit, alle Unterpfade in solchen Fällen zu animieren, besteht darin, die Unterpfade in einzelne Pfade umzuwandeln. Hier ist ein Beispiel:
Ein weiterer beliebter Animationseffekt im Zusammenhang mit SVG besteht darin, aus dem Nichts zu beginnen und dann eine vordefinierte Form mit SVG-Strichen zu zeichnen. Damit können Sie das Zeichnen von Logos oder anderen Objekten animieren. In diesem Abschnitt erfahren Sie, wie Sie mit KUTE.js eine Animation für das Fahrradsymbol "Font Awesome" erstellen.
Es gibt drei Möglichkeiten, SVG-Striche in KUTE.js zu animieren. Sie können von 0% bis 100% animieren, indem Sie die Option einstellen von zu Werte als 0% 0% und 0% 100%. Sie können auch einen Teil der SVG-Form zeichnen, indem Sie die Werte auf etwas festlegen 0% 5% und 95% 100%. Zum Schluss können Sie den Endwert auf setzen 0% 0% um einen Löscheffekt anstelle eines Zeichnungseffekts zu erzeugen.
Hier ist der JavaScript-Code, mit dem ich unser Fahrrad animiert habe:
var wholeAnimation = KUTE.fromTo ("#icon", draw: "0% 0%", draw: "0% 100%", duration: 10000); var partialAnimation = KUTE.fromTo ("#icon", draw: "0% 5%", draw: "95% 100%", duration: 10000); var eraseAnimation = KUTE.fromTo ("#icon", draw: "0% 100%", draw: "0% 0%", duration: 5000);Wie Sie im folgenden Beispiel sehen können, müssen Sie sich nicht um mehrere Unterpfade innerhalb eines Pfads kümmern. KUTE.js animiert alle diese Unterpfade einzeln ohne Probleme. Die Animationsdauer wird verwendet, um die Zeit für die Animation des längsten Pfads zu bestimmen. Die Hubdauer für den Rest der Teilpfade wird dann basierend auf ihrer Länge bestimmt.
Wir haben bereits gelernt, wie man CSS-Transformationswerte im zweiten Tutorial der Serie animiert. Mit dem SVG-Plugin KUTE.js können Sie auch das svgTransform Attribut zum Drehen, Übersetzen, Skalieren oder Neigen verschiedener SVG-Elemente auf einer Webseite.
Das drehen Das Attribut akzeptiert einen einzelnen Wert, der den Drehwinkel bestimmt. Standardmäßig erfolgt die Drehung um den Mittelpunkt des Elements. Sie können jedoch einen neuen Drehpunkt angeben transformOrigin Attribut.
Das Übersetzen Attribut akzeptiert die Werte im Format übersetzen: [x, y] oder übersetzen: x. Bei Angabe eines einzelnen Werts ist der Wert von y wird als null angenommen.
Beim Verzerren von Elementen müssen Sie verwenden skewX und schief. Es gibt keine Unterstützung für Schrägstellung [x, y] in SVG. Ebenso die Rahmen Das Attribut akzeptiert auch nur einen Wert. Der gleiche Wert wird zum Skalieren der Elemente in x- und y-Richtung verwendet.
Hier ist ein Codeausschnitt, der alle diese Transformationen auf ein Rechteck und einen Kreis anwendet.
var rotation = KUTE.allTo ("rect, circle", svgTransform: rotation: 360, repeat: 1, yoyo: true); var scaling = KUTE.allTo ("rect, circle", svgTransform: scale: 1.5, repeat: 1, yoyo: true); var translation = KUTE.allTo ("rect, circle", svgTransform: translate: [100, -50], repeat: 1, yoyo: true); var skewing = KUTE.allTo ("rect, circle", svgTransform: skewX: 25, repeat: 1, yoyo: true);Ich habe das eingestellt Yoyo Parameter zu wahr Nach dem Abspielen der Animation werden die Transformationseigenschaften auf ihren ursprünglichen Wert gesetzt. Auf diese Weise können wir die Animationen immer wieder abspielen, indem Sie auf die Schaltflächen klicken.
Wenn Sie die Taste drücken Drehen Wenn Sie den Button in der Demo drücken, werden Sie feststellen, dass dies keinen Einfluss auf den Kreis hat. Um die Drehung des Kreises zu beobachten, müssen Sie eine Schrägtransformation anwenden, um die Form zu ändern, und klicken Sie dann sofort auf Drehen.
Wir haben dieses Tutorial mit den Grundlagen der SVG-Morphing- und Strichanimationen begonnen. Sie haben gelernt, wie Sie komplexe Pfade mit Unterpfaden richtig verwandeln können und wie Sie einen Löschstrich-Effekt anstelle eines Zeichnungspfads erzeugen können, indem Sie die richtigen Werte für den auswählen zeichnen Attribut. Danach besprachen wir, wie wir das nutzen können svgTransform Attribut, um verschiedene Transformationen zu animieren.
In verschiedenen Tutorials haben wir gesehen, wie mächtig JavaScript geworden ist. Es ist nicht ohne Lernkurven, und es gibt viele Frameworks und Bibliotheken, um Sie zu beschäftigen. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, informieren Sie sich über das Angebot von Envato Market.
Das Tutorial sollte Sie mit allen Funktionen des KUTE.js SVG-Plugins vertraut machen und Ihnen den schnellen Start erleichtern. Sie können mehr über das SVG-Plugin erfahren, indem Sie die Dokumentation lesen.
