在滚动时触发 Lottie 动画答案

【问题标题】：Trgger Lottie animation on scroll在滚动时触发 Lottie 动画
【发布时间】：2020-11-29 00:51:54
【问题描述】：

所以我制作了一个自定义的抽签动画并将其导入到我的 Nuxt 项目中。控制滚动动画的最佳方法是什么？该组件有一个@AnimControl 属性，但我不知道如何使用它。

【问题讨论】：

我指的组件是“”

【解决方案1】：

好吧，我解决了，如果有人遇到同样的问题，我就是这样做的：

我基本上是同时使用了 ScrollMagic 和 vue-lottie 库。

            animate(){
            const valSect = this.$refs.valueSection;
            //SCROLLMAGIC
            const controller = new this.$scrollmagic.Controller();
            const scene = new this.$scrollmagic.Scene({
                duration:9000,
                triggerElement:valSect,
                triggerHook:0
            })
            .setPin(valSect)
            .addTo(controller);         
            
            let scrollpos = 0; //SCROLL POSITION TRACKER
            
            //SCROLL LISTENER
            scene.on('update', e => {
                scrollpos=e.scrollPos/this.anim.totalFrames;
                
            })

            setInterval(() => {
                //delay += (scrollpos - delay) * accelAmount;
                this.anim.goToAndStop(scrollpos,true);
            });
        }
    },

我在mounted中调用了这个animate方法，并通过另一种方法将它绑定在lottie组件上。

【讨论】：