Video effects creation: How to add borders, watermarks, animations, and 3D effects to your videos

This article is based on the translation of this article from Raywenderlich: Avfoundation tutorial:adding Overlays and animations to Videos

This is the article I made a lot of reference to the video. Write very well, suggest reading my this article to see the original text.

Section one: Adding a border to a video

The first section of today explains how to add a border and animation to a video, first of all, this frame and animation does not directly modify a frame of the video to give him an added border or animation effect, this animation is more like a video to add a calayer, and then control the layer to produce animation effect. Because specific to a certain frame of this operation is not what the iphone should do, he can not do it.

Let's take a look at a diagram and learn how to add animation to video.

The principle of animation layer

You can see videolayer this thing, in fact, this layer is responsible for displaying our video, and his peers is a call Animationlayer, we can control and play the trick is actually the thing called Animationlayer, Because this animationlayer can be created by ourselves.

Here's a look at the picture

The principle of animation layer

This is the effect of adding a border in the original text. You can think about what the principle is?

Actually very simple, and we videolayer level layer called Animationlayer (is background), they have a parent class called Parentlayer, Then add the border is nothing more than animationlayer this layer to find a frame of the picture, and then put him under the Videolayer, Then the Videolayer (crop is cut) size control to just can display the four sides of the animationlayer, so, not become a border effect.

I found a picture with a border.

Picture with a border

We create a calayer at this time, and then we set the content of this layer as the picture content. The contents are as follows.

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

We created the background layer, so we need to create a videolayer, this time to set up the Calayer frame needs attention, this time you want to let Videolayer display background layer of the four sides, so it needs to be set.

123	CALayer *videoLayer = [CALayer layer];videoLayer.frame = CGRectMake(_widthBar.value, _widthBar.value,                            size.width-(_widthBar.value*2), size.height-(_widthBar.value*2));

_widthbar.value is the width of our borders, so the meaning of this sentence is to set the Videolayer frame so that it can correctly display the four sides of the background layer.

At this time, we set the background layer and videolayer so how to let the system know, so in the editing of video with these settings. This method needs to be used.

1234

  [parentlayer addsublayer:backgroundlayer];     [parentlayer addsublayer:videolayer];    composition.animationtool = [avvideocompositioncoreanimationtool                              Videocompositioncoreanimationtoolwithpostprocessingasvideolayer:videolayer inlayer:parentlayer];

The composition here is avmutablevideocomposition, if you do not know what is the thing, a blog. The main point here is to tell the system that our layer is parentlayer, which is responsible for the video display in Parentlayer to make our videolayer.

In fact, you see here can open the demo, find this class, and then modify the Parentlayer add Backgroundlayer and Videolayer order, to see what the situation. Or find yourself a few pictures, create a few layers, set the content of Calayer as a picture, and then add to the Parentlayer, see what changes, in short, need to try more.

How is this done?

And how does this work? Think of yourself.

Section two, how to add a watermark to a video

In fact, after reading the first part, the steps to add a watermark has been ready, nothing is to put our own watermark on a layer, and then add this layer to the top of the Videolayer is not on the line. The code is as follows, note the comment content.

12345678910111213141516171819202122

// 1 - 这个layer就是用来显示水印的。CATextLayer *subtitle1Text = [[CATextLayer alloc] init];[subtitle1Text setFont:@"Helvetica-Bold"];[subtitle1Text setFontSize:36];[subtitle1Text setFrame:CGRectMake(0, 0, size.width, 100)];[subtitle1Text setString:_subTitle1.text];[subtitle1Text setAlignmentMode:kCAAlignmentCenter];[subtitle1Text setForegroundColor:[[UIColor whiteColor] CGColor]];// 2 - The usual overlayCALayer *overlayLayer = [CALayer layer];[overlayLayer addSublayer:subtitle1Text];overlayLayer.frame = CGRectMake(0, 0, size.width, size.height);[overlayLayer setMasksToBounds:YES];CALayer *parentLayer = [CALayer layer];CALayer *videoLayer = [CALayer layer];parentLayer.frame = CGRectMake(0, 0, size.width, size.height);videoLayer.frame = CGRectMake(0, 0, size.width, size.height);// 这里看出区别了吧，我们把overlayLayer放在了videolayer的上面，所以水印总是显示在视频之上的。[parentLayer addSublayer:videoLayer];[parentLayer addSublayer:overlayLayer];composition.animationTool = [AVVideoCompositionCoreAnimationTool                             videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer];

Watermark Content

Section III: How to animate video

The principle does not want to repeat, all the tricks are on our own created layer, because we use a layer, so naturally can use coreanimation-based animation to make our layer move up.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 6667686970717273747576777879808182838485

