CN113157275B

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

Info

Publication number: CN113157275B
Application number: CN202110574501.0A
Authority: CN
Inventors: 杨泽伟
Original assignee: Netease Hangzhou Network Co Ltd
Current assignee: Netease Hangzhou Network Co Ltd
Priority date: 2021-05-25
Filing date: 2021-05-25
Publication date: 2023-09-08
Anticipated expiration: 2041-05-25
Also published as: CN113157275A

Abstract

本发明实施例提供了一种帧动画的渲染方法、装置、电子设备及存储介质，所述方法包括：获取初始CSS规则代码，以及针对所述初始CSS规则代码的动画调整属性，所述初始CSS规则代码包括逐帧动画的容器代码以及元素代码，接着根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码，然后将所述元素代码映射至所述目标图层代码，生成目标CSS规则代码，渲染与所述目标CSS规则代码对应的帧动画，从而利用代码修改的方式，对逐帧动画对应的CSS规则代码进行处理，生成新的渲染图层对应的图层代码以合成对应帧位图，实现图像渲染的取位精度化，解决了动画在执行时图像由于补位产生的抖动，保证了动画执行的质量。

Description

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

技术领域

本发明涉及动画处理技术领域，特别是涉及一种帧动画的渲染方法、一种帧动画的渲染装置、一种电子设备以及一种计算机可读存储介质。

背景技术

随着浏览器对Web交互的增强，许多网站开始广泛地使用动画作为网页元素点缀。其中，CSS(层叠样式表，Cascading Style Sheets)的关键帧动画和逐帧动画在前端生产需求中已被广泛应用，属于两种常规易用、低成本的动画开发方案。关键帧动画可看作是一个连续的动画片段，逐帧动画可看作是一个断续的动画片段，两种动画都是按照时间顺序将多个动画片段串联在一起。浏览器可将关键帧动画的关键帧自动过渡成动画片段，将逐帧动画的每一帧按顺序播放成动画片段，即逐帧动画可以为一个GIF动图。

其中，CSS逐帧动画是将每一帧按顺序播放形成一个整体动画片段，每一帧都可以对应一张图像，通常会将一连串的顺序图像从左到右合并成一张长图像(即精灵图)，再从左到右按顺序间隔播放一张图像，当速度达到一定程度时就变成逐帧动画，如GIF动图一样(每一帧都对应一张图像，在限定时间内顺序播放形成动画)。在分辨率不同的环境下，图像容易受到缩放限制，由于浏览器逐帧取位(按顺序播放每一帧对应的图像)而不会对两帧间实现补帧，所以受到图像缩放的影响而可能导致在动画播放过程中产生抖动，从而影响动画执行的质量。

发明内容

本发明实施例是提供一种帧动画的渲染方法、装置、电子设备以及计算机可读存储介质，以解决或部分解决现有技术中逐帧动画的制作过程中容易由于抖动影响动画执行的质量的问题。

本发明实施例公开了一种帧动画的渲染方法，包括：

获取初始CSS规则代码，以及针对所述初始CSS规则代码的动画调整属性，所述初始CSS规则代码包括逐帧动画的容器代码以及元素代码；

根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码；

将所述元素代码映射至所述目标图层代码，生成目标CSS规则代码；

渲染与所述目标CSS规则代码对应的帧动画。

可选地，所述动画调整属性包括缩放属性、基准点属性以及变换属性，所述根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码，包括：

分别对所述容器代码添加所述缩放属性、所述基准点属性以及所述变换属性，生成目标图层代码。

可选地，所述分别对所述容器代码添加所述缩放属性、所述基准点属性以及所述变换属性，生成目标图层代码，包括：

在所述容器代码中添加所述缩放属性，以将所述逐帧动画对应的外部容器放大目标倍数；

在所述容器代码中添加所述基准点属性，以将所述外部容器的元素变化中心转移至于所述基准点属性对应的位置；

在所述容器代码中添加所述变换属性，以将放大至目标倍数的外部容器缩小所述目标倍数；

在动画调整属性添加完毕后，生成目标图层代码。

可选地，所述将所述元素代码映射至所述目标图层代码，生成目标CSS规则代码，包括：

将所述元素代码映射至所述目标图层代码，并移除所述容器代码对应的原始图层代码，生成目标CSS规则代码。

