Éditeur d’animation Pixerate

Que fait Éditeur d’animation Pixerate ?

Une scène est une illustration (un SVG analysé en chemins et groupes vectoriels, chacun avec un identifiant) plus une liste ordonnée de plans. Un plan peut déplacer la caméra, exécuter sa séquence (run) de commandes, puis marque une pause (hold) (par défaut 600 ms). Les commandes s’exécutent l’une après l’autre sauf si "with": "previous" est défini ; chaque commande a une durée par défaut basée sur son contenu (entrée 600 ms, sortie 450, déplacement 700, dessin suit la longueur du chemin), donc laissez duration de côté sauf si vous voulez modifier le rythme. Chaque image est une fonction pure du temps.

Identifiants : les identifiants des éléments proviennent de get_animation (elements) ou find_animation_elements ; les identifiants de plans sont ceux que vous choisissez ("intro") ; les commandes sont adressées par l’identifiant du plan et leur index dans la séquence. Les temps sont en millisecondes, les positions sont en unités document de l’illustration. Tout élément qui entre plus tard est caché jusqu’à son enter ; tout élément qui n’entre jamais est visible dès le début.

Pour les erreurs, les noms d’outils avec espace de noms et les outils de commande génériques, voir pixerate-agent-tools. Le vocabulaire complet des commandes (chaque type, option et valeur par défaut) se trouve dans references/commands.md.

Compétences de workflow

Pour ces tâches, chargez également le skill de workflow : il contient la méthode, les vérifications entre les étapes et les pièges, et utilise les outils ci-dessous.

• pixerate-animation-motion-graphics : plans, entrées staggerées, easing, pauses, ajustement d’une durée.
• pixerate-animation-logo-reveal : une courte apparition à partir des parties du logo, sur le temps, se terminant en pause.

Méthode de travail

1. Lire. get_animation pour obtenir les éléments, les plans avec leur timing, les clips, les drivers et les problèmes. S’il n’y a pas d’illustration, utilisez set_animation_artwork_svg d’abord (donnez un identifiant à chaque élément que vous animerez), ou partez de import_flair_effect / import_pptx_animation. Pour le texte vectorisé, get_text_layout montre les unités de lettres, mots et lignes.
2. Planifier les plans, une idée chacun. Notez ce que le spectateur doit remarquer dans chaque plan et dans quel ordre, puis associez chaque temps fort à une commande. Les états finaux cachés (cibles de morphing / match, chemins de suivi) doivent exister dans l’illustration avant que vous ne les référenciez.
3. Écrire par lots. insert_shots pour des plans complets ; edit_animation pour plusieurs modifications liées en une seule étape d’annulation (dry_run: true d’abord en cas de doute ; "$0.indexes[0]" et "$last.shot" font référence aux opérations précédentes). Affinez avec add_commands, update_command, move_command, delete_commands. Utilisez write_animation uniquement pour remplacer tous les plans. Pour un type de commande que vous n’avez jamais écrit auparavant, describe_animation_command renvoie ses champs exacts d’abord. Pour un mouvement qui doit donner l’impression d’être joué plutôt que keyé (un swoop dessiné à la main, un traîné saccadé, une couleur choisie en cours de mouvement), record_animation_take avec des échantillons temporels l’enregistre comme un seul plan, de la même manière qu’une personne enregistre en direct sur scène.
4. Ajuster et synchroniser. fit_animation pour atteindre une durée (conservez les plans dont le rythme compte). Pour la musique ou la voix off, set_animation_settings avec beat ou narration, lisez les repères avec get_timing_grid, et donnez aux plans "at": { "beat": n } ou { "word": i }.
5. Vérifier. check_animation ; corrigez chaque erreur et avertissement (codes tels que too-fast, overlap, out-of-frame, enter-visible, cue-missed). Utilisez get_motion_path pour l’espacement et les arcs sous forme de nombres.
6. Regarder. render_animation_frame avec shot + at: "end", ou times pour une planche contact, plus onion_skin / motion_paths pour voir le mouvement en une seule image. Rendez après un lot, pas après chaque modification. seek_animation montre un instant à la personne.
7. Exporter lorsque demandé : export_flair_motion, export_flair_effect (après set_animation_controls) ou export_lottie ; lisez les notes renvoyées sur ce qui a été échantillonné ou supprimé.

