How to do a very smooth second clock hand animation (without ticking motion) like the iPad clock

Question

I am working on an iPad app where I am trying to show the clock hand for seconds show the second hand motion, like this which updated every second.

- (void) updateClock:(NSTimer *)theTimer{
    dateComponents = [[NSCalendar currentCalendar] components:(NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit) fromDate:[NSDate date]];
    seconds = [dateComponents second];
    minutes = [dateComponents minute];
    hours = [dateComponents hour];
    secAngle = Degrees2Radians(seconds/60.0*360);
    minAngle = Degrees2Radians(minutes/60.0*360);
    hourAngle = Degrees2Radians(hours/24.0*360) + minAngle/24.0;
    secHand.transform = CATransform3DMakeRotation (secAngle+M_PI, 0, 0, 1);
    hourHand.transform = CATransform3DMakeRotation (hourAngle+M_PI, 0, 0, 1);
    minHand.transform = CATransform3DMakeRotation (minAngle+M_PI, 0, 0, 1);
}

- (void)start{
    timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(updateClock:) userInfo:nil repeats:YES];
}

However, the way its works right now, it shows like it is ticking every second. But What I really want is to animate the layer so that it appears to be in continuously motion in a full rotation from 0 to 360 in 1 minute smoothly , however, I can only make it start to go from 0 to 360 to do a full rotation ,so I used for the seconds needle the following:

-(void)startSmooth{
    started = YES;
    CABasicAnimation *fullRotation;
    fullRotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    fullRotation.fromValue = [NSNumber numberWithFloat:0];
    fullRotation.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)];
    fullRotation.duration = 60.0f;
    fullRotation.repeatCount = HUGE_VALF;
    [secHand addAnimation:fullRotation forKey:@"360"];
}

However the problem with this is that it always starts rotating at 0 degree angle so the needle looks like it only always appear to start motion from 30 seconds no matter what the time is.

What I would like to do is have it begin from the actual point the seconds needle is supposed to be at. How can I achieve that?

Answer 1

There are actually two issues: Best way to animate and how to get milliseconds

Alternative to NSTimer-based animation

You might want to consider using a CADisplayLink rather than NSTimer or Core Animation.

First, you can create a CADisplayLink property:

@property (nonatomic, strong) CADisplayLink *displayLink;

Second, you can set the display link and start it:

- (void)startDisplayLink
{
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(handleDisplayLink:)];
    [self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
}

Third, you can then put your clock hand drawing logic here:

- (void)handleDisplayLink:(CADisplayLink *)displayLink
{
    // update your clock hands here
}

Finally, if you need to stop the display link, you can call:

- (void)stopDisplayLink
{
    [self.displayLink invalidate];
    self.displayLink = nil;
}

How to get milliseconds

While I initially thought you were focusing on the animation issue, but I realize the root of your issue is that NSDateComponents sadly does not do milliseconds. There are a bunch of ways of getting the milliseconds, but I might just use a date formatter:

NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
formatter.dateFormat = @"hh:mm:ss.SSS";
NSString *string = [formatter stringFromDate:[NSDate date]];
NSArray *timeComponents = [string componentsSeparatedByString:@":"];

// if time was 09:48:17.197, then

NSInteger hour = [timeComponents[0] integerValue];    // 9
NSInteger min = [timeComponents[1] integerValue];     // 48
CGFloat floatSec = [timeComponents[2] floatValue];    // 17.197

and if you want the hour and minute hands to sweep, just like the seconds hand, then you can calculate their fractional values, too:

CGFloat floatMin = min + (floatSec / 60.0);           // 48.287
CGFloat floatHour = hour + (floatMin / 60.0);         // 9.805