I am programming a gauge display for an iphone application: a centered needle UIImageView against a fixed background UIImageView. I am new to iPhone programming, and don’t know much about CoreAnimation, but with looking through examples and fiddling with my anchorPoint setting and the position of the needle image against the background in InterfaceBuilder, my needle is coming up with my desired rotation point properly centered against the background:
self.needleIV.layer.anchorPoint = CGPointMake( 0.5, 0.68 );
My test animations work perfectly (the needle remains properly centered in the gauge, and rotates around my desired rotation point, the anchor point), using this code:
CABasicAnimation *rotateAnimation = [CABasicAnimation animation];
rotateAnimation.keyPath = @"transform.rotation.z";
rotateAnimation.fromValue = [NSNumber numberWithFloat:DegreesToRadians( (rand() % 270 - 135) )];
rotateAnimation.toValue = [NSNumber numberWithFloat:DegreesToRadians( (rand() % 270 - 135) )];
rotateAnimation.duration = 4.0;
rotateAnimation.removedOnCompletion = NO;
// leaves presentation layer in final state; preventing snap-back to original state
rotateAnimation.fillMode = kCAFillModeBoth;
rotateAnimation.repeatCount = 0;
rotateAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
// Add the animation to the selection layer. This causes it to begin animating.
[self.needleIV.layer addAnimation:rotateAnimation forKey:@"rotateAnimation"];
The problem is that at application launch the needle comes up initially pointing straight up (which is how the needle looks in the image file), and I can’t figure out how to give it an initial rotation value which doesn’t mess up the animation code. (By “mess up” I mean the needle doesn’t rotate on the correct axis, and becomes uncentered in the gauge).
I’ve tried setting layer.transform to a 3d rotation matrix rotated around the z axis, but this moves the needle off center. I’ve tried this code as well:
[self.needleIV.layer setValue:[NSNumber numberWithFloat:DegreesToRadians(-135.0)] forKeyPath:@"transform.rotation.z"];
which didn’t work either (needle moved off anchorPoint center), and I had high hopes since it’s apparently using the same transform to the working animation code.
I also tried just putting the working animation snippet in my view controller’s viewDidLoad function to “animate” the needle to it’s start location, but it doesn’t do anything at all — apparently the animation doesn’t run until the image is actually up and on the screen, and I’ve confirmed in the debugger that the screen is still black in viewDidLoad.
At this point I’m about to try just hacking in a timer to run an initial animation “long enough” after the app starts to set an animation that rotates the needle properly, but I’d really like to understand what’s going wrong here, and why the animation is apparently rotating around a different axis than is my other attempts at pre-rotation/pre-animation.
The anchorPoint is relative to the bounds of the parent. Is it possible the bounds of the parent layer/view change after viewDidLoad?
You should be able to do all this using the UIView center and transform properties, which are 2D so implicitly rotate about the z axis.