Comment obtenir une animation d'écriture avec des traits SVG irréguliers

Je voulais faire une animation d'écriture pour les polices de calligraphie - le genre où les mots animent comme ils sont écrits par un stylo invisible. Parce que les polices de calligraphie ont des largeurs de coup inégales (ce ne sont même pas des coups en termes de SVG), il était presque impossible de faire ce genre de chose avec des techniques d'animation de chemin typiques. Mais j'ai trouvé une application innovante du masquage SVG pour réaliser cet effet en quelques minutes.

En recherchant comment procéder, j'ai recueilli des informations à partir de plusieurs sources. Je les ai combinés ensemble et j'ai pu créer l'effet final.

Faisons des choses ensemble!

Masquage SVG

Si la largeur de course de toutes les lettres d'un mot ou d'une phrase est même partout, alors Craig Roblewsky a une belle façon d'animer l'écriture manuscrite. Il s'agit d'une technique intelligente qui anime les attributs SVG Stroke-Dasharray et TRAD-Offset.

Les polices de calligraphie comme nous voulons animer ici ont une largeur de course inégale dans les lettres, donc il devra être un et l'animer de cette façon ne fonctionnera pas. L'astuce sera d'utiliser le masquage SVG.

Commençons par déterminer la police que nous voulons utiliser. Celui que je vais utiliser tout au long de cet article est Hasheartone, qui a une belle apparence de coup de pinceau qui est parfaite pour l'écriture manuscrite.

L'idée est de créer un de la même phrase que nous voulons animer, puis de la placer sur la phrase. En d'autres termes, il y aura deux couches de la même phrase. Étant donné que le masque se trouve sur le dessus, nous le rendrons blanc pour masquer la phrase d'origine en dessous. Nous animerons le masque afin que la couche inférieure soit révélée au fur et à mesure que l'animation s'exécute.

Faire les couches

Le fondement de cette astuce est que nous allons en fait créer deux couches distinctes, l'une au-dessus de l'autre:

1. La couche inférieure est les mots avec la police souhaitée (dans mon cas, il est hasheartone).
2. La couche supérieure est un chemin artisanal se rapprochant des mots.

Créer le chemin fabriqué à la main n'est pas aussi difficile que vous pourriez le penser. Nous avons besoin d'un chemin continu pour animer et révéler la phrase. Cela signifie non pour cela. Mais, beaucoup illustre les applications - y compris illustrator - peuvent convertir des lettres en chemins:

1. Sélectionnez les mots.
2. Ouvrez le panneau «Propriétés» et cliquez sur Créer un contour .

Et, comme la magie, les lettres deviennent des contours avec des points vectoriels qui suivent la forme.

À ce stade, il est très important de donner des noms significatifs à ces chemins, qui sont stockés sous forme de couches. Lorsque nous nous attendons à ce que cela soit SVG, l'application générera du code et il utilise ces noms de calques comme IDS et classes.

Remarquez comment les lettres individuelles ont un remplissage mais pas de trait:

Dans SVG, nous pouvons animer la course comme nous le voulons, nous devons donc créer cela comme notre deuxième couche principale, le masque. Nous pouvons utiliser l'outil stylo pour tracer les lettres.

1. Sélectionnez l'outil stylo.
2. Définissez l'option de remplissage sur «Aucun».
3. La largeur de course dépendra de la police que vous utilisez. Je définis l'option Largeur de trait sur 5px et je définis sa couleur sur noir.
4. Commencez à dessiner!

Mes compétences en outil de stylo ne sont pas super, mais ça va. Ce qui est important n'est pas la perfection, mais que le masque couvre la couche en dessous.

Créez un masque pour chaque lettres et n'oubliez pas d'utiliser de bons noms pour les couches. Et réutilisez certainement les masques où il y a plus d'une des mêmes lettres - il n'est pas nécessaire de réchauffer le même caractère «A» encore et encore.

Exportation

Ensuite, nous devons exporter le fichier SVG. Cela dépendra probablement de l'application que vous utilisez. Dans Illustrator, vous pouvez le faire avec le fichier → Exporter → Exporter comme → SVG

La popup d'options SVG s'ouvrira, ci-dessous est le paramètre préféré à l'exportation de cet exemple.

Maintenant, toutes les applications ne seront pas exportées SVG de la même manière exacte. Certains font un excellent travail pour générer du code mince et efficace. D'autres, pas tellement. Quoi qu'il en soit, c'est une bonne idée d'ouvrir le fichier dans un éditeur de code

Lorsque nous travaillons avec SVG, il y a quelques conseils à considérer pour les rendre aussi légers que possible pour les performances:

1. Moins des points moins, plus le fichier est léger.
2. L'utilisation d'une Viewbox plus petite peut vous aider.
3. Il existe de nombreux outils pour optimiser encore SVG.

Édition manuellement du code SVG

