Pixerate/editor-de-animacion-pixerate

Editor de animación Pixerate

Una escena es una ilustración (un SVG analizado en trazados vectoriales y grupos, cada uno con un id) más una lista ordenada de tomas. Una toma opcionalmente mueve la cámara, reproduce su run de comandos, luego mantiene (por defecto 600 ms). Los comandos se reproducen uno tras otro a menos que "with": "previous"; cada uno tiene una duración predeterminada tomada del contenido (enter 600 ms, exit 450, move 700, draw sigue la longitud del trazado), así que omita duration a menos que quiera cambiar el ritmo. Cada fotograma es una función pura del tiempo.

Ids: los ids de los elementos provienen de get_animation (elements) o find_animation_elements; los ids de las tomas son los que usted elija ("intro"); los comandos se abordan por el id de la toma más su índice en la ejecución. Los tiempos están en milisegundos, las posiciones en unidades de documento de la ilustración. Cualquier cosa que entre más tarde está oculta hasta su enter; cualquier cosa que nunca entra es visible desde el principio.

Para errores, nombres de herramientas con espacio de nombres y las herramientas de comandos genéricos, consulte pixerate-agent-tools. El vocabulario completo de comandos (cada tipo, opción y valor predeterminado) está en references/commands.md.

Habilidades de flujo de trabajo

Para estos trabajos, cargue también la habilidad de flujo de trabajo: contiene el método, las comprobaciones entre pasos y los obstáculos, y utiliza las herramientas a continuación.

• pixerate-animation-motion-graphics: tomas, entradas escalonadas, easing, pausas, ajuste de una duración.
• pixerate-animation-logo-reveal: una revelación corta a partir de las partes del logotipo, al ritmo, que termina en pausa.

Método de trabajo

1. Leer. get_animation para elementos, tomas con temporización, clips, controladores y problemas. Si no hay ilustración, primero use set_animation_artwork_svg (asigne un id a cada elemento que animará), o comience desde import_flair_effect / import_pptx_animation. Para texto contorneado, get_text_layout muestra las unidades de letra, palabra y línea.
2. Planificar tomas, una idea cada una. Anote lo que el espectador debería notar en cada toma y en qué orden, luego asigne cada tiempo fuerte a un comando. Los estados finales ocultos (objetivos de morph/coincidencia, rutas a seguir) deben existir en la ilustración antes de hacer referencia a ellos.
3. Escribir en lotes. insert_shots para tomas completas; edit_animation para varias ediciones relacionadas como un solo paso de deshacer (dry_run: true primero si no está seguro; "$0.indexes[0]" y "$last.shot" se refieren a operaciones anteriores). Refine con add_commands, update_command, move_command, delete_commands. Use write_animation solo para reemplazar todas las tomas. Para un tipo de comando que no haya escrito antes, describe_animation_command devuelve primero sus campos exactos. Para movimientos que deberían sentirse interpretados en lugar de animados con fotogramas clave (un barrido dibujado a mano, un arrastre entrecortado, un color elegido en medio del movimiento), record_animation_take con muestras temporizadas lo registra como una toma, como una persona graba en vivo en el escenario.
4. Ajustar y sincronizar. fit_animation para alcanzar una duración (mantenga las tomas cuyo ritmo importa). Para música o narración, use set_animation_settings con beat o narration, lea las señales con get_timing_grid, y dé a las tomas "at": { "beat": n } o { "word": i }.
5. Verificar. check_animation; corrija cada error y advertencia (códigos como too-fast, overlap, out-of-frame, enter-visible, cue-missed). Use get_motion_path para distancias y arcos como números.
6. Mirar. render_animation_frame con shot + at: "end", o times para una hoja de contactos, además de onion_skin / motion_paths para ver el movimiento en una sola imagen. Renderice después de un lote, no después de cada edición. seek_animation muestra a la persona un momento.
7. Exportar cuando se le solicite: export_flair_motion, export_flair_effect (después de set_animation_controls) o export_lottie; lea las notas devueltas sobre lo que se muestreó o descartó.

Mejores prácticas

