Wie implementiert man eine benutzerdefinierte Pfadanimation in Canvas?

php中世界最好的语言
Freigeben: 2018-01-19 09:21:14
Original
1899 Leute haben es durchsucht

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
Nach dem Login kopieren

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();
}
Nach dem Login kopieren

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(&#39;http://www.w3.org/2000/svg&#39;,"path");
    pathElement.setAttributeNS(null, &#39;d&#39;, 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);
}
Nach dem Login kopieren
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);
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!