さてさて。前回の実機動作、いかがでしかた？
普段使っているiPhoneで、自分の作ったアプリが動いてる。
「嬉しい」プラス「不思議な気分」がしますよね。
なんだかiPhoneっていう世の中の流れに自分も参加しているような。
使ってるだけじゃ味わえませんよ。この感じ。
まだ体験してない人はすぐにやってみましょう。
実機ダヨ！全員集合！Provisioning Profileの取得
今回は次の面白テーマ、アニメーションのお話です。
うげぇ。
無理ー。
まあまあ。少々お待ちを。
アニメーションって聞くと何を思い浮かべますか？
・ウォーリー
・ポニョ
・キン肉マン
まぁそんなところですよね。
この3つに全て共通していることがあります。
なんでしょう？
それは全て「目の錯覚によって動いて見える」ということです。
人間様は、目と脳で常に「光を映像に直してつなげる」処理を行っています。
アナタが今何気なく見ている目の前の光景も、極限まで細かく見れば静止画の連続です。
小さい頃、教科書の隅にパラパラ漫画って書きましたか？
何枚も何枚もちょっとだけズレた絵を描いておいて、
パラパラ～っとめくると動いて見える。
あれが何故動いて見えるのか。
脳が残像を元に勝手に映像をつなげてしまうからです。
人間は、
1秒間に12パラパラされると、スムーズに動いていると錯覚し始めます。
反対に1秒間に70パラパラを超えると、脳の知覚限界に達してそれ以上スムーズに見えなくなります。
※この辺詳しくは wikipedia参照
一般的な映画では1秒間に24パラパラ。
「滑らかすぎて気持ち悪い」とまで言われるゲームソフト「グランツーリスモ」では、1秒間に60パラパラという凄まじいスピードで映像を切り替えています。
ちなみに、この1秒間に何パラパラ、という表現を正式には
fps: frame per second
と言います。
1秒間に24パラパラ = 24fps です。
アニメーションは、基本的に隣の席の佐藤君が描いたパラパラ漫画だろうとピクサーが作ったウォーリーだろうと同じ原理で動いているのです。
ということは当然。
iPhoneのアニメーションだって同じ原理で動いているに違いない。
と、考えた上で、Xcodeを立ち上げましょう。
今回も毎度お馴染みの「山田君、あと何日？カウンター」を使います。
この中で動いて面白そうなのは、
「あと何日？」ボタン
ですかね。
じゃ。コレを動かしましょう。
IBOutlet UIButton *moveButton;
まずはアウトレットをビューコントーラーのヘッダーファイル（拡張子.h）に1つ追加して下さい。
ボタンをプログラムからどうこうする必要が今までありませんでしたので、
アウトレットを定義していませんでした。
-(void)move:(NSTimer *)timer;
もう1つはメソッドを追加します。
アクションとしてビュー上の何かから呼ばれるのではなく、
一定時間が来たら動く、タイマー起動のメソッドを追加します。
※このへんの書き方も別のタイミングでお話ししますので、今回はコピペで。
で、追加したアウトレットと、ビュー上のボタンを接続、と。
次にまたXcodeに戻って、今度はビューコントーラーのソースコードファイル（拡張子.m）の
– (void)viewDidLoad { }
の中に
[NSTimer scheduledTimerWithTimeInterval:1
target:self
selector:@selector(move:)
userInfo:nil
repeats:YES];
こんな感じでタイマーを作成します。
ちょっと難しいですね。
書いている内容は「1秒ごとにmoveってメソッドを動かせ」ってことだけです。
で、もう1つ
-(void)move:(NSTimer *)timer{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1];
int xPos = rand() % 320;
int yPos = rand() % 480;
moveButton.center = CGPointMake(xPos,yPos);
[UIView commitAnimations];
}
ヘッダーファイルにも追加した、moveというメソッドの中身です。
[UIView beginAnimations:nil context:nil]; – アニメ始めますよ～
[UIView setAnimationDuration:1]; – 1秒間アニメ続けますよ～
int xPos = rand() % 320; – 0から320の中でランダムな数字を作ります～
int yPos = rand() % 480; – 0から480の中でランダムな数字を作ります～
moveButton.center = CGPointMake(xPos,yPos); – 上で作った2つの数字をボタンの座標にセット～
[UIView commitAnimations]; – アニメここまで～、それじゃ実行～
はい、小難しいコード説明はここまで。
要は何をしたいの？というと。
・1秒ごとにタイマーを動かして
・新しいX,Y座標をランダムで作って
・1秒間かけて現在地から新しいX,Y座標までボタンを動かす←ここがアニメ。
・動き終わる頃には次のタイマーが作動
＜以下繰り返し＞
こんなことをしようしています。
ボタンがどんどん逃げて行く。
まさに「山田君、あれ、山田君？あと何日か教えて！カウンター」へ進化。
ぽちっとな。
びよーん。
びよーん。
びよーん。
嗚呼、動画で伝えられないのがもどかしい。
見事なまでに逃げてます。
あれ？
動いたのは良いけどパラパラは？
1秒間アニメを動かす。
[UIView setAnimationDuration:1];
こいつが鍵を握っているのはわかるのですが、
・1秒間に何パラパラさせるか
・アニメ開始から終了までの細かい調整
この辺がピンと来ませんね。
ということで、次回アニメーション２に続きます。