• Una idea por toma, un movimiento focal a la vez. Escenifique la acción para que el ojo sepa dónde mirar; los elementos secundarios se mueven menos, más tarde o no se mueven. Use la cámara (frame un nodo) para dirigir la atención en lugar de mover todo.
• Suavizar cada cambio. Las llegadas se suavizan al salir (deceleran hasta su lugar; el predeterminado para enter), las salidas se suavizan al entrar (exit con ease: "ease-in"), los movimientos se suavizan al entrar y salir (el predeterminado). Use linear solo para movimiento mecánico (un giro constante, una barra de progreso) o bucles.
• Temporización por tamaño y distancia. Cambios pequeños de UI 150-300 ms, entradas de elementos 300-600 ms, movimientos grandes y movimientos de cámara 600-1200 ms. Nada por debajo de 120 ms (too-fast). Las cosas grandes se mueven más lento que las pequeñas.
• Anticipación y seguimiento. ease-in-back para un impulso antes de una salida rápida; pop, rise, ease-out-back o un preset de resorte (spring-gentle, spring-quick) para sobrepaso y asentamiento en la llegada. Use spring-bouncy con moderación; se percibe como juguetón.
• Acción superpuesta. Escalone elementos relacionados 40-120 ms (stagger, o split con cascade para texto) en lugar de moverlos sincronizados; inicie el movimiento secundario con "with": "previous" más un pequeño delay para que siga al líder.
• Arcos. Curvas de movimiento natural: use move con puntos de ruta via (un trazado suave) en lugar de movimientos encadenados que se detienen en cada punto, o follow un nodo de ruta.
• Tomas grabadas. Muestree una interpretación a 30-60 por segundo; el grabador solo conserva los puntos que importan (aumente tolerance para menos comandos, más limpios). Comience cada elemento en movimiento con una muestra en su pose actual (el último punto de get_motion_path, o el centro de sus límites en reposo) o saltará allí en su primera muestra. Una toma es una nueva toma después de las demás (o en at); no se puede superponer sobre una toma existente. Refínela como cualquier toma: consiste en comandos ordinarios move (con via y times), scale, rotate, fade y style.
• Mantener el tiempo suficiente para leer. Deje cada resultado en pantalla (pausa de toma hold, 600 ms por defecto); aproximadamente 250 ms por palabra para texto que debe leerse, más para el fotograma final o el logotipo.
• Exageración con moderación. El énfasis (pulse, shake, teeter, color-pulse) es para una cosa que necesita atención, una vez; vuelve al reposo por sí mismo.
• Desenfoque de movimiento solo para movimiento genuinamente rápido (motionBlur: { shutter: 180 }); afecta al escenario y los fotogramas renderizados, no a las exportaciones de Flair o Lottie.
• Accesibilidad. Evite destellos: nunca más de tres destellos por segundo (WCAG 2.3.1), por lo que mantenga color-pulse y desvanecimientos en áreas grandes lentos y pocos. Evite el paralaje a gran escala, los zooms y los giros para el movimiento esencial de la interfaz de usuario; envíe una alternativa de movimiento reducido (el anfitrión debe intercambiar un desvanecimiento o el estado final bajo prefers-reduced-motion; este editor no genera uno). Los bucles que se ejecutan más de 5 s necesitan una forma de pausar (WCAG 2.2.2).
• Piezas interactivas. Para un botón o conmutador, establezca trigger (click, hover, press, scroll); para un conmutador de clic, haga que la última toma restaure el estado inicial.

Referencia de herramientas

Lectura

