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
});

Answer 2

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

Bodymovin 按需循环一段

Bodymovin loop a segment on demand

javascript

bodymovin