JS在兩個值變化之間平滑過渡

Question

我有這個變量不斷變化，從 0 到 100 這來自這樣的外部 SDK，例如：

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