ホワイトボード・アニメーション
ポモドーロ・テクニック
25分の作業と5分の休憩をくり返し、4回ごとに長めの休憩をとる時間管理法を、ホワイトボードに手描きしながら解説する約60秒の動画。トマト型タイマー、時計の扇形、作業と休憩の帯グラフを、ペンを持った手が線の先端を追いながら描いていき、最後に板書の全体を引きで見せる。
使った技法
- stroke-dashoffset による SVG の手描き線
- getPointAtLength で線の先端を追うペンの手
- 手書きフォントを左からマスクで書き出す
- 法線方向の揺らぎで手描きらしい線にする
- イレーザーのジグザグのマスクで消し、薄い消し跡を残す
- 赤・青マーカーへの持ち替えで強調
- 区画ごとのカメラパンと最後の全景
- 描いている間だけ鳴るマーカーの効果音
- 台詞の文字時刻に合わせた描画と字幕