Bodymovin按需循环一段

Question

我有几个图标有一个介绍动画[0,20]，它们被绘制出来，循环动画[21,100]用于将鼠标悬停在图标上。将循环设置为true将使我的所有段循环不是我想要的，我只需要其中一个段循环。无论如何这样做？

以下是我如何设置代码的示例：

var data = {
          container: el,
          renderer: 'svg',
          loop: false,
          autoplay: false,
          path: 'data.json'
        };

var anim = bodymovin.loadAnimation(data);

anim.addEventListener('DOMLoaded', function(e) {
        anim.playSegments([0,20], true); // run intro animation
});

el.addEventListener('mouseover', function(e) {
        anim.playSegments([21,100], true); // run loop animation
});

最终答案编辑：

我的实施受到了启发，但与正确答案略有不同，所以我认为值得一提。我基本上将相同的动画加载到两个放在彼此顶部的元素中。两个DOM元素通过CSS切换为默认和悬停模式。唯一的区别是我操纵数据对象并将循环更改为true以用于悬停效果！所以我发现没有必要回到我的动画师并要求他们将动画分成不同的文件。

Answer 1

您需要将动画拆分为2个文件，例如简介和悬停。这使您能够控制要循环的部分。

所以介绍文件可能是：

var dataIntro = {
      container: el,
      renderer: 'svg',
      loop: false,
      autoplay: false,
      path: 'dataintro.json'
    };

var animIntro = bodymovin.loadAnimation(dataIntro);

animIntro.addEventListener('DOMLoaded', function(e) {
    animIntro.playSegments([0,20], true); // run intro animation
});

并重复dataHover文件：

var dataHover = {
      container: el,
      renderer: 'svg',
      loop: true,
      autoplay: false,
      path: 'datahover.json'
    };

var animHover = bodymovin.loadAnimation(dataHover);

el.addEventListener('mouseover', function(e) {
    animHover.playSegments([0,79], true); // run loop animation
});

Answer 2

我认为这是允许您拆分动画的设置：