Objective-C CGAffineTransformRotate does not work

Question

Hey there need your help,

I'am trying to create an analog clock for my iPhone. The Problem is, the UIImage does not move in the right way or doesn't move, most time it is spinnig all over the View. Is there any Framework missing, I converted Degree into Radians... Here is the Code:

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    // Getting a Timer
    NSTimer *timer = [[NSTimer alloc]init];
    timer = [NSTimer scheduledTimerWithTimeInterval: 1 target:self
                                           selector:@selector(tick:) userInfo:nil repeats:YES];
    [timer fire];
    self.ticker = 0;
    self.minutes = 0;
    self.hours = 0;
}

- (void)tick:(NSTimer *)theTimer
{
    //Turning Seconds into Minutes and Hours
    self.ticker ++;
    self.timerLabel.text = [NSString stringWithFormat:@"%d",self.ticker];
    self.seconds = self.ticker;
    if (self.seconds == 60){
        self.ticker = 0;
        self.seconds = 0;
        self.minutes ++;
    }
    if (self.minutes == 60){
        self.minutes = 0;
        self.hours ++;
    }

    //Main issue here...
    // 360° / 60 second = 6° per second
    double grad = self.ticker * 6;
    //Converting Grad into Rad
    double rad = M_PI * grad / 180;
    //Set Transformation ---> CGAffineTransformMakeRotation does not work eighter
    CGAffineTransform transform = CGAffineTransformRotate(self.pointerImage.transform, rad);
    //Set Transformation to UIImageView caleld pointerImage
    self.pointerImage.transform = transform;
    //self.pointerImage.center = CGPointMake(160, 420);
    //NSLog(@"%f", grad);



    if ( self.ticker == 60){
        self.ticker = 0;
    }

}


- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

Answer 1

Rotations about the center of a circle require an initial transform to offset the bounds - so the transform is at the circle center. You will surely find example code on this site. I highly suggest that you create a single view project, add a colored square view to it, and experiment on getting that to rotate properly. Only then take that code and integrate into your real project.

Answer 2

The transforms are cumulative, so you only need to add in the incremental change on each tick:

CGAffineTransform transform = CGAffineTransformRotate(self.pointerImage.transform, (M_PI * 6 / 180));

as you had it, your clock hand jumping this far on each tick {1,3,6,10,15,21,28,36,45,55,6,18,31...} which is why it appeared to jump around so much.

The relevant line from the CGAffineTransform class Reference is this, taken from within the CGAffineTransformRotate method definition:

You use this function to create a new affine transformation matrix by adding a rotation value to an existing affine transform. The resulting structure represents a new affine transform, which you can use (and reuse, if you want) to rotate a coordinate system.