可选地，所述获取初始CSS规则代码之前，所述方法还包括：

获取项目文件，所述项目文件包括CSS文件；

所述获取初始CSS规则代码，包括：

从所述CSS文件中，提取包含目标属性与目标函数的初始CSS规则代码，并记录所述初始CSS规则代码在所述项目文件中的位置信息；

获取针对所述初始CSS规则代码的动画调整属性。

可选地，所述根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码之前，所述方法还包括：

采用各个所述初始CSS规则代码以及对应的位置信息，生成与所述项目文件对应的调整表单；

所述根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码，包括：

根据所述动画调整属性分别对所述调整表单中各个所述初始CSS规则代码的容器代码进行处理，生成与所述初始CSS规则代码对应的目标图层代码。

可选地，所述将所述元素代码映射至所述目标图层代码，生成目标CSS规则代码之后，所述方法还包括：

基于所述位置信息，将所述目标CSS规则代码替换所述预设项目文件中对应的初始CSS规则代码，生成目标项目文件；

所述渲染与所述目标CSS规则代码对应的帧动画，包括：

渲染与所述目标项目文件对应的帧动画。

本发明实施例还公开了一种帧动画的渲染装置，包括：

数据获取模块，用于获取初始CSS规则代码，以及针对所述初始CSS规则代码的动画调整属性，所述初始CSS规则代码包括逐帧动画的容器代码以及元素代码；

图层代码生成模块，用于根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码；

规则代码生成模块，用于将所述元素代码映射至所述目标图层代码，生成目标CSS规则代码；

帧动画渲染模块，用于渲染与所述目标CSS规则代码对应的帧动画。

可选地，所述动画调整属性包括缩放属性、基准点属性以及变换属性，所述图层代码生成模块具体用于：

可选地，所述图层代码生成模块具体用于：

在动画调整属性添加完毕后，生成目标图层代码。

可选地，所述规则代码生成模块具体用于：

可选地，所述获取初始CSS规则代码之前，所述装置还包括：

项目文件获取模块，用于获取项目文件，所述项目文件包括CSS文件；

所述数据获取模块包括：

位置信息记录子模块，用于从所述CSS文件中，提取包含目标属性与目标函数的初始CSS规则代码，并记录所述初始CSS规则代码在所述项目文件中的位置信息；

动画调整属性获取子模块，用于获取针对所述初始CSS规则代码的动画调整属性。

可选地，所述装置还包括：

调整表单生成模块，用于采用各个所述初始CSS规则代码以及对应的位置信息，生成与所述项目文件对应的调整表单；

所述图层代码生成模块具体用于：

可选地，所述装置还包括：

项目文件生成模块，用于基于所述位置信息，将所述目标CSS规则代码替换所述预设项目文件中对应的初始CSS规则代码，生成目标项目文件；

所述帧动画渲染模块具体用于：

渲染与所述目标项目文件对应的帧动画。

本发明实施例还公开了一种电子设备，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述电子设备执行如上所述的方法。

本发明实施例还公开了一种计算机可读存储介质，其上存储有指令，当由一个或多个处理器执行时，使得所述处理器执行如上所述的方法。

本发明实施例包括以下优点：

在本发明实施例中，通过获取初始CSS规则代码，以及针对所述初始CSS规则代码的动画调整属性，所述初始CSS规则代码包括逐帧动画的容器代码以及元素代码，接着根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码，然后将所述元素代码映射至所述目标图层代码，生成目标CSS规则代码，渲染与所述目标CSS规则代码对应的帧动画，从而利用代码修改的方式，对逐帧动画对应的CSS规则代码进行处理，生成新的渲染图层对应的图层代码以合成对应帧位图，实现图像渲染的取位精度化，解决了动画在执行时图像由于补位产生的抖动，保证了动画执行的质量。

附图说明

图1是本发明实施例中提供的像素示意图；

图2是本发明实施例中提供的区域渲染示意图；

图3是本发明实施例中提供的一种帧动画的渲染方法的步骤流程图；

图4是本发明实施例中提供的一种帧动画的渲染方法的步骤流程图；

图5是本发明实施例中提供的一种帧动画的渲染装置的结构框图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

作为一种示例，图像在终端的图形用户界面中显示，图形用户界面可以由一个个物理像素横竖排列组成的矩阵，因此，图像可以由这些物理像素组合而成。屏幕上的一个物理像素代表CSS中的1px，参照图1，示出了本发明实施例中提供的像素示意图，图1表示一块9px x 3px的原始图像的某一处区域，该区域由3个色块组成(从左至右分别为红色、绿色以及蓝色色块)，每个色块的尺寸是3px x3px。假设该区域是一个逐帧动画的一部分，在图像尺寸不变的情况下，每一帧里都会保持一致。

当把原始图像放置到一个小屏幕里显示，若该图像只能显示为原始尺寸的一半，那么上述区域随即变成原来区域尺寸的一半，即4.5px x 1.5px，由于浏览器无法直接显示0.5px的物理像素，只能以自然数的形式展示，所以最终渲染区域的宽度为4px或5px，高度为1px或2px(不同浏览器在不同电脑配置和不同操作系统的环境下会有所差异)。假设最终渲染区域尺寸是5px*2px，则参照图2，示出了本发明实施例中提供的区域渲染示意图，浏览器可能会将上述区域渲染成图2中①、②以及③所对应的三个样式，每一个样式中从左至右分别为红、绿以及蓝色色块。

上述过程中，该区域在原始图像尺寸的逐帧动画里会一直保持不变，若整个动画包含6帧，则在整个播放过程中就相当一张静止的图像。经过缩放的图像参与到逐帧动画中，上述区域就有可能在逐帧取位中使用到上述A/B/C三种可能的渲染形式中的一种，此时重新播放整个动画就会发现中间的绿色色块一直在闪烁，从图像整体上看就是局部区域发生抖动。

可见，在上述逐帧动画的制作过程中，容易由于浏览器渲染缩放图像机制的不同，导致相同逐帧动画在不同屏幕下产生抖动，影响动画的播放质量。

因此，本发明实施例的核心发明点之一在于可以在已有的逐帧动画的制作基础上，通过获取与逐帧动画对应的初始CSS规则代码，以及针对初始CSS规则代码的动画调整属性，接着根据动画调整属性对初始CSS规则代码中逐帧动画的容器代码进行处理，生成目标图层代码，并将元素代码映射至目标图层代码，生成目标CSS规则代码，从而通过对逐帧动画所对应的代码进行处理，实现图像渲染的取位精度化，保证动画在执行时图像不会因为补位的问题而产生抖动，并且可以在保证原有逐帧动画请求次数的情况下，保障了系统运行性能。

参照图3，示出了本发明实施例中提供的一种帧动画的渲染方法的步骤流程图，具体可以包括如下步骤：

步骤301，获取初始CSS规则代码，以及针对所述初始CSS规则代码的动画调整属性，所述初始CSS规则代码包括逐帧动画的容器代码以及元素代码；

CSS是一种描述HTML文档样式的语言，通过CSS可以在屏幕、网页或其他媒体中显示动画元素，实现逐帧动画在前端中的应用。

在本发明实施例中，针对已有的逐帧动画，可以通过获取其所对应的初始CSS规则代码，以及针对初始CSS规则代码的动画调整属性。其中，初始CSS规则代码中可以包括逐帧动画的容器代码以及元素代码。

在具体实现中，CSS规则代码可以为包含animation属性和steps()函数的代码，通过这两个CSS属性/函数可以确定代码中是否使用了逐帧动画，在确定了CSS规则代码中使用了逐帧代码，则可以从CSS规则代码中提取逐帧动画的容器代码以及元素代码。其中，容器代码可以为动画元素的外部容器，对于一个完整的动画，可以由一个或多个<div>标签组成，包裹在最外层的<div>即为外部容器，其可以为动画中各个动画元素的父元素，用于包裹动画元素；元素代码可以为动画中动画元素所对应的代码。例如，容器代码可以用于定义动画的图层，动画元素可以为展示于图层中的内容等等。

动画调整属性可以为对初始CSS规则代码进行修改的属性，通过该动画调整属性可以从代码层面实现对逐帧动画取位的精度化，以便保证动画执行的质量。

步骤302，根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码；

在本发明实施例中，动画调整属性可以包括缩放属性、基准点属性以及变换属性等，则分别对容器代码添加缩放属性、基准点属性以及变换属性，生成目标图层代码。其中，目标图层代码可以表现为逐帧动画的渲染图层。

在具体实现中，可以先在容器代码中添加缩放属性，以将逐帧动画对应的外部容器放大目标倍数，接着在容器代码中添加基准点属性，以将外部容器的元素变化中心转移至于基准点属性对应的位置，然后在容器代码中添加变换属性，以将放大至目标倍数的外部容器缩小目标倍数，从而在动画调整属性添加完毕后，生成目标图层代码，从而通过不同动画调整属性从代码层面对逐帧动画进行取位，间接生成带有小数的像素值，以消除因为帧动画补位而产生的抖动。

需要说明的是，缩放属性可以为zoom属性，其可以在浏览器中定义容器的缩放比例；基准点属性可以为transform-origin属性，其可以为设置元素变化的基准点，例如，若将其设置为lefttop，则动画元素变换时以左上角为基准点往右往下放大等等；变换属性可以为transform:scale属性，通过该属性可以设置动画元素以缩放的方式进行变换。

在一种示例中，针对逐帧动画的初始CSS规则代码的调整过程，可以先在容器代码中添加zoom属性将逐帧动画所对应的外部容器放大至N倍，接着添加transform-origin:lefttop属性，将外部容器的变化中心从最中间转移至左上角的位置，然后添加transform:scale属性，将外部容器重新缩放N倍，生成与逐帧动画对应的目标图层代码，得到逐帧动画新的渲染图层，从而通过不同动画调整属性从代码层面对逐帧动画进行取位，间接生成带有小数的像素值，以消除因为帧动画补位而产生的抖动。其中，利用zoom属性对外部容器进行放大，并通过transform:scale属性恢复至原来的尺寸，不仅可以保证外部容器尺寸的一致性，而且可以绕开声明CSS的0.5px，消除因为帧动画部位而产生的抖动，以及利用transform:scale属性矩阵换算的特点可以提升图像在整体播放动画过程中的渲染性能。

步骤303，将所述元素代码映射至所述目标图层代码，生成目标CSS规则代码；

在具体实现中，当生成目标图层代码后，可以采用变换属性将元素代码映射至目标图层代码，并移除容器代码对应的原始图层代码，生成目标CSS规则代码。

需要说明的是，目标图层代码可以体现为新的渲染图层，则生成目标图层代码，相当于将逐帧动画运行在新图层，由于动画是动态计算的，若是将动画在旧图层上运行，容易影响同图层其他动画元素的渲染性能，因此，通过变换属性将动画元素映射至新的渲染图层，将有变化的元素与无变化的元素进行区分，避免相互影响。

在一种示例中，针对已有的逐帧动画，可以先查找符合条件的HTML容器(动画元素)，若代码包含animation属性和steps()函数，则确定包含animation属性和steps()函数的代码为初始CSS规则代码。在使用CSS声明逐帧动画的外部容器时，可以默认使用每一帧图像的原始尺寸作为外部容器的尺寸，整个逐帧动画可以在该外部容器中执行，接着声明zoom属性将外部容器放大5倍，声明transform-origin:lefttop属性将容器的变换中心从最中间转移到左上角的位置，声明transform:scale(0.2)属性将容器缩小5倍，生成目标图层代码，并基于变换属性将元素代码映射至目标图层代码，移除原始图层代码，获得目标CSS规则代码，从而通过结合zoom、transform-origin和transform:scale()间接生成带有小数的像素值，通过绕开直接声明CSS的0.5px(在CSS代码中无法直接声明小于包含小数位的像素值)，从而消除因为补位而产生的抖动。

需要说明的是，由于动画抖动发生在尺寸转换不精确的情况下，因此通过zoom属性对外部容器的尺寸进行放大，从而通过方法目标倍数提高尺寸转换的精度。同时，通过transform-origin将元素的变换基点挪至左上角，以响应zoom的缩放，以及通过transform:scale属性可以将外部容器还原至图像的原始尺寸，保证逐帧动画尺寸的一致性。

步骤304，渲染与所述目标CSS规则代码对应的帧动画。

