jquery - 将视口(viewport)可见性与 DrawSVG 相结合

Question

因此，当 DrawSVG 动画在视口(viewport)中可见时，我尝试执行该动画，然后我遇到了 this medium post 。我试图让它适用于我自己的代码，但我遇到了一个问题，当窗口滚动或调整大小时路径消失。这是我正在使用的代码。有什么帮助吗？

$.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

Answer 1

由于用户通常将窗口拖出或向下滚动多个像素，因此多次触发调整大小或滚动事件是很常见的。

它们消失的原因是因为处理程序在动画完成之前多次触发。

动画的工作原理是将目标值从当前值更改为提供的值。当动画运行时，它的当前值正在变化。如果 .from 动画在第一个动画完成之前再次开始运行，则第二个动画的结束值将从第一次调用开始更改。这会导致动画的外观扭曲。

为了避免多次调用，您可以添加一个 bool 变量来检查动画当前是否正在运行，并在动画结束时将该 bool 值更新为 false。

$.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);
  }
});

Source

Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame, setTimeout or customEvent, as follows. Note however that input events and animation frames are fired at about the same rate and therefore the optimization below is often unnecessary.