Strange behavior from affine transform rotation on iOS

Question

I want to do a fairly simple rotation of a UIImageView. Basically I have an image of a wheel in a perfectly square image and I want to rotate it under animation.

So I tried this:

- (void)testButtonPressed:(id)sender {
    NSLog(@"Test button pressed");
    CGAffineTransform transform = CGAffineTransformMakeRotation(1.0);

    [UIView animateWithDuration:10.0 delay:0 options:UIViewAnimationOptionCurveLinear
                     animations:^{
                         dial.transform = transform;  // "dial" is a UIImageView
                     }
                     completion: ^(BOOL finished){
                     }];
 }

What happens is that, when the animation begins the image (that's about 300 square) immediately jumps up 50-100 pixels and is "squeezed" into a narrow oval. After that, the animation proceeds just fine.

I tried using beginAnimation instead and got the same behavior.

I understand that I don't understand the stuff about the rotation origin (the docs talk in circles), but the squeezing seems odd, and the fact that it all occurs at once (vs being animated) is strange.

Any ideas?

(This is running on the iPhone 6.0 simulator from Xcode 4.5.1. Is is possibly just a simulator thing?)

Update: I got a chance to work on it a little more (I do it in-between "real" work). I created a new XIB that never had autolayout and the wheel was "normal" but the background was vertically compressed.

Then a bit of inspiration. I noticed that the image views were marked "autoresize" in the NLog dumps. Didn't see a way to turn that off from IB, but did see that you can turn off "Autoresize Subviews" on the main view. Did that and it behaved perfectly!

I'm thinking that some of the new features introduced for autolayout are the culprit here. Don't know, though, if I've found all the magical settings yet.

But... Still have the problem that the "transparent" parts of my images are black on the iPad, even after turning off "Opaque" on everything.

Update: I've finally figured out that my images were in JPG 24 bit mode rather than 32 bit mode. This works on the simulator -- pure black is interpreted as transparent. But it doesn't work on the iPad. Using 32 bit images fixes that and (with "autoresize subviews turned off to eliminate the odd distortions/translations) everything is fine except ... rotations > 180 degrees animate backwards. The animation is being "smart" and taking the "shortest path".

I suppose I'll simply have to break the animation into two steps.

I tried you code on a square UIImage view, and it worked fine for me. — rdelmar
Hmmm. I made the image smaller (with more margin) and it doesn't distort, but it jumps down and to the right when starting. — Hot Licks
Made it smaller still and the image jumps down a bunch. But the odder thing is that the image behind it (which is not being animated) is squeezed horizontally. This is about as vanilla a setup as I can conceive of. — Hot Licks
If I make the background image smaller it doesn't distort, but now the wheel is jumping down to the right again. — Hot Licks
Well, it gets stranger. Occurred to me to turn off autolayout, and then the jumping stops, but on the iPhone simulator the image starts out squashed vertically and displaced upward. On the iPad simulator (with iPad xib), however, it works perfectly. But on a real iPad (don't have an iPhone of the right version handy) it works, but the transparent parts of the images are black (and not transparent). — Hot Licks

Abid Hussain Abid Hussain · Accepted Answer · 2012-11-30T21:40:43

Why don't you do it with CABasicAnimation.

CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat: -M_PI_2 ];
rotationAnimation.duration = 2.0;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = 1.0; 
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

[imageView.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];

Strange behavior from affine transform rotation on iOS

1 Answers