在具体实现中，针对每一帧逐帧动画，可以通过动画调整属性对其所对应的CSS规则代码进行代码调整，生成新的CSS规则代码，从而在渲染过程中，可以进行代码替换，然后渲染得到对应的帧动画，实现图像渲染的取位精度化，解决了动画在执行时图像由于补位产生的抖动，保证了动画执行的质量。此外，在渲染逐帧动画的过程中，可以保留原有精灵图的优势，合成帧位图后可以减轻图像质量大小和降低图像请求的次数，一张精灵图只需请求一次，降低了网络带宽的需求。

需要说明的是，本发明实施例包括但不限于上述示例，可以理解的是，本领域技术人员在本发明的思想指导下，还可以根据实际需要进行设置，本发明对此不作限制。

参照图4，示出了本发明实施例中提供的一种帧动画的渲染方法的步骤流程图，具体可以包括如下步骤：

步骤401，获取项目文件，所述项目文件包括CSS文件；

作为一种示例，针对已有的旧项目中逐帧动画的处理，若一帧一帧地进行帧动画处理，不仅效率低下，而且容易由于代码重构带来代码编译出错的问题。因此，可以将上一实施例中帧动画的处理过程作为脚手架的组成部分，对项目文件进行批量处理，实现项目文件中逐帧动画的批量处理。

在具体实现中，可以获取已有的项目文件，接着从项目文件中提取CSS文件，以便对项目文件中逐帧动画所对应的代码进行处理，解决项目文件在动画执行过程中图像由于补位产生的抖动，保证项目文件动画执行的质量。

步骤402，从所述CSS文件中，提取包含目标属性与目标函数的初始CSS规则代码，并记录所述初始CSS规则代码在所述项目文件中的位置信息；

目标属性可以为animation属性，目标函数可以为steps()函数，具体的，在扫描项目文件所对应的项目代码后，可以通过AST(Abstract Syntax Tree，抽象语法树)分析项目代码中哪些代码包含animation属性和steps()函数，并提取出包含这两个CSS属性的代码作为初始CSS规则代码，并记录这些初始CSS规则代码在项目文件中的位置信息。

步骤403，获取针对所述初始CSS规则代码的动画调整属性；

动画调整属性可以为对初始CSS规则代码进行修改的属性，通过该动画调整属性可以从代码层面实现对逐帧动画取位的精度化，以便保证动画执行的质量。其中，动画调整属性可以包括zoom属性、transform-origin属性以及transform:scale属性等属性。

步骤404，采用各个所述初始CSS规则代码以及对应的位置信息，生成与所述项目文件对应的调整表单；

在具体实现中，可以提取出符合条件的初始CSS规则代码并记录各个初始CSS规则代码对应的位置信息，然后采用两者生成与项目文件对应的调整表单。调整表单中可以包括项目文件中需要进行调整的所有CSS规则代码，以及各个CSS规则代码在项目文件中的映射位置。

步骤405，根据所述动画调整属性分别对所述调整表单中各个所述初始CSS规则代码的容器代码进行处理，生成与所述初始CSS规则代码对应的目标图层代码；

在具体实现中，可以遍历调整表单，针对每一个初始CSS规则代码，可以先在容器代码中添加缩放属性，以将逐帧动画对应的外部容器放大目标倍数，接着在容器代码中添加基准点属性，以将外部容器的元素变化中心转移至于基准点属性对应的位置，然后在容器代码中添加变换属性，以将放大至目标倍数的外部容器缩小目标倍数，从而在动画调整属性添加完毕后，生成目标图层代码，从而通过不同动画调整属性从代码层面对逐帧动画进行取位，间接生成带有小数的像素值，以消除因为帧动画补位而产生的抖动。

步骤406，将所述元素代码映射至所述目标图层代码，生成目标CSS规则代码；

在具体实现中，针对每一个初始CSS规则代码，当生成目标图层代码后，可以采用变换属性将元素代码映射至目标图层代码，并移除容器代码对应的原始图层代码，生成目标CSS规则代码。

步骤407，基于所述位置信息，将所述目标CSS规则代码替换所述预设项目文件中对应的初始CSS规则代码，生成目标项目文件；

