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 = '#f0f'; context.fill(); context.closePath(); }
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);
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!