使用 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>&nbsp; // init scrollmagic&nbsp; var controller = new ScrollMagic.Controller();&nbsp; // Manage Animation&nbsp; var animation = bodymovin.loadAnimation({&nbsp; &nbsp; container: document.getElementById('lottie'), // Required&nbsp; &nbsp; path: '/static/animations/scroll_animation.json', // Required&nbsp; &nbsp; renderer: 'svg', // Required&nbsp; &nbsp; loop: false, // Optional&nbsp; &nbsp; autoplay: false, // Optional&nbsp; &nbsp; name: "Welcome to Awesomeness",&nbsp; });&nbsp; // Setup Timeline&nbsp; var tl = new TimelineMax();&nbsp; tl.to({frame:0}, 1, {&nbsp; &nbsp; frame: animation.totalFrames-1,&nbsp; &nbsp; onUpdate:function(){&nbsp; &nbsp; &nbsp; animation.goToAndStop((Math.round(this.progress() * 300)), true)&nbsp; &nbsp; },&nbsp; &nbsp; ease: Linear.easeNone&nbsp; })&nbsp; // Attach to scroll&nbsp; var lottieScene = new ScrollMagic.Scene({&nbsp; &nbsp; &nbsp; &nbsp; duration: '100%',&nbsp; &nbsp; &nbsp; &nbsp; offset: 1&nbsp; &nbsp; })&nbsp; &nbsp; .setPin("#header-scroll")&nbsp; &nbsp; .setTween(tl)&nbsp; &nbsp; .addTo(controller);</script>