Cocoaの日々

[前回] Cocoaの日々: トランジション[2] CATransition を使う

前回のコードに手を入れていろいろなトランジションを試してみよう。

サンプル

まずは実行画面から。４つのタイプと４つのサブタイプが選べる。

Fade-right でトランジション実行

実装

UISegmentedControl を２つ配置して、これらで CATransition.type, subType を指定する。追加したのはそれだけ。

@property (nonatomic, retain) IBOutlet UISegmentedControl* mainType;
@property (nonatomic, retain) IBOutlet UISegmentedControl* subType;

// transition
 CATransition* transition = [CATransition animation];
 transition.duration = self.slider.value;
 transition.timingFunction = [CAMediaTimingFunction
           functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
 
 NSString *maintypes[4] = {kCATransitionMoveIn, kCATransitionPush,
                                  kCATransitionReveal, kCATransitionFade};
 NSString *subtypes[4] = {kCATransitionFromLeft, kCATransitionFromRight,
                                   kCATransitionFromTop, kCATransitionFromBottom};

 transition.type = maintypes[mainType.selectedSegmentIndex];
 if (mainType.selectedSegmentIndex < 3) {
  transition.subtype = subtypes[subType.selectedSegmentIndex];
 }

UISegmentedControlは、本当はこんな使い方しないんだろうけれど ;;

備考

アニメーションを行うビューを UIViewController のビューにした場合、画面全体がトランジション対象になる。

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

 画面の一部だけをトランジションする場合、アニメーション用にベースとなるビューを用意してそこでアニメーションさせる。

[self.baseView.layer addAnimation:transition forKey:nil];

なお Fade と MoveIn の場合はベースのビューの外側もアニメーションで使われる。以下は MoveIn+Top とした場合の例。

ソースコード

GitHub からどうぞ。 xcatsan's iOS-Sample-Code at 2010-10-02 - GitHub