CN106469220B - 一种生成动态效果页面的方法及系统 - Google Patents
一种生成动态效果页面的方法及系统 Download PDFInfo
- Publication number
- CN106469220B CN106469220B CN201610815839.XA CN201610815839A CN106469220B CN 106469220 B CN106469220 B CN 106469220B CN 201610815839 A CN201610815839 A CN 201610815839A CN 106469220 B CN106469220 B CN 106469220B
- Authority
- CN
- China
- Prior art keywords
- layer
- generating
- picture
- page
- layer information
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Expired - Fee Related
Links
- 230000000694 effects Effects 0.000 title claims abstract description 167
- 238000000034 method Methods 0.000 title claims abstract description 49
- 230000003068 static effect Effects 0.000 claims abstract description 63
- 238000012545 processing Methods 0.000 claims description 27
- 238000009877 rendering Methods 0.000 claims description 19
- 238000005034 decoration Methods 0.000 claims description 12
- 238000011161 development Methods 0.000 abstract description 20
- 238000005516 engineering process Methods 0.000 abstract description 7
- 238000004458 analytical method Methods 0.000 description 22
- 238000010586 diagram Methods 0.000 description 15
- 238000010845 search algorithm Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 5
- 230000010365 information processing Effects 0.000 description 4
- 238000003491 array Methods 0.000 description 2
- 230000003111 delayed effect Effects 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000006243 chemical reaction Methods 0.000 description 1
- 230000014509 gene expression Effects 0.000 description 1
- 238000011835 investigation Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明公开了一种生成动态效果页面的方法及系统，所述方法包括：获得多图层图片；基于获得的多图层图片生成图层信息文件；根据所述图层信息文件生成静态页面；通过向所述静态页面添加动画效果，生成动态效果页面。通过采用本发明，可以解析所有类型的多图层图片，支持通过对每个图层添加动画的配置来生成有动画效果的页面，通过自动化技术生成页面，减少人工开发产生的纰漏。
Description
技术领域
本发明涉及图片数据处理领域，更为具体而言，涉及一种生成动态效果页面的方法和系统。
背景技术
随着互联网多元化的发展，动态效果页面技术正在不断发展和应用。常规的网站页面开发流程是：工程师根据拿到的设计图(多图层图片，主要是PSD(Photoshop软件生成的多图层图片格式)文件)，通过HTML(超文本标记语言)、CSS(层叠样式表)等网站开发语言来开发静态页面，再应用js(JavaScript)等脚本语言来开发页面的动态效果和交互。
具体地，在现有技术中，将待生成静态页面的PSD文件上传，通过技术手段解析所述文件中各个图层的属性信息，包括但不限于定位、颜色、透明度、异形、字体、字色等等，将所述文件各图层的属性信息封装成图层信息数据；将图层信息数据转换成文档对象模型DOM结构，根据该DOM结构生成用于描述页面结构的文件；导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。如需动态页面，则需人工单独开发动态效果。
然而，本发明的发明人发现现有技术存在诸多缺陷：首先，多图层的图片类型很多，现有的技术只支持把PSD文件进行转换。其次，生成的页面是静态页面，而现在大家对有动画效果的页面的需求更大。最后，如果人工去开发页面和动画，难免会有一些细微的偏差，导致开发完的页面和设计图有所差异。
发明内容
为了解决上述技术问题，本发明实施方式提供了一种生成动态效果页面的方法和系统。
根据本发明的一种实施方式，所述生成动态效果页面的方法可以包括：获得多图层图片；基于获得的多图层图片生成图层信息文件；根据所述图层信息文件生成静态页面；通过向所述静态页面添加动画效果，生成动态效果页面。
根据本发明实施方式，处理多图层图片的类型不做限制，并且支持通过对每个图层添加动画的配置来生成有动画效果的页面，通过自动化技术生成页面，减少人工开发产生的纰漏。
在本发明的可选实施方式中，基于获得的多图层图片生成图层信息文件可以包括：获取所述多图层图片的整体信息和各图层的图层信息；将获取的所述整体信息和图层信息保存到图片数据中；基于所述图片数据生成图层信息文件。
其中，可选地，基于所述图片数据生成图层信息文件可包括：根据所述图片数据获得图层分组的层级和顺序；依照获得的图层分组的层级和顺序生成图层数组树，其中，所述图层数组树的各节点存储图层信息；将生成的图层数据树保存为图层信息文件。在本发明的另一优选实施方式中，基于所述图片数据生成图层信息文件还可包括：对所述图层信息进行去重和装饰处理。
在本发明的可选实施方式中，根据所述图层信息文件生成静态页面可包括：按照所述图层数组树的层级，将所述图层数组树渲染为对应层级的DOM结构；针对所述图层数组树的每个节点，根据该节点存储的图层信息渲染所述DOM结构对应的样式，得到静态页面。
在本发明的另一种实施方式中，上述基于所述图片数据生成图层信息文件还可包括：对所述图层文件中的图层信息进行分组。相应地，在本发明的又一实施方式中，通过向所述静态页面添加动画效果，生成动态效果页面可以包括：根据所述图层信息的分组对所述DOM结构进行分组；对所述DOM结构的分组添加动画效果以生成动态效果页面。
作为选择，在本发明的另一实施方式中，通过向所述静态页面添加动画效果，生成动态效果页面可以包括：对所述DOM结构进行分组；对所述DOM结构的分组添加动画效果以生成动态效果页面。
根据本发明的各种不同实施方式，所述生成动态效果页面的方法可进一步包括：获取用户开发的动画效果代码；解析所述动画效果代码得到动画效果。由此，可以实现自定义添加动画效果。
根据本发明的一种实施方式，所述生成动态效果页面的系统可包括：获取模块，用于获得多图层图片；第一生成模块，用于基于获得的多图层图片生成图层信息文件；第二生成模块，用于根据所述图层信息文件生成静态页面；第三生成模块，用于执行下述操作：通过向所述静态页面添加动画效果，生成动态效果页面。
在本发明的可选实施方式中，所述第一生成模块包括：获取单元，用于获取所述多图层图片的整体信息和各图层的图层信息；保存单元，用于将获取的所述整体信息和图层信息保存到图片数据中；生成单元，基于所述图片数据生成图层信息文件。
可选地，所述生成单元基于所述图片数据生成图层信息文件可包括：根据所述图片数据获得图层分组的层级和顺序；依照获得的图层分组的层级和顺序生成图层数组树，其中，所述图层数组树的各节点存储图层信息；将生成的图层数据树保存为图层信息文件。此外，在其他可选实施方式中，所述生成单元基于所述图片数据生成图层信息文件还可包括：对所述图层信息进行去重和装饰处理。
在本发明的可选实施方式中，所述第二生成模块包括：第一渲染单元，用于执行下述处理：按照所述图层数组树的层级，将所述图层数组树渲染为对应层级的DOM结构；第二渲染单元，用于执行下述处理：针对所述图层数组树的每个节点，根据该节点存储的图层信息渲染所述DOM结构对应的样式，得到静态页面。
在本发明的可选实施方式中，所述生成单元基于所述图片数据生成图层信息文件还包括对所述图层文件中的图层信息进行分组。进一步，可选地，所述第三生成模块可以包括：第一分组单元，用于根据所述图层信息的分组对所述DOM结构进行分组；第一添加单元，用于对所述DOM结构的分组添加动画效果以生成动态效果页面。
作为选择，在本发明的其他实施方式中，所述第三生成模块可包括：第二分组单元，用于对所述DOM结构进行分组；第二添加单元，用于对所述DOM结构的分组添加动画效果以生成动态效果页面。
此外，根据本发明的各种不同实施方式，所述生成动态效果页面的系统还包括：自定义模块，用于执行下述处理：获取用户开发的动画效果代码，并解析所述动画效果代码得到动画效果。
根据本发明实施方式，改进了可上传的多图层图片的格式要求，不仅能分析PSD文件的图层信息，也可以分析其他类型多图层图片的图层信息。由于现在大家对有动画效果的页面需求更大，在生成静态页面后，增加了系统和装置里可配置动画效果的选项。自动化的开发方式节省人力成本，同时规避了人工开发不准确带来的一些问题。
附图说明
图1是根据本发明一种实施方式的生成动态效果页面方法的流程示意图；
图2是根据本发明实施例二的生成动态效果页面方法的流程示意图；
图3是根据本发明实施例三的生成动态效果页面方法的流程示意图；
图4是根据本发明实施例四的生成动态效果页面方法的流程示意图；
图5是根据本发明实施例五的生成动态效果页面方法的流程示意图；
图6是根据本发明实施方式的生成动态效果页面的系统的结构示意图；
图7是图6所示系统中所述图片解析模块的结构示意图；
图8是图6所示系统中所述图片解析模块另一实施方式的结构示意图；
图9是图6所示系统中所述图层分析模块的结构示意图；
图10是根据本发明所述生成动态效果页面的系统又一实施方式的结构示意图；
图11是图6所示系统中所述动态页面生成模块的结构示意图；
图12是根据本发明另一种实施方式的生成动态效果页面方法的流程示意图；
图13是根据本发明另一种实施方式的生成动态效果页面的系统的结构示意图。
具体实施方式
以下结合附图和具体实施方式对本发明的各个方面进行详细阐述。其中，众所周知的模块、单元及其相互之间的连接、链接、通信或操作没有示出或未作详细说明。并且，所描述的特征、架构或功能可在一个或一个以上实施方式中以任何方式组合。本领域技术人员应当理解，下述的各种实施方式只用于举例说明，而非用于限制本发明的保护范围。还可以容易理解，本文所述和附图所示的各实施方式中的模块或单元或处理方式可以按各种不同配置进行组合和设计。
实施例1：
图1是根据本发明一种实施方式的生成动态效果页面方法的流程示意图；参见图1，所述方法包括：
步骤S11，根据获取的图片，对所述图片进行解析得到图层信息文件；
步骤S12，对所述图层信息进行分析并生成静态页面；
步骤S13，通过选择的动态效果语言，将所述静态页面生成为动态效果页面。
实施本发明的各种实施方式具有以下有益效果：改进了可上传的多图层图片的格式要求，不仅能分析psd文件的图层信息，也可以分析其他类型多图层图片的图层信息；生成动态效果的效率明显提高，满足当前动态效果页面需求大的要求；自动化的开发方式节省人力成本，同时规避了人工开发不准确带来的一些问题。
实施例2：
图2是根据本发明实施例二的生成动态效果页面方法的流程示意图；参见图2，所述方法包括：
步骤S211，根据所述图片的图片格式，对所述图片执行相应的图片信息处理得到图片信息；
步骤S212，对所述图片信息进行图层分析得到图层信息文件，并对所述图层信息文件进行存储；
步骤S22，对所述图层信息进行分析并生成静态页面；
步骤S23，通过选择的动态效果语言，将所述静态页面生成为动态效果页面。
其中，步骤S211中，通过图片文件的后缀名，判断是哪种图片格式，如果不是多图层图片，则返回失败，提示用户格式不正确，反之则执行相应格式图片对应的程序。步骤S212中，每张图片在存储的时候都会把图片整体的信息(宽、高等)和各图层的信息(宽、高、左右距离、颜色、字号等)按照该图片指定的格式保存在图片数据中，程序会根据不同的图片格式，分别采用不同的方法获取这些信息。
实施例3：
图3是根据本发明实施例三的生成动态效果页面方法的流程示意图；参见图3，所述方法包括：
步骤S311，根据所述图片的图片格式，对所述图片执行相应的图片信息处理得到图片信息；
步骤S312，对所述图片信息进行图层分析得到图层信息文件，对所述图层信息文件进行去重装饰处理，并对所述图层信息文件进行存储；
步骤S32，对所述图层信息进行分析并生成静态页面；
步骤S33，通过选择的动态效果语言，将所述静态页面生成为动态效果页面。
其中，在步骤S312中，分析图片的数据采用深度优先搜索或者广度优先搜索算法，根据图层分组的层级和顺序，先生成所有图层的数组树，同时每个图层分别是一个数组，图层数组里用key:value的数组来存储图层的各种信息。
另外，在该步骤中，对图片信息进行图层分析得到图层信息文件之后可对所述图层信息文件进行去重装饰处理，即先删除其他完全相同的图层信息，删除空的图层信息等。
实施例4：
图4是根据本发明实施例四的生成动态效果页面方法的流程示意图；参见图4，所述方法包括：
步骤S41，根据获取的图片，对所述图片进行解析得到图层信息文件；
步骤S42，分析所述图层信息文件，遍历dom树，生成dom树结构，再根据图层属性渲染dom样式，生成所述静态页面；
步骤S43，通过选择的动态效果语言，将所述静态页面生成为动态效果页面。
其中，步骤S42中，采用深度搜索或者广度搜索算法，先遍历整个图层数组树，按照数组的层级分别渲染为对应层级的DOM结构。同时，针对每个树结构的节点(即每个图层)，会根据存储的图层信息，渲染DOM结构对应的样式，最终生成所述静态页面。
在执行步骤S42之前或之后，还可对所述图层信息进行自定义分组处理。该步骤作为优选步骤，对图层进行自定义分组的目的是为了方便之后给每一组增加动画效果，例如：某块区域都需要从左飞入这样一个动画，很多图层的动画效果都是一样的，分组之后配置动画更快。也可以在页面生成后进行该步骤的自定义分组处理，用户信息即用户添加的分组信息。
实施例5：
图5是根据本发明实施例五的生成动态效果页面方法的流程示意图；参见图5，所述方法包括：
步骤S51，根据获取的图片，对所述图片进行解析得到图层信息文件；
步骤S52，对所述图层信息进行分析并生成静态页面；
步骤S531，选择动态效果语言的开发代码；
步骤S532，将动态效果添加到自定义动画库中，使得所述静态页面生成为动态效果页面。
所述步骤S531中包括：用户选择开发动画效果的语言，如果系统支持该语言(例如：Js、css、go等)，则执行步骤S532中；如果系统不支持则提示用户切换其他语言(例如：通过下拉菜单来切换)，则根据技术和需求的更新，持续维护和更新语言库(主要采用人工更新的方式，如果某些语言库用的是开源库，例如：npm上的开源库，可以定期执行更新脚本)。之后，提供用户编辑和开发动画效果代码的页面。解析用户开发的代码，如果可用，则把该效果添加到用户自定义动画库中，如果不可用，则返回上一步骤，并提示用户重新开发。
所述步骤S532中，所述自定义动画库中内置各种动画效果，包括但不限于飞入、渐隐渐现、钟摆效果、延迟出现等，所有的动画效果，都可以设置各类属性，例如飞入的时间，是否有惯性，惯性时间，动画时间采用哪种函数(线性、非线性或者高阶函数)等等。本系统会根据技术和需求的更新，人工维护动画库。同时，本系统支持用户自定义添加动画效果，支持但不限于JavaScript、flash等现有或未来有的语言来开发动画效果。
实施本发明的各种实施方式具有以下有益效果：改进了可上传的多图层图片的格式要求，不仅能分析psd文件的图层信息，也可以分析其他类型多图层图片的图层信息；生成动态效果的效率明显提高，满足当前动态效果页面需求大的要求；自动化的开发方式节省人力成本，同时规避了人工开发不准确带来的一些问题。
实施例6：
图6是根据本发明实施方式的生成动态效果页面的系统的结构示意图；参见图6，所述系统包括：
图片解析模块100，用于根据获取的图片，对所述图片进行解析得到图层信息文件；
图层分析模块200，用于对所述图层信息进行分析并生成静态页面；
动态页面生成模块300，用于通过选择的动态效果语言，将所述静态页面生成为动态效果页面。
实施本发明的各种实施方式具有以下有益效果：改进了可上传的多图层图片的格式要求，不仅能分析psd文件的图层信息，也可以分析其他类型多图层图片的图层信息；生成动态效果的效率明显提高，满足当前动态效果页面需求大的要求；自动化的开发方式节省人力成本，同时规避了人工开发不准确带来的一些问题。
实施例7：
根据本实施例，所述生成动态效果页面的系统包括：
图片解析模块100，用于根据获取的图片，对所述图片进行解析得到图层信息文件；
图层分析模块200，用于对所述图层信息进行分析并生成静态页面；
动态页面生成模块300，用于通过选择的动态效果语言，将所述静态页面生成为动态效果页面。
图7是图6所示系统中所述图片解析模块的结构示意图；其中，如图7所示，所述图片解析模块100包括：
图片处理单元110，用于根据所述图片的图片格式，对所述图片执行相应的图片信息处理得到图片信息；
图层存储单元120，用于对所述图片信息进行图层分析得到图层信息文件，并对所述图层信息文件进行存储。
执行图片处理单元110时，通过图片文件的后缀名，判断是哪种图片格式，如果不是多图层图片，则返回失败，提示用户格式不正确，反之则执行相应格式图片对应的程序。执行图层存储单元120时，由于每张图片在存储的时候都会把图片整体的信息(宽、高等)和各图层的信息(宽、高、左右距离、颜色、字号等)按照该图片指定的格式保存在图片数据中，程序会根据不同的图片格式，分别采用不同的方法获取这些信息。
实施例8：
根据本实施例，所述生成动态效果页面的系统包括：
图片解析模块100，用于根据获取的图片，对所述图片进行解析得到图层信息文件；
图层分析模块200，用于对所述图层信息进行分析并生成静态页面；
动态页面生成模块300，用于通过选择的动态效果语言，将所述静态页面生成为动态效果页面。
图8是图6所示系统中所述图片解析模块另一实施方式的结构示意图；其中，如图8所示，所述图片解析模块100包括：
图片处理单元110，用于根据所述图片的图片格式，对所述图片执行相应的图片信息处理得到图片信息；
图层存储单元120，用于对所述图片信息进行图层分析得到图层信息文件，并对所述图层信息文件进行存储；
去重装饰单元130，用于对所述图层信息文件进行去重装饰处理。
图层存储单元120可分析图片的数据采用深度优先搜索或者广度优先搜索算法，根据图层分组的层级和顺序，先生成所有图层的数组树，同时每个图层分别是一个数组，图层数组里用key:value的数组来存储图层的各种信息。
去重装饰单元130可在图片信息进行图层分析得到图层信息文件之后可对所述图层信息文件进行去重装饰处理，即先删除其他完全相同的图层信息，删除空的图层信息等。
实施例9：
根据本实施例，所述生成动态效果页面的系统包括：
图片解析模块100，用于根据获取的图片，对所述图片进行解析得到图层信息文件；
图层分析模块200，用于对所述图层信息进行分析并生成静态页面；
动态页面生成模块300，用于通过选择的动态效果语言，将所述静态页面生成为动态效果页面。
图9是图6所示系统中所述图层分析模块的结构示意图；其中，如图9所示，所述图层分析模块200包括：
图层信息分析单元210，用于分析所述图层信息文件，遍历dom树，生成dom树结构；
静态页面生成单元220，用于根据图层属性渲染dom样式，生成所述静态页面。
其中，图层信息分析单元210采用深度搜索或者广度搜索算法，先遍历整个图层数组树，按照数组的层级分别渲染为对应层级的DOM结构。同时，针对每个树结构的节点(即每个图层)，会根据存储的图层信息，渲染DOM结构对应的样式，最终生成所述静态页面。
实施例10：
图10是根据本发明所述生成动态效果页面的系统又一实施方式的结构示意图；参见图10，根据本实施例，所述生成动态效果页面的系统包括：
图片解析模块100，用于根据获取的图片，对所述图片进行解析得到图层信息文件；
图层分析模块200，用于对所述图层信息进行分析并生成静态页面；
分组处理模块250，用于对所述图层信息进行分析并生成静态页面之前或之后，对所述图层信息进行自定义分组处理。
动态页面生成模块300，用于通过选择的动态效果语言，将所述静态页面生成为动态效果页面。
其中，所述分组处理模块250还可对所述图层信息进行分析并生成静态页面之前或之后，对所述图层信息进行自定义分组处理。对图层进行自定义分组的目的是为了方便之后给每一组增加动画效果，例如：某块区域都需要从左飞入这样一个动画，很多图层的动画效果都是一样的，分组之后配置动画更快。也可以在页面生成后进行该步骤的自定义分组处理，用户信息即用户添加的分组信息。
实施例11：
根据本实施例，所述生成动态效果页面的系统包括：
图片解析模块100，用于根据获取的图片，对所述图片进行解析得到图层信息文件；
图层分析模块200，用于对所述图层信息进行分析并生成静态页面；
动态页面生成模块300，用于通过选择的动态效果语言，将所述静态页面生成为动态效果页面。
图11是图6所示系统中所述动态页面生成模块的结构示意图；其中，如图9所示，所述动态页面生成模块300包括：
代码选择单元310，用于选择的动态效果语言的开发代码；
动态生成单元320，用于将动态效果添加到自定义动画库中，使得所述静态页面生成为动态效果页面。
所述代码选择单元310包括：用户选择开发动画效果的语言，如果系统支持该语言(例如：Js、css、go等)，则执行步骤S532中；如果系统不支持则提示用户切换其他语言(例如：通过下拉菜单来切换)，则根据技术和需求的更新，持续维护和更新语言库(主要采用人工更新的方式，如果某些语言库用的是开源库，例如：npm上的开源库，可以定期执行更新脚本)。之后，提供用户编辑和开发动画效果代码的页面。解析用户开发的代码，如果可用，则把该效果添加到用户自定义动画库中，如果不可用，则返回上一步骤，并提示用户重新开发。
所述动态生成单元320中，所述自定义动画库中内置各种动画效果，包括但不限于飞入、渐隐渐现、钟摆效果、延迟出现等，所有的动画效果，都可以设置各类属性，例如飞入的时间，是否有惯性，惯性时间，动画时间采用哪种函数(线性、非线性或者高阶函数)等等。本系统会根据技术和需求的更新，人工维护动画库。同时，本系统支持用户自定义添加动画效果，支持但不限于JavaScript、flash等现有或未来有的语言来开发动画效果。
实施本发明的各种实施方式具有以下有益效果：改进了可上传的多图层图片的格式要求，不仅能分析psd文件的图层信息，也可以分析其他类型多图层图片的图层信息；生成动态效果的效率明显提高，满足当前动态效果页面需求大的要求；自动化的开发方式节省人力成本，同时规避了人工开发不准确带来的一些问题。
通过采用本发明的实施方式通过采用本发明，可有效提高多个模块级联交互状态下消息追踪和处理的效率，缩短日志排查时间，降低对大型项目的理解复杂度。
其他实施例：
图12示出了根据本发明的另一种实施方式的生成动态效果页面的方法。根据本实施方式，所述方法可以包括：
1200：获得多图层图片；
1220：基于获得的多图层图片生成图层信息文件；
1240：根据所述图层信息文件生成静态页面；
1260：通过向所述静态页面添加动画效果，生成动态效果页面。
根据本发明实施方式，对处理的多图层图片的类型不做限制，并且支持通过对每个图层添加动画的配置来生成有动画效果的页面，通过自动化技术生成页面，减少人工开发产生的纰漏。
在本发明的可选实施方式中，处理1220可以包括：获取所述多图层图片的整体信息和各图层的图层信息；将获取的所述整体信息和图层信息保存到图片数据中；基于所述图片数据生成图层信息文件。其中，可选地，基于所述图片数据生成图层信息文件可包括：根据所述图片数据获得图层分组的层级和顺序；依照获得的图层分组的层级和顺序生成图层数组树，其中，所述图层数组树的各节点存储图层信息；将生成的图层数据树保存为图层信息文件。在本发明的另一优选实施方式中，基于所述图片数据生成图层信息文件还可包括：对所述图层信息进行去重和装饰处理。
在本发明的可选实施方式中，处理1240可包括：按照所述图层数组树的层级，将所述图层数组树渲染为对应层级的DOM结构；针对所述图层数组树的每个节点，根据该节点存储的图层信息渲染所述DOM结构对应的样式，得到静态页面。
在本发明的另一种实施方式中，上述基于所述图片数据生成图层信息文件还可包括：对所述图层文件中的图层信息进行分组。相应地，在本发明的又一实施方式中，处理1260可以包括：根据所述图层信息的分组对所述DOM结构进行分组；对所述DOM结构的分组添加动画效果以生成动态效果页面。
作为选择，在本发明的另一实施方式中，处理1260可以包括：对所述DOM结构进行分组；对所述DOM结构的分组添加动画效果以生成动态效果页面。
根据本发明的又一可选实施方式，所述生成动态效果页面的方法可进一步包括：获取用户开发的动画效果代码；解析所述动画效果代码得到动画效果。由此，可以实现自定义添加动画效果。
图13示出了根据本发明的另一种实施方式的生成动态效果页面的系统。在本发明实施方式中，所述系统可包括：获取模块1310，用于获得多图层图片；第一生成模块1330，用于基于获得的多图层图片生成图层信息文件；第二生成模块1350，用于根据所述图层信息文件生成静态页面；第三生成模块1360，用于执行下述操作：通过向所述静态页面添加动画效果，生成动态效果页面。
在本发明的可选实施方式中，所述第一生成模块1330包括：获取单元，用于获取所述多图层图片的整体信息和各图层的图层信息；保存单元，用于将获取的所述整体信息和图层信息保存到图片数据中；生成单元，基于所述图片数据生成图层信息文件。
可选地，所述生成单元基于所述图片数据生成图层信息文件可包括：根据所述图片数据获得图层分组的层级和顺序；依照获得的图层分组的层级和顺序生成图层数组树，其中，所述图层数组树的各节点存储图层信息；将生成的图层数据树保存为图层信息文件。此外，在其他可选实施方式中，所述生成单元基于所述图片数据生成图层信息文件还可包括：对所述图层信息进行去重和装饰处理。
在本发明的可选实施方式中，所述第二生成模块1350可以包括：第一渲染单元，用于执行下述处理：按照所述图层数组树的层级，将所述图层数组树渲染为对应层级的DOM结构；第二渲染单元，用于执行下述处理：针对所述图层数组树的每个节点，根据该节点存储的图层信息渲染所述DOM结构对应的样式，得到静态页面。
在本发明的可选实施方式中，所述生成单元基于所述图片数据生成图层信息文件还包括对所述图层文件中的图层信息进行分组。进一步，可选地，所述第三生成模块1370可以包括：第一分组单元，用于根据所述图层信息的分组对所述DOM结构进行分组；第一添加单元，用于对所述DOM结构的分组添加动画效果以生成动态效果页面。
作为选择，在本发明的其他实施方式中，所述第三生成模块1370可包括：第二分组单元，用于对所述DOM结构进行分组；第二添加单元，用于对所述DOM结构的分组添加动画效果以生成动态效果页面。
此外，根据本发明的各种不同实施方式，所述生成动态效果页面的系统还包括：自定义模块，用于执行下述处理：获取用户开发的动画效果代码，并解析所述动画效果代码得到动画效果。
根据本发明实施方式，改进了可上传的多图层图片的格式要求，不仅能分析PSD文件的图层信息，也可以分析其他类型多图层图片的图层信息。由于现在大家对有动画效果的页面需求更大，在生成静态页面后，增加了系统和装置里可配置动画效果的选项。自动化的开发方式节省人力成本，同时规避了人工开发不准确带来的一些问题。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本发明可借助软件结合硬件平台的方式来实现。基于这样的理解，本发明的技术方案对背景技术做出贡献的全部或者部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，智能手机或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。
本发明说明书中使用的术语和措辞仅仅为了举例说明，并不意味构成限定。本领域技术人员应当理解，在不脱离所公开的实施方式的基本原理的前提下，对上述实施方式中的各细节可进行各种变化。因此，本发明的范围只由权利要求确定，在权利要求中，除非另有说明，所有的术语应按最宽泛合理的意思进行理解。
Claims (16)
1.一种生成动态效果页面的方法，其特征在于，所述方法包括：
获得多图层图片；
基于获得的多图层图片的图片格式得到图片信息，并生成图层信息文件；
根据所述图层信息文件生成静态页面；
在生成静态页面之前或之后，基于用户信息对所述图层进行自定义分组处理，所述用户信息是所述用户添加的分组信息；
基于所述分组向所述静态页面添加动画效果，生成动态效果页面。
2.根据权利要求1所述的方法，其特征在于，基于获得的多图层图片的图片格式得到图片信息，并生成图层信息文件包括：
获取所述多图层图片的整体信息和各图层的图层信息；
将获取的所述整体信息和图层信息保存到图片数据中；
基于所述图片数据生成图层信息文件。
3.根据权利要求2所述的方法，其特征在于，基于所述图片数据生成图层信息文件包括：
根据所述图片数据获得图层分组的层级和顺序；
依照获得的图层分组的层级和顺序生成图层数组树，其中，所述图层数组树的各节点存储图层信息；
将生成的图层数据树保存为图层信息文件。
4.根据权利要求3所述的方法，其特征在于，基于所述图片数据生成图层信息文件还包括：对所述图层信息进行去重和装饰处理。
5.根据权利要求3所述的方法，其特征在于，根据所述图层信息文件生成静态页面包括：
按照所述图层数组树的层级，将所述图层数组树渲染为对应层级的DOM结构；
针对所述图层数组树的每个节点，根据该节点存储的图层信息渲染所述DOM结构对应的样式，得到静态页面。
6.根据权利要求5所述的方法，其特征在于，通过向所述静态页面添加动画效果，生成动态效果页面包括：
根据所述图层信息的分组对所述DOM结构进行分组；
对所述DOM结构的分组添加动画效果以生成动态效果页面。
7.根据权利要求6所述的方法，其特征在于，通过向所述静态页面添加动画效果，生成动态效果页面包括：
对所述DOM结构进行分组；
对所述DOM结构的分组添加动画效果以生成动态效果页面。
8.根据权利要求1所述的方法，其特征在于，还包括：
获取用户开发的动画效果代码；
解析所述动画效果代码得到动画效果。
9.一种生成动态效果页面的系统，其特征在于，所述系统包括：
获取模块，用于获得多图层图片；
第一生成模块，用于基于获得的多图层图片的图片格式得到图片信息，并生成图层信息文件；
第二生成模块，用于根据所述图层信息文件生成静态页面；
分组处理模块，用于在生成静态页面之前或之后，基于用户信息对所述图层进行自定义分组处理，所述用户信息是所述用户添加的分组信息；
第三生成模块，用于执行下述操作：基于所述分组向通过向所述静态页面添加动画效果，生成动态效果页面。
10.根据权利要求9所述的系统，其特征在于，第一生成模块包括：
获取单元，用于获取所述多图层图片的整体信息和各图层的图层信息；
保存单元，用于将获取的所述整体信息和图层信息保存到图片数据中；
生成单元，基于所述图片数据生成图层信息文件。
11.根据权利要求10所述的系统，其特征在于，所述生成单元基于所述图片数据生成图层信息文件包括：
根据所述图片数据获得图层分组的层级和顺序；
依照获得的图层分组的层级和顺序生成图层数组树，其中，所述图层数组树的各节点存储图层信息；
将生成的图层数据树保存为图层信息文件。
12.根据权利要求11所述的系统，其特征在于，所述生成单元基于所述图片数据生成图层信息文件还包括：对所述图层信息进行去重和装饰处理。
13.根据权利要求11所述的系统，其特征在于，所述第二生成模块包括：
第一渲染单元，用于执行下述处理：按照所述图层数组树的层级，将所述图层数组树渲染为对应层级的DOM结构；
第二渲染单元，用于执行下述处理：针对所述图层数组树的每个节点，根据该节点存储的图层信息渲染所述DOM结构对应的样式，得到静态页面。
14.根据权利要求13所述的系统，其特征在于，所述第三生成模块包括：
第一分组单元，用于根据所述图层信息的分组对所述DOM结构进行分组；
第一添加单元，用于对所述DOM结构的分组添加动画效果以生成动态效果页面。
15.根据权利要求13所述的系统，其特征在于，所述第三生成模块包括：
第二分组单元，用于对所述DOM结构进行分组；
第二添加单元，用于对所述DOM结构的分组添加动画效果以生成动态效果页面。
16.根据权利要求9所述的系统，其特征在于，还包括：
自定义模块，用于执行下述处理：获取用户开发的动画效果代码，并解析所述动画效果代码得到动画效果。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610815839.XA CN106469220B (zh) | 2016-09-09 | 2016-09-09 | 一种生成动态效果页面的方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610815839.XA CN106469220B (zh) | 2016-09-09 | 2016-09-09 | 一种生成动态效果页面的方法及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106469220A CN106469220A (zh) | 2017-03-01 |
| CN106469220B true CN106469220B (zh) | 2020-07-24 |
Family
ID=58230159
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610815839.XA Expired - Fee Related CN106469220B (zh) | 2016-09-09 | 2016-09-09 | 一种生成动态效果页面的方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106469220B (zh) |
Families Citing this family (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107454456B (zh) * | 2017-09-06 | 2020-09-08 | 武汉斗鱼网络科技有限公司 | 一种浮层元素的管理控制方法及系统 |
| CN108984172B (zh) * | 2018-05-31 | 2022-04-26 | 北京奇艺世纪科技有限公司 | 一种界面文件的生成方法及装置 |
| CN109656552B (zh) * | 2018-11-01 | 2022-02-15 | 中交第二航务工程局有限公司 | 一种基于盒子模型的设计图自动转换成网页的方法 |
| CN109710258A (zh) * | 2018-12-28 | 2019-05-03 | 北京金山安全软件有限公司 | 微信小程序界面生成的方法及装置 |
| CN110245245A (zh) * | 2019-06-20 | 2019-09-17 | 菏泽学院 | 一种在平面设计中自动添加装饰元素的装置 |
| CN112418902A (zh) * | 2020-06-16 | 2021-02-26 | 上海哔哩哔哩科技有限公司 | 基于网页的多媒体合成方法和系统 |
| CN111562919A (zh) * | 2020-07-14 | 2020-08-21 | 成都市映潮科技股份有限公司 | 基于psd文件生成前端网页代码的方法、系统及存储介质 |
| CN113672227B (zh) * | 2021-08-30 | 2024-04-23 | 北京爱奇艺科技有限公司 | 用户界面代码生成方法、装置、电子设备及存储介质 |
| CN117910438B (zh) * | 2024-03-13 | 2024-06-21 | 江苏中威科技软件系统有限公司 | 一种动态版式文件dlf的生成装置 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104020984A (zh) * | 2013-02-28 | 2014-09-03 | 阿里巴巴集团控股有限公司 | 一种生成静态页面的方法及装置 |
| CN105094804A (zh) * | 2015-06-18 | 2015-11-25 | 北京奇虎科技有限公司 | 在页面中添加动画的方法和装置 |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102254049A (zh) * | 2011-08-29 | 2011-11-23 | 程向明 | 一种Web页设计系统及其构建方法 |
| CN102789474B (zh) * | 2012-04-12 | 2014-02-05 | 北京京东世纪贸易有限公司 | 处理网页数据的方法和装置 |
| CN105447096A (zh) * | 2015-11-09 | 2016-03-30 | 百度在线网络技术（北京）有限公司 | 网页生成方法及装置 |
-
2016
- 2016-09-09 CN CN201610815839.XA patent/CN106469220B/zh not_active Expired - Fee Related
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104020984A (zh) * | 2013-02-28 | 2014-09-03 | 阿里巴巴集团控股有限公司 | 一种生成静态页面的方法及装置 |
| CN105094804A (zh) * | 2015-06-18 | 2015-11-25 | 北京奇虎科技有限公司 | 在页面中添加动画的方法和装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106469220A (zh) | 2017-03-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106469220B (zh) | 一种生成动态效果页面的方法及系统 | |
| CN108279932B (zh) | 一种移动终端动态配置用户界面方法和装置 | |
| US20230083102A1 (en) | Systems and methods for conversion of web content into reusable templates and components | |
| CN104932889B (zh) | 页面可视化生成方法和装置 | |
| CN107092625B (zh) | 数据配置方法、数据处理方法及装置 | |
| CN107729475B (zh) | 网页元素采集方法、装置、终端与计算机可读存储介质 | |
| US20160283499A1 (en) | Webpage advertisement interception method, device and browser | |
| EP2728498A1 (en) | System and method for creation of templates | |
| CA2817554A1 (en) | Mobile content management system | |
| CN112286513A (zh) | 基于组件元数据的可视化设计方法和装置 | |
| CN112416363B (zh) | 一种前后端crud代码的生成方法及装置 | |
| US20160380915A1 (en) | Rules-Based Workflow Messaging | |
| CN111177618A (zh) | 网站搭建方法、装置、设备及计算机可读存储介质 | |
| CN105739963A (zh) | 生成网页的方法和装置 | |
| CN108108342A (zh) | 结构化文本的生成方法、检索方法及装置 | |
| CN106951231B (zh) | 一种计算机软件开发方法及装置 | |
| CN105094775B (zh) | 网页生成方法和装置 | |
| KR101950126B1 (ko) | 수학공식 처리방법, 장치, 설비 및 컴퓨터 저장 매체 | |
| CN103593414A (zh) | 一种浏览器中网页的展现方法和装置 | |
| KR20170073693A (ko) | 유사 그룹 요소 추출 | |
| CN111949607B (zh) | 一种udt文件的监控方法、系统和装置 | |
| CN110968314A (zh) | 一种页面生成方法及装置 | |
| CN117093386A (zh) | 页面截图方法、装置、计算机设备和存储介质 | |
| CN114756228A (zh) | 页面处理方法、装置、设备及存储介质 | |
| CN111539186A (zh) | 一种应用于html5的大数据树组件实现方法及系统 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: 100085 Beijing, Haidian District on the road to the information on the ground floor of the 1 to the 3 floor of the 2 floor, room 11, 202 Applicant after: Beijing Xingxuan Technology Co.,Ltd. Address before: 100085 Beijing, Haidian District on the road to the information on the ground floor of the 1 to the 3 floor of the 2 floor, room 11, 202 Applicant before: Beijing Xiaodu Information Technology Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20200724 |