react-spring 单元素动画

比较 useSpringValue、useSpring 与命令式 api.start 三种动画写法。

交互演示 React

亲手试一试，更容易理解。

在当前页面运行 react-spring 单元素动画的交互示例。

交互指南

点击本页的“运行演示”，或在独立窗口中体验示例。也可在 src 下的页面中直接挂载现有演示：

tsx

import Example from "./third-party-lib/react-spring/spring-1/SpringBox1";

export default function ExamplePage() {
  return <Example />;
}

名称	类型或形式	说明
`useSpringValue`	Hook	驱动单个数值
`useSpring`	Hook	驱动样式对象
`api.start`	function	命令式启动动画
`config`	object	配置 mass、friction、tension 或 duration

此页是无 props 的教学演示。动画目标宽度为 400；实际应用中应按容器尺寸计算。