How to rotate a UIImageView – ios sdk roulette tutorial

Animating an object using the ios sdk is very simple, but it's very difficult to retrieve an howto on the internet. So here you are a simple example

In this simple tutorial I'm going show to you how run a roulette, first of all we need the roulette, we will use the following image:

Now open Xcode and create a new project, you can choose "Single View Application" as your template.

Drag the image into the project.

Select the storyboard and insert a UIImageView and a Round Rect Button.

Open the ViewController.h header file and modify it, it should look like the following:

 1 //
 2 //  ViewController.h
 3 //  gigione
 4 //
 5 //  Created by Luigi D'Andrea on 10/05/12.
 6 //  Copyright (c) 2012 All rights reserved.
 7 //
 9 #import <UIKit/UIKit.h>
11 @interface ViewController : UIViewController
12 {
13     IBOutlet UIImageView *theImageView;
14     IBOutlet UIButton    *theButton;
15     NSTimer              *theTimer;
16     float        angle;
17     BOOL         runStop;
18 }
21 @property (atomic, retain) IBOutlet UIImageView *theImageView;
22 @property (atomic, retain) IBOutlet UIButton    *theButton;
24 -(IBAction)runRoulette:(id)sender;
26 @end

Open the ViewController.m file and just after insert the following code:

 1 @synthesize theButton, theImageView;
 3 -(void)rotateRoulette
 4 {
 6     self.theImageView.transform=CGAffineTransformMakeRotation (angle);
 7     angle+=0.4;
 8 }
11 -(IBAction)runRoulette:(id)sender
12 {
13     if(!runStop)
14     {
15         theTimer = [NSTimer scheduledTimerWithTimeInterval:1.0/60.0 target:self selector:@selector(rotateRoulette) userInfo:nil repeats:YES];
16     }
17     else
18     {
19         [theTimer invalidate];
20         theTimer = nil;
21     }
22     runStop = !runStop;
23 }

Into the viewDidLoad method, before the   [super viewDidLoad]; statement add the following two lines to initialize the roulette values
    angle = 0;
    runStop = FALSE;

Now go to the storyboard,  right click on the "View Controller" and drag on the button, in the popop menu that will appear select theButton; right t click on the "View Controller" and drag on the UIImageView  in the popop menu that will appear select theImageView; right click on the button and drag on the "View Controller", in the popup menu that will appear select "runRoulette:".

That's all, now run your project, and try to tap on the button you should see the roulette rotating and stopping.


You may also like...

7 Responses

  1. jan says:

    One of the most straightforward and clean example. Thanks!

  2. Kurt says:

    im missing something.  It sort of glides down to the right then back up to the top left as its spinning.

  3. Valentin says:

     how to do make a stop in any position automatically?

  4. Alex Andrade says:

    Hello, thank you for your help. I got using my code and it worked, but the image does not rotate properly, it's a difference in rotation axis is not fixed in the middle of the image, rotate the image besides also is moving sideways. Can you help me solve this problem? must rotate at the image own axis, and not only rotate to move laterally. Anyway thanks for the help. Alex

  5. Terence says:


    I have the same problem that the image shunts up/down and side to side as it rotates. Is there a bug somewhere? or is it due to initailistaion of the centre co-ordinates. Any help much appreciated



  6. admin says:

    Terence, for what I remember, the problem is due to the coordinates of the rotation centre.

    Please post the centre of the coordinates, if you’ll find the correct values.

  7. Terence says:


    Do you know how to fix it?




Leave a Reply

Your email address will not be published. Required fields are marked *