Bonnes pratiques

• Une idée par plan, un mouvement focal à la fois. Mettez en scène l’action pour que l’œil sache où regarder ; les éléments secondaires bougent moins, plus tard, ou pas du tout. Utilisez la caméra (frame un nœud) pour diriger l’attention plutôt que de tout déplacer.
• Easez chaque changement. Les arrivées se font avec un ease out (décélération jusqu’à la position ; la valeur par défaut pour enter), les sorties avec un ease in (exit avec ease: "ease-in"), les déplacements avec un ease in-out (la valeur par défaut). Utilisez linear uniquement pour les mouvements mécaniques (une rotation constante, une barre de progression) ou les boucles.
• Timing basé sur la taille et la distance. Petits changements d’interface 150-300 ms, entrées d’éléments 300-600 ms, grands déplacements et mouvements de caméra 600-1200 ms. Rien en dessous de 120 ms (too-fast). Les grandes choses bougent plus lentement que les petites.
• Anticipation et suivi. ease-in-back pour un élan avant une sortie rapide ; pop, rise, ease-out-back ou un préréglage de ressort (spring-gentle, spring-quick) pour un dépassement et un arrêt à l’arrivée. Utilisez spring-bouncy avec parcimonie ; il donne un aspect ludique.
• Action superposée. Stagger les éléments liés de 40 à 120 ms (stagger, ou split avec cascade pour le texte) au lieu de les déplacer en synchronisation ; démarrez le mouvement secondaire avec "with": "previous" plus un petit delay pour qu’il suive le mouvement principal.
• Arcs. Courbes de mouvement naturelles : utilisez move avec des waypoints via (un seul chemin lisse) au lieu de déplacements chaînés qui s’arrêtent à chaque point, ou follow un nœud de chemin.
• Prises enregistrées. Échantillonnez une performance à 30-60 par seconde ; l’enregistreur ne conserve que les points qui comptent (augmentez tolerance pour moins de commandes, plus propres). Commencez chaque élément en mouvement avec un échantillon à sa pose actuelle (le dernier point de get_motion_path, ou le centre de ses limites au repos) sinon il saute à cet endroit à son premier échantillon. Une prise est un nouveau plan après les autres (ou à at) ; elle ne peut pas être superposée à un plan existant. Affinez-la comme n’importe quel plan : ce sont des commandes ordinaires move (avec via et times), scale, rotate, fade et style.
• Pausez assez longtemps pour lire. Laissez chaque résultat à l’écran (plan hold, par défaut 600 ms) ; environ 250 ms par mot pour un texte à lire, plus longtemps pour l’image finale ou le logo.
• Exagération avec retenue. L’emphase (pulse, shake, teeter, color-pulse) est pour une seule chose qui a besoin d’attention, une fois ; elle revient au repos d’elle-même.
• Flou de mouvement uniquement pour les mouvements vraiment rapides (motionBlur: { shutter: 180 }) ; il affecte l’écran et les images rendues, pas les exports Flair ou Lottie.
• Accessibilité. Évitez les flashs : jamais plus de trois flashs par seconde (WCAG 2.3.1), donc gardez color-pulse et les fondus sur de grandes zones lents et peu nombreux. Évitez les parallaxes à grande échelle, les zooms et les rotations pour les mouvements d’interface essentiels ; fournissez une alternative de mouvement réduit (l’hôte doit échanger avec un fondu ou l’état final sous prefers-reduced-motion ; cet éditeur n’en génère pas un). Les boucles qui durent plus de 5 s ont besoin d’un moyen de pause (WCAG 2.2.2).
• Éléments interactifs. Pour un bouton ou un interrupteur, définissez trigger (click, hover, press, scroll) ; pour un interrupteur à bascule, faites en sorte que le dernier plan restaure l’état de départ.

Référence des outils

Lecture

