使用Bodymovin和Scrollmagic在滚动时设置动画

Question

我将Bodymovin与ScrollMagic和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);

你知道是什么原因造成的吗？查看浏览器的Inspect元素，它基本上将display:block添加到应该是当前可见的图像，并将display:none应用到前一个图像，但最后，它们都有display:none，并且它不会保持可见

Answer 1

正如扎克指出的那样，解决了，我尝试了Math.floor，一开始没有帮助，但后来我尝试将animation.goToAndStop((Math.floor(this.progress() * 60)), true)调整为* 59 (比总帧数少了一帧，现在它完美地工作了。奇怪的是，带有* total frame count甚至* total frames - 1的Math.round都不能工作。