波紋（その４）

トランジションを試してみる。CocoaSlides のコードを参考に組んでみた。まずは CocoaSlides をまねて簡単なトランジションから挑戦。

試行錯誤の上、どうにか動いた。初期状態では黒い矩形が表示され、


ボタンを押すと、徐々に黄色に変化する。


サンプル：RippleTransition-1.zip


記述したクラスは AppControllerのみ。これと InterfaceBuilderで NSWindow上に NSViewを配置し、アウトレット _viewに接続しておく。

まず起動時に初期表示をさせる。

- (void)awakeFromNib
{
 NSRect rect = [_view bounds];

 CATransition *transition = [CATransition animation];
 [transition setType:kCATransitionFade];
 [transition setSubtype:kCATransitionFromLeft];
 [transition setDuration:1.0];

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

 NSURL* url1 = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForImageResource:@"img1"]];
 NSImageView* image_view1 = [[NSImageView alloc] initWithFrame:rect];
 NSImage* image1 = [[NSImage alloc] initWithContentsOfURL:url1];
 [image_view1 setImage:image1];
 [[_view animator] addSubview:image_view1];

 [_view setWantsLayer:YES];
}

トランジションのアニメーションを実現する為に、CATransitionを使う。CoreAnnimationが用意される前は自分で NSTimerを使う必要があったようだが、CATransitionを使えばそれは不要。CATransition にトランジションの種類（kCATransitionFade, kCATransitionFromLeft）や時間（setDuration:1.0）を設定し、_view にアニメーションとして登録する。@"subviews"はサブビューの切り替え時にトランジションアニメーションを適用するのに使うキーらしい。

続いて NSImageView を作り、黒矩形画像を貼付ける。最後に _viewのサブビューへ追加する。この時 #animatorを使う。

最後の #setWantsLayer:YES は重要で、これが無いとアニメーションが起らない。


続いてボタンが押された時の処理。

- (IBAction)start:(id)sender
{
 NSRect rect = [_view bounds];
 NSURL* url2 = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForImageResource:@"img2"]];
 NSImage* image2 = [[NSImage alloc] initWithContentsOfURL:url2];
 NSImageView* image_view2 = [[NSImageView alloc] initWithFrame:rect];
 [image_view2 setImage:image2];
 [[_view animator] replaceSubview:[[_view subviews] objectAtIndex:0] with:image_view2];
}

切り替え後の画像を用意し NSImageView へ貼付ける。これを #replaceSubview:with: で最初のビューと置き換える。これでトランジションアニメーションが動作する。


参考情報：
Re: CATransition on NSSplitView replaceSubview

Re: Sample project "Cocoa Sliders": some questions about API usage



シンプルだがトランジションが動作してちょっとうれしい。
次回はいよいよ波紋へ挑戦。