Search code examples
iosobjective-ccore-animationcalayerclock

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


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?


Solution

  • Thank you all, I found out the answer to my own question using the developer docs by using fromValue and byValue instead of fromValue and toValue

    Just needed to change :

    -(void)startSmooth{
        CABasicAnimation *fullRotationSec;
        fullRotationSec = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
        fullRotationSec.fromValue = [NSNumber numberWithFloat:secAngle+M_PI];
        fullRotationSec.byValue = [NSNumber numberWithFloat:((360*M_PI)/180)];
        fullRotationSec.duration = 60.0f;
        fullRotationSec.repeatCount = HUGE_VALF;
        [secHandView addAnimation:fullRotation forKey:@"360"];
    }