Animer les groupes et les calques imbriqués indépendamment

Déplacez, redimensionnez, faites pivoter ou fondre un groupe parent pendant que ses calques enfants jouent leurs propres animations Bannerify.

Tutoriel vidéo : animez les groupes et les calques indépendamment avec Group Motion
Suivez le tutoriel pas à pas.

Bannerify peut animer en même temps un groupe parent et les calques qu’il contient. Par exemple, vous pouvez faire traverser la bannière à un groupe représentant une voiture tout en faisant tourner indépendamment les calques de ses roues.

Ce dont vous aurez besoin ​

  • Un frame Figma de premier niveau contenant le design de votre bannière.
  • Un calque parent contenant un ou plusieurs calques enfants.
  • Des noms distincts pour chaque calque enfant à animer individuellement.

Étapes ​

  1. Dans Figma, placez les calques liés dans un même groupe parent. Pour animer une voiture, vous pouvez par exemple créer un groupe Car contenant Body, Wheel Left et Wheel Right.
  2. Indiquez à Bannerify de déplier le groupe parent, de l’une de ces deux façons :
    • Ajoutez [expand] au nom du calque parent, par exemple Car [expand].
    • Ouvrez Bannerify, cliquez sur l’icône List en haut de la timeline de la bannière, puis cliquez sur la flèche à côté du calque parent.
  3. Dans le panneau des calques imbriqués, activez Keep Parent Animatable à côté du parent déplié. Cette option est désactivée par défaut, pour que les configurations de calques imbriqués existantes conservent leur comportement précédent, limité aux enfants.
  4. Fermez le panneau des calques imbriqués. Bannerify actualise la bannière et ajoute les calques enfants exposés à la timeline.
  5. Vérifiez que la timeline contient les calques enfants et une ligne parent distincte intitulée (Group Motion). Dans cet exemple, la ligne parent s’affiche sous la forme Car [expand] (Group Motion).
  6. Appliquez le mouvement commun à la ligne Group Motion. Par exemple, appliquez Slide In Left pour faire entrer toute la voiture dans la bannière.
  7. Appliquez des animations indépendantes aux lignes des enfants. Par exemple, appliquez Rotate 360° à chaque roue.
  8. Cliquez sur Play All Banners ou utilisez le curseur de la timeline pour prévisualiser le résultat combiné.
  9. Exportez la bannière normalement. Les animations du parent et des enfants sont combinées dans les exports HTML, GIF, MP4, WebM et les autres exports média rendus via canvas.

Group Motion ​

Lorsque Keep Parent Animatable est activé, Bannerify marque le parent comme Animatable et ajoute une ligne Group Motion distincte à la timeline. La ligne parent sert d’enveloppe de mouvement autour de ses calques enfants exposés. La translation, la mise à l’échelle, la rotation, l’opacité et le masquage appliqués au parent se combinent avec les animations appliquées à chaque enfant.

Si Keep Parent Animatable est désactivé, les calques enfants restent dépliés et animables, mais Bannerify n’ajoute pas la ligne Group Motion du parent. Bannerify mémorise cette option pour chaque calque parent.

Utilisez des noms de calques enfants clairs et cohérents lorsque la même structure se retrouve dans plusieurs formats de bannière. Vous pourrez ensuite utiliser Quick Select Layers pour sélectionner les calques correspondants et leur appliquer des animations en masse.

Déplacer une photo dans un masque arrondi ​

Pour faire glisser un groupe masqué dans la bannière pendant que sa photo bouge indépendamment :

  1. Dans Figma, utilisez un seul rectangle comme masque pour tout le groupe. Placez le masque sous tous les éléments qu’il découpe. Vous pouvez utiliser un rayon différent pour chaque coin.
  2. Dépliez le groupe masqué dans Bannerify et activez Keep Parent Animatable.
  3. Appliquez Slide In Left à la ligne Group Motion du groupe.
  4. Appliquez une animation distincte, comme Zoom Pan Right, à la ligne de la photo. Augmentez sa durée pour un panoramique plus lent.
  5. Prévisualisez et exportez la bannière. La photo se déplace à l’intérieur du contour arrondi pendant que l’animation du parent déplace tout le groupe.

Cela fonctionne avec les masques rectangulaires sans rotation et aux coins standard, en utilisant un masque Alpha opaque ou un masque Vector. Le masque lui-même ne devient pas une ligne d’animation. Laissez repliés les groupes qui ont plusieurs masques, des masques partiels entre éléments frères, des masques adoucis ou de luminance, un lissage des coins, des contours ou des effets, pour qu’ils gardent leur apparence sous forme d’une seule image.

Utiliser les sections Figma ​

La même configuration fonctionne lorsque Use Figma sections as multi-scene banners est activé. Chaque ligne exposée indique son numéro de scène, et un parent pour lequel l’option est activée reste disponible sous forme de ligne Group Motion distincte dans cette scène.

Calques de slot Figma ​

Bannerify prend aussi en charge les calques de slot de Figma dans les frames de bannière. Les conteneurs de slot sont traités comme des groupes de calques imbriqués et sont dépliés la première fois que Bannerify les charge, ce qui rend leurs calques enfants immédiatement disponibles dans la timeline.

Si vous repliez manuellement un calque de slot, Bannerify mémorise ce choix lors de l’actualisation de la bannière.

Si le groupe ou les calques enfants n’apparaissent pas ​

  • Vérifiez que la bannière est un frame Figma de premier niveau ou qu’elle se trouve dans une section chargée en mode multiscène.
  • Vérifiez que le parent contient des calques enfants et qu’il est déplié dans Bannerify.
  • Si les calques enfants apparaissent sans la ligne Group Motion du parent, ouvrez le panneau des calques imbriqués et activez Keep Parent Animatable à côté du parent.
  • Si vous avez ajouté [expand] au nom du parent après avoir chargé la bannière, cliquez sur Refresh Banner Layers.
  • Gardez les calques enfants visibles dans Figma et assurez-vous qu’ils se trouvent dans le parent déplié.