iOS - Flip animation only for specific view
The following code might help with your problem. I think it is cleaner than using a transparent button.
- (void)viewDidLoad {
[super viewDidLoad];
flipped = NO;
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];
[flipContainerView addGestureRecognizer:tapGesture];
[tapGesture release];
}
- (void)handleTap:(UITapGestureRecognizer *)sender {
if (sender.state == UIGestureRecognizerStateEnded) {
[UIView transitionWithView:flipContainerView
duration:1
options:UIViewAnimationOptionTransitionFlipFromLeft
animations:^{
if (!flipped) {
[frontCard setHidden:YES];
[flipContainerView addSubview:backCard.view]; //or unhide it.
flipped = YES;
} else {
[frontCard setHidden:NO];
[backCard removeFromSuperview]; //or hide it.
}
} completion:nil];
}
}
My use case in Swift 4:
@IBAction func flipCard() {
let transitionOptions: UIView.AnimationOptions = [.transitionFlipFromRight, .showHideTransitionViews]
UIView.transition(with: letterView, duration: 1.0, options: transitionOptions, animations: {
if self.showingBack == true {
self.letterImage.image = UIImage.init(named: self.letterImageName + ".png")
self.letterNameLabel.text = self.regularWord
self.showingBack = false
} else {
self.letterImage.image = UIImage.init(named: self.letterImageName + "C.png")
self.letterNameLabel.text = self.cursiveWord
self.showingBack = true
}
})
}
I had the same problem. After searching different posts on the internet I was able to come up with an elegant and easy solution. I have the cards as custom UIButtons. In the custom UIButton class I added the method which changes the background image with a flip animation:
-(void) flipCard{
[UIView transitionWithView:self
duration:0.3f
options:UIViewAnimationOptionTransitionFlipFromRight|UIViewAnimationOptionCurveEaseInOut
animations:^{
if (self.isFlipped) {
[self setBackgroundImage:[UIImage imageNamed:@"card_back_2.png"] forState:UIControlStateNormal];
}else{
[self setBackgroundImage:[UIImage imageNamed:self.cardName] forState:UIControlStateNormal];
}
} completion:NULL];
self.isFlipped = !self.isFlipped;
}
Hope this helps someone else as the first answer has been already accepted
UPDATE
If you are on the view containing this sub-view the code is:
-(void)flipCard:(APCard*)card{
[UIView transitionWithView:card
duration:kFlipTime
options:UIViewAnimationOptionTransitionFlipFromRight|UIViewAnimationOptionCurveEaseInOut
animations:^{
if (card.isFlipped) {
[card setBackgroundImage:[UIImage imageNamed:@"card_back_2.png"] forState:UIControlStateNormal];
}else{
[card setBackgroundImage:[UIImage imageNamed:card.cardName] forState:UIControlStateNormal];
}
completion:^(BOOL finished) {
if (finished) {
//DO Stuff
}
}
];
card.isFlipped = !card.isFlipped;
}