Catégories
Astuces et Design

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

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

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

Faisons cela ensemble!

Masquage SVG

Si la largeur du trait de toutes les lettres d'un mot ou d'une phrase est uniforme, Craig Roblewsky a un bon moyen d'animer l'écriture manuscrite. Il s'agit d'une technique intelligente qui anime les attributs SVG stroke-dasharray et stroke-offset.

Les polices de calligraphie comme nous voulons animer ici ont une largeur de trait inégale dans toutes les lettres, par conséquent, il devra être un et l'animer de cette manière ne fonctionnera pas. L'astuce sera d'utiliser le masquage SVG.

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

L'idée est de créer un à partir de la même phrase que nous voulons animer, puis placez-le au-dessus de la phrase. En d'autres termes, il y aura deux couches de la même phrase. Étant donné que le masque se trouve au-dessus, nous le rendrons blanc afin de masquer la phrase originale en dessous. Nous animerons le masque afin que le calque inférieur soit révélé pendant que l'animation s'exécute.

Faire les couches

Le fondement de cette astuce est que nous allons en fait créer deux calques séparés, l'un au-dessus de l'autre:

  1. La couche inférieure contient les mots avec la police souhaitée (dans mon cas, c'est HaveHeartOne).
  2. La couche supérieure est un chemin fabriqué à la main se rapprochant des mots.

Créer le chemin artisanal 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 veut dire non pour ça. Mais, de nombreuses applications illustrées, 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 par magie, les lettres deviennent des contours avec des points vectoriels qui suivent la forme.

Affichage des mots Marketing Lab en rouge dans Illustrator enveloppé de points vectoriels bleus.
Imaginez dessiner tout cela à la main!

À 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ère du code et utilise ces noms de couches comme identifiants et classes.

Affichage des calques Illustrator des lettres avec un nom approprié.
Ces noms sont bien plus beaux que ce qui aurait été généré automatiquement.

Remarquez comment les lettres individuelles ont un fill mais non stroke:

Affichage de la lettre M sélectionnée dans Illustrator avec le panneau des propriétés ouvert indiquant qu'il n'y a pas de contour sur la forme.

En SVG, nous pouvons animer le stroke comme nous le souhaitons, nous allons donc devoir créer cela comme notre deuxième calque principal, le masque. Nous pouvons utiliser l'outil stylo pour tracer les lettres.

  1. Sélectionnez l'outil Plume.
  2. Définissez l'option de remplissage sur «Aucun».
  3. La largeur du trait dépendra de la police que vous utilisez. Je règle l’option Largeur du trait sur 5 pixels et sa couleur sur noir.
  4. Commence à dessiner!

Mes compétences en matière d’outil plume ne sont pas excellentes, mais ça va. L’important n’est pas la perfection, mais le fait que le masque recouvre le calque en dessous.

Créez un masque pour chaque lettre et n'oubliez pas d'utiliser de bons noms pour les calques. Et réutilisez définitivement les masques là où il y a plus d'une lettre de la même lettre – il n'est pas nécessaire de redessiner le même caractère «A» encore et encore.

Affichage des formes de lettre du Marketing Lab entièrement couvertes par les calques de contour noirs.

Exporter

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

La fenêtre contextuelle des options SVG s'ouvrira, voici le paramètre préféré à exporter pour cet exemple.

Affichage des options d'exportation SVG dans Illustrator.

Désormais, toutes les applications n'exporteront pas le SVG de la même manière. Certains font un excellent travail pour générer un code mince et efficace. D'autres, pas tellement. Dans tous les cas, c'est une bonne idée de déchiffrer 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 dans un souci de performances:

  1. Moins il y a de points, plus le fichier est léger.
  2. En utilisant un plus petit viewBox peut aider.
  3. Il existe de nombreux outils pour optimiser encore plus SVG.

Modifier manuellement le code SVG

Désormais, toutes les applications n'exporteront pas le SVG de la même manière. Certains font un excellent travail pour générer un code mince et efficace. D'autres, pas tellement. Dans tous les cas, 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. Donner la élément width et height attributs définis pour dimensionner la conception finale.
  2. Utilisez le </code> élément. Puisque nous travaillons avec des chemins, les mots ne sont pas réellement reconnus par les lecteurs d'écran. Si vous avez besoin de les lire lors de la mise au point, cela fera l'affaire.</li> <li>Il y aura probablement des éléments de groupe (<code><g></code>) avec les ID basés sur les calques nommés dans l'application d'illustration. Dans cette démo spécifique, j'ai deux éléments de groupe: <code>#marketing-lab</code> (le contour) et <code>#marketing-masks</code> (les masques). Déplacez les masques dans un <code><defs></code> élément. Cela le cachera visuellement, ce que nous voulons.</li> <li>Il y aura probablement des chemins à l'intérieur du groupe de masques. Si tel est le cas, allez-y et retirez le <code>transform</code> attribut d'eux.</li> <li>Enveloppez chaque élément de chemin dans un <code><mask</code>> et leur donner un <code>.mask</code> classe et un identifiant qui indique quelle lettre est masquée.</li> </ol> <p>Par exemple:</p> <pre rel="SVG" class="wp-block-csstricks-code-block language-svg" data-line=""><code markup="tt"><mask id="mask-marketing-M">   <path class="mask" id="mask-M" ... /> </mask></code></pre> <p>À l'intérieur du groupe de plan (auquel j'ai donné un identifiant de <code>#marketing-lab</code>), appliquez le masque à l'élément de chemin de caractère respectif en utilisant <code>mask="url(#mask-marketing-M)"</code>.</p> <pre rel="SVG" class="wp-block-csstricks-code-block language-svg" data-line=""><code markup="tt"><g id="marketting-lab">   <path mask="url(#mask-marketing-M)" id="marketting-char-M" d="M427,360, ... " /> </g></code></pre> <p>Voici le code pour un caractère en utilisant toutes les modifications ci-dessus:</p> <pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 381 81" class="marketing-lab">   <title>Marketing Lab                                        

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

    .mask {
      fill: none;
      stroke: #fff;
    }

    Animation

    Nous allons animer le CSS stroke-dasharray propriété 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 uniquement en CSS. Vous pouvez utiliser JavaScript pour calculer la longueur du chemin, puis l'animer à l'aide de cette valeur renvoyée. Si vous ne souhaitez pas du tout utiliser JavaScript, vous pouvez calculer la longueur du chemin une fois et coder en dur cette valeur dans le CSS.

    /* Set the stroke-dasharray and stroke-dashoffset */
    .mask {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
    }
    

    /* Animation the stroke-dashoffset to a zero length */
    @keyframes strokeOffset {
      to {
        stroke-dashoffset: 0;
      }
    }
    

    /* Apply the animation to each mask */
    #mask-M {
      animation: strokeOffset 1s linear forwards;
    }

    JavaScript peut vous aider à compter si vous préférez plutôt suivre cette voie:

    // Put the masks in an array
    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')
    

    masks.forEach((mask, index, el) => {
      const id = `#mask-${mask}` // Prepend #mask- to each mask element name
      let path = document.querySelector(id)
      const length = path.getTotalLength() // Calculate the length of a path
      path.style.strokeDasharray = length; // Set the length to stroke-dasharray in the styles
      path.style.strokeDashoffset = length; // Set the length to stroke-dashoffset in the styles
    })

    GSAP

    GSAP dispose d'un plugin drawSVG qui vous permet de révéler (ou masquer) progressivement le accident vasculaire cérébral d'un SVG , , , , , ou . Sous le capot, il utilise le CSS stroke-dashoffset et stroke-dasharray Propriétés.

    Voici comment ça fonctionne:

    1. Incluez les scripts GSAP et drawSVG dans le code.
    2. Masquez le graphique initialement en utilisant autoAlpha.
    3. Créez une chronologie.
    4. Ensemble autoAlpha à true pour le graphique.
    5. Ajoutez tous les ID de masques de chemin de caractères à la chronologie dans l'ordre approprié.
    6. Utilisez drawSVG pour animer tous les personnages.


    Références

    1. Ligne de dessin animé en SVG par Jake Archibald
    2. Création de mon animation de logo par Cassie Evans

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *