spring()
基于物理的动画基本元素。
🌐 A physics-based animation primitive.
示例用法：
🌐 Example usage:
spring-example.tsconstframe =useCurrentFrame (); const {fps } =useVideoConfig (); constvalue =spring ({frame ,fps ,config : {stiffness : 100, }, });
在以下示例中，value 控制 div 的 scale 属性：
要禁用默认反弹，请增加 damping 参数。
🌐 To disable the default bounce, increase the damping parameter.
想要更高级的游乐场，请访问 remotion.dev/timing-editor。
🌐 For a more advanced playground, visit remotion.dev/timing-editor.
参数
🌐 Parameters
frame
当前时间值。大多数情况下，你会想传入 useCurrentFrame() 的返回值。弹簧动画从第 0 帧开始，因此如果你想延迟动画，可以传入像 frame - 20 这样的不同值。
🌐 The current time value. Most of the time you want to pass in the return value of useCurrentFrame(). The spring animation starts at frame 0, so if you would like to delay the animation, you can pass a different value like frame - 20.
fps
弹簧动画应以每秒多少帧计算。这应始终是useVideoConfig()返回值的fps属性。
🌐 For how many frames per second the spring animation should be calculated. This should always be the fps property of the return value of useVideoConfig().
from?
默认: 0
🌐 Default: 0
动画的初始值。
🌐 The initial value of the animation.
to?
默认: 1
🌐 Default: 1
动画的结束值。请注意，根据参数的不同，弹簧动画在回弹到最终目标之前可能会略微超出目标。
🌐 The end value of the animation. Note that depending on the parameters, spring animations may overshoot the target a bit, before they bounce back to their final target.
reverse?v3.3.92
默认: false
🌐 Default: false
将动画倒放渲染。参见：运算顺序
🌐 Render the animation in reverse. See: Order of operations
config?
一个可选的对象，可让你自定义动画的物理属性。
🌐 An optional object that allows you to customize the physical properties of the animation.
mass?
默认: 1
🌐 Default: 1
弹簧的重量。如果你减少质量，动画会变得更快！
🌐 The weight of the spring. If you reduce the mass, the animation becomes faster!
damping?
默认: 10
🌐 Default: 10
动画减速的程度有多大。
🌐 How hard the animation decelerates.
stiffness?
默认: 100
🌐 Default: 100
弹簧刚度系数。调整这个参数，它会影响你的动画弹性有多强。
🌐 Spring stiffness coefficient. Play with this one and it will affect how bouncy your animation is.
overshootClamping?
默认: false
🌐 Default: false
确定动画是否可以超过 to 值。如果设置为 true，当动画超过 to 时，它将只返回 to 的值。
🌐 Determines whether the animation can shoot over the to value. If set to true, if the animation goes over to, it will just return the value of to.
durationInFrames?v3.0.27
拉伸动画曲线，使其长度正好达到你指定的长度。
🌐 Stretches the animation curve so it is exactly as long as you specify.
spring-example.tsconstframe =useCurrentFrame (); const {fps } =useVideoConfig (); constvalue =spring ({frame ,fps ,config : {stiffness : 100, },durationInFrames : 40, });
另请参见：运算顺序
🌐 See also: Order of operations
durationRestThreshold?v3.0.27
动画应该接近结束到什么程度才被认为完成，以便计算持续时间。仅在同时指定了 durationInFrames 时才有效。
🌐 How close the animation should be to the end in order to be considered finished for the calculation of the duration. Only has an effect if durationInFrames is also specified.
例如，如果给定了 0.001 的 durationRestThreshold，并且 durationOfFrames 是 30，这意味着在 30 帧之后，弹簧已经达到了到终值距离的 99.9%（1 - 0.001 = 0.999）。
🌐 For example, if a durationRestThreshold of 0.001 is given, and the durationOfFrames is 30, it means that after 30 frames, the spring has reached 99.9% (1 - 0.001 = 0.999) of it's distance to the end value.
delay?v3.3.90
延迟动画的帧数。
🌐 How many frames to delay the animation for.
例如，如果给定 25 的 delay，帧 0-24 将返回初始值，动画将有效地从第 25 帧开始。另请参阅：操作顺序
🌐 For example, if a delay of 25 is given frames 0-24 will return the initial value, and the animation will effectively start from frame 25. See also: Order of operations
运算顺序
🌐 Order of operations
以下是 durationInFrames、reverse 和 delay 操作的应用顺序：
🌐 Here is the order of which the durationInFrames, reverse and delay operations are applied:
durationInFrames，弹簧动画会被拉伸到你传入的持续时间。reverse: true，动画会被反转。delay，动画会被延迟。
信用
🌐 Credit
这个函数取自 Reanimated 2，而它本身就是 Remotion 的巨大灵感来源。
🌐 This function was taken from Reanimated 2, which in itself was a huge inspiration for Remotion.
兼容性
🌐 Compatibility
| Browsers | Servers | Environments | |||||||
|---|---|---|---|---|---|---|---|---|---|
Chrome | Firefox | Safari | Node.js | Bun | Serverless Functions | ||||
另请参阅
🌐 See also