使用 ScrollMagic 和 TimelineMax 控​​制 Lottie 动画

Question

我正在尝试使用 ScrollMagic 来控制一个 TimelineMax，它移动 Lottie 动画的播放头。因此，当用户滚动时，动画会根据滚动的速度和方向播放。我非常接近，需要一点帮助才能将效果带回家。首先，我包括我的图书馆<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正确使用了该方法。谢谢你的时间。

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