<TransitionSeries>
从 v4.0.59 开始可用
<TransitionSeries>
组件的行为与 <Series>
组件相同,但允许在 <TransitionSeries.Sequence>
组件之间渲染 <TransitionSeries.Transition>
组件。
每个过渡由两部分组成:
presentation
: 正在使用的效果,例如 fade()
或 wipe()
。
timing
: 持续时间和进度曲线,例如 springTiming()
或 linearTiming()
此软件包内置了一些演示和定时,但也可以创建自定义的。
MyComp.tsxtsx
import {linearTiming ,springTiming ,TransitionSeries ,} from "@remotion/transitions";import {fade } from "@remotion/transitions/fade";import {wipe } from "@remotion/transitions/wipe";export constMyComp :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.tsxtsx
import {linearTiming ,springTiming ,TransitionSeries ,} from "@remotion/transitions";import {fade } from "@remotion/transitions/fade";import {wipe } from "@remotion/transitions/wipe";export constMyComp :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.tsxtsx
import {linearTiming ,TransitionSeries } from "@remotion/transitions";import {slide } from "@remotion/transitions/slide";constBasicTransition = () => {return (<TransitionSeries ><TransitionSeries .Sequence durationInFrames ={40}><Letter color ="#0b84f3">A</Letter ></TransitionSeries .Sequence ><TransitionSeries .Transition presentation ={slide ()}timing ={linearTiming ({durationInFrames : 30 })}/></TransitionSeries >);};
SlideTransition.tsxtsx
import {linearTiming ,TransitionSeries } from "@remotion/transitions";import {slide } from "@remotion/transitions/slide";constBasicTransition = () => {return (<TransitionSeries ><TransitionSeries .Sequence durationInFrames ={40}><Letter color ="#0b84f3">A</Letter ></TransitionSeries .Sequence ><TransitionSeries .Transition presentation ={slide ()}timing ={linearTiming ({durationInFrames : 30 })}/></TransitionSeries >);};
<TransitionSeries>
的持续时间
考虑以下示例:
SlideTransition.tsxtsx
import {linearTiming ,TransitionSeries } from "@remotion/transitions";import {slide } from "@remotion/transitions/slide";constBasicTransition = () => {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.tsxtsx
import {linearTiming ,TransitionSeries } from "@remotion/transitions";import {slide } from "@remotion/transitions/slide";constBasicTransition = () => {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.tsxtsx
import {linearTiming ,TransitionSeries } from "@remotion/transitions";import {slide } from "@remotion/transitions/slide";constBasicTransition = () => {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.tsxtsx
import {linearTiming ,TransitionSeries } from "@remotion/transitions";import {slide } from "@remotion/transitions/slide";constBasicTransition = () => {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
获取过渡的持续时间
您可以通过在时间轴上调用getDurationInFrames()
来获取过渡的持续时间:
假设帧速率为30fpstsx
import {springTiming } from "@remotion/transitions";springTiming ({config : {damping : 200 } }).getDurationInFrames ({fps : 30 }); // 23
假设帧速率为30fpstsx
import {springTiming } from "@remotion/transitions";springTiming ({config : {damping : 200 } }).getDurationInFrames ({fps : 30 }); // 23
规则