CATransform3DMakeRotation causes UIimage rotation along with UIimageview

Question

I am facing a problem with UIImageView rotation.

I need to rotate the UIImageView horizontally with animation like ads.

To do this I am using the following code:

[UIView animateWithDuration:1.0
        delay:0.0
        options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
        animations:^{
             if (baddview) {
                 baddview = FALSE;
                 adimageView.layer.transform = CATransform3DMakeRotation(0, 0, 1, 0);                          
             } else {
                 baddview = TRUE;
                 adimageView.layer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);                          
             }
         }
         completion:^(BOOL finished) {
         }
];

The imageview is rotating as I need it but the image in the image view is appearing reversed, like after a 180 degrees rotation (you can see the image here).

How can I animate the UIImageView rotation without rotating the UIImage?

Answer 1

One possible approach is making 2 UIImageViews, and animating them. What you would have to do is:

1. 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.
2. 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:

Answer 2

Your code is likely to cause problems. UIView animations are for animating the properties of a UIView, not layers.

I expect problems if you try to manipulate layer transforms in a UIView animation block. You should limit yourself to changing view properties in a UIView animation block:

[UIView animateWithDuration:1.0
                      delay:0.0
                    options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
                 animations:^{
                     _imageView1.transform = CGAffineTransformMakeRotation(M_PI);
                     _imageView2.transform = CGAffineTransformIdentity;
                 }
                 completion:NULL];

CAAnimation objects are for animating layers.

If you want to animate your view's layer transform, either do it directly (which will give you an implicit animation) or create a CABasicAnimation object to do more complex animations.