Search code examples
iphonecore-animationtransform

iPhone, How do I rotate an UIImageView around a point using Core Animation and CATransform3D?

This is what I want to do:

(1) (2) 
|    /
|   /
|  /
| /
|/
*
(3)

I want to move an UIImageView represented by a clock pin (width:9px, height 73px) from position (1) to position (2) around point (3) which is one end of the image. I tried to set the anchorpoint to (0,0) or to set the image center to point (517,177) which is the *(3) location on the iPad screen, but I had no success:

My degreeToRadians macro is defined in the following way:

#define degreesToRadian(x) (M_PI * (x) / 180.0)

/* kmPointer is the UIImageView */

NSValue *value = nil;
CABasicAnimation *animation = nil; 
CATransform3D transform;
kmPointer.layer.anchorPoint = CGPointMake(0, 0);
[kmPointer.layer removeAllAnimations]; 
animation = [CABasicAnimation animationWithKeyPath:@"transform"]; 
transform = CATransform3DMakeRotation(degreesToRadian(30), 0.0f, 0.0f, 1.0f); 
value = [NSValue valueWithCATransform3D:transform]; 
[animation setToValue:value]; 
transform = CATransform3DMakeRotation(0.0f, 0.0f, 0.0f, 1.0f); 
value = [NSValue valueWithCATransform3D:transform]; 
[animation setFromValue:value]; 
[animation setAutoreverses:NO]; 
[animation setDuration:1.0f]; 
[animation setRepeatCount:1]; 
[kmPointer.layer addAnimation:animation forKey:nil];

How can I make the pointer to rotate around the star marked with (3)?

Solution

  • The Apple docs that show the anchor point image are for OSX. Here is what it looks like for iOS: alt text http://img.skitch.com/20100728-8ggje4xr8jixa7c2gam96npc9g.png

    So try setting your anchor point to 0.0, 1.0.