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

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN113157275A(43)申请公布日2021.07.23(21)申请号202110574501.0(22)申请日2021.05.25(71)申请人网易（杭州）网络有限公司地址310052浙江省杭州市滨江区长河街道网商路599号4幢7层(72)发明人杨泽伟(74)专利代理机构北京润泽恒知识产权代理有限公司11319代理人吴文心(51)Int.Cl.G06F8/38(2018.01)G06F16/958(2019.01)G06T13/00(2011.01)权利要求书2页说明书10页附图3页(54)发明名称帧动画的渲染方法、装置、电子设备及存储介质(57)摘要本发明实施例提供了一种帧动画的渲染方法、装置、电子设备及存储介质，所述方法包括：获取初始CSS规则代码，以及针对所述初始CSS规则代码的动画调整属性，所述初始CSS规则代码包括逐帧动画的容器代码以及元素代码，接着根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码，然后将所述元素代码映射至所述目标图层代码，生成目标CSS规则代码，渲染与所述目标CSS规则代码对应的帧动画，从而利用代码修改的方式，对逐帧动画对应的CSS规则代码进行处理，生成新的渲染图层对应的图层代码以合成对应帧位图，实现图像渲染的取位精度化，解决了动画在执行时图像由于补位产生的抖动，保证了动画执行的质量。CN113157275ACN113157275A权利要求书1/2页1.一种帧动画的渲染方法，其特征在于，包括：获取初始CSS规则代码，以及针对所述初始CSS规则代码的动画调整属性，所述初始CSS规则代码包括逐帧动画的容器代码以及元素代码；根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码；将所述元素代码映射至所述目标图层代码，生成目标CSS规则代码；渲染与所述目标CSS规则代码对应的帧动画。2.根据权利要求1所述的方法，其特征在于，所述动画调整属性包括缩放属性、基准点属性以及变换属性，所述根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码，包括：分别对所述容器代码添加所述缩放属性、所述基准点属性以及所述变换属性，生成目标图层代码。3.根据权利要求2所述的方法，其特征在于，所述分别对所述容器代码添加所述缩放属性、所述基准点属性以及所述变换属性，生成目标图层代码，包括：在所述容器代码中添加所述缩放属性，以将所述逐帧动画对应的外部容器放大目标倍数；在所述容器代码中添加所述基准点属性，以将所述外部容器的元素变化中心转移至于所述基准点属性对应的位置；在所述容器代码中添加所述变换属性，以将放大至目标倍数的外部容器缩小所述目标倍数；在动画调整属性添加完毕后，生成目标图层代码。4.根据权利要求1所述的方法，其特征在于，所述将所述元素代码映射至所述目标图层代码，生成目标CSS规则代码，包括：将所述元素代码映射至所述目标图层代码，并移除所述容器代码对应的原始图层代码，生成目标CSS规则代码。5.根据权利要求1所述的方法，其特征在于，所述获取初始CSS规则代码之前，所述方法还包括：获取项目文件，所述项目文件包括CSS文件；所述获取初始CSS规则代码，包括：从所述CSS文件中，提取包含目标属性与目标函数的初始CSS规则代码，并记录所述初始CSS规则代码在所述项目文件中的位置信息；获取针对所述初始CSS规则代码的动画调整属性。6.根据权利要求5所述的方法，其特征在于，所述根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码之前，所述方法还包括：采用各个所述初始CSS规则代码以及对应的位置信息，生成与所述项目文件对应的调整表单；所述根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码，包括：根据所述动画调整属性分别对所述调整表单中各个所述初始CSS规则代码的容器代码进行处理，生成与所述初始CSS规则代码对应的目标图层代码。7.根据权利要求6所述的方法，其特征在于，所述将所述元素代码映射至所述目标图层2CN113157275A权利要求书2/2页代码，生成目标CSS规则代码之后，所述方法还包括：基于所述位置信息，将所述目标CSS规则代码替换所述预设项目文件中对应的初始CSS规则代码，生成目标项目文件；所述渲染与所述目标CSS规则代码对应的帧动画，包括：渲染与所述目标项目文件对应的帧动画。8.一种帧动画的渲染装置，其特征在于，包括：数据获取模块，用于获取初始CSS规则代码，以及针对所述初始CSS规则代码的动画调整属性，所述初始CSS规则代码包括逐帧动画的容器代码以及元素代码；图层代码生成模块，用于根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码；规则代码生成模块，用于将所述元素代码映射至所述目标图层代码，生成目标