So erreichen Sie ein benutzerdefiniertes Pfadanimationsbeispiel in Leinwand

Im jüngsten Projekt muss ich eine neue Nachfrage stellen: Custom Path Animation in Leinwand realisieren. Der SO -genannte benutzerdefinierte Pfad enthält nicht nur eine geraden Linie, möglicherweise mehrere Bewegungskombinationen mit gerader Linie, und enthält sogar die Bessel -Kurve.

Wie können wir diesen Animationseffekt in Leinwand erzielen? Tatsächlich ist es sehr einfach.

Vor der Animation müssen wir zuerst den Pfad der Animation erhalten. Verwenden Sie einfach die SVG -API, damit sie sie nicht in die Seite einfügen muss.

 Const Path = 'M0,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861 128,92 C150.09139 160,72 160,56 C1 60,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z '; Pathelement.setattributens (null, 'D', Pfad);

Die beiden APIs, die von SVGpatheLement bereitgestellt werden, sind entscheidend.

Die Getotalleng -Methode kann die Gesamtlänge der SVGPatpatheLement erhalten

Die GetPointTLength -Methode wird in eine Länge x übergeben, wodurch die Endkoordinaten der Länge des Startpunkts des SVGPatpatheLements zurückgegeben werden.

Verwenden Sie diese beiden APIs, um die in Canvas gezogenen Grafikkoordinaten kontinuierlich zu aktualisieren, und die Pfadanimation kann erreicht werden:

 const Länge = Pathelement. 0; Move (x, y); // 更新 Canvas 所绘制图形的坐标 Schritt ++; Canvas.head) conepath ();}

Schließlich umfassen wir es, um eine einfache Funktion zu erkennen, die benutzerdefinierte Animation in Leinwand realisiert:

 Funktion CustMepath (Pfad, func) {const forms = document.createelementns ('http://www.w3.org/2000/svg', Pfad); const duration = 1000; Schritt) .x); 'M0, 0 C8,33.9961 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90862 128,92 C150.09139,72 160,56 C160,40 148 24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z '; {context.clearRect (0, 0, canvas.width, canvas.height);

Die Implementierung von Ideen ist ungefähr wie oben beschrieben, aber dies ist nicht das ultimative Ergebnis. Wenn wir uns für eine benutzerdefinierte Pfadanimation in Canvas entscheiden, müssen wir nicht nur überlegen, wie wir sie erreichen können, sondern auch die Leistungsoptimierung in Betracht ziehen können. Wie steuern Sie die Bildrate zum Optimal? usw.

Obwohl sie sich nicht im Rahmen der Diskussion dieses Artikels befinden, sollten sie es wert sein, darüber nachzudenken.

Das oben genannte ist der Inhalt dieses Artikels.