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

Question

有人可以帮我解决我的问题吗？我需要在我的反应项目中使用 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);
      }
})

return <animated.img img className={classes.fishPicture} style={styles} src={fishOne} alt="fish"/>

Answer 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