UIImageView rotation animation with easy out

Question

I am rotating a round arrow at the moment round in round in circles.. This is cool and all but I am wanting to have something a little more polished when it comes to ending like other views where you can animate them to ease in or out, I was wondering if you can do the same for this.. this is my code as it stands..

- (IBAction)animator:(id)sender
{
    [arrowRotation removeFromSuperview];

    //arrow animation
    arrowRotation = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"arrow.png"]];
    arrowRotation.frame = CGRectMake(148.0, 20.0, 30.0, 30.0);
    [self.view addSubview:arrowRotation];



    CABasicAnimation *fullRotation;
    fullRotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    fullRotation.fromValue = [NSNumber numberWithFloat:0];
    fullRotation.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)];
    fullRotation.duration = 0.75f;
    fullRotation.repeatCount = 3;

    [arrowRotation.layer addAnimation:fullRotation forKey:@"360"];
}

So my question is can I make this animation slow down when it comes to the 3 rotation.. like an ease out of a UIView. if that makes sense..

any help would be greatly appreciated.

Answer 1

First off, in this line fullRotation.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)]; , your float ((360*M_PI)/180) will rotate the circle 360 degrees, but your numbers are a little excessive. What I mean by this is that you can simplify it to 2*M_PI .

Second: If you want to customize this more, you can use a CAKeyframeAnimation :

CAKeyframeAnimation *rotationAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];

NSArray *rotationValues = [NSArray arrayWithObjects: [NSNumber numberWithFloat: 0], [NSNumber numberWithFloat: (2*M_PI)], nil];

[rotationAnimation setValues:rotationValues];

NSArray *rotationTimes = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0f],[NSNumber numberWithFloat:1.0f], nil];
[rotationAnimation setKeyTimes:rotationTimes];

NSArray *rotationTimingFunctions = [NSArray arrayWithObjects:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut],  nil];
[rotationAnimation setTimingFunctions:rotationTimingFunctions];

rotationAnimation.fillMode = kCAFillModeForwards;
rotationAnimation.removedOnCompletion = NO;
rotationAnimation.duration = 1;

[self.view.layer addAnimation:rotationAnimation forKey:@"animation"];

Hope this helps!

Answer 2

Use UIView animateWithDuration:delay:options:animations:completion: to do the animations and use the option UIViewAnimationOptionCurveEaseOut . This is the updated, preferred UIView animation method on iOS, and will let you do the ease out you want.

Docs here: http://developer.apple.com/library/ios/#documentation/uikit/reference/uiview_class/uiview/uiview.html

Let me know if you have any questions!