One possible approach is making 2 UIImageView
s, and animating them. What you would have to do is:
- Before the animation block, create the new
UIImageView
and place it behind the current UIImageView
, but make sure that it has a rotation of 180.
- Make two animation blocks, one that rotates the first view 90 degrees at half (ie 0.5 sec) the duration, and the other block animates the view behind to
CATransform3DIdentity
at full duration (ie 1.0 sec).
I will add some code if needed.
Or alternatively, set the isDoubleSided
property of CALayer
to NO
. Then, rotate both views 180 degrees. The top view will be hidden, since it is not double sided.
I just created a new single-view project, and added a UIButton
to perform the flip. Here is the rest of the code:
Header File:
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController {
UIImageView* _imageView1;
UIImageView* _imageView2;
}
- (IBAction)flip:(id)sender;
@end
Implementation file:
#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIImage* image1 = [UIImage imageNamed:@"gaara1.png"];
_imageView1 = [[UIImageView alloc] initWithImage:image1];
[_imageView1 setFrame:CGRectMake((CGRectGetWidth(self.view.bounds) - 300)/2, 100.f, 300, 75)];
UIImage* image2 = [UIImage imageNamed:@"gaara2.png"];
_imageView2 = [[UIImageView alloc] initWithImage:image2];
[_imageView2 setFrame:CGRectMake((CGRectGetWidth(self.view.bounds) - 300)/2, 100.f, 300, 75)];
// the second imageView is in the back
[self.view addSubview:_imageView2];
[self.view addSubview:_imageView1];
}
- (IBAction)flip:(id)sender {
[_imageView1.layer setDoubleSided:NO];
[_imageView2.layer setDoubleSided:NO];
[_imageView1.layer setZPosition:10.f];
[_imageView1.layer setTransform:CATransform3DIdentity];
[_imageView2.layer setTransform:CATransform3DMakeRotation(-M_PI, 1.f, 0.f, 0.f)];
[UIView animateWithDuration:1.0
delay:0.0
options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
animations:^{
_imageView1.layer.transform = CATransform3DMakeRotation(M_PI, 1.f, 0.f, 0.f);
_imageView2.layer.transform = CATransform3DIdentity;
}
completion:NULL];
}
@end
The images: