Pixerate/Pixerate-Animation-Editor

Pixerate-Animationseditor

Eine Szene besteht aus Kunstwerk (ein SVG, das in Vektorpfade und Gruppen mit jeweils einer ID geparst wurde) plus einer geordneten Liste von Shots. Ein Shot bewegt optional die Kamera, spielt seinen run von Befehlen ab und hält dann (Standard 600 ms). Befehle werden nacheinander abgespielt, es sei denn, sie verwenden "with": "previous"; jeder hat eine Standardlänge, die aus dem Inhalt abgeleitet wird (Enter 600 ms, Exit 450, Move 700, Draw folgt der Pfadlänge). Lassen Sie daher duration weg, es sei denn, Sie möchten das Tempo ändern. Jeder Frame ist eine reine Funktion der Zeit.

Ids: Element-IDs stammen von get_animation (elements) oder find_animation_elements; Shot-IDs sind frei wählbar ("intro"); Befehle werden durch Shot-ID und ihren Index im Run adressiert. Zeiten sind in Millisekunden, Positionen in Dokumenteinheiten des Kunstwerks. Alles, was später eintritt, ist bis zum enter verborgen; alles, was nie eintritt, ist von Anfang an sichtbar.

Für Fehler, namensräumliche Toolnamen und die generischen Befehlstools siehe pixerate-agent-tools. Das vollständige Befehlsvokabular (jeder Typ, jede Option und Standardwert) befindet sich in references/commands.md.

Workflow-Fähigkeiten

Für diese Aufgaben laden Sie auch die Workflow-Fähigkeit: Sie enthält die Methode, die Prüfungen zwischen den Schritten und die Fallstricke und verwendet die folgenden Tools.

• pixerate-animation-motion-graphics: Shots, gestaffelte Eingänge, Easing, Haltepunkte, Anpassen einer Länge.
• pixerate-animation-logo-reveal: Eine kurze Enthüllung aus den Teilen des Logos, im Takt, endend mit einem Halt.

Arbeitsmethode

1. Lesen. get_animation für Elemente, Shots mit Timing, Clips, Treibern und Problemen. Wenn es kein Kunstwerk gibt, zuerst set_animation_artwork_svg (geben Sie jedem Element, das Sie animieren werden, eine ID) oder beginnen Sie mit import_flair_effect / import_pptx_animation. Für umrissenen Text zeigt get_text_layout die Buchstaben-, Wort- und Zeileneinheiten.
2. Planen Sie Shots, eine Idee pro Shot. Notieren Sie, was der Betrachter in jedem Shot und in welcher Reihenfolge bemerken soll, und ordnen Sie dann jeden Takt einem Befehl zu. Versteckte Endzustände (Morph-/Match-Ziele, Pfadfolgen) müssen im Kunstwerk vorhanden sein, bevor Sie darauf verweisen.
3. In Batches schreiben. insert_shots für ganze Shots; edit_animation für mehrere zusammenhängende Bearbeitungen als einen Undo-Schritt (dry_run: true zuerst, wenn unsicher; "$0.indexes[0]" und "$last.shot" verweisen auf frühere Operationen). Verfeinern mit add_commands, update_command, move_command, delete_commands. Verwenden Sie write_animation nur, um jeden Shot zu ersetzen. Für einen Befehlstyp, den Sie noch nicht geschrieben haben, gibt describe_animation_command zuerst die genauen Felder zurück. Für Bewegungen, die sich eher aufgeführt als getastet anfühlen sollen (ein handgezeichneter Schwung, ein ruckartiger Zug, eine Farbe, die während der Bewegung ausgewählt wird), zeichnet record_animation_take mit zeitgestempelten Samples diese als einen Shot auf, so wie eine Person live auf der Bühne aufnimmt.
4. Anpassen und Cuen. fit_animation, um eine Länge zu treffen (Shots behalten, deren Tempo wichtig ist). Für Musik oder Voiceover set_animation_settings mit beat oder narration, lesen Sie Cues mit get_timing_grid und geben Sie Shots "at": { "beat": n } oder { "word": i }.
5. Prüfen. check_animation; beheben Sie jeden Fehler und jede Warnung (Codes wie too-fast, overlap, out-of-frame, enter-visible, cue-missed). Verwenden Sie get_motion_path für Abstände und Bögen als Zahlen.
6. Ansehen. render_animation_frame mit shot + at: "end" oder times für einen Kontaktbogen, plus onion_skin / motion_paths, um Bewegungen in einem Bild zu sehen. Rendern Sie nach einem Batch, nicht nach jeder Bearbeitung. seek_animation zeigt der Person einen Moment.
7. Exportieren auf Anfrage: export_flair_motion, export_flair_effect (nach set_animation_controls) oder export_lottie; lesen Sie die zurückgegebenen Hinweise darauf, was gesampelt oder verworfen wurde.

