La prochaine fois que vous créerez des animations régulières basées sur CSS3, il vous sera peut-être utile d'accéder aux outils de développement Chrome et de profiter des fonctionnalités de vérification et de personnalisation des animations. Dans ce court article, nous vous expliquerons quels outils d'animation sont disponibles dans Chrome, comment y accéder et comment ils peuvent vous aider.
Si vous souhaitez tester vos animations CSS3 à l'aide de ces outils, vous pouvez utiliser le code prêt à l'emploi de notre cours:
10 projets CSS3: interface et mise en page .
Voici la version complète de la page.Ouverture de l'onglet Animations
Sur la page avec une animation CSS3 en cours d'exécution, ouvrez d'abord les "Chrome Developer Tools" en allant dans
Affichage> Developer> Developer tools. Vous pouvez également utiliser le raccourci clavier:
F12 ou
CTRL + MAJ + I.Lorsque les outils de développement sont ouverts, accédez au menu indiqué par trois points verticaux dans le coin supérieur droit, puis sélectionnez
Plus d'outils> Animations, comme illustré ci-dessous:
Lorsque vous ouvrez l'onglet animation pour la première fois, vous ne verrez aucun contenu lié à votre animation, vous voyez juste le message
Écoute des animations ... La raison en est que l'outil a gagné l'onglet devrait déjà être ouvert lorsque la page se charge pour la première fois.
Pour que le panneau lise des informations sur vos animations, actualisez la page et vous verrez ce qui suit:
La petite icône colorée en haut à gauche est une animation des éléments de votre page. Cliquez sur cette icône pour ouvrir les outils de vérification d'animation:
Curseur de lecture et images clés
Pendant la lecture de l'animation, vous verrez un curseur de lecture rouge se déplacer le long de la chronologie. Ce curseur peut être déplacé à l'emplacement souhaité à l'aide de la souris.
Chaque ligne de l'interface représente un élément d'animation distinct sur la page. Vous pouvez remarquer que chaque ligne a une section avec une couleur saturée plus foncée. Il montre la longueur de l'animation et les segments plus légers qui la suivent représentent une répétition de l'animation.
Vous verrez également plusieurs petits cercles le long de chaque ligne d'animation. Ils correspondent aux images clés de l'animation. Les cercles noirs représentent le début et la fin de l'animation, et les cercles creux représentent les images clés intermédiaires entre elles.
Images clés intermédiaires
Les images clés intermédiaires (images clés entre le début et la fin de chaque cycle d'animation) sur chaque ligne peuvent être déplacées vers différentes positions et, lorsque vous les déplacez, vous verrez comment le temps d'animation change dans la fenêtre du navigateur. C'est un bon outil pour expérimenter avec quel pourcentage doit être pour chaque image clé intermédiaire.
Cependant, la difficulté réside dans le fait que vous ne verrez pas les mises à jour de code sur l'onglet Styles pendant ces expériences. Au lieu de cela, lorsque vous obtenez vos images clés intermédiaires placées au bon point, vous pouvez déterminer manuellement la valeur en pourcentage à utiliser pour l'image clé.
Positionnez le curseur de lecture directement au-dessus de l'image clé en question et vous verrez un horodatage dans le coin supérieur gauche du panneau vous indiquant à quelle distance en secondes vous êtes dans l'animation. Ensuite, vous pouvez savoir quel pourcentage cette fois est la durée totale de l'animation. Dans l'exemple ci-dessous, le curseur de lecture est à environ 1 seconde d'une animation de 2 secondes, nous savons donc que cette image clé est à 50%.
Délai et durée de l'animation
Vous pouvez apporter d'autres modifications dans l'onglet
Animations qui mettront à jour votre code dans l'onglet
Styles afin que vous puissiez voir exactement quelles valeurs apporter à votre CSS. Le premier est le délai avant le début de la lecture de l'animation et le second la durée.
Pour appliquer un délai avant de démarrer une animation, passez la souris sur sa ligne jusqu'à ce que vous voyiez un curseur en forme de main, puis faites-le glisser horizontalement. Vous verrez la mise à jour de la valeur de retard sur l'onglet
Styles :
Pour modifier la durée de l'animation, passez la souris sur votre dernière image clé jusqu'à ce que vous voyiez le curseur bidirectionnel, puis faites-le glisser horizontalement. Encore une fois, la valeur sera visible mise à jour sur l'onglet
Styles .
Fonction de synchronisation d'animation
Vous pouvez également utiliser les outils de développement Chrome pour modifier la courbe de vitesse qui contrôle la durée de l'animation. Commencez par vérifier l'élément auquel s'applique l'animation. À gauche de la fonction de chronométrage actuellement spécifiée, vous verrez une petite icône avec un «tilde». Cliquez dessus pour ouvrir l'éditeur de courbes de Bézier:
Une fenêtre s'ouvre montrant la courbe de Bézier, qui affiche la fonction de synchronisation actuelle. Ici, vous pouvez sélectionner un préréglage existant en cliquant sur l'une des miniatures à gauche, ou vous pouvez faire glisser les marqueurs de l'image principale de la courbe pour créer une valeur personnalisée pour les courbes de Bézier, que vous pouvez ensuite copier dans votre CSS:
Au fur et à mesure que vous changez, vous verrez une petite boule violette se déplacer de gauche à droite en haut de l'éditeur, affichant les changements actuels dans votre fonction de chronométrage.
Rendu des calques rotatifs
Une autre fonctionnalité utile est la possibilité de visualiser les calques utilisés dans votre animation, y compris la possibilité de faire pivoter la visualisation spécifiée et de la visualiser sous différents points de vue afin de mieux comprendre comment tout fonctionne.
Pour ouvrir le panneau
Calques, accédez au menu Outils de développement Chrome et sélectionnez
Plus d'outils> Calques.
Lorsque l'onglet
Calques est ouvert, sélectionnez l'outil
Mode rotation dans le coin supérieur gauche:
Vous pouvez maintenant utiliser cet outil pour faire pivoter la visualisation du calque selon l'angle dont vous avez besoin pour mieux voir comment certaines parties de votre animation fonctionnent:
Achèvement
Jetons un coup d'œil aux outils d'animation Chrome:
- Ouvrez les outils d'animation en ouvrant d'abord Chrome Dev Tools, puis dans le menu des outils de développement, sélectionnez Plus d'outils> Animations.
- Le panneau Animations doit être ouvert lorsque la page se charge pour afficher les informations d'animation - actualisez la page pour y parvenir.
- Cliquez sur la vignette du petit graphique couleur pour afficher les informations d'animation.
- Chaque ligne représente une animation.
- Les cercles pleins représentent les images clés de début et de fin.
- Les cercles creux représentent des images clés intermédiaires.
- Les images clés intermédiaires peuvent être déplacées, mais vous ne verrez pas la mise à jour de code correspondante dans l'onglet Styles , mais calculez manuellement le point de pourcentage sur lequel elles se trouvent.
- Modifiez la valeur du délai d'animation en la survolant la ligne jusqu'à ce que vous voyiez le curseur de votre main, puis faites-le glisser horizontalement.
- Modifiez la durée de l'animation en déplaçant le curseur sur sa dernière image clé jusqu'à ce que vous voyiez le curseur avec un double contour, puis faites-le glisser horizontalement.
- Dans l'onglet Styles , cliquez sur l'icône à gauche de la fonction de synchronisation existante pour ouvrir l'éditeur de courbes de Bézier.
- Choisissez parmi les préréglages la fonction temporelle des paramètres ou créez la vôtre en modifiant l'image de la courbe principale.
- Ouvrez le panneau Calques en accédant au menu Chrome Developer Tools et en choisissant Plus d'outils> Calques.
- Dans ce panneau, utilisez le mode Rotation pour afficher les couches de votre animation sous n'importe quel angle.
Parfois, la création de l'animation parfaite peut être un processus très précis et subtil. Ces outils peuvent fournir des informations indispensables sur vos animations, ainsi que des commentaires en temps réel pour vous aider à atteindre l'excellence.