iPhone/programing

Animating UIView

Posted on by forte

OSXのLeopardからCoreAnimationというフレームワークが追加された。それによってCoverFlowなんかを実現している。それまでは空間的な管理しか行わなかったGUIシステムにおいて、時間の管理もOSが面倒を見てくれるようになったというのが、CoreAnimationのキモなのではないかと思う。

そして、OSX系の流れをくむiPhoneOSにもCoreAnimationは含まれている。iPhoneOSはOSXの紆余曲折のまだ後の方に出たということもあり、構造的にはモバイルOSにしてはかなりモダンな、OSXの成功も失敗も踏まえた上で設計されていると感じることがある。

さて、iPhoneのCoreAnimationだけど、かなりお手軽に使う方法が用意されている。ダイアログをビヨヨンとだしたり、スライドしてカットインさせたり、はたまた二つのViewをクロスディゾルブさせたり。UIViewControllerのトランジション効果なんかにもプリセットのアニメーションパターンが用意されているのだけど、簡単なお約束でアニメーションさせることが出来るので使わない手はない。

今回デモ用にEscapeButtonというジョークソフトを軽く組んでみた（ほんとに数行しか書いてない）。名前からして出落ちな感もあるけど、実装を見つつご紹介しようと思う。

UIViewをアニメーションさせる

EscapeButtonのソースコードはここ(EscapeButton.zip)にある。

CoreAnimationではCALayerクラスおよび、その派生クラスを扱うのだけど、UIViewにはCoreAnimationを意識せずに使う方法が用意されている。基本のお約束の型はこんな感じ。

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.25];  // アニメーション時間
// ここにアニメーションさせたいUIViewのゴール時の状態を設定する
[UIView commitAnimations];

とりあえず、これだけで指定のUIViewがアニメーションする。たとえばalphaのプロパティ値を０にすればフェードアウトするといった具合に。

ただし、どのプロパティでもアニメーションできるかというと残念ながらそれはできない。ジオメトリ的な事（位置や回転拡大など）、カラー的な事に限られてると考えておいた方が良いだろう（詳しい話はCoreAnimationを見る必要がある）。

さて、EscapeButtonはボタンが押されたらそのボタンが逃げる。いきなりワープするんじゃなくて、するするとアニメーションしつつ上と下を行ったり来たりする。その部分のソースはこんな感じになっている。

- (IBAction)buttonTouchedDown:(id)sender
{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.25];
CGRect frame = _button.frame;
if (!_side)
frame.origin.y = 360;
else
frame.origin.y = 120;
_side = !_side;
_button.frame = frame;
[UIView commitAnimations];
}

ボタンと、このアクションはInterfaceBuilderにおいてUIControlEventTouchDownイベントで接続している。

やっていることは先ほどの基本の型そのままだ。そして、今いたところとは反対側に移動させる。そのためにボタンのframeを取得してＹ座標を書き換えてセットしている。これだけなんだけど、ボタンを押すとするすると逃げるという操作が実装できてしまう。

チェーンアニメーション

もう少し複雑なアニメーションの実装をしてみよう。今度はUIViewControllerのviewが表示されるときに回転しながら拡大していき、丁度の位置より行き過ぎて戻るというアニメーションだ。

まずは仕込みだ。初期の段階で縮めておき、さらに９０度回転させておく。

- (void)viewWillAppear:(BOOL)animated
{
CGAffineTransform t = CGAffineTransformMakeScale(0.1, 0.1);
self.view.transform = CGAffineTransformRotate(t, M_PI_2);
}

UIViewにはtransformというプロパティがあり、そこに２次元変換行列を設定することが出来る。CGAffineTransform〜という関数が用意されていて移動(Translate)、拡大(Scale)、回転(Rotate)が設定できる。回転の角度の指定は度ではなくラジアンだ。まずMakeがついているものでCGAffineTransformを作成し、必要なだけ行列を掛けていく。行列の掛ける順番は意味があるので注意が必要だ（移動してから回転するのと、回転してから移動したのでは結果が異なる）。

そしてViewが表示されたのと同時にアニメーションを開始する。

- (void)viewDidAppear:(BOOL)animated
{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(_didEndAnimation)];
CGAffineTransform t = CGAffineTransformMakeScale(1, 1);
self.view.transform = CGAffineTransformRotate(t, -M_PI_2);
[UIView commitAnimations];
}

大体は基本の型どおりで、アニメーション終了後に拡大率等倍（＝１）、回転がさらに９０度過ぎた位置になるようになっている。

基本と違うのはsetAnimationDelegate:とsetAnimationDidStopSelector:が追加されていることで、これは想像の通り、アニメーションが終了したときに指定したターゲットのメソッドが呼ばれるように設定している。

このように終了時にメソッドを呼び出すことによって、例えば禁止していた処理を許可したり、次のアニメーションの再生を開始させたりすることが出来る。今回はさらに０度の位置に戻すようにアニメーションをさせる。

- (void)_didEndAnimation
{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.25];
self.view.transform = CGAffineTransformMakeScale(1, 1);
[UIView commitAnimations];
}

これは基本通り。単位行列にしている（変形無し）。

これで回転しながら拡大し、ちょっと行き過ぎて戻るというアニメーションが完成した。このView Controllerが表示されるときはこのアニメーションが表示される。プリセットのトランジションにはない効果が簡単に実装できる（今回は重ね合わせに関しては実装をサボっている）。

CoreAnimationを直接使うともっと複雑なことが出来るのだけど、UIViewのラップされたインターフェイスでも、結構動きのあるインターフェイスを実現することが出来る。なかなかお手軽なわりには効果は大きいんじゃないだろうか。

forte