トランジション[3] CATransition を使う(その2)

2010年10月2日土曜日 | Published in | 0 コメント

このエントリーをはてなブックマークに追加

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

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


サンプル


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

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



実装


UISegmentedControl を2つ配置して、これらで 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

Responses

Leave a Response

人気の投稿(過去 30日間)