Outil	Utilisation
get_animation	Commencez ici. Renvoie le nom, la taille de l’illustration, la durée (ms), la boucle, les éléments (identifiant, type, nom, parent, limites, peintures solides, effets en direct avec paramètres numériques), chaque plan avec l’index, le début, la fin et flairPrimitive de chaque commande, les clips, drivers, contrôles et un résumé des problèmes, plus readOnly lorsque les modifications sont refusées. includeElements: false (vrai par défaut) saute la liste des éléments sur les grandes illustrations.
get_shot	Lire un plan tel que stocké (identifiant shot) avec son début/fin et le début/fin de chaque commande en ms ; moins cher que get_animation pour affiner un seul plan.
describe_animation_command	Avant d’écrire un type de commande que vous n’avez pas encore utilisé, ou lorsqu’une écriture rejette un champ : renvoie le schéma JSON complet de chaque types (par exemple ["enter", "move"]), avec le type, la plage, la valeur par défaut et la signification de chaque champ, et ceux qui sont obligatoires. Les outils d’écriture listent chaque champ de commande une fois en court, préfixé par les types qui l’acceptent.
find_animation_elements	Trouver les éléments dont l’identifiant ou le nom contient query (insensible à la casse ; limit par défaut 20, max 200) lorsque l’illustration est grande. Renvoie l’identifiant, le type, le nom, le parent, les limites, les peintures, les effets.
get_text_layout	Avant d’animer du texte vectorisé avec split : renvoie les lignes, mots et identifiants de lettres du group dans l’ordre de lecture. Erreur si l’élément n’est pas un groupe de chemins (convertissez le texte en contours, un chemin par lettre, et regroupez-le).
get_motion_path	Vérifier l’espacement, les arcs et les points d’arrivée sous forme de nombres : échantillonne le centre d’un node (en unités document) de from à to ms tous les step ms (par défaut 33, au maximum 400 échantillons), avec où chaque changement de mouvement commence et se termine.
get_timing_grid	Lister les temps forts (numéro, ms, mesure, temps dans la mesure) et les mots de narration (index, texte, début, fin) entre from et to (limit par défaut 200), et quel plan joue à chacun, pour choisir les repères at. Vide, avec un indice, lorsqu’aucune grille de temps ou narration n’est définie.
check_animation	Après chaque lot d’écritures. Liste les problèmes avec un code, une sévérité, un plan, un index de commande, des identifiants de nœud, des valeurs mesurées par rapport aux valeurs nécessaires et comment les corriger. Corrigez les erreurs et les avertissements ; les notes sont indicatives.
render_animation_frame	Regarder le résultat : time (ms) ou shot + at (start, middle, end ; fin par défaut). times (2-16 moments) fait une planche contact étiquetée (columns 1-8). onion_skin ajoute des images fantômes (before par défaut 2, after 0, spacing ms ou "commands") ; motion_paths (vrai ou identifiants) dessine les trajectoires. SVG par défaut ; format: "png" uniquement lorsque l’hôte peut pixelliser.
export_flair_motion	Obtenir la scène sous forme de SvgMotion Flair { svg, animate } avec le nombre de steps d’attente et d’échantillonnage et des notes. fps (fps de la scène par défaut, sinon 30), curves et behaviors (vrai par défaut), flair version cible (par défaut 0.39 ; les versions plus anciennes échantillonnent les ressorts, steps, behaviors et courbes).
export_flair_effect	Obtenir un effet vectoriel de catalogue Flair (id en kebab-case, name, description, category icône par défaut, tags, plus curves / behaviors / flair comme ci-dessus). Appelez set_animation_controls d’abord pour que les couleurs deviennent des contrôles {{name: color}}.
export_lottie	Obtenir un JSON Lottie (Bodymovin v5) pour lottie-web et les lecteurs mobiles, avec un marqueur par plan, fps (fps de la scène par défaut, sinon 30), le nombre de keyframes échantillonnées et des notes sur ce qui n’a pas été conservé (dégradés, tirets, clips de révélations, morphings qui changent le nombre de points).

Écriture

