vidmoat/layered-motion

Mouvement superposé (compositions)

Une composition est un graphisme animé composé de couches, chaque propriété étant animée par images clés de façon indépendante, que l'utilisateur peut ouvrir dans le panneau Composition et modifier. Créez-en une lorsque le graphisme est susceptible d'être édité (un tiers inférieur avec un nom qui change, un titre qui sera retemporisé). Pour un graphisme unique sans modification prévue, un composant de mouvement ou un élément HTML convient ; convertToComposition transforme un composant de mouvement ou un composant TSX en couches ultérieurement.

Workflow

1. Recherchez : capacités de recherche, type workflows, id compositions pour le contrat, et get_command_schema (MCP) ou searchCatalogue type commands id editComposition pour chaque opération.
2. Démarrez simplement : addComposition avec les couches dont vous avez besoin, en pixels de composition. Nommez chaque couche pour ce qu'elle est (« Nom », « Rôle », « Barre ») : l'utilisateur lit ces noms dans le panneau, et les expressions trouvent les couches par leur nom.
3. Animez avec des images clés, une propriété à la fois. L'easing d'une image clé façonne le mouvement VERS celle-ci. Ease out sur les entrées (easeOutCubic), ease in sur les sorties, et gardez les entrées entre 0,4 et 0,6 seconde.
4. Relisez (get_project : clips[].composition) avant la modification suivante, afin que les opérations utilisent les vrais noms de couche, d'animateur, de chemin et d'effet.
5. Examinez les images à l'entrée, au maintien et à la sortie avant de déclarer le travail terminé.

Quel outil pour quel rendu

• Mots qui apparaissent : un animateur de texte, pas des images clés sur plusieurs couches de texte. textPreset typewriter pour le code ou les sous-titres lus à voix haute, wordPop pour un accroche percutante, lineRise pour un titre calme, fadeByChar pour un dévoilement élégant. Écrivez le vôtre avec setAnimator quand aucun ne convient (unité, forme, plage).
• Un volet ou dévoilement d'une forme : un masque avec sa largeur ou ses points animés, ou un cache de piste lorsque le dévoilement suit la forme d'une autre couche.
• Une ligne qui se dessine elle-même (un soulignement, un cercle autour d'un mot, une flèche) : une couche de forme avec un contour et des chemins de coupe, trimEnd animé de 0 à 100. Les extrémités rondes donnent un aspect dessiné ; les extrémités plates, un aspect coupé.
• Une forme qui se transforme en une autre : animez les points du chemin ; chaque image clé doit avoir le même nombre de points.
• Quelque chose qui bouge en continu (un flottement léger, une pulsation) : une expression (value + wiggle(1, 6), ou loopOut("pingpong")) au lieu de dizaines d'images clés. Gardez le wiggle faible : quelques pixels donne une impression de vie, des dizaines de cassure.
• Une couche qui en suit une autre : une expression lisant cette dernière (layer("Barre").x), afin qu'une modification ultérieure du leader entraîne le suiveur.
• Profondeur et finition : la pile d'effets (ombre portée, lueur, contour, remplissage couleur ou dégradé, flou). Une ombre par graphisme, douce et basse ; lueur uniquement sur fond clair.
• Un bloc répété ou réutilisable (un badge de nom utilisé trois fois) : précomposez-le et placez la pré-comp trois fois, chacune avec son propre décalage temporel.

Un tiers inférieur, en couches

1. Une barre (rectangle, couleur de la marque) avec un masque rectangulaire dont la largeur est animée de 0 à 100 % sur 0,5 s, easeOutCubic.
2. Le nom (texte, gras) au-dessus avec textPreset lineRise commençant 0,15 s plus tard ; le rôle (texte, plus clair, plus petit) avec fadeByChar 0,1 s après.
3. Maintenez au moins 2,5 secondes ; sortie en animant l'opacité du groupe, ou en ramenant le masque de la barre à 0, sur 0,3 s, easeInCubic.
4. Placez-le dans la zone de sécurité inférieure, à l'écart des sous-titres.

Pièges

• setProps sur une propriété animée nécessite time : il définit l'image clé à cet endroit. Sans time, il est refusé (une valeur de base ne s'afficherait pas).
• Une couche verrouillée refuse toute modification jusqu'à setLayer { locked: false }.
• Un cache de piste utilise la couche DIRECTEMENT au-dessus ; le réordonnancement change l'association.
• Les expressions sont un petit langage : les noms time, value, index, duration, et les fonctions listées. Tout autre chose est refusé avec la liste.
• La coupe et le contour s'appliquent au contour d'une forme, pas à son remplissage.

Compétences associées : motion-graphics, titles, text-led-video. Spécialiste : motion-designer.