iOS: How to rotate UIImageView around center point?

Question

I am currently trying to rotate the hour and minute hands of a clock. It is one of the mini games I am developing for an application. This function below randomly sets the position of both the hour hand and the minute hand. Currently I am keeping track of the rotation which will be used to reset the hand back to the original position. The problem occurs after the first or couple rotations and the minute hand appears sometimes in random positions. What can I do to fix or improve this or increase accuracy. Another question I have is what should the origin of the hand UIImageViews (top left? middle?). All suggestions will be greatly appreciated.

// function used to randomly move hands of clock and set answers
-(void)normal_move_hands
{
    int hourHandLocation = arc4random() % 12;   // 12 unique locations for hour hand
    int miniuteHandLocation = arc4random() % 4;   // 4 unique locations for minute hand
    if(hourHandLocation ==0)
    {
        hourHand.transform =CGAffineTransformMakeRotation(M_PI / 6); // 1
        rotationBackHour = (M_PI * 11 /6);
        hourCorrectAnswer = [NSString stringWithFormat:@"1"];
    }
    if(hourHandLocation ==1)
    {
        hourHand.transform =CGAffineTransformMakeRotation(M_PI / 3); // 2
        rotationBackHour = (M_PI * 10/6);
        hourCorrectAnswer = [NSString stringWithFormat:@"2"];
    }
    if(hourHandLocation ==2)
    {
        hourHand.transform =CGAffineTransformMakeRotation(M_PI / 2); // 3
        rotationBackHour = (M_PI * 3/2);
        hourCorrectAnswer = [NSString stringWithFormat:@"3"];
    }
    if(hourHandLocation ==3)
    {
        hourHand.transform =CGAffineTransformMakeRotation(M_PI *2 /3); // 4
        rotationBackHour = (M_PI * 4/3);
        hourCorrectAnswer = [NSString stringWithFormat:@"4"];
    }
    if(hourHandLocation ==4)
    {
        hourHand.transform =CGAffineTransformMakeRotation(M_PI * 5 / 6 ); // 5
        rotationBackHour = (M_PI * 7/6);
        hourCorrectAnswer = [NSString stringWithFormat:@"5"];
    }
    if(hourHandLocation ==5)
    {
        hourHand.transform =CGAffineTransformMakeRotation(M_PI); // 6
        rotationBackHour = (M_PI);
        hourCorrectAnswer = [NSString stringWithFormat:@"6"];
    }
    if(hourHandLocation ==6)
    {
        hourHand.transform =CGAffineTransformMakeRotation(M_PI * 7 / 6); // 7
        rotationBackHour = (M_PI * 5/6);
        hourCorrectAnswer = [NSString stringWithFormat:@"7"];
    }
    if(hourHandLocation ==7)
    {
        hourHand.transform =CGAffineTransformMakeRotation(M_PI * 4 /3); // 8
        rotationBackHour = (M_PI * 2/3);
        hourCorrectAnswer = [NSString stringWithFormat:@"8"];
    }
    if(hourHandLocation ==8)
    {
        hourHand.transform =CGAffineTransformMakeRotation(M_PI * 3 / 2); // 9
        rotationBackHour = (M_PI /2);
        hourCorrectAnswer = [NSString stringWithFormat:@"9"];
    }
    if(hourHandLocation ==9)
    {
        hourHand.transform =CGAffineTransformMakeRotation(M_PI * 10 /6); // 10
       rotationBackHour = (M_PI /3);
        hourCorrectAnswer = [NSString stringWithFormat:@"10"];
    }
    if(hourHandLocation ==10)
    {
        hourHand.transform =CGAffineTransformMakeRotation(M_PI * 11 /6); // 11
        rotationBackHour = (M_PI /6);
        hourCorrectAnswer = [NSString stringWithFormat:@"11"];
    }
    if(hourHandLocation ==11)  // 12
    {
        rotationBackHour = 0;
         hourCorrectAnswer = [NSString stringWithFormat:@"12"];
    }


   if(miniuteHandLocation == 0)  // 0 miniute 
   {
       rotationBackMinute = 0;
       minuteCorrectAnswer = [NSString stringWithFormat:@"0"];

   }
   if(miniuteHandLocation == 1)  // 15 miniute
   {
       minuteHand.transform = CGAffineTransformMakeRotation(M_PI /2);
       minuteCorrectAnswer = [NSString stringWithFormat:@"1"];
       rotationBackMinute = (M_PI * 3/2);
   }
   if(miniuteHandLocation == 2)  // 30 miniute
   {
        minuteHand.transform = CGAffineTransformMakeRotation(M_PI);
        minuteCorrectAnswer = [NSString stringWithFormat:@"2"];
       rotationBackMinute = (M_PI);
   }
   if(miniuteHandLocation == 3)  // 45 miniute
   {
       minuteHand.transform = CGAffineTransformMakeRotation(M_PI * 3 /2);
       minuteCorrectAnswer = [NSString stringWithFormat:@"3"];
       rotationBackMinute = (M_PI /2);
   }

}

