アニメーション時の画面再描画はどっちで行う？秒数？フレーム数？

HTML5 Canvasでアニメーションを行いたいのですが、いまいち、FPS(frame per second)の概念であったり、アニメーション表現のための画面再描画の考え方がわかりません。

アニメーションというのは、秒数で行うものなのでしょうか？
それとも、フレーム数で行うものなのでしょうか？

例えば、１０秒かけてX軸方向に100px進めさせたいとした場合、
1秒間に10px動かすようにコードをかけば10秒後に100px先に移動しますが、
１秒ごとに10px動かすようなコードだとアニメーションがカックカクになってしまいます。

となると、１秒ごとにというよりは、0.1秒ごとにとかもっと細かい単位で再描画を行うなり、
1フレーム毎に再描画を行うなりするという発想が必要になってくるのですよね？

かなり混乱していて質問がまとまらないのですが、例えば５秒後に指定のオブジェクトを100px先に移動させるアニメーションを実現するコードを書くという発想は不適切でしょうか？

「xxx秒後に」という秒を基準にした考えではなく、「xxxフレーム後に」というフレームを基準に考えるべきですか？

かなり混乱していてまとまりがないので、自分がわかっていることとわかっていないことの切り分けを以下にリストアップしてみます。

わかっていることの整理

FPSとは一秒間のフレーム数。60FPSは1秒間に60回、画面再描画を行うみたいなこと。
マシーンの性能によって処理性能は異なるため、マシーンによって最適なFPSは異なる
setTimeoutは指定した時間間隔で処理を実行してくれるが、ブラウザが再描画出来る状態になっていなくても処理を実行してしまう
逆にrequestAnimationFrameはブラウザが再描画出来る状態に処理を実行してくれるが、時間間隔は変動する

わかっていないことの整理

何秒かけて始点から終点に移動させるというコードをどう書いて良いかわからない。わからない原因はFPS周りのところで混乱しているため。
アニメーションは秒数を基準に考えるべきなのか？フレーム数を基準に考えるべきなのか？
フレーム数を基準に考えた場合、実際のFPSは変動するから、その影響を考慮する必要があるのか？考慮する場合はどういうことを気にする必要があるのか？

コード

まだcanvasもcanvas animationもよく理解していないので無理やり書いたコードで汚いですが、一応掲載します。

setTimeoutを使って画面再描画を行う場合のDEMO
requestAnimationFrameを使って画面再描画を行う場合のDEMO

JavaScript
1var canvas = document.getElementById("canvas");
2var context = canvas.getContext("2d");
3
4var circle = new Circle(15, 15, 15);
5
6(function loop() {
7	context.clearRect(0, 0, canvas.width, canvas.height);
8	circle.moveBy(5, 0);
9	draw(circle);
10        
11        //setTimeoutを使う場合 
12	//setTimeout(loop, 1000 / 60);
13        
14         //requestAnimatinFrameを使う場合
15	//requestAnimationFrame(loop);
16})();
17
18
19function draw(circle) {
20	
21	context.beginPath();
22	context.arc(circle.x(), circle.y(), circle.r(), 0, Math.PI*2, false);
23	context.fill();
24
25}
26
27
28function Circle(x, y, radius) {
29	
30	var _x = x;
31	var _y = y;
32	var _r = radius;
33	
34	this.x = function() {
35		return _x;
36	}
37	
38	this.y = function(){
39		return _y;
40	}
41	
42	this.r = function() {
43		return _r;
44	}
45	
46	this.moveBy = function(x, y) {
47		_x = _x + x;
48		_y = _y + y;
49	}
50	
51}

追記

Final Cut Pro Xのタイムラインを見ると、フレーム数が基準になっているようでした。
自分がよく使う設定では30pになっていて30フレームで1秒になる設定でした。
となると、アニメーションの基準として考えるのはフレームということですかね。

行動規範の内容に同意します

回答1件

ベストアンサー

アニメーションは秒数を基準に考えるべきなのか？フレーム数を基準に考えるべきなのか？

普通FPSを意識する事なんて、格ゲーやFPS等の1フレームの動作の遅延が勝敗を影響するゲームくらいでしかないですよね？
「例えば、１０秒かけてX軸方向に100px進めさせたいとした場合」のように基本的に人間が扱う単位は秒なので、秒数に従いましょう。

フレーム数を基準に考えた場合、実際のFPSは変動するから、その影響を考慮する必要があるのか？考慮する場合はどういうことを気にする必要があるのか？

気にする必要があります。

例えばウィルス対策ソフトが裏でファイルスキャンを始めたりして遅くなった場合、
ブラウザーはマシンをフリーズさせない為にFPSを落として描画する事があります。
他にもChromeではバックグラウンドに居る場合、1FPS程度に描画の更新頻度を落として負荷を減らす実装になっています。

何秒かけて始点から終点に移動させるというコードをどう書いて良いかわからない。

わからない原因はFPS周りのところで混乱しているため。

jQuery3や、Velocity.jsというアニメーション専用のライブラリの、アニメーション周りのソースコードをざっと読んだ事があります。
その意訳を下記に記載します（ホントかどうか実際にソースコード読んでみてください）

5秒掛けて黒丸が100px移動するアニメーション関数loopを実装した前提で記載します。

今の時刻（何時何分何秒）を拾得して変数として保存
loop関数が呼ばれたら、今の時刻と1の時刻のdiffを取る
diffを取った結果、2800ms経過していた場合、100px / 5000ms * 2800ms = 56px進んでいるべきという事が分かる
黒丸を56pxの場所に再設置する
5秒過ぎていたら終了、それ以前ならばrequestAnimationFrame(loop);を再度実行

投稿2016/08/14 06:58

miyabi-sun

総合スコア21158

canvas

2016/08/14 07:01

詳しい解説ありがとうございます！すぐには理解出来ないので、ちょっと読み込んでみます。またコメントさせて頂きます。ありがとうございます！

canvas

2016/08/14 10:29

大変参考になりました。ご掲載いただいた実装例もすっと理解出来ました。その例であればrequestAnimationFrameが変動するフレームレート下で毎フレーム再描画するとしても、秒数を基準にアニメーションを組めますね！！！Velocity.jsは以前、一通りの機能を遊びで試したことはあります。コードは5000行くらいとのことですが移動中にタブレッドでコツコツと読んでみたいと思います！ありがとうございました！！

行動規範の内容に同意します