If you open up the timer app on your iPad, you get this beautiful grey circle that slowly turns red as you come closer to time running out. I'd like to learn to mimic this. I've found Quartz 2D to be one option, although I've found little information about using it for iOS. I'm quite the n00b at all this, so I could be missing some huge, some easier way to make the circle go around. Plus keep the current time remaining in the middle.
So, if anyone could point me in the right direction, I would be uber grateful. Thanks in advance!
You can do that using CAShapeLayer
to make the circle. Use Core Animation to animate the transition from one color to another over time. CAShaperLayer
's fillColor
property is animatable. It'd go something like this:
CAShapeLayer *myCircleLayer = ...; // create a circle layer and add it to your view
CABasicAnimation* transition = [CABasicAnimation animationWithKeyPath:@"fillColor"];
transition.fromValue = [UIColor grayColor];
transition.toValue = [UIColor redColor];
transition.duration = secondsUntilTimerExpires;
[myCircleLayer addAnimation:transition forKey:@"fillColor"];
You might want to add the animation only when the timer is getting close to expiring. A very long, slow animation, over an hour for example, would make the circle mostly red for a fairly long time, which doesn't help the user determine the time until the timer expires.