CN112711729A - 基于页面动画的渲染方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请提供了基于页面动画的渲染方法、装置、电子设备及存储介质，涉及计算机应用技术领域，该方法通过读取元素队列中的动画元素；根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿；将动画元素及其位姿插入到渲染队列；在渲染过程中，依次从渲染队列读取每个动画元素及其位姿，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将画布图像展示在页面上。本技术方案有效节省多个动画元素进行渲染时的CPU的消耗，避免动画渲染时的页面卡顿。

Description

基于页面动画的渲染方法、装置、电子设备及存储介质

技术领域

本申请涉及计算机应用技术领域，具体而言，本申请涉及一种基于页面动画的渲染方法、装置、电子设备及存储介质。

背景技术

随着人们对网页页面视觉质量的提高，移动设备应用往往要求页面具有丰富的展示效果，动画是其中常用的一种方式。丰富的动画可以提高网页页面的视觉效果，例如，CSS3(Cascading Style Sheets，层叠样式表)动画在HTML 5页面上的应用，其炫酷的交互效果可以给产品带来更好的体验，更能吸引用户。

在相关技术中，渲染一个页面时一般采用浏览器提供的文档对象模型(DocumentObject Model，DOM)，DOM在使用过程中虽然渲染速度快，但是易占用大量内存，由于一个CSS3动画元素只能作用于一个DOM节点，如果同一网页中需要渲染出多个CSS3动画元素，则需要多个DOM节点同时进行动画绘制，增加了机器渲染的负担，造成大量的冗余计算，将会导致页面卡顿，严重影响用户体验。

发明内容

本申请的目的旨在至少解决上述技术缺陷之一，特别是动画渲染导致页面卡顿的问题。

第一方面，本申请实施例提供一种基于页面动画的渲染方法，包括以下步骤：

读取元素队列中的动画元素；其中，元素队列保存有待渲染的各帧动画元素；

根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿；

将动画元素及其位姿插入到渲染队列；

在渲染过程中，依次从渲染队列读取每个动画元素及其位姿，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将画布图像展示在页面上。

在一种可能的实现方式中，读取元素队列中的各帧动画元素的步骤之前，还包括：

从预设地址中加载用于动画渲染所需的图片，将图片进行预处理后作为进行动画渲染的动画元素；

将动画元素按照帧序插入到元素列队中。

在一种可能的实现方式中，根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿的步骤之前，还包括：

获取预先编写的动画变换代码，解析动画变换代码得到动画元素预设的变换参数；其中，变换参数包括动画缩放参数、旋转参数、移动轨迹、动画开始位置、动画结束位置、动画移动速度、移动方向和预设展示时长中的至少一者；

根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿的步骤包括：

根据动画元素预设的变换参数判断元素队列中的当前动画元素的实际展示时长是否达到其对应的预设展示时长；

若是，则将当前动画元素从元素队列中剔除；否则，根据预设展示时长对应的剩余时间计算当前动画元素进行渲染的位姿。

在一种可能的实现方式中，根据预设展示时长对应的剩余时间计算当前动画元素进行渲染的位姿的步骤包括：

根据预设展示时长对应的剩余时间计算当前动画元素进行绘制的变换矩阵；其中，变换矩阵包括缩放矩阵、位移矩阵以及旋转矩阵中的至少一者；

将变换矩阵相乘得到当前动画元素进行渲染的位姿。

在一种可能的实现方式中，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像的步骤，包括：

根据位姿确定各动画元素在画布上的渲染区域；

通过绘图接口将至少两个动画元素渲染到同一个画布对应的渲染区域上，得到画布图像。

在一种可能的实现方式中，通过绘图接口将至少两个动画元素渲染到同一个画布对应的渲染区域上，得到画布图像的步骤包括：

通过绘图接口将至少两个动画元素渲染到同一个预渲染画布对应的渲染区域上，得到预渲染动画；

将预渲染动画从预渲染画布渲染到目标画布上，得到画布图像；其中，预渲染画布为与目标画布相同大小的画布，预渲染画布为不可见画布，目标画布为可见画布。

在一种可能的实现方式中，通过绘图接口将至少两个动画元素渲染到同一个预渲染画布对应的渲染区域上，得到预渲染动画的步骤包括：

调用webGL接口，通过webGL接口在预渲染画布对应的渲染区域上渲染出动画元素对应的四个顶点；

在渲染出四个顶点后，在四个顶点的连线所包围的区域内渲染出动画元素的纹理图像；

将至少两个动画元素对应的纹理图像绘制到同一个预渲染画布上，得到预渲染动画。

第二方面，本申请实施例提供一种基于页面动画的渲染装置，包括：

动画元素读取模块，用于读取元素队列中的动画元素；其中，元素队列保存有待渲染的各帧动画元素；

动画位姿计算模块，用于根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿；

渲染队列插入模块，用于将动画元素及其位姿插入到渲染队列；

