Comment créer une icône de chargeur avec des animations SVG

Dans ce tutoriel, vous allez apprendre à créer une icône de chargeur très simple à l'aide d'animations SVG. Ce que nous allons couvrir est différent des animations CSS: les animations SVG résident dans le balisage SVG actuel. Commençons par regarder la syntaxe.

Regarder le screencast

Rafraîchissement rapide en SVG à codage manuel

Avant de poursuivre, si vous avez besoin de vous rappeler les bases en matière de codage à la main SVG, Kezz vous a couvert:

La syntaxe

La plupart des navigateurs modernes prennent en charge l'animation de SVG en utilisant quelque chose appelé «SMIL», qui signifie «langage d'intégration multimédia synchronisé». Ce langage vous permet d’animer certains attributs de base et de transformation d’un fichier SVG. Par exemple, vous pouvez animer des positions X et Y, une transformation de rotation ou la couleur de remplissage d'un élément. Regardons deux exemples qui vous aideront à comprendre les bases.

Exemple 1

Pour notre premier exemple, nous commençons par un élément, qui a les attributs width, height et viewBox définis.

Nous plaçons ensuite un rectangle contenant des valeurs de positionnement, des dimensions et une couleur de remplissage..

Pour animer ce rectangle, nous allons utiliser une fermeture automatique élément, à l'intérieur la .

Dans ce nous ajoutons quelques attributs, en utilisant d'abord Nom d'attribut définir lequel des Les attributs de nous voulons animer (dans ce cas le X position).

Puis on définit un de valeur et un à valeur. Nous utilisons dur pour spécifier une durée, et repeatCount d'indiquer quel type de répétition nous aimerions que l'animation ait.

C'est tout! Vous verrez dans notre démo que nous avons maintenant un élément d'animation dans un SVG.

Nous pouvons aussi animer plus d’un attribut sur notre rectangle; tout ce dont nous avons besoin est d'ajouter un autre qui spécifie un autre attribut. Animons aussi la largeur:

Que diriez-vous d'un tiers? Changeons aussi sa couleur de remplissage.

Exemple 2

Le deuxième exemple animera un transformer attribut. Nous allons commencer avec le même , mais avec un peu différent :

Cette fois, au lieu d’ajouter un élément, nous allons ajouter un élément. Ses propriétés visent un Nom d'attribut, alors demander le type de transformer. On peut utiliser commencer pour spécifier quand l'animation doit commencer, dur pour la durée, puis spécifiez ses coordonnées sous la forme de trois valeurs: angle, X, et y. Dans notre cas, nous utilisons ces coordonnées pour spécifier une transformation en rotation.

Comme avec notre exemple précédent, nous pouvons ajouter plus  éléments pour animer plus d'une propriété. Cependant, dans le cas de transformations, nous ne pouvons les exécuter que dans l'ordre. Il n'est pas possible d'animer plusieurs propriétés en même temps..

Essayez vous-même, en ajoutant un deuxième ciblage d'animation échelle:

Ces deux exemples vous ont montré les bases du travail avec des animations SVG. Utilisons ce que nous avons appris pour créer une animation de chargeur.

Création d'une icône de chargeur animé

Les icônes de chargeur peuvent prendre n’importe quelle forme - nous ne sommes limités que par notre imagination. Je vais vous montrer deux exemples qui, je l’espère, vous inspireront pour concrétiser vos propres idées..

Exemple 1

Pour notre premier exemple, je commencerai par le suivant :

Ajoutons maintenant trois rectangles, qui vont finalement changer de hauteur pour suggérer que quelque chose se charge. Voici le premier:

Et voici les deux autres avec elle-vous remarquerez qu'ils sont identiques, mais ont des couleurs de remplissage différentes, sont décalés le long de la X axe, et ont des animations légèrement retardées:

Cela nous donne une bonne animation de chargement! Améliorons légèrement en animant également le y position de chaque rectangle. Pour ce faire, nous devons ajouter trois autres éléments:

Exemple 2

Ce dernier exemple est un peu plus complexe, car il implique la création du fichier SVG dans un autre programme, puis sa copie dans un éditeur de code, puis l’animation de ses propriétés..

Nous commencerons cependant sur un territoire familier, en codant à la main un :

À notre nous ajoutons un avec quelques attributs de base:

Pour le contenu de notre ré (ce qui définit la manière dont le chemin est tracé) nous aurons besoin d’un peu d’aide, lancez donc Adobe Illustrator et commencez à dessiner (ou copiez simplement le code ci-dessous, évidemment…)

Maintenant animons notre en le tournant, comme nous l'avons fait dans notre exemple précédent. Nous ajoutons ce qui suit . 

C'est tout! Nous avons maintenant une simple animation de chargeur tournant. Voyez quelles améliorations vous pouvez y apporter!

Conclusion

Dans ce tutoriel, nous avons commencé avec les bases, apprendre à utiliser le élément dans un simple SVG codé à la main. Nous nous sommes ensuite inspirés de cela pour introduire le élément. Ensuite, nous avons pris ce que nous avions appris et créé notre propre icône de chargeur animé. Enfin, nous avons créé un autre, mais en utilisant le plus complexe élément que nous avons généré avec l'aide de Adobe Illustrator.

Ces étapes auraient dû vous permettre de bien comprendre le fonctionnement de l'animation SVG. J'ai hâte de vous voir dans le prochain tutoriel!

Liens utiles

• SVG SMIL sur caniuse.com
• Animation SVG avec SMIL par Mozilla
• Chargeurs SVG par Sam Herbert
• SVG Chargement des icônes sur CodePen, par Aurer