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

2010年10月1日金曜日 | Published in | 0 コメント

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

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

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


iOS Reference Library 提供のサンプル


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



トランジションの種類は4種類。さらにサブタイプ(方向を決める)を持つものがある。
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);

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


ソースコード


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

2つの 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 を使うのと、2つの 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の日々: 波紋(その1)

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

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

#import <QuartzCore/QuartzCore.h>

自作サンプル


実行してみよう。

ボタンを押すと次の画像にジワジワと切り替わる。



ソースコードは GitHub からどうぞ。
TransitionSample2 at 2010-10-01 from xcatsan's iOS-Sample-Code - GitHub



- - - - -
CATransition は他にもあるので試してみよう。

Responses

Leave a Response

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