なめらか卵のとろけるプリン
今日はおもに、Effectのなめらかさを向上させる方法を模索していました。
Effectはタイマードリブンです。タイマーから定期的なタイミングで呼ばれ式を評価し結果を描画します。
タイマーを細かく設定すれば理論上のなめらかさは向上しますが、実際にはブラウザの描画が追いつかずガクガクするだけで逆効果となります。
uupaa.js ver0.5までは、ブラウザの違いを区別せず、10msで駆動させていました。
もしかしてブラウザ毎にインターバルタイマーの最小値(分解能)は違うのではないか?
setIntervalの最小分解能を調べたところ、予想通りブラウザ毎に異なっていました。
- Google Chrome 1ms
- Firefox3 10ms
- IE, Opera, Safari 16ms
この値を元に、V8とGeckoなら10msで、その他のブラウザは16msで駆動するように修正したところ、見た目のなめらかさが改善されました。