Ausführliche Erläuterung der Implementierung einer benutzerdefinierten Pfadanimation in HTML5 in Canvas

In diesem Artikel wird hauptsächlich beschrieben, wie benutzerdefinierte Pfadanimationsbeispiele in HTML5 in Canvas implementiert werden. Interessierte Freunde können darauf verweisen.

Was ich in einem aktuellen Projekt tun muss: Implementierung einer benutzerdefinierten Pfadanimation in Canvas. Der sogenannte benutzerdefinierte Pfad umfasst hier nicht nur eine gerade Linie, sondern kann eine Kombination aus Bewegungen mehrerer gerader Linien oder sogar eine Bezier-Kurve sein. Daher könnte die Animation wie folgt aussehen:

Wie können wir diesen Animationseffekt auf Leinwand erzielen? Tatsächlich ist es sehr einfach, Pfade zu verarbeiten. Um benutzerdefinierte Pfadanimationen in Canvas zu implementieren, müssen wir daher die Leistungsfähigkeit von SVG nutzen.

Pfad erstellen

Bevor Sie eine Animation erstellen, müssen Sie zunächst den Pfad der Animation ermitteln. Hierzu können wir beispielsweise direkt die Pfaddefinitionsregel verwenden , wir definieren einen relativ komplexen Pfad (Sie können selbst ausprobieren, wie er aussieht, ich werde ihn hier nicht zeigen), dann müssen wir den definierten Pfad in ein neu generiertes Pfadelement importieren (wir verwenden also einfach die SVG-API wir müssen es nicht in die Seite einfügen)

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 und getPointAtLength

Die beiden bereitgestellten APIs von SVGPathElement sind sehr Der Schlüssel, man kann sagen, dass es der Kernpunkt für die Implementierung von Pfadanimationen ist (die Implementierung benutzerdefinierter Pfadanimationen in SVG wird im Allgemeinen über diese beiden APIs gelöst). Für Details klicken Sie bitte auf: SVGPathElement MDN

Die getTotalLength-Methode kann SVGPathElement erhalten. Die Gesamtlänge der

getPointAtLength-Methode gibt durch Übergabe einer Länge x die Endkoordinate der Länge x vom Startpunkt des SVGPathElement zurück.

Verwenden Sie diese beiden APIs, um die Koordinaten der auf der Leinwand gezeichneten Grafiken durch eine Schleife kontinuierlich zu aktualisieren, um eine Pfadanimation zu erreichen:

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();
}

Schließlich Wir kapseln es, um eine einfache Funktion zu implementieren, die benutzerdefinierte Animationen im Canvas implementiert:

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);
}

const path = &#39;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&#39;;
const canvas = document.querySelector(&#39;canvas&#39;);
const context = canvas.getContext(&#39;2d&#39;);
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();
}
customizePath(path, move);

Die Implementierungsidee ist ungefähr wie oben beschrieben. Dies ist jedoch nicht das Endergebnis. Wenn wir uns entscheiden, eine benutzerdefinierte Pfadanimation in Canvas zu erstellen, müssen wir nicht nur darüber nachdenken, wie wir sie implementieren, sondern auch über die Leistungsoptimierung nachdenken. Können wir beispielsweise bei dieser Implementierungsidee die Anzahl unnötiger Renderings reduzieren? Wie steuere ich die Bildrate, um das Optimum zu erreichen? usw.

Obwohl sie nicht in den Rahmen dieses Artikels fallen, sollten sie unserer Überlegung wert sein.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Implementierung einer benutzerdefinierten Pfadanimation in HTML5 in Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!