Contenu
- 01. Créer et enregistrer
- 02. Optimiser pour le Web
- 03. Configurer un document HTML
- 04. Construisez la mise en page
- 05. Placez le SVG
- 06. Ajouter des classes au SVG
- 07. États initiaux
- 08. Déclarez les animations
- 09. Attribuer une animation et des propriétés
- 10. L'animation rectangle
- 11. L'animation de texte
- 12. Retarder le démarrage
- 13. Émuler le dessin au trait
- 14. Image-clé du premier dessin au trait
- 15. Tracez les lignes
- 16. Remplissez la forme
En ce qui concerne l'animation avec des SVG, une désactivation majeure peut être l'idée de s'enliser dans les bibliothèques JavaScript. Cependant, cela ne doit pas être le cas. CSS peut gérer la sélection de chemins individuels dans un SVG pour créer des effets. Le simple fait de connaître les bases peut signifier qu'il est possible de transformer des icônes plates et clichées en quelque chose d'un peu plus impressionnant. Il est donc peut-être temps de passer en revue les étapes fondamentales de l’optimisation et de l’animation SVG. Lorsqu'il est intégré dans différents designs, il ne faut pas longtemps pour se rendre compte que les possibilités sont infinies.
Pour plus d'inspiration de mouvement, consultez le guide Creative Bloq sur les exemples d'animation CSS et comment les coder.
Économisez 100 £ avec un billet super lève-tôt pour Générer du CSS, la conférence Web d'une journée organisée par Creative Bloq, le magazine Web Designer et le magazine net. Réservez ici.
01. Créer et enregistrer
Commencez par créer un SVG avec lequel travailler. Pour ce didacticiel, nous utiliserons un graphique simple réalisé dans Illustrator. Lorsque vous utilisez Illustrator pour exporter un SVG, réduisez la taille du plan de travail pour l'adapter au graphique, puis cliquez sur "Enregistrer sous". Sélectionnez SVG dans le menu déroulant «Enregistrer sous le type», puis «Code SVG…» dans la boîte de dialogue Options SVG.
02. Optimiser pour le Web
La suppression des balises inutiles rendra l'image plus facile à traiter. Cela peut être fait manuellement en copiant le code dans votre éditeur préféré et en supprimant les balises vides et les métadonnées. Alternativement, une ressource fantastique appelée SVGOMG le fera automatiquement. Collez le code dans la zone «Coller le balisage» de l’interface SVGOMG, puis copiez à nouveau l’image à l’aide du bouton en bas à droite.
03. Configurer un document HTML
Ouvrez l'éditeur de code de votre choix et configurez un document HTML vierge. Nous écrirons l'animation CSS dans un fichier appelé main.css, alors créez-le aussi. Pour garder les choses concentrées sur l'animation, nous avons intégré la version CSS uniquement de Bootstrap 4.1.3.
04. Construisez la mise en page
Construisons les os de notre mise en page et créons un espace pour notre SVG. Nous avons ajouté un en-tête et deux colonnes: une à gauche pour du texte et une à droite, qui contiendra le SVG que nous allons animer. Pour animer la page, utilisez un deuxième SVG statique comme arrière-plan sur la balise body.
05. Placez le SVG
Nous utilisons notre animation pour rendre l'introduction en haut de la page plus intéressante. Collez le code SVG optimisé dans la deuxième colonne de la page. Si vous utilisez bootstrap, donnez au SVG la classe img-fluide pour s'assurer qu'il évolue sur les mobiles.
06. Ajouter des classes au SVG
L'ajout de classes au SVG permet au CSS de sélectionner les formes individuelles dans l'image. Cela signifie que vous pouvez animer différentes formes de l'image à différents moments, créant un effet plus complexe.
svg> g> rect width = "147.4107" height = "68.7917" x = "31.2946" y = "114.1042" rx = "4.5882" ry = "3.9565" fill = "# 2a7fff" /> chemin d = "... "vector-effect =" non-scaling-stroke "stroke-width =". 470476156 "font-size =" 12 "fill =" # fff "fill-rule =" evenodd "stroke =" # fff "stroke-linecap = "rond" /> / g> / svg>
07. États initiaux
La sélection de nos éléments SVG en CSS est la même que pour tout autre élément. Nous utilisons nos classes pour sélectionner ces éléments dans le SVG. Les deux parties de notre SVG commenceront comme masquées lors du chargement de la page, alors utilisons CSS pour définir l'opacité des deux éléments sur 0.
path.rectText {opacité: 0; } rect.rectBackground {opacité: 0; }
08. Déclarez les animations
Nous devons déclarer le nom et les images clés de chaque animation afin que CSS sache ce que nous voulons faire lorsque nous lui demandons d'effectuer un effet. J'ai choisi textDraw et rectFade, comme ils décrivent chaque animation. rectFade sera une simple animation en deux étapes. textDraw aura une étape intermédiaire supplémentaire.
@keyframes textDraw {0% {} 50% {} 100% {}} @keyframes rectFade {de {} à {}}
09. Attribuer une animation et des propriétés
Nous ajoutons le rectFade animation à la rectBackground élément et donnez-lui une durée d'une seconde. Un facilité cubic bezier est utilisé pour lui donner une sensation plus douce. Nous ajoutons les attaquants ainsi l'élément conserve les propriétés de la dernière image clé à la fin de l'animation.
rect.rectBackground {opacité: 0; animation: rectFade 1s cubique-bezier (0,645, 0,045, 0,355, 1) vers l'avant; }
10. L'animation rectangle
Avec seulement deux images clés, tout ce que nous devons faire pour notre rectangle est de définir un ensemble d'attributs de début et de fin. Commençons par un 1% largeur et finition sur 100% pour donner une "expansion au bon effet". Nous pouvons également définir opacité: 1 à la dernière image clé pour que la forme s’apparaisse en même temps.
@keyframes rectFade {from {width: 1%; } à {largeur: 100%; opacité: 1; }}
11. L'animation de texte
Nous allons créer un effet de tracé de ligne sur notre texte, puis utiliser un fond pour se fondre. Pour configurer l'animation du texte, nous lui donnons notre textDraw avec une durée de quatre secondes. Le bezier cubique a été modifié sur cette marche pour lui donner un rythme de mouvement légèrement différent.
path.rectText {opacité: 0; animation: textDraw 4s cubic-bezier (.56, -0.04, .32, .7) vers l'avant; }
12. Retarder le démarrage
Notre texte doit s'exécuter juste au moment où le rectangle a fini de se fondre. Le rectangle ayant une durée d'une seconde, retardez le début de l'animation du texte d'ici là.
path.rectText {opacité: 0; animation: textDraw 4s cubic-bezier (.56, -0.04, .32, .7) vers l'avant; retard d'animation: 1 s; }
13. Émuler le dessin au trait
Pour obtenir notre effet de dessin au trait, nous utiliserons le accident vasculaire cérébral-dasharray et stroke-dashoffset paramètres. Vos valeurs seront différentes des miennes en fonction du SVG que vous utilisez. Pour trouver votre valeur, utilisez vos outils de développement préférés et augmentez accident vasculaire cérébral-dasharray de 0 jusqu'à ce que toute la forme soit recouverte d'un seul trait.
path.rectText {opacité: 0; accident vasculaire cérébral-dasharray: 735; animation: textDraw 4s cubic-bezier (.56, -0.04, .32, .7) vers l'avant; retard d'animation: 1 s; }
14. Image-clé du premier dessin au trait
Maintenant, nous avons notre très grand trait qui couvre tout le chemin du texte, décalons-le de sa propre longueur pour le repousser efficacement. Utilisant stroke-dashoffset pour la même valeur que notre Dasharray devrait le faire. Définissons ceci dans notre première image clé. Nous allons également rendre le remplissage de la forme transparent et définir le contour sur blanc si ce n'est pas déjà fait.
0% {remplissage: rgb (255, 255, 255, 0); AVC: #fff; course-tableau de bord: 800; opacité: 1; }
15. Tracez les lignes
Notre image clé du milieu apparaît à 40% à travers l'animation. Nous apportons le stroke-dashoffset revenir à zéro pour que le tiret couvre tout le chemin. Nous pouvons rajouter le remplissage transparent à ce stade pour nous assurer que le remplissage n'apparaît qu'une fois le dessin terminé.
40% {stroke-dashoffset: 0; remplir: rgb (255, 255, 255, 0,0); }
16. Remplissez la forme
Pour la dernière partie de l'animation, nous remplirons la forme en blanc. Tout ce que nous devons faire pour la dernière image clé est d'augmenter la valeur alpha de la couleur de remplissage. Cela crée l'effet de fondu d'entrée du remplissage.
100% {remplissage: rgb (255, 255, 255, 1); stroke-dashoffset: 0; opacité: 1; }
Cet article a été initialement publié dans le magazine de conception Web créative Concepteur Web. Acheter le numéro 286 ou alors s'abonner.
