Die Arbeitsweise
chart-animation erstellt bewegte Diagramme, deren Zahlen und Geometrie vom aktuellen Videoframe abhängen. Der Skill trennt die Skala zur Abbildung von Daten auf Pixel von der Interpolation, die Frames auf veränderliche Werte abbildet. Das ist wichtig, wenn der eigene Timer einer Diagrammbibliothek nicht mit einem Offline-Renderer übereinstimmt.
Der dokumentierte Ablauf nutzt Remotion für die gerenderte Ausgabe und hält Datensätze in den Eingabe-Props. Er umfasst wachsende Balken, Zähler, das Zeichnen von Linien und Rangfolgen. Exakte Beschriftungen, Einheiten und Endwerte werden in gerenderten Standbildern geprüft, bevor ein Video codiert oder das Design auf mehrere Datensätze übertragen wird.
Erwartete Ergebnisse
- Eine framegesteuerte Remotion-Diagrammkomposition.
- Eine MP4-Datei sowie wiederverwendbare Datensatz- und Theme-Eingaben.
- Repräsentative Standbilder zur Prüfung von Beschriftungen, Rängen und Werten.
Vom Briefing zur Prüfung
- 01Die Datenzuordnung prüfen
Bestimmen Sie Zeitfeld, Reihen, Einheiten und Wertebereich. Registrieren Sie die Remotion-Komposition mit Eingabeschema und Standard-Props, während Datensatz und Theme getrennt bleiben. Bestimmt die Zeilenanzahl die Videolänge, leiten Sie die Dauer über calculateMetadata ab, damit ein anderer Datensatz nicht die Länge des vorherigen Videos übernimmt.
- 02Änderungen über Frames steuern
Berechnen Sie Werte und Positionen anhand der Frame-Uhr. Deaktivieren Sie konkurrierende Animationsschleifen der Diagrammbibliothek und formatieren Sie Anzeigewerte erst nach dem Runden.
- 03Vor dem Codieren prüfen
Rendern Sie Anfangs-, Zwischen- und Endstandbilder mit den tatsächlichen Auslieferungs-Props. Prüfen Sie exakte Zahlen, Rangwechsel, Beschriftungen und Skala, bevor Sie die vollständige MP4 rendern.