Skip to main content

过渡v4.0.59

要在两种绝对定位内容之间进行过渡，您可以使用<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
B

进入和退出动画​

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

查看示例

时长​

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

演示​

演示确定了动画的视觉效果。

Overview
List of available presentations
Custom presentations
Implement your own effect
A
B
fade()
Animate the opacity of the scenes
A
B
slide()
Slide in and push out the previous scene
A
B
wipe()
Slide over the previous scene
A
B
flip()
Rotate the previous scene
A
B
clockWipe()
Reveal the new scene in a circular movement
cube()
Paid
Rotate both scenes with 3D perspective
A
B
none()
Have no visual effect.
Audio transitions
Add a sound effect to a transition

时间​

时间确定了动画需要多长时间以及动画曲线。

springTiming()
Transition with a spring()
linearTiming()
Transition linearly with optional Easing
Custom timings
Implement your own timing

音频过渡​

查看如何在您的过渡中包含音频效果。

获取过渡的持续时间​

您可以通过在时间轴上调用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
 在过渡之前或之后必须至少有一个序列。

参见​