everything-claude-code/docs/ja-JP/skills/remotion-video-creation/rules/transitions.md

name, description, metadata

name	description	metadata
transitions	Remotionのフルスクリーンシーントランジション。	tags transitions, fade, slide, wipe, scenes

フルスクリーントランジション

<TransitionSeries> を使って複数のシーンやクリップ間をアニメーションで切り替えます。 これはchildren要素を絶対位置に配置します。

前提条件

まず、@remotion/transitionsパッケージをインストールする必要があります。 インストールされていない場合は、以下のコマンドを使用します：

npx remotion add @remotion/transitions # npmを使うプロジェクト
bunx remotion add @remotion/transitions # bunを使うプロジェクト
yarn remotion add @remotion/transitions # yarnを使うプロジェクト
pnpm exec remotion add @remotion/transitions # pnpmを使うプロジェクト

使用例

import {TransitionSeries, linearTiming} from '@remotion/transitions';
import {fade} from '@remotion/transitions/fade';

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <SceneA />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={fade()} timing={linearTiming({durationInFrames: 15})} />
  <TransitionSeries.Sequence durationInFrames={60}>
    <SceneB />
  </TransitionSeries.Sequence>
</TransitionSeries>;

利用可能なトランジションタイプ

それぞれのモジュールからトランジションをインポートします：

import {fade} from '@remotion/transitions/fade';
import {slide} from '@remotion/transitions/slide';
import {wipe} from '@remotion/transitions/wipe';
import {flip} from '@remotion/transitions/flip';
import {clockWipe} from '@remotion/transitions/clock-wipe';

方向指定のスライドトランジション

入退場アニメーションのスライド方向を指定します。

import {slide} from '@remotion/transitions/slide';

<TransitionSeries.Transition presentation={slide({direction: 'from-left'})} timing={linearTiming({durationInFrames: 20})} />;

方向: "from-left"、"from-right"、"from-top"、"from-bottom"

タイミングオプション

import {linearTiming, springTiming} from '@remotion/transitions';

// 線形タイミング - 一定速度
linearTiming({durationInFrames: 20});

// スプリングタイミング - 有機的な動き
springTiming({config: {damping: 200}, durationInFrames: 25});

長さの計算

トランジションは隣接するシーンを重ね合わせるため、コンポジション全体の長さはすべてのシーク長さの合計よりも短くなります。

例えば、2つの60フレームシーンと15フレームのトランジションの場合：

• トランジションなし：60 + 60 = 120 フレーム
• トランジションあり：60 + 60 - 15 = 105 フレーム

トランジション中は両シーンが同時に再生されるため、トランジションの長さが差し引かれます。

トランジションの長さを取得する

タイミングオブジェクトの getDurationInFrames() メソッドを使用します：

import {linearTiming, springTiming} from '@remotion/transitions';

const linearDuration = linearTiming({durationInFrames: 20}).getDurationInFrames({fps: 30});
// 20を返す

const springDuration = springTiming({config: {damping: 200}}).getDurationInFrames({fps: 30});
// スプリング物理に基づいて計算された長さを返す

明示的な durationInFrames なしの springTiming の場合、スプリングアニメーションが落ち着くタイミングを fps で計算するため、長さは fps に依存します。

コンポジション全体の長さを計算する

import {linearTiming} from '@remotion/transitions';

const scene1Duration = 60;
const scene2Duration = 60;
const scene3Duration = 60;

const timing1 = linearTiming({durationInFrames: 15});
const timing2 = linearTiming({durationInFrames: 20});

const transition1Duration = timing1.getDurationInFrames({fps: 30});
const transition2Duration = timing2.getDurationInFrames({fps: 30});

const totalDuration = scene1Duration + scene2Duration + scene3Duration - transition1Duration - transition2Duration;
// 60 + 60 + 60 - 15 - 20 = 145フレーム