スライドトランジション

SimpleViewerのキャプチャ画像切り替えでスライドトランジションを使いたい。今見ている画像を別の画像が脇からスライドして出てきて追い出すやつ。CoreAnimationを使うと簡単にできるのでまずはサンプルを作って検証してみる。

サンプル：SlideTransition-1.zip

以前、検証した波紋アニメーションのコードが参考になった。今回はフィルタを使用しないのでもっと簡単にできる。

AppController.m

#import "AppContorller.h"
#import 

@implementation AppContorller

-(void)awakeFromNib
{
 NSRect frame = [_view frame];
 _image_view1 = [[NSImageView alloc] initWithFrame:frame];
 [_image_view1 setImage:[NSImage imageNamed:@"image1"]];
 _image_view2 = [[NSImageView alloc] initWithFrame:frame];
 [_image_view2 setImage:[NSImage imageNamed:@"image2"]];

 CATransition *transition = [CATransition animation];
 [transition setType:kCATransitionPush];
 [transition setSubtype:kCATransitionFromTop];
 [transition setDuration:0.25];

 [_view setAnimations:
  [NSDictionary dictionaryWithObject:transition forKey:@"subviews"]];

 [[_view animator] addSubview:_image_view1];
 [_view setWantsLayer:YES];
 
}

-(IBAction)start:(id)sender
{
 [[_view animator] replaceSubview:_image_view1 with:_image_view2];
}

@end

起動時に２つのビュー(NSImageView)を用意しそれぞれ画像を貼付けておき、一方でスライド用のトランジション(CATransition)を作っておく。ボタンが押されたらこの２つのビューを NSView#replaceSubview:with: で置き換える。この置き換え行為によってトランジションのアニメーションが実行される。


注意点は２つ。
１つめはXCodeのプロジェクトに Quartz.framework を加えておくこと。これが無いとビルド時にエラーとなる。


もう一つはビューへ setWantsLayer:YES を投げること。これを忘れるとアニメーションが起らない（これで少しハマった）。

[_view setWantsLayer:YES];

実行してみるとこんな感じ。

初期状態。ここで STARTボタンを押す。



上に新しい画像が現れ、今まで見ていた画像は下へ追い出される。



下へ追い出される画像はフェードアウト効果がかかる。



終了時。完全に置き換わっている。



CATransitionの親クラス CAAnimation には Delegateが設定できて、トランジションの開始と終了イベントを捉えることもできる。

animationDidStart:

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag

- - - -
検証ができたので SimpleView へ組み込んでみる。２つのビューを用意するのがポイントだな。