Использование Bodymovin и Scrollmagi c для анимации при прокрутке - PullRequest
Новая
       50

Использование Bodymovin и Scrollmagi c для анимации при прокрутке

0 голосов
/ 29 апреля 2020

Я использую Bodymovin в сочетании со ScrollMagi c и GSAP, чтобы анимировать серию изображений при прокрутке назад и вперед. Все отлично работает, кроме того, что когда я дохожу до конца, оно не остается на конечном изображении, а становится белым.

Библиотеки, которые я загружаю сначала: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>

Затем мой код: 

var controller = new ScrollMagic.Controller();
var animation = bodymovin.loadAnimation({
  container: document.getElementById('hero-anim'),
  animationData: animationframes,
  renderer: 'svg',
  autoplay: false,
});
var tl = new TimelineMax();
tl.to({frame:0}, 1, {
  frame: animation.totalFrames-1,
  onUpdate:function(){
    animation.goToAndStop((Math.round(this.progress() * 60)), true)
  },
  ease: Linear.easeNone
})
var lottieScene = new ScrollMagic.Scene({
  duration: '100%',
  offset: 600
})
.setPin("#hero-anim")
.setTween(tl)
.addTo(controller);

Есть идеи, что может быть причиной этого? Глядя на элемент проверки браузера, он в основном добавляет display:block к изображению, которое должно быть видимым в данный момент, и применяет display:none к предыдущему изображению, но в конце все они имеют display:none, и оно не остается виден

1 Ответ

0 голосов
/ 29 апреля 2020

RESOLVED Как указал Зак, я попробовал Math.floor, и сначала это не помогло, но потом я попытался настроить animation.goToAndStop((Math.floor(this.progress() * 60)), true) на * 59 (на один кадр меньше, чем общее количество кадров и теперь это работает, отлично. Math.round с * total frame count или даже * total frames - 1 не работает, как ни странно.

...