作業の進め方
chart-animationは、現在の動画フレームから数値と形状を計算する動くグラフを作ります。データをピクセルに対応付けるスケールと、フレームを変化する値に対応付ける補間を分けます。グラフライブラリ独自のタイマーがオフラインレンダラーと一致しない場合、この区別が重要です。
記載された手順ではRemotionを使って出力し、データセットは入力propsに保持します。伸びる棒、カウンター、線の描画、順位の推移を扱います。動画のエンコードや複数データセットへの展開の前に、レンダリングした静止画でラベル、単位、最終値を正確に確認します。
想定される成果物
- フレームで駆動するRemotionのグラフコンポジション。
- MP4と、再利用可能なデータセット・テーマの入力。
- ラベル、順位、値を確認するための代表的な静止画。
ブリーフからレビューまで
- 01データの対応付けを検証する
時刻フィールド、系列、単位、値の範囲を特定します。データとテーマを分離し、入力スキーマと既定propsを指定してRemotionのコンポジションを登録します。行数で動画の長さが決まる場合はcalculateMetadataで尺を求め、データを変えても前の動画の長さが残らないようにします。
- 02フレームから変化を駆動する
フレームの時計を使って値と位置を計算します。競合するグラフライブラリのアニメーションループを無効にし、丸めた後の値を表示用に整形します。
- 03エンコード前に確認する
実際の納品用propsで、冒頭、中間、最後の静止画をレンダリングします。MP4全体を作る前に、正確な数値、順位の変化、ラベル、スケールを確認します。