This here is my reset function, which is used to reset the hands back to original position.

-(void)reset_hands
{
    hourHand.transform = CGAffineTransformMakeRotation(rotationBackHour);
    minuteHand.transform = CGAffineTransformMakeRotation(rotationBackMinute);
}

Can't you simply reset with `hourHand.transform = CGAffineTransformMakeRotation(0)` ? — Martin R, Nov 10 '13 at 13:21
Hi Martin R, your suggestion seemed to help with the reseting and getting the correct time answers but it does not solve the fact the hour hand sometimes appears on weird spots. Thank you for your fast response ! — RyanCW, Nov 10 '13 at 13:47
*"sometimes appears on weird spots"* is difficult to answer :-) — Martin R, Nov 10 '13 at 13:58

Martin R · Accepted Answer · 2013-11-10T14:27:51.460

1

From my above comment: You can simply reset the transformation with

hourHand.transform = CGAffineTransformMakeRotation(0);
// or:
hourHand.transform = CGAffineTransformIdentity;

and there is no need to remember rotationBackHour. (Setting the transform does not accumulate.)

Note also that you can simplify your code to

hourHand.transform = CGAffineTransformMakeRotation((hourHandLocation + 1)*M_PI/6.0);
hourCorrectAnswer = [NSString stringWithFormat:@"%d", hourHandLocation + 1];

make the many if-blocks obsolete.

The "appears sometimes in random positions" problem is caused by Autolayout or by the Autosizing options. Either switch them off or fix them such that the size and relative position of the hours/minute view to the clock does not change.

edited Nov 10 '13 at 14:27

answered Nov 10 '13 at 13:57

Martin R

529,903
94
1,240
1,382

Hey Martin R. so I added in your CGAffineTransformMakeRotation and got rid of rotationBackHour. However, now the only problem is that for 6 and 9 ( hours) my hour hand goes crazy and does not stay in the center. For all the other times, the pictures are correct... – RyanCW Nov 10 '13 at 14:02
You have officially answered part 1 of my question haha : D thanks ! – RyanCW Nov 10 '13 at 14:02
@RyanCW: Are any autolayout or autosizing options active for the views? – Martin R Nov 10 '13 at 14:06
what do you mean by this ? i was playing around with the origin of the minute hand but basically in my xib file I have : 1) a image of a clock in the back ground 2) a minute hand(square size) 3) a hour hand ( square size) all over lapping each other.... – RyanCW Nov 10 '13 at 14:07
@RyanCW: Check the "Use Autolayout" option in the File Inspector and perhaps "Autosizing" in the Size Inspector for the views. – Martin R Nov 10 '13 at 14:12
your a genius .... why did that fix my problem ?? thanks for your help. Also what does autolayout do...? – RyanCW Nov 10 '13 at 14:23
@RyanCW: "Autolayout" is a mechanism to dynamically adjust the size and position of views, depending on various parameters like screen size, orientation, size of other views etc. It is available since iOS 6. "Autosizing" (sometimes called "springs and struts") is for the same purpose, but older and less powerful. - You have to look it up in the documentation. – Martin R Nov 10 '13 at 14:30

iOS: How to rotate UIImageView around center point?

1 Answers1