CN110989878B - 小程序中的动画展示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请公开了小程序中的动画展示方法、装置、电子设备及存储介质，涉及小程序应用技术领域。具体实现方案为：在小程序的浏览器页面刷新时，获取待展示的源视频中的一帧原图像；基于预建立的源视频的原图像中的纹理坐标与小程序中的位置坐标的映射关系，在小程序中展示获取的原图像中的颜色信息和透明度信息，以实现动画展示。本申请的技术方案能够克服现有技术的不足，不用开发者与设计师去约定所有的关键帧信息，实现相对简单，能够有效地降低沟通成本和开发成本；而且本申请的技术方案，实现方式简单，不仅能够支持简单的动画展示，也能够支持复杂的动画展示。

Description

小程序中的动画展示方法、装置、电子设备及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及小程序应用技术，特别涉及一种小程序中的动画展示方法、装置、电子设备及存储介质。

背景技术

小程序是一种运行在移动终端的应用之上的一种轻量级的应用，不需要下载安装，扫码即可使用，使用方式非常方便。例如，现有的即时通讯应用中很多都嵌入有小程序，极大地方便了用户。

现有的小程序中，可以采用层叠样式表(cascading style sheets；css)来实现动画。该方案中，开发者需要使用css描述动画开始、结束以及中间样式的关键帧，从而基于预先定义的描述，采用css实现动画。

但是，现有的css实现动画的方案中需要开发与设计师约定所有的关键帧信息，沟通成本及开发成本较大，实现起来较为繁琐，因此，现有的css动画实现方案仅支持一些简单的动画效果，而对于复杂动画的支持能力有限。

发明内容

为了解决上述技术问题，本申请提供一种小程序中的动画展示方法、装置、电子设备及存储介质，以支持复杂动画的展示，同时能够降低开发成本。

一方面，本申请提供一种小程序中的动画展示方法，包括：

在小程序的浏览器页面刷新时，获取待展示的源视频中的一帧原图像；

基于预建立的所述源视频的原图像中的纹理坐标与所述小程序中的位置坐标的映射关系，在所述小程序中展示获取的所述原图像中的颜色信息和透明度信息，以实现动画展示。

进一步可选地，如上方面所述的方法中，基于预建立的所述源视频的原图像中的纹理坐标与所述小程序中的位置坐标的映射关系，在所述小程序中展示获取的所述原图像中的颜色信息和透明度信息，具体包括：

基于预建立的所述源视频的原图像中的纹理坐标与所述小程序的图形容器中的位置坐标的映射关系，在所述小程序的所述图形容器中展示获取的所述原图像中的颜色信息和透明度信息。

进一步可选地，如上方面所述的方法中，基于预建立的所述源视频的原图像中的纹理坐标与所述小程序的图形容器中的位置坐标的映射关系，在所述小程序的所述图形容器中展示获取的所述原图像中的颜色信息和透明度信息，包括：

根据预建立的所述源视频的原图像中的纹理坐标与所述小程序的图形容器中的位置坐标的映射关系，获取所述原图像中颜色通道信息区域中的各所述第一像素点和/或颜色通道信息区域中的所述第二像素点的纹理坐标映射在所述图形容器中对应的第三像素点的位置坐标；

根据各所述第一像素点的颜色信息和对应的所述第二像素点的透明度信息，获取对应的所述第三像素点的绘制信息；

根据各所述第三像素点的位置坐标和对应的所述绘制信息，在所述小程序的所述图形容器中绘制当前帧的图案。

进一步可选地，如上方面所述的方法中，基于预建立的所述源视频的原图像中的纹理坐标与所述小程序的图形容器中的位置坐标的映射关系，在所述小程序的所述图形容器中展示获取的所述原图像中的颜色信息和透明度信息之前，还包括：

在所述小程序中配置所述图形容器的顶点的位置坐标，以创建所述图形容器；

根据所述源视频中的所述原图像的纹理坐标和所述图形容器中的顶点的位置坐标，建立所述源视频的所述原图像中的纹理坐标与所述小程序的所述图形容器中的位置坐标的映射关系。

进一步可选地，如上方面所述的方法中，在所述小程序中配置所述图形容器的顶点的位置坐标，以创建所述图形容器，包括：

在预定义的顶点着色器中配置所述图形容器的顶点的位置坐标，以创建所述图形容器。

进一步可选地，如上方面所述的方法中，根据各所述第一像素点的颜色信息和对应的所述第二像素点的透明度信息，获取对应的所述第三像素点的绘制信息，包括：

向预配置的片元着色器输入各所述第一像素点的颜色信息和对应的所述第二像素点的透明度信息，以供所述片元着色器根据各所述第一像素点的颜色信息和对应的所述第二像素点的透明度信息，获取对应的所述第三像素点的绘制信息，并输出。

进一步可选地，如上方面所述的方法中，在实现动画展示的过程中，还包括：

接收外部用户发起的暂停、播放或跳转到指定帧的请求；

根据所述请求，在动画展示过程中执行暂停、播放或者跳转到指定帧的操作。

另一方面，本申请还提供了一种小程序中的动画展示装置，包括：

图像获取模块，用于在小程序的浏览器页面刷新时，获取待展示的源视频中的一帧原图像；

展示模块，用于基于预建立的所述源视频的原图像中的纹理坐标与所述小程序中的位置坐标的映射关系，在所述小程序中展示获取的所述原图像中的颜色信息和透明度信息，以实现动画展示。

再一方面，本申请提供一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如上任一项所述的方法。

另一方面，本申请提供一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行如上任一项所述的方法。

上述申请中的一个实施例具有如下优点或有益效果：通过在小程序的浏览器页面刷新时，获取待展示的源视频中的一帧原图像；基于预建立的源视频的原图像中的纹理坐标与小程序中的位置坐标的映射关系，在小程序中展示获取的原图像中的颜色信息和透明度信息，实现动画展示，能够克服现有技术的不足，不用开发者与设计师去约定所有的关键帧信息，实现相对简单，能够有效地降低沟通成本和开发成本；而且，本申请的技术方案，实现方式简单，不仅能够支持简单的动画展示，也能够支持复杂的动画展示。

其次，本申请中，可以采用MP4格式的源视频，资源包的体积较小，即使非常复杂的动画，也能够支持展示，实现非常简单。

再者，本申请中，对于每一帧原图像，在展示时基于原图像中颜色通道信息区域中的第一像素点的颜色信息和透明度信息区域中的第二像素点的透明度信息，根据预建立的所述源视频的原图像中的纹理坐标与所述小程序的图形容器中的位置坐标的映射关系，获取映射在图形容器中对应的第三像素点的位置坐标和绘制信息；最后根据各第三像素点的位置坐标和对应的绘制信息，在小程序的图形容器中绘制当前帧的图案，实现动画展示，可以保证源视频的每一帧原图像中的每个像素点的颜色信息和透明度信息都可以准确地展示在图形容器中，通过对连续多帧原图像的处理，便可以准确地实现动画展示。

而且，本申请中可以调用WebGL中的顶点着色器实现图形容器的定义，片元着色器实现颜色信息的传值，实现非常简单，且信息获取的方式非常准确，以保证动画的正确展示。

另外，本申请中，还能够在动画展示过程中，提供暂停、播放或者跳转到指定帧的操作，丰富动画展示过程中的各种功能。

上述可选方式所具有的其他效果将在下文中结合具体实施例加以说明。

附图说明

附图用于更好地理解本方案，不构成对本申请的限定。其中：

图1是根据本申请第一实施例的示意图；

图2是本申请中的MP4格式的视频中一帧图像的结构示意图。

图3是根据本申请第二实施例的示意图；

图4是用来实现本申请实施例的小程序中的动画展示方法的电子设备的框图。

具体实施方式

以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1为本申请提供的小程序中的动画展示方法实施例的流程图。如图1所示，本实施例的小程序中的动画展示方法，具体可以包括如下步骤：

S101、获取待展示的源视频；

例如，本实施例的源视频可以为MP4格式的视频；实际应用中，也可以为其他既包括透明度信息和颜色信息的其他格式的视频，在此不做限定。

本实施例的小程序中的动画展示方法的执行主体为小程序中的动画展示装置，该小程序中的动画展示装置具体应用在小程序中，用于在小程序中实现动画的展示。

例如，以源视频为MP4格式的视频为例，如图2所示，为本申请中的MP4格式的视频中一帧图像的结构示意图。如图2所示，本申请的MP4格式的视频中包括两部分信息。其中左半部分为透明度信息即alpha通道信息，右半部分为颜色信息即rgb(red、green、blue)通道信息。即左右两部分的大小是对称的，且左边的每一个像素点与右边的一个像素点对应。在播放时，左右两部分信息一起构成播放的画面。例如，若图2所示格式的视频中的帧图像的宽度可以为2w，高度为h，其中w宽度用于记录alpha通道信息，另外w宽度用户记录rgb通道信息。在等比例播放时，播放的动画的宽度为w，高度为h。当然，实际应用中也可以放大或者缩小比例播放。

S102、在小程序的浏览器页面刷新时，获取待展示的源视频中的一帧原图像；

S103、基于预建立的源视频的原图像中的纹理坐标与小程序中的位置坐标的映射关系，在小程序中展示获取的原图像中的颜色信息和透明度信息，以实现动画展示。

例如，本实施例中，可以将源视频对应的动画展示在小程序的整个界面，此时可以基于小程序的整个界面建立与源视频中的图像建立相应的映射关系。或者具体也可以在小程序中的某个图形容器中或者画图组件中来展示动画，此时基于展示动画的图形容器或者画图组件来与源视频中的图像建立相应的建立映射关系。

例如，本实施例的预建立的源视频的原图像中的纹理坐标与小程序中的位置坐标的映射关系，具体可以为基于预建立的源视频的原图像中的纹理坐标与小程序的图形容器中的位置坐标的映射关系。

本实施例中的纹理坐标用于表征图像所在的二维纹理平面中的坐标值，通常采用UV来标识，和用x、y坐标来声明二维迪卡尔坐标系一样。其中U代表水平方向，V代表垂直方向。

实际应用中，UV纹理坐标为UV纹理贴图坐标的简称，用于将二维纹理平面映射到三维物体表面的过程中，该过程称为二维纹理映射。一般二维纹理平面是有范围限制的，在这个平面区域内，每点都可用数学函数表达，从而可以离散的分离出每点的灰度值和颜色值，这个平面区域称为纹理空间，一般将纹理空间的平面区域定义在[0,1]*[0,1]。本实施例的纹理坐标也就是图像在纹理空间中的坐标。

本实施例中，可以在小程序的浏览器页面每次刷新时，按照本实施例的步骤S102和S103绘制源视频的一帧图像对应的图案，在浏览器页面连续刷新时，按照源视频中各帧图像由前到后的顺序，依次在小程序中展示源视频中的连续的各帧图像对应的图案，从而实现动画的展示。

具体地，由于源视频中的原图像的纹理坐标与小程序的用于展示动画的图形容器的位置坐标不是同一个坐标体系，本申请中，需要预先建立源视频的原图像中的纹理坐标与小程序的图形容器中的位置坐标的映射关系，这样，在图形容器中展示每一帧源图像时，可以基于预建立的源视频的原图像中的纹理坐标与小程序的图形容器中的位置坐标的映射关系，依次在小程序的图形容器中展示获取的原图像中的颜色信息和透明度信息。

本实施例的图形容器具体可以创建在小程序的Webview组件中，以实现动画中的每一个界面的图案的展示。具体地，本申请的该图形容器可以为Canvas画布。

需要说明的是，在如图2所示的原图像中左半部分的像素点标识的透明度信息和右半部分对应的像素点标识的rgb信息，基于预建立的源视频的原图像中的纹理坐标与小程序中的位置坐标的映射关系，可以将源视频的原图像中的具有对应关系的颜色信息对应像素点和透明度信息对应的像素点，对应到小程序中的一个像素点，实现位置的映射。然后需要在小程序中映射的该像素点上同时展示颜色信息对应像素点和透明度信息的像素点的信息。也就是说，在原图像中两个像素点的信息，映射至小程序后，需要在一个像素点上全部展示出来。而且，本实施例的MP4格式的源视频，资源包的体积非常小，从而实现动画展示的自由度非常高，不仅可以满足简单的动画展示，也能够支持复杂度较高的动画展示。且该方案实现时开发成本非常低，易于实现。进一步可选地，本实施例的步骤S103中的基于预建立的源视频的原图像中的纹理坐标与小程序中的位置坐标的映射关系，在小程序中展示获取的原图像中的颜色信息和透明度信息，具体可以包括如下步骤：

(1)对于原图像，获取原图像中颜色通道信息区域中的第一像素点的颜色信息和透明度信息区域中的第二像素点的透明度信息；第一像素点和第二像素点具有对应关系，在播放时，第一像素点的颜色信息和第二像素点的透明度信息用于合并后展示；

例如，对于图2所示的原图像，原图像中左右两部分大小对称，且左半部分的一个像素点会和右半部分的另一个像素点对应，其中左半部分的像素点用于标识一个透明度信息，右半部分的对应的另一个像素点用于标识一个颜色信息，左半部分的像素点和右半部分的像素点共同对应展示时的一个像素点。即在动画展示时，右半部分的像素点的颜色信息和左半部分的像素点的透明度信息用于合并后在一个像素点展示。

(2)根据预建立的源视频的原图像中的纹理坐标与小程序的图形容器中的位置坐标的映射关系，获取原图像中颜色通道信息区域中的各第一像素点和/或透明度信息区域中的对应的第二像素点的纹理坐标映射在图形容器中对应的第三像素点的位置坐标；

根据预先定义原图像到图形容器的位置坐标的映射关系，可以根据原图像中的第一像素点的纹理坐标和/或第二像素点的纹理坐标，映射出图形容器中的第三像素点的位置坐标。也就是说，原图像中的第一像素点的颜色信息和第二像素点的透明度信息合并后，要一起在图形容器中的第三像素点来展示。

本实施例中，由于原图像的结构的特殊性，原图像的左右两部分本身存在结构的对称性。该映射关系中原图像中的纹理坐标具体可以采用原图像的左半部分或者右半部分的纹理坐标来标识。而在原图像中本身存在左半部分的一个像素点的纹理坐标与右半部分的另一个像素点的纹理坐标的对应关系。这样，可以实现将原图像中的两个像素点和图形容器中的一个像素点对应起来。

(3)根据各第一像素点的颜色信息和对应的第二像素点的透明度信息，获取对应的第三像素点的绘制信息；

本实施例的第三像素点的绘制信息，同时包括第一像素点的颜色信息如rgb信息和第二像素点的透明度信息如alpha通道信息。

例如本实施例中，可以通过调用Web绘图协议(Web Graphics Library；WebGL)来实现。例如，可以通过调用WebGL中的片元着色器来实现。该片元着色器预配置有该功能，在使用时，向预配置的片元着色器输入各第一像素点的颜色信息和对应的第二像素点的透明度信息，此时该片元着色器可以根据各第一像素点的颜色信息和对应的第二像素点的透明度信息，获取对应的第三像素点的绘制信息，并输出。

例如，使用时，定义一个varying(可变量)用来给片元着色器传值，例如变量1取源视频的原图像左侧的alpha通道信息如(255,255,255,0.5)，变量2取源视频的原图像右侧的rgb信息如(135,124,123,1)，一起传入片元着色器。该片元着色器基于其功能，对每个像素点进行颜色处理，可以输出变量3的信息如(135,124,123,0.5)。该变量3的信息作为第三像素点的绘制信息，表示绘制时，第三像素点的rgb分别为135,124,123；透明度信息为0.5。该变量3的信息可以作为片元着色器唯一的内置变量，综合表示第三像素点的颜色信息，可以存储在gl_FragColor中。按照此方式，可以获取到图形容器中的每一个第三像素点的颜色信息，都存储在gl_FragColor中，以供后续绘制时调用。

(4)根据各第三像素点的位置坐标和对应的绘制信息，在小程序的图形容器中绘制当前帧的图案，以实现动画展示。

该步骤为绘制的过程，具体地，按照事先准备的图形容器中的所有像素点的绘制信息开始绘制。例如，可以通过创建一个工具函数用来向图形容器canvas中加载纹理，然后通过requestAnimationFrame来调用它，即在每一次webview刷新渲染的时候向canvas中绘制一帧处理后的video图像。于是，通过上述方式，不断地刷新，不断地绘制，video中的动画就被绘制在了canvas画布中，从而实现动画的展示。

进一步可选地，在该步骤S103基于预建立的源视频的原图像中的纹理坐标与小程序的图形容器中的位置坐标的映射关系，在小程序的图形容器中展示获取的原图像中的颜色信息和透明度信息之前，还可以包括如下步骤：

(A)在小程序中配置图形容器的顶点的位置坐标，以创建图形容器；

例如本实施例中，可以通过调用Web绘图协议(Web Graphics Library；WebGL)来实现。例如，可以通过调用WebGL中的顶点着色器，来实现图形容器的配置，具体配置时，在顶点着色器中配置图形容器的顶点的位置坐标，从而能够标识创建的图形容器的大小。

(B)根据源视频中的原图像的纹理坐标和图形容器中的顶点的位置坐标，建立源视频的原图像中的纹理坐标与小程序的图形容器中的位置坐标的映射关系。

本实施例的映射关系，基于两个不同结构中的坐标系来实现，用于将原图像中的每个像素点映射至图形容器中，以保证源视频中的每一帧原图像中的每个像素点的信息都能够被准确展示在小程序的动画中。

例如，实际应用中，图形容器可以为矩形，可以取矩形的左下角的位置坐标为(0,0)的位置，取矩形的左下角到右下角的方向为x轴正方向，左下角到左上角为y轴正向。

同理，对于图2所示的图像，可以取纹理坐标的起点(0,0)就是该图片的左下角，对于x轴正向和y轴正向可以与图形容器中的方向设置相同。在本实施例中，假设图2所示图像是200*100的尺寸，以纹理坐标的原点为例，图像左半部分的纹理坐标(0,0)和右半部分的纹理坐标(100,0)存在对应关系。且在映射关系中定义图像中的纹理坐标(0,0)或者(100,0)与图形容器中的位置坐标(0,0)存在映射关系。按照本实施例的上述技术方案，便可以将图像中的纹理坐标(0，0)点的信息(图像左侧部分)和纹理坐标(100，0)点的信息(图像右侧部分)，一起映射到画布即图形容器的位置坐标(0，0)上。按照上述方式，依次类推，可以将图像中的左半部分的每一个像素点的信息和右半部分对应的一个像素点的信息，一起映射在图形容器中的一个位置坐标上。按照此方式，对视频中的每一帧图形进行处理，便可以实现动画展示。

本申请在实现时，可以创建一个animation-video组件，将上述步骤S101-S103的功能集成在该animation-video组件中，实现时，由研发人员将该animation-video组件配置在小程序中，并提供可供展示的MP4格式的源视频，该animation-video组件便可以实现将源视频以动画形式展示在小程序的Canvas画布中，实现非常简单。

进一步可选地，在上述图1所示实施例的步骤S103基于预建立的源视频的原图像中的纹理坐标与小程序中的位置坐标的映射关系，在小程序中展示获取的原图像中的颜色信息和透明度信息，以实现动画展示的过程中，还可以包括：接收外部用户发起的暂停、播放或跳转到指定帧的请求；根据请求，在动画展示过程中执行暂停、播放或者跳转到指定帧的操作。

也就是说，本实施例的动画展示，支持暂停、播放或者跳转到指定帧的功能。

例如，在具体实现时，animation-video组件可以为开发者提供了三个api分别对动画进行操作，分别是播放，暂停，跳转到指定帧的接口，开发者将相应的接口与小程序的Canvas画布上设置的播放、暂停，跳转到指定帧的按钮相结合，便可以实现用户在小程序界面执行播放，暂停，跳转到指定帧的操作。

再例如，本申请中还可以提供动画开始播放bindstarted和结束播放bindended的钩子函数。它们会在动画开始播放和结束播放的时候自动执行。研发人员可以在这些钩子函数中进行各种操作以达到想要的特殊效果，并展示给用户。例如甲动画播放完成之后，紧接着播放乙动画便可以通过钩子函数来实现。

本申请的小程序中的动画展示方法，通过在小程序的浏览器页面刷新时，基于预建立的源视频的原图像中的纹理坐标与小程序中的位置坐标的映射关系，在小程序中展示获取的原图像中的颜色信息和透明度信息，以实现动画展示，能够克服现有技术的不足，不用开发者与设计师去约定所有的关键帧信息，实现相对简单，能够有效地降低沟通成本和开发成本。

进一步地，由于本实施例可以采用的源视频为MP4格式的视频，即使对于复杂的动画所占用资源都非常小，因此，本申请的技术方案，不仅能够支持简单的动画展示，也能够支持复杂的动画展示。

