How to do a curve/arc animation with CAAnimation?

Question

Hi

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.

Answer 1

Probably not the answer you want - and I can't say for sure if it's correct - but I had looked into a similar thing before and came to the following conclusion:

Don't use CAAnimation.

Instead, set up a timer which files every (for example) 50mS - and do you "moves" inside the timer callback. That way, you can position things however yo want them - whenever you want them.