[发明专利]小程序中的动画展示方法、装置、电子设备及存储介质

说明书

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

技术领域

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

背景技术

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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