Canvas にカスタム パス アニメーションを実装するにはどうすればよいですか?

今回はCanvasにカスタムパスアニメーションを実装する方法を紹介します。 、Canvas でカスタム パス アニメーションを実装するための 注意事項 は何ですか? ここで実際のケースを見てみましょう。

最近のプロジェクトでは、作成者は新しい要件を作成する必要があります。それは、キャンバスにカスタム パス アニメーションを実装することです。ここでのいわゆるカスタム パスには、直線が含まれるだけでなく、複数の直線の動きの組み合わせ、さらにはベジェ曲線も含まれる場合があります

では、キャンバスでこのアニメーション効果を実現するにはどうすればよいでしょうか?実際、SVG はパスの処理に非常に優れているため、キャンバスにカスタム パス アニメーションを実装するには、SVG の機能を利用する必要があります。

パスの作成

アニメーションを作成する前に、まずアニメーションのパスを取得する必要があります。このために、たとえば、より複雑なパスを定義しました。どのように見えるか)、ここには示されていません)、次に、定義されたパスを新しく生成されたパス要素にインポートする必要があります (svg API を使用しているだけなので、ページに挿入する必要はありません)

const path = 'M0,0 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,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';
 
const pathElement = document.createElementNS('http://www.w3.org/2000/svg',"path");
pathElement.setAttributeNS(null, 'd', path);
getTotalLength与getPointAtLength

SVGPathElement によって提供されます。これら 2 つの API は非常に重要であり、パス アニメーションを実装するための中心的な場所であると言えます (SVG でのカスタム パス アニメーションの実装は、通常、これら 2 つの API を通じて解決されます)。詳細については、SVGPathElement MDN をクリックしてください。

getTotalLengthメソッドは、SVGPathElementの合計長を取得できます。

getPointAtLengthメソッドは、長さxを渡すと、SVGPathElementの開始点から長さxの終了座標を返します。

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

const length = pathElement.getTotalLength();
const duration = 1000; // 动画总时长
const interval = length / duration;
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
let time = 0, step = 0;
 
const timer = setInterval(function() {
  if (time <= duration) {
    const x = parseInt(pathElement.getPointAtLength(step).x);
    const y = parseInt(pathElement.getPointAtLength(step).y);
    move(x, y);  // 更新canvas所绘制图形的坐标
    step++;
  } else {
    clearInterval(timer)
  }
}, interval);
 
function move(x, y) {
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.beginPath();
   context.arc(x, y, 25, 0, Math.PI*2, true);
   context.fillStyle = &#39;#f0f&#39;;
   context.fill();
   context.closePath();
}

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

function customizePath(path, func) {
    const pathElement = document.createElementNS('http://www.w3.org/2000/svg',"path");
    pathElement.setAttributeNS(null, 'd', path);
      const length = pathElement.getTotalLength();
    const duration = 1000;
    const interval = length / duration;
    let time = 0, step = 0;
   
      const timer = setInterval(function() {
        if (time <= duration) {
              const x = parseInt(pathElement.getPointAtLength(step).x);
              const y = parseInt(pathElement.getPointAtLength(step).y);
              func(x, y);
              step++;
        } else {
              clearInterval(timer)
        }
     }, interval);
}

rreee

実装アイデアは上記の通りですが、これが最終結果ではありません。キャンバスでカスタム パス アニメーションを作成することにした場合、その実装方法を検討するだけでなく、パフォーマンスの最適化 も考慮する必要があります。たとえば、この実装アイデアでは、不必要なレンダリングの数を減らすことができるでしょうか。最適なパフォーマンスを達成するためにフレーム レートを制御するにはどうすればよいですか?等

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

HTML でテーブルのマウスドラッグによる並べ替えを実装する方法

HTML はどのファイルに属しますか? HTML ファイルを開くには?

以上がCanvas にカスタム パス アニメーションを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。