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

トランジション[2] CATransition を使う

2010年10月1日金曜日 | Published in Core Graphics, iOS 4.0, iPhone, サンプルあり | 0 コメント

[前回] Cocoaの日々: UIView - トランジション[1] 標準のもの

今回は CATransitionを使ったトランジションを試してみる。

iOS Reference Library 提供のサンプル

"Transition"ボタンを押すとランダムに選ばれたトランジション効果が適用される。
ViewTransitions

トランジションの種類は４種類。さらにサブタイプ（方向を決める）を持つものがある。
CAAnimation.h より

CA_EXTERN NSString * const kCATransitionFade
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
CA_EXTERN NSString * const kCATransitionMoveIn
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
CA_EXTERN NSString * const kCATransitionPush
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
CA_EXTERN NSString * const kCATransitionReveal
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

これを参考にサンプルを作ってみよう。

ソースコード

とりあえず凝ったことはしないで一番シンプルな作りにした。

２つの UIImageView を予めInterfaceBuilderで用意しておく。

@interface TransitionSample2ViewController : UIViewController {

 UIImageView* imageView1;
 UIImageView* imageView2;

 UISlider* slider;
 UILabel* duration;

 NSMutableArray* images;
 NSInteger imageIndex;

}
@property (nonatomic, retain) IBOutlet UIImageView* imageView1;
@property (nonatomic, retain) IBOutlet UIImageView* imageView2;

@property (nonatomic, retain) IBOutlet  UISlider* slider;
@property (nonatomic, retain) IBOutlet  UILabel* duration;

@property (nonatomic, retain) NSMutableArray* images;

-(IBAction)didChangeDuration:(id)sender;
-(IBAction)doTransition:(id)sender;

@end

トランジション処理。CATransition を使うのと、２つの UIImageViewを切り替えるのがミソ。

-(IBAction)doTransition:(id)sender;
{
 // setup next image
 imageIndex = (imageIndex+1)%8;
 imageView2.image = [images objectAtIndex:imageIndex];
 
 CATransition* transition = [CATransition animation];
 transition.duration = self.slider.value;
 transition.timingFunction = [CAMediaTimingFunction
   functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
 transition.type = kCATransitionFade;
 
 [self.view.layer addAnimation:transition forKey:nil];
 
 imageView1.hidden = YES;
 imageView2.hidden = NO;
 
 UIImageView* tmp = imageView2;
 imageView2 = imageView1;
 imageView1 = tmp;
}

このあたりは Mac OS X と変わらない。以下は過去 Mac OS X でやったときのブログ。
(旧) Cocoaの日々: スライドトランジション
(旧) Cocoaの日々: 波紋（その１）

Mac OS X の場合は Core Image をアニメーションエフェクトに使えるのでさらに派手な効果が出せる。

なお CATransition 利用には QuartzCore.framework を追加し、QuartzCore.hを読み込んでおく必要がある。