Vivus est une classe JavaScript légère (sans dépendances) qui vous permet d'animer des SVG, leur donnant l'apparence d'être dessinés.Il existe une variété d'animations différentes disponibles, ainsi que la possibilité de créer un script personnalisé pour dessiner votre SVG comme vous le souhaitez.Types d'animation • Retardé: chaque élément de chemin est dessiné en même temps avec un petit retard au début.Il s'agit actuellement de l'animation par défaut.• Sync: chaque ligne est dessinée de manière synchrone.Ils commencent et finissent tous en même temps, d'où le nom «sync».• OneByOne: chaque élément de tracé est dessiné l'un après l'autre.Cette animation donne la meilleure impression de dessin en direct.Fonction de synchronisation Pour donner plus de liberté, il est possible de remplacer l'animation de chaque chemin et / ou de l'ensemble du SVG.Cela fonctionne un peu comme la fonction de synchronisation d'animation CSS.Mais au lieu d'utiliser une fonction cubique-bezier, il utilise une simple fonction JavaScript.Il doit accepter un nombre comme paramètre (entre 0 et 1), puis retourner un nombre (également entre 0 et 1).C'est un crochet.Scénariser Cette fonctionnalité vous permet de scripter l'animation de votre SVG.Pour ce faire, les valeurs personnalisées seront définies directement dans le DOM du SVG.Voici un exemple d'utilisation de la synchronisation de scénarios.Je vous recommande de consulter le code source et le fichier Lisezmoi pour plus d'informations.