Share
L'animation du trait d'un SVG est parfaite pour simuler l'écriture manuscrite. Au cours de deux tutoriels, nous allons utiliser l’animation CSS pour donner l’impression propre d’une signature, comme si vous signiez vous-même la page..
Voici ce que nous allons construire:
Avant de plonger dans un code, nous allons avoir besoin d'une version SVG de votre signature. Peu importe le logiciel que vous utilisez pour cela, mais essayez de garder les lignes et les courbes aussi lisses que possible pour un meilleur effet..
Voici le mien, que vous pouvez voir est dessiné avec trois chemins distincts:
Premier chemin
Deuxième chemin
Troisième voieAssurez-vous que votre planche graphique est bien rognée à la signature, puis enregistrez le fichier au format SVG..
L'ouverture du fichier dans un éditeur de code révélera la structure XML du SVG. En fonction de l’application que vous avez utilisée pour le concevoir, ainsi que de la façon dont vous l’avez sauvegardé ou exporté, vous aurez un élément avec un peu de charabia avant. Le Mumbo Jumbo peut être enlevé.
Dans ce cas, les éléments qui nous restent ressemblent à quelque chose comme:
Dans notre principale nous avons un
Nous devrons cibler séparément ces vecteurs avec CSS un peu plus tard, alors assurez-vous qu'ils ont chacun un nom de classe approprié. le l'élément aura probablement déjà un identifiant reflétant le nom de la couche dans l'application pour laquelle il a été conçu.
J'ai donné mes noms de classe de vecteurs en fonction de ce qu'ils sont (le premier est le «je» dans mon nom, par exemple).
Pour être juste, votre fichier SVG ne sera pas aussi élégant. Chacun de ces vecteurs aura une charge de coordonnées, ainsi que plusieurs attributs enfouis en leur sein. Les coordonnées devront rester, mais nous pouvons supprimer certains des attributs couramment utilisés et les placer dans notre code CSS, gardant ainsi les choses agréables et sèches..
Je vais construire cela en utilisant CodePen, mais vous pouvez utiliser des documents HTML et CSS autonomes si vous préférez. Collez le code SVG directement dans votre document HTML. Ensuite, supprimez les attributs communs aux éléments de chemin et de ligne, en les plaçant à la place dans le document CSS. Par exemple, vous remarquerez des attributs tels que:
Accentsconagua
remplir = "aucun" accident vasculaire cérébral = "# 0F436D" largeur-trait = "2" stroke-linecap = "round" stroke-linejoin = "round" stroke-miterlimit = "10"Ceux-ci peuvent être supprimés et appliqués via CSS à la place, comme ceci:
chemin, ligne remplissage: aucun; accident vasculaire cérébral: # 2a3745; largeur de trait: 2; AVC-linecap: rond; ligne de trait joint: rond; accident vasculaire cérébral: onglet limite: 10;
Beaucoup plus propre!
Pour animer les frappes de ce SVG, nous allons utiliser une technique dont Jake Archibald a parlé pour la première fois. L'idée est la suivante: chacun de ces vecteurs va recevoir un précipité accident vasculaire cérébral. Nous faisons cela en appliquant un accident vasculaire cérébral valeur dans le CSS:
Pour chacun de ces vecteurs nous faisons la accident vasculaire cérébral précisément la longueur du chemin, ainsi chacun a un tiret unique couvrant toute sa longueur. Cela prend un peu d'essais et d'erreurs, mais dans notre cas, les valeurs ressemblent à ceci:
.accident vasculaire cérébral-I accident vasculaire cérébral-dasharray: 80; . Coup-un accident vasculaire cérébral: dasharray: 360; . Coup-fleurir accident vasculaire cérébral: 40;
Maintenant, afin d’animer ces traits, nous devons décaler chacun des tirets afin que le écart couvre le vecteur, pas le tiret. Cela a-t-il du sens? Ces illustrations pourraient aider. Dans cette première, imaginez que la ligne pointillée est utilisée pour couvrir l’épanouissement à la fin de la signature..
Maintenant, dans celui-ci, nous avons compensé le tiret, donc c'est l'écart qui est au-dessus de la floraison:
Il ne reste plus maintenant qu’à utiliser CSS pour animer l’état de décalage vers l’autre.
L’animation CSS repose sur la définition des images clés. Chaque image clé représente des états sur une ligne de temps, puis nos navigateurs rendent les animations entre eux..
Voyons d'abord comment cet offset de tiret peut être animé. Nous allons utiliser le premier trait, le «je», et animer entre deux états. Commencez par configurer quelques images clés:
@ images-clés write1 0% stroke-dashoffset: 80; 100% stroke-dashoffset: 0;
Ici, nous donnons un nom aux images clés (écrire1) et en utilisant une syntaxe abrégée, spécifient qu’au tout début de la timeline (0%) nous voulons le accident vasculaire cérébral être 80. En d'autres termes: le tiret, qui fait exactement 80 pixels de long, sera complètement décalé.
À la fin de la chronologie (à 100%) nous voulons le accident vasculaire cérébral être 0, de sorte que le tiret couvre à nouveau le vecteur.
Maintenant que nous avons nos images clés, attachons-les à une animation. Nous ajoutons une autre déclaration à notre accident vasculaire cérébral règle:
.accident vasculaire cérébral-I accident vasculaire cérébral-dasharray: 80; animation: write1 3s infinite linear;
Ici, en utilisant le animation la propriété, nous disons que nous voulons utiliser le écrire1 images clés définies il y a un instant, nous voulons que le tout dure exactement 3 secondes, nous voulons que l’animation se répète en boucle à l’infini et que la vitesse soit linéaire (afin qu'il n'y ait pas d'accélération ou de décélération).
Voici ce que nous obtenons:
Remarque: J'utilise Autoprefixer dans CodePen, ce qui m'évite d'avoir à utiliser les préfixes de navigateur sur les animations.
Nous devons définir deux autres ensembles d’images clés (écrire2 et écrire3) pour les vecteurs restants dans la signature - et nous devons compenser par les longueurs de tirets correctes découvertes précédemment:
@keyframes write2 0% stroke-dashoffset: 360; 100% stroke-dashoffset: 0; @keyframes write3 0% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
Ensuite, nous devons appliquer ces animations aux deux vecteurs restants:
.stroke-an stroke-dasharray: 360; animation: write2 3s infini linear; . Coup-fleurir accident vasculaire cérébral: 40; animation: write3 3s infini linear;
Voici ce que nous obtenons:
Maintenant, nous allons quelque part! Chaque vecteur s’anime parfaitement, dans un mouvement linéaire d’une durée de 3 secondes.
L'étape suivante? Pour les animer en séquence.
Actuellement, nous avons trois traits qui s'animent tous simultanément. Cependant, nous souhaitons idéalement que le «je» s'anime, puis le «un», puis enfin la floraison à la fin. Si nous devions visualiser cela le long d'une chronologie, cela pourrait ressembler à ceci:
En réalité, nous pouvons parfaitement représenter ces sections de la timeline dans nos images clés CSS. Par exemple, la première section (de 0% à 33,3%) correspond au moment où nous souhaitons animer notre «je». Nous modifions donc les images clés pour les terminer à 33,3% au lieu de 100%:
@ images-clés write1 0% stroke-dashoffset: 80; 33,3% accident vasculaire cérébral: 0;
Maintenant, étant donné que nos trois animations ont la même durée (3 secondes), nous pouvons nous assurer que la seconde ne commence pas avant 33,3%, lorsque la première animation est terminée:
@ keyframes write2 0%, 33.3% stroke-dashoffset: 360; 100% stroke-dashoffset: 0;
Voici ce que cela nous donne:
Les deux premières animations se déroulent bien, améliorons donc les choses en faisant en sorte que la seconde termine à 66,6%, date à laquelle l'animation finale peut commencer. Nos images clés ressembleront à ceci:
@ images-clés write1 0% stroke-dashoffset: 80; 33,3% accident vasculaire cérébral: 0; @keyframes write2 0%, 33.3% stroke-dashoffset: 360; 66,6% accident vasculaire cérébral: 0; @keyframes write3 0%, 66.6% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
Et la séquence ressemblera à ceci:
Ce que nous avons est bon, mais ce n’est pas parfait, loin d’être réaliste. Chacun de ces trois vecteurs est tracé en l'espace d'une seconde, quelle que soit sa longueur. Le vecteur du milieu est plus long que le dernier, il devrait donc logiquement prendre plus de temps à dessiner. Une meilleure chronologie pourrait ressembler à ceci:
Pour plus de réalisme, il existe même un écart entre la finition du premier vecteur et le début du second. Modifions donc les valeurs de nos images clés pour refléter les éléments suivants:
@ images-clés write1 0% stroke-dashoffset: 80; 20% accident vasculaire cérébral: 0; @keyframes write2 0%, 25% stroke-dashoffset: 360; 90% stroke-dashoffset: 0; @keyframes write3 0%, 90% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
Enfin, accélérons les choses en modifiant tous les 3s valeurs à 2s. Nous pouvons également mettre à jour les déclarations d'animation de manière à ce qu'elles ne soient exécutées qu'une seule fois et non en boucle infinie:
animation: write1 2s 1 linear;
Vous voudrez peut-être aussi jouer avec le linéaire valeur, au lieu d’ajouter un certain soulagement tel que facilité dans, facilité d'entrée, soulagement etc. pour rendre le mouvement moins uniforme. Qu'est-ce que tout cela nous donne?
Nous avons fait de grands progrès et beaucoup appris en cours de route! Dans le prochain tutoriel, nous allons encore plus loin en utilisant Waypoints.js pour nous aider à contrôler le moment où l'animation a lieu. on se verra là bas!
