<Freeze>

v2.2.0

使用 <Freeze/> 组件时，它的所有子元素都会冻结到你作为属性指定的帧。

🌐 When using the <Freeze/> component, all of its children will freeze to the frame that you specify as a prop.

如果一个组件是 <Freeze/> 的子组件，调用 useCurrentFrame() 钩子将始终返回你指定的帧号，而不管任何 <Sequence>。

🌐 If a component is a child of <Freeze/>, calling the useCurrentFrame() hook will always return the frame number you specify, irrespective of any <Sequence>.

<Html5Video />、<Video> 和 <OffthreadVideo /> 元素将被暂停，而 <Html5Audio /> 和 <Audio> 元素将静音呈现。

示例

🌐 Example

MyComp.tsx
import {Freeze} from 'remotion';

const MyVideo = () => {
  return (
    <Freeze frame={30}>
      <BlueSquare />
    </Freeze>
  );
};

应用编程接口

🌐 API

Freeze 组件是一个高阶组件，除了它的子元素外，还接受以下属性：

🌐 The Freeze component is a high order component and accepts, besides it's children, the following props:

frame

它的子对象应该在第几帧冻结。

🌐 At which frame it's children should freeze.

activev4.0.127

通过传入 false 来停用冻结组件。你也可以传入一个回调函数，接收当前帧并返回一个布尔值。

🌐 Deactivate freezing component by passing false.
You may also pass a callback function and accept the current frame and return a boolean.

From frame 30 on
import {Freeze} from 'remotion';

const MyVideo = () => {
  return (
    <Freeze frame={30} active={(f) => f < 30}>
      <BlueSquare />
    </Freeze>
  );
};

演示

🌐 Demo

Use Freeze component

兼容性

🌐 Compatibility

Browsers			Environments
Chrome	Firefox	Safari	Client-side rendering	Server-side rendering	Player	Studio

另请参阅

🌐 See also

• 此组件的源代码
• useCurrentFrame()