Comment implémenter une animation de chemin personnalisée dans Canvas ?

Cette fois, je vais vous montrer comment implémenter un chemin personnalisé animation dans Canvas ? , quelles sont les précautions pour implémenter une animation de chemin personnalisé dans Canvas Ce qui suit est un cas pratique, jetons-y un œil.

Dans un projet récent, l'auteur doit formuler une nouvelle exigence : implémenter une animation de chemin personnalisée dans le canevas. Le chemin dit personnalisé ici comprend non seulement une ligne droite, mais peut être une combinaison de mouvements de plusieurs lignes droites, et inclut même des courbes de Bézier

Alors, comment pouvons-nous obtenir cet effet d'animation dans le canevas ? En fait, c'est très simple. SVG est très efficace pour traiter les chemins. Par conséquent, pour implémenter une animation de chemin personnalisée dans Canvas, nous devons utiliser la puissance de SVG.

Créer un chemin

Avant de réaliser une animation, vous devez d'abord obtenir le chemin de l'animation. Pour cela, nous pouvons directement utiliser les règles de définition de chemin de svg. Par exemple, nous définissons un chemin plus complexe. path (à quelle fin vous pouvez l'essayer par vous-même, et je ne le montrerai pas ici). Ensuite, nous devons importer le chemin défini dans un élément de chemin nouvellement généré (nous utilisons simplement l'API svg, donc nous ne le faisons pas). (vous devez l'insérer dans la page)

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

Les deux API fournies par SVGPathElement sont très critiques. On peut dire que c'est l'endroit central pour implémenter l'animation de chemin (l'animation de chemin personnalisée est généralement implémentée dans. svg via ces deux API. Pour résoudre) Veuillez cliquer ici pour plus de détails : La méthode SVGPathElement MDN

getTotalLength peut obtenir la longueur totale de la méthode SVGPathElement

getPointAtLength, en passant une longueur x, renverra la coordonnée du point final de la longueur x à partir du point de départ de SVGPathElement .

Utilisez ces deux API pour mettre à jour en permanence les coordonnées des graphiques dessinés dans le canevas via une boucle pour réaliser une animation de chemin :

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

Enfin, nous l'encapsulons, vous pouvez implémenter un simple fonction pour implémenter une animation personnalisée dans le canevas :

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

L'idée d'implémentation est à peu près la même que celle décrite ci-dessus, mais ce n'est pas le résultat final. Lorsque nous décidons de créer une animation de chemin personnalisée dans Canvas, nous devons non seulement réfléchir à la manière de la mettre en œuvre, mais également envisager l'optimisation des performances Par exemple, dans cette idée de mise en œuvre, pouvons-nous réduire le nombre d'éléments inutiles. des rendus ? Comment contrôler la fréquence d’images pour obtenir un résultat optimal ? etc.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment implémenter le tri par glisser-déplacer de la souris dans un tableau HTML

À quel fichier appartient le HTML ? ouvrir

Html Comment obtenir l'effet de rapport d'affichage dynamique des blocs de couleur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!