Share
La prochaine fois que vous créerez des animations basées sur CSS3, il vous sera peut-être utile de naviguer dans les outils de développement Chrome et de tirer parti de ses fonctionnalités d'inspection et de modification de l'animation. Dans cette astuce, nous vous donnerons un aperçu des outils de développement d'animation disponibles dans Chrome, comment y accéder et ce qu'ils peuvent faire pour vous..
Au fur et à mesure, si vous souhaitez que certaines animations CSS3 testent chacun des outils, vous pouvez utiliser ce stylet de notre cours. 10 projets CSS3: Interface utilisateur et mise en page:
Voici la version complète de la page.
Sur une page avec une animation CSS3 en cours d'exécution, ouvrez d'abord les outils de développement Chrome en allant à Affichage> Développeur> Outils de développement. Sinon, vous pouvez utiliser un raccourci clavier, soit F12 ou CTRL + SHIFT + I.
Une fois les outils de développement ouverts, allez au menu symbolisé par trois points verticaux dans le coin supérieur droit, puis choisissez Plus d'outils> Animations comme indiqué ci-dessous:
Lorsque vous ouvrez l'onglet Animation pour la première fois, vous ne verrez aucun contenu lié à vos animations, vous verrez juste un message disant Ecouter des animations… . La raison en est que, pour fonctionner, l'onglet doit être déjà ouvert lors du premier chargement de la page..
Pour permettre au panneau de capturer des informations sur vos animations, actualisez la page et vous verrez ceci:
La petite icône de graphique en couleur en haut à gauche représente les animations de votre page. Cliquez sur cette icône pour ouvrir les outils d'inspection d'animation:
Pendant la lecture des animations, la tête de lecture rouge se déplace sur la timeline. Cette tête de lecture peut être saisie avec la souris et nettoyée manuellement, ou placée à un point spécifique.
Chaque ligne de l'interface représente une animation individuelle dans la page. Vous remarquerez que chaque ligne a une portion de couleur plus sombre et plus saturée. Cela indique la longueur de l'animation et les segments plus clairs qui suivent représentent l'animation se répétant.
Vous verrez également plusieurs petits cercles le long de chaque ligne d'animation. Celles-ci correspondent aux images clés de l'animation. Les cercles de couleur foncée représentent le début et la fin de l’animation, et les cercles creux représentent interstitiel images clés n'importe où entre.
Les images clés interstitielles (images clés situées entre le début et la fin de chaque cycle d'animation) de chaque ligne peuvent être déplacées vers différentes positions. Lorsque vous les déplacez, l'animation de la fenêtre du navigateur change de temps. Cela peut être très utile pour expérimenter avec quel pourcentage exactement une image clé interstitielle doit tomber à.
La partie délicate, cependant, est que vous ne verrez aucune mise à jour du code dans le modes onglet pendant que vous menez ces expériences. Au lieu de cela, lorsque vos images clés interstitielles sont placées au bon moment, vous pouvez déterminer manuellement le pourcentage d'utilisation d'une image clé..
Placez la tête de lecture directement sur l'image-clé en question et un horodatage en haut à gauche du panneau vous indiquera la distance parcourue par l'animation en secondes. Vous pouvez ensuite déterminer le pourcentage de cette durée par rapport à la durée totale de l'animation. Dans l'exemple ci-dessous, la tête de lecture se situe à environ 1 seconde d'une animation 2 secondes. Nous savons donc que cette image clé correspond à 50%..
Il y a d'autres changements que vous pouvez faire dans le Animations onglet qui volonté mettre à jour votre code dans le modes onglet afin que vous puissiez voir exactement quelles valeurs transplanter dans votre CSS. Le premier est le délai avant la lecture d'une animation, et le second est sa durée..
Pour régler le délai avant la lecture d'une animation, survolez sa ligne jusqu'à ce que vous voyiez un curseur en forme de main, puis faites-le glisser horizontalement. Vous verrez la valeur de délai mise à jour dans le modes languette:
Pour modifier la durée de l'animation, survolez la dernière image-clé avec un curseur en forme de flèche, puis faites-la glisser horizontalement. Encore une fois, la valeur sera vue mise à jour dans le modes languette.
Vous pouvez également utiliser les outils de développement de Chrome pour modifier la courbe de vitesse qui contrôle le minutage d'une animation. Commencez par inspecter un élément auquel une animation est appliquée. À gauche de la fonction de chronométrage actuellement spécifiée, vous verrez une petite boîte avec un «gribouillis». Cliquez dessus pour ouvrir l'éditeur de Bézier cubique:
Une boîte s'ouvrira pour vous montrer une courbe de Bézier illustrant la fonction de synchronisation actuelle. À partir de là, vous pouvez choisir un préréglage existant en cliquant sur l'une des miniatures à gauche. Vous pouvez également faire glisser les poignées de l'image de la courbe principale pour créer une valeur de Bézier cubique personnalisée que vous pourrez ensuite copier dans votre CSS:
Au fur et à mesure, vous verrez une petite boule violette s'animer de gauche à droite dans la partie supérieure de l'éditeur, vous donnant un aperçu de votre fonction de chronométrage en action..
En savoir plus sur les courbes de Bézier et les fonctions de chronométrage dans ce cours de pause-café:
Une autre fonctionnalité utile est la possibilité de visualiser les calques utilisés dans votre animation, y compris la possibilité de faire pivoter ladite visualisation et de la regarder sous différents angles pour mieux comprendre le fonctionnement.
Pour ouvrir le Couches Panneau de configuration, accédez au menu Outils de développement Chrome et choisissez Plus d'outils> Couches.
Une fois la Couches l'onglet est ouvert, choisissez le Mode de rotation outil en haut à gauche:
Vous pouvez maintenant utiliser cet outil pour faire pivoter la visualisation des calques sur n’importe quel angle afin de mieux voir le fonctionnement des parties de votre animation:
Voyons brièvement les outils de développement de l'animation de Chrome:
Parfois, donner une animation parfaite peut être un processus très précis et complexe. Ces outils peuvent donner un aperçu très utile de vos animations, ainsi que des commentaires en temps réel, pour vous aider à tout obtenir parfait.
Accentsconagua