問題描述
使用 Core Animation/CALayers 為時鐘設置動畫 (Animating a Clock with Core Animation/CALayers)
I have a UIViewControler with 4 layers.
- Face Plate of a Watch/Clock
- Second Hand
- Minute Hand
- Hour Hand
I've gotten each hand to start moving onload at the correct time (by defining angles on a circle based on the time the app-loads).
How do I correctly define the motion and duration of motion (should be ad infinitum) using the CABasicAnimation accessor methods?
For instance, I've set my secondHandMotion (which is an instantiated CABasicAnimation object) to being at an angle on the clock frame that corresponds to current time:
CABasicAnimation *secondHandMotion = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
secondHandMotion.fromValue = [NSNumber numberWithFloat:sAlpha];
secondHandMotion.toValue = [NSNumber numberWithFloat:(2*M_PI)];
[secondHand addAnimation:secondHandMotion forKey:@"transform"];
where sAlpha is the angle as a function of time. The secondHandMotion.toValue statement is wrong, I know that. How do I tell it to keep moving, and at the correct interval, 1-second ticks?
Thanks!
參考解法
方法 1:
When I implemented this in one of my apps I started from this tutorial
Analog Clock using Quartz Core broken link
See Source on Github instead.
It recalculates every second which may give slightly more accurate results relating to the system clock.
The way I implemented the rotation was something like this (this is the animation part you still need the angle calculations you have done previously).
CGAffineTransform transform = CGAffineTransformIdentity;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
self.hourView.transform = CGAffineTransformRotate(transform, hourAngle);
self.minView.transform = CGAffineTransformRotate(transform, minutesAngle);
self.secondView.transform = CGAffineTransformRotate(transform, secondsAngle);
[UIView commitAnimations];
NOTE: I wrote this very early on in my iOS learning so it may be a bit horrible.
方法 2:
Have a look at PSAnalogClockView. It nicely solves your problem in a reusable way.
(by ArtSabintsev、Paul.s、Martin Reichl)