Effect – UIViewで裏返せるパネルをつくる

野球場とかで、裏返すとちがう絵になる応援パネルみたいなやつのサンプル

ポイント

 普通にTransformをかけると、Rotateしてもずっと表しかでなかった、

 sublayerTransform に CATransform3D を指定することで

 裏表が表示されるようになった。

今日はお正月なので、去年から今年に変わるパネルを作ってみた

サンプルコード

#import “ViewController.h”

#import <QuartzCore/QuartzCore.h>

@implementation ViewController

// 裏表のあるUIViewを作る、メソッド

– (UIView*)createReverseView:(UIView*)frontView back:(UIView*)backView

{

    CGRect rect = frontView.bounds;

    UIView *v = [[UIView alloc] initWithFrame:rect];

    

    frontView.layer.shadowOpacity = 0.01;

    backView.layer.shadowOpacity = 0.01;

    

    [v addSubview:frontView];

    frontView.layer.zPosition = 2;

    

    [v addSubview:backView];

    backView.layer.zPosition = –2;

    

    // 背面は180度まわしておく

    backView.layer.transform = CATransform3DMakeRotation(M_PI, 0, 1.0, 0);

    

    

    // 側面右

    UIView *sideR = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 4, rect.size.height)];

    sideR.backgroundColor = [UIColor darkGrayColor];

    CATransform3D transR = CATransform3DIdentity;

    transR = CATransform3DRotate(transR, M_PI * 0.5, 0.0, 1.0f, 0.0);

    transR = CATransform3DTranslate(transR, 0.0, 0.0, –2.0);

    sideR.layer.transform = transR;

    [v addSubview:sideR];

    

    // 側面左

    UIView *sideL = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 4, rect.size.height)];

    sideL.backgroundColor = [UIColor darkGrayColor];

    CATransform3D transL = CATransform3DIdentity;

    transL = CATransform3DRotate(transL, M_PI * 0.5, 0.0, 2.0f, 0.0);

    transL = CATransform3DTranslate(transL, 0.0, 0.0, rect.size.width – 2);

    sideL.layer.transform = transL;

    [v addSubview:sideL];

    

    

    CATransform3D theTransform = v.layer.sublayerTransform;

    theTransform.m34 = 1.0 / –500;

    v.layer.sublayerTransform = theTransform;

    

    

    // タップジェスチャー

    // y軸周りに反転して反対側のViewを出す

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap:)];

    [v addGestureRecognizer:tap];

    

    return v;

}

// タップで反転する

– (void)tap:(UITapGestureRecognizer*)tgr

{

    

    for (int i= 0; i< 10; i++) {

        float time =  0.1 * i * NSEC_PER_SEC;

        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, time), dispatch_get_main_queue(), ^{

            CATransform3D transform = tgr.view.layer.sublayerTransform;

            tgr.view.layer.sublayerTransform = CATransform3DRotate(transform, M_PI * 0.1, 0.0, 1.0f, 0.0);

        });

    }

}

– (void)viewDidLoad

{

    [super viewDidLoad];

    

    //　薄く灰色に

    self.view.backgroundColor = [UIColor lightGrayColor];

    

    // サンプルパネルをロード

    [self newYear2013];

    

}

// 裏表のあるUIViewを使ったサンプル

// 2012 辰  -> 2013 巳

– (void)newYear2013

{

    // 表

    UILabel *f = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 80, 80)];

    f.text = @”2″;

    f.font = [UIFont systemFontOfSize:80];

    // 裏

    UILabel *b = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 80, 80)];

    b.font = [UIFont systemFontOfSize:80];

    b.text = @”2″;

    b.textColor = [UIColor redColor];

    // 裏表のあるUIViewを作成する

    UIView *panel0 = [self createReverseView:f back:b];

    

    

    // 表

    UILabel *f1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 80, 80)];

    f1.text = @”0″;

    f1.font = [UIFont systemFontOfSize:80];

    // 裏

    UILabel *b1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 80, 80)];

    b1.font = [UIFont systemFontOfSize:80];

    b1.text = @”0″;

    b1.textColor = [UIColor redColor];

    // 裏表のあるUIViewを作成する

    UIView *panel1 = [self createReverseView:f1 back:b1];

    

    

    // 表

    UILabel *f2 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 80, 80)];

    f2.text = @”1″;

    f2.font = [UIFont systemFontOfSize:80];

    // 裏

    UILabel *b2 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 80, 80)];

    b2.font = [UIFont systemFontOfSize:80];

    b2.text = @”1″;

    b2.textColor = [UIColor redColor];

    // 裏表のあるUIViewを作成する

    UIView *panel2 = [self createReverseView:f2 back:b2];

    

    

    // 表

    UILabel *f3 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 80, 80)];

    f3.text = @”2″;

    f3.font = [UIFont systemFontOfSize:80];

    // 裏

    UILabel *b3 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 80, 80)];

    b3.font = [UIFont systemFontOfSize:80];

    b3.text = @”3″;

    b3.textColor = [UIColor redColor];

    // 裏表のあるUIViewを作成する

    UIView *panel3 = [self createReverseView:f3 back:b3];

    

    

    // 表

    UILabel *fbig = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 380)];

    fbig.text = @”辰“;

    fbig.font = [UIFont systemFontOfSize:300];

    // 裏

    UILabel *bbig = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 380)];

    bbig.font = [UIFont systemFontOfSize:300];

    bbig.text = @”巳“;

    bbig.textColor = [UIColor redColor];

    // 裏表のあるUIViewを作成する

    UIView *panelbig = [self createReverseView:fbig back:bbig];

    

    

    

    panel0.center = CGPointMake(40, 40);

    panel1.center = CGPointMake(120, 40);

    panel2.center = CGPointMake(200, 40);

    panel3.center = CGPointMake(280, 40);

    panelbig.center = CGPointMake(160, 270);

    

    [self.view addSubview:panel0];

    [self.view addSubview:panel1];

    [self.view addSubview:panel2];

    [self.view addSubview:panel3];

    [self.view addSubview:panelbig];

}

@end