Skip to main content

clockWipe()v4.0.74

一个演示，其中退出的幻灯片以圆形运动擦除，显示出其下面的下一张幻灯片。

A
B

示例​

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

API​

接受一个具有以下选项的对象：

width​

应设置为视频的宽度。

height​

应设置为视频的高度。

outerEnterStyle?v4.0.84​

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

outerExitStyle?v4.0.84​

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

innerEnterStyle?v4.0.84​

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

innerExitStyle?v4.0.84​

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

另请参阅​