Question

如果光标直接悬停在运动元素上，为什么运动元素的运动会出现毛刺/重启？有什么办法可以阻止这种情况？

谢谢

var anim;
    var anim1 = document.getElementById('lottie1')
    var animation = {
        container: anim1,
        renderer: 'svg',
        loop: false,
        autoplay: false,   /*MAKE SURE THIS IS FALSE*/
        rendererSettings: {
        progressiveLoad: true},
        path: 'https://assets7.lottiefiles.com/packages/lf20_Er3Uiw.json',
        name: 'myAnimation',
    };
    anim = lottie.loadAnimation(animation);

anim.playSegments([1,70],true);

anim.addEventListener('complete', function(e) { 
    console.log('DOM loaded'); 
});

anim.addEventListener('complete', function(e) {

  var elem = document.getElementById('lottie1');

  elem.addEventListener('mouseover', mouseElem)
  elem.addEventListener('mouseleave', mouseElem2)

  function mouseElem() {
    anim.playSegments([90,112],true);
  }
    
  function mouseElem2() {
    anim.goToAndStop(70, true);
  }

});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
 <div class="waypoint" id="lottie1" class="lottie1"></div>

如果光标悬停在元素上，为什么元素的移动会出现毛刺？有什么办法可以阻止这种情况？

谢谢

如何解决Lottie动画运动故障

0 个答案: