使用Bodymovin和Scrollmagic进行滚动动画

使用Bodymovin和Scrollmagic进行滚动动画

我正在将Bodymovin与ScrollMagic和GSAP结合使用以在前后滚动图像时对一系列图像进行动画处理。一切都很好，除了，当我到达终点时，它不会停留在最终图像上，而是变成白色。

我首先加载的库：

<script src=".5.9/lottie.min.js"></script>
<script src=".1.3/TweenMax.min.js"></script>
<script src=".0.7/ScrollMagic.js"></script>
<script src=".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，并且不会停留可见

回答如下：

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

使用Bodymovin和Scrollmagic进行滚动动画

我正在将Bodymovin与ScrollMagic和GSAP结合使用以在前后滚动图像时对一系列图像进行动画处理。一切都很好，除了，当我到达终点时，它不会停留在最终图像上，而是变成白色。

我首先加载的库：

<script src=".5.9/lottie.min.js"></script>
<script src=".1.3/TweenMax.min.js"></script>
<script src=".0.7/ScrollMagic.js"></script>
<script src=".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，并且不会停留可见

回答如下：

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