<TransitionSeries>

从 v4.0.59 开始可用

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

每个过渡由两部分组成：

1

presentation: 正在使用的效果，例如 fade() 或 wipe()。

2

timing: 持续时间和进度曲线，例如 springTiming() 或 linearTiming()

此软件包内置了一些演示和定时，但也可以创建自定义的。

MyComp.tsx
tsx
import {
  linearTiming,
  springTiming,
  TransitionSeries,
} from "@remotion/transitions";
 
import { fade } from "@remotion/transitions/fade";
import { wipe } from "@remotion/transitions/wipe";
 
export const MyComp: React.FC = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="blue" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        timing={springTiming({ config: { damping: 200 } })}
        presentation={fade()}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="black" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        timing={linearTiming({ durationInFrames: 30 })}
        presentation={wipe()}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="white" />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

MyComp.tsx
tsx
import {
  linearTiming,
  springTiming,
  TransitionSeries,
} from "@remotion/transitions";
 
import { fade } from "@remotion/transitions/fade";
import { wipe } from "@remotion/transitions/wipe";
 
export const MyComp: React.FC = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="blue" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        timing={springTiming({ config: { damping: 200 } })}
        presentation={fade()}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="black" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        timing={linearTiming({ durationInFrames: 30 })}
        presentation={wipe()}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="white" />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

API

<TransitionSeries>

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

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

<TransitionSeries.Sequence>

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

作为子元素，放置您场景的内容。

<TransitionSeries.Transition>

接受两个属性：

• timing: 类型为 TransitionTiming 的定时。有关更多信息，请参阅 Timings。
• presentation?: 类型为 TransitionPresentation 的演示。如果未指定，默认值为 slide()。有关更多信息，请参阅 Presentations。

必须是<TransitionSeries>的直接子元素。
至少一个<TransitionSeries.Sequence>组件必须在<TransitionSeries.Transition>组件之前或之后。
不允许两个<TransitionSeries.Transition>组件相邻。

进入和退出动画

您不一定要使用<TransitionSeries>来在场景之间进行过渡。您还可以使用它来动画场景的进入或退出，方法是将过渡放在<TransitionSeries>的第一个或最后一个位置。

SlideTransition.tsx
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>
  );
};

SlideTransition.tsx
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>
  );
};

<TransitionSeries>的持续时间

考虑以下示例：

SlideTransition.tsx
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>
  );
};

SlideTransition.tsx
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
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>
  );
};

SlideTransition.tsx
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帧长

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

获取过渡的持续时间

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

假设帧速率为30fps
tsx
import { springTiming } from "@remotion/transitions";
 
springTiming({ config: { damping: 200 } }).getDurationInFrames({ fps: 30 }); // 23

假设帧速率为30fps
tsx
import { springTiming } from "@remotion/transitions";
 
springTiming({ config: { damping: 200 } }).getDurationInFrames({ fps: 30 }); // 23

规则

1

不允许有比前一个或后一个序列的持续时间更长的过渡。

2

两个过渡之间不能相邻。

3

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

参见

• 此函数的源代码
• 过渡效果
• 时间设置
• 演示文稿
• <系列>