useTransitionProgress()v4.0.177

一个可以在<TransitionSeries.Sequence>的子组件内部使用的钩子，用于获取过渡的进度，以直接操作场景内的对象。

🌐 A hook that can be used inside a child of a <TransitionSeries.Sequence> to get the progress of the transition to directly manipulate the objects inside the scene.

它本意是与 none() 演示文稿一起使用，但也可以与任何其他演示文稿一起使用。

🌐 It is meant to be used together with the none() presentation, but can be used with any other presentation.

示例

🌐 Example

useTransitionProgress()
import { useTransitionProgress } from "@remotion/transitions";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { none } from "@remotion/transitions/none";

const A: React.FC = () => {
  const progress = useTransitionProgress();
  console.log(progress.entering); // Always `1`
  console.log(progress.exiting); // Going from 0 to 1
  console.log(progress.isInTransitionSeries); //  `true`

  return <div>A</div>;
};

const B: React.FC = () => {
  const progress = useTransitionProgress();
  console.log(progress.entering); // Going from 0 to 1
  console.log(progress.exiting); // Always `0`
  console.log(progress.isInTransitionSeries); //  `true`

  return <div>B</div>;
};

const C: React.FC = () => {
  const progress = useTransitionProgress();
  console.log(progress.entering); // Always `1`
  console.log(progress.exiting); // Always `0`
  console.log(progress.isInTransitionSeries); //  `false`

  return <div>C</div>;
};

const Transition: React.FC = () => {
  return (
    <>
      <TransitionSeries>
        <TransitionSeries.Sequence durationInFrames={40}>
          <A />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={none()}
          timing={linearTiming({ durationInFrames: 30 })}
        />
        <TransitionSeries.Sequence durationInFrames={60}>
          <B />
        </TransitionSeries.Sequence>
      </TransitionSeries>
      <C />
    </>
  );
};

应用编程接口

🌐 API

一个 React 钩子，返回一个包含以下属性的对象：

🌐 A React hook that returns an object with the following properties:

entering

进入场景的进度。如果不在<TransitionSeries.Sequence>内，它将始终是1。

🌐 The progress of the entering scene. If not inside a <TransitionSeries.Sequence>, it will always be 1.

exiting

正在退出场景的进度。如果不在<TransitionSeries.Sequence>内，它将始终是0。

🌐 The progress of the exiting scene. If not inside a <TransitionSeries.Sequence>, it will always be 0.

isInTransitionSeries

当前场景是否位于 <TransitionSeries.Sequence> 内。

🌐 Whether the current scene is inside a <TransitionSeries.Sequence>.

另请参阅

🌐 See also

• 此 hook 的源代码
• <TransitionSeries>