Wenn Sie ein Objekt im Canvas-Bereich (und nicht nur) animieren möchten, müssen Sie es entlang eines gewünschten Pfads verschieben, möglicherweise sogar mehrerer, die zufällig oder nacheinander ausgewählt werden können. Dies kann mithilfe von SVG-Pfaden erfolgen. Beginnen wir mit einem einfachen, aber grünen Quadrat entlang des Pfades.
Dazu erstellen oder leihen wir svg mit einem oder mehreren Pfaden.
Erstellen Sie ein Element mit der Funktion
document.createElementNS . MDN sagt uns, dass die Methode in allen modernen Browsern grundlegende Unterstützung bietet. Fügen Sie dann den Pfad zum erstellten Element hinzu.
let path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute('d', 'M148.185,118.975c0,0-92.592,39.507-80.247,79.013,s79.012,143.21,129.629,124.691s64.198-113.856,120.988-100.755s118.518,30.384,116.049,109.397s-82.715,118.519-97.53,201.235,s-92.593,139.505,0,159.259');
Hier wird in den Attributen der erste auffällige Pfad aus einer SVG-Datei eingeführt, die Copy-Paste-Methode. Dies ist natürlich nicht der einzige und darüber hinaus nicht der bequemste Weg, aber klar genug für die Verwendung im ersten Beispiel.
Jetzt in der Schleife erhalten wir die Koordinaten der Wegpunkte und weisen sie unserem Objekt zu.
Hierfür reichen zwei
SVGGeometryElement- Methoden aus:
path.getTotalLength()
Gibt den berechneten Wert der Gesamtpfadlänge und zurück
path.getPointAtLength(index)
Es nimmt ein float-Argument an und gibt ein SVGPoint-Objekt zurück, dessen x- und y-Koordinaten für uns von Interesse sind. Wenn die Argumentwerte kleiner als Null oder größer als die Pfadlänge sind, werden der erste bzw. der letzte Punkt als Ergebnis zurückgegeben.
Beim Aktualisieren des Rahmens erhalten wir den Punkt und verwenden seine Koordinaten für die Bewegung.
→ Vollständiger Beispielcode auf dem
CodepenSie können jedoch eine interessantere Option verwenden, um das Objekt entlang der Koordinaten mehrerer Pfade zu verschieben, z. B.:
Nehmen Sie wieder eine SVG-Datei mit mehreren Pfaden. Die im Beispiel verwendete wurde im Inscape-Editor erstellt. Jetzt müssen Sie diese Pfade abrufen. Dies ist möglich, indem Sie das Objekt analysieren. Wenn svg als Textdatei empfangen wurde, können Sie sie bei der nächsten Funktion mit regulären Ausdrücken als Zeichenfolgen abrufen.
extractPathsfromSvg: function(svg){ let results = svg.match(/<path\b([\s\S]*?)><\/path>/g); let paths = []; let len = results.length; for(let i = 0; i < len; i++){ let str = results[i]; let data = str.match(/[^\w]d="([\s\S]*?)"/); paths.push(data[1]); } return paths; }
Nachdem Sie ein Array von Pfaden erstellt haben, müssen Sie diese nacheinander extrahieren und auf dieselbe Weise verarbeiten wie den einzigen Pfad für die Bewegung des Quadrats. interessante Effekte bekommen.
Siehe den vollständigen Code unten.
Um mehr Kontrolle beim Verschieben eines Objekts entlang der Koordinaten des Pfads zu erhalten, können Sie Zwillinge verwenden. Für Testfälle habe ich die erste GreenSock-Bibliothek genommen, die mir aufgefallen ist, aber es hätte sich auch als eine andere herausstellen können.
Wenn sich das Quadrat im ersten Fall entlang des einzigen Pfades bewegt, erstellen Sie einen Zwischenobjekt-Helfer und geben Sie ihn weiter, um das Tween zu erstellen.
var helper = {progress: 0} helper.update = function(value){ point = path.getPointAtLength(totalLength * helper.progress); x = point.x; y = point.y; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, x, y ); } var tw = new TweenLite.to(helper, 5, {progress: 0, }); tw.eventCallback("onUpdate", helper.update);
Sie können die Bewegung des Quadrats entlang des Pfads mithilfe von Tween sehen, im ersten Beispiel auf Codepen, indem Sie Tween verwenden aktivieren.
Wenn wir uns auf mehreren Wegen bewegen, gehen wir wie folgt vor. Erstellen Sie nach wie vor ein Hilfsobjekt mit der Eigenschaft progress. Wir berechnen die Gesamtlänge aller Pfade und weisen sie handler.progress zu. Erstellen wir eine durchquerte Variable, in der bereits abgedeckte Pfade zusammengefasst werden.
Um einen Punkt auf dem aktuellen Pfad zu erhalten, subtrahieren Sie von helper.progress, das sich im Tween ändert. Der bereits zurückgelegte Pfad wird durchlaufen. Wir verwenden die Koordinaten des Punktes wie gewohnt.
var traversed = 0; helper.progress = totalLenghtAllPath; helper.update = function() { var localPoint = helper.progress - traversed; if(localPoint > curPath.getTotalLength()){ traversed += curPath.getTotalLength(); curPath = paths[next()]; if(curPath){ return false; } localPoint = helper.progress - traversed; } } var tw = TweenLite.to( helper, 25, {progress: totalLenghtAllPath, ease: Power2.easeOut } ); tw.eventCallback("onUpdate", helper.update);
Der Code ist vereinfacht, der vollständige Code ist hier: