useSpring

useSpring 创建一个 motion 值它将通过弹簧动画动画化到其最新目标。

目标可以通过 .set 手动设置，也可以通过传入另一个 motion 值自动设置。

用法

从 Motion 导入 useSpring

import { useSpring } from "motion/react"

直接控制

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

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

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

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

也可以使用以下方法立即更新此值，而无需弹簧动画该jump()方法.

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

跟踪另一个 motion 值

也可以自动弹簧动画到另一个 motion 值的最新值

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

此源 motion 值也必须是数字或单位类型字符串。

过渡

spring 的类型可以使用通常的弹簧过渡选项定义.

useSpring(0, { stiffness: 300 })