Запуск анимации Lottie при прокрутке

В настоящее время я создаю веб-сайт, используя полностраничные js и анимацию лотереи. Теперь я пытаюсь запустить анимацию, когда пользователь прокручивает раздел с анимацией. Вот что я пробовал: (обратите внимание, что я новичок в js)

$(document).ready(function($) {'use strict';

$('#fullpage').fullpage({
sectionsColor: ['white', '#004E8A', 'white','#004E8A', 'white', '#004E8A', 
'white','#004E8A', 'white'],
anchors:['startseite','pers_vermittler','team','konzept','rechner','mod_portfolio','sicherheit','absatz'],

onLeave: function(index, nextIndex, direction) {
    if( index == 3 && direction == 'down' ) {
    lottie.play('k2an');
  }

(в конце основной части ->)

<script>
var params = {
    container: document.getElementById('k2an'),
    renderer: 'svg',
    loop: true,
    autoplay: false,
    path: 'k2an.json',
};

anim = lottie.loadAnimation(params);


lottie fullpage.js bodymovin
person Enrico Bühler    schedule 23.04.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны использовать обратные вызовы fullPage.js для запуска JS-анимации.

См. Пример:

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterLoad: function(anchorLink, index){
        var loadedSection = $(this);

        //using index
        if(index == 3){
            alert("Section 3 ended loading");
        }

        //using anchorLink
        if(anchorLink == 'secondSlide'){
            alert("Section 2 ended loading");
        }
    }
});

Не стесняйтесь также проверить мой видеоурок о том, как создавать анимацию с помощью классы состояний fullPage.js.

person Alvaro    schedule 24.04.2018
comment
Да, я понимаю, но не могу найти способ вызвать свою функцию, которая запускает анимацию. Просто как-то не работает - person Enrico Bühler; 25.04.2018

arrow_upward
-1
arrow_downward

Прямо сейчас я использую этот подход на нескольких производственных площадках. Он воспроизводит анимацию по мере того, как пользователь прокручивает.

Я в основном проверяю, какая часть окна объектов анимации отображается в окне просмотра, вычисляю общую длину анимации (в кадрах), а затем проецирую процентное значение на кадр, в котором я gotoAndStop ().

var anim = <YOUR LOTTIE ANIMATION OBJECT>

// play around with these
var speed = 1; // speed of animation
var scrollOffset = 0; // start animation sooner / later

function scrollHandler() {
            if (!anim.isLoaded) return;
            p = percentageSeen(e) / 100 - (scrollOffset || 0);
            if (p <= 0 || p >= 1) return

            var length = anim.totalFrames / anim.frameModifier;
            var pos = length * p * (speed || 1);
            anim.goToAndStop(pos);
}

$(window).on('scroll', scrollHandler);




/**
 * returns percentage of scrolling element through viewport
 * 0% until element-middle is at bottom of viewport
 * 100% if element-middle is at top of viewport
 *
 * @param id
 * @returns {number}
 */
function percentageSeen(idOrElement) {
    var $element;

    if (typeof idOrElement === 'object') {
        $element = idOrElement;
    } else {
        $element = $('#' + id);
        if (!$element[0]) return 0;
    }

    var $win = $(window), viewportHeight = $(window).height(),
        scrollTop = $win.scrollTop(),
        elementOffsetTop = $element.offset().top,
        elementHeight = $element.height();


    if (elementOffsetTop > (scrollTop + viewportHeight)) {
        return 0;
    } else if ((elementOffsetTop + elementHeight) < scrollTop) {
        return 100;
    } else {
        var distance = (scrollTop + viewportHeight) - elementOffsetTop - (elementHeight / 2);
        if (distance < 0) return 0;
        var percentage = distance / (viewportHeight / 100);
        if (percentage > 100) return 100;
        return percentage;
    }
}

Если вы хотите только запустить анимацию и позволить ей запускаться (независимо от дальнейшего поведения пользователя при прокрутке), просто используйте плагин jquery inview, отключите автовоспроизведение анимации и один раз активируйте play (), например это:

$(".animation-container").one("inview", function() { 
    anim.play()
});

person Thomas    schedule 01.05.2018