一种透明动画特效视频的处理方法、装置以及设备

技术领域

本发明涉及图像处理技术领域，尤其涉及一种透明动画特效视频的处理方法、装置以及设备。

背景技术

随着移动互联网的日益发展，直播行业的兴起，用户对于动画特效的要求越来越高，使用原生动画CoreAnimation(CoreAnimation是iOS系统上，图像渲染与动画基础框架)实现的动画特效，其绚丽程度不足以满足用户的需求；动画序列帧能较好的支持2D与3D动画满足用户需求，但直接使用序列帧动画又会带来很多问题，诸如：内存大小、素材体积大小等；动画视频也可以满足效果上需求，但标准视频播放器无法支持结合原生视图进行带透明通道的渲染，同时也存在素材体积过大问题。

发明内容

有鉴于此，本发明的目的在于提出一种透明动画特效视频的处理方法、装置以及设备，旨在解决现有的动效视频处理无法兼容高效果和低空间等问题。

为实现上述目的，本发明提供一种透明动画特效视频的处理方法，所述方法包括：

获取具有Alpha的多个PNG图片序列帧；

对每一所述PNG图片序列帧进行解析以及编码，得到透明视频文件；

将所述透明视频文件中每一帧的每一像素RGB值与Alpha值进行叠加计算，并通过OpenGLES进行渲染绘制，得到目标透明视频。

优选的，所述对每一所述PNG图片序列帧进行解析，包括：

对每一所述PNG图片序列帧中的各像素点对应的RGB与Alpha进行解析，得到像素点RGB值与像素点Alpha值；

将每一所述像素点RGB值以及所述像素点Alpha值转换为YUV420P，得到第一YUV420P数据和第二YUV420P数据，并将每一所述像素点Alpha值记录在第二YUV420P数据中的Y分量；

将所述PNG图片序列帧进行第一预设尺寸调整，得到第一调整图像帧，对所述第一调整图像帧进行上下部分的划分，并将所述第一YUV420P数据存储在上部分以及将所述第二YUV420P数据存储在下部分。

优选的，所述对每一所述PNG图片序列帧中的各像素点对应的RGB与Alpha进行解析，得到像素点RGB值与像素点Alpha值，包括：

将每一所述PNG图片序列帧转换为二进制数据，并利用CoreGraphics框架过滤所述二进制数据中的header信息，获取所述二进制数据中所有像素点的RGBA数据；

通过指针索引偏移的方式并根据预设读取方式读取每一像素点的所述RGBA数据，获得每一像素点对应的RGBA值。

优选的，所述对每一所述PNG图片序列帧进行编码，包括：

利用ffmpeg对所述第一调整图像帧中的YUV420P数据按照H264标准进行视频格式编码，生成所述透明视频文件。

优选的，所述将所述透明视频文件中每一帧的每一像素RGB值与Alpha值进行叠加计算，并通过OpenGLES进行渲染绘制，得到目标透明视频，包括：

利用ffmpeg读取所述透明视频文件中的每一图像帧，以第二预设尺寸取每一图像帧作为绘制视图的尺寸，以创建OpenGLES绘制视图，并通过OpenGLES对每一图像帧进行纹理的加载，得到具有纹理数据的图像帧；

对具有纹理数据的图像帧的每一像素RGB值与Alpha值进行叠加计算，并通过OpenGLES进行渲染绘制，得到目标透明视频。

优选的，所述对具有纹理数据的图像帧的每一像素RGB值与Alpha值进行叠加计算，并通过OpenGLES进行渲染绘制，得到目标透明视频，包括：

采用自定义顶点着色器与自定义片段着色器对具有纹理数据的图像帧进行处理，得到映射图像帧；

将所述映射图像帧进行上下部分的划分，并取上部分的纹理数据作为RGB值以及取下部分的纹理数据作为Alpha值，将RGB值与Alpha值进行像素的叠加计算，得到具有R、G、B、A的像素点，通过OpenGLES对具有R、G、B、A的像素点进行渲染绘制，得到所述目标透明视频。

为实现上述目的，本发明还提供一种透明动画特效视频的处理装置，所述装置包括：

获取单元，用于获取具有Alpha的多个PNG图片序列帧；

编码单元，用于对每一所述PNG图片序列帧进行解析以及编码，得到透明视频文件；

渲染单元，用于将所述透明视频文件中每一帧的每一像素RGB值与Alpha值进行叠加计算，并通过OpenGLES进行渲染绘制，得到目标透明视频。

为了实现上述目的，本发明还提出一种设备，包括处理器、存储器以及存储在所述存储器内的计算机程序，所述计算机程序被所述处理器执行以实现如上述实施例所述的一种透明动画特效视频的处理方法的步骤。

为了实现上述目的，本发明还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行以实现如上述实施例所述的一种透明动画特效视频的处理方法的步骤。

有益效果：

以上方案，通过对所获取的具有Alpha的多个PNG图片序列帧进行解析以及编码，得到透明视频文件，将透明视频文件中每一帧的每一像素RGB值与Alpha值进行叠加计算，并通过OpenGLES进行渲染绘制，得到目标透明视频，能够实现对序列帧视频格式进行了透明度效果的支持；并且，大大节省了内存存储空间。

以上方案，通过利用ffmpeg对序列帧进行视频格式编码以生成足够小的视频文件，并提供对应的解码方式对动画特效进行渲染播放，实现透明视频的编码与渲染，以支持丰富的动画特效。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明一实施例提供的一种透明动画特效视频的处理方法的流程示意图。

图2为本发明一实施例提供的PNG图片序列帧示意图。

图3为本发明一实施例提供的对PNG图片序列帧进行解析及编码的流程示意图。

图4为本发明一实施例提供的经过编码后，截取其中一帧的展示效果示意图。

图5为本发明一实施例提供的对透明视频文件进行渲染的流程示意图。

图6为本发明一实施例提供的通过渲染得到的具有透明度的视频帧展示效果示意图。

图7为本发明一实施例提供的一种透明动画特效视频的处理装置的结构示意图。

发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

为使本发明实施方式的目的、技术方案和优点更加清楚，下面将结合本发明实施方式中的附图，对本发明实施方式中的技术方案进行清楚、完整地描述，显然，所描述的实施方式是本发明一部分实施方式，而不是全部的实施方式。基于本发明中的实施方式，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施方式，都属于本发明保护的范围。因此，以下对在附图中提供的本发明的实施方式的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施方式。基于本发明中的实施方式，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施方式，都属于本发明保护的范围。

在本发明的描述中，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。

以下结合实施例详细阐述本发明的内容。

参照图1所示为本发明一实施例提供的一种透明动画特效视频的处理方法的流程示意图。

本实施例中，该方法包括：

S11，获取具有Alpha的多个PNG图片序列帧。

S12，对每一所述PNG图片序列帧进行解析以及编码，得到透明视频文件。

进一步的，在步骤S12中，所述对每一所述PNG图片序列帧进行解析，包括：

S12-1，对每一所述PNG图片序列帧中的各像素点对应的RGB与Alpha进行解析，得到像素点RGB值与像素点Alpha值；

S12-2，将每一所述像素点RGB值以及所述像素点Alpha值转换为YUV420P，得到第一YUV420P数据和第二YUV420P数据，并将每一所述像素点Alpha值记录在第二YUV420P数据中的Y分量；

S12-3，将所述PNG图片序列帧进行第一预设尺寸调整，得到第一调整图像帧，对所述第一调整图像帧进行上下部分的划分，并将所述第一YUV420P数据存储在上部分以及将所述第二YUV420P数据存储在下部分。

如图2和图3所示。在本实施例中，通过获取由专业的动画设计师设计的带有Alpha(阿尔法透明通道)的PNG图片序列帧，解析每一PNG图片序列帧中对应每一个像素点的RGB值与Alpha值，并将每个像素点的RGB值转换为YUV420P，对于每个像素点的Alhpa值的处理，默认生成一份所有值为0的YUV420P数据，之后将每个像素点的Aplha的数值记录在YUV420P中的Y值。进而，以原始每一PNG图片序列帧的宽度作为新编码帧的宽度，以原始每一PNG图片序列帧的高度的两倍作为新编码帧的高度，得到调整后的图像帧；每一调整后的图像帧数据划分为上下两部分进行数据存储，包括：上半部分主要存储经上述将每一像素点RGB值转换为YUV420P后的数据，下半部分主要存储将每一像素点Alpha值转换为YUV420P后的数据。调整图像尺寸的目的主要是用以将RGB与Alpha划分进行存储，通过扩大一倍高度，以上半部分用来存储对应的RGB数据，下半部分用来存储对应的Alpha数据，为了保障整个YUV数据是内存对齐的，采用这种方式将Alpha记录在Y分量。

其中，在步骤S12-1中，所述对每一所述PNG图片序列帧中的各像素点对应的RGB与Alpha进行解析，得到像素点RGB值与像素点Alpha值，包括：

S12-1-1，将每一所述PNG图片序列帧转换为二进制数据，并利用CoreGraphics框架过滤所述二进制数据中的header信息，获取所述二进制数据中所有像素点的RGBA数据；

S12-1-2，通过指针索引偏移的方式并根据预设读取方式读取每一像素点的所述RGBA数据，获得每一像素点对应的RGBA值。

在本实施例中，对于解析每一PNG图片序列帧中对应每一个像素点的RGB值与Alpha值的过程具体包括：把序列帧转换为二进制数据，根据PNG标准规范，一个像素点由4个属性RGBA组成，且R、G、B、A数据是连续存放的，以及每个像素点的数据也是连续存放的，通过利用CoreGraphics框架，过滤掉一些header信息，只读取二进制数据中所有像素点的RGBA数据；根据一个属性占8位存放，一组RGBA数据共需要32位的空间，把RGBA数据读取到内存并用指针对该RGBA数据进行引用，通过指针索引偏移的方式，从左到右、从上到下对每个像素点的数据进行遍历读取，来获取每个像素点对应的RGBA值(RGB值与Alpha值)。

然而，对于将每个像素点的RGB值转换为YUV420P，以及按照划分后的上下部分进行数据存储的过程具体为：对于上半部分的数据，经过上述得到RGB值之后，结合YUV与RGB的转换公式：

Y＝((66*R+129*G+25*B+128)>>8)+16；

U＝((-38*R-74*G+112*B+128)>>8)+128；

V＝((112*R-94*G-18*B+128)>>8)+128；

以此得到YUV数据，采用YUV420的采样方式进行采样，以Y、U和V三个分量的平面数组形式进行存储；而下半部分Alpha值则记录在Y分量，U和V分量分别为0。主要代码实现如下：

进一步的，所述对每一所述PNG图片序列帧进行编码，包括：

利用ffmpeg对所述第一调整图像帧中的YUV420P数据按照H264标准进行视频格式编码，生成所述透明视频文件。

在本实施例中，通过利用ffmpeg对处理后的每一图像帧的YUV420P数据按照H264标准进行编码，生成一份新的视频格式文件。具体的：

1)确保已安装了ffmpeg，并进行相应版本的编译，得到ffmpeg动态库，并在工程进行引入；

2)调用ffmpeg函数avcodec_find_encoder得到_codec，进行H264编码器的查找与初始化；

3)_codec作为入参，调用ffmpeg函数avcodec_alloc_context3得到_codecContext，分配并初始化编码器上下文；

4)对编码器、上下文，并进行相关参数配置，包含：输出编码方式、视频像素格式、固定位元率系数、帧率等；

5)调用ffmpeg函数avcodec_open2，打开编码器，使得编码器上下文准备好进行编码操作；

6)调用ffmpeg函数av_frame_alloc得到_frame，一个AVFrame结构体；AVFrame结构体用于存储视频帧的原始数据，需要在编码前为每一帧分配一个AVFrame结构体；

7)调用ffmmpeg函数av_packet_alloc得到_packet，一个AVPacket结构体，AVPacket结构体用于存储编码后的数据包；

8)从上述RGBA转换为YUV得到的数据，将每一帧的数据中Y、U、V三个分量的数据分别以平面数组的形式记录到_frame.data这个数组中；

9)上述每一帧的YUV数据填充到AVFrame中后(_frame)。以_frame作为入参，调用ffmpeg函数avcodec_send_frame，通过此函数将AVFrame的数据发送给编码器；

10)调用ffmpeg函数avcodec_receive_packet得到packet，从编码器接收编码后的数据包，这些数据包包含压缩后的视频帧；

11)将得到的数据包packet，调用NSData中+(instancetype)dataWithBytes:(nullable const void*)bytes length(NSUInteger)length；方法，来转化为二进制数据，并将所有的packet对应的二进制数据进行拼接；

