Skip to main content

springTiming()

一个基于 spring() 的 <TransitionSeries> 的时间函数。

SlideTransition.tsx
tsx
import { springTiming, TransitionSeries } from "@remotion/transitions";
import { slide } from "@remotion/transitions/slide";
 
const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={slide()}
        timing={springTiming({
          config: {
            damping: 200,
          },
          durationInFrames: 30,
          durationRestThreshold: 0.001,
        })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
SlideTransition.tsx
tsx
import { springTiming, TransitionSeries } from "@remotion/transitions";
import { slide } from "@remotion/transitions/slide";
 
const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={slide()}
        timing={springTiming({
          config: {
            damping: 200,
          },
          durationInFrames: 30,
          durationRestThreshold: 0.001,
        })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

API​

一个具有以下属性的对象：

config​

可选

一个 spring config，参见 spring()。

durationInFrames​

可选

将动画的时间曲线拉伸到固定的持续时间。

durationRestThreshold?​

可选

动画被认为已完成的阈值。默认值：0.005

reverse?v4.0.144​

可选

反转时间曲线。

推荐：设置低持续时间阈值​

默认的 durationRestThreshold 是 0.005（与 spring() 相同）。这意味着如果动画已经进行了 99.5%，则被认为已完成。
对于一个过渡，这可能导致动画略微明显地截断：

A
B

为了避免这种情况，设置一个较低的 durationRestThreshold，我们建议使用 0.001。

请注意，这也会增加动画的持续时间。 如果设置了固定的 durationInFrames，动画会感觉更快，因为在更长的时间内它不会被认为已完成。