Skip to content

react-spring 多元素动画 ​

对比多组弹簧与跟随式动画,理解多个元素的运动关系。

交互演示 React

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

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

交互指南 ​

  1. 观察同时执行与依次执行两列。
  2. 重置演示重新比较启动过程。
  3. 在源文件中调整 duration 或目标宽度。

在项目中运行 ​

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

tsx
import Example from "./third-party-lib/react-spring/spring-2/SpringBox2";

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

API 与实现要点 ​

名称类型或形式说明
useSpringsHook创建多个可单独控制的动画
useTrailHook创建相互跟随的动画序列
api.startfunction本例挂载时设置 width 为 400

使用边界 ​

示例内部创建三项动画,不对外提供 props。useTrail 的效果由弹簧跟随产生,不是业务任务队列。

源码位置 ​

  • 演示入口:src/third-party-lib/react-spring/spring-2/SpringBox2.tsx
  • 相关实现:src/third-party-lib/react-spring/spring-2

在实践中理解 React,在分享中共同成长。