如何使用 javascript 使用户只能在 Lottie 动画完整播放后触发悬停事件？

Question

一旦 Lottie 动画最初完整播放，我怎样才能让用户只能触发鼠标悬停和鼠标左移事件。

目前，用户可以在动画播放到一半时触发悬停事件，这是我不希望发生的事情。

谢谢

var anim4;
    var anim5 = document.getElementById('lottie5')
    var animation5 = {
        container: anim5,
        renderer: 'svg',
        loop: true,
        autoplay: false,   /*MAKE SURE THIS IS FALSE*/
        rendererSettings: {
        progressiveLoad: false},
        path: 'https://assets1.lottiefiles.com/packages/lf20_H2PpYV.json',
        name: 'myAnimation',
    };
    anim4 = lottie.loadAnimation(animation5);


    // SCROLLING DOWN
    var waypoint5 = new Waypoint({
     element: document.getElementById('lottie5'),
     handler: function(direction) {
       if (direction === 'down') {
         anim4.playSegments([[130,447],[358,447]], true);
         this.destroy()
       }
     },
       offset: '50%'
    })

    anim5.addEventListener("mouseenter", myScript1);
    anim5.addEventListener("mouseleave", myScript2);

function myScript1(){
    anim4.goToAndStop(500, true);
}

function myScript2(){
    anim4.playSegments([358,447],true);
};

Answer 1

    var anim4;
    var anim5 = document.getElementById('lottie5')
    var animation5 = {
        container: anim5,
        renderer: 'svg',
        loop: false,
        autoplay: true,   /*MAKE SURE THIS IS FALSE*/
        rendererSettings: {
        progressiveLoad: false},
        path: 'https://assets1.lottiefiles.com/packages/lf20_H2PpYV.json',
        name: 'myAnimation',
    };
    anim4 = lottie.loadAnimation(animation5);


    // SCROLLING DOWN
    var waypoint5 = new Waypoint({
     element: document.getElementById('lottie5'),
     handler: function(direction) {
       if (direction === 'down') {
         anim4.playSegments([[130,447],[358,447]], true);
         this.destroy()
       }
     },
       offset: '50%'
    })

    anim4.addEventListener("complete", function(){
        console.log('Animation completed!!');
        anim5.addEventListener("mouseenter", myScript1);
        anim5.addEventListener("mouseleave", myScript2);
    });

function myScript1(){
    anim4.goToAndStop(500, true);
}

function myScript2(){
    anim4.playSegments([358,447],true);
};

Answer 2

弄清楚以防有人感兴趣。这可能不是最有效的方法，但对我有用！

anim4.addEventListener('complete', function(e) { 
    console.log('Animation completed'); 
});

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

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

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

  function mouseElem() {
    anim4.goToAndStop(150, true);
  }

  function mouseElem2() {
    anim4.goToAndStop(30, true);
  }

如何使用 javascript 使用户只能在 Lottie 动画完整播放后触发悬停事件？

How can I use javascript to make it so the user can only trigger the hover event once the Lottie animation has played in full?

javascript

animation

hover

mouseevent

lottie