视频特效制做：如何给视频添加边框、水印、动画以及3D效果

本文内容来自raywenderlich的这篇文章的翻译：AVFoundation Tutorial: Adding Overlays and Animations to Videos

这是我当年作视频大量参考的文章。写得很是好，建议看完个人这篇去看原文。

第一节：给视频添加边框

今天第一节先讲解如何为一个视频添加边框和动画，首先说明的是，这种边框和动画并不能直接修改视频的某一帧给他增长边框或者产生动画效果，这种动画更像是给视频的上面加一个calayer，而后控制这个layer产生动画效果。由于具体到某一帧的这种操做不是iphone应该作的他也作不到。

咱们先来看一张图，了解一下给video增长动画的原理。

动画层的原理

你能够看到videoLayer这个东西，其实这个layer就是负责显示咱们的视频，和他同级的是一个叫animationLayer的东西，咱们可以掌控而且玩出花样的实际上是这个叫animationLayer的东西，由于这个animationLayer能够由咱们本身建立。

这里看一个图

动画层的原理

这是原文中添加边框的效果。你们能够思考下原理是什么？

其实很简单，和咱们videoLayer同级别的layer叫animationLayer（就是上图的background），他们共同有个父类叫作parentLayer，那么增长边框无非是把animationLayer这个layer找个边框的图片,而后把他放到videoLayer的下面，而后把videoLayer（crop也就是裁剪）的尺寸控制到恰好能显示animationLayer的四边，这样，不就成了带边框的效果么。

我找了一张带边框的图片。

带边框的图片

咱们这时候建立一个CALayer，而后呢把这个layer的内容设置为图片内容。内容以下。

1 2 3 4

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

咱们建立好了背景layer，那么须要建立videoLayer了，这时候设置calayer的frame须要注意，这时候你为了让videoLayer可以显示background layer的四边，因此须要这么设置。

1 2 3

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

_widthBar.value就是咱们边框的宽度，因此这句话的意思就是设置videoLayer的frame使其可以正确显示background layer的四边。

这时候，咱们设置好了背景layer和videolayer那么怎么让系统知道，从而在编辑video的时候用到这些设置呢。须要使用这个方法。

1 2 3 4

[parentLayer addSublayer:backgroundLayer];     [parentLayer addSublayer:videoLayer];    composition.animationTool = [AVVideoCompositionCoreAnimationTool                             videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer];

这里的composition就是AVMutableVideoComposition，若是不知道是什么东西，看上一篇blog。 这里主要是告诉系统咱们的layer层是parentLayer，在parentLayer里负责video显示的使咱们的videoLayer。

其实你看到这里能够打开demo，找到这个类，而后修改一下parentLayer添加backgroundLayer和videoLayer的顺序，看看是什么状况。或者本身找几张图片，建立几个layer，把calayer的内容设置为图片，而后加到parentLayer里，看看有什么变化，总之须要本身多尝试。

这种是怎么作的呢？

这种又是怎么作的呢？本身思考下。

第二节，如何给视频添加水印

其实看完第一部分，添加水印的步骤已经呼之欲出，无非就是把咱们本身建的水印放在一个layer上，而后把这个layer添加到videolayer的上面不就好了么。代码以下，注意注释内容。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// 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 overlay CALayer *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];

水印内容

第三节：如何给视频添加动画

原理不想赘述，一切花样都在咱们本身建立的layer上，由于咱们用的是layer，因此天然可使用基于CoreAnimation的动画来使咱们的layer动起来。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85

// 1 UIImage *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 - Rotate if  (_animationSelectSegment.selectedSegmentIndex == 0) { CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@ "transform.rotation" ]; animation.duration=2.0; animation.repeatCount=5; animation.autoreverses=YES; // rotate from 0 to 360 animation.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 360 animation.fromValue=[NSNumber numberWithFloat:0.0]; animation.toValue=[NSNumber numberWithFloat:(2.0 * M_PI)]; animation.beginTime = AVCoreAnimationBeginTimeAtZero; [overlayLayer2 addAnimation:animation forKey:@ "rotation" ]; // 3 - Fade }  else  if (_animationSelectSegment.selectedSegmentIndex == 1) { CABasicAnimation *animation =[CABasicAnimation animationWithKeyPath:@ "opacity" ]; animation.duration=3.0; animation.repeatCount=5; animation.autoreverses=YES; // animate from fully visible to invisible animation.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 visible animation.fromValue=[NSNumber numberWithFloat:1.0]; animation.toValue=[NSNumber numberWithFloat:0.0]; animation.beginTime = AVCoreAnimationBeginTimeAtZero; [overlayLayer2 addAnimation:animation forKey:@ "animateOpacity" ];    // 4 - Twinkle }  else  if (_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 size animation.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 size animation.fromValue=[NSNumber numberWithFloat:0.5]; animation.toValue=[NSNumber numberWithFloat:1.0]; animation.beginTime = AVCoreAnimationBeginTimeAtZero; [overlayLayer2 addAnimation:animation forKey:@ "scale" ]; } // 5 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); [parentLayer addSublayer:videoLayer]; [parentLayer addSublayer:overlayLayer1]; [parentLayer addSublayer:overlayLayer2]; composition.animationTool = [AVVideoCompositionCoreAnimationTool                             videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer]; }

动画效果

第四节：如何给咱们的视频layer作出3D效果

3D效果

上面的全部效果都是在咱们的animatinLayer上作文章的，要知道videoLayer他本质上也是个CALayer，那么其实普通layer能作的事他也同样能作。代码以下。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// 1 - Layer setup 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); [parentLayer addSublayer:videoLayer]; // 2 - Set up the transform CATransform3D identityTransform = CATransform3DIdentity; // 3 - 具体设置能够看demo if  (_tiltSegment.selectedSegmentIndex == 0) {      identityTransform.m34 = 1.0 / 1000;  // greater the denominator lesser will be the transformation }  else  if  (_tiltSegment.selectedSegmentIndex == 1) {      identityTransform.m34 = 1.0 / -1000;  // lesser the denominator lesser will be the transformation } // 4 - 给咱们的video层作rotation videoLayer.transform = CATransform3DRotate(identityTransform, M_PI/6.0, 1.0f, 0.0f, 0.0f); // 5 - Composition composition.animationTool = [AVVideoCompositionCoreAnimationTool                               videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer];

上面的代码很容易懂，就是给咱们的video层作rotation，其实你能够改改demo里的数据，试试makescale，maketranslate之类的transform。

第五节：如何作出视频推动效果

具体内容看个人DEMO。

前4节DEMO地址：http://cdn2.raywenderlich.com/wp-content/uploads/2013/05/VideoEditing-Final2.zip

视频推动DEMO 地址：https://github.com/pingguo-zangqilong/VideoPushDemo

视频推动demo使用的时候直接点合成，不用选择视频。