使用 useTrail 和 useChain 实现序列动画

useTrail(count, config) 会创建 count 个按顺序播放动画的弹簧，并允许配置每个弹簧之间的延迟。序列开始时，第一个项目会立即播放动画，第二个稍后开始，第三个再晚一些，依此类推，从而形成扇出或级联效果。

useTrail 会返回一个弹簧对象数组，序列中的每个项目对应一个对象。每个弹簧的结构都相同（键也相同），但会在不同的时间偏移后开始动画。您可以同时遍历序列数组和项目数组，为每个动画项目渲染与之对应的弹簧。

通过遍历序列数组来渲染带有交错动画的列表：trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content))。每个 animated.div 都会接收自己的弹簧对象，因此项目会按顺序播放动画。弹簧按照索引顺序运行：0、1、2、3……

useTrail 支持通过切换来控制正向和反向动画。传入布尔状态 open 来控制方向：当打开状态为 true 时，序列会从隐藏状态播放到可见状态；为 false 时，则从可见状态反向播放到隐藏状态。序列会自动反转顺序，项目会按相反的顺序退出动画（后进入的先退出）。

useTrail 的配置对象与 useSpring 相同：张力、摩擦力和质量。项目之间的延迟取决于每个弹簧开始运行所需的时间，而这由整体弹簧物理参数控制。张力更高的刚性弹簧会产生更快的交错效果；更柔和的弹簧会形成更长的级联效果。

useSpringRef() 会创建一个引用，您可以通过弹簧钩子的 ref 选项将其附加到弹簧上。该引用可以让 useChain 控制弹簧何时开始。对于希望按顺序播放的每个弹簧或序列，您都需要创建一个引用：const springRef = useSpringRef()，然后传入：useSpring({ ref: springRef, ... })。

useChain([ref1, ref2, ref3], [0, 0.5, 0.8]) 会按顺序播放多个弹簧或序列。第一个参数是 springRefs 数组，表示它们应该播放的顺序。第二个参数是一个介于 0 和 1 之间的时间戳数组，表示每个弹簧在总时长的哪个比例处开始。

在 useChain 中，像 [0, 0.5] 这样的时间戳表示：第一个弹簧在序列进行到 0% 时开始，第二个弹簧在进行到 50% 时开始。可选的第三个参数是总时长，单位为毫秒，默认值为 1000ms。因此，当时间戳为 [0, 0.5] 且总时长为 2000ms 时，第一个弹簧在 0ms 开始，第二个弹簧在 1000ms 开始。

一种常见模式是：先播放容器展开动画（使用 useSpring 控制大小），再播放容器内项目的淡入动画（使用 useTrail 控制列表）。将引用附加到两者，然后使用 useChain([sizeRef, trailRef], [0, 0.5])，让容器先展开，再在过渡到一半时让项目淡入。这样就能创建具有电影感的两阶段进入动画。

useChain 非常适合页面过渡。在页面之间导航时，可以将旧页面的退出动画与新页面的进入动画串联起来。先完成退出动画（时间戳为 0），然后开始进入动画（时间戳为 0.6）。这样可以实现平滑衔接，而不是突然切换。

useTrail 可以根据项目在序列中的位置，让项目以不同速度播放动画，从而创建视差滚动效果。序列中位置更靠后的项目会更晚开始，并且可以使用不同的配置（较低的张力），使其移动得更慢。这种基于深度的时序模拟了不同距离物体的视差效果。

useTrail(count, config) 会创建 count 个按顺序播放动画的弹簧，从而产生交错的列表进入效果。可以同时遍历序列和项目来进行渲染。useSpringRef() 会创建供 useChain 用于编排顺序的引用。useChain([ref1, ref2], [0, 0.5]) 会使用分数形式的时间戳编排多个弹簧。结合使用它们，就能实现先展开后显示等复杂的多阶段动画序列。