滚动时使用 Bodymovin 和 Scrollmagic 制作动画答案

【问题标题】：Using Bodymovin and Scrollmagic to animate as you scroll滚动时使用 Bodymovin 和 Scrollmagic 制作动画
【发布时间】：2020-04-29 17:28:40
【问题描述】：

我将 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 Element，它基本上将display:block添加到应该当前可见的图像并将display:none应用于前一个图像，但最后它们都有display:none，它不会留下可见

【问题讨论】：

试试 Math.floor 而不是 Math.round。
不幸的是没有帮助，完全相同的行为：/

标签： javascript gsap bodymovin

【解决方案1】：

已解决 正如 Zach 指出的那样，我尝试了 Math.floor，起初它没有帮助，但后来我尝试将 animation.goToAndStop((Math.floor(this.progress() * 60)), true) 调整为 * 59（比总帧数少一帧，现在它可以正常工作了。Math.round奇怪的是，* total frame count 甚至 * total frames - 1 都不起作用。

【讨论】：