将视口可见性与 DrawSVG 相结合

Question

所以我试图在视口中可见时执行 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

Answer 1

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

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

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

为避免多次调用，可以添加一个布尔变量来检查动画当前是否正在运行，并在动画结束时将该布尔值更新为 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);
}
});

源

由于滚动事件可以以高速率触发，因此事件处理程序不应执行计算成本高昂的操作，例如 DOM 修改。相反，建议使用 requestAnimationFrame、setTimeout 或 customEvent 来限制事件，如下所示。但请注意，输入事件和动画帧以大致相同的速率触发，因此通常不需要下面的优化。