H5 implementiert benutzerdefinierte Pfadanimationen in Canvas

Dieses Mal werde ich Ihnen H5 zur Implementierung benutzerdefinierter Pfadanimationen in Canvas vorstellen. Was sind die Vorsichtsmaßnahmen für H5 zur Implementierung benutzerdefinierter Pfadanimationen in Canvas? Fall, werfen wir einen Blick darauf.

In einem aktuellen Projekt muss der Autor eine neue Anforderung stellen: benutzerdefinierte Pfadanimationen in Canvas implementieren. 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 SVG-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 von SVGPathElement bereitgestellten APIs sind von entscheidender Bedeutung Es sei darauf hingewiesen, dass dies der Schlüssel zur Realisierung der Pfadanimation ist (die Implementierung einer benutzerdefinierten Pfadanimation in SVG wird im Allgemeinen über diese beiden APIs gelöst). Klicken Sie für weitere Informationen auf: SVGPathElement MDN

getTotalLength-Methode kann abgerufen werden Gesamtlänge von SVGPathElement

Die 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 = '#f0f';
   context.fill();
   context.closePath();
}

Schließlich kapseln wir es. Sie können eine einfache Implementierung durchführen

Funktion zum Implementieren einer benutzerdefinierten Animation in Canvas:

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

Die Implementierungsidee ist ungefähr wie oben beschrieben, aber dies ist 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 Elemente reduzieren? Renderings? 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.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Ausführliche Erklärung von Drag & Drop in H5

Verwenden von Canvas, um den Sperreffekt in Videos zu erzielen

Das obige ist der detaillierte Inhalt vonH5 implementiert benutzerdefinierte Pfadanimationen in Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!