プログラミング講座(164) タイマーイベント

ハロウィンのために作ったプログラム中にコウモリのアニメーションがあり、実は最初ブラウザ上ではうまく動いていませんでした。Timer オブジェクトを使った処理なのですが、今回はそのことについて説明します。

結論から言うと、

• Timer には 10ms 程度の誤差が生じる。
• ブラウザ上では Shapes の動作が遅い。
• 特に Shapes.HideShape(), Shapes.ShowShape() は遅い。
• Timer を使ってアニメーションを動かすときは、Interval の間に処理が終わるように、処理の長さあるいは Interval を調整する必要がある。

ということです。処理時間を測るには Clock.ElapsedMillisecond を使うと便利です。誤差の測定を行ったサンプルプログラムを ZHB659 として発行しました。

また、コウモリのアニメーションの部分だけを取り出して処理時間を測定したプログラムを QHH936-9 として発行しました。IDE から [実行] した場合 10ms 程度で 9 頭のコウモリを動かせますが、ブラウザ上では 100ms 以上かかります。

【図151 コウモリのアニメーション（IDE から実行）】

アニメーションのフレーム数 (FPS) は映画と同じ 24fps が主流です。このコウモリのアニメーションを 24fps で動かすには 1フレームを 42ms 以下にしなければなりません。ブラウザ上ではとても追いつかないので、10fps (1フレーム 100ms) にすることにしました。