滚动时触发 Lottie 动画

Question

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

Answer 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 组件上。

滚动时触发 Lottie 动画

Trgger Lottie animation on scroll

javascript

vue.js

nuxt.js

lottie