如何使用反作用弹簧创建从右到左的反向运动图像

Question

有人能帮我解决这个问题吗？我需要在我的react项目上制作带有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);
      }
})

返回<animated.img img className=｛classes.fishPicture｝style=｛styles｝src=｛fishOne｝alt="鱼/>

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