页面动画展示模块，用于在渲染过程中，依次从渲染队列读取每个动画元素及其位姿，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将画布图像展示在页面上。

第三方面，本申请实施例提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现第一方面的基于页面动画的渲染方法。

第四方面，本申请实施例提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现第一方面的基于页面动画的渲染方法。

上述实施例提供基于页面动画的渲染方法、装置、电子设备及存储介质，通过读取元素队列中的动画元素；根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿；将动画元素及其位姿插入到渲染队列；在渲染过程中，依次从渲染队列读取每个动画元素及其位姿，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将画布图像展示在页面上。本技术方案在渲染过程中，利用预设的变换参数计算出各个动画元素的位姿，将需要渲染到同一个页面上的至少两个动画元素渲染到同一个画布上得到画布图像后，再将画布图像渲染到页面上，从而有效节省多个动画元素进行渲染时的CPU的消耗，避免动画渲染时的页面卡顿。

本申请附加的方面和优点将在下面的描述中部分给出，这些将从下面的描述中变得明显，或通过本申请的实践了解到。

附图说明

本申请上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：

图1是本申请实施例提供的基于页面的动画渲染所适用的应用环境示意图；

图2是本申请实施例提供的一种基于页面动画的渲染方法的流程图；

图3是本申请实施例提供的生成画布图像方法的流程图；

图4是本申请实施例提供的生成预渲染图像方法的流程图；

图5是本申请实施例提供的基于页面动画的渲染方法的另一流程图；

图6是本申请实施例提供的一种基于页面动画的渲染装置的结构示意图；

图7是本申请实施例提供的适用于页面动画的渲染的电子设备的结构示意图。

具体实施方式

下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能解释为对本申请的限制。

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。

本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)，具有与本申请所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样被特定定义，否则不会用理想化或过于正式的含义来解释。

下面对本申请涉及的几个名词进行介绍和解释：

