useSpring

useSpring 创建一个 motion value，该值将以弹簧动画的方式动画化到其最新的目标。

目标可以通过 .set 手动设置，或者通过传递另一个运动值自动设置。

使用

导入 useSpring 从 Motion Vue：

import { useSpring } from 'motion-v'

使用 Spring 可以通过数字或单位类型字符串（px、%等）创建：

const x = useSpring(0)
const y = useSpring('100vh')

现在，每当通过set()更新此运动值时，该值将使用定义的弹簧动画过渡到其新目标。

x.set(100)
y.set('50vh')

它也可以立即更新此值，无需弹簧，通过该jump()方法。

x.jump(50)
y.jump('0vh')

也可能自动跳转到另一个运动值的最新值：

const x = useMotionValue(0)
const y = useSpring(x)

此源运动值也必须是一个数字或单位类型字符串。

弹簧可以配置多个选项。完整参考，请参阅motion文档。

useSpring(0, {
  stiffness: 300,
  damping: 100,
  mass: 10,
})

默认：10

对敌军实力的评估。如果设置为 0，弹簧将无限振荡。

默认：1

物体质量。数值越高，运动越迟缓。

默认：1

弹簧刚度。值越高，运动越突然。

On This Page