TickTack.js - requestAnimationFrameをもうちょっと使いやすいモノにしてみた

以前に「setTimeoutの代替関数?requestAnimationFrameを試してみた」という記事を書きましたが、ちょっと実行時間に狂いが激しかったので、色々と試してみてラッパークラスを作ってみたのでメモ。

改善点

  • ある程度FPSに近づける→FPSの実行回数に近づける
  • 以前のデモだと実はIE8非対応だったのですが解消

使い方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="path/to/TickTack.js"></script>
<script>
var someFunc = function() { /* 何か処理 */ };
var fps = 30; // 30FPS : 1秒間に30回実行
var tick = new TickTack( someFunc, fps );

// 実行開始
tick.start();

/* 色々何か */

// 停止させたい時
tick.stop();
</script>

デモ

デモはコチラ

「request30fps」が以前のテストコードです。それに比べると実行時間の総計は結構近くなっていると思います。

ダウンロード

GitHubで公開しています。

Author: SUSH
Link: http://blog.sus-happy.net/ticktack/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.