Skip to main content

自定义时间

本页面描述了如何为 <TransitionSeries> 创建你自己的自定义时间安排。

🌐 This page describes how to create your own custom timings for <TransitionSeries>.

概念​

🌐 Concept

计时是一个包含以下内容的配置：

🌐 A timing is a configuration which includes:

过渡的持续时间
2
 一个进度函数。

执行​

🌐 Implementation

要实现自定义计时函数，创建一个返回对象 TransitionTiming 的函数。

🌐 To implement a custom timing function, create a function which returns an object TransitionTiming.

custom-timing.ts
import type { TransitionTiming } from "@remotion/transitions";

const customTiming = (): TransitionTiming => {
  return {
    getDurationInFrames: ({ fps }) => fps, // 1 second
    getProgress: ({ frame, fps }) => Math.min(1, frame / fps),
  };
};

在此示例中，定时函数将持续1秒，并且是线性的。

🌐 In this example, the timing function will last for 1 second and will be linear.

高级示例​

🌐 Advanced example

在以下示例中：

🌐 In the following example:

一个弹簧动画将推进进度到50%
2
 接着是一个可自定义持续时间的暂停
3
 第二个弹簧动画将推进进度到100%



spring-timing-with-pause.ts
import type { TransitionTiming } from "@remotion/transitions";
import { measureSpring, spring, SpringConfig } from "remotion";

const springTimingWithPause = ({
  pauseDuration,
}: {
  pauseDuration: number;
}): TransitionTiming => {
  const firstHalf: Partial<SpringConfig> = {};
  const secondPush: Partial<SpringConfig> = {
    damping: 200,
  };

  return {
    getDurationInFrames: ({ fps }) => {
      return (
        measureSpring({ fps, config: firstHalf }) +
        measureSpring({ fps, config: secondPush }) +
        pauseDuration
      );
    },
    getProgress({ fps, frame }) {
      const first = spring({ fps, frame, config: firstHalf });
      const second = spring({
        fps,
        frame,
        config: secondPush,
        delay: pauseDuration + measureSpring({ fps, config: firstHalf }),
      });

      return first / 2 + second / 2;
    },
  };
};

持续时间需要通过将两个弹簧的持续时间和暂停时间相加来确定性地计算，以便前一个和下一个场景的时间安排正确。

🌐 The duration needs to be calculated deterministically by adding the duration of the two springs and the pause duration, so that the previous and next scenes are timed correctly.

默认情况下，spring() 动画的变化范围是从 0 到 1，这就是为什么它们可以相加。

🌐 A spring() animation by default goes from 0 to 1, which is why they can be added together.

使用自定义时间​

🌐 Using a custom timing

你可以像使用其他定时一样使用自定义定时，通过调用它并将其传递给 <TransitionSeries.Transition> 的 timing 属性。

🌐 You may use a custom timing like any other timing by calling it and passing it to the timing prop of <TransitionSeries.Transition>.

using-custom-timing.tsx

import { TransitionSeries } from "@remotion/transitions";
import { slide } from "@remotion/transitions/slide";
import { useVideoConfig } from "remotion";

export const CustomTransition: React.FC = () => {
  const { width, height } = useVideoConfig();

  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={80}>
        <Letter color="orange">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={slide({ direction: "from-left" })}
        timing={customTiming({ pauseDuration: 10 })}
      />
      <TransitionSeries.Sequence durationInFrames={200}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

获取时间的持续时间​

🌐 Getting the duration of a timing

在任何计时函数上调用 .getDurationInFrames({fps}) 并传入 fps 以获取帧数持续时间。

🌐 Call .getDurationInFrames({fps}) on any timing function and pass fps to get the duration in frames.

参考文献​

🌐 References

请查看已实现的时间安排的源代码 这里。

🌐 See the source code for already implemented timings here.

另请参阅​

🌐 See also

Last updated on