// 1UIImage *animationImage = [UIImage imageNamed:@"star.png"];;CALayer *overlayLayer1 = [CALayer layer];[overlayLayer1 setContents:(id)[animationImage CGImage]];overlayLayer1.frame = CGRectMake(size.width/2-64, size.height/2 + 200, 128, 128);[overlayLayer1 setMasksToBounds:YES];CALayer *overlayLayer2 = [CALayer layer];[overlayLayer2 setContents:(id)[animationImage CGImage]];overlayLayer2.frame = CGRectMake(size.width/2-64, size.height/2 - 200, 128, 128);[overlayLayer2 setMasksToBounds:YES];// 2 - Rotateif(_animationSelectSegment.selectedSegmentIndex == 0) {CABasicAnimation *animation =[CABasicAnimation animationWithKeyPath:@"transform.rotation"];animation.duration=2.0;animation.repeatCount=5;animation.autoreverses=YES;// rotate from 0 to 360animation.fromValue=[NSNumber numberWithFloat:0.0];animation.toValue=[NSNumber numberWithFloat:(2.0 * M_PI)];animation.beginTime = AVCoreAnimationBeginTimeAtZero;[overlayLayer1 addAnimation:animation forKey:@"rotation"];animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];animation.duration=2.0;animation.repeatCount=5;animation.autoreverses=YES;// rotate from 0 to 360animation.fromValue=[NSNumber numberWithFloat:0.0];animation.toValue=[NSNumber numberWithFloat:(2.0 * M_PI)];animation.beginTime = AVCoreAnimationBeginTimeAtZero;[overlayLayer2 addAnimation:animation forKey:@"rotation"];// 3 - Fade} elseif(_animationSelectSegment.selectedSegmentIndex == 1) {CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"opacity"];animation.duration=3.0;animation.repeatCount=5;animation.autoreverses=YES;// animate from fully visible to invisibleanimation.fromValue=[NSNumber numberWithFloat:1.0];animation.toValue=[NSNumber numberWithFloat:0.0];animation.beginTime = AVCoreAnimationBeginTimeAtZero;[overlayLayer1 addAnimation:animation forKey:@"animateOpacity"];animation=[CABasicAnimation animationWithKeyPath:@"opacity"];animation.duration=3.0;animation.repeatCount=5;animation.autoreverses=YES;// animate from invisible to fully visibleanimation.fromValue=[NSNumber numberWithFloat:1.0];animation.toValue=[NSNumber numberWithFloat:0.0];animation.beginTime = AVCoreAnimationBeginTimeAtZero;[overlayLayer2 addAnimation:animation forKey:@"animateOpacity"];  // 4 - Twinkle} elseif(_animationSelectSegment.selectedSegmentIndex == 2) {CABasicAnimation *animation =[CABasicAnimation animationWithKeyPath:@"transform.scale"];animation.duration=0.5;animation.repeatCount=10;animation.autoreverses=YES;// animate from half size to full sizeanimation.fromValue=[NSNumber numberWithFloat:0.5];animation.toValue=[NSNumber numberWithFloat:1.0];animation.beginTime = AVCoreAnimationBeginTimeAtZero;[overlayLayer1 addAnimation:animation forKey:@"scale"];animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];animation.duration=1.0;animation.repeatCount=5;animation.autoreverses=YES;// animate from half size to full sizeanimation.fromValue=[NSNumber numberWithFloat:0.5];animation.toValue=[NSNumber numberWithFloat:1.0];animation.beginTime = AVCoreAnimationBeginTimeAtZero;[overlayLayer2 addAnimation:animation forKey:@"scale"];}// 5CALayer *parentLayer = [CALayer layer];CALayer *videoLayer = [CALayer layer];parentLayer.frame = CGRectMake(0, 0, size.width, size.height);videoLayer.frame = CGRectMake(0, 0, size.width, size.height);[parentLayer addSublayer:videoLayer];[parentLayer addSublayer:overlayLayer1];[parentLayer addSublayer:overlayLayer2];composition.animationTool = [AVVideoCompositionCoreAnimationTool                           videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer];}

Animation effects

Fourth: How to make 3D effect on our video layer

3D effect

All of the above effects are in our animatinlayer, to know that videolayer he is also a calayer, then in fact, the ordinary layer can do the same thing he can do. The code is as follows.

12345678910111213141516171819

// 1 - Layer setupCALayer *parentLayer = [CALayer layer];CALayer *videoLayer = [CALayer layer];parentLayer.frame = CGRectMake(0, 0, size.width, size.height);videoLayer.frame = CGRectMake(0, 0, size.width, size.height);[parentLayer addSublayer:videoLayer];// 2 - Set up the transformCATransform3D identityTransform = CATransform3DIdentity;// 3 - 具体设置可以看demoif(_tiltSegment.selectedSegmentIndex == 0) {    identityTransform.m34 = 1.0 / 1000; // greater the denominator lesser will be the transformation} elseif (_tiltSegment.selectedSegmentIndex == 1) {    identityTransform.m34 = 1.0 / -1000; // lesser the denominator lesser will be the transformation}// 4 - 给我们的video层做rotationvideoLayer.transform = CATransform3DRotate(identityTransform, M_PI/6.0, 1.0f, 0.0f, 0.0f);// 5 - Compositioncomposition.animationTool = [AVVideoCompositionCoreAnimationTool                             videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer];

The above code is easy to understand, is to give our video layer to do rotation, in fact, you can change the data in the demo, try Makescale,maketranslate and other transform.

Section Fifth: How to make video push effect

See my demo for specific content.

Top 4 Demo Address: Http://cdn2.raywenderlich.com/wp-content/uploads/2013/05/VideoEditing-Final2.zip

Video Propulsion demo Address: Https://github.com/pingguo-zangqilong/VideoPushDemo

Video propulsion demo uses a direct dot synthesis, no video selection.

Video effects creation: How to add borders, watermarks, animations, and 3D effects to your videos