【技术实现步骤摘要】
本申请涉及数据处理，具体而言，涉及一种页面的动画渲染方法、装置、电子设备以及存储介质。
技术介绍
1、动画是用多幅静止画面连续播放，利用视觉暂留形成连续影像。随着动画制作技术的发展，动画在很多领域得到了广泛应用。在网络上，动画经常被放在网页中的某个区域，用以强调某项内容，如用作广告宣传。在电子产品中，动画越来越多地用来改善用户界面，开发新功能，提高用户体验。例如，将动画应用于手机彩信，使用户能够传递更加活泼生动的信息。而传统的图像识别方法由于刻度识别不准确等原因误差较大。现有技术针对页面动画的渲染方案存在效率低、容易掉帧等现象。
技术实现思路
1、为解决上述技术问题，本申请的实施例提供了一种页面的动画渲染方法、页面的动画渲染装置、电子设备以及计算机可读存储介质、计算机程序产品，能够加快动画元素的渲染效率，避免渲染过程中页面发生抖动或掉帧。
2、本申请的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本申请的实践而习得。
3、根据本申请实施例的一个方面，提供了一种页面的动画渲染方法，包括：响应于针对页面中待渲染元素的渲染请求，获取与所述待渲染元素处于同一图层的关联元素；对所述待渲染元素与所述关联元素进行图层分离处理，以使所述待渲染元素与所述关联元素分别处于不同的图层；基于所述待渲染元素的关键帧动画，确定所述关联元素的关键帧动画；基于所述待渲染元素的关键帧动画与所述关联元素的关键帧动画，对所述待渲染元素与所述关联元素进行同步渲染。
4、根据本
5、在另一示例性实施例中，响应模块包括响应单元和关联元素获取单元，其中，响应单元用于响应于针对所述待渲染元素的渲染请求，基于所述待渲染元素的关键帧动画，对所述其他元素进行重排；关联元素获取单元用于将所述其他元素中重排后发生关键帧动画变化的元素作为所述关联元素；其中，所述页面中还包括与所述待渲染元素处于同一图层的其他元素。
6、在另一示例性实施例中，确定模块用于获取重排后发生变化的关键帧动画，并将发生变化的关键帧动画作为所述关联元素的关键帧动画。
7、同步渲染模块包括第一获取单元和同步渲染单元，其中，第一获取单元用于从所述第一几何属性变化序列获取第一几何属性，从所述第二几何属性变化序列获取与所述第一几何属性对应的第二几何属性；同步渲染单元用于按照所述几何属性变化序列中的第一几何属性的先后排列顺序，基于获取的第一几何属性和获取的第二几何属性对所述待渲染元素和所述关联元素进行同步渲染。其中，所述待渲染元素的关键帧动画包括所述待渲染元素的第一几何属性变化序列，所述关联元素的关键帧动画包括所述关联元素的第二几何属性变化序列，其中，所述第一几何属性变化序列中含有的第一几何属性分别与所述第二几何属性变化序列中含有的第二几何属性对应。
8、在另一示例性实施例中，本实施例提供的页面的动画渲染装置还包括计算模块和关键帧动画确定模块，其中，计算模块用于基于所述待渲染元素的运动速度曲线和参考几何属性，得到所述待渲染元素的第一几何属性变化序列，关键帧动画确定模块用于将所述待渲染元素的第一几何属性变化序列作为所述待渲染元素的关键帧动画。
9、在另一示例性实施例中，计算模块包括计算单元和带入单元，其中，计算单元用于计算所述第一几何属性变化序列中的各个排列标识与所述参考几何属性的排列标识之间的差值；带入单元用于将所述参考几何属性以及所述差值带入所述运动速度曲线，得到所述各个排列标识的第一几何属性。其中，所述第一几何属性变化序列中含有的第一几何属性有多个，且各个第一几何属性具有排列标识。
10、在另一示例性实施例中，本实施例提供的页面的动画渲染装置还包括第一检测模块，用于若在对所述关联元素与所述待渲染元素进行同步渲染的过程中，检测到至少一个关联元素被删除，则跳转至所述获取与所述待渲染元素处于同一图层的关联元素的步骤。
11、在另一示例性实施例中，本实施例提供的页面的动画渲染装置还包括第二检测模块，用于若在对所述关联元素与所述待渲染元素进行同步渲染的过程中，检测到所述页面中新增了元素，且新增的元素为与所述待渲染元素处于同一图层的关联元素，则跳转至所述基于所述待渲染元素的关键帧动画确定所述关联元素关联的关键帧动画的步骤。
12、在另一示例性实施例中，响应模块还包括第二获取单元和第三获取单元，其中，第二获取单元用于获取与所述待渲染元素处于同一图层的直接关联的关联元素；第三获取单元用于获取与所述关联元素处于同一图层的直接关联的关联元素，并将获取到的与所述关联元素处于同一图层的直接关联的关联元素作为更新后的关联元素，继续获取与所述关联元素处于同一图层的直接关联的关联元素，循环直至获取完所有的关联元素。
13、根据本申请实施例的一个方面，提供了一种电子设备，包括处理器及存储器，存储器上存储有计算机可读指令，计算机可读指令被处理器执行时实现如上页面的动画渲染方法。
14、根据本申请实施例的一个方面，提供了一种计算机可读存储介质，其上存储有计算机可读指令，当计算机可读指令被计算机的处理器执行时，使计算机执行如前提供的页面的动画渲染方法。
15、根据本申请实施例的一个方面，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述各种可选实施例中提供的页面的动画渲染方法。
16、本申请的实施例所提供的技术方案，在对待渲染元素进行渲染之前，筛选出与待渲染元素位于同一图层的关联元素，并将关联元素和待渲染元素进行图层分离处理，使得待渲染元素和关联元素位于不同的图层，然后分别对待渲染元素和关联元素进行渲染，通过这种方式，能够避免在待渲染元素的几何属性变化时，触发对同一图层的所有元素进行重排操作，能够提高页面动画渲染的效率；另外，在对待渲染元素进行渲染之前，筛选出与待渲染元素位于同一图层的关联元素，分别对待渲染元素和关联元素进行同步渲染，通过这种方式，既能够保证位于同一图层的其他元素的几何属性的正确性，又无需对其他元素进行实时重排，，且不易导致页面发生抖动或掉帧，提高用户体验。
17、应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。
本文档来自技高网...【技术保护点】
1.一种页面的动画渲染方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，所述页面中还包括与所述待渲染元素处于同一图层的其他元素；所述响应于针对待渲染元素的渲染请求，获取与所述待渲染元素处于同一图层的关联元素，包括：
3.根据权利要求1所述的方法，其特征在于，所述待渲染元素的关键帧动画包括所述待渲染元素的第一几何属性变化序列，所述关联元素的关键帧动画包括所述关联元素的第二几何属性变化序列，其中，所述第一几何属性变化序列中含有的第一几何属性分别与所述第二几何属性变化序列中含有的第二几何属性对应；
4.根据权利要求3所述的方法，其特征在于，在所述从所述第一几何属性变化序列获取第一几何属性，从所述第二几何属性变化序列获取与所述第一几何属性对应的第二几何属性之前，所述方法还包括：
5.根据权利要求4所述的方法，其特征在于，所述第一几何属性变化序列中含有的第一几何属性有多个，且各个第一几何属性具有排列标识；所述基于所述待渲染元素的运动速度曲线和参考几何属性，得到所述待渲染元素的第一几何属性变化序列，包括：
6.根据
7.根据权利要求1至5中任一项所述的方法，其特征在于，所述方法还包括：
8.根据权利要求1至5中任一项所述的方法，其特征在于，所述获取与所述待渲染元素处于同一图层的关联元素，包括：
9.一种页面的动画渲染装置，其特征在于，包括：
10.一种电子设备，其特征在于，包括：
11.一种计算机可读存储介质，其特征在于，其上存储有计算机可读指令，当所述计算机可读指令被计算机的处理器执行时，使计算机执行权利要求1-8中的任一项所述的方法。
12.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1-8中任一项所述的方法。
...【技术特征摘要】
1.一种页面的动画渲染方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，所述页面中还包括与所述待渲染元素处于同一图层的其他元素；所述响应于针对待渲染元素的渲染请求，获取与所述待渲染元素处于同一图层的关联元素，包括：
3.根据权利要求1所述的方法，其特征在于，所述待渲染元素的关键帧动画包括所述待渲染元素的第一几何属性变化序列，所述关联元素的关键帧动画包括所述关联元素的第二几何属性变化序列，其中，所述第一几何属性变化序列中含有的第一几何属性分别与所述第二几何属性变化序列中含有的第二几何属性对应；
4.根据权利要求3所述的方法，其特征在于，在所述从所述第一几何属性变化序列获取第一几何属性，从所述第二几何属性变化序列获取与所述第一几何属性对应的第二几何属性之前，所述方法还包括：
5.根据权利要求4所述的方法，其特征在于，所述第一几何属性变化序列中含有的第一几何属性有多个，...
【专利技术属性】
技术研发人员：李泽熊，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。