作業の進め方
whiteboard-animation は、手が図や文字を描くように見せます。SVG の線が順番に現れ、マーカーを持つ手の画像が現在の描画先端を追います。手の位置と表示するパスは同じ進行値を共有するため、正確な時点で一緒に確認できます。
ソースは短いブラウザー場面と、ナレーション付き動画の書き出しを区別します。単独の場面は HTML ファイル 1 つとシーク可能なタイムラインを使い、完成した映像では同じ仕組みをフレーム駆動のコンポジションへ移します。線の順序、ペンを離す動き、ナレーションのタイミングも設計の一部です。
想定される成果物
- 単独の HTML 描画シーン、または依頼された動画コンポジション。
- 順序付き SVG の線と、ペン先の位置を調整したマーカーを持つ手の素材。
- 描画中の手と完成したボードを示す静止フレームの記録。
ブリーフからレビューまで
- 01描ける原画を準備する
イラストを、自然な描画順の開いたパスに変換します。塗り領域には、色より先に表示できる輪郭を用意します。
- 02ペン先を線に結び付ける
手の素材のペン先オフセットを測り、線の表示と同じ進行値で位置を動かします。別々のパスの間では手を浮かせます。
- 03順序を組み、確認する
各描画を対応するナレーションに合わせ、線を描いている途中で停止します。ペン先の位置、最終的な完成、レイアウト、ボード各部分の遷移を確認します。