再者，本实施例中，对于每一帧原图像，在展示时基于原图像中颜色通道信息区域中的第一像素点的颜色信息和透明度信息区域中的第二像素点的透明度信息，根据预建立的所述源视频的原图像中的纹理坐标与所述小程序的图形容器中的位置坐标的映射关系，获取映射在图形容器中对应的第三像素点的位置坐标和绘制信息；最后根据各第三像素点的位置坐标和对应的绘制信息，在小程序的图形容器中绘制当前帧的图案，实现动画展示，可以保证源视频的每一帧原图像中的每个像素点的颜色信息和透明度信息都可以准确地展示在图形容器中，通过对连续多帧原图像的处理，便可以准确地实现动画展示。

而且，本实施例中可以调用WebGL中的顶点着色器实现图形容器的定义，片元着色器实现颜色信息的传值，实现非常简单，且信息获取的方式非常准确，以保证动画的正确展示。

另外，本实施例中，还能够在动画展示过程中，提供暂停、播放或者跳转到指定帧的操作，丰富动画展示过程中的各种功能。

图3为本申请的小程序中的动画展示装置实施例的结构图。如图3所示，本实施例的小程序中的动画展示装置300，包括：

图像获取模块301用于在小程序的浏览器页面刷新时，获取待展示的源视频中的一帧原图像；

展示模块302用于基于预建立的源视频的原图像中的纹理坐标与小程序中的位置坐标的映射关系，在小程序中展示获取的原图像中的颜色信息和透明度信息，以实现动画展示。

进一步可选地，其中展示模块302具体用于：具体用于基于预建立的源视频的原图像中的纹理坐标与小程序的图形容器中的位置坐标的映射关系，在小程序的所述图形容器中展示获取的原图像中的颜色信息和透明度信息。

进一步可选地，其中展示模块302具体用于：

根据预建立的源视频的原图像中的纹理坐标与小程序的图形容器中的位置坐标的映射关系，获取原图像中颜色通道信息区域中的各第一像素点和/或颜色通道信息区域中的第二像素点的纹理坐标映射在图形容器中对应的第三像素点的位置坐标；

根据各第一像素点的颜色信息和对应的第二像素点的透明度信息，获取对应的第三像素点的绘制信息；

根据各第三像素点的位置坐标和对应的绘制信息，在小程序的图形容器中绘制当前帧的图案，以实现动画展示。

进一步可选地，如图3所示，本实施例的小程序中的动画展示装置300中还包括：

配置模块303用于在小程序中配置图形容器的顶点的位置坐标，以创建图形容器；

建立模块304用于根据源视频中的原图像的纹理坐标和图形容器中的顶点的位置坐标，建立源视频的原图像中的纹理坐标与小程序的图形容器中的位置坐标的映射关系。

进一步可选地，其中配置模块303具体用于：

在预定义的顶点着色器中配置图形容器的顶点的位置坐标，以创建图形容器。

进一步可选地，其中展示模块302具体用于：

向预配置的片元着色器输入各第一像素点的颜色信息和对应的第二像素点的透明度信息，以供片元着色器根据各第一像素点的颜色信息和对应的第二像素点的透明度信息，获取对应的第三像素点的绘制信息，并输出。

进一步可选地，如图3所示，本实施例的小程序中的动画展示装置300中还包括：

接收模块305，用于在展示模块302实现动画展示的过程中，接收外部用户发起的暂停、播放或跳转到指定帧的请求；

执行模块306，用于根据接收模块305的请求，在动画展示过程中执行暂停、播放或者跳转到指定帧的操作。

本实施例的小程序中的动画展示装置300，通过采用上述模块实现小程序中的动画展示的实现原理，与上述相关方法实施例的实现原理以及技术效果相同，详细可以参考上述相关方法实施例的记载，在此不再赘述。

根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。

如图4所示，是根据本申请实施例的小程序中的动画展示方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。

如图4所示，该电子设备包括：一个或多个处理器401、存储器402，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示GUI的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图4中以一个处理器401为例。

存储器402即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的小程序中的动画展示方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的小程序中的动画展示方法。

存储器402作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的小程序中的动画展示方法对应的程序指令/模块(例如，附图4所示的相关模块)。处理器401通过运行存储在存储器402中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的小程序中的动画展示方法。

存储器402可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据小程序中的动画展示的电子设备的使用所创建的数据等。此外，存储器402可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器402可选包括相对于处理器401远程设置的存储器，这些远程存储器可以通过网络连接至小程序中的动画展示的电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

