Apple added a new UIView method,
to iOS 7.
This method lets you easily simulate "springy" motion. It's useful in any situation where you want to create a look like something that moves to a new location and then jiggles a little bit before settling into place.
The world clock app in iOS 6 used a similar effect. Apple's engineers must have had to write custom code to do this.
Now with the new methods it's easy.
I decided to write an analog clock application as a test. As such things usually do, it turned out to be more complicated than just a few lines of code, but I'm quite pleased with the results.
You can download the project from github at this link:
ClockAnimation project on github
The core of the program is this line:
[UIView animateWithDuration: duration
theHandView.transform = CGAffineTransformMakeRotation(newAngle);
This method works very much like the other animateWithDuration:animations: family of methods, but it takes 2 new parameters, a dampingRatio and an initial velocity. The documentation on velocity is clear as mud. The way I read it, a value of 1 has the animation start out at "full speed" as if it is a linear animation that runs for the whole duration. Values less than 1 have the animation start at a slower speed. The documentation is written to assume the animation is moving an object to a new pixel position, so it talks in terms of pixels/second.
It takes a little tinkering to get the effect you want. I found a velocity of .8 gave a realistic acceleration of the clock hand.
The use of the damping value is clearer. A value of 1 makes the call revert to normal motion that decelerates smoothly with ease-in, ease-out timing. If you provide a value less than 1, the animation overshoots it's final value, then bounces back. The smaller the value, the more it overshoots, and the more it then overshoots on the way back, making the animation wobble back and forth before settling down to it's final value.
I found a velocity value of .8 and a damping value value of .2 worked well for a clock hand moving one tick. If the clock hand needs to move in a large arc (because you just started the clock) then I found it needed a higher damping value.
The program uses an arbitrary set of numbers for the labels on the clock face. In this implementation, it uses the numbers from 1 to 12. It could just as easily use roman numerals or some other string value. At first I only had the numbers 3, 6, 9, and 12, but my son complained that it needed all 12 positions.
The code steps through angles from 0 to 2•pi, using trig to calculate the positions of each number, so it was trivial to change the number of digits shown on the clock face.
The setup code divides the circle into the correct number of steps to display the number of label strings you provide. See the method awakeFromNib in WTClockView.m for the code that sets up the clock face and adds the labels for each "tick" on the clock face. If you change the array of strings, you can easily create different effects.
I made the clock hands partly transparent so you could see my company's logo through the hands (hey, If I'm gonna post demo code, I'm going to include a little advertising!)