Maintenant, toutes les applications ne seront pas exportées SVG de la même manière exacte. Certains font un excellent travail pour générer du code mince et efficace. D'autres, pas tellement. Quoi qu'il en soit, c'est une bonne idée d'ouvrir le fichier dans un éditeur de code et d'apporter quelques modifications.

Certaines choses méritent d'être faites:

1. Donnez les attributs de largeur et de hauteur d'élément
2. Utilisez l'élément
3. Il y aura probablement des éléments de groupe () avec les ID basés sur les couches qui ont été nommées dans l'application d'illustration. Dans cette démo spécifique, j'ai deux éléments de groupe: # Marketing-Lab (The Aperline) et # Marketing Masks (The Masks). Déplacez les masques dans un élément . Cela le cachera visuellement, ce que nous voulons.
4. Il y aura probablement des chemins à l'intérieur du groupe masques. Si c'est le cas, allez-y et supprimez l'attribut de transformation d'eux.
5. Enveloppez chaque élément de chemin dans un et donnez-leur une classe .Mask et un ID qui indique quelle lettre est masquée.

Par exemple:

 <masque>
 <chemin ...></chemin>
 mask></masque>

À l'intérieur du groupe de contour (que j'ai donné un identifiant de # marketing-lab), appliquez le masque à l'élément de chemin de caractère respectif en utilisant mask = "url (# mask-marketing-m)".

 <g>
 <path mask="url (# mask-marketing-m)" d="m427,360, ..."></path>
</g>

Voici le code pour un caractère utilisant toutes les modifications ci-dessus:

 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 381 81">
 <title> MARKETING LAB </title>
 <defs>
  <g>
   <masque>
    <chemin d="M375.5, ..., 9-10" trad-linecap="Square" stroke-linejoin="Bevel" stroke-width="7"></chemin>
    mask>
  </masque></g>
 
 <g>
  <chemin mask="URL (# mask-marketing-m)" d="M427,360.22C-.11.08-.17.14-.17.18H427C0"></chemin>
 </g>
</defs></svg>

Enfin, nous ajouterons CSS pour l'élément .Mask qui remplace la couleur de trait avec le blanc afin qu'il soit caché par rapport à la couleur d'arrière-plan du document.

 .masque {
 Remplir: aucun;
 TRAP: #FFF;
}

Animation

Nous allons animer la propriété CSS Stroke-Dasharray pour obtenir l'effet de révélation de ligne continue. Nous pouvons faire l'animation avec CSS et Javasscript ou avec Greensock (GSAP). Nous examinerons les deux approches.

CSS et JavaScript

Il est assez simple de le faire dans CSS seul. Vous pouvez utiliser JavaScript pour calculer la longueur du chemin, puis l'animer en utilisant cette valeur renvoyée. Si vous ne souhaitez pas du tout utiliser JavaScript, vous pouvez calculer la longueur du chemin une fois et le code dur de cette valeur dans le CSS.

 / * Réglez le tronc-trash et le trait-dashoffset * / /
.masque {
 AVC-Dasharray: 1000;
 Stroke-Dashoffset: 1000;
}


/ * Animation du tram-dashoffset à une longueur zéro * /
@keyframes tramoffset {
 à {
  Stroke-Dashoffset: 0;
 }
}


/ * Appliquer l'animation à chaque masque * /
# masque-m {
 Animation: TRADOFFOFFSET 1S AVANTS LINEAR;
}

JavaScript peut aider à compter si vous préférez suivre cette route à la place:

 // Mette les masques dans un tableau
const Masks = [«M», «A», «R», «K-1», «K-2», «E», «T-Line-V», «T-Line-H», «I-2», «I-DOT», «N», «G», «Lab-l», «Lab-A», «Lab-B»]


masques.ForEach ((masque, index, el) => {
 const id = `#mask - $ {mask}` // prend # masque- à chaque nom d'élément de masque
 Let Path = Document.QuerySelector (ID)
 const de longueur = path.gettotAllNength () // Calculez la longueur d'un chemin
 path.style.strokedAshArray = longueur; // Réglez la longueur sur le dasharray tram dans les styles
 path.style.strokedashoffset = longueur; // Définissez la longueur sur tram-dashoffset dans les styles
})

Gsap

GSAP possède un plumesvg Plugin qui vous permet de révéler progressivement (ou de masquer) la course d'un SVG , , , , ou . Sous le capot, il utilise les propriétés CSS Stroke-Dashoffset et AVC-Dasharray.

Voici comment cela fonctionne:

1. Incluez les scripts GSAP et Drawsvg dans le code.
2. Cachez le graphique initialement en utilisant AutoAlpha.
3. Créez une chronologie.
4. Définissez AutoAlpha sur true pour le graphique.
5. Ajoutez tous les ID de masques de chemin de caractère à la chronologie en séquence appropriée.
6. Utilisez Drawsvg pour animer tous les personnages.

Références

1. Ligne de dessin animée dans SVG par Jake Archibald
2. Créer mon animation de logo par Cassie Evans

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!