框架运动中无限循环中两个元素之间的交替

Question

我有一个动画包含一个svg元素，旋转，然后改变颜色在旋转。我想要的是，在第二次旋转时，它消失了，一个新的svg图像占据了它的位置，然后同样的事情发生在相反的地方。所以，假设我有SvgA和SvgB，我想让SvgA旋转，然后等待，再旋转，当旋转结束时，SvgB应该在无限循环上做同样的事情。

动画可以无限地使用转换，但这只适用于单个组件。我想我可以使用AnimatePresence和AnimateSharedLayout在组件之间交换，但是我不知道如何在无限循环中“切换”它们。

也许只要组件存在，我就可以使用变体+动画控件和无限异步循环来运行它们，但我不知道如何编排它。

这就是我到目前为止拥有的动画：

// primary and secondary are defined colors
  const animation = {
    scale: [1, 2, 2, 1, 1],
    rotate: [0, 0, 360, 360, 0],
    color: [primary, primary, secondary, secondary, primary],
  };

const transition = {
  duration: 2,
  ease: "easeInOut",
  times: [0, 0.2, 0.5, 0.8, 1],
  loop: Infinity,
  repeatDelay: 1,
};

      <motion.div animate={animation} transition={transition}>
        <IconA className={css.icon} />
      </motion.div>

Answer 1

这将确保元素将永远在动画中循环。