Сочетание видимости окна просмотра с DrawSVG - PullRequest
Новая
       103

Сочетание видимости окна просмотра с DrawSVG

0 голосов
/ 28 мая 2018

Итак, я пытался выполнить анимацию DrawSVG, когда она была видна в окне просмотра, и наткнулся на этот средний пост .Я пытался заставить это работать для моего собственного кода, но я столкнулся с проблемой, когда пути исчезают, когда окно прокручивается или изменяется.Вот код, с которым я работаю.Любая помощь?

$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).on('resize scroll', function() {
        TweenMax.from('#bstem', .1, {drawSVG: '0'}, {ease: Power3.easeIn});
        TweenMax.from('#beth', 1, {drawSVG: '0'}, {ease: Power3.easeIn}).delay(.1);
        TweenMax.from('#jacobs', 1.25, {drawSVG: '0'}, {ease: Power3.easeIn}).delay(.9);
});

https://jsfiddle.net/benhullinger/ptpjn9rg

1 Ответ

0 голосов
/ 26 июня 2018

Очень часто события изменения размера или прокрутки запускаются несколько раз, поскольку пользователи обычно перетаскивают окно или прокручивают несколько пикселей вниз.

Причина, по которой они исчезают, заключается в том, что обработчик отключается несколько раз перед тем, каканимация заканчивается.

А из анимации работает, изменяя целевое значение с его текущего значения на предоставленное значение.Когда анимация запущена, ее текущее значение меняется.Если анимация .from запускается снова до завершения первой анимации, конечное значение для второй анимации меняется с первого вызова.Это приводит к искаженному виду анимации.

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

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
};

 var isAnimating = false;
 var updateCheck = function() {
    isAnimating = false;
 }

$(window).on('resize scroll', function() {

  if (!isAnimating) {
      isAnimating = true;
      TweenMax.from('#bstem', .1, {drawSVG: 0, ease: Power3.easeIn});
      TweenMax.from('#beth', 1, {drawSVG: 0, ease: Power3.easeIn}).delay(.1);
      TweenMax.from('#jacobs', 1.25, {drawSVG: 0, ease: Power3.easeIn, onComplete: updateCheck}).delay(.9);
  }
});

Источник

Поскольку события прокрутки могут запускаться с высокой скоростью, обработчик событий не должен выполнять вычислительно дорогостоящие операции, такие как модификации DOM.Вместо этого рекомендуется регулировать событие, используя requestAnimationFrame, setTimeout или customEvent, следующим образом.Однако обратите внимание, что входные события и кадры анимации запускаются примерно с одинаковой скоростью, и поэтому приведенная ниже оптимизация часто не требуется.

...