リクエストアニメーションフレームでのキャンバスアニメーションの継続時間の変更

Question

プログレスバーに似たサークルをアニメーション化しようとしています。私は次のスライドがいつ来るかを追跡するためにカルーセルでそれを使用するつもりです。私が抱えている問題は、アニメーションの時間を変更する方法がわからないことです。私はフレームレートを調整しようとしましたが、それは動作しますが、アニメーションは本当に不安定になります。 setIntervalの種類の作品が、私は意図しているように、その一部だけではなく、サークル全体を表示するので、適切に時間を設定することはできません。アニメーションの速度を制御できるようにする必要があります。アニメーションの速度を遅くする必要はありません。私が取り組んでいるコードは以下の通りです。

<script>  
    (function() { 
     var requestAnimationFrame = window.requestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.msRequestAnimationFrame; 
            window.requestAnimationFrame = requestAnimationFrame; 
    })(); 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var centerX = canvas.width/2; 
     var centerY = canvas.height/2; 
     var radius = 90; 
     var endPercent = 85; 
     var curPerc = 0; 
     var circ = -Math.PI; 
     var quart = -(Math.PI * 2) + 1; 

     function animate(current) { 
      context.clearRect(0, 0, canvas.width, canvas.height); 
      context.beginPath(); 
      context.arc(centerX, centerY, radius, -(quart), ((circ) * current) - quart, true); 
      context.lineWidth = 3; 
      context.strokeStyle = '#000'; 
      context.stroke(); 
      curPerc++; 
      if (curPerc < endPercent) { 
       requestAnimationFrame(function() { 
       animate(curPerc/100) 
       }); 
      } 
     } 

    animate(); 
</script> 

Answer 1

​​コールバック引数で高分解能のタイムスタンプを渡しません。したがって、現在のアニメーションのどこにいるかを判断するのにこれを使用し、このデルタ時間を使用してcurPerc++の代わりに位置変数を設定することができます。

ここは単純な実装です。ここで

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 
var centerX = canvas.width/2; 
 
var centerY = canvas.height/2; 
 
var radius = 90; 
 
var endPercent = 85; 
 
var quart = -(Math.PI * 2) + 1; 
 
var startTime = null; 
 
var duration = null; 
 

 
function animate(time) { 
 

 
    if (!startTime) { 
 
    startTime = time; 
 
    } 
 

 
    var delta = Math.min(1, (time - startTime)/duration); 
 
    var curPerc = ((-2 * Math.PI)/100) * (endPercent * delta); 
 

 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 
    context.beginPath(); 
 
    context.arc(centerX, centerY, radius, -quart, curPerc - quart, true); 
 
    context.stroke(); 
 

 
    if (delta < 1) { 
 
    requestAnimationFrame(animate); 
 
    } else { 
 
    startTime = null; 
 
    slider.disabled = false; 
 
    } 
 
} 
 

 
var startAnim = function() { 
 
    context.lineWidth = 3; 
 
    context.strokeStyle = '#000'; 
 

 
    slider.disabled = true; 
 
    duration = +slider.value; 
 
    l.textContent = duration + 'ms'; 
 
    requestAnimationFrame(animate); 
 
}; 
 
slider.onchange = startAnim; 
 
startAnim();

<p>use the slider to update the animation's duration</p> 
 
<input type="range" min="250" max="9000" value="2000"id="slider" /> 
 
<label id="l"></label><br> 
 
<canvas id="myCanvas" height="300"></canvas>