Les trajectoires d'animation vous permettent d'animer des objets en les faisant suivre des courbes et des formes complexes. De la même manière que les lignes que vous tracez à l'aide de l'outil Stylo, vous définissez des trajectoires d'animation en créant des points d'ancrage qui sont reliés par des lignes droites ou courbes.
La trajectoire suivie par une animation est le fruit d'une estimation réalisée par le code CSS. Dès lors, il est possible que les éléments animés ne suivent pas précisément les trajectoires d'animation. En général, vous ne devriez pas constater de différence (par défaut, celle-ci est inférieure à un pixel). Par ailleurs, vous pouvez limiter l'importance de la déviation dans les propriétés de la trajectoire d'animation.
À propos des trajectoires d'animation
Cette page contient les sections suivantes :
Afficher les trajectoires d'animation
Pour afficher les lignes qui représentent la trajectoire suivie par l'élément lors de l'animation, ainsi que les points d'ancrage, il vous suffit de sélectionner un élément. Vous avez également la possibilité d'en sélectionner plusieurs.
Points d'ancrage
Il existe deux méthodes permettant de créer des points d'ancrage :
- Les vignettes et les images clés qui attribuent à l'élément une nouvelle position sur l'axe X ou Y génèrent automatiquement des points d'ancrage. Les points d'ancrage de début et de fin sont toujours situés au niveau d'images clés.
- Vous pouvez ajouter des points d'ancrage le long de la trajectoire d'animation à l'aide de l'outil Trajectoire d'animation.
Poignées de contrôle
Les poignées de contrôle s'affichent lorsque l'outil Trajectoire d'animation est sélectionné. Chaque segment reliant des points d'ancrage comporte deux poignées de contrôle : une pour chaque point d'ancrage. La longueur et l'orientation d'une poignée de contrôle indiquent le degré de courbure de la trajectoire d'animation. En ce qui concerne les lignes droites, les poignées de contrôle se trouvent contre le segment ou sont réduites.
Modifier des trajectoires d'animation
Modifier la forme d'une trajectoire d'animation
Les trajectoires d'animation peuvent être de simples courbes, des formes fermées (telles que des polygones ou des cercles) ou des contours d'autres objets tracés avec précision. Pour modifier la forme d'une trajectoire d'animation, procédez comme suit :
Ajouter un point d'ancrage
- Ajoutez une vignette ou une image clé qui attribuent une nouvelle position à l'élément. Cette opération permet d'ajouter un point d'ancrage à un endroit où vous pouvez modifier le lissage de vitesse.
- L'option Ajouter un point d'ancrage
de l'outil Trajectoire d'animation
vous permet d'ajouter un point d'ancrage à un endroit précis de la trajectoire d'animation et ainsi de la définir. Pour ce faire, il vous suffit de cliquer à l'endroit souhaité. Si vous utilisez cette méthode pour ajouter un point d'ancrage, aucune vignette ni aucune image clé n'est ajoutée.
Ajuster la courbure
- Lorsque l'outil de sélection ou l'option par défaut
de l'outil Trajectoire d'animation
- Lorsque l'outil Trajectoire d'animation
- Pour réduire les poignées de contrôle associées à un point d'ancrage, il vous suffit de double-cliquer sur celui-ci. Pour les redévelopper, double-cliquez de nouveau sur le point d'ancrage.
Pour redresser une trajectoire d'animation, double-cliquez sur les deux points d'ancrage.
Supprimer un point d'ancrage
- L'option Supprimer un point d'ancrage
de l'outil Trajectoire d'animation
- Si vous supprimez une vignette ou une image clé, le segment de la trajectoire d'animation qui se termine au niveau de cette vignette ou de cette image clé est également supprimé.
Transformer des trajectoires d'animation
Vous pouvez déplacer, redimensionner, inverser ou faire pivoter les trajectoires d'animation. Pour ce faire, sélectionnez l'outil Trajectoire d'animation , puis cochez la case Commande de transformation dans la barre d'options de l'outil. Lorsque cette option est activée, les commandes de transformation s'affichent si vous sélectionnez un élément comportant une trajectoire d'animation.
Déplacer une trajectoire d'animation
Faites glisser la trajectoire d'animation vers une nouvelle position de l'espace de création.
Redimensionner la trajectoire d'animation
- La zone de redimensionnement borde la trajectoire d'animation et est indiquée en bleu. Elle comporte des poignées à chaque angle et de chaque côté. Faites glisser une poignée pour modifier la taille de la trajectoire d'animation.
- Maintenez la touche Maj enfoncée pendant l'opération afin de conserver les proportions d'origine.
- Maintenez la touche Alt enfoncée tout en faisant glisser la souris afin que la trajectoire d'animation reste centrée au même endroit.
- Pour redimensionner la trajectoire d'animation dans une autre direction, faites pivoter la zone de redimensionnement en saisissant les degrés de rotation dans le champ
de la barre d'options de l'outil. Vous pouvez aussi maintenir la touche Alt (Windows) ou Option (Mac) enfoncée tout en appuyant sur la flèche vers la gauche ou vers la droite pour faire pivoter la zone de redimensionnement de 5°. La valeur du champ est toujours redéfinie sur 0°. Vous devez donc saisir la rotation souhaitée en fonction de l'orientation existante. La rotation de la zone de redimensionnement ne modifie pas l'orientation de la trajectoire d'animation.
- Pour réinitialiser l'orientation de la zone de redimensionnement, double-cliquez sur la commande de rotation intérieure (l'anneau le plus petit). Cette opération réinitialise également l'emplacement du point de pivotement de la rotation.
de la barre d'options de l'outil. Vous pouvez aussi maintenir la touche Alt (Windows) ou Option (Mac) enfoncée tout en appuyant sur la flèche vers la gauche ou vers la droite pour faire pivoter la zone de redimensionnement de 5°. La valeur du champ est toujours redéfinie sur 0°. Vous devez donc saisir la rotation souhaitée en fonction de l'orientation existante. La rotation de la zone de redimensionnement ne modifie pas l'orientation de la trajectoire d'animation.Inverser la trajectoire d'animation
- Faites glisser une poignée de redimensionnement sur la poignée de redimensionnement opposée.
Faire pivoter la trajectoire d'animation
- Faites glisser la commande de rotation extérieure (l'anneau le plus grand) dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre pour faire pivoter la trajectoire d'animation.
- Appuyez de manière prolongée sur la touche Maj pendant l'opération pour contraindre la rotation à respecter des incréments de 45°.
- Pour déplacer le point de pivotement de la rotation, faites glisser la commande de rotation intérieure (l'anneau le plus petit) vers un autre endroit. Réinitialisez l'emplacement du point de pivotement en double-cliquant sur la commande de rotation intérieure (cette opération réinitialise aussi l'orientation de la zone de redimensionnement).
Modification de la trajectoire d'animation
Modifier la vitesse d'animation
Pour contrôler la vitesse à laquelle un objet parcourt sa trajectoire d'animation, modifiez la chronologie des vignettes ou des images clés, ainsi que le lissage de vitesse qui les sépare. Vous avez également la possibilité de répéter en boucle la trajectoire suivie par une animation.
Optimisation
Lorsque vous créez ou modifiez une trajectoire d'animation, Google Web Designer optimise automatiquement l'animation de façon à réduire la quantité de code CSS nécessaire à son affichage, tout en respectant les valeurs de tolérance que vous avez définies dans les propriétés de la trajectoire d'animation. Plus les valeurs de tolérance sont faibles, plus l'animation suit la trajectoire d'animation avec précision, mais moins l'optimisation est possible.
Pour réduire encore davantage la quantité de code, cliquez sur Optimiser la courbe dans les propriétés de la trajectoire d'animation. Cette procédure peut durer plus longtemps que l'optimisation automatique.
Dans Google Web Designer, une estimation de la taille de la trajectoire d'animation de l'élément sélectionné est disponible dans le panneau "Propriétés". Cette estimation vous permet de connaître l'espace que la trajectoire d'animation occupera sur le disque une fois le document publié.
Propriétés de la trajectoire d'animation
Les propriétés de la trajectoire d'animation s'affichent dans le panneau "Propriétés" après avoir ajouté un point d'ancrage à l'aide de l'outil Trajectoire d'animation ou modifié la forme de la trajectoire d'animation de façon qu'elle soit courbée.
| Propriété | Description |
|---|---|
| Orienter dans le sens de la trajectoire | Lorsque cette option est activée, l'élément pivote pendant l'animation de façon à faire face au sens de la trajectoire d'animation (par exemple, lorsqu'il suit la courbe descendante d'une trajectoire d'animation, l'élément s'oriente vers le bas). Pour contrôler la précision de la rotation, utilisez la propriété Tolérance d'angle. |
| Tolérance de position | Permet de définir la tolérance de déviation de l'élément par rapport à la trajectoire d'animation.
|
| Tolérance d'angle | Permet de contrôler la mesure dans laquelle l'orientation de l'élément peut différer par rapport à l'orientation de la trajectoire d'animation. Cette propriété est uniquement applicable si l'option Orienter dans le sens de la trajectoire est activée.
|
| Optimiser la courbe | Cliquez sur le bouton |
| Estimation de la taille | Permet d'afficher une estimation de la taille de la trajectoire d'animation. Pour réduire encore davantage la quantité de code, cliquez sur le bouton Optimiser la courbe. |
Limites
- Positionnement supérieur/gauche : les trajectoires d'animation ne sont pas compatibles avec le positionnement supérieur/gauche. Utilisez plutôt la propriété CSS
transform(définie par défaut). - Animation 3D : Google Web Designer n'accepte pas les trajectoires d'animation 3D. Vous pouvez en revanche appliquer plusieurs translations 3D séparément à l'élément.
- Panneau "CSS" : même si des styles sont appliqués à l'élément, le panneau "CSS" n'a aucune incidence sur les trajectoires d'animation.
- Vue Code : la vue Code ne permet ni d'afficher, ni de modifier des trajectoires d'animation.
- Annonces illustrées : l'outil Trajectoire d'animation n'est pas disponible dans les annonces illustrées.