Best Practices

• Eine Idee pro Shot, eine fokussierte Bewegung nach der anderen. Inszenieren Sie die Aktion so, dass das Auge weiß, wohin es schauen soll; sekundäre Elemente bewegen sich weniger, später oder gar nicht. Verwenden Sie die Kamera (frame eines Knotens), um die Aufmerksamkeit zu lenken, anstatt alles zu bewegen.
• Jede Änderung easen. Ankünfte ease out (decelerieren in die Position; der Standard für enter), Ausgänge ease in (exit mit ease: "ease-in"), Bewegungen ease in-out (der Standard). Verwenden Sie linear nur für mechanische Bewegungen (konstante Drehung, Fortschrittsbalken) oder Schleifen.
• Timing nach Größe und Distanz. Kleine UI-Änderungen 150–300 ms, Elementeingänge 300–600 ms, große Bewegungen und Kamerabewegungen 600–1200 ms. Nichts unter 120 ms (too-fast). Große Dinge bewegen sich langsamer als kleine.
• Antizipation und Durchzug. ease-in-back für einen Anlauf vor einem schnellen Exit; pop, rise, ease-out-back oder ein Feder-Preset (spring-gentle, spring-quick) für Überschwung und Einpendeln bei der Ankunft. Verwenden Sie spring-bouncy sparsam; es wirkt verspielt.
• Überlappende Aktion. Staffeln Sie verwandte Elemente um 40–120 ms (stagger oder split mit cascade für Text), anstatt sie im Gleichschritt zu bewegen; starten Sie sekundäre Bewegungen mit "with": "previous" plus einer kleinen delay, sodass sie dem Hauptelement hinterherhinken.
• Bögen. Natürliche Bewegungskurven: Verwenden Sie move mit via-Wegpunkten (ein glatter Pfad) anstelle von verketteten Bewegungen, die an jedem Punkt anhalten, oder follow Sie einen Pfadknoten.
• Aufgezeichnete Takes. Nehmen Sie eine Performance mit 30–60 Samples pro Sekunde auf; der Recorder behält nur die Punkte, die relevant sind (erhöhen Sie tolerance für weniger, sauberere Befehle). Beginnen Sie jedes sich bewegende Element mit einem Sample in seiner aktuellen Pose (letzter Punkt von get_motion_path oder Mittelpunkt seiner Bounding Box in Ruhe), sonst springt es dort hin beim ersten Sample. Ein Take ist ein neuer Shot nach den anderen (oder bei at); er kann nicht über einen vorhandenen Shot gelegt werden. Verfeinern Sie ihn wie jeden Shot: Es sind gewöhnliche move (mit via und times), scale, rotate, fade und style Befehle.
• Halten Sie lange genug zum Lesen. Lassen Sie jedes Ergebnis auf dem Bildschirm (Shot hold, Standard 600 ms); ungefähr 250 ms pro Wort für Text, der gelesen werden muss, länger für den letzten Frame oder das Logo.
• Übertreibung mit Zurückhaltung. Betonung (pulse, shake, teeter, color-pulse) ist für eine Sache, die Aufmerksamkeit braucht, einmal; sie kehrt von selbst zur Ruhe zurück.
• Bewegungsunschärfe nur für wirklich schnelle Bewegungen (motionBlur: { shutter: 180 }); sie betrifft die Bühne und gerenderte Frames, nicht Flair- oder Lottie-Exporte.
• Barrierefreiheit. Vermeiden Sie Blinken: niemals mehr als drei Blitze pro Sekunde (WCAG 2.3.1), halten Sie daher color-pulse und Einblendungen auf großen Flächen langsam und selten. Vermeiden Sie großflächige Parallaxe, Zooms und Drehungen für wesentliche UI-Bewegungen; liefern Sie eine Alternative mit reduzierter Bewegung (der Host sollte unter prefers-reduced-motion eine Einblendung oder den Endzustand einwechseln; dieser Editor generiert keine). Schleifen, die länger als 5 s laufen, benötigen eine Pausenmöglichkeit (WCAG 2.2.2).
• Interaktive Stücke. Für einen Button oder Toggle setzen Sie trigger (click, hover, press, scroll); für einen Klick-Toggle lassen Sie den letzten Shot den Ausgangszustand wiederherstellen.

