Skip to main content

<TransitionSeries>

从 v4.0.59 开始可用

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

每个过渡由两部分组成:

presentation: 正在使用的效果,例如 fade()wipe()

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>fromnameclassNamestyle 属性。

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

<TransitionSeries.Sequence>

继承了 <Sequence>durationInFramesnameclassNamestylepremountForlayout 属性。

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

<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

规则

不允许有比前一个或后一个序列的持续时间更长的过渡。
2
两个过渡之间不能相邻。
3
在过渡之前或之后必须至少有一个序列。

参见