Framer 运动不循环

Question

我正在尝试在一小段延迟后使用 Framer Motion 库循环播放动画。动画本身将在加载时播放，在网页刷新时播放，但不会重复播放。我查看了文档，这似乎是类似的语法。

const AnimateTrial = {
  initial: {
    opacity: 0,
    x: -100,
    y: -35,
    scale: 0.9,
  },
  animate: (i) => {
    const delay = 5 + i * 0.5;
    return {
      opacity: 1,
      x: -10,
      y: -35,

      transition: {
        opacity: { delay, duration: 1.5 },
        x: { delay, duration: 1.5},
        repeatType: "Infinity",
        repeatDelay: 5,
      },
    };
  }

我也试过通过：

transition={{ repeat: Infinity, repeatDelay: 5 }}

但我还没有让它工作。任何想法！

我可以确认动画的其余部分有效，但它没有循环。

Answer 1

由于从未关注过 transition 嵌套在 animate 函数中的对象，我不得不将其用于代码沙箱。

我自己是 Framer Motion 的新手，但有很多事情让我觉得很奇怪，我将如何解决它们：

为 transition 内的多个属性设置持续时间。我不认为这是受支持的功能，因此我将其移至此答案，因为您的 opacity 和 x 属性共享相同的 duration.

transition: {
    duration: 1.5,
    opacity: delay,
    x: delay,
    repeatType: "Infinity",
    repeatDelay: 5
}

设置 repeatType 而不设置 repeat 将不会循环播放动画。设置 repeat: Infinite 将 (and you can drop the repeatType).

transition: {
    duration: 1.5,
    opacity: delay,
    x: delay,
    repeat: Infinity,
    repeatDelay: 5
}

请注意，我们仍然没有重复动画。

将动画用作函数。我不确定，但我认为整个函数可能只会被评估一次并立即被丢弃。我相信 Framer Motion 第二次查看 delay 值时失败了，因此没有为特定的属性设置动画。（我也不确定您在 x 和 opacity 属性中使用 delay 试图达到什么目的。）

如果我们将或 opacity 或 x 更改为使用 0 而不是 delay 作为值，您可以看到它会按预期运行 - 而未更改的属性仅动画一次。同时更改它们将显示您正在寻找的循环行为：

transition: {
    duration: 1.5,
    opacity: 0,
    x: 0,
    repeat: Infinity,
    repeatDelay: 5
}

因此，我们得到了最终代码：

const AnimateTrial = {
  initial: {
    opacity: 0,
    x: -100,
    y: -35,
    scale: 0.9
  },
  animate: (i) => {
    const delay = 5 + i * 0.5; // (now unused)
    return {
      opacity: 1,
      x: -10,
      y: -35,

      transition: {
        duration: 1.5,
        opacity: 0,
        x: 0,
        repeat: Infinity,
        repeatDelay: 5
      }
    };
  }
};

Here's a live demo 展示工作动画循环。（出于测试速度的目的，我将 repeatDelay 更改为 1）。

Framer 运动不循环

Framer Motion Does not Loop

css

animation