Outil	Utilisation
seek_animation	Montrer un instant à la personne : time (ms) ou le début d’un shot, avec play vrai ou faux. Ne modifie pas la scène.
set_animation_artwork_svg	Remplacer l’illustration par un svg autonome (avec un viewBox) en une seule étape d’annulation. Mettez un identifiant sur chaque élément que vous animerez ; refusé si des plans existants référencent des identifiants qui manquent dans la nouvelle illustration. Renvoie les éléments.
import_pptx_animation	Remplacer toute la scène par les formes et le volet d’animation d’une diapositive PowerPoint (data .pptx en base64, slide par défaut 1) : un plan par clic, les délais, répétitions et accélérations conservés ; le texte, les images et les graphiques sont exclus avec des notes. Exécutez avec dry_run: true d’abord.
set_animation_drivers	Remplacer tous les drivers (liste vide efface) : un x, y, rotation, scaleX, scaleY ou opacity d’une cible suit une propriété d’un nœud source comme changement · factor + offset, éventuellement clampé. Pour les parallaxes, les roues qui tournent en roulant, les ombres qui s’estompent quand quelque chose s’élève.
set_animation_clip	Définir, remplacer ou (avec clip: null) supprimer un clip réutilisable nommé dont la run cible "$" ; jouez-le avec une commande play sur n’importe quels nœuds. Préférez un clip à des commandes identiques répétées.
copy_animation	Donner aux nœuds dans to chaque commande qui anime from (tous les plans ou shots), chaque copie commençant avec son original, éventuellement staggeré (ms). Rapide pour une duplication ponctuelle ; utilisez un clip pour un mouvement que vous réutiliserez.
record_animation_take	Enregistrer un mouvement joué comme nouveau plan (une étape d’annulation) : samples de { node, t (ms dans la prise), x, y (centre), scaleX, scaleY, rotation, opacity, fill, stroke, strokeWidth } deviennent un move à travers des waypoints aux times enregistrés et quelques commandes scale / rotate / fade / style avec easing, chacune commençant à son moment. length, id, label, at, tolerance optionnels ; dry_run: true renvoie d’abord la run. Renvoie l’identifiant du plan, son début et l’index, le type, le début et la fin de chaque commande ; check_animation et render_animation_frame après.
fit_animation	Faire durer la scène seconds en définissant la speed des plans, en gardant les proportions ; les plans dans keep jouent tels qu’écrits. dry_run: true rapporte d’abord la nouvelle durée et les vitesses.
import_flair_effect	Remplacer toute la scène par un effect vectoriel Flair ou un motion SvgMotion (donnez exactement un ; name optionnel). Les espaces réservés deviennent des contrôles de couleur ; chaque étape Flair devient un plan. Utilisez dry_run: true d’abord.
insert_shots	Ajouter un ou plusieurs plans complets (id, run, label, camera, hold, speed, at optionnels) à la position at (par défaut la fin). Renvoie le timing et les problèmes de chaque plan.
update_shot	Modifier label, camera, run, hold, speed, at ou id d’un plan via set, et effacer label, camera, hold, speed ou at via remove.
delete_shots	Supprimer des plans par identifiant (une étape d’annulation).
move_shot	Réorganiser un plan à l’index to (0 = premier).
add_commands	Ajouter des commandes à la run d’un plan à l’index at (par défaut la fin). Renvoie les index qu’elles ont obtenus et leur timing ; utilisez ces index pour les mises à jour ultérieures.
update_command	Modifier une commande (par shot et index command) : les champs dans set remplacent, les noms dans remove effacent (par exemple "delay"). Renvoie la commande et son timing.
delete_commands	Supprimer des commandes d’un plan par index ; les commandes suivantes remontent, donc relisez les index après.
move_command	Déplacer une commande à l’index to dans sa run ; une commande avec "with": "previous" commence alors avec son nouveau voisin.
set_animation_settings	Définir name, description, loop (none, loop, ping-pong), trigger (click, hover, press, scroll, ou null), fps d’export (par défaut 30), steps de scène (12 = on twos ; null lisse

… (tronqué pour la traduction)