Tool-Referenz

Lesen

Tool	Verwendung
get_animation	Fangen Sie hier an. Gibt Name, Kunstwerkgröße, Länge (ms), Schleife, Elemente (Id, Typ, Name, Elter, Begrenzungsrahmen, durchgehende Farben, Live-Effekte mit numerischen Parametern), jeden Shot mit Index, Start, Ende und flairPrimitive jedes Befehls, Clips, Treiber, Steuerelemente und eine Zusammenfassung der Probleme zurück, plus readOnly, wenn Bearbeitungen abgelehnt werden. includeElements: false (Standard true) überspringt die Elementliste bei großen Kunstwerken.
get_shot	Einen Shot wie gespeichert lesen (shot-ID) mit seinem Start/Ende und dem Start/Ende jedes Befehls in ms; günstiger als get_animation während der Verfeinerung eines Shots.
describe_animation_command	Vor dem Schreiben eines noch nicht verwendeten Befehlstyps oder wenn ein Schreibvorgang ein Feld ablehnt: Gibt das vollständige JSON-Schema jedes types (z. B. ["enter", "move"]) zurück, mit Typ, Bereich, Standardwert, Bedeutung jedes Feldes und welche erforderlich sind. Die Schreibwerkzeuge listen jedes Befehlsfeld einmal kurz auf, mit den Typen, die es akzeptieren.
find_animation_elements	Elemente finden, deren ID oder Name query enthält (Groß-/Kleinschreibung nicht beachtend; limit Standard 20, max. 200) bei großen Kunstwerken. Gibt ID, Typ, Name, Elter, Begrenzungsrahmen, Farben, Effekte zurück.
get_text_layout	Vor dem Animieren von umrissenem Text mit split: Gibt die Zeilen, Wörter und Buchstaben-IDs der group in Lesereihenfolge zurück. Fehler, wenn das Element keine Gruppe von Pfaden ist (Text in Umrisse konvertieren, einen Pfad pro Buchstaben, und gruppieren).
get_motion_path	Überprüft Abstände, Bögen und Landepunkte als Zahlen: Stichproben des Mittelpunkts eines node (Dokumenteinheiten) von from bis to ms alle step ms (Standard 33, max. 400 Samples), mit Angabe, wo jede Bewegungsänderung beginnt und endet.
get_timing_grid	Listet Beats (Nummer, ms, Takt, Beat im Takt) und Erzählwörter (Index, Text, Start, Ende) zwischen from und to auf (limit Standard 200) und welcher Shot bei jedem spielt, um at-Cues auszuwählen. Leer, mit einem Hinweis, wenn kein Beat-Raster oder Erzählung eingestellt ist.
check_animation	Nach jedem Schreibbatch. Listet Probleme mit einem Code, Schweregrad, Shot, Befehlsindex, Knoten-IDs, gemessenen vs. benötigten Werten und wie zu beheben ist. Beheben Sie Fehler und Warnungen; Hinweise sind beratend.
render_animation_frame	Ergebnis betrachten: time (ms) oder shot + at (start, middle, end; Standard end). times (2–16 Momente) erstellt einen beschrifteten Kontaktbogen (columns 1–8). onion_skin fügt Geister-Frames hinzu (before Standard 2, after 0, spacing ms oder "commands"); motion_paths (true oder IDs) zeichnet Bewegungspfade. Standard SVG; format: "png" nur, wenn der Host rastern kann.
export_flair_motion	Holt die Szene als Flair SvgMotion { svg, animate } mit Halte-, Sample-Schritt-Anzahl und Hinweisen. fps (Standard Szenen-fps, sonst 30), curves und behaviors (Standard true), flair Zielversion (Standard 0.39; ältere Versionen sampeln Federn, Schritte, Verhaltensweisen und Kurven).
export_flair_effect	Holt einen Flair-Katalog-Vektoreffekt (id Kebab-Case, name, description, category Standard icon, tags, plus curves / behaviors / flair wie oben). Rufen Sie zuerst set_animation_controls auf, damit Farben zu {{name: color}}-Steuerelementen werden.
export_lottie	Holt Lottie (Bodymovin v5) JSON für lottie-web und mobile Player, mit einem Marker pro Shot, fps (Standard Szenen-fps, sonst 30), der gesampelten Keyframe-Anzahl und Hinweisen, was nicht übernommen wurde (Verläufe, Striche, Enthüllungs-Clips, Morphs, die Punktanzahlen ändern).

Schreiben

