タイムライン
画像:現在のFigmaから
https://scrapbox.io/files/6411ad3cc293aa001bf616f3.png
タイムラインを構成する要素は次のとおりである。
タイムスタンプ(00:00.00)
レイヤー
エンティティ
描画
SVGで実装する方法が考えられる。
全体を1つのSVG要素の中に納め、フレーム数をX座標に変換する計算をすればよい。
エンティティと再生ヘッド、タイムスタンプをフラットに、動的に並べる。
計算
以下、1フレームあたりのピクセル数を $ x px 、表示倍率を $ yとして表す。
表示倍率 100% のときに表示の都合が良くなるような $ x を設定すればよい。
エンティティ
高さ
固定値のピクセル数 $ hを与える。
幅
$ (end - start) xyの形で表せる。
X位置
幅と同様。
$ xy \cdot start
Y位置
レイヤー番号 $ lに対して、 $ lh
エンティティの点線
左側
エンティティとX位置を同じく $ xy \cdot start
全体のレイヤー数 $ nに対して長さ $ nh
右側
X位置は $ xy \cdot end
全体のレイヤー数 $ nに対して長さ $ nh
再生ヘッド
フレーム数を $ fとして、X位置は $ xy\cdot f
全体のレイヤー数 $ nに対して長さ $ nh
タイムスタンプ
これが難関。
なぜなら、動画によって fps は異なるし、表示倍率によって表示すべき間隔も変わるから
ただ、配置自体は簡単じゃないかな