Editor de Animação Pixerate

O que Editor de Animação Pixerate faz?

Uma cena é uma artwork (um SVG analisado em paths e grupos vetoriais, cada um com um id) mais uma lista ordenada de shots. Um shot opcionalmente move a câmera, executa sua sequência (run) de comandos, depois pausa (hold, padrão 600 ms). Os comandos são executados um após o outro, a menos que "with": "previous"; cada um tem uma duração padrão obtida do conteúdo (enter 600 ms, exit 450, move 700, draw segue o comprimento do path), então deixe duration de fora a menos que você queira mudar o ritmo. Cada quadro é uma função pura do tempo.

Ids: os ids dos elementos vêm de get_animation (elements) ou find_animation_elements; os ids dos shots são os que você escolhe ("intro"); os comandos são endereçados pelo id do shot mais seu índice na sequência. Os tempos estão em milissegundos, as posições estão nas unidades do documento da artwork. Qualquer coisa que entra mais tarde fica oculta até seu enter; qualquer coisa que nunca entra fica visível desde o início.

Para erros, nomes de ferramentas com namespace e as ferramentas de comando genéricas, consulte pixerate-agent-tools. O vocabulário completo de comandos (cada tipo, opção e padrão) está em references/commands.md.

Habilidades de Fluxo de Trabalho

Para estes trabalhos, carregue também o skill de fluxo de trabalho: ele contém o método, as verificações entre as etapas e as armadilhas, e usa as ferramentas abaixo.

• pixerate-animation-motion-graphics: shots, entradas escalonadas, easing, pausas, ajuste de duração.
• pixerate-animation-logo-reveal: uma revelação curta a partir das partes do logotipo, na batida, terminando em pausa.

Método de Trabalho

1. Leia. get_animation para elementos, shots com temporização, clipes, drivers e problemas. Se não houver artwork, use set_animation_artwork_svg primeiro (dê um id a cada elemento que você animará), ou comece com import_flair_effect / import_pptx_animation. Para texto contornado, get_text_layout mostra as unidades de letra, palavra e linha.
2. Planeje shots, uma ideia cada. Anote o que o espectador deve notar em cada shot e em que ordem, então mapeie cada batida para um comando. Estados finais ocultos (alvos de morph / match, paths a seguir) devem existir na artwork antes de você referenciá-los.
3. Escreva em lotes. insert_shots para shots inteiros; edit_animation para várias edições relacionadas como uma única etapa de desfazer (dry_run: true primeiro quando estiver em dúvida; "$0.indexes[0]" e "$last.shot" referem-se a operações anteriores). Refine com add_commands, update_command, move_command, delete_commands. Use write_animation apenas para substituir todos os shots. Para um tipo de comando que você ainda não escreveu, describe_animation_command retorna seus campos exatos primeiro. Para movimento que deve parecer performático em vez de keyframado (um swoop desenhado à mão, um arrasto trêmulo, uma cor escolhida no meio do movimento), record_animation_take com amostras temporizadas o grava como um shot, da mesma forma que uma pessoa grava ao vivo no palco.
4. Ajuste e cue. fit_animation para atingir uma duração (mantenha shots cujo ritmo importa). Para música ou voz-over, use set_animation_settings com beat ou narration, leia as cues com get_timing_grid, e dê aos shots "at": { "beat": n } ou { "word": i }.
5. Verifique. check_animation; corrija todos os erros e avisos (códigos como too-fast, overlap, out-of-frame, enter-visible, cue-missed). Use get_motion_path para espaçamento e arcos como números.
6. Veja. render_animation_frame com shot + at: "end", ou times para uma folha de contato, além de onion_skin / motion_paths para ver o movimento em uma imagem. Renderize após um lote, não após cada edição. seek_animation mostra à pessoa um momento.
7. Exporte quando solicitado: export_flair_motion, export_flair_effect (após set_animation_controls) ou export_lottie; leia as notas retornadas sobre o que foi amostrado ou descartado.

Boas Práticas

