Skip to content
Framoo
Esc
↑↓navigate↵open⌘Jpreview
On this page

Core

SceneStageとSceneLayerで、ひとつのカメラトラックに追従するレイヤーと画面に固定するレイヤーを組み立てます。

SceneStage

コンポジションの表示範囲を作り、必要に応じてカメラトラックを受け取ります。画面をクリップするため、通常はAbsoluteFillで外側から包む必要はありません。

<SceneStage camera={camera}>{/* SceneLayerを配置 */}</SceneStage>

カメラを使わない場合はcameraを省略できます。複数カメラを切り替えるコンポーネントではなく、このStage内のレイヤーが共有するひとつのカメラです。

SceneLayer

SceneStageの中に置く全画面レイヤーです。followsCamera でカメラに追従するか、画面に固定するかを選びます。後に書いたレイヤーほど手前に重なります。

設定 動作 よく使うもの
followsCamera カメラに追従する 背景、前景、人物、カメラに合わせて動く装飾
followsCamera={false} 画面に固定する 歌詞、字幕、画面端のラベル、画面固定オーバーレイ
depth={0.7} カメラ移動を弱める 遠景のパララックス
depth={1} カメラ移動をそのまま適用する（既定値） 通常の画像レイヤー
depth={1.2} カメラ移動を強める 手前に見せる前景レイヤー

depthはfollowsCamera={true} のときだけ有効です。背景と人物を分けていない一枚絵でも、背景画像をひとつの SceneLayerに入れて使えます。

<SceneStage camera={camera}>
  <SceneLayer followsCamera depth={0.8}>
    <Background />
  </SceneLayer>
  <SceneLayer followsCamera depth={1.15}>
    <ForegroundCharacter />
  </SceneLayer>
  <SceneLayer followsCamera={false}>
    <Lyrics />
  </SceneLayer>
</SceneStage>

secondsToFrameRange

開始秒、終了秒、fpsを指定すると、Framooのカメラの動きに使うフレーム範囲を作れます。返り値にはfromとdurationInFramesが含まれます。

moveTo({
  ...secondsToFrameRange(0, 4, fps),
  to: { x: 0.54, y: 0.46, zoom: 1.12 },
})

Was this page helpful?