読者です 読者をやめる 読者になる 読者になる

まいまいワークス

主にiPhoneアプリの開発で考えた事、調べた事、感じた事などを記していきます。

カードをくるっと回転させる処理

アプリの中のちょっとした見せ方でビューをモーダビューのUIModalTransitionStyleFlipHorizontal のようにくるっと回転させるやり方です。
coreAnimationとか使わなきゃダメなのかなーって思っていたのですが、 alpha値の処理でUIViewのアニメーションでそれっぽい感じにできました。

2枚のviewを重ねておき、一方をalpha=0もう一方をalpha=1にセット アニメーションと同時にalpha値を0→1、1→0に変更することによって回転によってカードの裏側が見えるような効果が得られます。

f:id:cccookie:20150101214155g:plain

//@interface〜@endで宣言しておく
@property(nonatomic, strong)UIButton* button;
@property(nonatomic, strong)UIImageView* card;




- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    //最初に表示されているカードの表側
    //タップを検知するためにボタンにしている
    //alpha値は1
    _button = [UIButton buttonWithType:UIButtonTypeCustom];
    _button.frame = CGRectMake(50, 50, 100, 150);
    _button.alpha = 1.0;
    UIImage* image = [UIImage imageNamed:@"omote.png"];
    [_button setImage:image forState:UIControlStateNormal];
    [_button addTarget:self
               action:@selector(buttonDidPush) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:_button];
    
    
    //アニメーション後に表示するカードの裏側
    //alpha値は0
    _card = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ura.png"]];
    _card.frame = CGRectMake(50, 50, 100, 150);
    _card.alpha = 0.0;
    [self.view addSubview:_card];
    
}


//ボタンタップで呼ばれるメソッド
-(void)buttonDidPush{
    
    //アニメーションとともに
    //表側(_button)のalpha値を0
    //裏側(_card)カードのalpha値を1にそれぞれ切り替える
    [UIView transitionWithView:_button
                      duration:0.5
                       options:UIViewAnimationOptionTransitionFlipFromLeft
                    animations:^{
                        _button.alpha = 0.0;
                    }
                    completion:^(BOOL finished) {
                        
                    }
     ];
    
    [UIView transitionWithView:_card
                      duration:0.5
                       options:UIViewAnimationOptionTransitionFlipFromLeft
                    animations:^{
                        _card.alpha = 1.0;
                    }
                    completion:^(BOOL finished) {
                        
                    }
     ];
}