remotion-new-markup

新しい Remotion マークアップ

コンポーネントやラッパーを選ぶ前に、編集可能なタイムライン構造をお読みください。まず、何をまとめて編集するかを決めてから、独立したトラックまたは連続するシーケンスを選びます。このガイドには、インタラクティブ要素、シーン、親要素、登録の完全な例が含まれています。

同期したキャプションやオーバーレイを含む映像を扱う場合は、編集可能な動画タイムラインもお読みください。グループを独自のタイムラインに切り出すには、接続されたコンポジションを使用します。

フレームの購読は必要な箇所だけにする

描画にフレームが必要な最小のコンポーネントでuseCurrentFrame()を呼び出します。サウンドトラックの音量、アニメーションタイトル、またはオーバーレイだけを変更する場合は、クリップやトラックを配置するコンポジションやシーンのコンポーネントでフレームを購読しないようにします。その項目をモジュールスコープで定義したコンポーネントに切り出し、親から渡すのではなく、その中でフレームを読み取ります。これにより、そのアニメーションのために、無関係なクリップやシーンが毎フレーム再レンダリングされるのを防げます。

編集可能なinterpolate()呼び出しは、アニメーションする項目の props にインラインで記述します。たとえば、SoundtrackコンポーネントでuseCurrentFrame()を呼び出し、volume={interpolate(frame, ...)}を指定したAudioを返すことができます。その間、コンポジションではシーンと並べて<Soundtrack />をレンダリングするだけです。出力がフレームによって実際に変化しない場合は、静的な値を優先します。

切り出す際は、既存のタイミング境界を維持します。フックをSequenceやタイミングを持つコンポーネントの内側に置くと、フレームの座標が変わります。トリム、オフセット、音量エンベロープ、アニメーションのキーフレームは同じ時間軸上に保つか、編集内容を維持できるよう意図的にキーフレームを調整します。このレンダリング境界には通常の React コンポーネントで十分です。タイムラインラッパーは編集上必要な場合にのみ追加します。

構造を変更したら、コンポジション全体と、単独で表示するビューで検証します。既存の編集内容を維持し、有用なマークアップのグループ化と、Studio の行の展開やレイアウトの挙動を区別してください。