Comment animer du texte manuscrit avec SVG : Dasharray, Dashoffset et masquage ?

Comment animer du texte manuscrit sur une page Web à l'aide de SVG

Objectif

Dans ce guide, nous allons nous plonger dans l'animation de texte SVG pour ressembler à l'effet séduisant de l'écriture manuscrite. Nous explorerons des techniques inspirées d'animations exemplaires, telles que celles trouvées ici :

• https://codepen.io/se7ensky/pen/waoMyx
• https://codepen.io/munkholm/pen/EaZJQE

Mise en œuvre

Pour obtenir cet effet d'écriture captivant, nous nous écarterons de l'approche standard d'animer juste le trait du texte. Au lieu de cela, nous nous inspirerons des animations exceptionnelles mentionnées précédemment.

Technique 1 :

• Animez les propriétés Stroke Dasharray et Stroke Dashoffset du chemin.
• Découpez le trait animé avec un contour du dessin à la main souhaité forme.

Code JavaScript :

const path = document.querySelector('.text');

path.style.animation = 'dash 15s 1 forwards';
path.style.strokeDasharray = '300';
path.style.strokeDashoffset = '300';

CSS :

.text {
  -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

Technique 2 :

• Créer un masque avec le contour de la forme dessinée à la main.
• Animez la position du masque le long du chemin.

Code JavaScript :

const mask = document.querySelector('.mask');

mask.style.animation = 'mask-move 15s 1 forwards';

CSS :

.mask {
  mask: url(#mask);
  -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

SVG Masque :

<defs>
  <mask>

Remarques supplémentaires :

• Personnalisez le timing et le chemin de l'animation en fonction de vos besoins spécifiques.
• Expérimentez avec différents styles de dessin pour obtenir un effet unique dessiné à la main.
• Utilisez des SVG haute résolution pour préserver l'image. détails complexes du texte ou de la forme.

Démo en direct :

Voir un exemple interactif sur CodePen :

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!