⏱️
Remotionコード分析 — Sequenceとタイムラインの時間管理の実装
SequenceContextでローカルタイムを実装する内部メカニズムとuseCurrentFrame()の動作原理
GitHub: remotion-dev/remotion/packages/core
Remotionの最も巧みな設計の1つはローカルタイムの概念です。<Sequence from={60}>内のコンポーネントはグローバルフレーム60を自分のフレーム0として認識します。
useCurrentFrame()はSequenceContext.fromをグローバルフレームから引くだけ。SequenceコンポーネントはabsoluteFromで親オフセットを累積し、isInRangeで自動マウント/アンマウント、SequenceContext.Providerでローカルタイムを伝播します。
SeriesはSequenceのfrom値をcurrentOffsetの累積で自動計算する便利ラッパーに過ぎません。
動作フロー
1
TimelineContextがグローバルframeを提供（レンダラーがwindow.remotion_setFrameで注入した値）
2
<Sequence from={60}>がSequenceContext.Providerでfrom=60を伝播
3
useCurrentFrame()がglobalFrame - sequenceContext.from = ローカルフレームを返却
4
ネストされたSequence: 親のfrom + 自身のfrom = absoluteFrom（累積）
5
isInRangeチェック: frameが範囲外ならnull返却 → 自動的にシーン登場/退場
メリット
- ✓ React Contextだけでタイムラインを実装: 追加ライブラリなしの純粋Reactパターン
- ✓ isInRange nullパターン: 範囲外のコンポーネントをレンダリングしないことでパフォーマンス最適化
デメリット
- ✗ Context乱用注意: ネストが深くなると再レンダリング範囲が広がる可能性
ユースケース
Sequenceベースのカスタムトランジション実装時のタイム計算の理解
ネストされたSequenceでフレーム計算が合わない時のデバッグ