Explication détaillée de l'implémentation de l'animation de chemin personnalisé en HTML5 dans Canvas

Cet article présente principalement comment implémenter des exemples d'animation de chemin personnalisé en HTML5 dans Canvas. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Ce que je dois faire dans un projet récent Une nouvelle exigence : implémentation d'une animation de chemin personnalisée dans Canvas. Le chemin dit personnalisé comprend non seulement une ligne droite, mais peut être une combinaison de mouvements de plusieurs lignes droites, ou même une courbe de Bézier. Par conséquent, l'animation peut ressembler à ce qui suit :

Alors, comment pouvons-nous obtenir cet effet d'animation dans Canvas ? 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 la règle de définition de chemin svg par exemple. , nous définissons un chemin relativement complexe (vous pouvez essayer vous-même à quoi il ressemble, je ne le montrerai pas ici), puis 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 n'avons pas besoin de 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 et getPointAtLength

Les deux API fournies par SVGPathElement sont très La clé, on peut dire que c'est l'endroit central pour implémenter l'animation de chemin (l'implémentation de l'animation de chemin personnalisée en svg est généralement résolue via ces deux API) pour plus de détails, veuillez cliquer sur : SVGPathElement MDN

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

getPointAtLength, en passant une longueur x, renverra la coordonnée de fin 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 pour implémenter une fonction simple qui implémente 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 = &#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);

L'idée d'implémentation est à peu près 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 de rendus inutiles ? Comment contrôler la fréquence d’images pour obtenir un résultat optimal ? etc.

Bien qu'ils n'entrent pas dans le cadre de cet article, ils méritent notre considération.

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!