Блог

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

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

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

После создания анимации используйте 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);
  

Затем вы можете использовать что-то вроде экранного (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
});

  

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

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

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  ;
}
  

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