3

我有几个图标，它们有一个介绍动画 [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 以获得悬停效果！所以我发现没有必要回到我的动画师那里并要求他们将动画分割成不同的文件。

4

2 回答 2

3

您需要将动画分成 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
});
于 2017-08-14T14:16:31.977 回答
0

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

截屏

于 2018-07-04T01:59:01.880 回答