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

2014-12-08 09:47 编辑： suiling 分类：iOS开发 来源：叶孤城的blog

招聘信息：

• iOS手机软件开发工程师
• iOS工程师
• Web后端高级开发工程师
• iOS软件工程师
• java高级软件工程师
• 高级iOS开发工程师
• 高级PHP开发工程师
• iOS高级研发工程师
• iOS开发工程师
• 高级iOS手机应用软件开发工程师（培训讲师）
• 高级Cocos2d-x游戏开发工程师（培训讲师）

 

本文内容来自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