Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does a view changes position when rotating it using CGAffineTransformMakeRotation

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

like image 756
fs_tigre Avatar asked Mar 04 '14 13:03

fs_tigre


People also ask

What is the function of rotate option?

The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a <transform-function> data type.

What is CGAffineTransform?

The CGAffineTransform type provides functions for creating, concatenating, and applying affine transformations. Affine transforms are represented by a 3 by 3 matrix: Because the third column is always (0,0,1) , the CGAffineTransform data structure contains values for only the first two columns.


1 Answers

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

like image 168
Basheer_CAD Avatar answered Oct 06 '22 23:10

Basheer_CAD