视频特效制作：如何给视频添加边框、水印、动画以及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使用的时候直接点合成，不用选择视频。

时间： 2024-10-11 13:28:22

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

萌颜短视频特效崛起、短视频火速发展

在这个网络发展如此迅速的时代,如今的80.90一代更是手机不离身.成为了低头族,相比来说6.70年代的熟人来说,现在更多的反而是"网友"而一个个短视频.不过短短十几秒的时间,能让人们之间的感情快速升温吗?小编不得不说的一点,人都是视觉动物,大街上看到帅哥美女大家也都会抬起头来看那么一两眼,而短视频的诞生,恰恰就满足了人们对帅哥美女的渴望感,眼花缭乱的特效.动感的音乐加上一些主播的编舞.谁又会不心动呢?每天在茶余饭后之际,都会打开自己的手机浏览一下喜欢的app软件,抖音就是我比较喜欢的一

Html5添加三联切换仿3D效果旋转木马jQuery插件教程

一.使用方法 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/gallery.js"></script> 二.Html结构 <div id="wrapper"> <div id=&quo

Android listview 制作表格样式+由下往上动画弹出效果实现

效果是这样的:点击按下弹出表格的按钮,会由下往上弹出右边的列表,按下返回按钮就由上往下退出界面. 布局文件: activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" &

抖音图片视频切换转场特效制作

FCPX教程:抖音图片视频切换转场特效制作插件——多张图片叠加动态切换转场,fcpx插件TransPic版包含100个可定制的过渡.此转换包具有许多不同类型的转换选项.用户可以选择仅使用标准,即时或混合照片进行转换.选择最多可以转换20张照片.使用fcpx图片叠加插件,用户可以对每个转换进行参数控制,如旋转,阴影和反射控制.用户获得不同的反射预设,或者可以选择添加自己的反射图像. 开“Final Cut Pro X”软件,在软件右下角[已安装的转场]处,会显示安装好的“fcpx转场插件Trans

陈松松：这四处添加视频特效，能快速得到客户重视

每个视频,都是你的金牌业务员 这是我写的第16篇视频营销原创文章 与其搜索十年,不如花一年的时间学习,去赚9年的高薪! 其实最大的悲哀不是视频平台删除你的视频,而是用户不看你的视频! 现在的视频太多了,人人都会做,而且你这个行业中,只要有一个人做的好 ,那么其他人立马跟风,此时如果你还用老一套的办法,那你肯定慢慢就会被淘汰,所以此时你必须想尽各种办法抓住客户的注意力的,让客户记住你,重视你! 同样的一个视频,如何做到更吸引客户的眼球,核心就一个字"动",在动的基础上,再加上2个字就是&

浅谈视频的制作

摘 要:在当今社会视频已经成为人们生活和工作日以追求的物质和精神需求.视频让人们的生活更富客观性和真实性.它记录了人生的美好,当回望过去时,它就是见证.它也是生活中的一抹调味剂,可以使人们愉悦身心,缓解工作.生活的压力.这些可以运用Adobe Premiere Pro CS3来制作完成,刻录成VCD.DVD等等.下面我就简单介绍一下如何运用Adobe Premiere Pro CS3. 关键词:视频:Adobe Premiere Pro CS3:制作: 视频技术最早是为了电视系统而发展,但是现在

Android 录制视频时，在视频右下角添加时间水印，达到监控录像的效果

录制视频时,在视频右下角添加时间水印,达到监控录像的效果,如下图: 实现步骤如下: 1.制作12张图片,分别是数字0-9,冒号和横折.首先用PS做成png24格式,最好是黑底白字(在代码中将黑色忽略). 2.将上面制作好的12张png图片转成256色的bmp位图,可以使用windows自带的画图程序打开,然后另存为. 3.使用Bmp2c将第2步得到的256色bmp图片,转成c数组. 4.将第3步得到的c数组放到头文件tchip_digital_data.h里. 5.修改frameworks/av

短视频APP开发：短视频特效SDK功能火爆来袭！

为什么短视频这么火呢?因为它符合了用户碎片化时间的需求,既娱乐了大众,又不会浪费用户太多时间.短视频APP开发以互联网技术为核心,在原有的基础上不断进行创新,进而拥有多种强大的拍摄功能,让用户可以快速拍摄出视频.短视频APP开发制作功能优势介绍:1.基础功能小视频拍摄录制,编辑上传,分享视频,评论打赏,海量背景音乐等基本功能:2.动态萌颜高效的人脸识别和动态渲染技术,二百余款冬天贴纸,支持个性化定制:3.抖音特效抖音特效SDK接入,有趣稳定的抖音特效,带来全新短视频应用体验:4.3D面具基于3D

Ezvid – 易用的视频/幻灯制作工具

http://www.appinn.com/ezvid/ Ezvid 是一款非常简单易用的视频/幻灯制作工具,你可以将视频.照片放进时间轴,简单的拖放后可上传 Youtube.@Appinn