Comment obtenir un exemple d'animation de chemin personnalisé dans Canvas

Dans le projet récent, j'ai besoin de faire une nouvelle demande: réaliser une animation de chemin personnalisée dans Canvas. Le chemin personnalisé So-Salled comprend non seulement une ligne droite, peut-être des combinaisons de mouvement en ligne droite, et même l'inclusion de la courbe de Bessel.

Alors, comment pouvons-nous réaliser cet effet d'animation dans Canvas? En fait, c'est très simple.

Avant de faire de l'animation, nous devons d'abord obtenir le chemin de l'animation. Utilisez simplement l'API SVG, il n'a donc pas besoin de l'insérer sur la page)

 Const Path = 'M0,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861 128,92 C150.09139 160,72 160,56 C1 60,40 148,24 128,724260,56 C1 60,40 148,24 128,24242160 56 C1 60,40 148,24 128,24242160 56 C1 60,40 148,24 128,72426056 C1 60,40 148,24 128,24242160 56 C1 60,40 148,24 128,24242160 56 C1 60,40 148,24 128,724240. 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,39139139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z ';; PathElement.setAttributens (null, «d», chemin);

Les deux API fournies par SVGPathement sont essentielles.

La méthode GetTotAlthength peut obtenir la longueur totale de SVGPathement

La méthode GetPointTLength est transmise dans une longueur x, qui renverra les coordonnées finales de la longueur du point de départ du SVGPathement.

Utilisez ces deux API pour mettre à jour en continu les coordonnées graphiques dessinées dans Canvas via un cycle, et l'animation de chemin peut être réalisée:

 const Lurn = pathElement.getTotAllNength (); 0; déplacer (x, y); , Canvas.head); ClosePath ();}

Enfin, nous l'encapsulons pour réaliser une fonction simple qui réalise l'animation personnalisée dans Canvas:

 Fonction CustMepath (Path, Func) {const Forms = Document.CreateElementNS ('http://www.w3.org/2000/svg', path); 'D', path); Const durée = 1000; étape) .x); const y = parseInt (pathElement.getPointTlonging (étape) .y); 'M0, 0 C8,33.9961 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90862 128,92 C150.09139,72 16056 C160,40 148 24 128,24 C108,246 C160,40 148 24 128,24 C108,246 C160,40 148 24 128,24 C108,246 C160,40 148 24 128,24 C108.246 C160,40 148 24 128,24 C108.246 C160,40 148 24 128,24 C108,240. 96,40 96,56 C96,72 105,90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861 96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z '; {context.clearrect (0, 0, canvas.width, canvas.height);

La mise en œuvre d'idées est à peu près comme décrit ci-dessus, mais ce n'est pas le résultat ultime. Lorsque nous décidons de faire une animation de chemin personnalisée dans Canvas, nous devons non seulement considérer comment l'atteindre, mais également considérer l'optimisation des performances. Comment contrôler la fréquence d'images à l'optimale? etc.

Bien qu'ils ne soient pas dans la portée de la discussion de cet article, ils devraient valoir la peine d'être réfléchis.

Ce qui précède est tout le contenu de cet article.