Herramienta	Úsela para
get_animation	Comience aquí. Devuelve nombre, tamaño de ilustración, duración (ms), bucle, elementos (id, tipo, nombre, padre, límites, pinturas sólidas, efectos en vivo con parámetros numéricos), cada toma con el índice, inicio, fin y flairPrimitive de cada comando, clips, controladores, controles y un resumen de problemas, además de readOnly cuando se rechazan las ediciones. includeElements: false (verdadero por defecto) omite la lista de elementos en ilustraciones grandes.
get_shot	Lea una toma almacenada (shot id) con su inicio/fin y el inicio/fin de cada comando en ms; más barato que get_animation mientras refina una toma.
describe_animation_command	Antes de escribir un tipo de comando que no haya usado aún, o cuando una escritura rechaza un campo: devuelve el esquema JSON completo de cada uno de types (p. ej. ["enter", "move"]), con el tipo, rango, valor predeterminado, significado de cada campo y cuáles son obligatorios. Las herramientas de escritura enumeran cada campo de comando una vez en resumen, con prefijos de los tipos que lo aceptan.
find_animation_elements	Encuentre elementos cuyo id o nombre contenga query (sin distinción de mayúsculas/minúsculas; limit predeterminado 20, máximo 200) cuando la ilustración es grande. Devuelve id, tipo, nombre, padre, límites, pinturas, efectos.
get_text_layout	Antes de animar texto contorneado con split: devuelve las líneas, palabras e ids de letras del group en orden de lectura. Error si el elemento no es un grupo de trazados (convierta texto a contornos, una letra por trazado, y agrúpelo).
get_motion_path	Verifique la distancia, los arcos y los puntos de aterrizaje como números: muestrea el centro de un node (unidades de documento) desde from hasta to ms cada step ms (predeterminado 33, máximo 400 muestras), con dónde comienza y termina cada cambio en movimiento.
get_timing_grid	Enumere los tiempos fuertes (número, ms, compás, tiempo fuerte en compás) y las palabras de narración (índice, texto, inicio, fin) entre from y to (limit predeterminado 200), y qué toma se reproduce en cada uno, para elegir señales at. Vacío, con una sugerencia, cuando no se establece una cuadrícula de tiempos fuertes o narración.
check_animation	Después de cada lote de escrituras. Enumera problemas con un código, gravedad, toma, índice de comando, ids de nodos, valores medidos vs. necesarios y cómo solucionarlo. Corrija errores y advertencias; las notas son de asesoramiento.
render_animation_frame	Mire el resultado: time (ms) o shot + at (start, middle, end; predeterminado end). times (2-16 momentos) hace una hoja de contactos etiquetada (columns 1-8). onion_skin agrega fotogramas fantasma (before predeterminado 2, after 0, spacing ms o "commands"); motion_paths (verdadero o ids) dibuja rutas de desplazamiento. SVG por defecto; format: "png" solo cuando el anfitrión puede rasterizar.
export_flair_motion	Obtenga la escena como un Flair SvgMotion { svg, animate } con pausa, recuento de pasos muestreados y notas. fps (fps de escena predeterminados, si no 30), curves y behaviors (predeterminado verdadero), flair versión objetivo (predeterminado 0.39; las versiones anteriores muestrean resortes, pasos, comportamientos y curvas).
export_flair_effect	Obtenga un efecto vectorial del catálogo de Flair (id en kebab-case, name, description, category icono predeterminado, tags, más curves/behaviors/flair como arriba). Llame a set_animation_controls primero para que los colores se conviertan en controles {{name: color}}.
export_lottie	Obtenga JSON de Lottie (Bodymovin v5) para reproductores lottie-web y móviles, con un marcador por toma, fps (fps de escena predeterminados, si no 30), el recuento de fotogramas clave muestreados y notas sobre lo que no se transfirió (gradientes, guiones, clips de revelado, morphs que cambian el número de puntos).

Escritura

