Après avoir créé des animations dans la timeline, vous pouvez les ajuster. Pour ce faire, modifiez les éléments animés, ajustez les images clés et les intervalles, puis lancez la lecture en boucle des animations.
Cette page contient les sections suivantes :
Modifier un élément animé
Lorsque vous modifiez les propriétés d'un élément animé, une image clé est automatiquement ajoutée au niveau de la tête de lecture s'il n'en existe encore aucune à cet endroit. Vous avez également la possibilité de sélectionner une image clé existante afin de modifier l'élément à ce point précis de la timeline. Toute animation précédant ou suivant cet élément ajuste sa position de début ou de fin en fonction des modifications apportées aux propriétés.
Si vous modifiez les propriétés au niveau de la première image clé, vous modifiez les propriétés de base de l'élément. Les images clés suivantes héritent des propriétés de base, sauf si vous spécifiez des valeurs de propriété différentes pour ces images clés.
Si vous sélectionnez plusieurs images clés, puis modifiez les propriétés de l'élément ou des éléments, les modifications sont appliquées à toutes les images clés sélectionnées.
Si un élément n'a pas besoin d'être présent pour la timeline de l'animation complète, vous pouvez définir sa plage de visibilité afin qu'il soit masqué.
Modifier le lissage de vitesse d'une animation
Pour modifier le lissage de vitesse d'une animation, faites un clic droit sur l'intervalle que vous souhaitez modifier, puis sélectionnez un nouveau lissage de vitesse ou cliquez sur Options de lissage de vitesse afin de spécifier un lissage de vitesse personnalisé.
Lire une animation en boucle
- Sur la timeline, cliquez sur le bouton Définir la répétition de l'animation
du calque de l'animation que vous souhaitez lire en boucle.
- Dans le menu contextuel, sélectionnez l'une des options suivantes :
- Infinie : l'animation est lue en boucle indéfiniment.
- ___ fois : l'animation est lue le nombre de fois défini.
- Aucune : l'animation n'est pas lue en boucle.
Les calques comportant des plages de visibilité ne peuvent pas être lus en boucle.
La lecture en boucle d'un calque modifie l'animation dans le document publié.
La lecture en boucle d'une animation n'a d'incidence que sur l'aperçu dans l'espace de création.
Ajuster les images clés et les intervalles dans la timeline
Sélectionner des images clés et des intervalles
Vous disposez de plusieurs méthodes pour sélectionner des images clés et des intervalles :
- Cliquez sur une image clé ou un intervalle pour les sélectionner. Si vous sélectionnez deux images clés consécutives, l'intervalle qui les sépare est également sélectionné. De la même manière, si vous sélectionnez un intervalle, les images clés qui l'entourent sont automatiquement sélectionnées.
- Pour sélectionner plusieurs images clés ou intervalles contigus, cliquez sur ces éléments tout en appuyant sur la touche Maj.
- Pour sélectionner ou désélectionner des images clés ou des intervalles non contigus, cliquez sur ces éléments tout en appuyant sur la touche Ctrl (Windows) ou ⌘ (Mac).
- Pour sélectionner l'ensemble des images clés, faites glisser un rectangle de sélection de manière à toutes les encadrer. Un intervalle n'est sélectionné que si les images clés qui l'entourent sont incluses dans le rectangle de sélection.
- Pour modifier l'état de sélection d'images clés, appuyez sur la touche Ctrl (Windows) ou ⌘ (Mac) tout en faisant glisser un rectangle de sélection de manière à les encadrer. Dans ce rectangle, les images sélectionnées seront désormais désélectionnées et inversement. Comme mentionné précédemment, dans ce cas-ci aussi, un intervalle n'est sélectionné que si les images clés qui l'entourent sont incluses dans le rectangle de sélection.
-
Double-cliquez sur un calque dans la timeline pour sélectionner l'ensemble des images clés, des intervalles et des poignées de plage de visibilité de ce calque.
Déplacer des images clés et des intervalles
Après avoir sélectionné des images clés ou des intervalles, vous pouvez les déplacer en les faisant glisser le long de la timeline vers leur nouvel emplacement. La chronologie de l'animation est modifiée en conséquence.
Mettre à l'échelle des animations
Vous pouvez mettre à l'échelle des animations afin d'allonger ou de raccourcir leur durée, tout en conservant un espacement proportionnel entre les images clés. Pour mettre à l'échelle une animation, procédez comme suit :
- Sélectionnez les images clés ou les intervalles que vous souhaitez mettre à l'échelle. Ils peuvent se trouver sur différents calques.
- Maintenez la touche Maj enfoncée tout en faisant glisser l'une des images clés sélectionnées vers la gauche ou la droite. La durée de l'animation augmente ou diminue selon que vous vous éloignez ou vous rapprochez de sa première moitié. Les autres images clés sélectionnées se déplacent en respectant une distance proportionnelle. Seule l'image clé la plus proche de la fin ne bouge pas.
- Si vous avez activé l'ancrage au niveau de la timeline, il ne s'applique qu'à l'image clé que vous faites glisser.
- Les images clés ne peuvent pas se chevaucher ni se situer à moins de 0,1 ms d'une autre image clé.
- Les images clés non sélectionnées ne bougent pas, mais elles peuvent limiter le mouvement de celles qui le sont.
Mise à l'échelle de l'image clé de la timeline
Copier et coller une image clé
Vous pouvez copier et coller une image clé à une autre position du même calque, sur un autre calque, voire sur la timeline d'une autre page ou d'un autre document. L'image collée conserve ses propriétés d'animation, à l'exception du lissage de vitesse de l'animation et des trajectoires d'animation.
Pour copier et coller une image clé, utilisez l'une des méthodes suivantes :
-
Sélectionnez l'image clé à copier, appuyez sur les touches Ctrl+C (Windows) ou ⌘+C (Mac), cliquez sur la nouvelle position de la timeline, puis sélectionnez le ou les calques de destination. Enfin, appuyez sur les touches Ctrl+V (Windows) ou ⌘+V (Mac) pour coller les éléments sélectionnés.
-
Faites un clic droit sur l'image clé à copier. Dans le menu contextuel, sélectionnez Copier une image clé, faites un clic droit sur la nouvelle position de la timeline du calque de destination, puis sélectionnez Coller une image clé dans le menu contextuel.
-
Appuyez sur la touche Alt (Windows et Linux) ou Option (Mac) tout en faisant glisser l'image clé sélectionnée pour la copier à la position de fin. Cette méthode ne permet pas d'effectuer des copies entre plusieurs pages, documents ou timelines pour les animations imbriquées.
Si vous copiez et collez une image clé dans un calque qui n'en contenait aucune, une nouvelle image clé est automatiquement insérée à 0 s avec l'image clé collée, sauf si vous collez cette dernière à 0 s.
Si vous copiez et collez une image clé à l'emplacement d'une image clé existante, les propriétés d'animation de l'image clé collée remplacent celles de l'image clé existante.
Supprimer des images clés
Pour supprimer une image clé, faites un clic droit (Windows) sur celle-ci ou cliquez dessus tout en appuyant sur la touche Ctrl (Mac), puis sélectionnez Supprimer dans le menu contextuel.
Modifier les règles liées aux images clés dans le panneau "CSS"
Si vous connaissez les règles liées aux images clés CSS (à commencer par le mot clé @keyframes), vous pouvez utiliser le panneau CSS pour afficher et modifier les styles d'animation dans la vue Conception. La timeline et l'espace de création reflètent automatiquement les modifications que vous apportez au panneau.
Utiliser les règles liées aux images clés
- Pour afficher la règle liée aux images clés d'un élément animé spécifique dans le panneau "CSS", sélectionnez cet élément.
- Pour ajouter des images clés entre des images clés existantes, cliquez sur Insérer une image clé.
- Vous pouvez modifier les pourcentages liés aux images clés.
- Vous pouvez ajouter, modifier et supprimer les propriétés animées d'une image clé.
- Pour activer ou désactiver une propriété animée dans l'intégralité de l'animation, cochez la case à côté du nom de cette propriété.
- Pour supprimer une image clé spécifique, effacez le pourcentage ou supprimez toutes les propriétés animées associées à celle-ci.
- Pour supprimer toutes les animations CSS d'un élément, sélectionnez la règle liée aux images clés, puis cliquez sur le bouton Supprimer les réglages sélectionnés
en bas du panneau.
Modifier les règles liées aux images clés dans le panneau "CSS"
Restrictions
- Vous ne pouvez pas modifier le lissage de vitesse.
- Vous ne pouvez pas ajouter d'image clé après la dernière image clé. Utilisez plutôt la timeline.
En savoir plus sur l'utilisation du panneau "CSS"