Pour ajuster la vitesse et le délai de vos animations, cliquez sur le bord gauche ou droit de la barre de timeline de votre calque, puis maintenez le bouton enfoncé et faites glisser la souris pour modifier la durée de l’animation et son point de début ou de fin.
Lorsqu’une barre est trop étroite pour être saisie facilement (28px de large ou moins), survolez-la ou donnez-lui le focus au clavier pour faire apparaître des poignées circulaires à gauche et à droite, ainsi qu’une petite poignée de déplacement sous la barre. Faites glisser un point pour ajuster le bord correspondant, ou faites glisser la poignée du bas pour déplacer l’animation. Ces commandes ont des zones de saisie plus grandes et restent dans la colonne de la timeline. Les barres de durée de survol n’affichent que la poignée de droite. Ces commandes utilisent le même magnétisme, les mêmes raccourcis clavier et le même historique d’annulation que la barre normale.
Pour déplacer votre animation sur la timeline, cliquez au milieu de la barre de timeline de votre calque, puis maintenez le bouton enfoncé et faites glisser la souris vers la gauche ou la droite pour changer sa position dans la timeline.
Saisissez des valeurs de timing précises au clavier. Si vous préférez ne pas utiliser la barre de timing, vous pouvez aussi définir la vitesse et le délai en cliquant sur la deuxième valeur de votre calque dans la timeline et en saisissant un nouveau nombre au clavier (par exemple 1.5) pour définir le nombre de secondes.
Ajuster les timings de plusieurs calques
Sélectionnez au moins deux calques, puis faites glisser la barre de timing d’entrée, de sortie ou de survol de l’un des calques sélectionnés. Bannerify applique le même déplacement à la piste de timing active correspondante des autres calques sélectionnés, en préservant leurs décalages relatifs.
Si le timing sélectionné le plus précoce ou le plus tardif atteint le bord de la timeline, Bannerify arrête le groupe à cette limite. Les calques verrouillés, les pistes de timing inactives et les timings d’entrée pilotés par des animations Figma Motion reproduites ne sont pas modifiés.
Chaque glissement terminé est enregistré comme une étape d’historique annulable.
Zoomer et faire défiler la timeline
Utilisez les boutons + et − ou le curseur de zoom au-dessus de la liste des calques pour afficher plus ou moins de détails. Le pourcentage à côté du curseur indique le niveau de zoom actuel. Cliquez sur Fit pour revenir à 100 % et afficher de nouveau toute la timeline. Le zoom modifie l’affichage sans changer les timings des animations ni la durée exportée.
Pincez vers l’intérieur ou l’extérieur avec deux doigts sur un trackpad lorsque le pointeur se trouve au-dessus de la règle ou des pistes de timing. Le moment situé sous le pointeur reste fixe pendant le zoom, dans la plage de zoom de 100–1000 %. Le pincement ne modifie que l’affichage et il est ignoré pendant que vous faites glisser une barre de timing. Vous pouvez aussi maintenir Ctrl en faisant défiler la molette de la souris.
Une fois zoomé, cliquez sur la poignée bleue arrondie de la barre de défilement, juste sous la règle, maintenez-la, puis faites-la glisser vers la gauche ou la droite pour vous déplacer dans la timeline. La poignée se met en surbrillance au survol et lorsqu’elle est enfoncée. Vous pouvez aussi faire défiler horizontalement avec un trackpad, ou maintenir Shift en faisant défiler au-dessus d’une piste de timing. La règle et les barres de timing restent alignées d’une bannière à l’autre.
Les barres d’entrée et de sortie indiquent la durée de lecture de chaque animation. La fin d’une barre d’entrée marque le moment où l’entrée se termine ; le calque peut rester visible ensuite. Les barres de survol contrôlent la durée du survol, avec un début fixe.
Ajuster les barres au clavier
Donnez le focus à une barre ou à l’une de ses poignées de bord, puis utilisez les touches fléchées pour la déplacer par pas de 0,1 seconde. Maintenez Shift pour des pas de 1 seconde. Déplacer une barre conserve sa durée ; déplacer un bord modifie son début ou sa fin.
Appuyez sur Escape pendant un glissement pour restaurer les timings d’avant le glissement, y compris ceux des calques sélectionnés déplacés avec lui. Les barres de scène déplacent ensemble les animations modifiables de la scène tout en conservant leurs durées respectives.
Aligner et organiser votre timeline
Ouvrez Timeline Settings → Timeline Tools et activez Snap pour aligner les barres d’entrée et de sortie que vous faites glisser, les barres de scène et leurs bords modifiables sur la tête de lecture, les repères, les limites de la zone de travail et les bords des animations voisines. Maintenez Alt (ou Option sous macOS) pendant le glissement pour ignorer le magnétisme. Un guide matérialise l’alignement. Le magnétisme dépend du niveau de zoom actuel : zoomez pour des réglages plus fins.
Dans le même onglet, utilisez le filtre de calques pour afficher All Layers, Selected Layers ou Animated Layers. Le filtre ne modifie que la liste de la timeline ; les lignes masquées sont toujours lues et exportées normalement. Dans le même panneau de réglages, Collapse Groups replie les listes de calques des scènes, et Expand Groups les déplie. Sélectionnez des calques et cliquez sur Zoom To Selection pour cadrer leurs plages de timing actives, dans la limite de zoom de 1000 %.
Ouvrez Timeline Settings → Timeline Tools pour ajouter un repère nommé à la position de la tête de lecture. Saisissez un Marker Name et cliquez sur Add At Playhead. Cliquez sur le losange d’un repère sur la règle, ou sur son temps dans le panneau, pour vous y rendre. Vous pouvez renommer ou supprimer les repères dans le panneau. Les repères sont conservés pendant la session d’édition en cours et n’affectent pas les animations exportées.
Enregistrer et réutiliser une séquence de mouvement
Une séquence de mouvement mémorise les animations coordonnées d’entrée, de sortie et de survol de plusieurs calques. Elle peut être appliquée à des calques nommés différemment grâce à des correspondances explicites.
- Ouvrez Timeline Settings → Motion Sequences et choisissez une Source Banner.
- Si besoin, activez Selected Source Layers Only pour n’utiliser que les calques sélectionnés de cette bannière.
- Saisissez un nom de séquence et cliquez sur Save Sequence. Les séquences enregistrées sont conservées dans vos réglages Bannerify ; la bibliothèque peut contenir jusqu’à 50 séquences. L’enregistrement sélectionne la nouvelle séquence et actualise les correspondances cibles suggérées : vérifiez-les de nouveau avant d’appliquer.
- Choisissez la séquence enregistrée et sélectionnez une ou plusieurs bannières cibles. Une séquence enregistrée fournit les animations à la place de la bannière source ; Selected Source Layers Only s’applique lorsque vous capturez ou appliquez directement depuis la source. Vous pouvez aussi appliquer directement depuis la bannière source sans l’enregistrer au préalable.
- Vérifiez les correspondances de calques suggérées. Les noms correspondants uniques sont renseignés automatiquement ; pour les noms en double ou sans correspondance, vous devez choisir un calque cible. Décochez une correspondance ou choisissez Skip / Choose A Layer pour laisser cette cible inchangée.
- Si besoin, saisissez une valeur Offset (Seconds) pour décaler les timings d’entrée et de sortie. La durée de survol n’est pas modifiée par le décalage.
- Le panneau de revue explique toute source, cible ou correspondance de calque manquante. Si les pistes associées correspondent déjà, il n’y a rien à appliquer. Vérifiez les timings avant/après et cliquez sur Apply Motion Sequence. L’ensemble de l’application constitue une seule modification annulable. Utilisez Undo, Redo ou le panneau History pour revenir à une autre étape.
Les calques verrouillés et non affichables sont exclus. Les pistes Figma Motion restent liées à leurs nœuds d’origine et ne sont ni copiées ni écrasées. Les animations propres au texte nécessitent des calques de texte. Les pistes qui dépasseraient de la timeline sont ignorées et signalées dans l’aperçu ; Bannerify ne les raccourcit pas en silence. Les pistes inactives existantes restent inchangées, sauf si la séquence fournit explicitement une animation pour cette piste.
Pour supprimer une séquence enregistrée, sélectionnez-la sous Saved Sequence, puis cliquez sur l’icône de corbeille. Supprimer une entrée de la bibliothèque ne retire pas les animations déjà appliquées à vos bannières.
Les séquences réutilisent les définitions d’animation déjà disponibles dans Bannerify, y compris votre bibliothèque d’animations personnalisées existante. Les animations personnalisées manquantes et les pistes incompatibles sont signalées et ignorées. Les animations Draw nécessitent un calque SVG, et Split Text un calque de texte compatible, comme dans le sélecteur d’animations. La synchronisation des seuls timings conserve l’animation cible et n’applique pas ces restrictions liées à l’animation source. Les séquences n’embarquent ni les visuels ni les définitions d’animations personnalisées pour un transfert vers l’installation d’un autre utilisateur.
Synchroniser les timings entre formats de bannière
Utilisez Timeline Settings → Sync Timings pour copier les plages de timing d’une bannière source vers les calques correspondants des autres bannières chargées.
- Choisissez la bannière source et, si besoin, limitez-la aux calques source sélectionnés.
- Sélectionnez les bannières cibles et vérifiez chaque correspondance de calques.
- Décochez les correspondances qui doivent conserver leurs timings actuels. Choisissez des cibles explicites pour les noms de calques ambigus ou sans correspondance.
- Vérifiez les plages de timing avant/après, puis cliquez sur Apply Timing Sync.
La synchronisation des timings préserve les choix d’animation, les réglages de boucle et les autres réglages de calque de chaque cible. Les pistes cibles inactives, les calques verrouillés et les pistes Figma Motion sont ignorés. Chaque application constitue une modification annulable, disponible dans le panneau History. Il s’agit d’une copie ponctuelle : les modifications ultérieures de la source ne changent pas automatiquement les cibles. Appliquez de nouveau la synchronisation lorsque vous voulez propager une autre mise à jour.