UINavigationController のアニメーションを変更する : Objective-C プログラミング

PROGRAM

UINavigationController のアニメーションを変更する

UINavigationController で pushViewController:animated: や popViewControllerAnimated: を使ったときは、既定では、進むときには右へ、戻るときには左へ、アニメーションするようになっています。

このアニメーションのスタイルは、CATransition を使って変更することができます。

なお、UIViewController を UINavigationView を使わずにモーダル表示したいときや、そのアニメーションの設定はモーダルビュー表示時のアニメーションを変更するで紹介している方法を使用します。

CATransition を使う準備

CATransition は QuartzCore.framework を使用しているため、まずはこの機能を使用するソースファイル (.m) などに、次のようにして QuartzCore.h ファイルを組み込みます。

#import <QuartzCore/QuartzCore.h>

また、プロジェクトの TARGET 設定で、"Build Phases" の "Link Binary With Libraries" のところに、QuartzCore.framework を追加する必要があります。

アニメーションを指定する

アニメーションは、UINavigationController で pushViewController:animated: や popViewControllerAnimated: をするたび毎に、UINavigationController が持つ UIView の layer に対して設定する必要があるようです。

たとえば、プッシュ時に上からスライドしてくるアニメーションにしたい場合は、次のような感じにすることで実現できます。

// アニメーションを準備します。

CATransition* transition = [CATransition animation];

transition.duration = 0.4;

transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

transition.type = kCATransitionMoveIn;

transition.subtype = kCATransitionFromBottom;

// UINavigationController にアニメーションを設定して、プッシュを行います。

[self.navigationController.view.layer addAnimation:transition forKey:nil];

[self.navigationController pushViewController:self.configurationViewController animated:NO];

このとき、UINavigationViewController の pushViewController:animated: では animated を NO にしないと、上に動く動作と合わせて、通常通りの左から右への動作もしてしまうようでした。

アニメーションの種類は kCATransitionMoveIn にすることで、既存のビューを固定したまま、プッシュされるビューが動いてくるように見せることができます。

また、ポップ時に下からスライドして消えるアニメーションにしたい場合は、次のようにします。

// アニメーションを準備します。

CATransition* transition = [CATransition animation];

transition.duration = 0.4;

transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

transition.type = kCATransitionReveal;

transition.subtype = kCATransitionFromTop;

// UINavigationController にアニメーションを設定して、プッシュを行います。

[self.navigationController.view.layer addAnimation:transition forKey:nil];

[self.navigationController popViewControllerAnimated:NO];

こちらも、popViewControllerAnimated: の animated を NO にするところに注意します。

アニメーションの種類は kCATransitionReveal にすることで、ポップ後に表示されるビューを固定したまま、ポップされるビューを動かしているように見せることができます。

CATransition アニメーションの種類

CATransition のアニメーションでは、アニメーションの動作を定義した関数と、"type" と "subtype" を指定して、どのようにアニメーションを行うかを簡単に指定できるようになっています。

アニメーションを定義する関数 (timingFunction) は、CAMediaTimingFunction クラスによって、次の名前の関数が用意されています。

kCAMediaTimingFunctionLinear	常に同じ速度でアニメーションを適用します。
kCAMediaTimingFunctionEaseIn	アニメーションの開始直後がもっとも遅く、次第に速くなっていくアニメーションです。
kCAMediaTimingFunctionEaseOut	アニメーションの開始直後がもっとも速く、次第に遅くなっていくアニメーションです。
kCAMediaTimingFunctionEaseOut	アニメーションの開始は遅い速度で始まり、中間でもっとも速くなった後、終了にかけて次第に遅くなっていくアニメーションです。
kCAMediaTimingFunctionDefault	(0.0, 0.0), (0.25, 0.1), (0.25, 0.1), (1.0, 1.0) をコントロールポイントとするベジェタイミング関数で行うアニメーションです。

これを CAMediaTimingFunction クラスの +functionWithName: メソッドでインスタンス化して、CATranstion の timingFunction として指定します。

また、CATransition の type に指定できるキーワードは次の通りです。

kCATransitionFade	表示中のものが薄らと消えて行きながら、次のものが次第に表示されるスタイルです。
kCATransitionMoveIn	現在表示されている画面に、新しい画面がスライドして入るスタイルです。さらに subtype を使って動作を調整します。
kCATransitionPush	現在表示されている画面を押し出すように、新しい画面がスライドして入るスタイルです。さらに subtype を使って動作を調整します。
kCATransitionReveal	新しい画面が裏で準備された状態で、現在表示されている画面が幕のように移動して非表示になるスタイルです。さらに subtype を使って動作を調整します。

いくつかの type は、CATransition の subtype に次のどれかを指定して、移動方向を決定します。

kCATransitionFromRight	右端からアニメーションを開始します。
kCATransitionFromLeft	左端からアニメーションを開始します。
kCATransitionFromTop	上端からアニメーションを開始します。
kCATransitionFromBottom	下端からアニメーションを開始します。

subtype は、アニメーションを開始する位置であって、移動方向ではないことに注意します。

たとえば、新しい画面を kCATransitionMoveIn を使って上からスライドして入ってこさせたい場合には、新しい画面の下端からアニメーションが始まるので、subtype は kCATransitionFromBottom を指定することになります。

[ もどる ]