本申请提供了基于页面动画的渲染方法、装置、电子设备及存储介质，涉及计算机应用技术领域，该方法通过读取元素队列中的动画元素；根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿；将动画元素及其位姿插入到渲染队列；在渲染过程中，依次从渲染队列读取每个动画元素及其位姿，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将画布图像展示在页面上。本技术方案有效节省多个动画元素进行渲染时的CPU的消耗，避免动画渲染时的页面卡顿。避免动画渲染时的页面卡顿。避免动画渲染时的页面卡顿。
【技术实现步骤摘要】
基于页面动画的渲染方法、装置、电子设备及存储介质
[0001]本申请涉及计算机应用
，具体而言，本申请涉及一种基于页面动画的渲染方法、装置、电子设备及存储介质。
技术介绍
[0002]随着人们对网页页面视觉质量的提高，移动设备应用往往要求页面具有丰富的展示效果，动画是其中常用的一种方式。丰富的动画可以提高网页页面的视觉效果，例如，CSS3(Cascading Style Sheets，层叠样式表)动画在HTML 5页面上的应用，其炫酷的交互效果可以给产品带来更好的体验，更能吸引用户。
[0003]在相关技术中，渲染一个页面时一般采用浏览器提供的文档对象模型(Document Object Model，DOM)，DOM在使用过程中虽然渲染速度快，但是易占用大量内存，由于一个CSS3动画元素只能作用于一个DOM节点，如果同一网页中需要渲染出多个CSS3动画元素，则需要多个DOM节点同时进行动画绘制，增加了机器渲染的负担，造成大量的冗余计算，将会导致页面卡顿，严重影响用户体验。
技术实现思路
[0004]本申请的目的旨在至少解决上述技术缺陷之一，特别是动画渲染导致页面卡顿的问题。
[0005]第一方面，本申请实施例提供一种基于页面动画的渲染方法，包括以下步骤：
[0006]读取元素队列中的动画元素；其中，元素队列保存有待渲染的各帧动画元素；
[0007]根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿；
[0008]将动画元素及其位姿插入到渲染队列；
[0009]在渲染过程中，依次从渲染队列读取每个动画元素及其位姿，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将画布图像展示在页面上。
[0010]在一种可能的实现方式中，读取元素队列中的各帧动画元素的步骤之前，还包括：
[0011]从预设地址中加载用于动画渲染所需的图片，将图片进行预处理后作为进行动画渲染的动画元素；
[0012]将动画元素按照帧序插入到元素列队中。
[0013]在一种可能的实现方式中，根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿的步骤之前，还包括：
[0014]获取预先编写的动画变换代码，解析动画变换代码得到动画元素预设的变换参数；其中，变换参数包括动画缩放参数、旋转参数、移动轨迹、动画开始位置、动画结束位置、动画移动速度、移动方向和预设展示时长中的至少一者；
[0015]根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿的步骤包括：
[0016]根据动画元素预设的变换参数判断元素队列中的当前动画元素的实际展示时长
是否达到其对应的预设展示时长；
[0017]若是，则将当前动画元素从元素队列中剔除；否则，根据预设展示时长对应的剩余时间计算当前动画元素进行渲染的位姿。
[0018]在一种可能的实现方式中，根据预设展示时长对应的剩余时间计算当前动画元素进行渲染的位姿的步骤包括：
[0019]根据预设展示时长对应的剩余时间计算当前动画元素进行绘制的变换矩阵；其中，变换矩阵包括缩放矩阵、位移矩阵以及旋转矩阵中的至少一者；
[0020]将变换矩阵相乘得到当前动画元素进行渲染的位姿。
[0021]在一种可能的实现方式中，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像的步骤，包括：
[0022]根据位姿确定各动画元素在画布上的渲染区域；
[0023]通过绘图接口将至少两个动画元素渲染到同一个画布对应的渲染区域上，得到画布图像。
[0024]在一种可能的实现方式中，通过绘图接口将至少两个动画元素渲染到同一个画布对应的渲染区域上，得到画布图像的步骤包括：
[0025]通过绘图接口将至少两个动画元素渲染到同一个预渲染画布对应的渲染区域上，得到预渲染动画；
[0026]将预渲染动画从预渲染画布渲染到目标画布上，得到画布图像；其中，预渲染画布为与目标画布相同大小的画布，预渲染画布为不可见画布，目标画布为可见画布。
[0027]在一种可能的实现方式中，通过绘图接口将至少两个动画元素渲染到同一个预渲染画布对应的渲染区域上，得到预渲染动画的步骤包括：
[0028]调用webGL接口，通过webGL接口在预渲染画布对应的渲染区域上渲染出动画元素对应的四个顶点；
[0029]在渲染出四个顶点后，在四个顶点的连线所包围的区域内渲染出动画元素的纹理图像；
[0030]将至少两个动画元素对应的纹理图像绘制到同一个预渲染画布上，得到预渲染动画。
[0031]第二方面，本申请实施例提供一种基于页面动画的渲染装置，包括：
[0032]动画元素读取模块，用于读取元素队列中的动画元素；其中，元素队列保存有待渲染的各帧动画元素；
[0033]动画位姿计算模块，用于根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿；
[0034]渲染队列插入模块，用于将动画元素及其位姿插入到渲染队列；
[0035]页面动画展示模块，用于在渲染过程中，依次从渲染队列读取每个动画元素及其位姿，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将画布图像展示在页面上。
[0036]第三方面，本申请实施例提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现第一方面的基于页面动画的渲染方法。
[0037]第四方面，本申请实施例提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现第一方面的基于页面动画的渲染方法。
[0038]上述实施例提供基于页面动画的渲染方法、装置、电子设备及存储介质，通过读取元素队列中的动画元素；根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿；将动画元素及其位姿插入到渲染队列；在渲染过程中，依次从渲染队列读取每个动画元素及其位姿，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将画布图像展示在页面上。本技术方案在渲染过程中，利用预设的变换参数计算出各个动画元素的位姿，将需要渲染到同一个页面上的至少两个动画元素渲染到同一个画布上得到画布图像后，再将画布图像渲染到页面上，从而有效节省多个动画元素进行渲染时的CPU的消耗，避免动画渲染时的页面卡顿。
[0039]本申请附加的方面和优点将在下面的描述中部分给出，这些将从下面的描述中变得明显，或通过本申请的实践了解到。
附图说明
[0040]本申请上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：
[0041]图1是本申请实施例提供的基于页面的动画渲染所适用的应用环境示意图；
[0042]图2是本申请实施例提供的一种基于页面动画的渲染方法的流程图；
[0043]图3是本申请实施例提供的生成本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种基于页面动画的渲染方法，其特征在于，包括以下步骤：读取元素队列中的动画元素；其中，所述元素队列保存有待渲染的各帧动画元素；根据所述动画元素预设的变换参数计算所述元素队列中的每个动画元素渲染的位姿；将所述动画元素及其位姿插入到渲染队列；在渲染过程中，依次从所述渲染队列读取每个动画元素及其位姿，根据所述位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将所述画布图像展示在页面上。2.根据权利要求1所述的基于页面动画的渲染方法，其特征在于，所述读取元素队列中的各帧动画元素的步骤之前，还包括：从预设地址中加载用于动画渲染所需的图片，将所述图片进行预处理后作为进行动画渲染的动画元素；将所述动画元素按照帧序插入到元素列队中。3.根据权利要求1所述的基于页面动画的渲染方法，其特征在于，所述根据所述动画元素预设的变换参数计算所述元素队列中的每个动画元素渲染的位姿的步骤之前，还包括：获取预先编写的动画变换代码，解析所述动画变换代码得到所述动画元素预设的变换参数；其中，所述变换参数包括动画缩放参数、旋转参数、移动轨迹、动画开始位置、动画结束位置、动画移动速度、移动方向和预设展示时长中的至少一者；所述根据所述动画元素预设的变换参数计算所述元素队列中的每个动画元素渲染的位姿的步骤包括：根据所述动画元素预设的变换参数判断所述元素队列中的当前动画元素的实际展示时长是否达到其对应的预设展示时长；若是，则将当前动画元素从所述元素队列中剔除；否则，根据所述预设展示时长对应的剩余时间计算所述当前动画元素进行渲染的位姿。4.根据权利要求3所述的基于页面动画的渲染方法，其特征在于，所述根据所述预设展示时长对应的剩余时间计算所述当前动画元素进行渲染的位姿的步骤包括：根据所述预设展示时长对应的剩余时间计算所述当前动画元素进行绘制的变换矩阵；其中，所述变换矩阵包括缩放矩阵、位移矩阵以及旋转矩阵中的至少一者；将所述变换矩阵相乘得到所述当前动画元素进行渲染的位姿。5.根据权利要求1所述的基于页面动画的渲染方法，其特征在于，所述根据所述位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像的步骤，包括：根据所述位姿确定各所述动画元素...
【专利技术属性】
技术研发人员：钟永安，
申请(专利权)人：广州方硅信息技术有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。