開発基礎トレ5:アニメーションの基礎知識 その2

サルでき.jp > 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) > 開発基礎トレ5:アニメーションの基礎知識 その2

2009/08/24 09:00 投稿先 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) 投稿者 カワサキ タカシ

・1秒間に何パラパラさせるか
・アニメ開始から終了までの細かい調整

この辺がピンと来ませんね。
ということで、次回アニメーション2に続きます。

と、書きましたね。この人は。
開発基礎トレ4:アニメーションの基礎知識 その1

こりゃ~ちゃんと調べなきゃ、といろいろと見て回ったのですが。

調べても、ピンと来ませんでした。

ず、ずんまぜんm(_ _)m

Flash型で理解しようと思っている私がどーも悪いようです。

<Flash?雑誌?という方のために、ちょっと解説>

Flashってのは典型的なパラパラ漫画型アニメーション作成ツールでして、
前回お話ししたところの「1パラパラ」にあたる「フレーム」ごとに、
描かれている絵の状態をすこーしずついじっていくことで、アニメーションを作ります。
(実際に絵を動かしながら作ることも、プログラムで作ることもできます。超オールマイティー型、っていうか、過去の買収の経緯で、過去の遺物の残骸がたくさん。。。)

例えば、サッカーのシュートシーンをFlashアニメで描くとすると、

・<フレーム開始>
・ボールの絵をX軸に5ピクセル移動(座標設定)
・ゴールの絵の拡大率を2%アップ(拡大率設定)
・ゴールキーパーの絵を3度回転(回転度数設定)
・観客の声の絵の不透明度を10%アップ(アルファ(透明度)設定)
・今描かれている画面をクリア
・設定したプロパティ通りに再描画
・<フレーム終了>

こんな感じが1フレームとなって、これを何フレームも処理させることで動いて見えます。

こんなの1パラパラの間でできるかい!って思うでしょ。

できるんです。

コンピューターなめちゃいけません。
これを1秒間に12回やるなんてコンピューターからすれば朝飯前です。

朝飯食いませんけど。
っていうか処理終わらないと次のパラに進んでくれないだけですけど。

でも、20回超えた位からモノによっては悲鳴が上がりはじめます。
(あ、このへんは全部ニュアンス、ですよ。3Dでディズニーランドを作って全部動かしたら1秒に1パラでも回りませんからね。だからアニメにはもう1つ、ムービー形式のアニメがあるんです。1パラ作るのに1時間とかかかる絵を、何日もかけて1枚ずつ描いていって、保存して、で、一気に再生する。そんな形式です。リアルタイムでまさに今目の前で絵を描いているか、描き貯めておいて一気に見せるか。そういう違いです。詳しくはまたどこかで。)

滑らかなアニメーションのために60fpsとか設定してしまうと、
高性能デスクトップマシンなら耐えられるかもしれませんが、
ノートパソコンではガックガクです。

アニメのコツはこのへんにあって、
「滑らかさ」と「処理の重さ」の絶妙なバランスが求められます。

Flashの場合は、
基本となるfpsは開発側で設定した上で、再生する時のオプションを

・品質優先で再生する(ガクガクしてもベストクオリティ)
・速度優先で再生する(画像が悪くなってもスピードは滑らか)

なんて感じで設定しておくことができます。

<ちょっと解説、ここまで>

だからー。

当然iPhoneもそういう感じかと思ってこの話始めたのにー。

ググっても誰も書いてないしー。

リファレンス見てもピンと来るものないしー。

アタシー。

タワシー。

どうも。自動設定のようです。
(2009年8月24日現在、お父ちゃん調べ)

処理が重くなったら勝手にパラパラが少なくなり、
処理が軽くなったら勝手にパラパラが多くなる。

努力の価値はプライスレス。ベストエフォート型。

らしい。
※詳しい方。大変申し訳ございません。もしご存知でしたら教えていただけると。

なんでここにこんなに引っかかっているかと言いますと、
前回見ていただいた。

[UIView setAnimationDuration:1];
コイツ。

アニメを1秒間やり続けててね~。

って指示なんですけど、
ざっと見たところ、iPhoneでアニメをやるときのコードは、

[UIView beginAnimations] でアニメを始める宣言をして

この間に、アニメさせたい処理を書いて

[UIView commitAnimations] でアニメを実行する

って感じで書きます。
その間で設定できることは、

[UIView setAnimation Duration] 1回のアニメが続く時間
[UIView setAnimation Delay] アニメが開始するまでの時間
[UIView setAnimationRepeatCount] アニメを繰り返す回数
[UIView setAnimationRepeatAutoreverses] アニメが終わったら終わりから反転再生
[UIView setAnimation Curve] アニメ内での速度(イーズイン/アウト)

こんな感じ。(リファレンスにはあと何個か。正体不明の未確認コマンドが。)

だ、大丈夫かしら?って思っちゃうんです。私。

いや、多分慣れの問題だとは思うんですけど。
ええ、いや。ホントに。いやいや。なーんつうか。気持ちわるっていうか。やっぱりフレームいらないの?っていうか。処理を実行してる最中の「秒(時間)」なんて信用できたもんじゃねーだろーっていうか。

とりあえず、今わかってるアニメの動かし方を雰囲気でまとめておきます。

・「アニメを動かすよ!宣言」をする
・「動かす対象」となっているブツの「アニメ後」の状態を記述する
・「何秒でそこまで辿り着くか」を記述する
・「繰り返す」のであればその「回数」を記述する
・「イーズイン(アニメ開始時にゆっくり動き始め、だんだん速く)/イーズアウト(アニメ終了時にだんだん遅くなって、停止)」がしたいのであれば、それを記述する
・「コレでヨシ。動け!宣言」をする

指定した秒数無理なく動くアニメがアナタのものに。

すげぇな。。。秒か。。。

逆にiPhoneアプリ開発から入った人にはわかりやすいカモ、です。

Keynoteのトランジション組むくらいの感覚でできるようになるかもしれません。

私のように存在しないトラップに勝手に引っかかることなく、
アニメ作る感覚を身体に馴染ませちゃいましょう!

関連する記事:


Advertisement