• Uma ideia por shot, um movimento focal de cada vez. Encene a ação para que o olho saiba onde olhar; elementos secundários movem-se menos, mais tarde ou nem se movem. Use a câmera (frame um nó) para direcionar a atenção em vez de mover tudo.
• Suavize toda mudança. Chegadas suavizam na saída (desaceleram até o lugar; o padrão para enter), saídas suavizam na entrada (exit com ease: "ease-in"), movimentos suavizam na entrada e saída (o padrão). Use linear apenas para movimento mecânico (uma rotação constante, uma barra de progresso) ou loops.
• Temporização por tamanho e distância. Pequenas mudanças de UI 150-300 ms, entradas de elemento 300-600 ms, grandes movimentos e movimentos de câmera 600-1200 ms. Nada abaixo de 120 ms (too-fast). Coisas grandes movem-se mais devagar que coisas pequenas.
• Antecipação e acompanhamento. ease-in-back para uma preparação antes de uma saída rápida; pop, rise, ease-out-back ou um preset de spring (spring-gentle, spring-quick) para overshoot e estabilização na chegada. Use spring-bouncy com moderação; ele soa como brincalhão.
• Ação sobreposta. Escalone itens relacionados em 40-120 ms (stagger, ou split com cascade para texto) em vez de movê-los em sincronia; inicie o movimento secundário com "with": "previous" mais um pequeno delay para que ele siga o líder.
• Arcos. Curvas de movimento naturais: use move com waypoints via (um path suave) em vez de movimentos encadeados que param em cada ponto, ou follow um nó de path.
• Takes gravados. Amostre uma performance a 30-60 por segundo; o gravador mantém apenas os pontos que importam (aumente tolerance para menos comandos, mais limpos). Comece cada elemento móvel com uma amostra em sua pose atual (último ponto de get_motion_path, ou o centro de seus limites em repouso) ou ele saltará para lá na primeira amostra. Um take é um novo shot após os outros (ou em at); não pode ser sobreposto a um shot existente. Refine-o como qualquer shot: é move comum (com via e times), scale, rotate, fade e comandos style.
• Segure tempo suficiente para ler. Deixe cada resultado na tela (shot hold, padrão 600 ms); aproximadamente 250 ms por palavra para texto que deve ser lido, mais tempo para o quadro final ou logotipo.
• Exagero com moderação. Ênfase (pulse, shake, teeter, color-pulse) é para uma coisa que precisa de atenção, uma vez; ela retorna ao repouso por si só.
• Motion blur apenas para movimento genuinamente rápido (motionBlur: { shutter: 180 }); ele afeta o palco e os quadros renderizados, não as exportações Flair ou Lottie.
• Acessibilidade. Evite flashes: nunca mais de três flashes por segundo (WCAG 2.3.1), então mantenha color-pulse e fades em grandes áreas lentos e poucos. Evite parallax em grande escala, zooms e rotação para movimento essencial de UI; forneça uma alternativa de movimento reduzido (o host deve substituir por um fade ou o estado final sob prefers-reduced-motion; este editor não gera um). Loops que duram mais de 5 s precisam de uma forma de pausar (WCAG 2.2.2).
• Peças interativas. Para um botão ou alternância, defina trigger (click, hover, press, scroll); para uma alternância de clique, faça o último shot restaurar o estado inicial.

Referência de Ferramentas

Leitura

Ferramenta	Use para
get_animation	Comece aqui. Retorna nome, tamanho da artwork, duração (ms), loop, elementos (id, tipo, nome, pai, limites, preenchimentos sólidos, efeitos ao vivo com parâmetros numéricos), cada shot com índice de cada comando, início, fim e flairPrimitive, clipes, drivers, controles e um resumo de problemas, além de readOnly quando edições são recusadas. includeElements: false (padrão true) pula a lista de elementos em artworks grandes.
get_shot	Leia um shot armazenado (shot id) com seu início/fim e início/fim de cada comando em ms; mais barato que get_animation ao refinar um shot.
describe_animation_command	Antes de escrever um tipo de comando que você ainda não usou, ou quando uma escrita rejeita um campo: retorna o JSON Schema completo de cada um dos types (ex.: ["enter", "move"]), com tipo de cada campo, intervalo, padrão, significado e quais são obrigatórios. As ferramentas de escrita listam cada campo de comando uma vez, de forma resumida, prefixadas com os tipos que o aceitam.
find_animation_elements	Encontre elementos cujo id ou nome contém query (case-insensitive; limit padrão 20, máximo 200) quando a artwork é grande. Retorna id, tipo, nome, pai, limites, preenchimentos, efeitos.
get_text_layout	Antes de animar texto contornado com split: retorna as linhas, palavras e ids de letras do group em ordem de leitura. Erro se o elemento não for um grupo de paths (converta texto em contornos, um path por letra, e agrupe).
get_motion_path	Verifique espaçamento, arcos e pontos de aterrissagem como números: amostra o centro de um node (unidades do documento) de from a to ms a cada step ms (padrão 33, no máximo 400 amostras), com onde cada mudança móvel começa e termina.
get_timing_grid	Liste batidas (número, ms, barra, batida na barra) e palavras de narração (índice, texto, início, fim) entre from e to (limit padrão 200), e qual shot toca em cada, para escolher cues at. Vazio, com uma dica, quando nenhuma grade de batida ou narração está definida.
check_animation	Após cada lote de escritas. Lista problemas com um código, severidade, shot, índice do comando, ids de nós, valores medidos vs necessários e como corrigir. Corrija erros e avisos; notas são consultivas.
render_animation_frame	Veja o resultado: time (ms) ou shot + at (start, middle, end; padrão end). times (2-16 momentos) faz uma folha de contato etiquetada (columns 1-8). onion_skin adiciona quadros fantasmas (before padrão 2, after 0, spacing ms ou "commands"); motion_paths (true ou ids) desenha paths de viagem. SVG por padrão; format: "png" apenas quando o host pode rasterizar.
export_flair_motion	Obtenha a cena como um Flair SvgMotion { svg, animate } com pausa, contagem de passos amostrados e notas. fps (padrão fps da cena, senão 30), curves e behaviors (padrão true), flair versão alvo (padrão 0.39; versões mais antigas têm springs, steps, behaviours e curves amostrados).
export_flair_effect	Obtenha um efeito vetorial de catálogo Flair (id kebab-case, name, description, category padrão icon, tags, mais curves / behaviors / flair como acima). Chame set_animation_controls primeiro para que as cores se tornem controles {{name: color}}.
export_lottie	Obtenha JSON Lottie (Bodymovin v5) para players lottie-web e mobile, com um marcador por shot, fps (padrão fps da cena, senão 30), a contagem de keyframes amostrados e notas sobre o que não foi transportado (gradientes, traços, clipes de revelação, morphs que mudam contagens de pontos).

