springTiming()

基于 spring() 的 <TransitionSeries> 的时序函数。

🌐 A timing function for <TransitionSeries> based on spring().

SlideTransition.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

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

🌐 An object with the following properties:

config?

一个弹簧 config，参见 spring()。

🌐 A spring config, see spring().

durationInFrames?

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

🌐 Stretch the timing curve of the animation to a fixed duration.

durationRestThreshold?

此时动画被视为已完成。默认值：0.005。

🌐 At which point the animation is considered to be finished. Default: 0.005.

reverse?v4.0.144

反转时间曲线。

🌐 Reverse the timing curve.

建议：设置较低的剩余时长阈值

🌐 Recommendation: Set a low duration rest threshold

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

🌐 The default durationRestThreshold is 0.005 (same as spring()). This means that if the animations has progressed 99.5%, it is considered to be finished.
For a transition, this can lead to a slightly noticeable cutoff of the animation:

为避免此情况，请设置较低的 durationRestThreshold，我们推荐 0.001。

🌐 To avoid this, set a low durationRestThreshold, we recommend 0.001.

请考虑这也会增加动画的持续时间。如果你设置一个固定的 durationInFrames，动画会感觉更快，因为更长的时间不会被认为已完成。

🌐 Consider that this will also increase the duration of the animation. If you set a fixed durationInFrames, the animation will feel faster because it for longer it is not considered to be finished.