过渡v4.0.59

🌐 Transitionsv4.0.59

<TransitionSeries> 组件允许你在绝对定位的场景之间进行动画。在任意两个序列之间，你可以放置一个 <TransitionSeries.Transition> 或 <TransitionSeries.Overlay>。

🌐 The <TransitionSeries> component lets you animate between absolutely positioned scenes. Between any two sequences, you can place a <TransitionSeries.Transition> or a <TransitionSeries.Overlay>.

过渡

🌐 Transitions

一个过渡动画从一个场景切换到下一个场景。在过渡过程中，两个场景会同时渲染，总持续时间被缩短。

🌐 A transition animates from one scene to the next. During the transition, both scenes render simultaneously and the total duration is shortened.

SlideTransition.tsx
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { slide } from "@remotion/transitions/slide";

const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={slide()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

direction

进入和退出动画

🌐 Enter and exit animations

你也可以通过在 <TransitionSeries> 中将过渡放在开头或结尾来为场景的进入或退出添加动画效果。

🌐 You can also animate the entrance or exit of a scene by putting a transition first or last in the <TransitionSeries>.

参见示例

持续时间

🌐 Duration

在上面的示例中，A 可见 40 帧，B 可见 60 帧，过渡持续时间为 30 帧。在此期间，两个幻灯片都会被渲染。这意味着动画的总持续时间为 60 + 40 - 30 = 70。

🌐 In the above example, A is visible for 40 frames, B for 60 frames and the duration of the transition is 30 frames. During this time, both slides are rendered. This means the total duration of the animation is 60 + 40 - 30 = 70.

获取过渡的持续时间

🌐 Getting the duration of a transition

你可以通过在时间上调用 getDurationInFrames() 来获取过渡的持续时间：

🌐 You can get the duration of a transition by calling getDurationInFrames() on the timing:

Assuming a framerate of 30fps
import { springTiming } from "@remotion/transitions";

springTiming({ config: { damping: 200 } }).getDurationInFrames({ fps: 30 }); // 23

覆盖层v4.0.415

🌐 Overlaysv4.0.415

一个<TransitionSeries.Overlay> 会在两个序列的连接处顶部渲染子元素，而不会缩短时间线。序列保持完整长度——总持续时间保持不变。

🌐 An <TransitionSeries.Overlay> renders children on top of the junction between two sequences without shortening the timeline. The sequences remain at full length — the total duration stays the same.

这对于像光泄漏、闪光或其他应该出现在剪切点之上的视觉元素而不影响时间的效果非常有用。叠加层默认会以剪切点为中心。

🌐 This is useful for effects like light leaks, flashes, or other visual elements that should appear over a cut without affecting timing. The overlay is centered on the cut point by default.

OverlayExample.tsx
import {LightLeak} from '@remotion/light-leaks';
import {TransitionSeries} from '@remotion/transitions';

const OverlayExample = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="#0b84f3" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Overlay durationInFrames={20}>
        <LightLeak />
      </TransitionSeries.Overlay>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="pink" />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};