# Rotate an Image with Animation – Part 1

Editor’s Note: Part 2 of this post shows how rotate an images, buttons and other UI objects up to 360 degrees as well as rotating objects clockwise or counter-clockwise.

Last week I wrote a tip to demonstrate how to move an image on screen using animation. In this post I’ll show how to rotate an image with animation. One thing to cover as it relates to rotation is conversion of degrees to radians. Although most of us think in terms of degrees when it comes to rotating objects, the libraries we’ll access require rotation to be specified in radians.

##### Radians and Degrees

A circle is 360 degrees, which translates to 2Π radians. Thus, to convert from degrees to radians, we’ll need these definitions:

```// This is defined in Math.h #define M_PI 3.14159265358979323846264338327950288 /* pi */   // Our conversion definition #define DEGREES_TO_RADIANS(angle) (angle / 180.0 * M_PI)```

##### Method To Rotate an Image

The rotateImage method takes four parameters – the image to rotate, duration of the animation in seconds, the animation curve to apply, and the degrees to rotate. Here is how the method looks:

```- (void)rotateImage:(UIImageView *)image duration:(NSTimeInterval)duration curve:(int)curve degrees:(CGFloat)degrees { // Setup the animation [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:duration]; [UIView setAnimationCurve:curve]; [UIView setAnimationBeginsFromCurrentState:YES];   // The transform matrix CGAffineTransform transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(degrees)); image.transform = transform;   // Commit the changes [UIView commitAnimations]; }```
##### Calling the Rotate Method

First thing to note is that a positive value for the degrees will rotate clockwise – a negative will rotate counter-clockwise. Calling the rotate method is as simple as shown below:

```  - (void)startApp { UIImageView *imageToMove = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ArrowUp.png"]]; imageToMove.frame = CGRectMake(10, 10, 20, 100); [self.view addSubview:imageToMove];   [self rotateImage:imageToMove duration:3.0 curve:UIViewAnimationCurveEaseIn degrees:180];   ...   }```

1. Joe Pintozzi

I seem to be having trouble with this code. When I call rotateImage:…. and I use 360 degrees it doesn’t move at all. Shouldn’t it spin in a full circle? And when I put 270 degress it spins -90. How can I make it so the image spins in a full circle twice?

2. Dan

How do you animate the flipping of an image?

Dan

3. mikezang

Hi,
I want to rotate relative it’s corner not center, how can I do?

• JFA

you have to change the .anchorPoint PROPERTY
and make it different than the (0.5,0.5) which is the center

4. Thanks a lot for this post. It was really helpful.

I am actually building a script to rotate an image back and forth about 45 degrees in an NSTimer.

Thanks for the code snippets. :)

• No, this will not implement 3D image rotation.

5. JFA

Hi !
I’ve tested the code you gave.
I’ve changed the angle of rotation (in radians), and added a function that converts from degrees to radians

If the angle in degrees is 360 everything is ok
but if is for example 90 or any number different than 360
the layer makes the rotation animation and then goes slightly to the start point.

Why it doesn’t remain at that value of rotation ?

Thanks

6. Helmut

I’ve tested your code you shared with us. I call it in a function to place the iOS info button.

Im getting a warning for using it on the Botton Image

incomapttible Objective-C type ‘struct UIButton*, expected “struct UImageView”
But it is working fine and changes and rotates the infoButton to any requested rotation.

Any one help out with an explanation why it actually works for this particular implementation:

UIButton *userInfo = [UIButton buttonWithType:UIButtonTypeInfoLight];
userInfo.frame = CGRectMake(278, 10, 16, 36);
userInfo.backgroundColor = [UIColor clearColor];
forControlEvents:UIControlEventTouchUpInside];
……..

[self rotateImage:iuserInfo duration:0.0 curve:UIViewAnimationCurveEaseIn degrees:-90];
I am getting Build Warning SDK 4.3 and later
incomapttible Objective-C type ‘struct UIButton*, expected “struct UImageView”

// Note setting animation time to zero no need to actually obserserve the rotation in this implementation
// the current view is set to LanscapeLeft

Calling your method you have shared in this post

———- all is working fine
– (void)rotateImage:(UIImageView *)image duration:(NSTimeInterval)duration
curve:(int)curve degrees:(CGFloat)degrees
{
// Setup the animation
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:duration];
[UIView setAnimationCurve:curve];
[UIView setAnimationBeginsFromCurrentState:YES];

// The transform matrix
CGAffineTransform transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(degrees)) ;
image.transform = transform;

// Commit the changes
[UIView commitAnimations];
}

• Simon Hurst

change the method to take a UIButton then. If it works. you’re getting a warning because it’s expected a UIImageView.

7. Alan Kernel

How do I have a UIImageView move in a straight line while rotating several times before reaching the destination?
Thanks
-Al