Блог

Итак, я создал пользовательскую анимацию Лотти и импортировал ее в свой проект Nuxt. Каков наилучший способ управления анимацией при прокрутке? У компонента есть атрибут @AnimControl, но я не могу понять, как его использовать.

Ну, я решил это, и если у кого-то есть такая же проблема, вот как я это сделал:

Я в основном использовал 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);
            });
        }
    },
 

Я вызвал этот метод animate в mounted, а также привязал его к компоненту lottie с помощью другого метода.