Escrita

Ferramenta	Use para
seek_animation	Mostre à pessoa um momento: time (ms) ou o início de um shot, com play true ou false. Não muda a cena.
set_animation_artwork_svg	Substitua a artwork por um svg independente (com um viewBox) como uma etapa de desfazer. Coloque um id em cada elemento que você animará; recusado se shots existentes nomearem ids que a nova artwork não tem. Retorna os elementos.
import_pptx_animation	Substitua toda a cena pelas formas e painel de animação de um slide do PowerPoint (data base64 .pptx, slide padrão 1): um shot por clique, atrasos, repetições e aceleração mantidos; texto, imagens e gráficos são omitidos com notas. Execute com dry_run: true primeiro.
set_animation_drivers	Substitua todos os drivers (lista vazia limpa): x, y, rotation, scaleX, scaleY ou opacity de um alvo segue a propriedade de um nó fonte como mudança · factor + offset, opcionalmente clampado. Para parallax, rodas que giram enquanto rolam, sombras que desaparecem enquanto algo sobe.
set_animation_clip	Defina, substitua ou (com clip: null) exclua um clipe reutilizável nomeado cuja run tem como alvo "$"; toque-o com um comando play em quaisquer nós. Prefira um clipe a comandos idênticos repetidos.
copy_animation	Dê aos nós em to cada comando que anima from (todos os shots ou shots), cada cópia começando com seu original, opcionalmente staggerado (ms). Rápido para duplicação única; use um clipe para movimento que você reutilizará.
record_animation_take	Grave movimento performático como um novo shot (uma etapa de desfazer): samples de { node, t (ms no take), x, y (centro), scaleX, scaleY, rotation, opacity, fill, stroke, strokeWidth } tornam-se um move através de waypoints nos times gravados e alguns comandos scale / rotate / fade / style suavizados, cada um começando quando aconteceu. length, id, label, at, tolerance opcionais; dry_run: true retorna a sequência primeiro. Retorna o id do shot, seu início e índice, tipo, início e fim de cada comando; check_animation e render_animation_frame depois.
fit_animation	Faça a cena durar seconds definindo a speed do shot, mantendo proporções; shots em keep tocam como escritos. dry_run: true relata a nova duração e velocidades primeiro.
import_flair_effect	Substitua toda a cena por um effect vetorial Flair ou motion SvgMotion (forneça exatamente um; name opcional). Placeholders tornam-se controles de cor; cada passo Flair torna-se um shot. Use dry_run: true primeiro.
insert_shots	Adicione um ou mais shots completos (id, run, label opcional, camera, hold, speed, at) na posição at (padrão o final). Retorna a temporização e problemas de cada shot.
update_shot	Mude label, camera, run, hold, speed, at ou id de um shot via set, e limpe label, camera, hold, speed ou at via remove.
delete_shots	Remova shots por id (uma etapa de desfazer).
move_shot	Reordene um shot para o índice to (0 = primeiro).
add_commands	Adicione comandos à sequência de um shot no índice at (padrão o final). Retorna os índices que obtiveram e sua temporização; use esses índices para atualizações posteriores.
update_command	Altere um comando (por shot e índice command): campos em set substituem, nomes em remove limpam (ex.: "delay"). Retorna o comando e sua temporização.
delete_commands	Remova comandos de um shot por índice; comandos posteriores sobem, então releia os índices depois.
move_command	Mova um comando para o índice to em sua sequência; um comando com "with": "previous" então começa com seu novo vizinho.
set_animation_settings	Defina name, description, loop (none, loop, ping-pong), trigger (click, hover, press, scroll, ou null), export fps (padrão 30), scene steps (12 = on twos; null smoot...

(A parte truncada continua com a lista de ferramentas e informações adicionais, mas foi omitida para brevidade na tradução. O conteúdo completo deve ser traduzido analogousamente.)