Question

很抱歉，这似乎是一个显而易见的答案，但是我正在尝试创建类似于this的动画。我正在尝试使用react-three-fiber-fiber创建一个类似的文件，但是我不能使用文档中显示的文件，因为它们操作的是3.js无法实现的样式转换属性。我试图通过position属性和props来操纵它，但是它带有一个错误，如here所示，我真的不知道从哪里开始解决这个问题。这是我的代码：

const props = useSpring({
    to: async next => {
      await next({ position: [100, 100, 100] });
      await next({ position: [50, 50, 50] });
    },
    from: { position: [100, 100, 100] },
    config: { duration: 3500 },
    reset: true
  });

 return (
    <Canvas>

      <a.group {...props}>
        <Box position={[-1.2, 0, 0]} />
        <Box position={[1.2, 0, 0]} />
      </a.group>
    </Canvas>

)

我已经成功地使用了react-spring进行悬停和缩放，但是在使用位置时它不起作用。

Answer 1

我认为最好用三角函数来完成

const ref = useRef()
useFrame(() => {
  ref.current.position.y = Math.sin(state.clock.getElapsedTime()) * 10
})
return <group ref={ref}> ...

Math.sin将产生一个介于-1到1之间的值，并且在两者之间平滑交替。乘以您的因子（距离）即可。这是一个像这样的摄影机的例子：https://codesandbox.io/s/r3f-lod-e9vpx

否则，它是反应弹簧/三个，而不是反应弹簧：https://codesandbox.io/s/clever-bartik-tkql8

用反应弹簧动画反应三纤维

1 个答案: