Question

我使用requestAnimationFrame并在一段时间后开始滞后。这是正常的吗？

以下是代码：

var arrowNumberUpValue = Number(arrowUpValue) * 100
console.log(typeof arrowNumberUpValue === 'number')

function up_svg(){

    if(arrowNumberUpValue <= 100 && arrowNumberUpValue >= 50){
        arrowNumberUpValue = arrowNumberUpValue - 1
        console.log(arrowNumberUpValue)
        arrowUpFirst.style.transform = "scale(" + (arrowNumberUpValue/100).toPrecision(1) + ") rotate(-90deg)"
        arrowUpSecond.style.transform = "scale(" + (arrowNumberUpValue/100).toPrecision(1) + ") rotate(-90deg)"
        arrowUpThird.style.transform = "scale(" + (arrowNumberUpValue/100).toPrecision(1) + ") rotate(-90deg)"
        arrowUpFourth.style.transform = "scale(" + (arrowNumberUpValue/100).toPrecision(1) + ") rotate(-90deg)"
    } 
    if(arrowNumberUpValue < 50){
        for(;arrowNumberUpValue < 100;){
            arrowNumberUpValue = arrowNumberUpValue + 1
            console.log(arrowNumberUpValue)
        }
    }
    requestAnimationFrame(up_svg)
}

up_svg()

Answer 1

编辑：在评论中来回之后，看起来问题是使用转换：1s和每帧更新转换。

此版本无需转换：

var scaling = 1.0;  
function up_svg() {
    arrowNumberUpValue = arrowNumberUpValue <= 50 ? 100 : arrowNumberUpValue - 1;
    var target = arrowNumberUpValue / 100;
    var speed = 3/60;
    scaling = scaling * (1 - speed) + target * (speed);

    var trans = "scale(" + scaling.toPrecision(4) + ") rotate(-90deg)";
    arrowUpFirst.style.transform = trans;
    arrowUpSecond.style.transform = trans;
    arrowUpThird.style.transform = trans;
    arrowUpFourth.style.transform = trans;

    requestAnimationFrame(up_svg)
}
up_svg()

requestAnimationFrame（）导致主要减速。为什么呢？

1 个答案: