小视频动效揭秘

现在最轻松的打发时间的方式莫过于短视频应用了，应用商店里各种短视频App给大家带来了许多新奇有趣的内容。

短时视频的兴起一方面在于移动互联网的飞速发展与宽带接入的大面积普及，另一方面也也得益于手机设备与应用的不断升级，将之前复杂的视频编辑变得十分简单。提到视频编辑，除了常见的裁剪与音频合成之外，不能不提到短视频中的各种特效了。

通过视频的特效，即便是简单的一些动作和表情，也能给人带来耳目一新的感觉，让短视频应用给了大家一个更丰富的展现自我的平台，这些视频特效是如何来实现呢？本文就和大家一起来说下其中的实现方式。

一句话来说，短视频的动效生成就是将一系列连续的图象进行加工再合成。那如果对这些动起来的图片进行加工而且流畅的显示呢？这就需要使用图像处理API了。目前除了常见的OpenGL还有如Vulkan, DirectX, Metal等供大家使用，其中OpenGL在各平台上通用性最好，网上的资料也比较丰富，不论是桌面平台还是移动平台如Android和iOS都自带了OpenGL的接口，本文就以OpenGL来讲讲特效的实现。

首先说效果的算法设计，大家都知道显示器上的三元色是RGB, 即红绿蓝，图片中每个像素点也是由这三元颜色来组成的，利用对图片每个像素的颜色修改，就可以做出一些简单的效果。

先以一幅静态的图片来举例:

Doloris

现在把图片中红色的分量去掉,放大10%,再移动一些距离

Doloris-strip-red

再把蓝色的分量去掉,放大10%,并移动一些距离

Doloris-strip-blue

再把绿色的分量去掉,放大10%,并移动一些距离

Doloris-strip-green

然后将这三副图片以33%的透明度和源图叠加到一起，形成一种移形幻影的效果

Doloris-blend

那如果通过程序来实现这种效果需要做哪些准备呢？

首先我们先给这幅图片定义坐标，为了方便处理我们将图片的中心点定义为(0,0), 图片的XY轴最大值为1,如下图所示:

坐标定义

然后开始处理上面提到的两个变换，一个是放大，一个是移动

如果定义图片上的任意象素坐标是(x,y)

对于放大操作，放大 s倍后的 (x',y')就等于 s(x,y) 也就是 (sx, sy)

对于移动，如果移动位移(∆x,∆y), 移动后的坐标(x',y') = (x+∆x, y+∆y)

反过来，如果我们要在画布的(x',y')点上显示放大s倍再移动(∆x,∆y)的点的话，就是原图的 ((x - ∆x)/s, (y-∆y)/s)这个点。

然后我们要将修改过的图片叠加到原图上，alpha叠加的公式是 src * (1 - alpha) + overlay * alpha。

做好这些计算准备工作后就可以开工了, 这里要就开始使用OpenGL来处理图像了, OpenGL的介绍网上的资料也比较多, 在此就不再赘述。我们在做好准备后开如用OpenGL来处理图处，上面那段效果两幅图的叠加实现伪码如下，更多层则继续叠加即可：

coordinate = ((x - ∆x)/s, (y-∆y)/s);
finalColor = colorAt(x, y) * (1 - alpha)+ colorAt(x', y') * alpha;

上面讲了单幅图的处理，对于视频我们可以做些更有意思的效果，比如我们可以把当前帧和上一帧的图片进行叠加，这样就可以作出一些更有意思的效果。

更复杂的特效还是需要熟悉摄像头YUV图片转换到RGB图像的操作，还要再继续深入研究OpenGL和人脸识等相关的知识，这需要一段时间的学习，也不可避免的踩到很多坑，那有没有不用看书只需几分钟，就能一马平川搭快速搭建建带有各种神奇特效 (比如这种)的小视频应用的速成的方法呢？

当然有！！快来接入腾讯云小视频SDK, 在你的应用中添加各种神奇的视频特效吧。

扫描以下二维码可以立即体验

从特效到编辑，各种功能应用仅有，还有源码提供！！(点此下载)