结合视口可见性实现DrawSVG动画遇滚动/缩放路径消失问题求助

嘿，我看了你的代码和问题描述，马上就发现问题所在啦！

问题根源 #

你现在的代码每次触发scroll或resize事件时，都会直接调用TweenMax.from()来启动动画。但from()方法的逻辑是让元素从你指定的初始状态（这里是drawSVG: '0'，也就是完全隐藏）过渡到当前状态。这就意味着，只要滚动或窗口调整大小一次，你的路径就会被强制重置到完全看不见的状态，然后重新开始动画——这就是为什么你会看到路径“消失”的原因。

另外还有个小细节问题：你调用TweenMax.from时的参数格式不对，把动画配置拆成了两个对象，正确的做法是把drawSVG和ease放在同一个配置对象里，否则缓动效果不会生效，还可能导致动画行为异常。

解决方案 #

我们需要做两件关键的事：

1. 只在元素首次进入视口时触发动画，后续滚动/resize不再重复执行
2. 修正TweenMax的参数格式，确保动画配置正确

下面是修改后的完整代码：

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

// 封装动画逻辑，避免重复代码
function triggerSVGAnimation(selector, duration, delay) {
  const $element = $(selector);
  // 只有元素在视口内，且还没执行过动画时，才触发
  if ($element.isInViewport() && !$element.hasClass('svg-animated')) {
    TweenMax.from($element, duration, {
      drawSVG: '0',
      ease: Power3.easeIn,
      // 动画完成后添加标记类，防止重复执行
      onComplete: () => {
        $element.addClass('svg-animated');
      }
    }).delay(delay);
  }
}

// 监听滚动和resize事件
$(window).on('resize scroll', function() {
  triggerSVGAnimation('#bstem', 0.1, 0);
  triggerSVGAnimation('#beth', 1, 0.1);
  triggerSVGAnimation('#jacobs', 1.25, 0.9);
});

// 页面加载完成后，主动检查一次（避免元素一开始就在视口却不触发动画）
$(document).ready(function() {
  triggerSVGAnimation('#bstem', 0.1, 0);
  triggerSVGAnimation('#beth', 1, 0.1);
  triggerSVGAnimation('#jacobs', 1.25, 0.9);
});

代码说明 #

• 新增了svg-animated类来标记已经完成动画的元素，确保每个SVG路径只执行一次动画
• 把动画逻辑封装成triggerSVGAnimation函数，让代码更简洁易维护
• 修正了TweenMax的参数格式，将drawSVG和ease合并到同一个配置对象中
• 页面加载时主动执行一次检查，避免页面初始化时元素已经在视口内，但动画没触发的情况

这样修改后，你的SVG路径只会在首次进入视口时播放动画，后续滚动或调整窗口大小都不会再重置路径状态啦～

内容的提问来源于stack exchange，提问作者benhullinger