Управление анимацией Lottie с помощью ScrollMagic и TimelineMax - PullRequest
Новая
       104

Управление анимацией Lottie с помощью ScrollMagic и TimelineMax

0 голосов
/ 25 октября 2019

Я пытаюсь использовать ScrollMagic для управления 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 или нет. Спасибо за ваше время.

1 Ответ

0 голосов
/ 28 октября 2019

После нескольких часов тестирования я нашел ответ. Я смотрел не на ту вещь. Мне нужно было привязать прогресс по срокам к тому кадру, к которому нужно идти. В этом случае есть 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>
...