CAKeyframeAnimation - Examples

Question

I have a a menu that is a CALayer that will slide across the screen to a given point. I want the effect where the menu will go a little past the point, then a little before the point, and then land on the point. I can move the menu by applying a transform, but I was hoping to get this bouncing effect to work. I was looking into CAKeyframeAnimation, but I'm having trouble locating an example/tutorial. I've looked at the CA Programming Guide but haven't really found anything. Any links or help would be great. Thanks.

Check http://stackoverflow.com/questions/5161465/how-to-create-custom-easing-function-with-core-animation . The first answer there might give you some ideas. — Martin Wickman, Mar 06 '11 at 13:41
Checkout this framework I built that does some wicked stuff :) Should be a fairly good abstraction, as it does a lot under the hood https://github.com/AntonTheDev/FlightAnimator — AntonTheDev, Jun 23 '16 at 10:12

score 5 · Accepted Answer · answered Apr 25 '11 at 16:26

I released some code a while ago that does just what you're looking for. Basically, you need to generate your own CGPathRef containing all of the points you want the layer to hit, and use that path for the path attribute of the CAKeyframeAnimation. The code will look something like this:

CGPoint path[3] = {
    FTAnimationOutOfViewCenterPoint(enclosingView.bounds, view.frame, view.center, direction),
    [self overshootPointFor:view.center withDirection:direction threshold:(overshootThreshold_ * 1.15)],
    view.center
};

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathAddLines(thePath, NULL, path, 3);
animation.path = thePath;
CGPathRelease(thePath);

The whole method is here.

CAKeyframeAnimation - Examples

1 Answers1