Add animated overlay image to video

Question

I want to add image overlay on video.
For that I followed this tutorial. Now I want to add fade in for 1 second and fade out after 5 second for 1 second. For that I written following code.

CALayer *overlayLayer1 = [CALayer layer];
[overlayLayer1 setContents:(id)[overlayImage CGImage]];
overlayLayer1.frame = CGRectMake(0, 0, size.width, size.height);
[overlayLayer1 setMasksToBounds:YES];

CALayer *overlayLayer2 = [CALayer layer];
[overlayLayer2 setContents:(id)[overlayImage CGImage]];
overlayLayer2.frame = CGRectMake(0, 0, size.width, size.height);
[overlayLayer2 setMasksToBounds:YES];

CALayer *overlayLayer3 = [CALayer layer];
[overlayLayer3 setContents:(id)[overlayImage CGImage]];
overlayLayer3.frame = CGRectMake(0, 0, size.width, size.height);
[overlayLayer3 setMasksToBounds:YES];

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
animation.duration=1.0;
animation.repeatCount=1;
animation.autoreverses=NO;
animation.fromValue=[NSNumber numberWithFloat:0.0];
animation.toValue=[NSNumber numberWithFloat:1.0];
animation.beginTime = AVCoreAnimationBeginTimeAtZero;
[overlayLayer1 addAnimation:animation forKey:@"animateOpacity"];

animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
animation.duration=5.0;
animation.repeatCount=1;
animation.autoreverses=NO;
animation.fromValue=[NSNumber numberWithFloat:1.0];
animation.toValue=[NSNumber numberWithFloat:1.0];
animation.beginTime = CACurrentMediaTime() + 1.0;
[overlayLayer2 addAnimation:animation forKey:@"animateOpacity"];

animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
animation.duration=1.0;
animation.repeatCount=1;
animation.autoreverses=NO;
animation.fromValue=[NSNumber numberWithFloat:1.0];
animation.toValue=[NSNumber numberWithFloat:0.0];
animation.beginTime = CACurrentMediaTime() + 6.0;
[overlayLayer3 addAnimation:animation forKey:@"animateOpacity"];

[parentLayer addSublayer:overlayLayer1];
[parentLayer addSublayer:overlayLayer2];
[parentLayer addSublayer:overlayLayer3];
composition.animationTool = [AVVideoCompositionCoreAnimationTool videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer];

But when I ran this code there is no animation for image overlay. Just image is displaying for all time.

I've used GPUImage for some other action in this project. If through GPUImage I can do this then please help me to solve with this also.
Please help me to solve this issue.

Answer 1

I think your problem is that you are adding animation for same key.
Try below code where I'm suggesting you to create another object for animation and use another key.

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
animation.duration=1.0;
animation.repeatCount=1;
animation.autoreverses=NO;
animation.fromValue=[NSNumber numberWithFloat:0.0];
animation.toValue=[NSNumber numberWithFloat:1.0];
animation.beginTime = AVCoreAnimationBeginTimeAtZero;
animation.removedOnCompletion=NO;
animation.fillMode = kCAFillModeForwards;
[overlayLayer1 addAnimation:animation forKey:@"animateOpacity"];

CABasicAnimation * animation1 = [CABasicAnimation animationWithKeyPath:@"opacity"];
animation1.duration=1.0;
animation1.repeatCount=1;
animation1.autoreverses=NO;
animation1.fromValue=[NSNumber numberWithFloat:1.0];
animation1.toValue=[NSNumber numberWithFloat:0.0];
animation1.beginTime = AVCoreAnimationBeginTimeAtZero+6.0;
animation1.fillMode = kCAFillModeForwards;
animation1.removedOnCompletion=NO;

[overlayLayer1 addAnimation:animation1 forKey:@"animateOpacity1"];

Hope this works...