Star WarsのあのオープニングをiPhoneで再現してみた。

shu223さんの著書『iOSアプリ開発 達人のレシピ100』をパラパラとめくっていると
「あっ。こういうのつくれるかも」と思いついてしまうので、早速つくってみました。

Chapter1 アニメーション／演出

「001 CATransform3D を用いて3D 表現をおこなう」を参考に。

で紹介されていたCATransform3Dの使い方を見ていて、あのカルト的人気映画のあのオープニングが再現できるんじゃね？
と思い早速実装してみました。

SWScrollView

普通のスクロールビューでも良いんですが、テキストが選択されるのはイヤなので、canBecomeFirstResponderをオーバライドします。

#import "SWScrollView.h"

@implementation SWScrollView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

- (BOOL)canBecomeFirstResponder {
    return NO;
}
@end

SWViewController

表示するほうにCATransform3Dの処理を書く。
本で紹介されているより奥行き深めで表示されるようにしている。

@interface SWViewController ()
@property (nonatomic, strong) IBOutlet SWScrollView *textView;
@end

@implementation SWViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    CATransform3D transform = CATransform3DIdentity;
    //z distance
    float distance = [[UIScreen mainScreen] bounds].size.height;
    float ratio    = [[UIScreen mainScreen] bounds].size.height/[[UIScreen mainScreen] bounds].size.height;
    transform.m34 = - ratio / distance;;
    transform = CATransform3DRotate(transform, 60.0f * M_PI / 180.0f, 1.f, 0.0f, 0.0f);
    _textView.layer.transform = transform;
    _textView.layer.zPosition = distance * ratio;
    _textView.layer.position = CGPointMake(
                                           [[UIScreen mainScreen] bounds].size.width/2,
                                           [[UIScreen mainScreen] bounds].size.height/3);

    // Do any additional setup after loading the view, typically from a nib.
}
＜略＞
@end

　

リポジトリはこちら
somtd / SWScrollView