How to do a curve/arc animation with CAAnimation?

user_191731 0
Viewed 16679

I have an user interface where an item get deleted, I would like to mimic the "move to folder" effect in iOS mail. The effect where the little letter icon is "thrown" into the folder. Mine will get dumped in a bin instead.

I tried implementing it using a CAAnimation on the layer. As far as I can read in the documentations I should be able to set a byValue and a toValue and CAAnimation should interpolate the values. I am looking to do a little curve, so the item goes through a point a bit above and to the left of the items start position.

    CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"position"];
[animation setDuration:2.0f];
[animation setRemovedOnCompletion:NO];
[animation setFillMode:kCAFillModeForwards];    
[animation setTimingFunction:[CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut]];
[animation setFromValue:[NSValue valueWithCGPoint:fromPoint]];
[animation setByValue:[NSValue valueWithCGPoint:byPoint]];
[animation setToValue:[NSValue valueWithCGPoint:CGPointMake(512.0f, 800.0f)]];
[animation setRepeatCount:1.0];

I played around with this for some time, but it seems to me that Apple means linear interpolation. Adding the byValue does not calculate a nice arc or curve and animate the item through it.

How would I go about doing such an animation?

Thanks for any help given.

caanimation ios
5 Answers

I have had a bit similar question several days ago and I implemented it with timer, as Brad says, but not NSTimer. CADisplayLink - that is the timer which should be used for this purpose, as it is synchronized with the frameRate of the application and provides smoother and more natural animation. You can look at my implementation of it in my answer here. This technique really gives much more control on animation than CAAnimation, and is not much more complicated. CAAnimation can't draw anything since it doesn't even redraw the view. It only moves, deforms and fades what is already drawn.

user_6561000
Related