Share
Aujourd'hui, nous allons vous expliquer les bases de l'utilisation de animateTransform générer des animations en ligne avec SVG (scaling vector graphics).
Si vous êtes nouveau dans SVG, je vous recommande de vous familiariser avec Mise en route avec des graphiques vectoriels évolutifs (SVG) pour vous mettre à niveau..
Les techniques que vous allez apprendre vous permettront de créer des animations sophistiquées d'icônes et d'images sans un seul fichier GIF, JPEG ou PNG, sans JavaScript et sans le moindre murmure de Flash..
Les animations que vous créez seront faciles à modifier ultérieurement, car ce sont du code pur, et les résultats ne prendront que quelques kilos en bande passante précieuse lorsqu'ils sont visionnés..
Pour animer des formes SVG, vous devez d’abord avoir la possibilité de les créer. Le moyen le plus simple de créer des SVG consiste à utiliser Sketch from Bohemian Coding. Si vous ne possédez pas Sketch, vous pouvez obtenir un essai gratuit de 30 jours aux fins de ce tutoriel..
Nous allons manipuler le code SVG. Après avoir dessiné une forme dans Sketch, créez une découpe autour de celle-ci et exportez-la sous forme de fichier SVG..
Vous pourrez alors ouvrir votre fichier exporté dans un éditeur de code (comme Sublime Text) et copier le code SVG depuis l’intérieur. Tout ce dont vous avez besoin est le code de l'ouverture tag à la fermeture étiquette.
Par exemple, Sketch génère le code SVG suivant pour le rectangle bleu illustré ci-dessus:
Pour faciliter le travail visuel du code, nous allons apporter quelques modifications mineures au code..
Met le svg éléments largeur et la taille à 100% et supprimer le viewBox réglage. Supprimer également le Générateur commentaire, et le Titre, desc, defs et g éléments.
Vous devriez vous retrouver avec quelque chose comme ça:
Déposez ce code dans un document HTML et, une fois affiché dans le navigateur, vous devriez voir le même rectangle bleu sur votre page que vous avez vu dans Sketch:
Remarque: L'image ci-dessus comprend les axes X et Y à l'arrière-plan, car vous devrez les comprendre pour créer vos animations. Vous apprendrez pourquoi bientôt.
La réponse courte est, le animateTransform L'élément génère des animations en définissant des propriétés de transformation sur la forme SVG à laquelle il est appliqué..
Compte tenu de cela, la prochaine question logique est:
Ajouter transformer Les paramètres d'une forme vous permettent de modifier l'apparence de cette forme dans un espace 2D. Vous pouvez effectuer cinq types de transformation différents:
Accentsconagua
TraduireéchelletournerskewXpincele animateTransform Cet attribut vous permet d’animer différents états de transformation. Par conséquent, avant de commencer à animer, il est important de comprendre le fonctionnement réel des transformations..
Comme les transformations fonctionnent dans un espace 2D, leurs paramètres sont tous liés aux coordonnées X et Y tracées sur un axe X / Y, comme vous l'avez vu précédemment derrière notre rectangle bleu..
X axe est la ligne horizontale dans l'espace 2D, et le Y l'axe est la ligne verticale. Par défaut, chaque forme commence à une position de 0 sur les deux X et Y axe.0 position sur le X axe, les valeurs positives correspondent au déplacement à droite et les valeurs négatives au déplacement à gauche.0 position sur le Y axe, les valeurs positives correspondent au déplacement vers le bas et les valeurs négatives au déplacement. Si cela n'a pas encore de sens, ne vous inquiétez pas, cela deviendra beaucoup plus clair à mesure que vous verrez les exemples de chaque type de transformation ci-dessous..
Ne vous inquiétez pas non plus pour le code de ces transformations, nous le couvrirons lorsque nous passerons à la création d'animations. Pour commencer, je veux juste que vous décriviez l'essentiel de ce que font réellement les cinq types de transformation..
Ceci décale la position de la forme sur les axes X (horizontal) et Y (vertical).
Par exemple, voici notre rectangle bleu avec Traduire valeurs de 150 sur le X axe (horizontal) et 20 sur le Y (axe vertical:
Rappelez-vous de la section ci-dessus que les valeurs positives sur la X axe correspondent avec le déplacement à droite et les valeurs positives sur le Y axe correspond à se déplacer vers le bas.
En mettant le Traduire la valeur pour X à positif 150, notre rectangle s'est déplacé vers la droite de 150 pixels. Définir la valeur pour Y à positif 20 a déplacé notre rectangle de 20 pixels vers le bas.
Ceci multiplie la taille globale de la forme sur les axes X (largeur) et Y (hauteur).
Les paramètres d'échelle fonctionnent comme des multiplicateurs de la taille d'origine de la forme. Par exemple, si nous définissons la X échelle à 3 cela rendrait la forme trois fois plus large. Si on met le Y échelle à 1,25 cela rendrait la forme une fois et quart plus haute, comme ceci:
Aussi traduit (150, 20)Cela fait pivoter la forme autour d'un point donné par degrés.
La rotation fonctionne en définissant le nombre de degrés selon lequel vous souhaitez faire pivoter la forme. Par exemple, voici notre rectangle tourné de 45 degrés:
Aussi traduit (150, 20)Par défaut, la forme pivote autour de son coin supérieur gauche, mais vous pouvez également la faire pivoter autour d'un point différent. Nous verrons comment cela se fera plus tard dans le tutoriel..
Cela incline la forme le long de l'axe X (horizontal).
L'inclinaison le long de l'axe X fonctionne également en degrés. Par exemple, dans l'image ci-dessous, notre rectangle est incliné de 20 degrés le long de l'axe X:
Aussi traduit (150, 20)Cela incline la forme le long de l’axe Y (vertical) par degrés.
Skew fonctionne exactement de la même manière que SkewX, seule la transformation se produit verticalement le long de l'axe des ordonnées, comme suit:
Aussi traduit (150, 20)Maintenant que vous savez ce que les transformations font réellement, vous pouvez commencer à créer des animations entre différents états de transformation. Le processus de base comporte trois étapes:
de Etat.à Etat.de et le àEtat.Ceci est mieux compris à travers un exemple pratique, commençons donc par animer une Traduire transformation.
Vous vous souviendrez que plus tôt nous avons commencé avec notre rectangle bleu à sa position par défaut de 0 0, c'est à dire. 0 sur le X axe et 0 sur le Y axe. Nous allons définir cette position comme notre de Etat.
Nous avons ensuite examiné un exemple de ce même rectangle bleu avec les paramètres de traduction de 150 20 appliqué, c'est-à-dire. 150 sur le X axe et 20 sur le Y axe. Nous allons définir cette position comme notre à Etat.
En utilisant animateTransform nous pouvons faire glisser le rectangle en douceur entre notre de et notre à états sur une période de deux secondes.
Votre forme SVG, dans ce cas-ci un rectangle, devra avoir à la fois des balises d’ouverture et de fermeture.
le animateTransform attribut doit être placé entre ces balises comme suit:
Jetez un coup d’œil aux propriétés qui ont été définies dans animateTransform étiquette. Celles-ci contrôlent le fonctionnement de votre animation.
Nous avons mis type pour traduire, ce qui signifie que nous allons appliquer un Traduire type de transformation. Comme prévu, nous avons défini nos 0 0 position dans le de état, et notre 150 20 position dans le à Etat.
La valeur pour commencer est réglé sur 0s, ce qui signifie que l'animation commencera zéro seconde après le chargement, et dur est réglé sur 2s, ce qui signifie que l'animation se déroulera sur une période de deux secondes. Enfin, nous avons inclus repeatCount mis à indéfini ce qui signifie que l'animation sera rejouée en boucle.
Cela nous donne l'animation suivante:
Le processus est exactement le même pour la rotation des quatre autres types de transformations. Après avoir réglé le type valeur pour le type de transformation que vous voulez, entrez des valeurs pour votre de et à états de transformation.
Par exemple, nous pouvons utiliser ce qui suit animateTransform paramètres permettant de redimensionner notre rectangle à la taille que vous avez vue dans la section précédente sur la transformation d’échelle:
Comme les paramètres de transformation d’échelle multiplient la taille initiale de la forme, nous commençons par une valeur de 1 1 sur le de réglage. Faire cela définit sa taille originale à une multiplication de 1.
Notre à réglage de 3 1,25 animera notre transformation d'échelle jusqu'à trois fois la largeur d'origine sur l'axe X et un quart de la hauteur d'origine sur l'axe Y.
Remarque: Vos animations réelles dans le navigateur sont beaucoup plus fluides que le GIF de capture d'écran présenté ci-dessus.
Nous pouvons également combiner les deux animations que nous avons créées jusqu'à présent, afin de les traduire et de les redimensionner en même temps. Vous ne pouvez utiliser qu'un seul animateTransform tag à l'intérieur de votre rect tag, donc pour utiliser plusieurs animations, vous devrez incorporer un ensemble de g balises, qui représentent un groupe d'objets SVG.
Pour que cela fonctionne, ajoutez ouverture et fermeture rect Mots clés:
Ajoutez ensuite votre deuxième animation en dehors de la clôture tag, mais avant la fermeture étiquette. Dans ce cas, nous allons réintroduire notre transformation de traduction:
Nous avons maintenant à la fois l'échelle et la traduction traduisant des transformations animant simultanément:
Vous pouvez utiliser animateTransform une fois par forme ou groupe. Si vous devez ajouter d'autres animations, entourez votre code d'un autre ensemble de balises de groupe et imbriquez vos autres animateTransform tag à l'intérieur.
Examinons rapidement les trois types de transformation restants, chacun créé en modifiant uniquement le type, de et à paramètres, et également combiné avec notre animation de traduction originale.
Dans cet exemple type a été mis à tourner, de a été mis à 0 pour commencer avec aucune rotation, et à a été mis à 45 nous faisons donc une rotation de 45 degrés en deux secondes:
Dans les deux animations suivantes type a été mis à skewX et pince respectivement, de est réglé sur 0 pour commencer avec pas de biais, et à a été mis à 20 nous inclinons donc de 20 degrés en deux secondes:
Transformation animée de skewX
Transformation asymétrique animéeIl existe un nombre infini de possibilités pour les animations que vous pouvez créer à l'aide de ces techniques de base, mais l'une des plus utiles est la création d'icônes de chargement sur lesquelles vous auriez peut-être déjà utilisé des GIF animés..
Il s’agit d’une icône de chargement créée en cinq minutes environ à l’aide de Sketch:
Je l'ai ensuite exporté dans un fichier SVG qui m'a donné le code suivant:
Étant donné que cette icône comprend plusieurs formes dans un groupe, et comme nous l'avons appris ci-dessus, vous pouvez appliquer animateTransform à un groupe, j'ai ajouté mon code d'animation avant la dernière fermeture étiquette:
Le code ci-dessus définit l’icône pour une rotation de 0 à 360 degrés, c’est-à-dire un cercle complet.
Notez que cette fois-ci, j’ai également ajouté deux numéros supplémentaires à la fois. de et à réglages. Cela indique à l’animation de tourner autour d’un point situé sur l’axe interne X / Y de la forme. 18 18, c'est-à-dire que le centre de la forme est de 36 x 36 pixels.
Cela produit l'animation suivante:
Encore une fois, votre animation dans le navigateur sera plus fluide que le GIF ci-dessus, alors assurez-vous de vérifier la réalité. Comme vous pouvez le constater, il est très rapide et facile de créer des animations qui vous permettront d’obtenir une utilisation pratique.
Si vous n'avez pas encore essayé l'animation SVG, vous devriez maintenant disposer des outils nécessaires pour bien démarrer..
