如何使用react-spring从右到左反向创建运动图像？

【问题标题】：How to create moving image from right to left with reverse using react-spring?如何使用react-spring从右到左反向创建运动图像？
【发布时间】：2021-07-22 17:03:42
【问题描述】：

有人可以帮我解决我的问题吗？我需要在我的反应项目中使用 png 图像制作动画。我的img必须在自己的街区从右到左移动，在右侧和左侧的末端反向。我编写了一部分代码，但不明白如何进行反向操作？我使用反应弹簧。 const [key, setKey] = useState(1);

const styles = useSpring({
    from: { transform: "translate(50%,0)" },
    to: { transform: "translate(-50%,0)" },
    config: { duration: 4000 },
    reset: true,
    reverse: key % 2 == 0,
    onRest: () => {
        setKey(key + 1);
      }
})

【问题讨论】：

标签： reactjs animation jsx react-spring react-animations

【解决方案1】：

您可以使用to 键的数组版本将动画带回原始位置，然后将其与loop: true 结合起来

  const styles = useSpring({
    from: { transform: "translate(50%,0)" },
    to: [{ transform: "translate(-50%,0)" }, { transform: "translate(50%,0)" }],
    config: { duration: 500 },
    loop: true
  });

这是我创建的一个工作示例：https://codesandbox.io/s/react-spring-looping-tranform-animation-tgb7z

【讨论】：

我可以让这个动画像块中一样随机吗？
块内随机是什么意思？
我的意思是随机的动画方式。不仅有两种方式。我可以使用这个库吗？
啊。我只是更新沙盒以随机移动盒子。这里的关键是在 spring 中传递一个函数作为 to 键。
非常感谢！你是最棒的）