キャンバスでカスタムパスアニメーションの例を実現する方法

最近のプロジェクトでは、新しい需要を作成する必要があります。キャンバスでカスタムパスアニメーションを実現します。ここでのカスタムパスは、直線、複数の直線モーションの組み合わせを含むだけでなく、このアニメーションは次のようなものです。

それでは、キャンバスでこのアニメーション効果をどのように達成できますか？実際、SVGはパスの処理に非常に適しているため、キャンバスでSVGのパワーを使用する必要があります。

アニメーションを作成する前に、この点でアニメーションのパスを取得する必要があります。 SVG APIを使用するだけで、ページに挿入する必要はありません）

 const path = 'm0,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 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.9088124812481248124812481248124812481248124812481248124812481248124812481248124812481248124812481248124812481248124812481248124812481248124812481248124812481248124812481248124812488 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z '; pathelement.setattributens（null、 'd'、path）;

svgpathelementによって提供される2つのAPIは、パスアニメーションを実現するための核となる場所であると言えます（SVGのカスタムパスアニメーションは一般にこれら2つのAPIを通じて解決されます）。

getTotAllengthメソッドは、svgpathelementの全長を取得できます

getpointtlengthメソッドは長さxに渡され、svgpathelementの開始点の長さのエンド座標を返します。

これらの2つのAPIを使用して、サイクルを通じてキャンバスに描かれたグラフィック座標を継続的に更新すると、パスアニメーションを実現できます。

 const length = gettotallengs（）; 0。 move（x、y）; // canvas 、Canvas.head.begin.pign.pi*2、 closepath（）;}

最後に、それをカプセル化して、キャンバスでカスタムアニメーションを実現する単純な関数を実現します。

 function custmepath（func）{const forms.createelmentns（ 'http://www.w3.org/2000/svg'、 'd'）; const duration = 1000;ステップ）X） 'M0、0 C8,33.9961 25.90861,16 48,16 C70.09139,16 88,33.93.9139 105.90862 128,92 C150.09139,72 160,56 C160,48 248,48,48 248,48,48 248,24148,24148,24148,2448,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z '; {Context.ClearRect（0、0、canvas.height）;

アイデアの実装は上記のようにほぼ説明していますが、これは究極の結果ではありません。 Canvasでカスタムパスアニメーションを作成する場合、たとえば、パフォーマンスの最適化を検討する必要があります。フレームレートを最適に制御する方法は？等

彼らはこの記事の議論の範囲にありませんが、彼らは考える価値があるはずです。

上記は、この記事のすべての内容です。