使用 ScrollMagic 和 TimelineMax 控制 Lottie 动画答案

【问题标题】：Controlling a Lottie Animation with ScrollMagic and TimelineMax使用 ScrollMagic 和 TimelineMax 控制 Lottie 动画
【发布时间】：2019-10-24 21:00:09
【问题描述】：

我正在尝试使用 ScrollMagic 来控制移动 Lottie 动画播放头的 TimelineMax。

因此，当用户滚动时，动画会根据滚动的速度和方向播放。我离我很近，需要一点帮助才能将效果带回家。

首先，我包含我的库

<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>

那么……

  // init scrollmagic
  var controller = new ScrollMagic.Controller();

现在，动画设置...

  // Manage Animation
  var animation = bodymovin.loadAnimation({
    container: document.getElementById('lottie'), // Required
    path: '/static/animations/animation.json', // Required
    renderer: 'svg', // Required
    loop: false, // Optional
    autoplay: false, // Optional
    name: "Welcome to Awesomeness", // Name for future reference. Optional.
  });

这是我苦苦挣扎的地方：

  // Setup Timeline
  var lottieControl = new TimelineMax({ repeat: -1, yoyo: true }); // <-- don't loop and let the timeline go back and forth
  lottieControl.to({ frame:0 }, 1, { // <-- is this right? I'm telling the timeline to start at frame 0
    onUpdate:function(){
      animation.goToAndStop(Math.round(this.target.frame), true) // <-- move the playback head of the animation to the target frame that has been rounded and use frames not time (true)
    },
    ease:Linear.easeNone
  })

最后，将它们重新组合在一起......

  // Attach to scroll
  var lottieScene = new ScrollMagic.Scene({
        duration: '80%',
        offset: 1
    })
    .setPin("#header-scroll")
    .setTween(lottieControl)
    .addTo(controller);

对于我的生活，我看不出我是否正确使用了goToAndStop 方法。感谢您的宝贵时间。

【问题讨论】：

标签： javascript scrollmagic lottie bodymovin gsap

【解决方案1】：

经过数小时的测试，我找到了答案。我看错了。我需要将时间线进度与要转到的框架联系起来。在本例中，有 300 帧，因此乘以动画中的帧数。

这是修改后的代码：

<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>

<script>
  // init scrollmagic
  var controller = new ScrollMagic.Controller();

  // Manage Animation
  var animation = bodymovin.loadAnimation({
    container: document.getElementById('lottie'), // Required
    path: '/static/animations/scroll_animation.json', // Required
    renderer: 'svg', // Required
    loop: false, // Optional
    autoplay: false, // Optional
    name: "Welcome to Awesomeness",
  });

  // Setup Timeline
  var tl = new TimelineMax();
  tl.to({frame:0}, 1, {
    frame: animation.totalFrames-1,
    onUpdate:function(){
      animation.goToAndStop((Math.round(this.progress() * 300)), true)
    },
    ease: Linear.easeNone
  })


  // Attach to scroll
  var lottieScene = new ScrollMagic.Scene({
        duration: '100%',
        offset: 1
    })
    .setPin("#header-scroll")
    .setTween(tl)
    .addTo(controller);

</script>

【讨论】：