如何停止计数器动画？答案

【问题标题】：How can I stop the counter animation?如何停止计数器动画？
【发布时间】：2019-04-30 14:04:08
【问题描述】：

您好，我正在尝试在类位于视口中时启动计数器动画，但这会在我每次滚动时继续制作计数器动画

我怎样才能停止动画？，当我滚动到有数字计数器的部分时，只需要这个计数器一次

谢谢

function linear(duration, range, current) {
  return ((duration * 2) / Math.pow(range, 2)) * current;
}

//counter animation
//Linear easing
function linear(duration, range, current) {
  return ((duration * 2) / Math.pow(range, 2)) * current;
}


function animateValue(id, start, duration, easing) {
  var end = parseInt(document.getElementById(id).textContent, 10);
  var range = end - start;
  var current = start;
  var increment = end > start ? 1 : -1;
  var obj = document.getElementById(id);
  var startTime = new Date();

  var step = function() {
    current += increment;
    obj.innerHTML = current;

    if (current !== end) {
      setTimeout(step, easing(duration, range, current));
    } else {
      console.log("Easing: ", easing);
      console.log("Elapsed time: ", new Date() - startTime);
      console.log("");
    }
  };

  setTimeout(step, easing(duration, range, start));
}

const counterViewport = function() {
  let elems;
  let windowHeight;
  function init() {
    elems = document.querySelectorAll(".numbers-stats");
    windowHeight = window.innerHeight;
    addEventHandlers();
    checkPosition();
  }
  function addEventHandlers() {
    window.addEventListener("scroll", checkPosition);
    window.addEventListener("resize", init);
  }
  function checkPosition() {
    for (var i = 0; i < elems.length; i++) {
      var positionFromTop = elems[i].getBoundingClientRect().top;
      if (positionFromTop - windowHeight <= 0) {
        animateValue("counterNumberFiba", 0, 2000, linear);
        animateValue("counterNumberFiba2", 0, 1400, linear);
        animateValue("counterNumberFiba3", 0, 700, linear);
      }
    }
  }
  return {
    init: init
  };
};
counterViewport().init();

【问题讨论】：

标签： javascript animation scroll counter viewport

【解决方案1】：

您的计数器运行一次后，您只需调用另一个函数来移除您的事件侦听器。以下是更新后的代码：

<html>
<body>
<section>
    <div class="content-max-width our-solution flex flex-wrap padding-mobile justify-between">


        <div class="w-full md:w-6c md:pt-4 ">
            <h4>Our Solution</h4>
            <p>
                Genius Sports’ partnership with FIBA began back in 2004 with the development of FIBA Organizer,
                a digital system for the management of any basketball competition format.
            </p>
            <p>
                After four years of successful cooperation, FIBA requested the development of a tool that would enable it to
                centralise its data through the real-time collection of statistics. Genius Sports subsequently launched FIBA
                LiveStats, giving leagues
                and federations of all sizes an official data feed that could underpin their relationships with fans, commercial
                partners and coaches.
            </p>
        </div>
    </div>
</section>
<section>
    <div class="content-max-width our-solution flex flex-wrap padding-mobile justify-between">


        <div class="w-full md:w-6c md:pt-4 ">
            <h4>Our Solution</h4>
            <p>
                Genius Sports’ partnership with FIBA began back in 2004 with the development of FIBA Organizer,
                a digital system for the management of any basketball competition format.
            </p>
            <p>
                After four years of successful cooperation, FIBA requested the development of a tool that would enable it to
                centralise its data through the real-time collection of statistics. Genius Sports subsequently launched FIBA
                LiveStats, giving leagues
                and federations of all sizes an official data feed that could underpin their relationships with fans, commercial
                partners and coaches.
            </p>
        </div>
    </div>
</section>
<section>
    <div class="content-max-width our-solution flex flex-wrap padding-mobile justify-between">


        <div class="w-full md:w-6c md:pt-4 ">
            <h4>Our Solution</h4>
            <p>
                Genius Sports’ partnership with FIBA began back in 2004 with the development of FIBA Organizer,
                a digital system for the management of any basketball competition format.
            </p>
            <p>
                After four years of successful cooperation, FIBA requested the development of a tool that would enable it to
                centralise its data through the real-time collection of statistics. Genius Sports subsequently launched FIBA
                LiveStats, giving leagues
                and federations of all sizes an official data feed that could underpin their relationships with fans, commercial
                partners and coaches.
            </p>
        </div>
    </div>
</section>
<div class="numbers-stats">
    <div class="content-max-width mx-auto mt-4 flex flex-wrap justify-between">
        <div class="w-6c md:w-full">
            <h2 class="counter-number" id="counterNumberFiba">80</h2><span class="million-text">+</span>
            <h5>MATCHES PER YEAR POWERED BY FIBA LIVESTATS</h5>
        </div>
        <div class="w-6c md:w-full">
            <h2 class="counter-number" id="counterNumberFiba2">25</h2><span class="million-text">m+</span>
            <h5>BASKETBALL FANS GLOBALLY USINHG LIVESTATS' GAMECENTRES</h5>
        </div>
        <div class="w-6c mt-2 md:w-full">
            <h2 class="counter-number" id="counterNumberFiba3">200</h2><span class="million-text">+</span>
            <h5>LEAGUES AND FEDERATIONS BENEFITTING FROM THIS LANDMARK PARTNERSHIP</h5>
        </div>
    </div>
</div>
<style>
.numbers-stats {
  h2.counter-number, .million-text {
    font-size: 5rem;
    color: $GREEN;
    font-weight: 300;
    display: inline;

    @screen md {
      font-size: 9.1rem;
    }
  }

  h5 {
    color: $TEXT-GRAY;
    text-transform: uppercase;
  }
}
</style>
<script>
//counter animation
//Linear easing
function linear(duration, range, current) {
  return ((duration * 2) / Math.pow(range, 2)) * current;
}

//Quadratic easing
function animateValue(id, start, duration, easing) {
  var end = parseInt(document.getElementById(id).textContent, 10);
  var range = end - start;
  var current = start;
  var increment = end > start ? 1 : -1;
  var obj = document.getElementById(id);
  var startTime = new Date();

  var step = function() {
    current += increment;
    obj.innerHTML = current;

    if (current !== end) {
      setTimeout(step, easing(duration, range, current));
    } else {
      console.log("Easing: ", easing);
      console.log("Elapsed time: ", new Date() - startTime);
      console.log("");
    }
  };

  setTimeout(step, easing(duration, range, start));
}

const counterViewport = function() {
  let elems;
  let windowHeight;
  function init() {
    elems = document.querySelectorAll(".numbers-stats");
    windowHeight = window.innerHeight;
    addEventHandlers();
    checkPosition();
  }
  function addEventHandlers() {
    window.addEventListener("scroll", checkPosition);
    window.addEventListener("resize", init);
  }
  function checkPosition() {
    for (var i = 0; i < elems.length; i++) {
      var positionFromTop = elems[i].getBoundingClientRect().top;
      if (positionFromTop - windowHeight <= 0) {
        animateValue("counterNumberFiba", 0, 2000, linear);
        animateValue("counterNumberFiba2", 0, 1400, linear);
        animateValue("counterNumberFiba3", 0, 700, linear);
        removeHandlers();
      }
    }
  }
  function removeHandlers(){
    window.removeEventListener("scroll", checkPosition);
    window.removeEventListener("resize", init);

}

  return {
    init: init
  };
};
counterViewport().init();

</script>
</body>
</html>

希望这就是你要找的。p>

【讨论】：