Skip to main content

wipe()

一种展示方式，进入的幻灯片覆盖退出的幻灯片滑动。

🌐 A presentation where the entering slide slides over the exiting slide.

示例​

🌐 Example

WipeTransition.tsx
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { wipe } from "@remotion/transitions/wipe";

const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={wipe()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

应用编程接口​

🌐 API

接受具有以下属性的对象：

🌐 Takes an object with the following properties:

direction​

from-left、from-top-left、from-top、from-top-right、from-right、from-bottom-right、from-bottom、from-bottom-left 中的一个。

🌐 One of from-left, from-top-left, from-top, from-top-right, from-right, from-bottom-right, from-bottom, from-bottom-left.

TypeScript type
import { WipeDirection } from "@remotion/transitions/wipe";

const wipeDirection: WipeDirection = "from-left";

outerEnterStyle?v4.0.84​

场景进入时外部元素的样式。

🌐 The style of the outer element when the scene is is entering.

outerExitStyle?v4.0.84​

场景退出时外部元素的样式。

🌐 The style of the outer element when the scene is exiting.

innerEnterStyle?v4.0.84​

场景进入时内部元素的样式。

🌐 The style of the inner element when the scene is entering.

innerExitStyle?v4.0.84​

场景退出时内部元素的样式。

🌐 The style of the inner element when the scene is exiting.

另请参阅​

🌐 See also

Last updated on