GSAP / TweenMax отключают анимацию рабочего стола на мобильном телефоне и наоборот, а также сбрасываются при изменении размера - PullRequest
Новая
       77

GSAP / TweenMax отключают анимацию рабочего стола на мобильном телефоне и наоборот, а также сбрасываются при изменении размера

0 голосов
/ 31 марта 2020

Я использую GSAP / Tweenmax для некоторых анимаций, и я очень близок к тому, где я хочу, чтобы анимации были. У меня есть две разные временные шкалы - одна для мобильных устройств, другая для настольных компьютеров. Как я могу убедиться, что каждый из них играет относительно ширины окна, а также если размер экрана будет изменен до конечного состояния каждой анимации. Я попытался использовать некоторые вызовы изменения размера ширины окна, но теперь анимация воспроизводится каждый раз, когда ширина браузера вообще изменяется, и я понимаю, почему с тем, как я вызываю функции, каков наилучший способ сделать это? Спасибо! :)

js: 

 $(function () {


    function animations() {
      if ($(window).width() > 768) {
        heroAnimation.play(0);
      }   else {
        heroAnimation.pause(0);
      }
    }

    function animationsMobile() {
      if ($(window).width() <= 767) {
        heroAnimationMobile.play(0);
      }   else {
        heroAnimationMobile.pause(0);
      }
    }

    $(window).resize(animations);
    animations();

    $(window).resize(animationsMobile);
    animationsMobile();

  });

1 Ответ

1 голос
/ 31 марта 2020

Вы должны следить за состоянием и перезапускать анимацию, только если состояние меняется. Также используйте только одну функцию, нет необходимости в двух: 

var state = "";
function animations() {
  var newState = state;
  if (innerWidth > 768) {
    newState = "big";
  } else {
    newState = "small";
  }

  if(newState !== state) {
    if(newState === "big") {
      heroAnimation.play(0);
      heroAnimationMobile.pause(0);
    } else {
      heroAnimation.pause(0);
      heroAnimationMobile.play(0);
    }

    state = newState;
  }
}

document.addEventListener("resize", animations);
animations();

Кстати, вы должны полностью использовать GSAP 3 ! Он имеет меньший размер файла, более изящный API и множество новых функций!

Кроме того, вы с большей вероятностью получите еще более быстрый отклик и дополнительную информацию на форумах GreenSock .

...