Comment créer un effet d'animation de texte dessiné à la main à l'aide de l'animation Dash de SVG ?

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

Énoncé du problème :

Vous essayez d'animer un texte que vous avez enregistré au format SVG, mais vous n'avez pu animer que le trait, ce qui n'est pas l'effet recherché. Vous souhaitez implémenter une animation similaire aux exemples donnés, qui crée un aspect dessiné à la main. Voici ce que vous avez jusqu'à présent :

Exemple de code :

<div>
<pre class="brush:php;toolbar:false">.test {
  width: 300px;
}

.l1 {
  animation: dash 15s 1;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation-fill-mode: forwards;
}

.l2 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 20s linear forwards;
  animation-delay: 1s;
}

.l3 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 2.5s;
}

.l4 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 4.5s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Réponse :

L'animation que vous essayez d'obtenir, utilise la technique d'animation de tiret standard, mais coupe le trait animé avec un contour qui ressemble à celui dessiné à la main. style.

La technique d'animation Dash :

Une ligne standard, telle que :

<path d="M 10,75 L 290,75" stroke="red" stroke-width="50"></path>

est animée en contrôlant les valeurs du trait- dasharray et Stroke-dashoffset dans une animation d'images clés.

.path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 15s 1;
  animation-fill-mode: forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Dans cet exemple, la propriété Stroke-Dasharray définit la longueur des tirets et des espaces le long du chemin, et Stroke-dashoffset définit le décalage des tirets dans le chemin. Au fur et à mesure que l'animation progresse de 0 % à 100 %, la valeur du décalage du trait diminue, provoquant l'apparition progressive des tirets le long du chemin.

Création de l'apparence dessinée à la main :

Pour découper le trait animé avec un contour, un chemin SVG supplémentaire est utilisé avec un trait qui correspond à la largeur et à la couleur du trait animé. Ce tracé de contour doit couvrir toute la zone occupée par le trait animé. En définissant la propriété Stroke-linejoin du contour en onglet, un style aux coins nets est créé, donnant l'impression d'une ligne dessinée à la main.