Jerky Animation for UiView PopOut

Question

I have a UIView for which I am using the following code for pop-in animation

float duration=1.3f;
CAKeyframeAnimation *scale = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
scale.duration = duration;
scale.values = [NSArray arrayWithObjects:[NSNumber numberWithFloat:.5f],
                [NSNumber numberWithFloat:1.1f],
                [NSNumber numberWithFloat:0.95f],
                [NSNumber numberWithFloat:1.f],
                nil];

CABasicAnimation *fadeIn = [CABasicAnimation animationWithKeyPath:@"opacity"];
fadeIn.duration = duration * .2f;
fadeIn.fromValue = [NSNumber numberWithFloat:0.f];
fadeIn.toValue = [NSNumber numberWithFloat:1.f];
fadeIn.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
fadeIn.fillMode = kCAFillModeForwards;

CAAnimationGroup *animationgroup = [CAAnimationGroup animation];
animationgroup.delegate=self;
animationgroup.animations = [NSArray arrayWithObjects:scale, fadeIn, nil];
animationgroup.duration = duration;
animationgroup.fillMode = kCAFillModeForwards;
animationgroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[animationgroup setValue:@"popIn" forKey:@"name"];
animationgroup.fillMode=kCAFillModeForwards;

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

That works fone. It pops In the view in perfect way. But the code of pop-out animation is gives a jerk at end of animation that looks quite wierd.

Here is my popout code

float duration=0.15f;
CAKeyframeAnimation *scale = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
scale.duration = duration;
scale.removedOnCompletion = NO;
scale.values = [NSArray arrayWithObjects:[NSNumber numberWithFloat:1.f],
                [NSNumber numberWithFloat:1.1f],
                [NSNumber numberWithFloat:.15f],
                nil];

CABasicAnimation *fadeOut = [CABasicAnimation animationWithKeyPath:@"opacity"];
fadeOut.duration = duration * .4f;
fadeOut.fromValue = [NSNumber numberWithFloat:1.f];
fadeOut.toValue = [NSNumber numberWithFloat:0.f];
fadeOut.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
fadeOut.beginTime = duration * .6f;
fadeOut.fillMode = kCAFillModeBoth;


CAAnimationGroup *animationgroup = [CAAnimationGroup animation];
animationgroup.animations = [NSArray arrayWithObjects:scale, fadeOut, nil];
animationgroup.duration = duration;
animationgroup.fillMode = kCAFillModeForwards;
animationgroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[animationgroup setValue:@"popOut" forKey:@"name"];
animationgroup.fillMode=kCAFillModeForwards;


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

Answer 1

During Animation only the presentation layer gets changes while the modal layer of the view stays to its original state. In your case you are not preserving the state of presentation layer when animation is finished and Modal layer appears which is in it original form. which seems like the Jerk effect.

Use the following line after "animationgroup.fillMode=kCAFillModeForwards;" to preserve the presentation layer state and the jerk will go away.

animationgroup.removedOnCompletion=NO;

Answer 2

The scale sequence 1.0, 1.1, 0.15 should result in a jerk.

If you are not satisfied with the visual results, try fiddling with the values above and the timing function (you are using "easeIn" instead of "easeInOut").