Dans le monde de la conception Web moderne, les images SVG sont utilisées partout, des illustrations aux icônes aux effets de fond, et sont universellement précieux pour leur croustillant et leur taille légère. Alors que les images SVG statiques jouent un rôle important dans la conception Web, la plupart du temps, leur véritable potentiel n’est débloqué que lorsqu’ils sont combinés avec le mouvement.
Peu de choses ajoutent plus de vie et de personnalité à un site Web qu’une animation SVG bien exécutée. Mais toutes les animations n’ont pas le même impact en termes d’expérience numérique. Par exemple, effets élastiques et rebondis avoir un appel unique en motion car ils apportent un sentiment du réalisme dans le mouvementrendre les animations plus attrayantes et mémorables.
Cependant, quiconque a plongé dans l’animation des SVG sait les obstacles techniques impliqués. La création d’un effet élastique ou de rebond convaincant nécessite traditionnellement la gestion des images clés CSS complexes ou la lutte avec des bibliothèques d’animation JavaScript. Même lorsque vous utilisez un éditeur d’animation SVG, cela vous obligera très probablement à ajouter manuellement les images clés et à ajuster les fonctions d’assouplissement entre elles, ce qui peut devenir un processus de procès et d’erreur qui prend du temps, quel que soit le niveau d’expérience que vous avez.
C’est là que l’animateur expressif brille. Il permet aux créateurs d’appliquer des effets élastiques et rebondis en quelques secondescontournant le travail fastidieux de l’édition manuelle de l’image clé. Et le résultat est toujours exceptionnel: les animations qui se sentent vivantproduit avec une fraction de l’effort.
Utiliser un animateur expressif pour créer un effet élastique
La création d’un effet élastique dans l’animateur expressif est remarquablement simple, rapide et intuitif, car l’effet est intégré directement au logiciel en tant que fonction d’assouplissement. Cela signifie que vous n’avez besoin que de deux images clés (démarrage et fin) pour faire l’effet, et le logiciel gérera automatiquement le mouvement élastique entre les deux. Encore mieux, l’assouplissement élastique peut être appliqué à Toute propriété animateable (Par exemple, position, échelle, rotation, opacité, morph, etc.), vous donnant un moyen cohérent de l’ajouter à vos animations.
Avant de plonger dans le tutoriel, jetez un œil à la vidéo ci-dessous pour voir ce que vous apprendrez à créer et tout le processus du début à la fin.
Tout d’abord, préparons la scène. Pour cela, nous Créer un nouveau projet en pressant Ctrl/ /CMD + P et le configurer dans la boîte de dialogue «Créer un nouveau projet» qui apparaît. Pour la taille du cadre, nous choisirons 1080 × 1080, pour une durée de 00:01:30, et nous laisserons la fréquence d’images inchangée à 60 images par seconde (FPS).
Une fois que vous avez appuyé sur le bouton «Créer un projet», vous pouvez utiliser le Stylo et Ellipse Outils pour créer l’œuvre d’art qui sera animée, ou vous pouvez simplement copier et coller l’œuvre ci-dessous.
Voir le stylo [Effects With Expressive Animator – Artwork for Animation](https://codepen.io/smashingmag/pen/pvjmwxv).
Maintenant que tout a été configuré, créons l’animation. Assurez-vous que le claquement et le record automatique sont activés, puis déplacez la tête de jeu à 01: 00F. Par activer la claquementvous pourrez aligner parfaitement les nœuds et les objets graphiques sur la toile. D’un autre côté, comme son nom l’indique, le record automatique suit chaque changement que vous apportez à l’œuvre d’art et ajoute les images clés appropriées sur la chronologie.
Appuyez sur le UN clé de votre clavier pour passer à la Outil de nœudpuis sélectionnez l’objet String et déplacez sa poignée vers le point de droite central de l’art. Ne vous inquiétez pas de la précision, car le claquement fera tout le levage de lourds pour vous. Cela pliera la forme et ajoutera des images clés pour l’animateur Morph.
Ensuite, appuyez sur le V clé de votre clavier pour passer à la Outil de sélection. Avec cet outil activé, sélectionnez la balle, déplacez-la vers la droite et placez-la au milieu de la chaîne. Encore une fois, la claquement fera tout le travail acharné, vous permettant de positionner la balle exactement où vous le souhaitez, tandis que le record automatique ajoute automatiquement les images clés appropriées.
Vous pouvez maintenant rejouer l’animation et désactiver l’enregistrement automatique en cliquant à nouveau sur le bouton automatique-enregistrement.
Comme vous pouvez le voir lors de la relecture, la direction dans laquelle les objets de chaîne et de balle se déplacent est faux. Heureusement, nous pouvons résoudre ce problème extrêmement facilement simplement en inversant les images clés. Pour ce faire, sélectionnez les images clés de la chronologie et cliquez avec le bouton droit pour ouvrir le menu contextuel et choisissez Reverse. Cela inversera les images clés, et si vous rejouez l’animation, vous verrez que la direction est maintenant correcte.
Avec cela à l’écart, nous pouvons enfin ajouter l’effet élastique. Sélectionnez tous les images clés de la chronologie et cliquez sur le bouton de soulagement personnalisé pour ouvrir une boîte de dialogue avec des options de soulagement. Dans la boîte de dialogue, choisissez Elastic et définissez les oscillations sur 4 et la rigidité à 2,5.
C’est ça! Cliquez n’importe où en dehors de la boîte de dialogue de soulagement pour le fermer et rejouer l’animation pour voir le résultat.
L’animation peut également être exportée. Presse CMD/ /Ctrl + E sur votre clavier pour ouvrir la boîte de dialogue d’exportation et choisir parmi diverses options d’exportation, allant des formats vectorisés, tels que SVG et Lottieaux formats rasterisés, comme Gif et vidéo.
Pour cette animation spécifique, nous allons choisir le format d’exportation SVG. L’animateur expressif vous permet de choisir entre trois types différents de SVG, selon la technologie utilisée pour l’animation: SOURIRE, CSSou Javascrip.
Chacune de ces technologies a des forces et des faiblesses différentes, mais pour ce tutoriel, nous allons choisir Smil. En effet <img> étiqueter. En fait, Andy Clarke a récemment écrit sur Smil Animations ici au magazine Smashing Si vous voulez une explication complète de son fonctionnement.
Vous pouvez visualiser le SVG exporté dans la démo Codepen suivante:
Voir le stylo [Expressive Animator – Exported SVG](https://codepen.io/smashingmag/pen/ggpaeyg).
Animateur expressif pour rebond et autres effets
L’ajout d’un effet de rebond à une animation est très similaire au processus que nous venons de couvert pour créer un effet élastique, car les deux sont intégrés à l’animateur expressif comme fonctions d’assouplissement. Tout comme élastique, le soulagement du rebond peut être appliqué à n’importe quelle propriété animate, vous donnant des moyens rapides de créer un mouvement réaliste.
Au-delà de ces deux effets, Expressive Animator propose également d’autres options de soulagement qui peuvent façonner la personnalité de votre animation, comme le dos, les étapes, le sinc, pour n’en nommer que quelques-uns.
Conclusion
Les effets élastiques et de rebond sont depuis longtemps parmi les techniques les plus souhaitables mais longues dans la conception de mouvement. En les intégrant directement dans ses fonctions d’assouplissement, un animateur expressif supprime la complexité de la manipulation manuelle de l’image clé et transforme ce qui était auparavant un défi technique en une opportunité créative.
La meilleure partie est que le début de l’animateur expressif est livré avec un risque zéro. Le logiciel offre un 7 jours complet essai gratuit sans exiger de compteafin que vous puissiez le télécharger instantanément et commencer à expérimenter immédiatement vos propres conceptions. Après la fin du procès, vous pouvez acheter un animateur expressif avec un paiement unique, Aucun abonnement requis. Cela vous donnera une licence perpétuelle couvrant à la fois Windows et MacOS.
Pour vous aider à démarrer encore plus rapidement, j’ai préparé des ressources supplémentaires pour vous. Vous trouverez les fichiers source pour les animations créées dans ce tutoriel, ainsi qu’une liste organisée de liens utiles qui vous guideront davantage dans l’exploration de l’animateur exploré et de l’animation SVG. Ces matériaux sont destinés à vous donner un point de départ solide afin que vous puissiez apprendre, expérimenter et construire seul en toute confiance.
(GG, YK)
Source link