Wie implementiert man eine benutzerdefinierte Pfadanimation in Canvas?

Dieses Mal zeige ich Ihnen, wie Sie eine benutzerdefinierte Pfad-Animation in Canvas implementieren? , was sind die Vorsichtsmaßnahmen für die Implementierung einer benutzerdefinierten Pfadanimation in Canvas? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 sein und sogar Bezier-Kurven umfassen.

Wie können wir diesen Animationseffekt auf der 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. Dazu können wir beispielsweise direkt die Pfaddefinitionsregeln von SVG verwenden Pfad (welches Ende Sie können es selbst ausprobieren, und ich werde es hier nicht zeigen). Dann müssen wir den definierten Pfad in ein neu generiertes Pfadelement importieren (wir verwenden nur die SVG-API, also tun wir es nicht). (muss in die Seite eingefügt werden)

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

Die beiden von SVGPathElement bereitgestellten APIs sind sehr wichtig. Man kann sagen, dass es der zentrale Ort für die Implementierung von Pfadanimationen ist (benutzerdefinierte Pfadanimationen werden im Allgemeinen in implementiert). SVGPathElement MDN

getTotalLength-Methode kann die Gesamtlänge von SVGPathElement abrufen

getPointAtLength-Methode, die eine Länge x übergibt Endpunktkoordinaten der Länge x vom Startpunkt von SVGPathElement .

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 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.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So implementieren Sie die HTML-Tabellen-Maus-Drag-Sortierung

Zu welcher Datei gehört HTML? öffnen

Html So erzielen Sie den Berichtseffekt der dynamischen Anzeige von Farbblöcken

Das obige ist der detaillierte Inhalt vonWie implementiert man eine benutzerdefinierte Pfadanimation in Canvas?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!