Herramienta	Úsela para
seek_animation	Mostrar a la persona un momento: time (ms) o el inicio de un shot, con play verdadero o falso. No cambia la escena.
set_animation_artwork_svg	Reemplazar la ilustración con un svg independiente (con un viewBox) como un solo paso de deshacer. Ponga un id en cada elemento que animará; rechazado si las tomas existentes nombran ids que la nueva ilustración no tiene. Devuelve los elementos.
import_pptx_animation	Reemplazar toda la escena con las formas y el panel de animación de una diapositiva de PowerPoint (data .pptx en base64, slide predeterminado 1): una toma por clic, se mantienen los retrasos, repeticiones y aceleración; el texto, las imágenes y los gráficos se omiten con notas. Ejecute con dry_run: true primero.
set_animation_drivers	Reemplazar todos los controladores (lista vacía borra): el x, y, rotation, scaleX, scaleY u opacity de un objetivo sigue la propiedad de un nodo fuente como cambio · factor + offset, opcionalmente limitado (clamp). Para paralaje, ruedas que giran mientras ruedan, sombras que se desvanecen mientras algo se eleva.
set_animation_clip	Definir, reemplazar o (con clip: null) eliminar un clip reutilizable con nombre cuya run se dirige a "$"; reprodúzcalo con un comando play en cualquier nodo. Prefiera un clip sobre comandos idénticos repetidos.
copy_animation	Dar a los nodos en to cada comando que anima from (todas las tomas o shots), cada copia comenzando con su original, opcionalmente escalonada (stagger en ms). Rápido para duplicación única; use un clip para el movimiento que reutilizará.
record_animation_take	Grabar movimiento interpretado como una nueva toma (un paso de deshacer): samples de { node, t (ms dentro de la toma), x, y (centro), scaleX, scaleY, rotation, opacity, fill, stroke, strokeWidth } se convierten en un move a través de puntos de ruta en los times grabados y algunos comandos suavizados scale/rotate/fade/style, cada uno comenzando cuando ocurrió. length, id, label, at, tolerance opcionales; dry_run: true devuelve primero la ejecución. Devuelve el id de la toma, su inicio y el índice, tipo, inicio y fin de cada comando; check_animation y render_animation_frame después.
fit_animation	Hacer que la escena dure seconds estableciendo la speed de la toma, manteniendo las proporciones; las tomas en keep se reproducen como están escritas. dry_run: true informa primero la nueva duración y velocidades.
import_flair_effect	Reemplazar toda la escena con un effect vectorial de Flair o un motion de SvgMotion (dé exactamente uno; name opcional). Los marcadores de posición se convierten en controles de color; cada paso de Flair se convierte en una toma. Use dry_run: true primero.
insert_shots	Agregar una o más tomas completas (id, run, label opcional, camera, hold, speed, at) en la posición at (predeterminado el final). Devuelve la temporización y los problemas de cada toma.
update_shot	Cambiar label, camera, run, hold, speed, at o id de una toma mediante set, y borrar label, camera, hold, speed o at mediante remove.
delete_shots	Eliminar tomas por id (un paso de deshacer).
move_shot	Reordenar una toma al índice to (0 = primera).
add_commands	Agregar comandos a la ejecución de una toma en el índice at (predeterminado el final). Devuelve los índices que obtuvieron y su temporización; use esos índices para actualizaciones posteriores.
update_command	Cambiar un comando (por índice de shot y command): los campos en set reemplazan, los nombres en remove borran (p. ej. "delay"). Devuelve el comando y su temporización.
delete_commands	Eliminar comandos de una toma por índice; los comandos posteriores suben, así que vuelva a leer los índices después.
move_command	Mover un comando al índice to en su ejecución; un comando "with": "previous" comienza entonces con su nuevo vecino.
set_animation_settings	Establecer name, description, loop (ninguno, loop, ping-pong), trigger (click, hover, press, scroll, o null), fps de exportación (fps predeterminado 30), steps de escena (12 = a dos; null suaviza;...
set_animation_controls	Definir controls de la escena: una lista de {name, type} (color, number, boolean) para exponer los parámetros de la escena como controles de interfaz de usuario. Los controles de color se pueden usar en los comandos style y paint como "{{name}}". Después de esto, export_flair_effect reemplaza los valores literales con referencias de control.
write_animation	Reemplazar todas las tomas con una lista nueva. Devuelve la lista completa de tomas con temporización. Peligroso (solo un paso de deshacer, pero borra todo el trabajo sin confirmar). Prefiera insert_shots y edit_animation.
edit_animation	Ejecutar varias escrituras como un solo paso de deshacer (hasta 10): steps de { tool (sin el prefijo pixerate_animation), params } ejecutados en orden, donde cada paso puede referirse al resultado del paso anterior ("$0.indexes[0]", "$last.shot"). dry_run: true simula los pasos y devuelve información de cada uno. Agrupe ediciones relacionadas: ajustar, agregar y actualizar comandos para una sola toma es un edit_animation; agregar tres tomas no relacionadas son tres llamadas separadas.