Question

你好，我正在尝试在类在视口中时启动计数器动画，但是每次我滚动时，这都会继续使计数器动画出现

如何停止动画？滚动到具有数字计数器的部分时，只需要一次使用此计数器即可

谢谢

https://www.tomsguide.com/us/how-to-encrypt-ios,news-18338.html

try encrypted.write(to: encURL)

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>

希望这就是您想要的。

如何停止计数器动画？

1 个答案: