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 时有效。

例如,如果给定 durationRestThreshold0.001,并且 durationOfFrames30,则意味着在经过 30 帧后,弹簧已达到距离结束值的 99.9%(1 - 0.001 = 0.999)。

delayv3.3.90

可选

延迟动画多少帧。

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

运算顺序

以下是应用 durationInFramesreversedelay 操作的顺序:

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

信用

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

请参阅