Share
Nous avons construit des guides complets pour vous aider à apprendre le CSS et l'animation de CSS, que vous commenciez à vous familiariser avec les bases ou que vous souhaitiez explorer des techniques plus avancées..
Le mouvement est devenu une partie très importante du domaine de la conception Web au cours des dernières années. Le mouvement et l'animation ajoutent des couches de dimension à une interface, aidant l'utilisateur, offrant des retours, enchantant et engageant le long du chemin.
Dans cet article, je vais passer en revue les étapes nécessaires à l'apprentissage de l'animation pour le Web, en commençant par ce dont il s'agit, avec des transitions simples, des animations plus complexes et des ressources utiles. Des exercices pratiques et interactifs vous permettront de percer des points à la maison. À la fin, vous aurez une bonne idée du paysage actuel de l’animation Web et de la façon de le maîtriser..
Nous allons regarder ce qui suit:
La discipline du webdesign est en constante évolution et l'un des aspects des dernières années est la capacité d'animation. Les navigateurs sont devenus plus performants, les processeurs plus rapides et les appareils portatifs ont ouvert la voie aux «gestes»; glisser, pincer et toucher de force.
Motion propose plusieurs interfaces qui améliorent l'expérience utilisateur, notamment:
Motion améliore l'expérience utilisateur et donne vie au Web. Compte tenu de tout cela, il est important que, en tant que concepteur d'interface, vous teniez compte de l'animation. Allons-y avec les bases!
Ou sautez directement dans le cours d'animation pratique de Craig Campbell!
Les transitions CSS sont souvent la passerelle du concepteur Web dans le monde du mouvement. Ils ordonnent au navigateur de prendre un état initial d'un élément, puis un état final, et de passer en douceur entre les deux. La syntaxe est relativement directe et comprend quatre propriétés et une version abrégée:
Accentsconagua
propriété de transitiondurée de transitionfonction de synchronisation de transitiondélai de transitionCommençons par un bouton. Dans cet exemple, nous avons un bouton avec certains styles de base pour donner l’impression qu’il est légèrement surélevé depuis la page. Par défaut, si vous passez dessus, la couleur change. Ensuite, si vous cliquez dessus, il semble être poussé vers le bas. Nous avons fait cela en utilisant le Contexte, la position-top, et le position gauche propriétés, mais le changement dans chaque cas est instantané:
Maintenant, rendons l’effet plus subtile, en ajoutant un transition au .bouton élément. Ajout, par exemple, transition: tous les 1; fera en sorte que tout les changements de propriété se feront en douceur en 1 seconde.
Décommentez la première règle du volet CSS et vous verrez qu'elle prend effet:
Maintenant que vous avez vu ce travail, essayez plutôt de supprimer la deuxième règle. Dans le deuxième exemple, nous avons répertorié chacune des propriétés changeantes individuellement afin de pouvoir définir différentes vitesses de transition pour chacune d'elles..
Enfin, essayez de supprimer le commentaire du troisième exemple, où vous verrez que nous avons ajouté fonctions de chronométrage aussi. Ceux-ci affectent le taux de transition-nous en reparlerons bientôt.
Avec les transitions CSS à votre actif, il est temps de passer à la vitesse supérieure. L'animation par images clés CSS donne beaucoup plus de contrôle, vous permettant de spécifier des modifications tout au long d'un scénario. Deux étapes sont nécessaires pour l'animation d'images clés. définition des images clés elles-mêmes et affectation de l'animation à l'élément de votre choix.
Disons que nous commençons avec un ballon.
Maintenant, nous pouvons définir des images clés, en définissant une de état, et un à Etat. Ici, nous disons que sa la gauche propriété de la position commencera à 5%, animant à 85%, déplaçant efficacement le ballon sur l'écran.
@ keyframes move from left: 5%; à gauche: 85%;
Vous pouvez voir que nous avons imbriqué le de et à dans un @ keyframes déclaration. Et nous avons nommé notre animation bouge toi. Nous devons maintenant assigner cette animation à notre balle, ce que nous aimons bien:
.ball animation: 1s move;
Ceci est mis en œuvre dans sa forme la plus simple, abrégée. Nous devons définir combien de temps nous voulons que l'animation dure et quelle animation nous appliquons. Maintenant, lorsque nous chargeons la démo, vous verrez l'animation prendre effet:
Remarque: l'animation démarre au chargement de la page, vous devez donc appuyer sur la rediffusion bouton dans le coin de ce stylo intégré pour tout voir.
Aller au-delà de la simple de et à étapes, nous pouvons définir des points tout au long de la chronologie en utilisant des pourcentages. Utiliser 0% et 100% nous donnerait exactement le même résultat qu'auparavant:
Les images clés se déplacent 0% à gauche: 5%; 100% gauche: 85%;
Ajoutons une étape supplémentaire au milieu et ramenons la balle à sa position de départ. Nous allons également faire le nombre d'itérations d'animation infini, donc il continue à boucler. Editez les valeurs dans le stylo ci-dessous et voyez-les prendre effet:
Il est possible d'ajouter plusieurs animations à un seul élément, de changer le sens de l'animation et de modifier complètement les minutages. Jetez un coup d'œil à ces ressources pour en savoir plus!
Le mouvement donne vie aux objets statiques et à la différence authentique le mouvement peut faire est immense. Le mouvement crée une masse d'objet, le place dans l'espace et la physique du monde réel s'y applique soudainement. Si un objet bouge d'une manière que nous connaissons bien, nous sommes beaucoup plus susceptibles de créer ce lien émotionnel très important. C'est la différence entre un cercle qui monte et descend et une balle qui rebondit:
La différence entre les deux est claire (même si le rebond est loin d’être parfait). Apprendre à donner de l'authenticité à votre animation est crucial.
"La plupart des actions naturelles tendent à suivre une trajectoire arquée, et l'animation doit adhérer à ce principe en suivant des" arcs "implicites pour plus de réalisme." - Douze principes de base de l'animation
Nous avons déjà parlé de «détente» plusieurs fois dans cet article. c'est la vitesse à laquelle quelque chose bouge et peut être exprimée sous forme de courbe selon deux axes. En CSS, il existe quelques fonctions de chronométrage intégrées que vous pouvez utiliser avec leurs mots-clés (linéaire, facilité dans, facilité d'entrée etc.) mais vous pouvez décrire ces horaires plus précisément avec un fonction de Bézier cubique, qui ressemble à ceci:
.1, .25, .1,1Comme le temps se déplace constamment le long de l'axe des x, la vitesse de déplacement s'accélère et ralentit le long de l'axe des y. Cet exemple ci-dessus est utilisé sur notre balle qui rebondit de plus tôt; vous pouvez imaginer que la balle se déplace rapidement vers le haut, puis ralentit lorsqu'elle atteint son apex. Regardez cette courbe sur cubic-bezier.com pour vous aider à la visualiser..
La courbe est contrôlée par les deux poignées (que vous connaissez bien si vous avez déjà utilisé l'outil Plume dans Adobe Illustrator ou Sketch) et la fonction de Bézier cubique que nous pouvons utiliser dans CSS reflète ces poignées. Donc, notre fonction ressemble à:
cube de Bézier (.1, .25, .1,1)
Il y a quatre valeurs, chacune allant (pour les besoins de l’argument) de 0 à 1. Elles représentent:
Comprendre le fonctionnement des fonctions de Bézier améliorera considérablement vos animations, en particulier si vous visez authentique mouvement.
Coder à la main de belles animations CSS peut être difficile, mais il existe un certain nombre de bibliothèques disponibles qui font le gros du travail pour vous. Animate.css, de Dan Eden, est une feuille de style remplie d'animations basées sur des images clés, toutes avec des noms de classe personnalisés, prêtes à être utilisées..
SVG (Scalable Vector Graphics) est devenu le meilleur ami du concepteur web ces dernières années, nous offrant des graphiques nets, des pages plus claires et des éléments animables. Une partie de ce dont nous avons parlé peut être appliquée directement aux éléments SVG, mais de nombreuses propriétés se comportent différemment.
Voici un fichier SVG en ligne avec une transition appliquée à sa couleur lors du survol. Cependant, vous remarquerez que nous utilisons le remplir la propriété, pas la Couleur de fond auquel on peut s'attendre avec un élément HTML:
SVG peut être animé avec CSS un peu comme nous en avons discuté dans le reste de cet article. Si vous pouvez le transformer ou le traduire avec HTML, vous pouvez faire la même chose avec SVG.
Mais SVG peut également être manipulé via SMIL (Synchronized Multimedia Integration Language) qui vous permet d’utiliser des éléments tels que
Ceci est un cercle, contenant un cx dans ce cas), d’une position de 50 à 400 pixels, d’une durée de 2 secondes et se répétant indéfiniment.
SMIL est un ensemble d'outils très puissant, commencez à lire ci-dessous!
J'adore l'idée d'animer SVG mais je ne suis pas sûr quoi animer? Découvrez les services d'illustration vectorielle sur Envato Studio et voyez ce qui vous est proposé!
Caractères, éléments et objets prêts pour l'animation vidéoDe nombreux développeurs frontaux s’intéressent d’abord à JavaScript (ou à jQuery) en ajoutant des animations aux pages Web. Lorsque la prise en charge des alternatives CSS par le navigateur est fragmentaire, JS est un bon choix.
La bibliothèque d’interface utilisateur de jQuery est fournie avec un certain nombre d’aides d’interface utilisateur standard, y compris le effet() méthode, présentée ci-dessous (choisissez un effet dans la liste déroulante et regardez-le s’appliquer au contenu:
Au-delà, JavaScript (entre les bonnes mains, pas la mienne) peut offrir sérieux animation, et depuis la démission officielle d'Adobe Flash, de brillantes bibliothèques JavaScript ont vu le jour. La plate-forme d'animation de GreenSock (GSAP) est sans doute le plus puissant des développeurs, offrant aux développeurs une multitude d'outils de chronologie et d'interpolation.
Jetez un coup d'œil à notre cours pour débutants et voyez comment vous vous en tirez avec GSAP!
L'époque où les produits livrables de la conception statique étaient épuisés est révolue: les images et les diagrammes de flux ne communiquent pas suffisamment d'informations. De nos jours, les clients astucieux veulent voir et ressentir ce que vous concevez, expérimenter le mouvement, c'est pourquoi les prototypes répondent à beaucoup plus de questions..
"Si une image vaut 1000 mots, un prototype vaut 1000 réunions." en disant à l'idéo
- John Maeda (@johnmaeda) 5 octobre 2014
Les prototypes peuvent être assez crus, ou refléter le produit final de manière assez précise, mais chaque fois qu’ils tombent à cette échelle, leur création doit être efficace. En ce qui concerne le mouvement et l'animation, il existe un certain nombre d'applications pour vous aider à communiquer vos conceptions..
Adobe Animate est Flash pour la prochaine génération et offre des outils d'animation avancés. Adobe After Effects est un outil de production vidéo mais offre également des fonctionnalités avancées de gestion du mouvement basées sur la chronologie. Mais il existe ensuite des applications plus simples, telles que Principle for Mac et même Keynote:
Keynote Motion Graphic Experiment, par Linda DongUne fois que la conception de mouvement est devenue une partie de votre travail, trouver les meilleurs outils pour montrer le monde est une étape importante.!
Et là nous l'avons! Ce guide aurait dû vous donner une solide compréhension du paysage de l'animation Web tel qu'il existe aujourd'hui. Avec toutes ces ressources d'apprentissage à votre actif, vous disposerez d'un nouvel ensemble de compétences pour explorer le monde du motion design..
J'espère que tu as trouvé ça utile. Veuillez partager vos propres astuces et ressources dans les commentaires ci-dessous ou sur le forum de la communauté Envato..
