JS在两个值变化之间的平滑过渡

Question

我的变量不断变化，例如从外部SDK到0到100的变化：

window.addEventListener({
 variable = 0; 
})

现在，当此变量更改并变为另一个值时，对我来说太尖锐了，例如，我想将此指数设为 不是0 => 100直接，而是我想每x毫秒对变量的值进行采样e在具有中间值的两个值之间进行平滑过渡

示例：0 => 20 => 40 => 60 => 80 => 100

我该怎么办？

Answer 1

这应该可以解决问题：

var animationDuration = 500; //in miliseconds
var startValue = 0;
var endValue = 100;

function animateNextFrame(currentTime) {

    if (!startTime) startTime = currentTime;
    var elapsedTime = currentTime - startTime;

    if (elapsedTime < animationDuration) {

        currentValue = Math.floor((elapsedTime / animationDuration) * (endValue - startValue));

        //set your field value to currentValue here with something like document.getElemenById...

        //call the next animation frame
        window.requestAnimationFrame(animateNextFrame);

    } else {
        //set your field value to endValue here with something like document.getElemenById...
    }
}
//trigger the number animation
window.requestAnimationFrame(animateNextFrame);