Comment puis-je animer du texte SVG pour simuler l'effet de l'écriture manuscrite à l'aide d'une animation CSS et de chemins de détourage ?

Animation de texte SVG avec le geste de l'écriture manuscrite

Dans cet article, nous approfondirons les techniques utilisées pour créer les animations de texte captivantes de type écriture manuscrite présentées dans les exemples comme CodePen.io/se7ensky/pen/waoMyx et CodePen.io/munkholm/pen/EaZJQE.

Comprendre la technique d'animation de tableau de bord standard

L'animation Se7ensky exploite intelligemment la technique d'animation de tableau de bord standard. Cette technique implique :

1. Dessiner un trait continu : Créer un trait continu le long du chemin du texte.
   <div><div class="snippet- code">
   <pré> <path></svg></pre>
   </div>
   </div>
2. Masquer la majorité du trait : Définir la propriété Stroke-dasharray à une valeur supérieure à la valeur réelle du trait longueur, masquant ainsi initialement la majeure partie du trait.
   <div><div class="snippet-code">
   <pre> Stroke-dasharray : 300;
   }</pre>
   </div>
   </div>

3. Animation du trait : Utilisez l'animation CSS pour réduisez progressivement la propriété Stroke-dashoffset, qui révèle le trait comme s'il étaient en cours de dessin.
   <div><div class="snippet-code">
   <pre>@keyframes draw {
   à {

   stroke-dashoffset: 0;

   }
   }

   chemin {

   animation : dessiner 15s 1;
   }</pre>
   </div>
   </div>

Ajout de l'effet dessiné à la main

Pour obtenir l'effet dessiné à la main vu dans les exemples, Se7ensky utilise une technique intelligente :

1. Créez un contour de chemin SVG du texte manuscrit : Créez un chemin qui correspond au bord extérieur du texte. Ce chemin fournit le contour dessiné à la main.
   <div><div class="snippet-code">
   <pre> <path></svg></pre>
   </div>
   </div>
2. Découpez le trait animé avec le contour : Utilisez la propriété clip-path pour définir une zone de découpage qui restreint l'animation tracez jusqu'aux limites du contour.
   <div><div class="snippet-code">
   <pre> clip-path : url(#outline);
   }</pre>
   </div>
   </div>

En combinant ces techniques, le Se7ensky animation reproduit efficacement l'apparence d'une animation de texte dessinée à la main.

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!