vidmoat/motion-graphics

Bewegte Grafiken

addHtmlElement dient für gestaltete Container und Layouts; Text- und Beschriftungsbefehle sind für einfache Wörter.

Arbeitsablauf

1. Eine fertige Komponente könnte bereits passen: addMotionComponent fügt eine bearbeitbare, timeline-gesteuerte Grafik in der Videorichtung hinzu, ohne Generierungskosten (ändere ihren Text mit setMotionComponent; suche searchCatalogue Art elements nach den Komponenten: reveal-title, speaker-card, progress-ring, feature-spotlight, stat-counter, keyword, checklist, chat-bubbles, search-bar, proof-card, icon-card, quote-card). Zu dem, was ein Sprecher sagt, platziert designInserts sie gegen das Transkript geprüft. Baue HTML nur, wenn nichts passt.
2. Lies zuerst den Vertrag: suche searchCatalogue Art commands nach der genauen ID addHtmlElement und lies den vollständigen Autorenvertrag, bevor du Markup schreibst.
3. Größe aus Inhalt und Platz: Lass den Text und den verfügbaren Bereich über Größe, Stil und Platzierung entscheiden. Eine untere Drittel-Grafik braucht nicht immer eine dunkle Leiste; eine Statistik braucht nicht immer eine Verlaufskarte.
4. Animiere auf dem Timeline-Takt unter Verwendung des unterstützten timeline-gesteuerten Animationsvertrags. CSS-Animationen auf Basis der Wanduhr sind keine Timeline-Wiedergabe und werden nicht exportiert.
5. Container versus Objekte: Eine Transformation auf einem HTML-Clip verschiebt seine gesamte Komposition, nicht seine Kinder. Um ein Objekt darin zu bewegen, lies das HTML dieses Clips und animiere die gewünschten Kind-Elemente auf der Timeline oder verwende separate reale Clips. Halte angehängte Details im selben sich bewegenden Container.
6. Benutzerdefinierte Komponenten: TSX-Bewegungskomponenten werden über die agentWorkspace-Aktion motion_compile (Workflow motion-authoring) kompiliert, wenn Skripting verfügbar ist.
7. Überprüfe die Objektpositionen zu mehreren Zeitpunkten auf gerenderten Frames. Ein Kamerazoom allein kann eine Objektaktion nicht erfüllen.

Fallstricke

• Inline-SVG benötigt xmlns, sonst wird es stillschweigend auf null Pixel gerendert.
• Ein HTML-Element, das einen soliden Vollbild-Hintergrund malt, verdeckt für seine gesamte Dauer alles darunter; mache das Wurzelelement transparent.
• Wenn der Benutzer sagt, dass eine Änderung fehlt, überprüfe das gespeicherte Ergebnis und ändere den tatsächlichen Mechanismus, anstatt dieselben Keyframes zu wiederholen.
• Gestaltete UI, Diagramme und prozedurale Grafiken können einen Arbeitsablauf ohne kostenpflichtige Bildgenerierung zeigen.

Verwandte Fähigkeiten: titel, textgeführtes-video. Spezialist: bewegungsdesigner.