requestAnimationFrameでfpsを制御していますか？
requestAnimationFrameは、今や物事をアニメートするための事実上の方法のようです。ほとんどの場合、私にとってはうまく機能しましたが、今はキャンバスアニメーションをいくつか試しているところです。 rAFの目的は一貫してスムーズなアニメーションを作成することであり、アニメーションが途切れるリスクがあるかもしれませんが、現時点では大幅に異なる速度で実行されているようです。どういうわけか。
setIntervalを使用しますが、rAFが提供する最適化が必要です（特にタブにフォーカスがあるときに自動的に停止します）。
誰かが私のコードを見たい場合、それはほとんどです：
animateFlash: function() {
ctx_fg.clearRect(0,0,canvasWidth,canvasHeight);
ctx_fg.fillStyle = 'rgba(177,39,116,1)';
ctx_fg.strokeStyle = 'none';
ctx_fg.beginPath();
for(var i in nodes) {
nodes[i].drawFlash();
}
ctx_fg.fill();
ctx_fg.closePath();
var instance = this;
var rafID = requestAnimationFrame(function(){
instance.animateFlash();
})
var unfinishedNodes = nodes.filter(function(elem){
return elem.timer < timerMax;
});
if(unfinishedNodes.length === 0) {
console.log("done");
cancelAnimationFrame(rafID);
instance.animate();
}
}
Node.drawFlash（）は、カウンター変数に基づいて半径を決定し、円を描くコードの一部です。
requestAnimationFrameを特定のフレームレートに調整する方法
5 FPSでのスロットリングのデモ： http://jsfiddle.net/m1erickson/CtsY3/
このメソッドは、最後のフレームループを実行してからの経過時間をテストすることで機能します。
描画コードは、指定したFPS間隔が経過したときにのみ実行されます。
コードの最初の部分では、経過時間の計算に使用されるいくつかの変数を設定します。
var stop = false;
var frameCount = 0;
var $results = $("#results");
var fps, fpsInterval, startTime, now, then, elapsed;
// initialize the timer variables and start the animation
function startAnimating(fps) {
fpsInterval = 1000 / fps;
then = Date.now();
startTime = then;
animate();
}
このコードは、指定したFPSで描画する実際のrequestAnimationFrameループです。
// the animation loop calculates time elapsed since the last loop
// and only draws if your specified fps interval is achieved
function animate() {
// request another frame
requestAnimationFrame(animate);
// calc elapsed time since last loop
now = Date.now();
elapsed = now - then;
// if enough time has elapsed, draw the next frame
if (elapsed > fpsInterval) {
// Get ready for next frame by setting then=now, but also adjust for your
// specified fpsInterval not being a multiple of RAF's interval (16.7ms)
then = now - (elapsed % fpsInterval);
// Put your drawing code here
}
}
更新2016/6
フレームレートの調整に関する問題は、画面の更新レートが通常60 FPSであるということです。
24 FPSが必要な場合は、画面上で真の24 fpsを取得することはありません。そのように時間を計ることはできますが、モニターは同期フレームを15 fps、30 fpsまたは60 fpsでしか表示できません（一部のモニターは120 fps ）。
ただし、タイミングのために、可能な場合は計算して更新できます。
計算とコールバックをオブジェクトにカプセル化することにより、フレームレートを制御するためのすべてのロジックを構築できます。
function FpsCtrl(fps, callback) {
var delay = 1000 / fps, // calc. time per frame
time = null, // start time
frame = -1, // frame count
tref; // rAF time reference
function loop(timestamp) {
if (time === null) time = timestamp; // init start time
var seg = Math.floor((timestamp - time) / delay); // calc frame no.
if (seg > frame) { // moved to next frame?
frame = seg; // update
callback({ // callback function
time: timestamp,
frame: frame
})
}
tref = requestAnimationFrame(loop)
}
}
次に、コントローラーと構成コードを追加します。
// play status
this.isPlaying = false;
// set frame-rate
this.frameRate = function(newfps) {
if (!arguments.length) return fps;
fps = newfps;
delay = 1000 / fps;
frame = -1;
time = null;
};
// enable starting/pausing of the object
this.start = function() {
if (!this.isPlaying) {
this.isPlaying = true;
tref = requestAnimationFrame(loop);
}
};
this.pause = function() {
if (this.isPlaying) {
cancelAnimationFrame(tref);
this.isPlaying = false;
time = null;
frame = -1;
}
};
使用法
これは非常に簡単になりました-今、私たちがしなければならないことは、次のようにコールバック関数と目的のフレームレートを設定することでインスタンスを作成することです。
var fc = new FpsCtrl(24, function(e) {
// render each frame here
});
次に、開始します（必要に応じてデフォルトの動作になります）。
fc.start();
それだけです。すべてのロジックは内部で処理されます。
デモ
var ctx = c.getContext("2d"), pTime = 0, mTime = 0, x = 0;
ctx.font = "20px sans-serif";
// update canvas with some information and animation
var fps = new FpsCtrl(12, function(e) {
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillText("FPS: " + fps.frameRate() +
" Frame: " + e.frame +
" Time: " + (e.time - pTime).toFixed(1), 4, 30);
pTime = e.time;
var x = (pTime - mTime) * 0.1;
if (x > c.width) mTime = pTime;
ctx.fillRect(x, 50, 10, 10)
})
// start the loop
fps.start();
// UI
bState.onclick = function() {
fps.isPlaying ? fps.pause() : fps.start();
};
sFPS.onchange = function() {
fps.frameRate(+this.value)
};
function FpsCtrl(fps, callback) {
var delay = 1000 / fps,
time = null,
frame = -1,
tref;
function loop(timestamp) {
if (time === null) time = timestamp;
var seg = Math.floor((timestamp - time) / delay);
if (seg > frame) {
frame = seg;
callback({
time: timestamp,
frame: frame
})
}
tref = requestAnimationFrame(loop)
}
this.isPlaying = false;
this.frameRate = function(newfps) {
if (!arguments.length) return fps;
fps = newfps;
delay = 1000 / fps;
frame = -1;
time = null;
};
this.start = function() {
if (!this.isPlaying) {
this.isPlaying = true;
tref = requestAnimationFrame(loop);
}
};
this.pause = function() {
if (this.isPlaying) {
cancelAnimationFrame(tref);
this.isPlaying = false;
time = null;
frame = -1;
}
};
}body {font:16px sans-serif}<label>Framerate: <select id=sFPS>
<option>12</option>
<option>15</option>
<option>24</option>
<option>25</option>
<option>29.97</option>
<option>30</option>
<option>60</option>
</select></label><br>
<canvas id=c height=60></canvas><br>
<button id=bState>Start/Stop</button>旧回答
requestAnimationFrameの主な目的は、更新をモニターのリフレッシュレートに同期することです。これには、モニターのFPSまたはその要因（60 Hz、30、15 FPS、典型的なリフレッシュレート@ 60 Hz）でアニメーション化する必要があります。
より任意のFPSが必要な場合は、フレームレートがモニターの更新頻度とは決して一致しないため（フレームはあちこち）、すべてのフレームリタイミングのようにスムーズなアニメーションを提供できないため、rAFを使用しても意味がありません）代わりにsetTimeoutまたはsetIntervalを使用することもできます。
これは、別のFPSでビデオを再生し、それを表示するデバイスが更新されるときに、プロのビデオ業界でよく知られている問題でもあります。フレームブレンディングや複雑な再タイミングなど、モーションベクトルに基づいて中間フレームを再構築する多くの手法が使用されていますが、キャンバスではこれらの手法は利用できず、結果は常にぎくしゃくしたビデオになります。
var FPS = 24; /// "silver screen"
var isPlaying = true;
function loop() {
if (isPlaying) setTimeout(loop, 1000 / FPS);
... code for frame here
}
setTimeoutfirstを配置する理由（および、ポリフィルを使用するときにrAFを最初に配置する理由）は、ループが開始するとすぐにsetTimeoutがイベントをキューに入れるので、これはより正確になります。残りのコードが使用する時間に関係なく（タイムアウト間隔を超えない場合）、次の呼び出しはそれが表す間隔（純粋なrAFの場合、rAFはいずれの場合でも次のフレームにジャンプしようとするため、これは必須ではありません）。
また、最初に配置すると、setIntervalの場合と同様に、呼び出しがスタックするリスクがあります。 setIntervalは、この使用に対してわずかに正確な場合があります。
また、ループの代わりにoutsidesetIntervalを使用して同じことを行うことができます。
var FPS = 29.97; /// NTSC
var rememberMe = setInterval(loop, 1000 / FPS);
function loop() {
... code for frame here
}
ループを停止するには：
clearInterval(rememberMe);
タブがぼやけたときにフレームレートを下げるには、次のような要素を追加できます。
var isFocus = 1;
var FPS = 25;
function loop() {
setTimeout(loop, 1000 / (isFocus * FPS)); /// note the change here
... code for frame here
}
window.onblur = function() {
isFocus = 0.5; /// reduce FPS to half
}
window.onfocus = function() {
isFocus = 1; /// full FPS
}
これにより、FPSを1/4などに減らすことができます。
requestAnimationFrameへの呼び出しをsetTimeoutでラップすることをお勧めします。アニメーションフレームを要求した関数内からsetTimeoutを呼び出すと、requestAnimationFrameの目的に反することになります。ただし、requestAnimationFrame内からsetTimeoutを呼び出すと、スムーズに動作します。
var fps = 25
function animate() {
setTimeout(function() {
requestAnimationFrame(animate);
}, 1000 / fps);
}
あなたが深くなるまで、これらはすべて理論的には良いアイデアです。 問題は、RAFを非同期化せずにスロットルすることはできず、既存の目的そのものを無効にすることですだから、フルスピードで実行させる別のループでデータを更新する、または別のスレッド！
はい、私はそれを言った。あなたはcanブラウザでマルチスレッドJavaScriptを実行できます！
私は、ジャンクなしで非常にうまく機能する2つの方法があります。ジュースの使用量を減らし、熱の発生を抑えます。正確な人間規模のタイミングと機械効率が最終的な結果です。
これが少し冗長な場合は申し訳ありませんが、ここに行きます...
方法1：setIntervalを介してデータを更新し、RAFを介してグラフィックスを更新します。
個別のsetIntervalを使用して、平行移動と回転の値、物理、衝突などを更新します。これらの値を、アニメーション化された各要素のオブジェクトに保持します。変換文字列を、各setInterval 'frame'のオブジェクトの変数に割り当てます。これらのオブジェクトを配列に保持します。間隔をmsで目的のfpsに設定します：ms =（1000/fps）。これにより、RAFの速度に関係なく、すべてのデバイスで同じfpsを可能にする安定したクロックが維持されます。 ここで要素に変換を割り当てないでください！
RequestAnimationFrameループでは、従来のforループで配列を反復処理します。ここでは新しいフォームを使用しないでください。遅いのです！
for(var i=0; i<Sprite.length-1; i++){ rafUpdate(Sprite[i]); }
RafUpdate関数で、配列内のjsオブジェクトから変換文字列とその要素IDを取得します。 RAFで「取得」する時間を無駄にしないように、「スプライト」要素を変数にアタッチするか、他の手段で簡単にアクセスできるようにする必要があります。それらのhtml idの名前にちなんで名付けられたオブジェクトにそれらを保持することはかなりうまくいきます。 SIまたはRAFに入る前に、その部分を設定します。
RAFを使用してトランスフォームを更新しonly、3Dトランスフォームのみを使用し（2dでも）、cssを「will-change：transform;」に設定します変化する要素に。これにより、変換がネイティブリフレッシュレートに可能な限り同期され、GPUが起動され、ブラウザーに最も集中する場所が指示されます。
したがって、この擬似コードのようなものが必要です...
// refs to elements to be transformed, kept in an array
var element = [
mario: document.getElementById('mario'),
luigi: document.getElementById('luigi')
//...etc.
]
var Sprite = [ // read/write this with SI. read-only from RAF
mario: { id: mario ....physics data, id, and updated transform string (from SI) here },
luigi: { id: luigi .....same }
//...and so forth
] // also kept in an array (for efficient iteration)
//update one Sprite js object
//data manipulation, CPU tasks for each Sprite object
//(physics, collisions, and transform-string updates here.)
//pass the object (by reference).
var SIupdate = function(object){
// get pos/rot and update with movement
object.pos.x += object.mov.pos.x; // example, motion along x axis
// and so on for y and z movement
// and xyz rotational motion, scripted scaling etc
// build transform string ie
object.transform =
'translate3d('+
object.pos.x+','+
object.pos.y+','+
object.pos.z+
') '+
// assign rotations, order depends on purpose and set-up.
'rotationZ('+object.rot.z+') '+
'rotationY('+object.rot.y+') '+
'rotationX('+object.rot.x+') '+
'scale3d('.... if desired
; //...etc. include
}
var fps = 30; //desired controlled frame-rate
// CPU TASKS - SI psuedo-frame data manipulation
setInterval(function(){
// update each objects data
for(var i=0; i<Sprite.length-1; i++){ SIupdate(Sprite[i]); }
},1000/fps); // note ms = 1000/fps
// GPU TASKS - RAF callback, real frame graphics updates only
var rAf = function(){
// update each objects graphics
for(var i=0; i<Sprite.length-1; i++){ rAF.update(Sprite[i]) }
window.requestAnimationFrame(rAF); // loop
}
// assign new transform to Sprite's element, only if it's transform has changed.
rAF.update = function(object){
if(object.old_transform !== object.transform){
element[object.id].style.transform = transform;
object.old_transform = object.transform;
}
}
window.requestAnimationFrame(rAF); // begin RAF
これにより、データオブジェクトと変換文字列の更新がSIの目的の「フレーム」レートに同期され、RAFの実際の変換割り当てがGPUリフレッシュレートに同期されます。したがって、実際のグラフィックの更新はRAFのみで行われますが、データの変更と変換文字列の作成はSIで行われるため、ジャンキーではなく、「時間」が目的のフレームレートで流れます。
フロー：
[setup js Sprite objects and html element object references]
[setup RAF and SI single-object update functions]
[start SI at percieved/ideal frame-rate]
[iterate through js objects, update data transform string for each]
[loop back to SI]
[start RAF loop]
[iterate through js objects, read object's transform string and assign it to it's html element]
[loop back to RAF]
方法2. SIをWebワーカーに配置します。これはFAAASTでスムーズです！
方法1と同じですが、SIをWebワーカーに入れます。まったく別のスレッドで実行され、RAFとUIのみを処理するページが残されます。 Sprite配列を「転送可能なオブジェクト」として前後に渡します。これは高速です。クローンやシリアル化に時間はかかりませんが、反対側からの参照が破棄されるという点で参照渡しのようではないため、両方の側を反対側に渡して、存在する場合にのみ更新する必要があります高校であなたのガールフレンドとメモをやり取りするようなものです。
一度に読み書きできるのは1人だけです。エラーを回避するために未定義でないかどうかをチェックする限り、これは問題ありません。 RAFは高速であるため、すぐにキックバックし、GPUフレームの束を調べて、まだ送信されたかどうかを確認します。 WebワーカーのSIは、ほとんどの場合Sprite配列を持ち、位置、移動、物理データを更新し、新しい変換文字列を作成してから、ページのRAFに返します。
これは、スクリプトを介して要素をアニメーション化するために知っている最速の方法です。 2つの関数は、2つの別々のスレッドで2つの別々のプログラムとして実行され、1つのjsスクリプトではできないマルチコアCPUを活用します。マルチスレッドJavaScriptアニメーション。
そして、ジャンクせずにスムーズに実行されますが、実際に指定されたフレームレートで、発散はほとんどありません。
結果：
これら2つの方法のいずれかを使用すると、PC、電話、タブレットなどでスクリプトが同じ速度で実行されるようになります（もちろん、デバイスとブラウザーの機能内で）。
特定のFPSに簡単に調整する方法：
// timestamps are ms passed since document creation.
// lastTimestamp can be initialized to 0, if main loop is executed immediately
var lastTimestamp = 0,
maxFPS = 30,
timestep = 1000 / maxFPS; // ms for each frame
function main(timestamp) {
window.requestAnimationFrame(main);
// skip if timestep ms hasn't passed since last frame
if (timestamp - lastTimestamp < timestep) return;
lastTimestamp = timestamp;
// draw frame here
}
window.requestAnimationFrame(main);
スキップrequestAnimationFrame原因スムーズではない（望ましい）カスタムfpsでのアニメーション。
// Input/output DOM elements
var $results = $("#results");
var $fps = $("#fps");
var $period = $("#period");
// Array of FPS samples for graphing
// Animation state/parameters
var fpsInterval, lastDrawTime, frameCount_timed, frameCount, lastSampleTime,
currentFps=0, currentFps_timed=0;
var intervalID, requestID;
// Setup canvas being animated
var canvas = document.getElementById("c");
var canvas_timed = document.getElementById("c2");
canvas_timed.width = canvas.width = 300;
canvas_timed.height = canvas.height = 300;
var ctx = canvas.getContext("2d");
var ctx2 = canvas_timed.getContext("2d");
// Setup input event handlers
$fps.on('click change keyup', function() {
if (this.value > 0) {
fpsInterval = 1000 / +this.value;
}
});
$period.on('click change keyup', function() {
if (this.value > 0) {
if (intervalID) {
clearInterval(intervalID);
}
intervalID = setInterval(sampleFps, +this.value);
}
});
function startAnimating(fps, sampleFreq) {
ctx.fillStyle = ctx2.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx2.fillRect(0, 0, canvas.width, canvas.height);
ctx2.font = ctx.font = "32px sans";
fpsInterval = 1000 / fps;
lastDrawTime = performance.now();
lastSampleTime = lastDrawTime;
frameCount = 0;
frameCount_timed = 0;
animate();
intervalID = setInterval(sampleFps, sampleFreq);
animate_timed()
}
function sampleFps() {
// sample FPS
var now = performance.now();
if (frameCount > 0) {
currentFps =
(frameCount / (now - lastSampleTime) * 1000).toFixed(2);
currentFps_timed =
(frameCount_timed / (now - lastSampleTime) * 1000).toFixed(2);
$results.text(currentFps + " | " + currentFps_timed);
frameCount = 0;
frameCount_timed = 0;
}
lastSampleTime = now;
}
function drawNextFrame(now, canvas, ctx, fpsCount) {
// Just draw an oscillating seconds-hand
var length = Math.min(canvas.width, canvas.height) / 2.1;
var step = 15000;
var theta = (now % step) / step * 2 * Math.PI;
var xCenter = canvas.width / 2;
var yCenter = canvas.height / 2;
var x = xCenter + length * Math.cos(theta);
var y = yCenter + length * Math.sin(theta);
ctx.beginPath();
ctx.moveTo(xCenter, yCenter);
ctx.lineTo(x, y);
ctx.fillStyle = ctx.strokeStyle = 'white';
ctx.stroke();
var theta2 = theta + 3.14/6;
ctx.beginPath();
ctx.moveTo(xCenter, yCenter);
ctx.lineTo(x, y);
ctx.arc(xCenter, yCenter, length*2, theta, theta2);
ctx.fillStyle = "rgba(0,0,0,.1)"
ctx.fill();
ctx.fillStyle = "#000";
ctx.fillRect(0,0,100,30);
ctx.fillStyle = "#080";
ctx.fillText(fpsCount,10,30);
}
// redraw second canvas each fpsInterval (1000/fps)
function animate_timed() {
frameCount_timed++;
drawNextFrame( performance.now(), canvas_timed, ctx2, currentFps_timed);
setTimeout(animate_timed, fpsInterval);
}
function animate(now) {
// request another frame
requestAnimationFrame(animate);
// calc elapsed time since last loop
var elapsed = now - lastDrawTime;
// if enough time has elapsed, draw the next frame
if (elapsed > fpsInterval) {
// Get ready for next frame by setting lastDrawTime=now, but...
// Also, adjust for fpsInterval not being multiple of 16.67
lastDrawTime = now - (elapsed % fpsInterval);
frameCount++;
drawNextFrame(now, canvas, ctx, currentFps);
}
}
startAnimating(+$fps.val(), +$period.val());input{
width:100px;
}
#tvs{
color:red;
padding:0px 25px;
}
H3{
font-weight:400;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>requestAnimationFrame skipping <span id="tvs">vs.</span> setTimeout() redraw</h3>
<div>
<input id="fps" type="number" value="33"/> FPS:
<span id="results"></span>
</div>
<div>
<input id="period" type="number" value="1000"/> Sample period (fps, ms)
</div>
<canvas id="c"></canvas><canvas id="c2"></canvas>@tavnabによる元のコード。
私は常にタイムスタンプを台無しにせずにこの非常に簡単な方法でそれを行います：
var fps, eachNthFrame, frameCount;
fps = 30;
//This variable specifies how many frames should be skipped.
//If it is 1 then no frames are skipped. If it is 2, one frame
//is skipped so "eachSecondFrame" is renderd.
eachNthFrame = Math.round((1000 / fps) / 16.66);
//This variable is the number of the current frame. It is set to eachNthFrame so that the
//first frame will be renderd.
frameCount = eachNthFrame;
requestAnimationFrame(frame);
//I think the rest is self-explanatory
fucntion frame() {
if (frameCount == eachNthFrame) {
frameCount = 0;
animate();
}
frameCount++;
requestAnimationFrame(frame);
}
ここに私が見つけた良い説明があります： CreativeJS.com 、setTimeouをラップするには）requestAnimationFrameに渡された関数内で呼び出します。 「プレーン」なrequestionAnimationFrameに対する私の懸念は、「1秒に3回アニメーション化したいwantだけだったらどうなるでしょうか？」 （setTimeoutとは対照的に）requestAnimationFrameを使用しても、stillは（ある程度）量の「エネルギー」を浪費します（ブラウザのコードが何かを実行していることを意味し、 （場合によってはシステムの速度を落とす）60または120または1秒間に何回も（1秒間に2〜3回だけであるのに対して）。
ほとんどの場合、この理由から、JavaScriptを使用してブラウザーを最初からoff実行しています。しかし、私はYosemite 10.10.3を使用していますが、少なくとも何らかの古いシステム（比較的古い-2011年を意味します）では、何らかのタイマーの問題があると思います。