В чем разница между Lottie Events и Lottie EventListeners и как использовать? - PullRequest
Новая
       27

В чем разница между Lottie Events и Lottie EventListeners и как использовать?

0 голосов
/ 23 апреля 2019

В документации есть как Event, так и EventListeners.Я могу заставить EventListeners срабатывать, но у Событий нет достаточной документации, чтобы начать работу.В чем разница и как вы используете?Спасибо.

https://github.com/airbnb/lottie-web#events

События (Не работают, как использовать?)

// Из документации

  • onComplete
  • onLoopComplete
  • onEnterFrame
  • onSegmentStart

Вы также можете использовать addEventListener со следующими событиями:

  • complete
  • loopComplete
  • enterFrame
  • сегментStart
  • config_ready (когда начальная настройка завершена)
  • data_ready (когда все части анимации имеютбыл загружен)
  • data_failed (когда часть анимации не может быть загружена)
  • loaded_images (когда все загрузки изображений были либо успешными, либо ошибочными)
  • DOMLoaded (когда элементы имеютбыло добавлено в DOM)
  • destroy

// Конец документации

При стандартном использовании addEventListener это работает ... 

birbSequence.addEventListener('loopComplete', (e) => {
    console.log(e);
});

хотя 'complete' не срабатывает.

Но попробовать что-то в таких событиях, как onEnterFrame? 

var birbSequence = lottie.loadAnimation({
    container: bodyMovinContainer1,
    loop: true,
    renderer: 'svg',
    path: 'Birb Sequence 1.json',
    onEnterFrame: function(e) { console.log(e); }
});

Я действительно новичок в использовании Lottie, хотя могу использовать некоторую помощь.

Просто хочу узнать, как использовать События

1 Ответ

0 голосов
/ 12 июня 2019

Вы можете использовать метод addEventListener для прослушивания всех событий вместо * перехвата событий серии *. 

const options = {
  container: '#container',
  loop: false,
  autoplay: false,
  renderer: 'svg',
  rendererSettings: {
  scaleMode: 'noScale',
    clearCanvas: false,
    progressiveLoad: true,
    hideOnTransparent: true,
  },
};

try {
  const anim = lottie.loadAnimation({ ...options, path: 'URL_TO_JSON' });

  anim.addEventListener('complete', () => { console.log('complete'); });
  anim.addEventListener('loopComplete', () => { console.log('loopComplete'); });
  anim.addEventListener('data_ready ', () => { console.log('data_ready'); });
  anim.addEventListener('data_failed', () => { console.log('data_failed'); });
  anim.addEventListener('enterFrame', () => {
    console.log('enterFrame', anim.currentFrame);
  });
  // etc ...
} catch (error) 
  console.log('error loading anim');
}

Надеюсь, это поможет!

...