UIImageview rotation animation

Question

I want to apply an animation to two UIImageViews . The idea is for image one to flip horizontally by 90 degrees and then image two to complete the rotation. Think of it as a coin spinning: Head side (image one) faces forward -> turn 90 degrees -> Tail side (image two) rotates to face forward. I can do the first half of the animation but I am stuck on the second.

[UIView animateWithDuration:1.0f animations:^{
    image1.transform = CGAffineTransformMakeScale(-0.01, 1);
} completion: ^(BOOL finished) {
    // How can I make image 2 to rotate out as if it initially was already rotated by 90 degrees?
}];

Answer 1

for flipping animation, there a animation option called UIViewAnimationOptionTransitionFlipFromRight , use it with the UIView's animation method for example, like below for example

 [UIView transitionWithView:myImageView //with first image
                  duration:animationDuration
                   options:UIViewAnimationOptionTransitionFlipFromRight
                animations:^{
                    myImageView.image = toImage; //to next image
                } completion:^(BOOL finished) {
             //completion actions after flipped
 }];

there are other animation options also there, like FromLeft , FromTop , FromBottom use any one to your requirement

Answer 2

Take a look at this question about flipping a UIView in 3D using CATransform3D.

Simple Core Animations 3D transform of UIView

The answer:

CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / -1000.0;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI * 0.6, 1.0f, 0.0f, 0.0f);
[UIView animateWithDuration:1.0 animations:^{
    self.someView.layer.anchorPoint = CGPointMake(0.5, 0);
    self.someView.layer.transform = rotationAndPerspectiveTransform;
} completion:^(BOOL finished){
    // code to be executed when flip is completed
}];