アニメーション その2

アニメーション　その1の続きです。
その1では超高速アニメーションになってしまっていた画像切り替えですが、Timerコントロールを使わずStopwatchクラスを使います。
なぜ、Timerを使わないのか･･･このStopwatchクラスの方が細かい時間を計ることができるみたいだからです。
実際、VBの参考サイトで紹介したプログラミング☆簡単レシピってところのインベーダーゲームなんかでもStopwatchクラスを使っています。

今回やりたいのはこのStopwatchクラスを利用して一定時間ごとに画像を切り替えるアニメーションを作成することです。
今回のポイントになるところは色を変えています。

Public Class Form1
　　Dim Imgs( ) As Bitmap '画像配列
　　Dim iNo As Integer '表示画像インデックス
　　Dim swatch As Stopwatch = New Stopwatch( ) 'ストップウォッチ

　　Public Sub New( )
　　　　(変更無しのため省略）
　　End Sub

　　Sub Init( )
　　　　Imgs = New Bitmap(3) { }
　　　　For i As Integer = 0 To Imgs.GetUpperBound(0)
　　　　　　Imgs(i) = New Bitmap("c:\anime" & i + 1 & ".bmp")
　　　　Next
　　　　iNo = 0
　　　　swatch.Reset( )
　　　　swatch.Start( )
　　End Sub

　　Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
　　　　Dim g As Graphics = e.Graphics
　　　　Dim nowTime As Double = swatch.ElapsedMilliseconds / 1000.0 'Paintメソッドを実行した瞬間の時間

　　　　'画像切り替え処理
　　　　iNo = CInt(Fix((nowTime * 2) Mod 4.0F))

　　　　'画像描画処理
　　　　g.DrawImage(Imgs(iNo), 0, 0)

　　　　Me.Invalidate( ) '強制再描画
　　End Sub
End Class

アニメーションその1ではPaintメソッド実行時にインデックスを加算して画像を切り替えました。
この方法はコンピュータによって1秒間にPaintメソッドを実行する回数が異なってしまうため、一定周期ではないという欠点を持ちます。
で、それを解決するためにStopwatchクラスを利用するわけです。
このStopwatchクラスを利用する場合は配列のインデックスを変更させるために加算するということを行いません。
画像切り替え処理のところを見てもらうと分かるように、余りを求めるだけでインデックスを変更させています。
iNo = CInt(Fix((nowTime * 2) Mod 4.0F))の処理が4つの画像を切り替えるインデックスを作成します。

nowTime*2は現在の時間を2倍にするということですが、動作のイメージとしては1秒/2=0.5秒になります。
つまり、0.5秒ごとにインデックスを変更するということです。
4倍すれば0.25秒ごとにインデックスが変更されます。

実際、この数字を色々な値に変えてみるとわかりやすいでしょう。
TimerクラスのIntervalと同じような感じです。
Intervalを100msにしたければ、10倍してあげればいいわけです。

何倍かした時間を画像数で割ったときの余りが表示するインデックスになります。
4つの画像を切り替えたければ4の余りを求めてあげましょう。
3つの画像を切り替えるのであれば、3の余りをもとめましょう。

画像の切り替えアニメーションはこんな感じで作るといいんじゃないでしょうか。