Why does a view changes position when rotating it using CGAffineTransformMakeRotation

19
votes

I have the following super simple animation, I'm basically rotating a view 2 radians from its original angle/center, it rotates fine my only misunderstanding is why does the view move from its original position when the rotation occurs.

[UIView animateWithDuration:1.0 animations:^{
        self.someView.transform = CGAffineTransformMakeRotation( 2 );
    }];

Why does the view moves when rotated with the code above?

enter image description here

I'm currently trying to discern the information in the CGAffineTransform Reference.

Understanding the anchor point.

I found this threads but it doesn't show a concrete answer. Why rotating imageView, it changes position?

Thanks a lot

3
iosobjective-crotation
It should rotate about the view's center unless you've changed the anchor point of the view's layer. Could you describe the position change or perhaps post images showing how the view has changed position? - stefandouganhyde
I haven't moved the anchor point, in fact the code above is the only code I have in an action/method which is trigger when a button is clicked. - fs_tigre

3 Answers

10
votes

You need to set the anchor point of your view to rotate around. 

self.somview.layer.anchorPoint = CGPointMake(0.5, 0.5);

Then start the rotation.
From Apple documentations

@property(nonatomic) CGAffineTransform transform
Changes to this property can be animated. Use the beginAnimations:context: class method to begin and the commitAnimations class method to end an animation block. The default is whatever the center value is (or anchor point if changed) Link: https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html#//apple_ref/occ/instp/CALayer/anchorPoint

enter image description here
image from here http://www.raywenderlich.com/9864/how-to-create-a-rotating-wheel-control-with-uikit
- As you see the anchor point is the point with the value from 0.0 - 1.0 for X and Y when you rotate the rotation will be around these points
NOTE: you need to import QuartzCore

7
votes

I am adding another answer due to @fs_tigre request. The problem is with the auto layouts in your xib file, unfortunately is it unknown why that affects the transform.
Now here is the steps I did to solve the issue:

1- first you need to get rid off your auto layout (yes, you have to)
uncheck Use Autolayout
uncheck Use Autolayout

2- remove all constraints and autoresizing masks for your view that will be rotated, as in the screenshot (Here I have my blue box, see on the right autoresizing, nothing is selected)
enter image description here

I have made some changes for your rotation's code

self.someView.layer.anchorPoint = CGPointMake(0.5, 0.5);
    // one degree = pi/180. so...
    // rotate by 90
    CGFloat radians = (M_PI/180) * 90;
    [UIView animateWithDuration:1.0 animations:^{
        self.someView.transform = CGAffineTransformRotate(self.someView.transform, radians);
    }];

Click rotate and see the magic :)

3
votes

The "anchor" of CGAffineTransformMakeRotation is the X,Y of the view. You can try this:

CGPoint center = self.someView.center;
[UIView animateWithDuration:1.0 animations:^{
    self.someView.transform = CGAffineTransformMakeRotation( 2 );
    self.someView.center = center;
}];