Cocoaの日々

SimpleCap の SHE (Selection History Expose) を作っている過程で表題のアニメーション効果が欲しくなった。今回はその検証。

サンプル動作

まずはサンプル動作結果から。

SimpleCap 自体は Mac OS X 向けだが、せっかくなので iOS 用に作ってみた。Core Animation は両OS共に共通なので iOSで動けば Mac OS X でも動くはず（※実際には iOSの方はサブセット）。

実行すると９つの画像が表示され、これが徐々に手前に近づきながらフェードアウトする。

実装解説

Xcodeのテンプレートから View-based application を選び viewDidLoad: を実装する。

- (void)viewDidLoad {
    [super viewDidLoad];

 self.view.layer.backgroundColor = [[UIColor blackColor] CGColor];

 // パース設定 
 CATransform3D transform = CATransform3DMakeRotation(0, 0, 0, 0); 
 float zDistance = 2000; 
 transform.m34 = 1.0 / -zDistance;
 self.view.layer.sublayerTransform = transform;
 
 // ９枚の CALayer を準備する
 for (int i=0; i < 9; i++) {
  // バンドルした画像を CALayer へ貼り付ける
  UIImage* image = [UIImage imageNamed:[NSString stringWithFormat:@"image%02ds.jpg", i+1]];
  CALayer* layer = [CALayer layer];
  layer.contents = (id)[image CGImage];
  layer.frame = CGRectMake(x[i], y[i], IMAGE_WIDTH, IMAGE_HEIGHT);
  CGPoint p = layer.frame.origin;
  p.x += 320/2;
  p.y += (480-2)/2;
  layer.position = p;
  [self.view.layer addSublayer:layer];

  // Z軸方向のアニメーション設定
  CABasicAnimation *theAnimation;
  theAnimation=[CABasicAnimation animationWithKeyPath:@"zPosition"];
  theAnimation.fromValue=[NSNumber numberWithFloat:-4000];
  theAnimation.toValue=[NSNumber numberWithFloat:1000];
  theAnimation.duration=10;
  theAnimation.repeatCount = 1e100;
  [layer addAnimation:theAnimation forKey:@"zPosition"];
  
  // 不透明度のアニメーション設定
  theAnimation=[CABasicAnimation animationWithKeyPath:@"opacity"];
  theAnimation.fromValue=[NSNumber numberWithFloat:1.0];
  theAnimation.toValue=[NSNumber numberWithFloat:0.0];
  theAnimation.duration=10;
  theAnimation.repeatCount = 1e100;
  [layer addAnimation:theAnimation forKey:@"opacity"];  
 }
}

これだけ。ポイントはパース設定。これが無いと zPosition を変更してもアニメーションが起こらない。 m34 パラメータは Z軸の初期位置を決める。 m34 = -1.0/200 の場合
m34 = -1.0/2000 の場合
m34 = -1.0/20000 の場合

ソースコード

GitHubからどうぞ。 CoreAnimation3DSample at 2010-11-01b from xcatsan's iOS-Sample-Code - GitHub

参考情報

Watching Apple: Core Animation: 3D Perspective Core Animation を使った擬似3Dアニメーションのサンプル。非常に役に立った。

Core Animation Programming Guide: Introduction to Core Animation Programming Guide Core Animation リファレンス

Core Animationプログラミングガイド: Core Animationプログラミングガイドの紹介 日本語版リファレンス

Core Animationプログラミングガイド: サンプル：Core Animation Menuアプリケーション Core Animation を使った Front Row 風インターフェイスの実装サンプル。参考になる。