smooth pendular animation with Core Animation Framework

Question

Hi Guys,

im trying to do an animation with an uiimageview. in this view is an image with an arrow, that i want to rotate about 45 degrees back and forward very smoothly like an pendular or an old clock. something like this, just smooth and with my image: http://bit.ly/cArvNw (found this with google ;) )

my current setup looks like this:

    UIImageView* rotatingImage = [[UIImageView alloc] initWithFrame:CGRectMake(10.0, 10.0, 200.0, 200.0)];
    [rotatingImage setImage:[UIImage imageNamed:@"wind.png"]];

    CALayer *layer = rotatingImage.layer;
    CAKeyframeAnimation *animation;
    animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
    animation.duration = 0.5f;
    animation.cumulative = YES;
    animation.repeatCount = 100;
    animation.values = [NSArray arrayWithObjects:           // i.e., Rotation values for the 3 keyframes, in RADIANS
                        [NSNumber numberWithFloat:[self degreesToRadians:45.0]], 
                        [NSNumber numberWithFloat:[self degreesToRadians:-45.0]], nil]; 
    animation.keyTimes = [NSArray arrayWithObjects:     // Relative timing values for the 3 keyframes
                          [NSNumber numberWithFloat:0], 
                          [NSNumber numberWithFloat:.5], nil]; 
    animation.timingFunctions = [NSArray arrayWithObjects:
                                 [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn],        // from keyframe 1 to keyframe 2
                                 [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut], nil]; // from keyframe 2 to keyframe 3
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;

    [layer addAnimation:animation forKey:nil];

    [self addSubview:rotatingImage];

this is really a pain, add 45 degrees, then 45 degrees backward with "-45" doesnt work. im very new to core animation and dont know how to setup my code, to get my wanted animation.

can anybody help please?

Answer 1

Note: This method does not use Core Animation, but it's very simple and probably uses less resources.

First, make the UIImageView twice as tall, thereby making the center of rotation equal to the center of the image.

Then, define these in the @interface of the header file (of, say, your UIViewController):

BOOL goingCW; // going clockwise = YES, going counterclockwise = NO
CGFloat angle; // angle by which to change the image's rotation value

Then put this in an init method that runs once:

goingCW = YES; // change this to NO to make it start rotating CCW instead
angle = 0;

[NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(update) userInfo:nil repeats:YES];

Then define update, given that arrow is the UIImageView instance:

- (void)update {
    if (goingCW) {
        if (angle > M_PI / 4) goingCW = NO; // M_PI / 4 is equal to 45 degrees
        angle += M_PI / 60; // increase 60 to slow down the rotation, etc.
    } else {
        if (angle < -M_PI / 4) goingCW = YES; // -M_PI / 4 is equal to -45 degrees
        angle -= M_PI / 60; // increase 60 to slow down the rotation, etc.
    }

    // rotate the UIImageView appropriately
    arrow.transform = CGAffineTransformMakeRotation(angle);
}

This also assumes that you are starting in the facing-down position.

Answer 2

Have you looked at Apple's Example iPhone Application, "Metronome"?

It does almost exactly what you're trying to do, using Core Animation.