0

我将 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，并且它不会保持可见

4

1 回答 1

0

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

于 2020-04-29T18:18:38.563 回答