requestAnimationFrame（）が大幅に遅くなっています。どうして？

Question

私は​​を使用していますが、しばらくしてから遅れが始まります。これは正常ですか？

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