アニメーションに関する検証と考察
2024年4月24日更新
今回はプログラムで使用するアニメーションに関しての検証です。
プログラム中でちょっとしたアニメーションや、
動画が必要になる事は偶にあります。
その様な時に使える手法を実際に検証してみます。
写真はアニメーションを使った肩乗りマスコットです。 某超有名黒猫に似ていますがこれはその辺に居る野良の黒猫です。 リボン等の飾りっ気は有りませんが毛並みは良くひょうきん者です。 肩乗りマスコットなのでアクティブなウィンドウの右肩に乗って、 キョロキョロしたり尻尾を振ったりします。 名前は有りません。
写真はアニメーションを使った肩乗りマスコットです。 某超有名黒猫に似ていますがこれはその辺に居る野良の黒猫です。 リボン等の飾りっ気は有りませんが毛並みは良くひょうきん者です。 肩乗りマスコットなのでアクティブなウィンドウの右肩に乗って、 キョロキョロしたり尻尾を振ったりします。 名前は有りません。
-
アニメーションの方法
01 -
ブラウザ方式を検証
02 -
ピクチャーボックス方式を検証
03 -
キャンバス方式を検証
04 -
三方式の使い分け
05 -
デスクトップマスコットとして必要な機能
06 -
ウィンドウを消し去る
07 -
アクティブなウィンドウの取得で嵌った
08 -
ウェブブラウザ版サンプルの公開
09 -
ピクチャーボックス版サンプルの公開
10 -
キャンバス版サンプルの公開
11 -
まとめ
12
[ 01 アニメーションの方法 ]
アニメーションを実現する方法としては幾つか思い浮かびますが、
真っ先に思い付くのはアニメーションGIFを利用する事でしょう。
前もってアニメーションGIFを作成して置く必要がありますが、
使用時には表示するだけで済むので簡単です。
アニメーションは何枚もの静止画を極短時間で連続表示して、
目の残像現象を利用して動きを表現しています。
静止画を表示する方法としてはピクチャーボックスか、
キャンバスの使用が考えられます。
次回からそれ等の方法を実際に検証して行きます。
真っ先に思い付くのはアニメーションGIFを利用する事でしょう。
前もってアニメーションGIFを作成して置く必要がありますが、
使用時には表示するだけで済むので簡単です。
アニメーションは何枚もの静止画を極短時間で連続表示して、
目の残像現象を利用して動きを表現しています。
静止画を表示する方法としてはピクチャーボックスか、
キャンバスの使用が考えられます。
次回からそれ等の方法を実際に検証して行きます。
[ 02 ブラウザ方式を検証 ]
今回から実際に各方式を検証して行きます。
其々の方式は使用するコントロールの名前から仮に、
ウェブブラウザ方式
ピクチャーボックス方式
キャンバス方式
と呼ぶ事にします。
先ずはウェブブラウザ方式からです。
この方式は前もってアニメーションGIFを作成して置き、
それをウェブブラウザ部品に表示させます。
具体的にはアニメーションGIFを指定したHTMLファイルを用意して、
それをブラウザ部品のアドレスに指定します。
内容は下記の様に簡単なものです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>肩乗りマスコット</title>
</head>
<body >
<div>
<img src="./CatWalk_L.gif">
</div>
</body>
</html>
其々の方式は使用するコントロールの名前から仮に、
ウェブブラウザ方式
ピクチャーボックス方式
キャンバス方式
と呼ぶ事にします。
先ずはウェブブラウザ方式からです。
この方式は前もってアニメーションGIFを作成して置き、
それをウェブブラウザ部品に表示させます。
具体的にはアニメーションGIFを指定したHTMLファイルを用意して、
それをブラウザ部品のアドレスに指定します。
内容は下記の様に簡単なものです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>肩乗りマスコット</title>
</head>
<body >
<div>
<img src="./CatWalk_L.gif">
</div>
</body>
</html>
[ 03 ピクチャーボックス方式を検証 ]
ウェブブラウザ方式の次はピクチャーボックス方式です。
ピクチャーボックス自体は単に画像を表示するだけなので、
その内容を変更する仕組みを考える必要があります。
今回は8駒の画像を用意してファイル名をナンバリングしました。
繰り返しの中でカウンタを増加させる事でファイル名と対応させます。
一周したら元に戻りを繰り返して永遠にループさせます。
この方式も特に問題は無さそうです。
ピクチャーボックス自体は単に画像を表示するだけなので、
その内容を変更する仕組みを考える必要があります。
今回は8駒の画像を用意してファイル名をナンバリングしました。
繰り返しの中でカウンタを増加させる事でファイル名と対応させます。
一周したら元に戻りを繰り返して永遠にループさせます。
この方式も特に問題は無さそうです。
[ 04 キャンバス方式を検証 ]
今回はキャンバス方式の検証です。
キャンバス方式はピクチャーボックス方式より自由度が高い反面、
キャンバスコントロールを使い慣れていない場合は難易度が高いです。
勿論、ピクチャーボックスの時と同じ手法も使えますが、
キャンバスの特徴である図形オブジェクトを操作して、
セル画像を連続表示させる事ができれれば理想的です。
割り込み処理との整合性が鍵のような気がします。
実際にテストしたところセル画像を連続表示させる処迄は上手く行きましたが、
割り込み処理との併用が難しく更なる工夫が必要なようです。
キャンバス方式はピクチャーボックス方式より自由度が高い反面、
キャンバスコントロールを使い慣れていない場合は難易度が高いです。
勿論、ピクチャーボックスの時と同じ手法も使えますが、
キャンバスの特徴である図形オブジェクトを操作して、
セル画像を連続表示させる事ができれれば理想的です。
割り込み処理との整合性が鍵のような気がします。
実際にテストしたところセル画像を連続表示させる処迄は上手く行きましたが、
割り込み処理との併用が難しく更なる工夫が必要なようです。
[ 05 三方式の使い分け ]
最初に想定した三方式の何れでもアニメーション自体は可能でしたが、
やはり使用するコントロール毎に向き不向きは有るようです。
今回のテーマの冒頭で紹介した黒猫マスコットのように、
それ自体が移動しないのであればウェブブラウザ方式が簡単です。
しかし、移動を伴うアニメーションの場合、
アニメーションGIFはそれ自体が独立しているので、
途中で割り込み処理を挿むと動きがぎこちなくなり易いです。
ピクチャーボックス方式なら割り込み処理を挿み易くなりますが、
処理が多少重くなるのでデスクトップマスコットには不向きです。
これ等の二方式の問題をクリアできそうなのがキャンバス方式ですが、
プログラムの難易度が高くなってしまいます。
やはり使用するコントロール毎に向き不向きは有るようです。
今回のテーマの冒頭で紹介した黒猫マスコットのように、
それ自体が移動しないのであればウェブブラウザ方式が簡単です。
しかし、移動を伴うアニメーションの場合、
アニメーションGIFはそれ自体が独立しているので、
途中で割り込み処理を挿むと動きがぎこちなくなり易いです。
ピクチャーボックス方式なら割り込み処理を挿み易くなりますが、
処理が多少重くなるのでデスクトップマスコットには不向きです。
これ等の二方式の問題をクリアできそうなのがキャンバス方式ですが、
プログラムの難易度が高くなってしまいます。
[ 06 デスクトップマスコットとして必要な機能 ]
プログラムの中でアニメーションを利用する方法を検証していますが、
その具体的な使用例としてデスクトップマスコットを考えています。
それを実現するにはアニメーション以外にも必要な処理が有ります。
このテーマで作成するのは「肩乗りマスコット」です。
アクティブなウィンドウのタイトルバーにちょこんと乗る仕様です。
アクティブなウィンドウが変わればそちらに移動させます。
つまりアクティブなウィンドウを検出する機能が必要です。
また、プログラムのウィンドウを表示させては興覚めなので、
ウィンドウを透過させる必要があります。
更にウィンドウ枠も消し去ります。
次回はその具体的な手法について書きます。
その具体的な使用例としてデスクトップマスコットを考えています。
それを実現するにはアニメーション以外にも必要な処理が有ります。
このテーマで作成するのは「肩乗りマスコット」です。
アクティブなウィンドウのタイトルバーにちょこんと乗る仕様です。
アクティブなウィンドウが変わればそちらに移動させます。
つまりアクティブなウィンドウを検出する機能が必要です。
また、プログラムのウィンドウを表示させては興覚めなので、
ウィンドウを透過させる必要があります。
更にウィンドウ枠も消し去ります。
次回はその具体的な手法について書きます。
[ 07 ウィンドウを消し去る ]
前回、「肩乗りマスコット」を作る上でなくてはならない機能として、
アクティブなウィンドウの取得機能とウィンドウを無くす機能を挙げました。
実はそのどちらでも過去に少々嵌ったので書き残しておきます。
ウィンドウを画像の形状にする機能の事を一般的にはリージョンと言いますが、
プロデルではいくら探してもその様な機能を発見できませんでした。
リージョンとは領域の事でその閉鎖領域の外側または内側に対して、
何等かの処理を行う事を目的とした機能です。
恐らくレタッチソフトの選択機能の一部にも使われているものと思われます。
そこで別の手段としてウィンドウの背景を直接透過させる方法にしましたが、
それもすんなりとは行かず試行錯誤をする事になってしまいました。
プロデルはコントロールの背景を透明に設定する事が可能です。
同じようにウィンドウの背景を透明に設定したらエラーになりました。
「何で？？？」と思いましたがそれらしい理由を思いつきました。
他のコントロールとは異なり透明・不透明の設定に止まらず、
半透明の設定も可能にする必要があったからだと思われます。
透明色という属性を持たせてそれと背景色を同じにする事で、
その色が透明になりその度合いは透明度という属性で指定可能です。
映像処理技術の「グリーンバック」や「ブルーバック」と同じです。
後はウィンドウの形状を「枠なし」に設定すれば綺麗さっぱりなくなります。
アクティブなウィンドウの取得機能とウィンドウを無くす機能を挙げました。
実はそのどちらでも過去に少々嵌ったので書き残しておきます。
ウィンドウを画像の形状にする機能の事を一般的にはリージョンと言いますが、
プロデルではいくら探してもその様な機能を発見できませんでした。
リージョンとは領域の事でその閉鎖領域の外側または内側に対して、
何等かの処理を行う事を目的とした機能です。
恐らくレタッチソフトの選択機能の一部にも使われているものと思われます。
そこで別の手段としてウィンドウの背景を直接透過させる方法にしましたが、
それもすんなりとは行かず試行錯誤をする事になってしまいました。
プロデルはコントロールの背景を透明に設定する事が可能です。
同じようにウィンドウの背景を透明に設定したらエラーになりました。
「何で？？？」と思いましたがそれらしい理由を思いつきました。
他のコントロールとは異なり透明・不透明の設定に止まらず、
半透明の設定も可能にする必要があったからだと思われます。
透明色という属性を持たせてそれと背景色を同じにする事で、
その色が透明になりその度合いは透明度という属性で指定可能です。
映像処理技術の「グリーンバック」や「ブルーバック」と同じです。
後はウィンドウの形状を「枠なし」に設定すれば綺麗さっぱりなくなります。
[ 08 アクティブなウィンドウの取得で嵌った ]
前回に続いて今回はアクティブなウィンドウを取得する方法です。
この機能はプロデルの標準機能では見付からなかったので、
「win32 API」や「.NET」のプロセスライブラリから、
使えそうなメソッドを探したところ「getActiveWindow」と、
「setActiveWindow」が見付かり動作テストに入ったところ嵌りました。
このメソッドはエクスプローラー上のウィンドウの事ではなく、
呼び出したスレッド毎に存在するアクティブなウィンドウの事で、
そのハンドルを返すものだという事が後で分かりました。
この場合の正解は「getForegroundWindow」でした。
その後、関連する関数や定数等を使い易く纏めたものを、
プロデル開発者のゆうとさんが公式で公開されています。
今ならそちらをそっくりそのまま使用した方が楽で確実です。
内容は少々高度になりますが使うだけなら難しくありません。
公式の こちら です。
この機能はプロデルの標準機能では見付からなかったので、
「win32 API」や「.NET」のプロセスライブラリから、
使えそうなメソッドを探したところ「getActiveWindow」と、
「setActiveWindow」が見付かり動作テストに入ったところ嵌りました。
このメソッドはエクスプローラー上のウィンドウの事ではなく、
呼び出したスレッド毎に存在するアクティブなウィンドウの事で、
そのハンドルを返すものだという事が後で分かりました。
この場合の正解は「getForegroundWindow」でした。
その後、関連する関数や定数等を使い易く纏めたものを、
プロデル開発者のゆうとさんが公式で公開されています。
今ならそちらをそっくりそのまま使用した方が楽で確実です。
内容は少々高度になりますが使うだけなら難しくありません。
公式の こちら です。
[ 09 ウェブブラウザ版サンプルの公開 ]
自作プログラムでアニメーションを利用する三方式を紹介しました。
今回はウェブブラウザ方式で作成した実際に動くプログラムを公開します。
この方式ではそれだけで独立したアニメーションGIFを使用するので、
タイマーを使用して割り込み処理を行っています。
尚、プログラムで使用しているアニメーションGIF素材は、
ちいこ氏 が運営されている「うごイラ」から使用させて頂きました。
うごイラ（https://freesozaixtrain.web.fc2.com/）
※「肩乗りマスコット」のダウンロードは こちら から。
今回はウェブブラウザ方式で作成した実際に動くプログラムを公開します。
この方式ではそれだけで独立したアニメーションGIFを使用するので、
タイマーを使用して割り込み処理を行っています。
尚、プログラムで使用しているアニメーションGIF素材は、
ちいこ氏 が運営されている「うごイラ」から使用させて頂きました。
うごイラ（https://freesozaixtrain.web.fc2.com/）
※「肩乗りマスコット」のダウンロードは こちら から。
[ 10 ピクチャーボックス版サンプルの公開 ]
前回はウェブブラウザ方式の「肩乗りマスコット」を公開しました。
今回はピクチャーボックス方式の「肩乗りマスコット」を公開します。
ウェブブラウザ方式ではタイマーを使って割り込み処理を行っていますが、
ピクチャーボックス方式ではセルの間に任意の処理を挿めるので、
タイマーを使っての割り込み処理は行っていません。
アニメーションGIF素材は ちいこ氏 が運営されている「うごイラ」から、
表現方式の違いを確認しやすいように前回と同じものを使用させて頂きました。
但し静止画に分割して使用しています。
うごイラ（https://freesozaixtrain.web.fc2.com/）
※「肩乗りマスコット」のダウンロードは こちら から。
今回はピクチャーボックス方式の「肩乗りマスコット」を公開します。
ウェブブラウザ方式ではタイマーを使って割り込み処理を行っていますが、
ピクチャーボックス方式ではセルの間に任意の処理を挿めるので、
タイマーを使っての割り込み処理は行っていません。
アニメーションGIF素材は ちいこ氏 が運営されている「うごイラ」から、
表現方式の違いを確認しやすいように前回と同じものを使用させて頂きました。
但し静止画に分割して使用しています。
うごイラ（https://freesozaixtrain.web.fc2.com/）
※「肩乗りマスコット」のダウンロードは こちら から。
[ 11 キャンバス版サンプルの公開 ]
今回は３方式の残された最後のキャンバス方式です。
画像を表示するだけならピクチャーボックスとあまり変わらないので、
ピクチャーボックス方式と同様の手法でも可能です。
それでは詰まらないので少しだけ工夫をしてみます。
予めセル画を整然と並べて１枚の画像にしておきます。
マスコットの起動時に繰り返し文の中で順番に切り出して配列に入れます。
その後、繰り返し文の中で順番に入れ替えて連続表示させます。
画像オブジェクトの配列になっているので繰り返しとの相性も良いです。
これはゲームのマップ等で良く使われる昔から在る手法です。
ピクチャーボックス方式と同様で繰り返しの中に任意の処理を挿めるので、
タイマーを使っての割り込み処理は行っていません。
今回はこのキャンバス方式の「肩乗りマスコット」を公開します。
アニメーションGIF素材は ちいこ氏 が運営されている「うごイラ」から、
前回と同じ猫の画像を使用させて頂きました。
うごイラ（https://freesozaixtrain.web.fc2.com/）
※「肩乗りマスコット」のダウンロードは こちら から。
画像を表示するだけならピクチャーボックスとあまり変わらないので、
ピクチャーボックス方式と同様の手法でも可能です。
それでは詰まらないので少しだけ工夫をしてみます。
予めセル画を整然と並べて１枚の画像にしておきます。
マスコットの起動時に繰り返し文の中で順番に切り出して配列に入れます。
その後、繰り返し文の中で順番に入れ替えて連続表示させます。
画像オブジェクトの配列になっているので繰り返しとの相性も良いです。
これはゲームのマップ等で良く使われる昔から在る手法です。
ピクチャーボックス方式と同様で繰り返しの中に任意の処理を挿めるので、
タイマーを使っての割り込み処理は行っていません。
今回はこのキャンバス方式の「肩乗りマスコット」を公開します。
アニメーションGIF素材は ちいこ氏 が運営されている「うごイラ」から、
前回と同じ猫の画像を使用させて頂きました。
うごイラ（https://freesozaixtrain.web.fc2.com/）
※「肩乗りマスコット」のダウンロードは こちら から。
[ 12 まとめ ]
「肩乗りマスコット」のようにプログラムでアニメーションを利用する場合、
使用するコントロールで分類して「ウェブブラウザ方式」と「キャンバス方式」、
および「ピクチャボックス方式」のそれぞれについて検証して来ました。
マスコット自体の位置が移動しないのであれば「ウェブブラウザ方式」、
移動が伴うのであれば「ピクチャボックス方式」か「キャンバス方式」となり、
「ウェブブラウザ方式」で移動が伴うマスコットを作成するのは困難でした。
それでは移動を伴う「肩乗りマスコット」を作成する場合、
「ピクチャボックス方式」と「キャンバス方式」の何方がベストなのか。
ファイルのサイズ的には「ピクチャボックス方式」の方が有利です。
少し込み入った事をさせるなら「キャンバス方式」が柔軟に対応できそうです。
使用するコントロールで分類して「ウェブブラウザ方式」と「キャンバス方式」、
および「ピクチャボックス方式」のそれぞれについて検証して来ました。
マスコット自体の位置が移動しないのであれば「ウェブブラウザ方式」、
移動が伴うのであれば「ピクチャボックス方式」か「キャンバス方式」となり、
「ウェブブラウザ方式」で移動が伴うマスコットを作成するのは困難でした。
それでは移動を伴う「肩乗りマスコット」を作成する場合、
「ピクチャボックス方式」と「キャンバス方式」の何方がベストなのか。
ファイルのサイズ的には「ピクチャボックス方式」の方が有利です。
少し込み入った事をさせるなら「キャンバス方式」が柔軟に対応できそうです。