<TransitionSeries>v4.0.59

<TransitionSeries> 组件的行为与 <Series> 组件相同，但允许在 <TransitionSeries.Sequence> 组件之间渲染 <TransitionSeries.Transition> 和 <TransitionSeries.Overlay> 组件。

🌐 The <TransitionSeries> component behaves the same as the <Series> component, but allows for <TransitionSeries.Transition> and <TransitionSeries.Overlay> components to be rendered between <TransitionSeries.Sequence> components.

在任意两个序列之间，你可以放置过渡或叠加效果：

🌐 Between any two sequences, you can place either a transition or an overlay:

一个<TransitionSeries.Transition> 在两个场景之间进行淡入淡出、滑动或其他动画效果。它缩短了总时长，因为在过渡期间两个场景会重叠。
一个 <TransitionSeries.Overlay> 会在切点之上渲染子元素而不影响时间。序列保持完整长度——对光线泄漏或闪光等效果非常有用。

过渡示例

🌐 Transition example

TransitionExample.tsx
import {linearTiming, springTiming, TransitionSeries} from '@remotion/transitions';
import {fade} from '@remotion/transitions/fade';
import {wipe} from '@remotion/transitions/wipe';

export const TransitionExample: React.FC = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="#0b84f3" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition timing={springTiming({config: {damping: 200}})} presentation={fade()} />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="pink" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition timing={linearTiming({durationInFrames: 30})} presentation={wipe()} />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="#2ecc71" />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

presentation

transitionDuration

15

覆盖示例v4.0.415

🌐 Overlay examplev4.0.415

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

export const OverlayExample: React.FC = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="blue" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Overlay durationInFrames={20}>
        <LightLeak />
      </TransitionSeries.Overlay>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="black" />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

overlayDuration

30

offset

0

应用编程接口

🌐 API

`<TransitionSeries>`

继承自 <Sequence> 的 from、name、className 和 style 属性。

🌐 Inherits the from, name, className, and style props from <Sequence>.

<TransitionSeries> 组件只能包含 <TransitionSeries.Sequence>、<TransitionSeries.Transition> 和 <TransitionSeries.Overlay> 组件。

🌐 The <TransitionSeries> component can only contain <TransitionSeries.Sequence>, <TransitionSeries.Transition>, and <TransitionSeries.Overlay> components.

`<TransitionSeries.Sequence>`

继承 <Sequence> 的 durationInFrames、name、className、style、premountFor、postmountFor 和 layout 属性。

🌐 Inherits the durationInFrames, name, className, style, premountFor, postmountFor and layout props from <Sequence>.

作为子级时，把你场景的内容放进去。

🌐 As children, put the contents of your scene.

`<TransitionSeries.Transition>`

放置在两个序列之间，以实现从一个场景到下一个场景的动画过渡。在过渡期间，两个场景会同时渲染，总时长会因过渡时长而缩短。

🌐 Placed between two sequences to animate from one scene to the next.
During the transition, both scenes are rendered simultaneously and the total duration is shortened by the transition length.

需要两个属性：

🌐 Takes two props:

timing：类型为 TransitionTiming 的时序。更多信息请参见 Timings。
presentation?：类型为 TransitionPresentation 的演示文稿。如果未指定，默认值为 slide()。有关更多信息，请参见演示文稿。

必须是 <TransitionSeries> 的直接子元素。至少有一个 <TransitionSeries.Sequence> 组件必须在 <TransitionSeries.Transition> 组件之前或之后。

🌐 Must be a direct child of <TransitionSeries>. At least one <TransitionSeries.Sequence> component must come before or after the <TransitionSeries.Transition> component.

`<TransitionSeries.Overlay>`v4.0.415

放置在两个序列之间以使子层显示在剪切点上方。叠加不会缩短时间线——相邻的序列保持完整长度。

🌐 Placed between two sequences to render children on top of the cut point.
The overlay does not shorten the timeline — adjacent sequences remain at full length.

覆盖层默认位于剪切点的中心：剪切前一半时间，剪切后一半时间。子元素独立动画——不提供进度上下文。

🌐 The overlay is centered on the cut point by default: half the duration before the cut, half after.
Children animate independently — no progress context is provided.

需要两个属性：

🌐 Takes two props:

durationInFrames：覆盖层可见的时间长度。必须是正整数。
offset?：相对于切点的中心移动覆盖层。正值向右移动（延后），负值向左移动（提前）。默认值：0。必须是有限整数。

叠加层不得延伸到帧 0 之前或超过相邻序列的持续时间。

🌐 The overlay must not extend before frame 0 or beyond the duration of the adjacent sequences.

进入和退出动画

🌐 Enter and exit animations

你不一定非要使用 <TransitionSeries> 来进行场景之间的过渡。你也可以通过在 <TransitionSeries> 中的开头或结尾放置一个过渡来为场景的进入或退出添加动画效果。

🌐 You don't necessarily have to use <TransitionSeries> for transitions between scenes. You can also use it to animate the entrace or exit of a scene by putting a transition first or last in the <TransitionSeries>.

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>
  );
};

presentation

`<TransitionSeries>` 的持续时间

🌐 Duration of a <TransitionSeries>

转场缩短了总时长，因为两个场景是重叠的。叠加则不会——总时长保持不变，就好像没有叠加一样。

考虑这个例子：

🌐 Consider this example:

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>
  );
};

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

包含3张幻灯片的示例

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.Transition presentation={slide()} timing={linearTiming({durationInFrames: 45})} />
      <TransitionSeries.Sequence durationInFrames={90}>
        <Letter color="green">C</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

第一张幻灯片显示40帧
第二张幻灯片显示了60帧
第三张幻灯片显示了90帧
有两个过渡，一个长30帧，一个长45帧

总结持续时间：40 + 60 + 90 = 190
减去过渡的持续时间：190 - 30 - 45 = 115

获取过渡的持续时间

🌐 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

规则

🌐 Rules

过渡时间不得长于前一序列或下一序列的持续时间。

两个过渡不能相邻。

两个覆盖层不能相邻。

过渡和叠加不能相邻——它们占据序列之间的同一个插槽。

在过渡或叠加之前或之后必须至少有一个序列。

另请参阅

🌐 See also

过渡示例​

覆盖示例v4.0.415​

应用编程接口​

<TransitionSeries>​

<TransitionSeries.Sequence>​

<TransitionSeries.Transition>​

<TransitionSeries.Overlay>v4.0.415​

进入和退出动画​

<TransitionSeries> 的持续时间​

获取过渡的持续时间​

规则​

另请参阅​