在JS计数器动画中更改步长

Question

我在玩这个很棒的 CodePen 示例，它展示了 JavaScript 的计数动画：https://codepen.io/jshakes/pen/KKpjdYv。

我想改变计数步长 - 例如以2、3、5等为步长计数，而不是逐个数字计数。目前，我尝试更改frame变量的值，以及添加到totalFrames和progress中的值，但无法实现不同的步长。有没有什么建议可以实现这一点呢？非常感谢您的反馈。

CodePen: https://codepen.io/jshakes/pen/KKpjdYv HTML

<button onclick="runAnimations()">Animate</button>
<ul>
  <li><span class="countup">45</span></li>
  <li><span class="countup">110</span></li>
  <li><span class="countup">53210</span></li>
</ul>

JS

// How long you want the animation to take, in ms
const animationDuration = 10000;
// Calculate how long each ‘frame’ should last if we want to update the animation 60 times per second
const frameDuration = 1000 / 60;
// Use that to calculate how many frames we need to complete the animation
const totalFrames = (Math.round( animationDuration / frameDuration ) + 5);
// An ease-out function that slows the count as it progresses
const easeOutQuad = t => t * ( 2 - t );

// The animation function, which takes an Element
const animateCountUp = el => {
    let frame = 0;
    const countTo = parseInt( el.innerHTML, 10 );
    // Start the animation running 60 times per second
    const counter = setInterval( () => {
        frame++;
        // Calculate our progress as a value between 0 and 1
        // Pass that value to our easing function to get our
        // progress on a curve
        const progress = easeOutQuad( frame / totalFrames );
        // Use the progress value to calculate the current count
        const currentCount = Math.round( countTo * progress );

        // If the current count has changed, update the element
        if ( parseInt( el.innerHTML, 10 ) !== currentCount ) {
            el.innerHTML = currentCount;
        }

        // If we’ve reached our last frame, stop the animation
        if ( frame === totalFrames ) {
            clearInterval( counter );
        }
    }, frameDuration );
};

// Run the animation on all elements with a class of ‘countup’
const runAnimations = () => {
    const countupEls = document.querySelectorAll( '.countup' );
    countupEls.forEach( animateCountUp );
};

- Jon

---

更改 easeOutQuad 函数？ - Konrad

Answer 1

您可以在animateCountUp中添加一个step参数，并且仅以步长的倍数增加currentCount。在此示例中，我根据其索引使每个计数器递增（因此第一个递增1，第二个递增2，第三个递增3）：

// How long you want the animation to take, in ms
const animationDuration = 5000;
// Calculate how long each ‘frame’ should last if we want to update the animation 60 times per second
const frameDuration = 1000 / 60;
// Use that to calculate how many frames we need to complete the animation
const totalFrames = (Math.round( animationDuration / frameDuration ) + 5);
// An ease-out function that slows the count as it progresses
const easeOutQuad = t => t * ( 2 - t );

// The animation function, which takes an Element
const animateCountUp = (el, step) => {
    let frame = 0;
    const countTo = parseInt( el.innerHTML, 10 );
    // Start the animation running 60 times per second
    const counter = setInterval( () => {
        frame ++;
        // Calculate our progress as a value between 0 and 1
        // Pass that value to our easing function to get our
        // progress on a curve
        const progress = easeOutQuad( frame / totalFrames );
        // Use the progress value to calculate the current count
        const currentCount = Math.floor( ( countTo * progress + step - 1) / step) * step;

        // If the current count has changed, update the element
        if ( parseInt( el.innerHTML, 10 ) !== currentCount ) {
            el.innerHTML = currentCount;
        }

        // If we’ve reached our last frame, stop the animation
        if ( frame === totalFrames ) {
            clearInterval( counter );
        }
    }, frameDuration );
};

// Run the animation on all elements with a class of ‘countup’
const runAnimations = () => {
    const countupEls = document.querySelectorAll( '.countup' );
    countupEls.forEach((el, i) => animateCountUp(el, i+1) );
};

<button onclick="runAnimations()">Animate</button>
<ul>
  <li><span class="countup">45</span></li>
  <li><span class="countup">110</span></li>
  <li><span class="countup">348</span></li>
</ul>

- Nick