Question

I’m using a rotation animation created with CABasicAnimation. It rotates a UIView over 2 seconds. But I need to be able to stop it when the UIView is touched. If I remove the animation the view is in the same position as before the animation started.

Here’s my animation code:

float duration = 2.0;
float rotationAngle = rotationDirection * ang * speed * duration;
//rotationAngle =  3*(2*M_PI);//(double)rotationAngle % (double)(2*M_PI) ;
CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat: rotationAngle ];
rotationAnimation.duration = duration;
rotationAnimation.cumulative = YES;
rotationAnimation.removedOnCompletion = NO;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
rotationAnimation.fillMode = kCAFillModeForwards;
rotationAnimation.delegate = self;

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

How can I stop the UIView‘s rotation right where it is, when it’s touched? I know how to manage the touch part, but I can’t figure out how to stop the view at the animation’s current angle.

Solution:
I solved the problem by getting the angle of the presentation layer, removing the animation and setting the view’s transform. Here’s the code:

[self.view.layer removeAllAnimations];      
CALayer* presentLayer = self.view.layer.presentationLayer; 
float currentAngle = [(NSNumber *)[presentLayer valueForKeyPath:@"transform.rotation.z"] floatValue];
self.view.transform = CGAffineTransformMakeRotation(currentAngle);

Answer 1

Good question! For this, it’s helpful to know the Core Animation architecture.

If you check out the diagram in the Core Animation Programming Guide that describes the Core Animation Rendering Architecture, you can see that there’s three trees.

You have the model tree. That’s where you set the values of what you want to happen. Then there’s the presentation tree. That’s what is pretty much happening as far as the runtime is concerned. Then, finally is the render tree. That’s what the user sees.

In your case, you want to query the values of the presentation tree.

It’s easy to do. For the view that you have attached the animation, get the layer and for that layer, query the presentationLayer‘s values. For example:

CATransform3D myTransform = [(CALayer*)[self.view.layer presentationLayer] transform];

There’s no way to “pause” an animation mid flow. All you can do is query the values, remove it, and then re-create it again from where you left off.

It’s a bit of a pain!

Have a look at some of my other posts where I go into this in a bit more detail, e.g.

Restoring animation where it left off when app resumes from background

Don’t forget also that when you add an animation to a view’s layer, you aren’t actually changing the underlying view’s properties. So what happens? We’ll you get weird effects where the animation stops and you see the view in it’s original position.

That’s where you need to use the CAAnimation delegates. Have a look at my answer to this post where I cover this:

CABasicAnimation rotate returns to original position