Skip to main content

光泄漏v4.0.415

🌐 Light Leaksv4.0.415

@remotion/light-leaks 的 <LightLeak> 组件渲染了一个基于 WebGL 的光泄漏效果。该效果在持续时间的前半段显现，在后半段收回。

🌐 The <LightLeak> component from @remotion/light-leaks renders a WebGL-based light leak effect. The effect reveals during the first half of its duration and retracts during the second half.

MyComp.tsx
import {LightLeak} from '@remotion/light-leaks';
import {AbsoluteFill} from 'remotion';

const MyComp = () => {
  return (
    <AbsoluteFill style={{backgroundColor: 'black'}}>
      <LightLeak durationInFrames={60} seed={3} hueShift={30} />
    </AbsoluteFill>
  );
};

更改种子​

🌐 Changing the seed

seed 属性控制光泄漏图案的形状。不同的值会产生不同的图案。

🌐 The seed prop controls the shape of the light leak pattern. Different values produce different patterns.

DifferentSeed.tsx
const MyComp = () => {
  return (
    <AbsoluteFill style={{backgroundColor: 'black'}}>
      <LightLeak seed={5} durationInFrames={30} />
    </AbsoluteFill>
  );
};

更改颜色​

🌐 Changing the color

使用 hueShift 来旋转光泄漏的颜色，单位为度（0–360）：

🌐 Use hueShift to rotate the color of the light leak in degrees (0–360):

  • 0（默认）—黄色到橙色
  • 120 — 转向绿色
  • 240 — 向蓝色移动
BlueHue.tsx
const MyComp = () => {
  return (
    <AbsoluteFill style={{backgroundColor: 'black'}}>
      <LightLeak hueShift={240} durationInFrames={30} />
    </AbsoluteFill>
  );
};

用作过渡​

🌐 Using as a transition

结合 <TransitionSeries.Overlay>，你可以在两个序列的切分点放置光泄效果，而不缩短时间线。

🌐 Combined with <TransitionSeries.Overlay>, you can place a light leak at the cut point between two sequences without shortening the timeline.

LightLeakTransition.tsx
import {LightLeak} from '@remotion/light-leaks';
import {TransitionSeries} from '@remotion/transitions';

const LightLeakTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="#0b84f3" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Overlay durationInFrames={20}>
        <LightLeak />
      </TransitionSeries.Overlay>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="pink" />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

在中点处，光泄覆盖了大部分画布，隐藏了场景之间的切换。

🌐 At the midpoint, the light leak covers most of the canvas, hiding the cut between scenes.

另请参阅​

🌐 See also

Last updated on