Codificación creativa: animación de SVG con códigos CSS sencillos

1. Bienvenue ! Introduction aux cours: Avez-vous déjà voulu rendre vos conceptions vivantes ou peut-être avez-vous entendu parler de codage créatif, mais n'avez pas eu la chance de creuser plus profondément. Salut. Je m'appelle Agan. J' aime te montrer quelque chose de très excitant. Animer SVG avec un CSS simple. J' ai hâte de vous montrer la magie qui vient de la combinaison SVG et CSS. CSS est un langage de codage. Vous pouvez styliser des sites Web avec elle. Vous pouvez faire les animations. Alors que SVG est un format graphique vectoriel. Si vous n'avez pas d'expérience dans le codage, ne vous inquiétez pas , j'essaie de tout expliquer étape par étape, sorte que vous pouvez suivre les cours. 2. Objectifs des cours: Le but du cours est de montrer à tous ceux qui s'intéressent à l'encodage graphique que SVG et CSS combinés sont d'excellents outils pour faire des éléments animés amusants sur le Web. Vous n'avez pas besoin d'être un développeur expérimenté ou un concepteur pour en profiter au maximum. Le résultat final du cours sera des graphiques animés codés par vous-même. Le code est destiné aux personnes qui aiment le codage, concepteurs qui aimeraient animer, faire des projets vectoriels avec le code, tous ceux qui aiment créer des choses sur l'ordinateur et le Web. 3. Outils: Pour ces cours, nous allons utiliser quelques outils. Tout d'abord, votre navigateur préféré et ses outils de développement. Les outils de développement font partie de chaque navigateur Web et vous aident à déboguer votre code. Je te montrerai quand les trouver. Deuxième outil, est un éditeur de code. Si vous n'en avez pas déjà utilisé, je recommanderais Atom ou Sublime Text. Actuellement, j'utilise Atom. C' est un éditeur gratuit que vous pouvez télécharger à partir de atom.io et est disponible pour tous les systèmes. La dernière chose dont nous avons besoin est le fichier SVG. Vous trouverez les fichiers SVG dans le paquet que je partage avec vous. 4. Matériaux: N' oubliez pas de télécharger le paquet avec tous les documents comme les fichiers HTML, les solutions à mes défis et les fichiers SVG. Nous sommes dans la section de votre projet et sur la droite vous pouvez voir les fichiers joints. Veuillez télécharger ce package. Le paquet se compose de plusieurs dossiers. Vous avez un modèle HTML, qui est fondamentalement un modèle HTML simple où vous pouvez coller votre code SVG. Vous pouvez également voir les fichiers SVG, donc différents graphiques SVG que j'ai préparé spécialement pour vous. Vous pouvez animer certaines choses là-bas. On a de l'argent, des yeux, et d'autres choses. Vous avez aussi l'exercice oculaire et l'exercice que je vous explique dans la vidéo, y compris le visage heureux, vous avez la solution à l'exercice oculaire et vous pouvez consulter d'autres animations SVG amusantes pour des inspirations. 5. Introduction au format SVG: Avant de commencer à taper dans le code, nous allons en savoir plus sur SVG. SVG est synonyme de graphiques vectoriels évolutifs. Il s'agit d'un format d'image vectorielle XML. Aujourd'hui SVG est utilisé pour tout. Des logos, des icônes, des iconographies au contenu animé. SVG peut être contrôlé par CSS ; ce dont nous allons profiter dans nos classes. Comme mentionné SVG est des graphiques vectoriels. Ça veut dire qu'il est net et beau, peu importe les résolutions. Vous pouvez changer sa hauteur et sa largeur, et cela n'affectera pas sa qualité. Donc, résumant les principales fonctionnalités SVG sont ; SVG est évolutif, il évolue de haut en bas sans perdre de qualité, SVG est un graphisme vectoriel, SVG est clair, SVG est contrôlé par CSS, ce qui rend facile pour nous pour s'amuser et mettre en œuvre quelques effets simples mais accrocheurs. 6. Introduction aux CSS (uniquement pour les non-codeurs): Cette leçon du cours est axée sur les personnes qui n'ont pas eu l'expérience de codage en CSS. Si vous êtes déjà familier avec le style des éléments du site Web, vous pouvez ignorer cette partie des cours. Alors, commençons par la question, qu'est-ce que CSS ? CSS est des feuilles de style en cascade. Est un langage de feuille de style utilisé pour coiffer les éléments de votre site Web, qui sont placés grâce au HTML. CSS décrit comment les éléments doivent être placés, comment ils devraient ressembler, etc. Nous pouvons également animer les éléments, ce qui est la chose sur laquelle nous allons nous concentrer pendant ces cours. Alors, qu'en est-il de la syntaxe CSS ? Sur le côté droit, vous avez le fichier CSS. Un jeu de règles CSS se compose d'un sélecteur et d'un bloc de déclaration. Le sélecteur, sélectionne en fait le contenu que vous souhaitez styliser, il épine à l'élément HTML. Donc, dans ce cas, nous voulons styler P, qui signifie des paragraphes et dans notre HTML, c'est sur le côté gauche. Vous pouvez voir que nous avons des paragraphes. P ici, et P comme un sélecteur dans la feuille de styles. Le bloc de déclaration se compose d'une ou de plusieurs déclarations, et elles sont séparées par des points-virgules. Souviens-toi d'eux. Chaque déclaration se compose de la propriété et de sa valeur. Ainsi, par exemple, la taille de la police, la couleur, la marge supérieure et le texte aligné sont des propriétés, et leur valeur est définie. Il existe différents types de sélecteurs. premier est le sélecteur d'élément qui sélectionne l'élément en fonction du nom de l'élément en HTML. C' est ce que je mentionnais déjà. Ici, nous avons le sélecteur d'éléments P, et il sélectionne tous les P, tous les paragraphes dans le document HTML. Donc, dans notre cas, tous les paragraphes auront la taille de police 15 pixels, couleur rose, marge supérieure 30 pour cent, et ils seront alignés au centre.Vous pouvez voir que les paragraphes sont roses, et aligner centré. Un autre sélecteur est le sélecteur de classe, que nous allons utiliser très souvent dans notre cours. Donc, s'il vous plaît restez concentré. Le sélecteur de classe, ici, sélectionne les éléments de l'attribut de classe spécifique. Pour sélectionner des éléments avec une classe spécifique, vous devez écrire un point, et le nom de la classe. Dans le document HTML, vous devez ajouter la classe d'attribut, et le nom, vous l'ajoutez pour la classe en CSS, donc le mettre en surbrillance. Le paragraphe avec le code de classe mis en surbrillance a maintenant un fond gris clair. On peut le changer pour une couleur différente. Le dernier secteur est le sélecteur d'ID, ici. L' ID d'un élément doit être unique dans une page. Ainsi, le sélecteur d'ID utilisé pour sélectionner un élément unique sur l'ensemble du site Web. Pour sélectionner un élément de l'ID spécifique, nous écrivons un hachage, puis le nom de l'ID. Donc, ici, si nous voulons avoir le titre, avec une taille de police plus grande, nous pouvons ajouter des attributs d'ID, et le nom de cet ID. Donc, nous avons l'intro. Si nous actualisons la page, nous pouvons voir que le titre a l'introduction de l'ID. Grâce à cela, notre texte a une taille de police de 20 pixels. Donc, pour la révision rapide, nous avons mentionné trois secteurs différents dans CSS ; sélecteur d' éléments, sélecteur de classe et sélecteur d'ID. Dans ce cours, nous allons utiliser le sélecteur de classe très souvent. Rappelez-vous que point signifie classe et après point nous devons définir le nom de la classe dans le fichier CSS. En HTML, nous devons ajouter à l'élément donné, l'attribut de classe, et le nom de la classe. Bien sûr, nous pouvons ajouter des classes à plusieurs éléments. 7. Code SVG: Jetons un coup d'oeil dans le code SVG. Nous pouvons ouvrir chaque fichier SVG dans l'éditeur de code, et nous pouvons voir ce qu'il y a là-bas. J' utilise Atom, et comme vous pouvez le voir, nous avons un code SV. Comme mentionné, SVG a le format graphique Vectra basé sur XML. C' est similaire au HTML. Si vous connaissez la syntaxe, vous pouvez voir leurs similitudes. Nous avons différents éléments comme le cercle et le chemin, et ils décrivent notre forme. Alors, ouvrons SVG dans le navigateur Web et voyons comment il est rendu. Si nous ouvrons des outils de développement, vous pouvez inspecter chaque élément de SVG. Pourquoi c'est si cool ? Le plus grand avantage est que nous pouvons appliquer des styles et le changer, nous pouvons animer certains éléments ou les cacher, nous donne des tonnes de possibilités surtout lorsque nous combinons du code SVG avec des animations CSS simples. Comment le faire ? Voyons la prochaine leçon.. 8. Incorporer des graphiques SVG dans un document HTML: En fait, il existe plusieurs façons d'incorporer SVG au fichier HTML. Sera siffler celui qui nous permet d'utiliser l'animation CSS très facilement. Nous avons un index, et nous avons emptystyles.css. Pour joindre une feuille de style à notre document HTML, nous devons ajouter une balise de lien. Comme vous pouvez le voir, nous le référençons au répertoire où se trouvent nos styles. Nos styles sont dans le dossier CSS. Donc, c'est pour ça que nous avons ce chemin. Bien sûr, nous devons le sauver. Si nous actualisons la page, rien ne se passe car le document HTML est vide. Copions tout le contenu et collez-le entre le corps du texte. Nous pouvons supprimer les deux premières lignes parce qu'elles ne sont pas nécessaires. Rafraîchissons la page. Comme vous pouvez le voir, notre fichier SVG est intégré dans le document. Si vous voulez changer la taille de celui-ci, vous pouvez ajouter la classe, nous pouvons supprimer ID, et au lieu de regarder la classe par exemple, copier-coller. Donc maintenant, nous sommes en mesure d'ajouter une nouvelle classe à notre feuille de style CSS. Rappelez-vous, comment nous devrions construire ce genre de sélecteur. Eh bien, la classe commence toujours par un point puis le nom, « Happy Face ». Comme vous pouvez le voir éditeur codé que votre nous donne déjà quelques conseils concernant le lien. D' accord. Alors, définissons la hauteur. Par exemple, nous voulons l'avoir comme 500 pixels. Rafraîchissons la page. Comme vous pouvez le voir, la taille du fichier SVG a changé. 9. Animations CSS: Concentrez-vous maintenant sur CSS Animation. Bien que ce soit un sujet assez complexe, nous n'en utiliserons qu'une partie. Si vous souhaitez en savoir plus, il existe des tonnes de cours et de cours différents. Je vais vous montrer les choses les plus utiles concernant CSS Animations. Donc, nous définissons CSS Animation dans notre fichier styles.css dans cette feuille de style. Donc, nous créons une animation CSS en utilisant un mot-clé qui est des images clés. Les images clés sont suivies du nom simple. Par exemple, ajoutons du rebond. Chaque animation se compose de points d'arrêt. Cela signifie que nous définissons la progression de l'animation par des pourcentages. Nous avons zéro, nous avons par exemple la moitié de l'animation, et ce qui se passe là-bas, et le dernier point. Bien sûr, vous pouvez définir des nombres différents selon ce que vous voulez accomplir. Parce que c'est une animation de rebond, nous aimerions que notre visage heureux rebondisse. Rebondir, il se déplace de haut en bas. Alors apprenons à propos de la transformation. Transform est une propriété CSS, et comme vous pouvez le voir comme Atom nous donne un indice, il existe différentes options que vous pouvez implémenter à vos graphiques, comme la rotation, comme l'échelle. Vous pouvez également utiliser translate dans un axe différent. Nous avons X, Y et Z. Si vous voulez déplacer quelque chose à droite et à gauche, nous allons utiliser translate X. Si vous voulez rebondir quelque chose de haut en bas, nous utiliserions translate Y. Disons que nous aimerions pour que notre visage heureux rebondisse de 50 pixels. Nous pouvons pour l'instant nous débarrasser des points d'arrêt vides. L' animation est créée, alors jetons un coup d'oeil dans notre index HTML. Nous avons notre fichier SVG qui est ici, et nous avons un visage heureux de classe. Nous voulons ajouter à cette classe l'animation. Donc, revenons aux styles. Donc nous avons notre animation déjà créée, mais elle n'est pas encore exécutée, rien ne se passe, vérifions. Le visage heureux, il ne bouge pas. Nous devons ajouter l'animation à notre sélecteur. Ainsi, comme mentionné, nous avons déjà créé la classe. Rappelez-vous que la classe commence par un point dans un fichier CSS. Ici, on a notre nom. Alors, comment nous exécutons l'animation ? Nous devons ajouter la propriété CSS qui est le nom de l'animation. Notre nom d'animation est rebondir. Plus tard, nous devons définir la durée de l'animation. Prenons une seconde. Bien sûr, vous pouvez créer d'autres horaires comme cinq demi-seconde comme ce qui représenterait 500 millisecondes, mais notre animation aura une seconde durée. La dernière chose importante est le nombre d'itérations d'animation. Alors combien de fois l'animation sera répétée. Pour nous, nous aimerions l'avoir infinie. Notre visage rebondit, et vérifions-le avec les outils de développement. Donc, c'est notre élément qui a le visage heureux, et cet élément a de l'animation à trouver. Si nous le décochons, l'animation sera exécutée. Cela signifie que cette ligne de code est commentée. Donc, navigateur Web qui va le lire. Bien sûr, nous pouvons créer des animations plus complexes. Créons un autre point de rupture. Nous pouvons également utiliser transform, et nous pouvons mettre à l'échelle l'élément. L' un représente 100 pour cent. Ainsi, l'élément reste le même. Si nous voulons qu'elle soit grande de 50 %, nous devons en ajouter cinq. Ça veut dire 150 pour cent. Nous pouvons également faire pivoter l'élément de 10 degrés. Rappelez-vous que nous avons défini la rotation par degrés. D' accord. Sauvons. Rappelez-vous de l'enregistrement, et actualisons notre index HTML. Wow ! Cette animation est abondante, mais vous pouvez expérimenter avec elle. 10. Animer des parties sélectionnées de graphiques SVG: Dans la leçon précédente, nous animions tout l'élément SVG. Comme vous pouvez le voir, la classe est ajoutée à la balise SVG. Donc, tout le visage heureux rebondissait. Qu' en est-il de l'animation d'une partie en particulier ? Jetons un coup d'oeil. Les résultats finaux que nous aimerions obtenir sont les parties de l'œil qui bougent. Comme vous pouvez le voir, la partie blanche est stable, et seul le centre de l'œil se déplace. Alors, commençons par le début. Dans le paquet que je partage avec vous, il y a un dossier d'exercice de l'œil. Vous pouvez le déposer sur atome, et il s'ouvrira. Nous avons l'index, et les styles CSS. Dans l'index, comme vous le voyez déjà, il y a du code SVG. Donc, l'œil devrait être généré. Allons l'ouvrir. L'œil est stable, il ne bouge pas. Donc, nous devons ajouter une animation CSS dans cette feuille de style. Notre feuille de style a déjà quelques styles de base qui ajoute de la couleur rose dans notre fond, et définir la taille pour l'œil. Vous pouvez donc ajouter vos styles en dessous de la ligne 20. D' accord. Nous aimerions que cette partie bouge. Alors utilisons inspecter. Comme vous pouvez le voir, ce g signifie groupe. Ceci est un élément de groupe. Il a déjà son ID, mais peut-être que nous pouvons ajouter la classe. Trouvons-le dans le HTML. C' est ce groupe. Je commente  : « C'est la partie qui va être animée. » Nous pouvons ajouter « Centre », pour ajouter la classe « Eye center », et nous devrions ajouter cette classe à CSS. Mais ce qu'il faudrait faire en ce moment, c'est de différencier l'animation. Si vous vous souvenez, l'œil bougeait un peu vers la gauche, un peu vers la droite, dans le fond, et il s'agrandissait. Alors, essayons ce type de mouvement. Nous allons créer une animation, rappelez-vous que cela commence par des images clés, MoveEye. Rappelez-vous que si vous souhaitez avoir plus d'un mot, le meilleur jeu est d'utiliser la case chameau. D' accord. Donc, disons que 20 pour cent voudraient traduire, dans l'axe des x vers la gauche, donc moins 50 pixels, et de 40 pour cent voudrait descendre. Transformez donc. TranslateY moins 30 pixels. Je devine juste les chiffres pour l'instant, il va le vérifier bientôt. Je voudrais aussi le mettre à l'échelle, de 20 pour cent, disons. Nous économisons, et nous rafraîchissons. Comme vous pouvez le voir, rien ne se passe. La raison en est que nous devrions exécuter les animations. Donc, nous devrions ajouter ceci à notre centre des yeux. Nom de l'animation, MoveEye, animation-durée une seconde et animation-itération-comptage infini. Enregistrez et actualisez la page. Comme vous pouvez le voir, l'animation est trop rapide, et le nombre de pixels doit également être modifié. Peut-être que nous pouvons changer ça à 20 pour cent, et à 10, et changer la durée de l'animation à trois secondes. C' est beaucoup mieux en ce moment. On peut aussi régler ça un peu. Donc l'échelle serait de 15 pour cent, et la durée sera de quatre secondes, je vais également changer ce point d'arrêt à 60 pour cent. Voyons voir. Nous nous rapprochons. C' est assez similaire, non ? Nous pouvons aussi faire disparaître ce cercle. Allons le découvrir. Eh bien, pendant qu'il bouge, c'est assez difficile de l'obtenir, alors commençons l'animation pendant une seconde. Trouvons, on l'a, presque là. Donc ce cercle définit ce cercle blanc dans l'œil, celui-ci. Nous pouvons également ajouter le 'Plus d'autres » en arrivant à indexer HTML, et ajouter la classe. Voici déjà la STO de classe. Ou on peut en ajouter un autre après l'espace. Donc, disons, vous pouvez trouver une solution à ce défi dans le paquet, eye-results. 11. Codepen – Outil pratique: Ce que je voudrais mentionner, c'est cette plateforme Codepen. Si vous n'aimez pas travailler sur des fichiers HTML à l'aide de l'éditeur de code, vous pouvez utiliser Codepen. C' est une plate-forme où les gens créent de courts extraits. Jetons juste un coup d'oeil. Nous cliquons sur un nouveau stylo et nous avons une fenêtre HTML, CSS et JS. Donc, nous allons travailler sur l'exemple. Vous pouvez prendre le fichier SVG choisi et l'ouvrir dans atom. Nous copions le code SVG entier et le collons en HTML. Comme vous pouvez le voir, le SVG est généré. Nous pouvons ajouter la classe, le type de visage. Vous créez une classe dans la fenêtre CSS. Comme vous pouvez le voir, tout est rafraîchi. Donc, c'est très facile à travailler. Bien sûr, nous pouvons créer de l'animation ici. Réglage du point d'arrêt, l'opacité changerait à zéro, et bien sûr, nous devons appliquer l'animation, et l'animation fonctionne. Vous pouvez enregistrer le code en cliquant sur Enregistrer, et vous avez l'URL, que vous pouvez partager avec moi dans le projet de classe. Je vous souhaite tout le meilleur et de garder les doigts croisés pour vos projets. Faites-moi savoir comment est votre travail avec les animations SVG et CSS. Bonne chance ! 12. Projets du cours: Pour le projet de classe, tout le monde est encouragé à sélectionner un graphique vectoriel au format SVG et à créer sa propre animation. Les fichiers SVG sont disponibles dans le package. Les concepteurs sont également invités à utiliser leurs propres illustrations SVG. Téléchargez les fichiers de cours sous l'onglet Votre projet. Il est placé sur le côté droit. Appliquez votre propre animation CSS au fichier SVG choisi. Vous décidez ce qui sera animé. Montrez-nous votre travail en partageant des extraits de code, des captures d'écran ou des vidéos, ou vous pouvez envoyer un lien vers le code que vous avez créé. N' hésitez pas à poser des questions dans la section « communauté ». Bonne chance. Que les animations CSS et SVG soient avec vous.