Воспроизведение анимации Lottie / Bodymovin при прокрутке веб-страницы HTML

Я искал несколько форумов в поисках решения этой проблемы - я пытаюсь закодировать несколько анимаций лотереи, которые будут воспроизводиться, когда каждая анимация входит в окно браузера на веб-странице HTML. У кого-нибудь есть рабочее решение?

Я пробовал решение с использованием Waypoint.js, но, к сожалению, мне не удалось получить больше одной анимации для игры с этим подходом. Если кто-нибудь знает, как заставить Лотти и Вэйпоинт хорошо играть вместе, я буду признателен за любые предложения.

Я открыт для любых предложений сценариев, даже если они требуют, чтобы я загружал зависимости, чтобы они работали. Любая помощь будет принята с благодарностью. Кроме того, я должен отметить, что я новичок в Lottie и я аниматор, поэтому, пожалуйста, оставьте подробные объяснения, так как я новичок в javascript.


javascript lottie bodymovin jquery-waypoints
person Jaron Johnston    schedule 12.03.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

После создания анимации используйте anim.goToAndStop(0), чтобы приостановить ее:

const animData = ... // Let's pretend that you loaded this from a .json file
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.className = 'myAnimation';

// Create the animation
const anim = lottie.loadAnimation({
  renderer: 'canvas',
  loop: true,
  autoplay: false,
  rendererSettings: {
    context: ctx,
    scaleMode: 'noScale',
    clearCanvas: true,
  },
  animationData: animData,
});

// Go to the first frame and pause
anim.goToAndStop(0);

Затем вы можете использовать что-то вроде OnScreen (https://github.com/silvestreh/onScreen), чтобы определить, когда анимация видна:

import OnScreen from 'onscreen';
const os = new OnScreen();

os.on('enter', '.myAnimation', (element, event) => {
    anim.play(); // If animation becomes visible, play it
});

os.on('leave', '.myAnimation', (element, event) => {
    anim.goToAndStop(0); // If animation goes off screen, reset it
});

Вышеупомянутое относится к одной анимации, но с некоторыми незначительными настройками его можно расширить до нескольких анимаций.

person Miles Luders    schedule 12.03.2019

arrow_upward
0
arrow_downward

Вот простое решение:

var container = document.getElementById('graph_ani'); animData = bodymovin.loadAnimation({ container: container, renderer: 'svg', autoplay: false, loop: false, path : 'graph.json' });

var animationStart = 0;
$(window).scroll(function(){
    animData.playSegments([animationStart,animationStart+1], true);
    animationStart++;
}

Можно было бы потрудиться, чтобы играть только тогда, когда он виден, и воспроизводить при прокрутке вниз и назад при прокрутке вверх, но работает довольно хорошо для быстрого фрагмента.

person MomasVII    schedule 24.01.2020