我怎样才能停止反动画？

Question

您好，当 class 在视口中时，我正在尝试启动计数器动画，但是每次滚动时都会继续制作计数器动画

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

谢谢

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();

Answer 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>

希望这就是您要找的。

我怎样才能停止反动画？

How can I stop the counter animation?

javascript

animation

counter

scroll

viewport