H5 implémente une animation de chemin personnalisée dans Canvas

Cette fois, je vais vous présenter H5 pour implémenter une animation de chemin personnalisé dans Canvas animation Quelles sont les précautions pour H5 pour implémenter une animation de chemin personnalisé dans Canvas Ce qui suit est un exemple pratique. cas, jetons un oeil.

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é 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 essentielles. On peut dire que c'est la clé pour réaliser l'animation de chemin. La partie la plus essentielle (l'implémentation de l'animation de chemin personnalisée dans SVG est généralement résolue via ces deux API) pour plus de détails, veuillez cliquer sur : La méthode SVGPathElement MDN

getTotalLength peut obtenir le longueur totale de SVGPathElement

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 = '#f0f';
   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.

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

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

Lecture recommandée :

Explication détaillée du glisser-déposer dans H5

Utiliser le canevas pour obtenir l'effet de barrage dans les vidéos

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!