Die Arbeitsweise
motion-canvas ist eine Framework-Referenz zum Schreiben von Motion-Canvas-Szenen in TypeScript. Sie erklärt generatorgesteuerte Sequenzierung, reaktive Signals, Referenzen und Szenenhierarchie und zeigt die Kombination mit Formen, Text, Pfaden und Medien.
Die Quelle enthält praktische Zustands- und Timingmechanismen: Knoten speichern und wiederherstellen, auf benannte Ereignisse warten, Hintergrundthreads ausführen und benutzerdefinierte Übergänge beenden. Sie hilft, wenn der Agent die gewünschte Szene kennt und die richtigen Framework-Konzepte zu ihrer Umsetzung braucht.
Erwartete Ergebnisse
- Motion-Canvas-Szenencode mit dem vorhandenen Projektaufbau.
- Wiederverwendbare Signals, Komponenten und Timingsequenzen.
- Ein Projekt für den konfigurierten Vorschau- und Renderingworkflow.
Vom Briefing zur Prüfung
- 01Szenenobjekte definieren
Erstelle nötige Formen und Texte, weise Referenzen zu und ordne sie in einer klaren Knotenhierarchie an.
- 02Zustand mit Timing verbinden
Nutze Signals für veränderliche Werte und Generatorfunktionen für Abläufe. all() führt Aktionen gemeinsam aus, yield* wartet in einer Sequenz auf das Ende einer Animation. Benannte waitUntil()-Ereignisse können die Szene mit einem Einsatz in der Erzählspur synchronisieren.
- 03Übergänge und Ausgabe prüfen
Füge Knoten der eingehenden Szene vor slideTransition() hinzu, damit sie nicht erst danach auftauchen. Ein eigenes useTransition() gibt eine Endfunktion zurück, die nach der Übergangsanimation aufgerufen werden muss. Prüfe konfigurierte Vorschau oder Rendering und erhalte projektspezifische Ausgabeeinstellungen.