CSS：(Cascading Style Sheets，层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS3是CSS技术的升级版本。

Canvas(画布)：是用于在网页上绘制图形。HTML5的canvas使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

DOM(Document Object Model，文档对象模型)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

webGL(web Graphics Library，web图形库)：是一种3D绘图协议，webGL允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，webGL可以为HTML5 Canvas(画布)提供硬件3D加速渲染，web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

在对本申请实施例进行详细的解释说明之前，先对本申请实施例的应用场景予以介绍。本申请实施例提供的方法应用于基于页面动画的渲染场景中。

随着直播业务的发展，为了提高直播页面的展示效果，在直播页面会展示炫酷的动画增强吸引力。图1是本申请实施例提供的基于页面的动画渲染所适用的应用环境示意图，如图1所示，利用渲染引擎101获取相关的动画元素，将动画元素在页面上渲染出来得到页面动画，并下发至终端设备102进行展示。其中，终端设备102包括智能手机、笔记本电脑、台式电脑、平板等能够进行页面浏览的设备。

在相关技术中，基于页面的动画展示往往是基于CSS3进行动画展示。渲染一个网页时一般采用浏览器提供的DOM(Document Object Model，文档对象模型)技术，其中，DOM是HTML(HyperText Markup Language，超文本标记语言)和XML(eXtensible MarkupLanguage，可扩展标记语言)文档的编程接口，将web页面与脚本或程序语言连接起来；画布(Canvas)元素是HTML5的一部分，允许脚本语言动态渲染位图像。

DOM的使用过程中，虽然渲染速度快，但易占用大量内存。由于一个CSS动画元素只能作用于一个DOM节点，为了达到炫酷的动画效果，一个页面上往往有多个动画元素，如一个页面上展示出多个逐渐上升的气球，每个气球相当于一个动画元素，则页面上有N个动画元素同时在动，那么必然就是N个DOM节点同时进行动画绘制，增加了机器渲染的负担，还容易导致页面卡顿。

本申请提供的基于页面动画的渲染方法、装置、设备及计算机可读存储介质，旨在解决现有技术的如上技术问题。

下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。

下面将结合附图，对本申请的实施例进行详细描述。

图2是本申请实施例提供的一种基于页面动画的渲染方法的流程图，该基于页面动画的渲染方法可以应用于渲染引擎，如应用于徐冉冉器渲染引擎。

具体的，如图2所示，该基于页面动画的渲染方法可以包括以下步骤：

S210、读取元素队列中的各帧动画元素。

其中，元素队列保存有待渲染的各帧动画元素。

队列(queue)在计算机科学中，是一种先进先出的线性表。本实施例中的元素队列是指保存有动画元素的先进先出的线性表。元素队列允许在表的前端(front)进行删除操作，而在表的后端(rear)进行插入操作。进行插入操作的端称为队尾，进行删除操作的端称为队头。

在本实施例中，渲染引擎按照动画元素在元素队列中的顺序依次进行读取。先读取的动画元素，先进行渲染。

在一实施例中，步骤S210读取元素队列中的各帧动画元素之前，还包括：

S200A1、从预设地址中加载用于动画渲染所需的图片，将图片进行预处理后作为进行页面动画渲染的动画元素。

预设地址存储有动画所需要的图片。在本实施例中，渲染引擎可以从相应的服务器中获取该页面对应的源文件，如从预设地址中加载用于动画渲染所需的图片。进一步的，对这些图片预处理，如裁剪、缩放、去水印等，还可以是灰度化、图像增强、几何变换等处理，将预处理后的图片作为动画渲染的动画元素。

如下载“气球”图片，将气球图片进行裁剪去掉等处理无用信息后作为后续进行页面动画渲染所用的动画元素。

在本实施例中，通过实例化动画元素，解析动画元素中的CSS3代码形成机器可读的动画元素。

S200A2、将动画元素按照帧序插入到元素列队中。

渲染到页面上的动画元素可以分布在不同的层次上，有的动画元素分布在页面的上层，有的动画元素分布在页面的下层。

在本实施例，将动画元素按照在页面分布的层次以及帧序插入到元素队列中。例如，将分布页面下层的动画元素插入到元素队列的前面，将分布在页面上层的动画元素插入到元素队列的后面，页面上层的动画元素可以覆盖页面下层的动画元素。而位于帧序在前的动画元素插入到元素队列的前面，位于帧序在后的动画元素插入到元素队列的后面。

S220、根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿。

其中，变换参数用于表征动画元素在页面上进行移动、旋转、缩放等变换效果。其中，变换参数包括动画缩放参数、旋转参数、移动轨迹、动画开始位置、动画结束位置、动画移动速度、移动方向和预设展示时长中的至少一者。

在本实施例中，为动画元素的变换设置对应的变换参数，例如，

origin＝{x:100,y:100,width:100,height:100}

animat＝{x:200,y:200,width:50,height:50}

animatOption＝{time:5000,timeFn:linear}

其中，origin就是原始坐标位置，animat就是动画结束坐标位置。

上述变换参数所表示的动画效果为：动画元素从原始坐标，在5秒内，匀速，向右/下方各移动100个单位，并且面积缩小0.5倍。

animatOption就是动画的选项，其中包含持续时间(time)和动画速度类型(timeFn，一般是3种，匀速移动、由快到慢减速移动和由慢到快加速移动)。

当然，在其他实施例中，还可以根据实际情况设定不同的变换参数以实现不同的动画效果。

在本实施例中，动画元素随着时间的推移，在页面上的渲染出的位姿不同，位姿包括位置和姿态。位置是指某一时刻动画元素渲染出来的位置，姿态是指某一时刻动画元素渲染出来时经过缩放处理后的大小、旋转的角度等。

S230、将动画元素及其位姿插入到渲染队列。

在本实施例中，按照动画元素在元素队列中的顺序，依次计算各个动画元素在当前时间的位姿，将该动画元素及其计算得到的位姿插入到渲染队列中。

例如，元素队列依次排序的动画元素为“气球1”、“气球2”和“气球3”，计算得到气球1的位姿为：缩放A1、旋转角度为B1、位置坐标为(x1、y1)，气球2的位姿为：缩放A2、旋转角度为B2、位置坐标为(x2、y2)，气球3的位姿为：缩放A3、旋转角度为B3、位置坐标为(x3、y3)。

进一步的，将“气球1”、“气球2”和“气球3”这三个动画元素及其对应的位姿按序插入到渲染队列中。

S240、在渲染过程中，依次从渲染队列读取每个动画元素及其位姿，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将画布图像展示在页面上。

在渲染过程中，依次从队列中，读取每个动画元素及其位姿，例如，依次读取“气球1及其位姿”、“气球2及其位姿”和“气球3及其位姿”。根据每个动画元素对应的位姿确定动画元素在画布上的分布的位置，将至少两个动画元素绘制在同一个画布上，得到绘制在画布上的画布图像，将画布图像展示在页面上，得到页面动画。

本实施例提供的基于页面动画的渲染方法，通过读取元素队列中的动画元素；根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿；将动画元素及其位姿插入到渲染队列；在渲染过程中，依次从渲染队列读取每个动画元素及其位姿，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将画布图像展示在页面上。本技术方案在渲染过程中，利用预设的变换参数计算出各个动画元素的位姿，将需要渲染到同一个页面上的至少两个动画元素渲染到同一个画布上得到画布图像后，再将画布图像渲染到页面上，从而有效节省多个动画元素进行渲染时的CPU的消耗，避免动画渲染时的页面卡顿。

为了更清楚的阐述本申请的技术方案，下面针对基于页面动画的渲染方法的提供更多实施例。

在一实施例中，步骤S220中的根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿之前，还包括：

S220A1、获取预先编写的动画变换代码，解析动画变换代码得到动画元素预设的变换参数。

基于动画元素在页面渲染时的布局，即对动画元素在页面上的位置信息、高度信息等进行相应的布局，在本实施例中，通过编写动画变换代码对动画元素的动画效果的变换参数进行设置。

获取已经预先编写好的动画变换代码，对动画变换代码进行解析，得到对各个动画元素预设的变换参数。其中，变换参数包括动画缩放参数、旋转参数、移动轨迹、动画开始位置、动画结束位置、动画移动速度、移动方向和预设展示时长中的至少一者。

如：origin＝{x:100,y:100,width:100,height:100}

animat＝{x:200,y:200,width:50,height:50}

animatOption＝{time:5000,timeFn:linear}

其中，origin就是原始坐标位置，animat就是动画结束坐标位置。

上述变换参数所表示的动画效果为：动画元素从原始坐标，在5秒内，匀速，向右/下方各移动100个单位，并且面积缩小0.5倍。

animatOption就是动画的选项，其中包含持续时间(time)和动画速度类型(timeFn，一般是3种，匀速移动、由快到慢减速移动和由慢到快加速移动)。

进一步的，在一实施例中，步骤S220根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿，可以包括以下步骤：

S2201、根据动画元素预设的变换参数判断元素队列中的当前动画元素的实际展示时长是否达到其对应的预设展示时长；若是，则执行步骤S2202；否则，执行步骤S2203。

每个动画元素设置有对应的预设展示时长。如“气球”动画元素的变换参数所对应的动画效果为：气球从下往上飘起，展示5秒后消失。在本实施例中，预设展示时长是指动画元素在页面上展示的最大时间长度，实际展示时长是指当前动画元素在页面上已展示的时间长度。

S2202、将当前动画元素从元素队列中剔除。

若检测到当前动画元素的实际展示时长已经达到预设展示时长，则将当前动画元素从元素队列中剔除，如将“气球”动画元素从元素队列中剔除，读取下一个动画元素，如“八宝箱”等。

S2203、根据预设展示时长对应的剩余时间计算当前动画元素进行渲染的位姿。

若是检测到当前动画元素的实际展示时长未达到预设展示时长，则根据预设展示时长对应的剩余时间计算当前动画元素进行渲染的位姿。

例如，预设的动画元素的变换参数对应的变换效果为：页面动画以每秒钟60帧的速度播放，比如气球动画元素原始位置坐标是0，需要在2秒钟之内向右移动240个单位，那么每一帧就需要动2个单位。如果预设展示时长为2秒，当前实际展示时长为0.5秒，剩余时间为1.5秒，则在位置坐标60的位置描绘出该动画元素，如果对应的剩余时间为0.5秒，则计算得到当前的动画元素需要在180的位置上进行描绘。

上述实例以位移变换进行说明，动画元素的缩放变换和旋转变换的原理相同，将位移变换对应的位置与缩放变换和旋转变换对应的姿态结合起来，得到当前动画元素进行渲染的位姿。

在一实施例中，步骤S2203中的根据预设展示时长对应的剩余时间计算当前动画元素进行渲染的位姿，可以包括以下步骤：

(1)根据预设展示时长对应的剩余时间计算当前动画元素进行绘制的变换矩阵。

其中，变换矩阵包括缩放矩阵、位移矩阵以及旋转矩阵中的至少一者。

在本实施例中，根据变换参数确定当前动画元素的原始坐标位置和结束坐标位置，以及移动的速度(如匀速、减速或加速)后，通过预设展示时长对应的剩余时间，可以计算出当前动画元素在当前时间的变换矩阵，包括缩放矩阵、位移矩阵和渲染矩阵等。

例如，以位移变换进行说明，当前动画元素的原始坐标位置为(0,0)和结束坐标位置为(100,0)，预设展示时长(即移动时长)为5秒，匀速移动。若实际展示时长为2秒，则剩余展示时长为3秒，此时，计算出当前的位置为(40,0)。

同理，当前动画元素的原始偏转角度为0°，结束偏转角度为90°，预设展示时长为5秒，匀速偏转。若实际展示时长为2秒，则剩余展示时长为3秒，此时，计算出当前偏转角度32°。

通过预设展示时长对应的剩余时间，可以计算出当前动画元素在当前时间的变换矩阵，包括缩放矩阵、位移矩阵和旋转矩阵等。

(2)将变换矩阵相乘得到当前动画元素进行渲染的位姿。

将缩放矩阵、位移矩阵和旋转矩阵相乘得到的计算结果确定当前动画元素进行渲染的位姿。在本实施例中，若没有发生缩放、位移或旋转，则将对应的变换矩阵用“1”来表示。

在一实施例中，步骤S240中的根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，可以包括以下步骤：

S2401、根据位姿确定各动画元素在画布上的渲染区域。

根据动画元素的位姿确定动画元素中关键点的位置坐标，根据关键点的位置坐标确定动画元素在画布上的渲染区域。

在一实施例中，将动画元素的四个顶点连线所包围的区域确定为动画元素在画布上的渲染区域。在另一实施例中，将动画元素对应的最小外接矩形(minimum boundingrectangle,MBR)确定为该动画元素在画布上的渲染区域，其中，最小外接矩形是指以二维坐标表示的若干二维形状(如点、直线和多边形)的最大范围，即以给定的二维形状各顶点中的最大横坐标、最小横坐标、最大纵坐标、最小纵坐标定下边界的矩形。

S2402、通过绘图接口将至少两个动画元素渲染到同一个画布对应的渲染区域上，得到画布图像。

调用绘图接口，如webGL接口将至少两个动画元素按照变换参数确定的位姿，渲染到同一个canvas画布中对应的渲染区域上，得到画布图像。

在本实施例中，将基于CSS的页面动画用图形算法基于webGL进行绘制，将多个动画元素合并到一个canvas画布上呈现，实现同一canvas画布一次绘制多个动画元素，减少页面重绘率，其中，页面重绘率是指动画元素发生改变时，利用CPU(Central ProcessingUnit，中央处理器)/GPU(Graphics Processing Unit，图形处理器)将动画元素渲染到页面上每秒钟发生绘制的次数。

图3是本申请实施例提供的生成画布图像方法的流程图，如图3所示，在一实施例中，步骤S2402中的通过绘图接口将至少两个动画元素渲染到同一个画布对应的渲染区域上，得到画布图像，可以包括以下步骤：

S401、通过绘图接口将至少两个动画元素渲染到同一个预渲染画布对应的渲染区域上，得到预渲染动画。

在本实施例中，预先创建一个预渲染画布，该预渲染画布为不可见的画布。

根据动画元素的位姿确定动画元素中关键点的位置坐标，根据关键点的位置坐标确定动画元素在预渲染画布上的渲染区域。

在一实施例中，将动画元素的四个顶点连线所包围的区域确定为动画元素在预渲染画布上的渲染区域。在另一实施例中，将动画元素对应的最小外接矩形确定为该动画元素在预渲染画布上的渲染区域。

通过绘图接口将至少两个动画元素渲染到同一预渲染画布对应的区域，得到预渲染动画。

S402、将预渲染动画从预渲染画布渲染到目标画布上，得到画布图像。

其中，预渲染画布为与目标画布相同大小的画布，预渲染画布为不可见画布，目标画布为可见画布。

在本实施例中，预先创建一个目标画布，该目标画布为可见的画布，预渲染画布和目标画布的大小相同。

将需要渲染同一帧页面上的动画元素均绘制到预渲染画布上，得到位于预渲染画布上的预渲染动画后，将预渲染动画从预渲染画布渲染到目标画布上，得到画布图像。

在相关技术中，当需要在绘制一个动画元素时，需要创建对应的目标画布，若同一帧页面上有多个动画元素，则同一帧页面则创建对应的多个目标画布，容易导致页面卡顿。在实施例中，创建不可见的预渲染画布，将多个动画元素均绘制到同一个预渲染画布上，得到预渲染动画，将预渲染动画从预渲染画布渲染到目标画布上，仅需要一个目标画布即可实现多个动画元素的绘制和渲染，从而减少了页面中CPU的使用，有利于避免了页面卡顿。

图4是本申请实施例提供的生成预渲染图像方法的流程图，如图4所示，在一实施例中，步骤S402中的通过绘图接口将至少两个动画元素渲染到同一个预渲染画布对应的渲染区域上，得到预渲染动画，可以包括以下步骤：

S4021、调用webGL接口，通过webGL接口在预渲染画布对应的渲染区域上渲染出动画元素对应的四个顶点。

WebGL使得网页在支持HTML<canvas>标签的浏览器中，不需要使用任何插件，便可以使用基于OpenGL ES 2.0的API在canvas中进行3D渲染.WebGL程序由javascript的控制代码，和在计算机的图形处理单元(GPU,Graphics Processing Unit)中执行的特效代码(shader code，渲染代码)组成.WebGL元素可以和其他HTML元素混合,并且会和页面的其他部分或页面背景相合成。

通常而言，动画元素的形状一般为矩形，如长方形和正方形。确定动画元素位于对角线上的四个顶点后，将四个顶点依次连线所包围的区域可以确定为该动画元素所占用的区域。

在本实施例中，调用webGL接口，利用webGL接口首先在预渲染画布对应的渲染区域上渲染出该动画元素对应的四个顶点。

S4022、在渲染出四个顶点后，在四个顶点的连线所包围的区域内渲染出动画元素的纹理图像。

渲染队列中所有动画元素均包含对应的纹理图像。

进一步的，在预渲染画布上渲染出四个顶点后，获取该动画元素的纹理图像，在四个顶点的连线所包围的区域内渲染出该动画元素的纹理图像。

具体的，每一个动画元素的渲染流程可以包括以下步骤中的至少一者：

(1)通过webGL.vertexAttribPointer设置4个顶点原始坐标；

(2)通过webGL.uniformMatrix4fv设置4个顶点位移矩阵，以实现动画元素的位移变换；

(3)通过webGL.uniformMatrix4fv设置4个顶点旋转矩阵，以实现动画元素的旋转变换；

(4)通过webGL.uniformMatrix4fv设置4个顶点缩放矩阵，以实现动画元素的缩放变换；

(5)通过webGL.bindTexture绑定当前动画元素渲染的纹理到顶点范围中；

(6)通过webGL.drawArrays将4个顶点绘制到canvas画布中，纹理会自动附着在顶点范围内。

S4032、将至少两个动画元素对应的纹理图像绘制到同一个预渲染画布上，得到预渲染动画。

基于上述实例，将至少两个动画元素的顶点渲染到同一个预渲染画布上，在将至少两个动画元素对应的纹理图像渲染到顶点连线所包围的渲染区域内，得到基于预渲染画布上的预渲染动画。

可选的，每帧页面对应一个渲染队列，当渲染队列中所有元素都渲染完毕之后，即进入下一帧页面动画的渲染。

本实施例提供的基于页面动画的渲染方法，将多个动画元素绘制到同一个预渲染画布上得到预渲染动画，再将预渲染动画渲染到目标画布上进行渲染后在页面进行展示，减少了页面进行渲染时目标画布的数量，减少渲染引擎中动画处理时CPU的消耗，有利于避免页面卡顿。

为了更详细地说明本申请，下面结合图5示例性地阐述本申请的技术方案。图5是本申请实施例提供的基于页面动画的渲染方法的另一流程图。

如图5所示，该基于页面动画的渲染方法可以包括以下步骤：

S501、从预设地址中加载用于动画渲染所需的图片。

S502、将图片进行预处理后作为进行动画渲染的动画元素。

S503、将动画元素按照帧序插入到元素列队中。

S504、读取元素队列中的动画元素。

S505、判断判断当前动画元素是否已经展示结束；若是，则执行步骤S506；否则，执行步骤S507。

S506、将当前动画元素从元素队列中剔除。

S507、根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿。

S508、根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿。

S509、将动画元素及其位姿插入到渲染队列。

S510、调用webGL接口，通过webGL接口在预渲染画布渲染出动画元素对应的四个顶点。

S511、在四个顶点的连线所包围的区域内渲染出动画元素的纹理图像。

S512、将至少两个动画元素对应的纹理图像绘制到同一个预渲染画布上，得到预渲染动画。

S513、将预渲染动画从预渲染画布渲染到目标画布上，得到画布图像。

S514、将画布图像展示在页面上。

S515、当前页面动画渲染完成，开始下一帧页面动画渲染，并返回执行步骤S504。

以上示例仅用于辅助阐述本公开技术方案，其涉及的图示内容及具体流程不构成对本公开技术方案的使用场景的限定。

下面对基于页面动画的渲染装置的相关实施例进行详细阐述。

图6是本申请实施例提供的一种基于页面动画的渲染装置的结构示意图，该基于页面动画的渲染装置可以应用于渲染引擎，如浏览器渲染引擎。

具体的，如图6所示，该基于页面动画的渲染装置200可以包括：动画元素读取模块210、动画位姿计算模块220、渲染队列插入模块230和页面动画展示模块；

其中，动画元素读取模块210，用于读取元素队列中的动画元素；其中，元素队列保存有待渲染的各帧动画元素；

动画位姿计算模块220，用于根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿；

渲染队列插入模块230，用于将动画元素及其位姿插入到渲染队列；

页面动画展示模块240，用于在渲染过程中，依次从渲染队列读取每个动画元素及其位姿，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将画布图像展示在页面上。

本实施例提供的基于页面动画的渲染装置，在渲染过程中，利用预设的变换参数计算出各个动画元素的位姿，将需要渲染到同一个页面上的至少两个动画元素渲染到同一个画布上得到画布图像后，再将画布图像渲染到页面上，从而有效节省多个动画元素进行渲染时的CPU的消耗，避免动画渲染时的页面卡顿。

在一种可能的实现方式中，基于页面动画的渲染装置200还包括：动画元素获取模块包括动画元素加载单元和动画元素插入单元；

其中，动画元素加载单元，用于从预设地址中加载用于动画渲染所需的图片，将图片进行预处理后作为进行动画渲染的动画元素；动画元素插入单元，用于将动画元素按照帧序插入到元素列队中。

在一种可能的实现方式中，基于页面动画的渲染装置200还包括：变换参数解析模块，用于获取预先编写的动画变换代码，解析动画变换代码得到动画元素预设的变换参数；其中，变换参数包括动画缩放参数、旋转参数、移动轨迹、动画开始位置、动画结束位置、动画移动速度、移动方向和预设展示时长中的至少一者；

动画位姿计算模块220包括：时长判断单元、元素剔除单元和位姿计算单元；

其中，时长判断单元，用于根据动画元素预设的变换参数判断元素队列中的当前动画元素的实际展示时长是否达到其对应的预设展示时长；元素剔除单元，用于若当前动画元素的实际展示时长达到其对应的预设展示时长，则将当前动画元素从元素队列中剔除；位姿计算单元，用于若当前动画元素的实际展示时长未达到其对应的预设展示时长，根据预设展示时长对应的剩余时间计算当前动画元素进行渲染的位姿。

在一种可能的实现方式中，位姿计算单元包括：变换矩阵计算子单元和位姿得到子单元；

其中，变换矩阵计算子单元，用于根据预设展示时长对应的剩余时间计算当前动画元素进行绘制的变换矩阵；其中，变换矩阵包括缩放矩阵、位移矩阵以及旋转矩阵中的至少一者；位姿得到子单元，用于将变换矩阵相乘得到当前动画元素进行渲染的位姿。

在一种可能的实现方式中，页面动画展示模块240包括：渲染区域确定单元和画布图像得到单元；

其中，渲染区域确定单元，用于根据位姿确定各动画元素在画布上的渲染区域；画布图像得到单元，用于通过绘图接口将至少两个动画元素渲染到同一个画布对应的渲染区域上，得到画布图像。

在一种可能的实现方式中，画布图像得到单元包括：预渲染动画得到子单元和画布图像得到子单元；

其中，预渲染动画得到子单元，用于通过绘图接口将至少两个动画元素渲染到同一个预渲染画布对应的渲染区域上，得到预渲染动画；画布图像得到子单元，用于将预渲染动画从预渲染画布渲染到目标画布上，得到画布图像；其中，预渲染画布为与目标画布相同大小的画布，预渲染画布为不可见画布，目标画布为可见画布。

在一种可能的实现方式中，预渲染动画得到子单元包括：顶点渲染子单元、纹理图像渲染子单元和预渲染动画生成子单元；

其中，顶点渲染子单元，用于调用webGL接口，通过webGL接口在预渲染画布对应的渲染区域上渲染出动画元素对应的四个顶点；纹理图像渲染子单元，用于在渲染出四个顶点后，在四个顶点的连线所包围的区域内渲染出动画元素的纹理图像；预渲染动画生成子单元，用于将至少两个动画元素对应的纹理图像绘制到同一个预渲染画布上，得到预渲染动画。

本实施例的基于页面动画的渲染装置可执行本申请前述实施例所示的基于页面动画的渲染方法，其实现原理相类似，此处不再赘述。

本申请实施例中提供了一种电子设备，该电子设备包括：存储器和处理器；至少一个程序，存储于存储器中，用于被处理器执行时，与现有技术相比可实现：有效节省多个动画元素进行渲染时的CPU的消耗，避免动画渲染时的页面卡顿。

在一个可选实施例中提供了一种电子设备，如图7所示，图7所示的电子设备4000包括：处理器4001和存储器4003。其中，处理器4001和存储器4003相连，如通过总线4002相连。可选地，电子设备4000还可以包括收发器4004，收发器4004可以用于该电子设备与其他电子设备之间的数据交互，如数据的发送和/或数据的接收等。需要说明的是，实际应用中收发器4004不限于一个，该电子设备4000的结构并不构成对本申请实施例的限定。

处理器4001可以是CPU(Central Processing Unit，中央处理器)，通用处理器，DSP(Digital Signal Processor，数据信号处理器)，ASIC(Application SpecificIntegrated Circuit，专用集成电路)，FPGA(Field Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器4001也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。

总线4002可包括一通路，在上述组件之间传送信息。总线4002可以是PCI(Peripheral Component Interconnect，外设部件互连标准)总线或EISA(ExtendedIndustry Standard Architecture，扩展工业标准结构)总线等。总线4002可以分为地址总线、数据总线、控制总线等。为便于表示，图7中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器4003可以是ROM(Read Only Memory，只读存储器)或可存储静态信息和指令的其他类型的静态存储设备，RAM(Random Access Memory，随机存取存储器)或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM(Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器)、CD-ROM(Compact DiscRead Only Memory，只读光盘)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。

存储器4003用于存储执行本申请方案的应用程序代码，并由处理器4001来控制执行。处理器4001用于执行存储器4003中存储的应用程序代码，以实现前述方法实施例所示的内容。

其中，电子设备包括但不限于：移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图7示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，当其在计算机上运行时，使得计算机可以执行前述方法实施例中相应内容。与现有技术相比，本申请实施例实现了有效节省多个动画元素进行渲染时的CPU的消耗，避免动画渲染时的页面卡顿。

本申请实施例提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备，如电子设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行时实现如下情况：

读取元素队列中的各帧动画元素；其中，元素队列保存有待渲染的各帧动画元素；

根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿；

将动画元素及其位姿插入到渲染队列；

在渲染过程中，依次从渲染队列读取每个动画元素及其位姿，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将画布图像展示在页面上。

需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备执行上述实施例所示的方法。

可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，模块的名称在某种情况下并不构成对该模块本身的限定，例如，动画元素读取模块还可以被描述为“读取动画元素的模块”。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

以上仅是本申请的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种基于页面动画的渲染方法，其特征在于，包括以下步骤：

读取元素队列中的动画元素；其中，所述元素队列保存有待渲染的各帧动画元素；

根据所述动画元素预设的变换参数计算所述元素队列中的每个动画元素渲染的位姿；

将所述动画元素及其位姿插入到渲染队列；

在渲染过程中，依次从所述渲染队列读取每个动画元素及其位姿，根据所述位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将所述画布图像展示在页面上。

2.根据权利要求1所述的基于页面动画的渲染方法，其特征在于，所述读取元素队列中的各帧动画元素的步骤之前，还包括：

从预设地址中加载用于动画渲染所需的图片，将所述图片进行预处理后作为进行动画渲染的动画元素；

将所述动画元素按照帧序插入到元素列队中。

3.根据权利要求1所述的基于页面动画的渲染方法，其特征在于，所述根据所述动画元素预设的变换参数计算所述元素队列中的每个动画元素渲染的位姿的步骤之前，还包括：

获取预先编写的动画变换代码，解析所述动画变换代码得到所述动画元素预设的变换参数；其中，所述变换参数包括动画缩放参数、旋转参数、移动轨迹、动画开始位置、动画结束位置、动画移动速度、移动方向和预设展示时长中的至少一者；

所述根据所述动画元素预设的变换参数计算所述元素队列中的每个动画元素渲染的位姿的步骤包括：

根据所述动画元素预设的变换参数判断所述元素队列中的当前动画元素的实际展示时长是否达到其对应的预设展示时长；

若是，则将当前动画元素从所述元素队列中剔除；否则，根据所述预设展示时长对应的剩余时间计算所述当前动画元素进行渲染的位姿。

4.根据权利要求3所述的基于页面动画的渲染方法，其特征在于，所述根据所述预设展示时长对应的剩余时间计算所述当前动画元素进行渲染的位姿的步骤包括：

根据所述预设展示时长对应的剩余时间计算所述当前动画元素进行绘制的变换矩阵；其中，所述变换矩阵包括缩放矩阵、位移矩阵以及旋转矩阵中的至少一者；

将所述变换矩阵相乘得到所述当前动画元素进行渲染的位姿。

5.根据权利要求1所述的基于页面动画的渲染方法，其特征在于，所述根据所述位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像的步骤，包括：

根据所述位姿确定各所述动画元素在画布上的渲染区域；

通过绘图接口将至少两个所述动画元素渲染到同一个画布对应的渲染区域上，得到画布图像。

6.根据权利要求5所述的基于页面动画的渲染方法，其特征在于，所述通过绘图接口将至少两个所述动画元素渲染到同一个画布对应的渲染区域上，得到画布图像的步骤包括：

通过绘图接口将至少两个所述动画元素渲染到同一个预渲染画布对应的渲染区域上，得到预渲染动画；

将所述预渲染动画从所述预渲染画布渲染到目标画布上，得到画布图像；其中，所述预渲染画布为与目标画布相同大小的画布，所述预渲染画布为不可见画布，所述目标画布为可见画布。

7.根据权利要求5所述的基于页面动画的渲染方法，其特征在于，所述通过绘图接口将至少两个所述动画元素渲染到同一个预渲染画布对应的渲染区域上，得到预渲染动画的步骤包括：

调用webGL接口，通过所述webGL接口在所述预渲染画布对应的渲染区域上渲染出所述动画元素对应的四个顶点；

在渲染出四个顶点后，在所述四个顶点的连线所包围的区域内渲染出所述动画元素的纹理图像；

将至少两个动画元素对应的纹理图像绘制到同一个预渲染画布上，得到预渲染动画。

8.一种基于页面动画的渲染装置，其特征在于，包括：

动画元素读取模块，用于读取元素队列中的动画元素；其中，所述元素队列保存有待渲染的各帧动画元素；

动画位姿计算模块，用于根据所述动画元素预设的变换参数计算所述元素队列中的每个动画元素渲染的位姿；

渲染队列插入模块，用于将所述动画元素及其位姿插入到渲染队列；

页面动画展示模块，用于在渲染过程中，依次从所述渲染队列读取每个动画元素及其位姿，根据所述位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将所述画布图像展示在页面上。

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1-7任一项所述的基于页面动画的渲染方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现权利要求1-7任一项所述的基于页面动画的渲染方法。

Images