2012/11/22更新

[XCODE] UIViewで簡単に実現できるアニメーションの実装方法のご紹介

こんにちは、@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

最後に

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

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