12)将二进制数据进行导出，存储到本地；

13)编码完毕，释放相关资源：

释放AVFrame结构体：av_frame_unref()

释放AVPacket结构体：av_packet_unref()

关闭编码器：avcodec_close()

S13，将所述透明视频文件中每一帧的每一像素RGB值与Alpha值进行叠加计算，并通过OpenGLES进行渲染绘制，得到目标透明视频。

进一步的，在步骤S13中，所述将所述透明视频文件中每一帧的每一像素RGB值与Alpha值进行叠加计算，并通过OpenGLES进行渲染绘制，得到目标透明视频，包括：

S13-1，利用ffmpeg读取所述透明视频文件中的每一图像帧，以第二预设尺寸取每一图像帧作为绘制视图的尺寸，以创建OpenGLES绘制视图，并通过OpenGLES对每一图像帧进行纹理的加载，得到具有纹理数据的图像帧；

S13-2，对具有纹理数据的图像帧的每一像素RGB值与Alpha值进行叠加计算，并通过OpenGLES进行渲染绘制，得到目标透明视频。

进一步的，在步骤S13-2中，所述对具有纹理数据的图像帧的每一像素RGB值与Alpha值进行叠加计算，并通过OpenGLES进行渲染绘制，得到目标透明视频，包括：

S13-2-1，采用自定义顶点着色器与自定义片段着色器对具有纹理数据的图像帧进行处理，得到映射图像帧；

S13-2-2，将所述映射图像帧进行上下部分的划分，并取上部分的纹理数据作为RGB值以及取下部分的纹理数据作为Alpha值，将RGB值与Alpha值进行像素的叠加计算，得到具有R、G、B、A的像素点，通过OpenGLES对具有R、G、B、A的像素点进行渲染绘制，得到所述目标透明视频。

如图4所示为经过编码后，截取透明视频文件中其中一帧的展示效果图。在本实施例中，如图5所示，通过利用ffmpeg对导入的透明视频文件中的每一图像帧进行读取，以首帧的宽度作为绘制视图的宽、以首帧的高度的一半作为绘制视图的高，建立OpenGLES绘制视图，通过OpenGLES对每一图像帧进行纹理的加载，得到具有纹理数据的图像帧。对具有纹理数据的图像帧，通过采用自定义顶点着色器与自定义片段着色器进行处理，得到映射图像帧，将该映射图像帧进行上下部分的划分，取上部分的纹理数据作为R、G、B以及取下部分的纹理数据作为Alpha，将两者进行像素的叠加计算，得到具有R、G、B、A的像素点，利用OpenGLES对其进行渲染绘制，得到目标透明视频。以上通过图像处理器的硬件加速，提高了运行效率，解决了传统动画特效视频在渲染过程中无法达到透明的效果，以满足丰富的特效视觉效果。如图6所示为实际渲染效果图(具有透明度的视频)。其中，自定义着色器就是用户定义的程序，设计用于在图形处理器的某个阶段上运行；自定义着色器为渲染管线的某些可编程阶段提供代码。

自定义顶点着色器：将内存当中的顶点数组数据(顶点坐标、上半部分纹理坐标1、下半部分纹理坐标2)，存入顶点缓冲区传递给自定义顶点着色器，在自定义顶点着色器当中将顶点坐标赋值给gl_Position，以此来设置顶点的连接方式，以便后续进行图元装配、栅格化；并且在自定义顶点着色器当中需要将上半部分纹理坐标1、下半部分纹理坐标2作为输出传递到自定义片段着色器中。

自定义片段着色器：接收来自顶点着色器给的纹理坐标(上半部分纹理坐标1、下半部分纹理坐标2)，对每个像素点进行颜色计算填充，把结果传递到帧缓冲区，从帧缓冲区将结果显示到屏幕。在下面自定义片段着色器的代码中，texcoord1上半部分纹理坐标1，texcoord2为下半部分纹理坐标2，结合YUV转RGB公式，将texcoord1对应的像素点的YUV转为RGB，将texcoord2对应的像素点的YUV中Y分量的数据转为Alpha，对于同一个像素点两者进行叠加组合，得到具有RGBA的像素点，并输出给FragColor。

具体的：

1)采用CAEAGLLayer来创建OpenGLES绘制视图；

2)利用ffmpeg对透明视频文件进行解码，利用CADisplayLink，按帧率为15对图像帧数据进行读取，并传递到绘制视图；

3)创建并配置OpenGLES上下文，通过接口：[[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES3]，并调用glViewport()，并对视口进行设置(绘制视图的大小)；

4)通过glGenFramebuffers()与glBindFramebuffer()创建帧缓存对象FBO(Framebuffer Object)，在将图像帧数据加载到纹理之前，通常会使用FBO来创建一个离屏渲染的目标，以便更高效地进行纹理加载和处理；

5)定义一个坐标结构体，主要用来存放：顶点坐标、上半部分的纹理坐标(RGB)、下半部分的纹理坐标(Alpha):

6)利用glCompileShader()与glAttachShader()，编译并加载自定义顶点着色器与自定义片段着色器：

顶点着色器代码：

片段着色器代码：

7)利用glBindTexture()与glTexImage2D()对每一帧数据的Y、U、V这三个分量的进行加载到纹理；

8)利用glDrawArrays()等接口，循环绘制新图像帧数据，直至视频播放完毕。

基于上述，本实施例通过对带有Alpha(阿尔法透明通道)的PNG图片序列帧进行以上方式编码成视频文件；播放时，通过读取视频文件中每一帧的每像素RGB值与Alpha值进行叠加计算，并通过OpenGLES进行渲染绘制，实现透明视频效果，并且，内存、存储空间能够节省数十倍。

参照图7所示为本发明一实施例提供的一种透明动画特效视频的处理装置的结构示意图。

在本实施例中，该装置70包括：

获取单元71，用于获取具有Alpha的多个PNG图片序列帧；

编码单元72，用于对每一所述PNG图片序列帧进行解析以及编码，得到透明视频文件；

渲染单元73，用于将所述透明视频文件中每一帧的每一像素RGB值与Alpha值进行叠加计算，并通过OpenGLES进行渲染绘制，得到目标透明视频。

该装置70的各个单元模块可分别执行上述方法实施例中对应步骤，故在此不对各单元模块进行赘述，详细请参见以上对应步骤的说明。

本发明实施例还提供一种设备，该设备包括如上所述的透明动画特效视频的处理装置，其中，透明动画特效视频的处理装置可以采用图7实施例的结构，其对应地，可以执行图1所示方法实施例的技术方案，其实现原理和技术效果类似，详细可以参见上述实施例中的相关记载，此处不再赘述。

所述设备包括：手机、数码相机或平板电脑等具有拍照功能的设备，或者具有图像处理功能的设备，或者具有图像显示功能的设备。所述设备可包括存储器、处理器、输入单元、显示单元、电源等部件。

其中，存储器可用于存储软件程序以及模块，处理器通过运行存储在存储器的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(例如图像播放功能等)等；存储数据区可存储根据设备的使用所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器还可以包括存储器控制器，以提供处理器和输入单元对存储器的访问。

输入单元可用于接收输入的数字或字符或图像信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，本实施例的输入单元除了包括摄像头，还可包括触敏表面(例如触摸显示屏)以及其他输入设备。

显示单元可用于显示由用户输入的信息或提供给用户的信息以及设备的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元可包括显示面板，可选的，可以采用LCD(Liquid Crystal Display，液晶显示器)、OLED(Organic Light-Emitting Diode,有机发光二极管)等形式来配置显示面板。进一步的，触敏表面可覆盖显示面板，当触敏表面检测到在其上或附近的触摸操作后，传送给处理器以确定触摸事件的类型，随后处理器根据触摸事件的类型在显示面板上提供相应的视觉输出。

本发明实施例还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中的存储器中所包含的计算机可读存储介质；也可以是单独存在，未装配入设备中的计算机可读存储介质。该计算机可读存储介质中存储有至少一条指令，所述指令由处理器加载并执行以实现图1所示的透明动画特效视频的处理方法。所述计算机可读存储介质可以是只读存储器，磁盘或光盘等。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置实施例、设备实施例及存储介质实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

并且，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

上述说明示出并描述了本发明的优选实施例，应当理解本发明并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、修改和环境，并能够在本文发明构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围，则都应在本发明所附权利要求的保护范围内。