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

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN112711729A(43)申请公布日2021.04.27(21)申请号202011643794.5(22)申请日2020.12.30(71)申请人广州方硅信息技术有限公司地址511442广东省广州市番禺区南村镇万博二路79号3108(72)发明人钟永安(74)专利代理机构北京市立方律师事务所11330代理人刘延喜(51)Int.Cl.G06F16/957(2019.01)G06F16/958(2019.01)G06T13/00(2011.01)权利要求书2页说明书15页附图5页(54)发明名称基于页面动画的渲染方法、装置、电子设备及存储介质(57)摘要本申请提供了基于页面动画的渲染方法、装置、电子设备及存储介质，涉及计算机应用技术领域，该方法通过读取元素队列中的动画元素；根据动画元素预设的变换参数计算元素队列中的每个动画元素渲染的位姿；将动画元素及其位姿插入到渲染队列；在渲染过程中，依次从渲染队列读取每个动画元素及其位姿，根据位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将画布图像展示在页面上。本技术方案有效节省多个动画元素进行渲染时的CPU的消耗，避免动画渲染时的页面卡顿。CN112711729ACN112711729A权利要求书1/2页1.一种基于页面动画的渲染方法，其特征在于，包括以下步骤：读取元素队列中的动画元素；其中，所述元素队列保存有待渲染的各帧动画元素；根据所述动画元素预设的变换参数计算所述元素队列中的每个动画元素渲染的位姿；将所述动画元素及其位姿插入到渲染队列；在渲染过程中，依次从所述渲染队列读取每个动画元素及其位姿，根据所述位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像，并将所述画布图像展示在页面上。2.根据权利要求1所述的基于页面动画的渲染方法，其特征在于，所述读取元素队列中的各帧动画元素的步骤之前，还包括：从预设地址中加载用于动画渲染所需的图片，将所述图片进行预处理后作为进行动画渲染的动画元素；将所述动画元素按照帧序插入到元素列队中。3.根据权利要求1所述的基于页面动画的渲染方法，其特征在于，所述根据所述动画元素预设的变换参数计算所述元素队列中的每个动画元素渲染的位姿的步骤之前，还包括：获取预先编写的动画变换代码，解析所述动画变换代码得到所述动画元素预设的变换参数；其中，所述变换参数包括动画缩放参数、旋转参数、移动轨迹、动画开始位置、动画结束位置、动画移动速度、移动方向和预设展示时长中的至少一者；所述根据所述动画元素预设的变换参数计算所述元素队列中的每个动画元素渲染的位姿的步骤包括：根据所述动画元素预设的变换参数判断所述元素队列中的当前动画元素的实际展示时长是否达到其对应的预设展示时长；若是，则将当前动画元素从所述元素队列中剔除；否则，根据所述预设展示时长对应的剩余时间计算所述当前动画元素进行渲染的位姿。4.根据权利要求3所述的基于页面动画的渲染方法，其特征在于，所述根据所述预设展示时长对应的剩余时间计算所述当前动画元素进行渲染的位姿的步骤包括：根据所述预设展示时长对应的剩余时间计算所述当前动画元素进行绘制的变换矩阵；其中，所述变换矩阵包括缩放矩阵、位移矩阵以及旋转矩阵中的至少一者；将所述变换矩阵相乘得到所述当前动画元素进行渲染的位姿。5.根据权利要求1所述的基于页面动画的渲染方法，其特征在于，所述根据所述位姿将至少两个动画元素在同一个画布上进行渲染得到画布图像的步骤，包括：根据所述位姿确定各所述动画元素在画布上的渲染区域；通过绘图接口将至少两个所述动画元素渲染到同一个画布对应的渲染区域上，得到画布图像。6.根据权利要求5所述的基于页面动画的渲染方法，其特征在于，所述通过绘图接口将至少两个所述动画元素渲染到同一个画布对应的渲染区域上，得到画布图像的步骤包括：通过绘图接口将至少两个所述动画元素渲染到同一个预渲染画布对应的渲染区域上，得到预渲染动画；将所述预渲染动画从所述预渲染画布渲染到目标画布上，得到画布图像；其中，所述预渲染画布为与目标画布相同大小的画布，所述预渲染画布为不可见画布，所述目标画布为2CN112711729A权利要求书2/2页可见画布。7.根据权利要求5所述的基于页面动画的渲染方法，其特征在于，所述通过绘图接口将至少两个所述动画元素渲染到同一个预渲染画布对应的渲染区域上，得到预渲染动画的步骤包括：调用webGL接口，通过所述webGL接口在所述预渲染画布对应的渲染区域上渲染出所述动画元素对应的四个顶点；在渲染出四个顶点后，在所述四个顶点的连线所包围的区域内渲染出所述动画元素的纹理图像；将至少两个动画元素对应的纹理图像绘制到同一个预渲染画布上，得到预渲染动画。8.一种基于页面动画的渲染装置，