在初始动画后反转 react-spring-three 调用

Question

在将动画放置在场景中后，我无法找到一种正确的方法来反转我的动画。基本上类似于前奏和结尾效果。

useTransition

似乎没有按照我想要的方式工作。任何想法将不胜感激！

当前

useSpring

功能

  const [springs, api] = useSpring(() => ({
        from: { progress: 0.95 },
        to: { progress: 0.0 },
        config: { duration: 4000, easing: t => t * t * (3 - 2 * t), friction: 100, precision: 0.0001 },
        onStart: () => {
            ref.current.geometry.center()
        },
        onChange: ({ value }) => {
            if (value.progress < 0.10) {
                api.start({
                    progress: 0.0,
                    config: { duration: 14000, easing: t => t * t * (3 - 2 * t), friction: 100, frequency: 0.5, damping: 0.1, precision: 0.0001 },

                })
            }
        },
        onResolve: () => {
            ref.current.geometry.center()
        },
    }), []);

我试图修改我的函数，以在我的

to

属性中包含一个位置数组。它确实反转了动画，但是

onChange

抛出错误，所以试图让它们一起工作一直是个问题