Question

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

这是演示（鼠标红色球）： 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钩子中添加[mousedown]依赖项参数。

使用react-spring usesprings挂钩的动画元素

1 个答案: