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

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

​

​