如何在成帧器运动中多次使用动画

问题描述

就像标题中一样，我试图在单击按钮时对组件进行多次动画处理。目前，动画只能运行一次，然后就不再起作用了，我该怎么实现呢？

这是我要执行的操作的示例：

const controls = useAnimation();

    const handleClick = (e) => {
        controls.start({
            rotate: "360deg",});
    };

return(
<motion.button onClick={handleClick}>Button</motion.button>
<motion.div className="someRect" animate={controls}></motion.div>
)

解决方法

说实话，我从来没有使用过useAnimation控件，所以我不知道这里发生了什么以及如何使用您的方法解决这一障碍，但是您可以通过以下方式实现自己的目标。

  <button onClick={() => setRotate((prevState) => prevState + 360)}>
    Button
  </button>
  <motion.div
    className="someRect"
    animate={{
      rotate: rotate,transition: { duration: 3 }
    }}
    style={{ width: "100px",height: "100px",background: "red" }}
  >
  </motion.div>

我知道这种解决方案并不是最佳的解决方案，因为状态会随着ich click的增长而增长到可能非常大的大小，这有时可能会引起问题。

在此CodeSanbox

中检查我的解决方案

希望有人会想出一个更优雅的解决方案，我也希望看到。