YoheiM技術やらずに終われまテン

2011-10-13 [XCODE]アニメーションを使ってみた

こんにちは、@yoheiMuneです。

今日は、UIViewを使ったアニメーションを学んだので、ブログに残しておきたいと思います。

f:id:yoheiM:20111013195554j:image




アニメーションを使い始める

アニメーションを簡単に使うには、UIViewを使うと良いようです。Core Animationというアニメーションを詳細に扱えるフレームワークもありますが、まずは簡単に使うなら、UIViewから入ると良いのではないでしょうか。

UIViewでのアニメーションは、ブロックベースメソッドiOS4以降)と、Begin/Commitメソッド(iOS3.2 or それ以前)の2種類が用意されているようです。今回は、Begin/Commitメソッドを利用します。ブロックベースメソッドは今度いつか(*´∇`*)




UIViewでアニメーション可能な対象

UIViewのメソッドアニメーションが行える対象は、以下のようです。

frameビューの位置とサイズ
boundsビューのサイズ
centerビューの位置
transformビューへの変形処理。アフィン変形を適用できる
alphaビューの透過度
backgroundColorビューの背景色
contentStretchビュー上のコンテンツ(画像など)のストレッチ方法

上記以外の要素(レイヤー関連など)をアニメーションしたい場合には、Core Animationを利用する必要があるようです。




アニメーションを実行する

UIViewのメソッドを利用してアニメーションを実現するのは、とても簡単です。

以下のように、begin/commit処理の間に、アニメーションを掛けて変更したい内容を記載するだけで、アニメーションが実現出来ます。

簡単カンタン(((o(*゚▽゚*)o)))

// アニメーションの開始を指定する
[UIView beginAnimations:@"alphaAnimation" context:nil];	

// アニメーションで変更したい内容を記載する
targetView.alpha = 0.0f; 

// アニメーションを開始する
[UIView commitAnimations];

ここでは、対象のビューを透明にするアニメーションを実現します。

beginAnimationsで指定する2つの引数ですが、1つ目がアニメーションID、2つ目がアニメーションに関連づけたい任意のデータです。

これらは、アニメーション発生時のdelegateで使いたい場合には指定しますが、必要なければnilでも大丈夫です。





アニメーションの動きを設定する

上記例では、デフォルトでのアニメーションが発生しますが、アニメーションを以下のように設定する事も可能です。


[UIView beginAnimations:@"alphaAnimation" context:nil];
	
// アニメーションの発生を2秒遅らせる
[UIView setAnimationDelay:2];
// アニメーション時間を2秒に設定する
[UIView setAnimationDuration:2];
// アニメーション動作を指定する。EaseInは、最初ゆっくり、だんだんと早く変化するアニメーション。他の種類もあります。
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
// 同じアニメーションを2度実行するように指定する
[UIView setAnimationRepeatCount:2];
	
[UIView setAnimationBeginsFromCurrentState:YES];
	
targetView.alpha = 0.0f;
[UIView commitAnimations];

上記以外にも設定出来る事項があります。さらに詳しく知りたい!!という場合には、参考文献をご覧下さい。





アニメーション発生前後で、任意の処理を挟みたい

そんな場合には、UIViewにdelegateを設定します。そうすることで、アニメーション発生前、発生後に任意の処理を実行する事が可能となります。


[UIView beginAnimations:@"alphaAnimation" context:nil];

// デリゲートを設定する
[UIView setAnimationDelegate:self];
// アニメーション開始前に呼び出されるメソッドを指定する
[UIView setAnimationWillStartSelector:@selector(animationWillStart:context:)];
// アニメーション終了後に呼び出されるメソッドを指定する
[UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];
	
targetView.alpha = 0.0f;
[UIView commitAnimations];

以下は、上記処理で設定したdelegateメソッドの例です。

// アニメーション実行前に呼び出されるメソッド。
// アニメーション開始時に指定した、アニメーションIDと任意のデータを受け取ることができるため、
// 特定のアニメーションの時だけ、何か処理をする事も可能。
- (void)animationWillStart:(NSString *)animationID context:(void *)context {
	NSLog(@"animationWillStart:context: is called.");
}

// アニメーション実行後に呼び出されるメソッド。
// finished引数は、アニメーションが完了したのか、途中で止まったのか判別するための、BOOL値が格納されている。
- (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {
	NSLog(@"animationDidStop:finished:context: is called.");
}




参考文献

以下の文献を参考にしました。ありがとうございます。

View Programming Guide for iOS

UIView Class Reference





最後に

アニメーションが実行出来るようになって、より楽しいアプリが作成出来るようになりました。

使ってて楽しいアプリを開発できるように、今後も色々と勉強していくべしバシ(`・ω・´)

以下は関連サイトです。参考になれば幸いです。

Connection: close