Skip to main content

鸢尾花()v4.0.316

🌐 iris()v4.0.316

一个展示，其中下一个场景通过一个从中心向外扩展的圆形遮罩显现，类似相机光圈的开启。

🌐 A presentation where the next scene is revealed through a circular mask that expands from the center outward, similar to a camera iris opening.

示例​

🌐 Example

IrisTransition.tsx
import {linearTiming, TransitionSeries} from '@remotion/transitions';
import {iris} from '@remotion/transitions/iris';
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={iris({width, height})} timing={linearTiming({durationInFrames: 30})} />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

应用编程接口​

🌐 API

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

🌐 Accepts an object with the following options:

width​

应该设置为视频的宽度。

🌐 Should be set to the width of the video.

height​

应设置为视频的高度。

🌐 Should be set to the height of the video.

outerEnterStyle?​

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

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

outerExitStyle?​

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

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

innerEnterStyle?​

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

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

innerExitStyle?​

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

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

另请参阅​

🌐 See also

Last updated on