Skip to main content

spring()

一个基于物理的动画原语。

示例:

spring-example.ts
tsx
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
 
const value = spring({
  frame,
  fps,
  config: {
    stiffness: 100,
  },
});
spring-example.ts
tsx
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
 
const value = spring({
  frame,
  fps,
  config: {
    stiffness: 100,
  },
});

弹簧编辑器​

访问 springs.remotion.dev 来调整弹簧动画参数并查看它们对动画的影响。

参数​

frame​

当前时间值。大多数情况下，您希望传入 useCurrentFrame() 的返回值。弹簧动画从第 0 帧开始，因此如果您想延迟动画，可以传入不同的值，如 frame - 20。

from​

默认: 0

动画的初始值。

to​

默认: 1

动画的结束值。请注意，根据参数设置，弹簧动画可能会在最终目标之前稍微超出，然后反弹回最终目标。

fps​

弹簧动画应该计算多少帧每秒。这应该始终是 useVideoConfig() 的返回值的 fps 属性。

reversev3.3.92​

默认: false

以相反顺序渲染动画。参见：操作顺序

config​

一个可选对象，允许您自定义动画的物理属性。

mass​

默认: 1

弹簧的重量。如果减少质量，动画会变得更快！

damping​

默认: 10

动画减速的程度。

stiffness​

默认: 100

弹簧刚度系数。调整此参数会影响动画的弹性。

overshootClamping​

默认: false

确定动画是否可以超过 to 值。如果设置为 true，如果动画超过 to，它将返回 to 的值。

durationInFramesv3.0.27​

可选

拉伸动画曲线，使其正好与您指定的长度相同。

spring-example.ts
tsx
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
 
const value = spring({
  frame,
  fps,
  config: {
    stiffness: 100,
  },
  durationInFrames: 40,
});
spring-example.ts
tsx
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
 
const value = spring({
  frame,
  fps,
  config: {
    stiffness: 100,
  },
  durationInFrames: 40,
});

请参阅：运算顺序

durationRestThresholdv3.0.27​

可选

动画应接近结束以便被视为已完成计算持续时间。仅在同时指定 durationInFrames 时有效。

例如，如果给定 durationRestThreshold 为 0.001，并且 durationOfFrames 为 30，则意味着在经过 30 帧后，弹簧已达到距离结束值的 99.9%（1 - 0.001 = 0.999）。

delayv3.3.90​

可选

延迟动画多少帧。

例如，如果给定 delay 为 25，则帧 0-24 将返回初始值，并且动画将从第 25 帧开始。请参阅：运算顺序

运算顺序​

以下是应用 durationInFrames、reverse 和 delay 操作的顺序：

首先，将弹簧动画拉伸到您传递的持续时间，使用 durationInFrames，如果您传递了持续时间。
2
 然后，如果传递了 reverse: true，则反转动画。
3
 然后，如果传递了 delay，则延迟动画。

信用​

此函数取自 Reanimated 2，它本身对 Remotion 有很大的启发。

请参阅​