小程序中的动画展示的电子设备还可以包括：输入装置403和输出装置404。处理器401、存储器402、输入装置403和输出装置404可以通过总线或者其他方式连接，图4中以通过总线连接为例。

输入装置403可接收输入的数字或字符信息，以及产生与小程序中的动画展示的电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置404可以包括显示设备、辅助照明装置(例如，LED)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(LCD)、发光二极管(LED)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。

此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用ASIC(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

根据本申请实施例的技术方案，通过在小程序的浏览器页面每次刷新时，按照待展示的源视频中各帧原图像由前向后的顺序，依次获取一帧的原图像；基于预建立的源视频的原图像中的纹理坐标与小程序的图形容器中的位置坐标的映射关系，依次在小程序的所述图形容器中展示获取的原图像中的颜色信息和透明度信息，实现动画展示，能够克服现有技术的不足，不用开发者与设计师去约定所有的关键帧信息，实现相对简单，能够有效地降低沟通成本和开发成本；而且，本申请的技术方案，实现方式非常简单，不仅能够支持简单的动画展示，也能够支持复杂的动画展示。

其次，根据本申请实施例的技术方案，可以采用MP4格式的源视频，资源包的体积较小，即使非常复杂的动画，也能够支持展示，实现非常简单。

再者，根据本申请实施例的技术方案，对于每一帧原图像，在展示时基于原图像中颜色通道信息区域中的第一像素点的颜色信息和透明度信息区域中的第二像素点的透明度信息，根据预建立的所述源视频的原图像中的纹理坐标与所述小程序的图形容器中的位置坐标的映射关系，获取映射在图形容器中对应的第三像素点的位置坐标和绘制信息；最后根据各第三像素点的位置坐标和对应的绘制信息，在小程序的图形容器中绘制当前帧的图案，实现动画展示，可以保证源视频的每一帧原图像中的每个像素点的颜色信息和透明度信息都可以准确地展示在图形容器中，通过对连续多帧原图像的处理，便可以准确地实现动画展示。

而且，根据本申请实施例的技术方案，可以调用WebGL中的顶点着色器实现图形容器的定义，片元着色器实现颜色信息的传值，实现非常简单，且信息获取的方式非常准确，以保证动画的正确展示。

另外，根据本申请实施例的技术方案，还能够在动画展示过程中，提供暂停、播放或者跳转到指定帧的操作，丰富动画展示过程中的各种功能。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。

Claims (16)

1.一种小程序中的动画展示方法，其特征在于，包括：

在小程序的浏览器页面刷新时，获取待展示的源视频中的一帧原图像；

基于预建立的所述源视频的原图像中的纹理坐标与所述小程序中的位置坐标的映射关系，在所述小程序中展示获取的所述原图像中的颜色信息和透明度信息，以实现动画展示，其中所述映射关系用于将原图像中的像素点映射至小程序中。

2.根据权利要求1所述的方法，其特征在于，基于预建立的所述源视频的原图像中的纹理坐标与所述小程序中的位置坐标的映射关系，在所述小程序中展示获取的所述原图像中的颜色信息和透明度信息，具体包括：

基于预建立的所述源视频的原图像中的纹理坐标与所述小程序的图形容器中的位置坐标的映射关系，在所述小程序的所述图形容器中展示获取的所述原图像中的颜色信息和透明度信息。

3.根据权利要求2所述的方法，其特征在于，基于预建立的所述源视频的原图像中的纹理坐标与所述小程序的图形容器中的位置坐标的映射关系，在所述小程序的所述图形容器中展示获取的所述原图像中的颜色信息和透明度信息，包括：

根据预建立的所述源视频的原图像中的纹理坐标与所述小程序的图形容器中的位置坐标的映射关系，获取所述原图像中颜色通道信息区域中的各第一像素点和/或透明度信息区域中的对应的第二像素点的纹理坐标映射在所述图形容器中对应的第三像素点的位置坐标；

根据各所述第一像素点的颜色信息和对应的所述第二像素点的透明度信息，获取对应的所述第三像素点的绘制信息；

根据各所述第三像素点的位置坐标和对应的所述绘制信息，在所述小程序的所述图形容器中绘制当前帧的图案。

4.根据权利要求2所述的方法，其特征在于，基于预建立的所述源视频的原图像中的纹理坐标与所述小程序的图形容器中的位置坐标的映射关系，在所述小程序的所述图形容器中展示获取的所述原图像中的颜色信息和透明度信息之前，所述方法还包括：

在所述小程序中配置所述图形容器的顶点的位置坐标，以创建所述图形容器；

根据所述源视频中的所述原图像的纹理坐标和所述图形容器中的顶点的位置坐标，建立所述源视频的所述原图像中的纹理坐标与所述小程序的所述图形容器中的位置坐标的映射关系。

5.根据权利要求4所述的方法，其特征在于，在所述小程序中配置所述图形容器的顶点的位置坐标，以创建所述图形容器，包括：

在预定义的顶点着色器中配置所述图形容器的顶点的位置坐标，以创建所述图形容器。

6.根据权利要求3所述的方法，其特征在于，根据各所述第一像素点的颜色信息和对应的所述第二像素点的透明度信息，获取对应的所述第三像素点的绘制信息，包括：

向预配置的片元着色器输入各所述第一像素点的颜色信息和对应的所述第二像素点的透明度信息，以供所述片元着色器根据各所述第一像素点的颜色信息和对应的所述第二像素点的透明度信息，获取对应的所述第三像素点的绘制信息，并输出。

7.根据权利要求1-6任一所述的方法，其特征在于，在实现动画展示的过程中，所述方法还包括：

接收外部用户发起的暂停、播放或跳转到指定帧的请求；

根据所述请求，在动画展示过程中执行暂停、播放或者跳转到指定帧的操作。

8.一种小程序中的动画展示装置，其特征在于，包括：

图像获取模块，用于在小程序的浏览器页面刷新时，获取待展示的源视频中的一帧原图像；

展示模块，用于基于预建立的所述源视频的原图像中的纹理坐标与所述小程序中的位置坐标的映射关系，在所述小程序中展示获取的所述原图像中的颜色信息和透明度信息，以实现动画展示，其中所述映射关系用于将原图像中的像素点映射至小程序中。

9.根据权利要求8所述的装置，其特征在于，所述展示模块，具体用于基于预建立的所述源视频的原图像中的纹理坐标与所述小程序的图形容器中的位置坐标的映射关系，在所述小程序的所述图形容器中展示获取的所述原图像中的颜色信息和透明度信息。

10.根据权利要求9所述的装置，其特征在于，所述展示模块，具体用于：

根据预建立的所述源视频的原图像中的纹理坐标与所述小程序的图形容器中的位置坐标的映射关系，获取所述原图像中颜色通道信息区域中的各第一像素点和/或透明度信息区域中的对应的第二像素点的纹理坐标映射在所述图形容器中对应的第三像素点的位置坐标；

根据各所述第一像素点的颜色信息和对应的所述第二像素点的透明度信息，获取对应的所述第三像素点的绘制信息；

根据各所述第三像素点的位置坐标和对应的所述绘制信息，在所述小程序的所述图形容器中绘制当前帧的图案，以实现动画展示。

11.根据权利要求9所述的装置，其特征在于，所述装置还包括：

配置模块，用于在所述小程序中配置所述图形容器的顶点的位置坐标，以创建所述图形容器；

建立模块，用于根据所述源视频中的所述原图像的纹理坐标和所述图形容器中的顶点的位置坐标，建立所述源视频的所述原图像中的纹理坐标与所述小程序的所述图形容器中的位置坐标的映射关系。

12.根据权利要求11所述的装置，其特征在于，所述配置模块，具体用于：

在预定义的顶点着色器中配置所述图形容器的顶点的位置坐标，以创建所述图形容器。

13.根据权利要求10所述的装置，其特征在于，所述展示模块，具体用于：

向预配置的片元着色器输入各所述第一像素点的颜色信息和对应的所述第二像素点的透明度信息，以供所述片元着色器根据各所述第一像素点的颜色信息和对应的所述第二像素点的透明度信息，获取对应的所述第三像素点的绘制信息，并输出。

14.根据权利要求8-13任一所述的装置，其特征在于，所述装置还包括：

接收模块，用于在所述展示模块实现动画展示的过程中，接收外部用户发起的暂停、播放或跳转到指定帧的请求；

执行模块，用于根据所述请求，在动画展示过程中执行暂停、播放或者跳转到指定帧的操作。

15.一种电子设备，其特征在于，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-6中任一项所述的方法。

16.一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，所述计算机指令用于使所述计算机执行权利要求1-6中任一项所述的方法。

Images