Why does a view changes position when rotating it using CGAffineTransformMakeRotation

Question

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

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, Mar 04 '14 at 13:41
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, Mar 04 '14 at 14:00

Basheer_CAD · Answer 1 · 2014-03-04T14:06:48.927

10

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

edited Mar 04 '14 at 14:06

answered Mar 04 '14 at 14:01

Basheer_CAD

4,908
24
36

I still don't know understand this, setting the anchor point didn't make a difference, still moving its position. The funny thing is that if I change the rotation to 3.14 radians(180degrees) or 6.28 radians (360degress) it works fine without even setting the anchor point. `- (IBAction)rotateIt:(id)sender { [UIView animateWithDuration:1.0 animations:^{ self.view1.transform = CGAffineTransformMakeRotation(3.14); self.view2.transform = CGAffineTransformMakeRotation(6.28); }]; } @end ` This code works fine. Why it only works with 3.14 and 6.28 radians? – fs_tigre Mar 05 '14 at 01:40
It seems to be at the default 0.5, 0.5 because if I change it to something else like, `self.somview.layer.anchorPoint = CGPointMake(0.7, 0.7);` it actually responds to those new values but if I set it to `self.somview.layer.anchorPoint = CGPointMake(0.5, 0.5);` it doesn't make a difference, it just behaves as if nothings has been set. (See the image I posted in my original post). – fs_tigre Mar 05 '14 at 13:08
I'm wondering if this has to do with Autolayout. Eventhow I didn't apply any constraints to the view I'm trying to rotate it may be affected by the fact that autolayout is set by default in any new project you create in Xcode 5." I found this thread - http://stackoverflow.com/questions/12943107/how-do-i-adjust-the-anchor-point-of-a-calayer-when-auto-layout-is-being-used" that talks about autolayout impacting transformations. – fs_tigre Mar 05 '14 at 13:40
if you confirm that the auto layout is disabled for this view, then I will try to test it on my side and comeback to you. – Basheer_CAD Mar 05 '14 at 13:50
1

Thank you Basheer_CAD, unfortunately I cannot confirm this at the moment since I'm away from my desk but I will do it as soon as I get home. Thanks a lot for taking the time to help. – fs_tigre Mar 05 '14 at 14:07

score 7 · Accepted Answer · answered Mar 05 '14 at 14:24

7

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

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 :)

answered Mar 05 '14 at 14:24

Basheer_CAD

4,908
24
36

1

@fs_tigre here is a video for you https://www.dropbox.com/s/4wxar56o4jbyrdg/video.mov – Basheer_CAD Mar 05 '14 at 14:24
Thanks a lot for taking the time and actually tried it out. That answers my question. I guess if you want to transform views and want to use atutolayout you would have to use a subviews, as described in the third suggestion of the post by Matt Neuburg. http://stackoverflow.com/questions/12943107/how-do-i-adjust-the-anchor-point-of-a-calayer-when-auto-layout-is-being-used/14105757#14105757 – fs_tigre Mar 05 '14 at 14:54
1

@fs_tigre, I haven't tried that, but I think its a good solution tho. But When I deal with a lot of animations I like to disable auto layouts, to avoid their headache – Basheer_CAD Mar 05 '14 at 15:02
why CGPointMake(0.5, 0.5) ? how to get it dynamic – maddy May 26 '16 at 06:30

score 3 · Answer 3 · answered Mar 04 '14 at 13:37

3

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;
}];

answered Mar 04 '14 at 13:37

Aviel Gross

9,770
3
52
62

I will give this a try and let you know. Thanks – fs_tigre Mar 04 '14 at 13:57
I tried this code but it didn't work either, it still moves the view before it starts rotating. But it works if I change the rotation angle to 3.14 radians or 6.28 radians. – fs_tigre Mar 05 '14 at 01:46

Why does a view changes position when rotating it using CGAffineTransformMakeRotation

3 Answers3

Linked