Bodymovin loopオンデマンドのセグメント

Question

私はイントロアニメーション[0,20]が描かれているいくつかのアイコンと、アイコンの上にマウスを置いたときのループアニメーション[21,100]を持っています。 loopをtrueに設定すると、私のすべてのセグメントが私の望むものではないループになり、ループするセグメントのうちの1つだけが必要になります。とにかくこれを行う？ここで

は、私は私のコードを設定しているかの例です：

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

最終的な答えの編集：私はそれがだと思ったので、私の実装では、触発されたが、正解とは少し異なった

言及する価値がある。私は基本的に同じアニメーションを2つの要素にロードします。 2つの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 
});