Comment créer une animation SVG en utilisant CSS
L’animation de SVG peut se faire via des éléments natifs tels que
L’animation CSS pourrait également être une autre façon d’utiliser la bibliothèque JavaScript telle que SnapSVG. Dans cet article, nous verrons ce que nous pouvons éventuellement offrir avec CSS Animation in SVG.
1. Créer les formes
Tout d'abord, nous devrons dessiner les formes et les objets que nous voulons animer. Vous pouvez utiliser des applications comme Esquisser, Adobe Illustrator, ou Inkscape en créer un.
Pour cet exemple, j'ai dessiné un ciel nuageux comme toile de fond et une fusée-éclair tirant vers le haut, incluant les flammes:
Une fois cela fait, nous devons exporter chaque objet créé en SVG..
Je vais utiliser Sketch comme exemple pour cette étape. Sélectionnez l'objet que vous souhaitez convertir au format SVG. En bas à droite de votre fenêtre, cliquez sur Rendre exportable. Choisissez le format SVG, puis cliquez sur Exporter nom d'objet. Vous devez faire cet objet à la fois.
2. Insérer le SVG en HTML
Lorsque vous ouvrez le fichier SVG dans un éditeur de code, vous constaterez que les codes SVG sont assez compliqués. Par conséquent, avant de déployer le fichier SVG, nettoyons le code et optimisons-le avec cet outil de ligne de commande appelé SVGO..
lancement Terminal ou Invite de commande, et installez SVGO avec cette ligne de commande:
[sudo] npm installer -g svgo
Tun la commande, svgo, sur le fichier SVG en utilisant --joli pour produire du code SVG lisible:
svgo rocket.svg --pretty
Si vous avez plusieurs SVG dans un répertoire, vous pouvez les optimiser tous en même temps. En supposant que le répertoire est nommé /images, puis à partir du répertoire parent, utilisez cette commande:
svgo -f images --pretty
Voyons la différence avant et après l'utilisation de SVGO.
Copiez le code dans le fichier SVG et collez-le dans un fichier HTML. Nous allons travailler sur un espace de travail de 800 pixels par 600 pixels de large, n’oublions pas de définir le largeur sur l'élément SVG.
Le fichier SVG est défini dans le fichier HTML. Nous devrons définir un identifiant pour chaque objet afin de pouvoir les sélectionner ultérieurement dans CSS.
Pour ce tutoriel, nous devons définir l'ID de la fusée et des flammes, ainsi que de certains nuages. Pour que les objets gèrent plus tard la phase d’animation, nous devons ajouter identifiant - vous pouvez aussi utiliser classe - à chaque objet. A ce stade, le code ressemblera à ceci:
3. Animer en utilisant CSS
Maintenant amusons-nous. Le plan est de propulser la fusée dans l'espace. La fusée est divisée en deux groupes; la fusée elle-même et la flamme.
Tout d’abord, nous plaçons la fusée au milieu de l’espace de travail, comme suit:
#rocket transform: translate (260px, 200px);
Ce que vous voyez est ceci:
Maintenant, pour donner l’impression que la fusée monte, il faut créer l’illusion de la chute des nuages. Le CSS que nous utilisons pour cela est:
# cloud1 animation: chute 1s linéaire infinie; @keyframes fall from transform: translateY (-100px); à transformer: translateY (1000px)
Pour le rendre encore plus réaliste, animons quatre nuages et faisons-les “tomber” à des vitesses différentes. Nous allons également les positionner différemment de l'axe X.
Le deuxième nuage aura un code comme celui-ci:
# cloud2 animation: fall-2 2s linear infinite; @keyframes fall-2 from transform: translate (200px, -100px); à transformer: traduire (200px, 1000px)
Notez que nous avons déplacé le nuage # 2 un peu à droite, en 200px avec Traduire. A ce stade, le résultat devrait ressembler à ceci.
Faisons en sorte que la fusée prenne vie. Nous allons assigner une image clé d'animation, comme suit:
#rocket animation: popup 1s eas infinite; @keyframes popup 0% transform: translate (260px, 200px); 50% transformer: traduire (260px, 240px); 100% transformer: traduire (260px, 200px);
Et ajoutez également une animation à la flamme de la fusée:
#flame animation: shake .2s linear infinite; @keyframes shake 0% transformer: traduire (55px, 135px) rotation (7deg); 20% transformer: traduire (55px, 135px) tourner (0deg); 40% transformer: traduire (55px, 135px) tourner (-7deg); 60% transformer: traduire (55px, 135px) tourner (0deg); 100% transformer: traduire (55px, 135px) tourner (0deg);
Droite! Maintenant que tous nos codes sont définis, l'animation devrait fonctionner sur notre SVG..
Jetez un coup d'œil à notre fusée explosant dans l'espace.
Pensée finale
L'animation n'est pas la fonctionnalité la plus simple à saisir en CSS. Mais espérons que vous trouverez ce tutoriel comme un bon point de départ pour explorer davantage l’animation CSS sur SVG; vous seriez surpris de savoir ce que vous pouvez réaliser avec CSS Animation à portée de main.
Si vous voulez commencer par les bases, vous pouvez commencer ici avec ce post: À regarder dans: Animation SVG (Scalable Vector Graphics) ou suivez le reste de la série SVG.
- Voir la démo
- Source de téléchargement
