Question

I’m having this problem with a CAKeyframeAnimation. After animating the layer of a UIView, i’d like to position the UIView to the position I’m animating to so that the user can continue using the buttons on this UIView.

I’m currently using this code:

    // Open animation
    CAKeyframeAnimation *openAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.y"];
    openAnimation.fillMode = kCAFillModeForwards;
    openAnimation.duration = .55;
    openAnimation.delegate = self;
    openAnimation.removedOnCompletion = NO;


    openAnimation.values = [NSArray arrayWithObjects:
                            [NSNumber numberWithFloat:0.0],
                            [NSNumber numberWithFloat:58.0],
                            [NSNumber numberWithFloat:48.0], nil];

    openAnimation.keyTimes = [NSArray arrayWithObjects:
                              [NSNumber numberWithFloat:0.0],
                              [NSNumber numberWithFloat:0.62],
                              [NSNumber numberWithFloat:1.0], nil];

    openAnimation.timingFunctions = [NSArray arrayWithObjects:
                                     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut], 
                                     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut], nil];

    [locationView.layer addAnimation:openAnimation forKey:@"OPEN_ANIMATION"];

And the delegate method:

- (void)animationDidStop:(CAKeyframeAnimation *)anim finished:(BOOL)flag
{
    locationView.y = -10.0;
}

This actually works but at the end I’m having this display glitch that the animation gets removed (UIView layer jumps back to original position) and instantly calls the delegate method, which makes it jump to the end position.

I feel like the procedure at the end is the following: the animation completes, renders the last frame of the animation, jumps back to the original position, renders this frame, calls the delegate method and puts the uiview on its end position.

How can I fix this display glitch?

Answer 1

I would try setting the end position before you add the animation to the layer. Assuming you are changing the position of the layer in your animationDidStop function I would change these lines

// Set end position for layer

CAKeyframeAnimation *openAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position.y"];
openAnimation.fillMode = kCAFillModeBackwards;
//openAnimation.removedOnCompletion = NO;

// The rest of your code

They keypath is important here as you must set the be setting the same property of the layer as the keypath (in this case position). Otherwise, the fillmode won’t work correctly.