我在玩这个很棒的 CodePen 示例,它展示了 JavaScript 的计数动画:https://codepen.io/jshakes/pen/KKpjdYv。
我想改变计数步长 - 例如以2、3、5等为步长计数,而不是逐个数字计数。目前,我尝试更改
CodePen: https://codepen.io/jshakes/pen/KKpjdYv HTML
我想改变计数步长 - 例如以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 );
};
easeOutQuad
函数? - Konrad