spring()
一个基于物理的动画原语。
示例:
spring-example.tstsx
constframe =useCurrentFrame ();const {fps } =useVideoConfig ();constvalue =spring ({frame ,fps ,config : {stiffness : 100,},});
spring-example.tstsx
constframe =useCurrentFrame ();const {fps } =useVideoConfig ();constvalue =spring ({frame ,fps ,config : {stiffness : 100,},});
弹簧编辑器
访问 springs.remotion.dev 来调整弹簧动画参数并查看它们对动画的影响。
参数
frame
当前时间值。大多数情况下,您希望传入 useCurrentFrame()
的返回值。弹簧动画从第 0 帧开始,因此如果您想延迟动画,可以传入不同的值,如 frame - 20
。
from
默认: 0
动画的初始值。
to
默认: 1
动画的结束值。请注意,根据参数设置,弹簧动画可能会在最终目标之前稍微超出,然后反弹回最终目标。
fps
弹簧动画应该计算多少帧每秒。这应该始终是 useVideoConfig()
的返 回值的 fps
属性。
reverse
v3.3.92
默认: false
以相反顺序渲染动画。参见:操作顺序
config
一个可选对象,允许您自定义动画的物理属性。
mass
默认: 1
弹簧的重量。如果减少质量,动画会变得更快!
damping
默认: 10
动画减速的程度。
stiffness
默认: 100
弹簧刚度系数。调整此参数会影响动画的弹性。
overshootClamping
默认: false
确定动画是否可以超过 to
值。如果设置为 true,如果动画超过 to
,它将返回 to
的值。
durationInFrames
v3.0.27
可选
拉伸动画曲线,使其正好与您指定的长度相同。
spring-example.tstsx
constframe =useCurrentFrame ();const {fps } =useVideoConfig ();constvalue =spring ({frame ,fps ,config : {stiffness : 100,},durationInFrames : 40,});
spring-example.tstsx
constframe =useCurrentFrame ();const {fps } =useVideoConfig ();constvalue =spring ({frame ,fps ,config : {stiffness : 100,},durationInFrames : 40,});
请参阅:运算顺序
durationRestThreshold
v3.0.27
可选
动画应接近结束以便被视为已完成计算持续时间。仅在同时指定 durationInFrames
时有效。
例如,如果给定 durationRestThreshold
为 0.001
,并且 durationOfFrames
为 30
,则意味着在经过 30 帧后,弹簧已达到距离结束值的 99.9%(1 - 0.001 = 0.999
)。
delay
v3.3.90
可选
延迟动画多少帧。
例如,如果给定 delay
为 25
,则帧 0-24 将返回初始值,并且动画将从第 25 帧开始。请参阅:运算顺序
运算顺序
以下是应用 durationInFrames
、reverse
和 delay
操作的顺序:
durationInFrames
,如果您传递了持续时间。
reverse: true
,则反转动画。
delay
,则延迟动画。
信用
此函数取自 Reanimated 2,它本身对 Remotion 有很大的启发。