当调整表单中所有的初始CSS规则代码均修改完毕后，可以基于表单中的位置信息，将项目文件中的初始CSS规则代码替换为修改后的目标CSS规则代码，输出新的CSS文件，以生成对应的目标项目文件。

步骤408，渲染与所述目标项目文件对应的帧动画。

针对一个旧项目文件，通过上述过程可以对项目文件中所有的逐帧动画进行代码修改，从而通过对项目文件中的逐帧动画进行批量的代码替换，解决项目文件在动画执行过程中图像由于补位产生的抖动，保证项目文件动画执行的质量，同时大大减轻了代码重构的成本以及重构代码时的出错率，有效提高了项目文件维护的效率。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。

参照图5，示出了本发明实施例中提供的一种帧动画的渲染装置的结构框图，具体可以包括如下模块：

数据获取模块501，用于获取初始CSS规则代码，以及针对所述初始CSS规则代码的动画调整属性，所述初始CSS规则代码包括逐帧动画的容器代码以及元素代码；

图层代码生成模块502，用于根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码；

规则代码生成模块503，用于将所述元素代码映射至所述目标图层代码，生成目标CSS规则代码；

帧动画渲染模块504，用于渲染与所述目标CSS规则代码对应的帧动画。

在本发明的一种可选实施例中，所述动画调整属性包括缩放属性、基准点属性以及变换属性，所述图层代码生成模块502具体用于：

在本发明的一种可选实施例中，所述图层代码生成模块502具体用于：

在动画调整属性添加完毕后，生成目标图层代码。

在本发明的一种可选实施例中，所述规则代码生成模块503具体用于：

在本发明的一种可选实施例中，所述获取初始CSS规则代码之前，所述装置还包括：

所述数据获取模块501包括：

在本发明的一种可选实施例中，所述装置还包括：

所述图层代码生成模块502具体用于：

在本发明的一种可选实施例中，所述装置还包括：

所述帧动画渲染模块504具体用于：

渲染与所述目标项目文件对应的帧动画。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本发明实施例还提供了一种电子设备，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述电子设备执行本发明实施例所述的方法。

本发明实施例还提供了一种计算机可读存储介质，其上存储有指令，当由一个或多个处理器执行时，使得所述处理器执行本发明实施例所述的方法。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本发明实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明实施例是参照根据本发明实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本发明所提供的一种帧动画的渲染方法、一种帧动画的渲染装置、一种电子设备以及一种计算机可读存储介质，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims

1.一种帧动画的渲染方法，其特征在于，包括：

渲染与所述目标CSS规则代码对应的帧动画；

其中，所述动画调整属性包括缩放属性、基准点属性以及变换属性，所述根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码，包括：

在动画调整属性添加完毕后，生成目标图层代码。

2.根据权利要求1所述的方法，其特征在于，所述将所述元素代码映射至所述目标图层代码，生成目标CSS规则代码，包括：

3.根据权利要求1所述的方法，其特征在于，所述获取初始CSS规则代码之前，所述方法还包括：

获取项目文件，所述项目文件包括CSS文件；

所述获取初始CSS规则代码，包括：

获取针对所述初始CSS规则代码的动画调整属性。

4.根据权利要求3所述的方法，其特征在于，所述根据所述动画调整属性对所述容器代码进行处理，生成目标图层代码之前，所述方法还包括：

5.根据权利要求4所述的方法，其特征在于，所述将所述元素代码映射至所述目标图层代码，生成目标CSS规则代码之后，所述方法还包括：

基于所述位置信息，将所述目标CSS规则代码替换所述项目文件中对应的初始CSS规则代码，生成目标项目文件；

所述渲染与所述目标CSS规则代码对应的帧动画，包括：

渲染与所述目标项目文件对应的帧动画。

6.一种帧动画的渲染装置，其特征在于，包括：

帧动画渲染模块，用于渲染与所述目标CSS规则代码对应的帧动画；

其中，所述动画调整属性包括缩放属性、基准点属性以及变换属性，所述图层代码生成模块具体用于：

在动画调整属性添加完毕后，生成目标图层代码。

7.一种电子设备，其特征在于，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述电子设备执行如权利要求1-5任一项所述的方法。

8.一种计算机可读存储介质，其上存储有指令，当由一个或多个处理器执行时，使得所述处理器执行如权利要求1-5任一项所述的方法。