Bodymovin循环按需提供段

Question

我有几个图标，当它们悬停在图标上时，它们有一个介绍动画[0,20]，以及一个循环动画[21，100]。将loop设置为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 
});