Воспроизведите анимацию Lottie / Bodymovin при прокрутке на веб-странице HTML - PullRequest
Новая
       31

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

0 голосов
/ 13 марта 2019

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

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

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

1 Ответ

1 голос
/ 13 марта 2019

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

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

...