React-three-fiber, useSpring - 运行 2个不同的动画在一个元素上一个接一个

Question

我在三纤方面很新，反应springs，我有点问题...

我正在尝试使用 onClick 为我的立方体设置动画，使其向上然后向右移动，如下所示：brief explanation in image。 但是我想不出在 animation1 之后制作 animation2 运行 的任何方法：what my cube is doing image

如果可以用 React spring 做到这一点，怎么做？非常感谢。

Link 到 codesandbox: https://codesandbox.io/s/silly-lovelace-y8tjt?file=/src/Logo.js

注意：我使用的是旧版本的 react-spring@8.0.27 和 react-three-fiber@5.3.1

Answer 1

您必须创建一个“序列”，或者文档如何称呼它：script (https://react-spring.io/hooks/use-spring#this-is-how-you-create-a-script)

在您的代码中，修改动画：

const animation1 = useSpring({
    to: async (next) => {
      if (clicked) {
        await next({ position: [0, 1, 0] }),
        await next({ position: [0, 1, 2] });
      }
    },
    from: {
      position: [0, 0, 0]
    }
  });