Creating a Swingometer on the iPhone using Core-Animation

Question

Hi there,

I'm trying to create a swingometer, a bit like the ones used in golf games, where the user holds a button to start a swing, releases at the apex to determine power, at which point the 'swing' reverses direction, and the user taps again on the way down to set the accuracy.

Rather than having a bar that fills up, I would like to use a pendulum that swings from left to right. The pendulum leaves a mark where it is first tapped (power) and another mark where it is tapped for the second time (accuracy).

My first problem is rotating the pendulum. I've been reading these posts about rotating a UIImageView - here , here and here but I was hoping I might be able to get a little extra advice :)

First of all, is rotating a UIImageView the best way to approach this? I was thinking of determining how close the pendulum is to the correct spot by comparing its coordinates to the coordinates of the correct spot. But for this to work, the UIImageView would have to physically move, which I'm not sure it does? Also, how does one make a UIImageView rotate around a specific spot, rather than the centre point. Or should I just make the pendulum's bounding box bigger so the centre point is in the correct position. And how can I leave a 'stamp' where the user hits (or releases) the button?

Any general help regarding the best way to approach this would be very much appreciated :) Perhaps my question is a little vague and generalised, but I'm hoping someone might like the challenge :)

Thanks!!

Michael

UPDATE:

Ok I've tried the following two approaches, both of which now work.

- (void)viewDidLoad {
    pendulum.image = [UIImage imageNamed:@"winkOpen.png"];
    [self swingPendulum];
}

- (void)swingPendulum {
CABasicAnimation *rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat:degreesToRadian(180)]; 
rotationAnimation.duration = 0.75;
rotationAnimation.repeatCount = 1.0; 
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

[pendulum.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];

}

/*
- (void)swingPendulum {
    [UIView setAnimationBeginsFromCurrentState:YES];
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1];
    pendulum.transform = CGAffineTransformMakeRotation(degreesToRadian(180));
    [UIView setAnimationDelegate:self];
    [UIView commitAnimations];
}
*/

Now I'm not sure which approach is better, but with the first, the pendulum swings above 0 degrees rather than below it, so I'm going with that.

Now I need to determine where the pendulum stops and reverse the swing... But maybe I'll post those as separate questions since this is getting a bit cluttered! I'll make sure my questions are more specific in future :)

Answer 1

For the animation, you will want to look at transforms. See the Quartz 2D programming guide:Transforms.

You should not use the actual pixel location of the view for your calculations. If you do, changes in screen dimensions and/or resolution will require a complete rewrite. Instead create an abstract data model of the motion and location, perform your calculations within the abstract model. Then translate the abstract coordinates to the coordinates of the current display.

Getting the imageView to appear where you want it is relatively trivial compared to calculating where it should be in the first place. You have to get the motion right. Remember, "it don't mean thing if you ain't got that swing!"