iPhone/iPad Spinner to keep animation

Question

I am new to core-animationI am basing this on a previous post: spin image clockwise/anticlockwise on touch

Probably a basic question, but I just want the circle to spin a certain distance and then stop. When the animation ends, it reverts back to the original location.

How do I keep the item to stay where it's at when the animation ends?

---

What I really want is free floating wheel that responds to user swiping. When the user swipes to the left on the wheel, the wheel spins to the left. Depending on the speed of the swipe, the wheel spins faster and then starts to slow down. If anyone can give some hints or directions on this, I would be greatly appreciative.

Answer 1

This is a common point of confusion with Core Animation. A CAAnimation doesn't actually change the backing "model" properties of the layer. It just changes how the layer appears to the user. So your toValue is never set on your layer, and you need to do it yourself. You can do this right before or after you kick of the animation. Your new value will be set, but the user won't see it until the animation finishes. A contrived example:

CABasicAnimation *rotate = [CABasicAnimation animationWithKeyPath:@"transform"];
rotate.fromValue = [NSValue valueWithCATransform3D:myLayer.transform];
rotate.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(myLayer.transform, M_PI, 0.f, 0.f, 1.f)];
rotate.duration = .5f;

myLayer.transform = CATransform3DRotate(myLayer.transform, M_PI, 0.f, 0.f, 1.f);
[myLayer addAnimation:rotate forKey:@"transform"];

The two important pieces are setting the property on the layer and using the property name as the key in addAnimation:forKey: . Don't worry about the implicit animation. Internally, a CALayer holds all of its animations in a dictionary keyed off of the property names, and when you add a new animation, it cancels and replaces any existing animation for the specified key/property.

Also, I can't tell if you needed help with the swipe gesture or not, but you should check out UIPanGestureRecognizer if you haven't yet. It provides a handy velocityInView: method which will give you a 2D vector in the direction of the pan expressed in points per second. I have some gesture recognizer sample code up on github that might help.

Answer 2

(By the way, that is an awesome implementation.)

You need to specify two more properties: Fill Mode and Remove On Completion:

animation.fillMode  = kCAFillModeForwards;

Determines if the receiver's presentation is frozen or removed once its active duration has completed. These constants determine how the timed object behaves once its active duration has completed.

animation.removedOnCompletion = NO;

Determines if the animation is removed from the target layer's animations upon completion.

From the Apple documentation:

http://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CAMediaTiming_protocol/Introduction/Introduction.html

http://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CAAnimation_class/Introduction/Introduction.html%23//apple_ref/occ/cl/CAAnimation