Skip to main content

fade()

一个简单的淡入淡出动画。新幻灯片淡入，而旧幻灯片保持不变。仅当新幻灯片完全不透明时才有效。

A
B

示例​

FadeTransition.tsx
tsx
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
 
const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={fade()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
FadeTransition.tsx
tsx
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
 
const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={fade()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

API​

一个接受以下内容的对象：

enterStyle?v4.0.84​

场景进入时容器元素的样式。

exitStyle?v4.0.84​

场景退出时容器元素的样式。

shouldFadeOutExitingScene?v4.0.166​

退出场景是否应该淡出。默认为 false。

note

默认为 false，因为如果进入和退出场景都是半透明的，整个场景将是半透明的，这将使底部的内容透过来。
我们建议在完全不透明的场景之间进行过渡时将其设置为 false。
如果场景没有完全覆盖（比如在叠加之间淡入淡出），我们建议将其设置为 false。

另请参阅​