Question

我正在尝试构建一个包含动画SVG的页面，当它们在滚动视口中可见时，它们就会被绘制。我正在使用Anime.js为这些SVG绘制动画。

我的问题是，它目前仅在if语句中绘制我的第一个元素。我该如何重构它，以便当用户向下滚动我的页面并且这些隐藏的SVG进入视口时，它们只能绘制一次。

理想情况下，这将在多个页面上绘制箭头，因此我也试图尝试一种向这些svgs添加数据属性，并在页面上搜索它们的方法，而不是在我的if语句中对其进行硬编码。

我正在检查元素是否在视口中，如下所示：

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

然后，我正在听用户滚动，如果该元素在视口中并且之前未绘制过，它将像这样执行drawArrow()：

$(window).on("resize scroll", function() {
  if ($("#arrow-1").isInViewport() && !$("#arrow-1").attr("drawn")) {
    drawArrow("#arrow-1");
  } else if ($("#arrow-2").isInViewport() && !$("#arrow-2").attr("drawn")) {
    drawArrow("#arrow-2");
  }
});

DrawArrow：

function drawArrow(arrowId) {
  $(arrowId).show();
  $(arrowId).attr("drawn", true);
  var arrowDraw = anime({
    targets: arrowId + " path",
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: "easeInOutQuad",
    duration: 1500,
    loop: false
  });
}

在视口中执行一次功能

0 个答案: