自定义时序

本页面描述如何为 <TransitionSeries> 创建自定义时序。

概念

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

1

过渡的持续时间

2

进度函数。

实现

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

custom-timing.ts
tsx
import type { TransitionTiming } from "@remotion/transitions";
 
const customTiming = (): TransitionTiming => {
  return {
    getDurationInFrames: ({ fps }) => fps, // 1 second
    getProgress: ({ frame, fps }) => Math.min(1, frame / fps),
  };
};

custom-timing.ts
tsx
import type { TransitionTiming } from "@remotion/transitions";
 
const customTiming = (): TransitionTiming => {
  return {
    getDurationInFrames: ({ fps }) => fps, // 1 second
    getProgress: ({ frame, fps }) => Math.min(1, frame / fps),
  };
};

在这个例子中，时序函数将持续 1 秒，并且是线性的。

高级示例

A

在以下示例中：

1

弹簧动画将将进度推至 50%

2

可自定义持续时间的暂停跟随

3

第二个弹簧动画将进度推至 100%

spring-timing-with-pause.ts
tsx
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;
    },
  };
};

spring-timing-with-pause.ts
tsx
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;
    },
  };
};

持续时间需要通过计算两个弹簧和暂停的持续时间来确定，以便正确计时前后场景。

spring() 动画默认从 0 到 1，这就是为什么它们可以相加。

使用自定义时序

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

using-custom-timing.tsx
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>
  );
};

using-custom-timing.tsx
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>
  );
};

获取时序的持续时间

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

参考

查看已实现时序的源代码这里。

另请参阅

• 自定义演示