javascript - 如何使用 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);
}; 

标签： javascriptanimationhovermouseeventlottie

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