Share
Contrôle complet de la chronologie, importation et exportation de fichiers JSON, inspection d'animations, interface intuitive, édition en direct, API facile à comprendre, vitesse et rétroaction en temps réel: tout ce que vous pourriez souhaiter dans une interface utilisateur graphique pour la création et la gestion d'animations Web. Dans cet article, nous allons examiner le dernier outil disponible pour les animateurs Web, Spirit, de Patrick Brouwer. Nous allons apprendre comment cela peut changer la façon dont vous créez des animations sur le Web. Animons!
Spirit est une recette en trois parties, nécessitant:
L'application de bureau est une interface utilisateur graphique (interface graphique) permettant de créer et de gérer vos animations, tandis que l'extension du navigateur crée la connexion entre l'application de bureau correspondante et votre page Web..
L'application est actuellement disponible pour Mac, mais le sera très prochainement pour Windows et Linux. L'extension de navigateur de Spirit est strictement Chrome pour le moment, mais des extensions compatibles avec d'autres principaux navigateurs (Firefox, Opera et Safari) sont en cours de développement..
Lorsque chaque composant requis est en place, vous pouvez commencer le développement de votre animation. Ouvrez l'application, accédez à l'URL de la page Web souhaitée à l'aide de votre navigateur, activez l'extension et démarrez l'animation.!
Si vous souhaitez animer une page Web à partir de votre système de fichiers local, cochez la case correspondante. Autoriser l'accès aux URL de fichiers dans vos paramètres d'extension chrome.
Il est recommandé d'ajouter un data-spirit-id à chaque élément que vous souhaitez animer lors du développement local.
…
Il est ainsi plus facile d’utiliser l’interface graphique pour éditer le scénario d’un élément et pour le moteur d’exécution de sélectionner plus facilement vos cibles sans utiliser de sélecteurs CSS basés sur des éléments (par exemple,. corps> div> div> ul).
Spirit utilise ce qu'on appelle le «runtime (player)». Si la page Web que vous visitez n'a pas de runtime Spirit, l'extension de navigateur injectera automatiquement une runtime temporaire pour vous. Le runtime est juste un fichier JavaScript (~ 10kb), donc à chaque fois que vous entendez le terme «runtime», dites-vous «fichier JavaScript».
Runtime vous permet de lire les animations directement sur votre page Web et exploite la puissance de GSAP pour la lecture de toutes ses animations. Cela signifie que vous pouvez utiliser des propriétés spécifiques à GSAP ainsi que des plugins tels que drawSVG ou morphSVG, ainsi que d'autres stratégies d'animation encore en développement (WAAPI).
Le runtime est disponible via Open Source si vous souhaitez donner de votre temps pour aider à le maintenir ou à l’améliorer. Si vous préférez installer le lecteur d’exécution en tant que package NPM, vous pouvez taper la commande install npm installez spiritjs --save depuis votre terminal, ou vous pouvez essayer Yarn en utilisant leur commande d’installation fils ajouter spiritjs.
Vous êtes un animateur Web à la recherche d’une ligne de temps facile à contrôler, à naviguer et à utiliser? Spirit a votre dos, avec une interface élégante et intuitive offrant de nombreuses options pour peaufiner vos créations. La timeline peut être nettoyée et des images clés ajoutées facilement. Le tri des éléments est cependant une fonctionnalité qui attend d'être implémentée. Si vous développez en temps réel, vous pouvez ajouter ou supprimer des éléments si nécessaire. Lorsque votre travail est terminé, cliquez sur le bouton retour bouton, exportez le fichier JSON contenant votre progression et chargez-le à l'aide de l'API Spirit runtime lorsque vous le souhaitez..
Chaque image clé peut être affinée en termes de synchronisation et d’assouplissement. Les ajouter et les supprimer est également simple. Les éléments sont répertoriés verticalement dans l'inspecteur de montage, chacun d'eux ayant son propre montage..
Les valeurs pour l'animation de chaque propriété peuvent correspondre à tout ce que le moteur d'exécution accepte. Il est même possible d'utiliser le code JavaScript en tant que valeur transmise, produisant des éléments dynamiques et flexibles à l'aide d'événements de souris, de défilement et de détection de position, pour n'en nommer que quelques-uns. Assurez-vous d’emballer votre logique JavaScript pour les valeurs de propriété avec des accolades, window.innerWidth - this.clientWidth.
Chaque élément peut avoir de nombreuses propriétés différentes à animer, y compris des propriétés SVG spécifiques relatives à accident vasculaire cérébral, remplir, Couleur, position et Taille. Vous pouvez même sélectionner clips-chemins, filtres, boîte ombre et z-index animer. Des propriétés personnalisées peuvent également être ajoutées si les propriétés fournies par défaut ne répondent pas à vos besoins. Assurez-vous que les propriétés personnalisées transmises sont alignées sur les noms de propriétés CSS documentés par les spécifications du W3C..
Un groupe d'animation est une collection d'objets (éléments HTML) que vous souhaitez animer. Considérez les groupes comme des «composants», chacun pouvant être exporté au format JSON..
Vous pouvez créer autant de groupes que vous le souhaitez et contrôler chacun d'entre eux. Créez facilement de nouveaux groupes et ajoutez de nouveaux éléments en les sélectionnant directement sur votre page Web ou via Éléments panneau dans Chrome Devtools. Quand l'élément capturé n'a pas de data-spirit-id attribuer la seule référence dont il dispose est un XPath (par rapport à la racine sélectionnée), il est donc préférable de créer des références d'attribut lorsque des appels de développement de production.
Accentsconagua
var tl = new TimelineMax () spirit.setup (). then (() => spirit.load ('./ my-animations.json'). then (groups => // construit tous les groupes groups.construct ( ); // contrôle la séquence d'activation de chaque groupe à l'aide de GSAP tl.add (groups.get ('nom_groupe'), 0) .add (groups.get ('groupe-un autre nom de groupe'), '- = 0.25') .add (groups.get ('group-yetanothergroupname'), '+ = 0.125')));Un groupe n'est en réalité qu'une collection de calendriers GSAP. Par conséquent, si vous êtes déjà un utilisateur de GreenSock, ce sera un ajout utile à votre flux de travail et à vos outils. Les groupes ne peuvent pas être contrôlés en une fois à l'aide de l'application de bureau (une demande de fonctionnalité future), mais le problème peut être résolu à l'aide de l'API avancée de Spirit, car son exécution exploite l'API GSAP pour les instances de scénario reflétées dans le code ci-dessus. Vous pouvez également consulter cette démo créée par le fabricant de Spirit, illustrant l'utilisation d'une séquence de chronologie principale avec des contrôles d'interface utilisateur et plusieurs groupes:
Comme je l'ai expliqué dans mon explication précédente concernant les groupes, Spirit dispose d'une API pour les développeurs nécessitant un contrôle plus approfondi. Deux API sont fournies. une API simple et une API avancée.
spirit.loadAnimation (container: element, // élément dom contenant la boucle d'animation: true, yoyo: true, delay: 2)
Bien que l'API avancée permette un contrôle étendu, l'API simple peut couvrir des tâches telles que le contrôle de la lecture via un éventail d'options. Vous pouvez même renvoyer des valeurs, charger des groupes et ajouter de l'interactivité.
spirit.setup ()
L'API avancée répond à tous vos besoins supplémentaires en dehors de l'API simple. Avant de pouvoir utiliser l’API avancée, vous devez indiquer au moteur d’exécution où trouver le fichier GSAP. Tween et Chronologie les instances. Une fois que la méthode de configuration de l'appel à Spirit est en place, les vannes anti-inondation s'ouvrent et vous permettent d'effectuer des tâches telles que la construction et le référencement de la chronologie, l'interactivité, le référencement des images clés et des propriétés, etc..
Il est important de garder les choses synchronisées, en particulier pour que Spirit puisse fonctionner efficacement. L'application de bureau Spirit se met automatiquement à jour en arrière-plan, de sorte que vous aurez toujours la dernière version installée et les dernières fonctionnalités à portée de main. En mettant à jour automatiquement l'application Spirit, il est plus facile d'itérer et d'implémenter de nouvelles fonctionnalités en cours de route. Les extensions Chrome sont également mises à jour en arrière-plan. Toutes les quelques heures, le navigateur vérifie si les extensions ou les applications installées ont une URL de mise à jour. Pour chacun d'eux, il demande à cette URL de rechercher un fichier XML de manifeste mis à jour..
Aller à chrome: // extensions et cochez la mode développeur case à cocher en haut à droite, puis appuyez sur la Mettre à jour les extensions maintenant bouton. En veillant à ce que cette configuration soit en place, Spirit peut fonctionner sans créer de comportement inattendu, car de nouvelles fonctionnalités et des données mises à jour sont ajoutées..
Si vous souhaitez garder un œil sur les nouvelles fonctionnalités et les progrès réalisés avec Spirit, vous pouvez vous inscrire ici pour la newsletter et suivre les progrès sur Twitter. Spirit est certainement l'outil qui va changer la façon dont vous créez des animations pour le Web..