Tool	Verwendung
seek_animation	Zeigt der Person einen Moment: time (ms) oder den Beginn eines shot, mit play true oder false. Ändert die Szene nicht.
set_animation_artwork_svg	Ersetzt das Kunstwerk durch ein eigenständiges svg (mit einer viewBox) als einen Undo-Schritt. Geben Sie jedem zu animierenden Element eine ID; wird abgelehnt, wenn vorhandene Shots IDs nennen, die das neue Kunstwerk nicht hat. Gibt die Elemente zurück.
import_pptx_animation	Ersetzt die gesamte Szene durch die Formen und den Animationsbereich einer PowerPoint-Folie (data base64 .pptx, slide Standard 1): ein Shot pro Klick, Verzögerungen, Wiederholungen und Beschleunigung bleiben erhalten; Text, Bilder und Diagramme werden mit Hinweisen ausgelassen. Führen Sie zuerst dry_run: true aus.
set_animation_drivers	Ersetzt alle Treiber (leere Liste löscht): x, y, rotation, scaleX, scaleY oder opacity eines Ziels folgen einer Eigenschaft eines Quellknotens als Änderung · factor + offset, optional clamp-ed. Für Parallaxe, Räder, die sich beim Rollen drehen, Schatten, die verblassen, wenn etwas aufsteigt.
set_animation_clip	Definiert, ersetzt oder löscht (mit clip: null) einen benannten wiederverwendbaren Clip, dessen run auf "$" zielt; spielen Sie ihn mit einem play Befehl auf beliebigen Knoten ab. Bevorzugen Sie einen Clip gegenüber wiederholten identischen Befehlen.
copy_animation	Gibt den Knoten in to jeden Befehl, der from animiert (alle Shots oder shots), jede Kopie beginnend mit dem Original, optional stagger-ed (ms). Schnell für einmalige Duplikation; verwenden Sie einen Clip für Bewegung, die Sie wiederverwenden werden.
record_animation_take	Zeichnet ausgeführte Bewegung als neuen Shot auf (ein Undo-Schritt): samples von { node, t (ms im Take), x, y (Mitte), scaleX, scaleY, rotation, opacity, fill, stroke, strokeWidth } werden zu einem move durch Wegpunkte zu den aufgezeichneten times und einigen geeaseten scale / rotate / fade / style Befehlen, die jeweils beginnen, wenn sie stattfanden. Optional length, id, label, at, tolerance; dry_run: true gibt zuerst den Run zurück. Gibt die Shot-ID, ihren Start und den Index, Typ, Start und Ende jedes Befehls zurück; danach check_animation und render_animation_frame.
fit_animation	Lässt die Szene seconds dauern, indem die Shot-speed gesetzt wird, wobei Proportionen erhalten bleiben; Shots in keep werden wie geschrieben abgespielt. dry_run: true meldet zuerst die neue Länge und Geschwindigkeiten.
import_flair_effect	Ersetzt die gesamte Szene durch einen Flair-Vektor-effect oder SvgMotion-motion (geben Sie genau eines an; optional name). Platzhalter werden zu Farbsteuerelementen; jeder Flair-Schritt wird zu einem Shot. Verwenden Sie zuerst dry_run: true.
insert_shots	Fügt einen oder mehrere vollständige Shots hinzu (id, run, optional label, camera, hold, speed, at) an Position at (Standard am Ende). Gibt Timing und Probleme jedes Shots zurück.
update_shot	Ändert label, camera, run, hold, speed, at oder id eines Shots über set und löscht label, camera, hold, speed oder at über remove.
delete_shots	Entfernt Shots nach ID (ein Undo-Schritt).
move_shot	Ordnet einen Shot neu an Index to (0 = erster).
add_commands	Fügt einem Shot-Run Befehle an Index at hinzu (Standard am Ende). Gibt die erhaltenen Indizes und ihr Timing zurück; verwenden Sie diese Indizes für spätere Aktualisierungen.
update_command	Ändert einen Befehl (nach shot und command-Index): Felder in set ersetzen, Namen in remove löschen (z. B. "delay"). Gibt den Befehl und sein Timing zurück.
delete_commands	Entfernt Befehle aus einem Shot nach Index; spätere Befehle rücken nach oben, also lesen Sie die Indizes danach erneut.
move_command	Verschiebt einen Befehl an Index to in seinem Run; ein Befehl mit "with": "previous" beginnt dann mit seinem neuen Nachbarn.
set_animation_settings	Setzt name, description, loop (none, loop, ping-pong), trigger (click, hover, press, scroll, oder null), Export-fps (Standard 30), Szenen-steps (12 = on twos; null smoot