reactjs - 使用 react-spring usesprings hook 动画元素

Question

尝试将一堆对象设置为动画到它们的位置，并且 useSpring 对我有用（对于单个元素），但 useSprings 不适用于 3 个对象。

这是演示（mousedown 红球）： https ://codesandbox.io/s/try-to-do-zgit5?file=/src/App.js:1254-1857

这是代码：

  // working for me
  const { z } = useSpring({
    from: { z: 0 },
    to: { z: mousedown ? 0 : -0.5 }
  })
  // not working with state change
  // although working with a 
  // loop: { reverse: true, delay: 0 },
  // but not accounting state changes
  const [springs] = useSprings(3, (i) => ({
    from: { x: 0, y: i * 2 - 2 },
    to: { x: mousedown ? 0.5 : -0.5, y: i * 2 - 2 + 1 },
  }))

和元素：

// works
<a.mesh position-z={z} 
    onPointerDown={(e) => setMousedown(true)} 
    onPointerUp={(e) => setMousedown(false)}>...</a.mesh>

// not changing positions with state
{springs.map(({ x, y }, index) => (
     <a.mesh position-x={x} position-y={y} key={`0${index}`}>...</a.mesh>
))}
      

作为 react-spring 的新手，这可能是一个可笑的简单问题，但我现在自己也坚持了下来

Answer 1

在这个沙箱https://codesandbox.io/s/try-to-do-forked-gwy21?file=/src/App.js中解决了对 Paul Henschel 的thanx 问题，useSprings需要向 hook添加 [mousedown] 依赖参数。