WindowsなどのGUIを用いるプログラム上に画像ファイルなどから画像を表示することも普通になってきました。
中にはアニメーションを行う画像ファイルもあり、よく見かけるものに「アニメーションGIF」があります。
これはブラウザ上に表示するときに多く使用されており、小さな動作などを入れることができるのでページを目立たせたりできます。
今回はこの「アニメーションGIF」をC#プログラムで表示させて、動かしてみます。
とにかく表示する
アニメーションGIFに限らず、C#プログラムで画面(フォーム)に画像を表示するには、画像ファイルを読みこみ、System.Drawing.Bitmapクラスオブジェクトを生成しておき、そのBitmapクラスオブジェクトをフォームやコントロールのImageプロパティや、BackgroundImageプロパティなどにセットするだけでも「表示する」ことはできます。
コードはこのような感じです。
private Bitmap _image = null;
private void Form1_Load(object sender, EventArgs e)
{
// フォームを表示するときの処理
// 画像ファイルをロードする
_image = new Bitmap(System.IO.Path.Combine(Application.StartupPath, "loading.gif"));
// pictureBox1の背景画像としてセット
pictureBox1.BackgroundImage = _image;
}
このコードが実行されると、画像が「表示」されます。
このコードに登場する、”loading.gif”というファイルは「アニメーションGIF」ファイルですが、
このコードだけでは、画像を「表示はしますが、動きません」。
アニメーションGIFを動かす
せっかくアニメーションGIFファイルを読み込んで表示しても、動かなければただのGIFファイルです。
アニメーションを行う画像ファイルは、内部に何枚もの画像データを保持しています。
ですので、プログラムでアニメーションを動かそうと思ったら、このデータを順番に切り替える動きを作ってあげなければいけません。
この点において、.NET frameworkにはSystem.Drawing.ImageAnimatorクラスという「画像をアニメーションで描画するためのクラス」があります。
コードはこのようになります。
private Bitmap _image = null;
private void Form1_Load(object sender, EventArgs e)
{
// フォームを表示するときの処理
// 画像ファイルをロードする
_image = new Bitmap(System.IO.Path.Combine(Application.StartupPath, "loading.gif"));
// pictureBox1の背景画像としてセット
pictureBox1.BackgroundImage = _image;
// 描画(Paint)イベントハンドラを追加
pictureBox1.Paint += pictureBox1_Paint;
// アニメーション開始
ImageAnimator.Animate(_image, new EventHandler(Image_FrameChanged));
}
private void Image_FrameChanged(object o, EventArgs e)
{
// Paintイベントハンドラを呼び出す
pictureBox1.Invalidate();
}
void pictureBox1_Paint(object sender, PaintEventArgs e)
{
// イベントハンドラ：ピクチャボックスの描画
ImageAnimator.UpdateFrames(_image);
}
急にコードが増えた感じですが、このサンプルコードからプログラムを作成し、実行すると、読み込まれたアニメーションGIFは動きます。
説明
追加した動作は、主に
- アニメーションGIFのイメージを張り付けたコントロールの描画イベントハンドラをオーバーライドする(pictureBox1_Paint)。
- ImageAnimatorクラスに「フレーム更新時のイベントハンドラ」を追加(Image_FrameChanged)。
です。
1.のイベントハンドラ”pictureBox1_Paint”では、「ImageAnimatorクラスのフレーム更新」を呼んでいます。
2.のイベントハンドラ”Image_FrameChanged”では、「pictureBox1(アニメーションGIFの画像を表示しているコントロール)の描画更新」を読んでいます。
この実装を行うと、1.と2.のイベントハンドラはお互いのイベントが発生する呼び出しを繰り返すので、無限に処理が呼ばれつづけます。
→これによりアニメーションの繰り返し動作を実現しています。
補足
このようにアニメーションGIFなどでアニメーションを行うということは、アニメーションの画像表示のために「画面の表示更新」を延々と呼ぶことになります。
見た目にはきれいでよいのですが、
アニメーションを行う＝画面の表示更新が頻繁に発生する。
という点には注意を払う必要がありそうです。
