Запуск анимации Лотти на Scroll

Question

В настоящее время я создаю веб-сайт с использованием полноразмерной анимации js и lottie. Теперь я пытаюсь запустить анимацию, когда пользователь прокручивает раздел с анимацией. Вот что я попробовал: (пожалуйста, обратите внимание, что я очень плохо знаком с 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);

Answer 1

Вы должны использовать обратные вызовы 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.

Answer 2

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

Я в основном проверяю, какая часть объектов анимации видна в окне просмотра, вычисляю общую длину анимации (в кадрах) и затем проецирую процентное значение на кадр, в котором я иду 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()
});