本發(fā)明涉及圖片數(shù)據(jù)處理領(lǐng)域，更為具體而言，涉及一種生成動(dòng)態(tài)效果頁面的方法和系統(tǒng)。

背景技術(shù)：

隨著互聯(lián)網(wǎng)多元化的發(fā)展，動(dòng)態(tài)效果頁面技術(shù)正在不斷發(fā)展和應(yīng)用。常規(guī)的網(wǎng)站頁面開發(fā)流程是：工程師根據(jù)拿到的設(shè)計(jì)圖(多圖層圖片，主要是PSD(Photoshop軟件生成的多圖層圖片格式)文件)，通過HTML(超文本標(biāo)記語言)、CSS(層疊樣式表)等網(wǎng)站開發(fā)語言來開發(fā)靜態(tài)頁面，再應(yīng)用js(JavaScript)等腳本語言來開發(fā)頁面的動(dòng)態(tài)效果和交互。

具體地，在現(xiàn)有技術(shù)中，將待生成靜態(tài)頁面的PSD文件上傳，通過技術(shù)手段解析所述文件中各個(gè)圖層的屬性信息，包括但不限于定位、顏色、透明度、異形、字體、字色等等，將所述文件各圖層的屬性信息封裝成圖層信息數(shù)據(jù)；將圖層信息數(shù)據(jù)轉(zhuǎn)換成文檔對(duì)象模型DOM結(jié)構(gòu)，根據(jù)該DOM結(jié)構(gòu)生成用于描述頁面結(jié)構(gòu)的文件；導(dǎo)出所述圖片，和所述用于描述頁面結(jié)構(gòu)的文件保存為一個(gè)靜態(tài)頁面。如需動(dòng)態(tài)頁面，則需人工單獨(dú)開發(fā)動(dòng)態(tài)效果。

然而，本發(fā)明的發(fā)明人發(fā)現(xiàn)現(xiàn)有技術(shù)存在諸多缺陷：首先，多圖層的圖片類型很多，現(xiàn)有的技術(shù)只支持把PSD文件進(jìn)行轉(zhuǎn)換。其次，生成的頁面是靜態(tài)頁面，而現(xiàn)在大家對(duì)有動(dòng)畫效果的頁面的需求更大。最后，如果人工去開發(fā)頁面和動(dòng)畫，難免會(huì)有一些細(xì)微的偏差，導(dǎo)致開發(fā)完的頁面和設(shè)計(jì)圖有所差異。

技術(shù)實(shí)現(xiàn)要素：

為了解決上述技術(shù)問題，本發(fā)明實(shí)施方式提供了一種生成動(dòng)態(tài)效果頁面的方法和系統(tǒng)。

根據(jù)本發(fā)明的一種實(shí)施方式，所述生成動(dòng)態(tài)效果頁面的方法可以包括：獲得多圖層圖片；基于獲得的多圖層圖片生成圖層信息文件；根據(jù)所述圖層信息文件生成靜態(tài)頁面；通過向所述靜態(tài)頁面添加動(dòng)畫效果，生成動(dòng)態(tài)效果頁面。

根據(jù)本發(fā)明實(shí)施方式，處理多圖層圖片的類型不做限制，并且支持通過對(duì)每個(gè)圖層添加動(dòng)畫的配置來生成有動(dòng)畫效果的頁面，通過自動(dòng)化技術(shù)生成頁面，減少人工開發(fā)產(chǎn)生的紕漏。

在本發(fā)明的可選實(shí)施方式中，基于獲得的多圖層圖片生成圖層信息文件可以包括：獲取所述多圖層圖片的整體信息和各圖層的圖層信息；將獲取的所述整體信息和圖層信息保存到圖片數(shù)據(jù)中；基于所述圖片數(shù)據(jù)生成圖層信息文件。

其中，可選地，基于所述圖片數(shù)據(jù)生成圖層信息文件可包括：根據(jù)所述圖片數(shù)據(jù)獲得圖層分組的層級(jí)和順序；依照獲得的圖層分組的層級(jí)和順序生成圖層數(shù)組樹，其中，所述圖層數(shù)組樹的各節(jié)點(diǎn)存儲(chǔ)圖層信息；將生成的圖層數(shù)據(jù)樹保存為圖層信息文件。在本發(fā)明的另一優(yōu)選實(shí)施方式中，基于所述圖片數(shù)據(jù)生成圖層信息文件還可包括：對(duì)所述圖層信息進(jìn)行去重和裝飾處理。

在本發(fā)明的可選實(shí)施方式中，根據(jù)所述圖層信息文件生成靜態(tài)頁面可包括：按照所述圖層數(shù)組樹的層級(jí)，將所述圖層數(shù)組樹渲染為對(duì)應(yīng)層級(jí)的DOM結(jié)構(gòu)；針對(duì)所述圖層數(shù)組樹的每個(gè)節(jié)點(diǎn)，根據(jù)該節(jié)點(diǎn)存儲(chǔ)的圖層信息渲染所述DOM結(jié)構(gòu)對(duì)應(yīng)的樣式，得到靜態(tài)頁面。

在本發(fā)明的另一種實(shí)施方式中，上述基于所述圖片數(shù)據(jù)生成圖層信息文件還可包括：對(duì)所述圖層文件中的圖層信息進(jìn)行分組。相應(yīng)地，在本發(fā)明的又一實(shí)施方式中，通過向所述靜態(tài)頁面添加動(dòng)畫效果，生成動(dòng)態(tài)效果頁面可以包括：根據(jù)所述圖層信息的分組對(duì)所述DOM結(jié)構(gòu)進(jìn)行分組；對(duì)所述DOM結(jié)構(gòu)的分組添加動(dòng)畫效果以生成動(dòng)態(tài)效果頁面。

作為選擇，在本發(fā)明的另一實(shí)施方式中，通過向所述靜態(tài)頁面添加動(dòng)畫效果，生成動(dòng)態(tài)效果頁面可以包括：對(duì)所述DOM結(jié)構(gòu)進(jìn)行分組；對(duì)所述DOM結(jié)構(gòu)的分組添加動(dòng)畫效果以生成動(dòng)態(tài)效果頁面。

根據(jù)本發(fā)明的各種不同實(shí)施方式，所述生成動(dòng)態(tài)效果頁面的方法可進(jìn)一步包括：獲取用戶開發(fā)的動(dòng)畫效果代碼；解析所述動(dòng)畫效果代碼得到動(dòng)畫效果。由此，可以實(shí)現(xiàn)自定義添加動(dòng)畫效果。

根據(jù)本發(fā)明的一種實(shí)施方式，所述生成動(dòng)態(tài)效果頁面的系統(tǒng)可包括：獲取模塊，用于獲得多圖層圖片；第一生成模塊，用于基于獲得的多圖層圖片生成圖層信息文件；第二生成模塊，用于根據(jù)所述圖層信息文件生成靜態(tài)頁面；第三生成模塊，用于執(zhí)行下述操作：通過向所述靜態(tài)頁面添加動(dòng)畫效果，生成動(dòng)態(tài)效果頁面。

在本發(fā)明的可選實(shí)施方式中，所述第一生成模塊包括：獲取單元，用于獲取所述多圖層圖片的整體信息和各圖層的圖層信息；保存單元，用于將獲取的所述整體信息和圖層信息保存到圖片數(shù)據(jù)中；生成單元，基于所述圖片數(shù)據(jù)生成圖層信息文件。

可選地，所述生成單元基于所述圖片數(shù)據(jù)生成圖層信息文件可包括：根據(jù)所述圖片數(shù)據(jù)獲得圖層分組的層級(jí)和順序；依照獲得的圖層分組的層級(jí)和順序生成圖層數(shù)組樹，其中，所述圖層數(shù)組樹的各節(jié)點(diǎn)存儲(chǔ)圖層信息；將生成的圖層數(shù)據(jù)樹保存為圖層信息文件。此外，在其他可選實(shí)施方式中，所述生成單元基于所述圖片數(shù)據(jù)生成圖層信息文件還可包括：對(duì)所述圖層信息進(jìn)行去重和裝飾處理。

在本發(fā)明的可選實(shí)施方式中，所述第二生成模塊包括：第一渲染單元，用于執(zhí)行下述處理：按照所述圖層數(shù)組樹的層級(jí)，將所述圖層數(shù)組樹渲染為對(duì)應(yīng)層級(jí)的DOM結(jié)構(gòu)；第二渲染單元，用于執(zhí)行下述處理：針對(duì)所述圖層數(shù)組樹的每個(gè)節(jié)點(diǎn)，根據(jù)該節(jié)點(diǎn)存儲(chǔ)的圖層信息渲染所述DOM結(jié)構(gòu)對(duì)應(yīng)的樣式，得到靜態(tài)頁面。

在本發(fā)明的可選實(shí)施方式中，所述生成單元基于所述圖片數(shù)據(jù)生成圖層信息文件還包括對(duì)所述圖層文件中的圖層信息進(jìn)行分組。進(jìn)一步，可選地，所述第三生成模塊可以包括：第一分組單元，用于根據(jù)所述圖層信息的分組對(duì)所述DOM結(jié)構(gòu)進(jìn)行分組；第一添加單元，用于對(duì)所述DOM結(jié)構(gòu)的分組添加動(dòng)畫效果以生成動(dòng)態(tài)效果頁面。

作為選擇，在本發(fā)明的其他實(shí)施方式中，所述第三生成模塊可包括：第二分組單元，用于對(duì)所述DOM結(jié)構(gòu)進(jìn)行分組；第二添加單元，用于對(duì)所述DOM結(jié)構(gòu)的分組添加動(dòng)畫效果以生成動(dòng)態(tài)效果頁面。

此外，根據(jù)本發(fā)明的各種不同實(shí)施方式，所述生成動(dòng)態(tài)效果頁面的系統(tǒng)還包括：自定義模塊，用于執(zhí)行下述處理：獲取用戶開發(fā)的動(dòng)畫效果代碼，并解析所述動(dòng)畫效果代碼得到動(dòng)畫效果。

根據(jù)本發(fā)明實(shí)施方式，改進(jìn)了可上傳的多圖層圖片的格式要求，不僅能分析PSD文件的圖層信息，也可以分析其他類型多圖層圖片的圖層信息。由于現(xiàn)在大家對(duì)有動(dòng)畫效果的頁面需求更大，在生成靜態(tài)頁面后，增加了系統(tǒng)和裝置里可配置動(dòng)畫效果的選項(xiàng)。自動(dòng)化的開發(fā)方式節(jié)省人力成本，同時(shí)規(guī)避了人工開發(fā)不準(zhǔn)確帶來的一些問題。

附圖說明

圖1是根據(jù)本發(fā)明一種實(shí)施方式的生成動(dòng)態(tài)效果頁面方法的流程示意圖；

圖2是根據(jù)本發(fā)明實(shí)施例二的生成動(dòng)態(tài)效果頁面方法的流程示意圖；

圖3是根據(jù)本發(fā)明實(shí)施例三的生成動(dòng)態(tài)效果頁面方法的流程示意圖；

圖4是根據(jù)本發(fā)明實(shí)施例四的生成動(dòng)態(tài)效果頁面方法的流程示意圖；

圖5是根據(jù)本發(fā)明實(shí)施例五的生成動(dòng)態(tài)效果頁面方法的流程示意圖；

圖6是根據(jù)本發(fā)明實(shí)施方式的生成動(dòng)態(tài)效果頁面的系統(tǒng)的結(jié)構(gòu)示意圖；

圖7是圖6所示系統(tǒng)中所述圖片解析模塊的結(jié)構(gòu)示意圖；

圖8是圖6所示系統(tǒng)中所述圖片解析模塊另一實(shí)施方式的結(jié)構(gòu)示意圖；

圖9是圖6所示系統(tǒng)中所述圖層分析模塊的結(jié)構(gòu)示意圖；

圖10是根據(jù)本發(fā)明所述生成動(dòng)態(tài)效果頁面的系統(tǒng)又一實(shí)施方式的結(jié)構(gòu)示意圖；

圖11是圖6所示系統(tǒng)中所述動(dòng)態(tài)頁面生成模塊的結(jié)構(gòu)示意圖；

圖12是根據(jù)本發(fā)明另一種實(shí)施方式的生成動(dòng)態(tài)效果頁面方法的流程示意圖；

圖13是根據(jù)本發(fā)明另一種實(shí)施方式的生成動(dòng)態(tài)效果頁面的系統(tǒng)的結(jié)構(gòu)示意圖。

具體實(shí)施方式

以下結(jié)合附圖和具體實(shí)施方式對(duì)本發(fā)明的各個(gè)方面進(jìn)行詳細(xì)闡述。其中，眾所周知的模塊、單元及其相互之間的連接、鏈接、通信或操作沒有示出或未作詳細(xì)說明。并且，所描述的特征、架構(gòu)或功能可在一個(gè)或一個(gè)以上實(shí)施方式中以任何方式組合。本領(lǐng)域技術(shù)人員應(yīng)當(dāng)理解，下述的各種實(shí)施方式只用于舉例說明，而非用于限制本發(fā)明的保護(hù)范圍。還可以容易理解，本文所述和附圖所示的各實(shí)施方式中的模塊或單元或處理方式可以按各種不同配置進(jìn)行組合和設(shè)計(jì)。

實(shí)施例1：

圖1是根據(jù)本發(fā)明一種實(shí)施方式的生成動(dòng)態(tài)效果頁面方法的流程示意圖；參見圖1，所述方法包括：

步驟S11，根據(jù)獲取的圖片，對(duì)所述圖片進(jìn)行解析得到圖層信息文件；

步驟S12，對(duì)所述圖層信息進(jìn)行分析并生成靜態(tài)頁面；

步驟S13，通過選擇的動(dòng)態(tài)效果語言，將所述靜態(tài)頁面生成為動(dòng)態(tài)效果頁面。

實(shí)施本發(fā)明的各種實(shí)施方式具有以下有益效果：改進(jìn)了可上傳的多圖層圖片的格式要求，不僅能分析psd文件的圖層信息，也可以分析其他類型多圖層圖片的圖層信息；生成動(dòng)態(tài)效果的效率明顯提高，滿足當(dāng)前動(dòng)態(tài)效果頁面需求大的要求；自動(dòng)化的開發(fā)方式節(jié)省人力成本，同時(shí)規(guī)避了人工開發(fā)不準(zhǔn)確帶來的一些問題。

實(shí)施例2：

圖2是根據(jù)本發(fā)明實(shí)施例二的生成動(dòng)態(tài)效果頁面方法的流程示意圖；參見圖2，所述方法包括：

步驟S211，根據(jù)所述圖片的圖片格式，對(duì)所述圖片執(zhí)行相應(yīng)的圖片信息處理得到圖片信息；

步驟S212，對(duì)所述圖片信息進(jìn)行圖層分析得到圖層信息文件，并對(duì)所述圖層信息文件進(jìn)行存儲(chǔ)；

步驟S22，對(duì)所述圖層信息進(jìn)行分析并生成靜態(tài)頁面；

步驟S23，通過選擇的動(dòng)態(tài)效果語言，將所述靜態(tài)頁面生成為動(dòng)態(tài)效果頁面。

其中，步驟S211中，通過圖片文件的后綴名，判斷是哪種圖片格式，如果不是多圖層圖片，則返回失敗，提示用戶格式不正確，反之則執(zhí)行相應(yīng)格式圖片對(duì)應(yīng)的程序。步驟S212中，每張圖片在存儲(chǔ)的時(shí)候都會(huì)把圖片整體的信息(寬、高等)和各圖層的信息(寬、高、左右距離、顏色、字號(hào)等)按照該圖片指定的格式保存在圖片數(shù)據(jù)中，程序會(huì)根據(jù)不同的圖片格式，分別采用不同的方法獲取這些信息。

實(shí)施例3：

圖3是根據(jù)本發(fā)明實(shí)施例三的生成動(dòng)態(tài)效果頁面方法的流程示意圖；參見圖3，所述方法包括：

步驟S311，根據(jù)所述圖片的圖片格式，對(duì)所述圖片執(zhí)行相應(yīng)的圖片信息處理得到圖片信息；

步驟S312，對(duì)所述圖片信息進(jìn)行圖層分析得到圖層信息文件，對(duì)所述圖層信息文件進(jìn)行去重裝飾處理，并對(duì)所述圖層信息文件進(jìn)行存儲(chǔ)；

步驟S32，對(duì)所述圖層信息進(jìn)行分析并生成靜態(tài)頁面；

步驟S33，通過選擇的動(dòng)態(tài)效果語言，將所述靜態(tài)頁面生成為動(dòng)態(tài)效果頁面。

其中，在步驟S312中，分析圖片的數(shù)據(jù)采用深度優(yōu)先搜索或者廣度優(yōu)先搜索算法，根據(jù)圖層分組的層級(jí)和順序，先生成所有圖層的數(shù)組樹，同時(shí)每個(gè)圖層分別是一個(gè)數(shù)組，圖層數(shù)組里用key:value的數(shù)組來存儲(chǔ)圖層的各種信息。

另外，在該步驟中，對(duì)圖片信息進(jìn)行圖層分析得到圖層信息文件之后可對(duì)所述圖層信息文件進(jìn)行去重裝飾處理，即先刪除其他完全相同的圖層信息，刪除空的圖層信息等。

實(shí)施例4：

圖4是根據(jù)本發(fā)明實(shí)施例四的生成動(dòng)態(tài)效果頁面方法的流程示意圖；參見圖4，所述方法包括：

步驟S41，根據(jù)獲取的圖片，對(duì)所述圖片進(jìn)行解析得到圖層信息文件；

步驟S42，分析所述圖層信息文件，遍歷dom樹，生成dom樹結(jié)構(gòu)，再根據(jù)圖層屬性渲染dom樣式，生成所述靜態(tài)頁面；

步驟S43，通過選擇的動(dòng)態(tài)效果語言，將所述靜態(tài)頁面生成為動(dòng)態(tài)效果頁面。

其中，步驟S42中，采用深度搜索或者廣度搜索算法，先遍歷整個(gè)圖層數(shù)組樹，按照數(shù)組的層級(jí)分別渲染為對(duì)應(yīng)層級(jí)的DOM結(jié)構(gòu)。同時(shí)，針對(duì)每個(gè)樹結(jié)構(gòu)的節(jié)點(diǎn)(即每個(gè)圖層)，會(huì)根據(jù)存儲(chǔ)的圖層信息，渲染DOM結(jié)構(gòu)對(duì)應(yīng)的樣式，最終生成所述靜態(tài)頁面。

在執(zhí)行步驟S42之前或之后，還可對(duì)所述圖層信息進(jìn)行自定義分組處理。該步驟作為優(yōu)選步驟，對(duì)圖層進(jìn)行自定義分組的目的是為了方便之后給每一組增加動(dòng)畫效果，例如：某塊區(qū)域都需要從左飛入這樣一個(gè)動(dòng)畫，很多圖層的動(dòng)畫效果都是一樣的，分組之后配置動(dòng)畫更快。也可以在頁面生成后進(jìn)行該步驟的自定義分組處理，用戶信息即用戶添加的分組信息。

實(shí)施例5：

圖5是根據(jù)本發(fā)明實(shí)施例五的生成動(dòng)態(tài)效果頁面方法的流程示意圖；參見圖5，所述方法包括：

步驟S51，根據(jù)獲取的圖片，對(duì)所述圖片進(jìn)行解析得到圖層信息文件；

步驟S52，對(duì)所述圖層信息進(jìn)行分析并生成靜態(tài)頁面；

步驟S531，選擇動(dòng)態(tài)效果語言的開發(fā)代碼；

步驟S532，將動(dòng)態(tài)效果添加到自定義動(dòng)畫庫中，使得所述靜態(tài)頁面生成為動(dòng)態(tài)效果頁面。

所述步驟S531中包括：用戶選擇開發(fā)動(dòng)畫效果的語言，如果系統(tǒng)支持該語言(例如：Js、css、go等)，則執(zhí)行步驟S532中；如果系統(tǒng)不支持則提示用戶切換其他語言(例如：通過下拉菜單來切換)，則根據(jù)技術(shù)和需求的更新，持續(xù)維護(hù)和更新語言庫(主要采用人工更新的方式，如果某些語言庫用的是開源庫，例如：npm上的開源庫，可以定期執(zhí)行更新腳本)。之后，提供用戶編輯和開發(fā)動(dòng)畫效果代碼的頁面。解析用戶開發(fā)的代碼，如果可用，則把該效果添加到用戶自定義動(dòng)畫庫中，如果不可用，則返回上一步驟，并提示用戶重新開發(fā)。

所述步驟S532中，所述自定義動(dòng)畫庫中內(nèi)置各種動(dòng)畫效果，包括但不限于飛入、漸隱漸現(xiàn)、鐘擺效果、延遲出現(xiàn)等，所有的動(dòng)畫效果，都可以設(shè)置各類屬性，例如飛入的時(shí)間，是否有慣性，慣性時(shí)間，動(dòng)畫時(shí)間采用哪種函數(shù)(線性、非線性或者高階函數(shù))等等。本系統(tǒng)會(huì)根據(jù)技術(shù)和需求的更新，人工維護(hù)動(dòng)畫庫。同時(shí)，本系統(tǒng)支持用戶自定義添加動(dòng)畫效果，支持但不限于JavaScript、flash等現(xiàn)有或未來有的語言來開發(fā)動(dòng)畫效果。

實(shí)施本發(fā)明的各種實(shí)施方式具有以下有益效果：改進(jìn)了可上傳的多圖層圖片的格式要求，不僅能分析psd文件的圖層信息，也可以分析其他類型多圖層圖片的圖層信息；生成動(dòng)態(tài)效果的效率明顯提高，滿足當(dāng)前動(dòng)態(tài)效果頁面需求大的要求；自動(dòng)化的開發(fā)方式節(jié)省人力成本，同時(shí)規(guī)避了人工開發(fā)不準(zhǔn)確帶來的一些問題。

實(shí)施例6：

圖6是根據(jù)本發(fā)明實(shí)施方式的生成動(dòng)態(tài)效果頁面的系統(tǒng)的結(jié)構(gòu)示意圖；參見圖6，所述系統(tǒng)包括：

圖片解析模塊100，用于根據(jù)獲取的圖片，對(duì)所述圖片進(jìn)行解析得到圖層信息文件；

圖層分析模塊200，用于對(duì)所述圖層信息進(jìn)行分析并生成靜態(tài)頁面；

動(dòng)態(tài)頁面生成模塊300，用于通過選擇的動(dòng)態(tài)效果語言，將所述靜態(tài)頁面生成為動(dòng)態(tài)效果頁面。

實(shí)施本發(fā)明的各種實(shí)施方式具有以下有益效果：改進(jìn)了可上傳的多圖層圖片的格式要求，不僅能分析psd文件的圖層信息，也可以分析其他類型多圖層圖片的圖層信息；生成動(dòng)態(tài)效果的效率明顯提高，滿足當(dāng)前動(dòng)態(tài)效果頁面需求大的要求；自動(dòng)化的開發(fā)方式節(jié)省人力成本，同時(shí)規(guī)避了人工開發(fā)不準(zhǔn)確帶來的一些問題。

實(shí)施例7：

根據(jù)本實(shí)施例，所述生成動(dòng)態(tài)效果頁面的系統(tǒng)包括：

圖片解析模塊100，用于根據(jù)獲取的圖片，對(duì)所述圖片進(jìn)行解析得到圖層信息文件；

圖層分析模塊200，用于對(duì)所述圖層信息進(jìn)行分析并生成靜態(tài)頁面；

動(dòng)態(tài)頁面生成模塊300，用于通過選擇的動(dòng)態(tài)效果語言，將所述靜態(tài)頁面生成為動(dòng)態(tài)效果頁面。

圖7是圖6所示系統(tǒng)中所述圖片解析模塊的結(jié)構(gòu)示意圖；其中，如圖7所示，所述圖片解析模塊100包括：

圖片處理單元110，用于根據(jù)所述圖片的圖片格式，對(duì)所述圖片執(zhí)行相應(yīng)的圖片信息處理得到圖片信息；

圖層存儲(chǔ)單元120，用于對(duì)所述圖片信息進(jìn)行圖層分析得到圖層信息文件，并對(duì)所述圖層信息文件進(jìn)行存儲(chǔ)。

執(zhí)行圖片處理單元110時(shí)，通過圖片文件的后綴名，判斷是哪種圖片格式，如果不是多圖層圖片，則返回失敗，提示用戶格式不正確，反之則執(zhí)行相應(yīng)格式圖片對(duì)應(yīng)的程序。執(zhí)行圖層存儲(chǔ)單元120時(shí)，由于每張圖片在存儲(chǔ)的時(shí)候都會(huì)把圖片整體的信息(寬、高等)和各圖層的信息(寬、高、左右距離、顏色、字號(hào)等)按照該圖片指定的格式保存在圖片數(shù)據(jù)中，程序會(huì)根據(jù)不同的圖片格式，分別采用不同的方法獲取這些信息。

實(shí)施例8：

根據(jù)本實(shí)施例，所述生成動(dòng)態(tài)效果頁面的系統(tǒng)包括：

圖片解析模塊100，用于根據(jù)獲取的圖片，對(duì)所述圖片進(jìn)行解析得到圖層信息文件；

圖層分析模塊200，用于對(duì)所述圖層信息進(jìn)行分析并生成靜態(tài)頁面；

動(dòng)態(tài)頁面生成模塊300，用于通過選擇的動(dòng)態(tài)效果語言，將所述靜態(tài)頁面生成為動(dòng)態(tài)效果頁面。

圖8是圖6所示系統(tǒng)中所述圖片解析模塊另一實(shí)施方式的結(jié)構(gòu)示意圖；其中，如圖8所示，所述圖片解析模塊100包括：

圖片處理單元110，用于根據(jù)所述圖片的圖片格式，對(duì)所述圖片執(zhí)行相應(yīng)的圖片信息處理得到圖片信息；

圖層存儲(chǔ)單元120，用于對(duì)所述圖片信息進(jìn)行圖層分析得到圖層信息文件，并對(duì)所述圖層信息文件進(jìn)行存儲(chǔ)；

去重裝飾單元130，用于對(duì)所述圖層信息文件進(jìn)行去重裝飾處理。

圖層存儲(chǔ)單元120可分析圖片的數(shù)據(jù)采用深度優(yōu)先搜索或者廣度優(yōu)先搜索算法，根據(jù)圖層分組的層級(jí)和順序，先生成所有圖層的數(shù)組樹，同時(shí)每個(gè)圖層分別是一個(gè)數(shù)組，圖層數(shù)組里用key:value的數(shù)組來存儲(chǔ)圖層的各種信息。

去重裝飾單元130可在圖片信息進(jìn)行圖層分析得到圖層信息文件之后可對(duì)所述圖層信息文件進(jìn)行去重裝飾處理，即先刪除其他完全相同的圖層信息，刪除空的圖層信息等。

實(shí)施例9：

根據(jù)本實(shí)施例，所述生成動(dòng)態(tài)效果頁面的系統(tǒng)包括：

圖片解析模塊100，用于根據(jù)獲取的圖片，對(duì)所述圖片進(jìn)行解析得到圖層信息文件；

圖層分析模塊200，用于對(duì)所述圖層信息進(jìn)行分析并生成靜態(tài)頁面；

動(dòng)態(tài)頁面生成模塊300，用于通過選擇的動(dòng)態(tài)效果語言，將所述靜態(tài)頁面生成為動(dòng)態(tài)效果頁面。

圖9是圖6所示系統(tǒng)中所述圖層分析模塊的結(jié)構(gòu)示意圖；其中，如圖9所示，所述圖層分析模塊200包括：

圖層信息分析單元210，用于分析所述圖層信息文件，遍歷dom樹，生成dom樹結(jié)構(gòu)；

靜態(tài)頁面生成單元220，用于根據(jù)圖層屬性渲染dom樣式，生成所述靜態(tài)頁面。

其中，圖層信息分析單元210采用深度搜索或者廣度搜索算法，先遍歷整個(gè)圖層數(shù)組樹，按照數(shù)組的層級(jí)分別渲染為對(duì)應(yīng)層級(jí)的DOM結(jié)構(gòu)。同時(shí)，針對(duì)每個(gè)樹結(jié)構(gòu)的節(jié)點(diǎn)(即每個(gè)圖層)，會(huì)根據(jù)存儲(chǔ)的圖層信息，渲染DOM結(jié)構(gòu)對(duì)應(yīng)的樣式，最終生成所述靜態(tài)頁面。

實(shí)施例10：

圖10是根據(jù)本發(fā)明所述生成動(dòng)態(tài)效果頁面的系統(tǒng)又一實(shí)施方式的結(jié)構(gòu)示意圖；參見圖10，根據(jù)本實(shí)施例，所述生成動(dòng)態(tài)效果頁面的系統(tǒng)包括：

圖片解析模塊100，用于根據(jù)獲取的圖片，對(duì)所述圖片進(jìn)行解析得到圖層信息文件；

圖層分析模塊200，用于對(duì)所述圖層信息進(jìn)行分析并生成靜態(tài)頁面；

分組處理模塊250，用于對(duì)所述圖層信息進(jìn)行分析并生成靜態(tài)頁面之前或之后，對(duì)所述圖層信息進(jìn)行自定義分組處理。

動(dòng)態(tài)頁面生成模塊300，用于通過選擇的動(dòng)態(tài)效果語言，將所述靜態(tài)頁面生成為動(dòng)態(tài)效果頁面。

其中，所述分組處理模塊250還可對(duì)所述圖層信息進(jìn)行分析并生成靜態(tài)頁面之前或之后，對(duì)所述圖層信息進(jìn)行自定義分組處理。對(duì)圖層進(jìn)行自定義分組的目的是為了方便之后給每一組增加動(dòng)畫效果，例如：某塊區(qū)域都需要從左飛入這樣一個(gè)動(dòng)畫，很多圖層的動(dòng)畫效果都是一樣的，分組之后配置動(dòng)畫更快。也可以在頁面生成后進(jìn)行該步驟的自定義分組處理，用戶信息即用戶添加的分組信息。

實(shí)施例11：

根據(jù)本實(shí)施例，所述生成動(dòng)態(tài)效果頁面的系統(tǒng)包括：

圖片解析模塊100，用于根據(jù)獲取的圖片，對(duì)所述圖片進(jìn)行解析得到圖層信息文件；

圖層分析模塊200，用于對(duì)所述圖層信息進(jìn)行分析并生成靜態(tài)頁面；

動(dòng)態(tài)頁面生成模塊300，用于通過選擇的動(dòng)態(tài)效果語言，將所述靜態(tài)頁面生成為動(dòng)態(tài)效果頁面。

圖11是圖6所示系統(tǒng)中所述動(dòng)態(tài)頁面生成模塊的結(jié)構(gòu)示意圖；其中，如圖9所示，所述動(dòng)態(tài)頁面生成模塊300包括：

代碼選擇單元310，用于選擇的動(dòng)態(tài)效果語言的開發(fā)代碼；

動(dòng)態(tài)生成單元320，用于將動(dòng)態(tài)效果添加到自定義動(dòng)畫庫中，使得所述靜態(tài)頁面生成為動(dòng)態(tài)效果頁面。

所述代碼選擇單元310包括：用戶選擇開發(fā)動(dòng)畫效果的語言，如果系統(tǒng)支持該語言(例如：Js、css、go等)，則執(zhí)行步驟S532中；如果系統(tǒng)不支持則提示用戶切換其他語言(例如：通過下拉菜單來切換)，則根據(jù)技術(shù)和需求的更新，持續(xù)維護(hù)和更新語言庫(主要采用人工更新的方式，如果某些語言庫用的是開源庫，例如：npm上的開源庫，可以定期執(zhí)行更新腳本)。之后，提供用戶編輯和開發(fā)動(dòng)畫效果代碼的頁面。解析用戶開發(fā)的代碼，如果可用，則把該效果添加到用戶自定義動(dòng)畫庫中，如果不可用，則返回上一步驟，并提示用戶重新開發(fā)。

所述動(dòng)態(tài)生成單元320中，所述自定義動(dòng)畫庫中內(nèi)置各種動(dòng)畫效果，包括但不限于飛入、漸隱漸現(xiàn)、鐘擺效果、延遲出現(xiàn)等，所有的動(dòng)畫效果，都可以設(shè)置各類屬性，例如飛入的時(shí)間，是否有慣性，慣性時(shí)間，動(dòng)畫時(shí)間采用哪種函數(shù)(線性、非線性或者高階函數(shù))等等。本系統(tǒng)會(huì)根據(jù)技術(shù)和需求的更新，人工維護(hù)動(dòng)畫庫。同時(shí)，本系統(tǒng)支持用戶自定義添加動(dòng)畫效果，支持但不限于JavaScript、flash等現(xiàn)有或未來有的語言來開發(fā)動(dòng)畫效果。

實(shí)施本發(fā)明的各種實(shí)施方式具有以下有益效果：改進(jìn)了可上傳的多圖層圖片的格式要求，不僅能分析psd文件的圖層信息，也可以分析其他類型多圖層圖片的圖層信息；生成動(dòng)態(tài)效果的效率明顯提高，滿足當(dāng)前動(dòng)態(tài)效果頁面需求大的要求；自動(dòng)化的開發(fā)方式節(jié)省人力成本，同時(shí)規(guī)避了人工開發(fā)不準(zhǔn)確帶來的一些問題。

通過采用本發(fā)明的實(shí)施方式通過采用本發(fā)明，可有效提高多個(gè)模塊級(jí)聯(lián)交互狀態(tài)下消息追蹤和處理的效率，縮短日志排查時(shí)間，降低對(duì)大型項(xiàng)目的理解復(fù)雜度。

其他實(shí)施例：

圖12示出了根據(jù)本發(fā)明的另一種實(shí)施方式的生成動(dòng)態(tài)效果頁面的方法。根據(jù)本實(shí)施方式，所述方法可以包括：

1200：獲得多圖層圖片；

1220：基于獲得的多圖層圖片生成圖層信息文件；

1240：根據(jù)所述圖層信息文件生成靜態(tài)頁面；

1260：通過向所述靜態(tài)頁面添加動(dòng)畫效果，生成動(dòng)態(tài)效果頁面。

根據(jù)本發(fā)明實(shí)施方式，對(duì)處理的多圖層圖片的類型不做限制，并且支持通過對(duì)每個(gè)圖層添加動(dòng)畫的配置來生成有動(dòng)畫效果的頁面，通過自動(dòng)化技術(shù)生成頁面，減少人工開發(fā)產(chǎn)生的紕漏。

在本發(fā)明的可選實(shí)施方式中，處理1220可以包括：獲取所述多圖層圖片的整體信息和各圖層的圖層信息；將獲取的所述整體信息和圖層信息保存到圖片數(shù)據(jù)中；基于所述圖片數(shù)據(jù)生成圖層信息文件。其中，可選地，基于所述圖片數(shù)據(jù)生成圖層信息文件可包括：根據(jù)所述圖片數(shù)據(jù)獲得圖層分組的層級(jí)和順序；依照獲得的圖層分組的層級(jí)和順序生成圖層數(shù)組樹，其中，所述圖層數(shù)組樹的各節(jié)點(diǎn)存儲(chǔ)圖層信息；將生成的圖層數(shù)據(jù)樹保存為圖層信息文件。在本發(fā)明的另一優(yōu)選實(shí)施方式中，基于所述圖片數(shù)據(jù)生成圖層信息文件還可包括：對(duì)所述圖層信息進(jìn)行去重和裝飾處理。

在本發(fā)明的可選實(shí)施方式中，處理1240可包括：按照所述圖層數(shù)組樹的層級(jí)，將所述圖層數(shù)組樹渲染為對(duì)應(yīng)層級(jí)的DOM結(jié)構(gòu)；針對(duì)所述圖層數(shù)組樹的每個(gè)節(jié)點(diǎn)，根據(jù)該節(jié)點(diǎn)存儲(chǔ)的圖層信息渲染所述DOM結(jié)構(gòu)對(duì)應(yīng)的樣式，得到靜態(tài)頁面。

在本發(fā)明的另一種實(shí)施方式中，上述基于所述圖片數(shù)據(jù)生成圖層信息文件還可包括：對(duì)所述圖層文件中的圖層信息進(jìn)行分組。相應(yīng)地，在本發(fā)明的又一實(shí)施方式中，處理1260可以包括：根據(jù)所述圖層信息的分組對(duì)所述DOM結(jié)構(gòu)進(jìn)行分組；對(duì)所述DOM結(jié)構(gòu)的分組添加動(dòng)畫效果以生成動(dòng)態(tài)效果頁面。

作為選擇，在本發(fā)明的另一實(shí)施方式中，處理1260可以包括：對(duì)所述DOM結(jié)構(gòu)進(jìn)行分組；對(duì)所述DOM結(jié)構(gòu)的分組添加動(dòng)畫效果以生成動(dòng)態(tài)效果頁面。

根據(jù)本發(fā)明的又一可選實(shí)施方式，所述生成動(dòng)態(tài)效果頁面的方法可進(jìn)一步包括：獲取用戶開發(fā)的動(dòng)畫效果代碼；解析所述動(dòng)畫效果代碼得到動(dòng)畫效果。由此，可以實(shí)現(xiàn)自定義添加動(dòng)畫效果。

圖13示出了根據(jù)本發(fā)明的另一種實(shí)施方式的生成動(dòng)態(tài)效果頁面的系統(tǒng)。在本發(fā)明實(shí)施方式中，所述系統(tǒng)可包括：獲取模塊1310，用于獲得多圖層圖片；第一生成模塊1330，用于基于獲得的多圖層圖片生成圖層信息文件；第二生成模塊1350，用于根據(jù)所述圖層信息文件生成靜態(tài)頁面；第三生成模塊1360，用于執(zhí)行下述操作：通過向所述靜態(tài)頁面添加動(dòng)畫效果，生成動(dòng)態(tài)效果頁面。

在本發(fā)明的可選實(shí)施方式中，所述第一生成模塊1330包括：獲取單元，用于獲取所述多圖層圖片的整體信息和各圖層的圖層信息；保存單元，用于將獲取的所述整體信息和圖層信息保存到圖片數(shù)據(jù)中；生成單元，基于所述圖片數(shù)據(jù)生成圖層信息文件。

可選地，所述生成單元基于所述圖片數(shù)據(jù)生成圖層信息文件可包括：根據(jù)所述圖片數(shù)據(jù)獲得圖層分組的層級(jí)和順序；依照獲得的圖層分組的層級(jí)和順序生成圖層數(shù)組樹，其中，所述圖層數(shù)組樹的各節(jié)點(diǎn)存儲(chǔ)圖層信息；將生成的圖層數(shù)據(jù)樹保存為圖層信息文件。此外，在其他可選實(shí)施方式中，所述生成單元基于所述圖片數(shù)據(jù)生成圖層信息文件還可包括：對(duì)所述圖層信息進(jìn)行去重和裝飾處理。

在本發(fā)明的可選實(shí)施方式中，所述第二生成模塊1350可以包括：第一渲染單元，用于執(zhí)行下述處理：按照所述圖層數(shù)組樹的層級(jí)，將所述圖層數(shù)組樹渲染為對(duì)應(yīng)層級(jí)的DOM結(jié)構(gòu)；第二渲染單元，用于執(zhí)行下述處理：針對(duì)所述圖層數(shù)組樹的每個(gè)節(jié)點(diǎn)，根據(jù)該節(jié)點(diǎn)存儲(chǔ)的圖層信息渲染所述DOM結(jié)構(gòu)對(duì)應(yīng)的樣式，得到靜態(tài)頁面。

在本發(fā)明的可選實(shí)施方式中，所述生成單元基于所述圖片數(shù)據(jù)生成圖層信息文件還包括對(duì)所述圖層文件中的圖層信息進(jìn)行分組。進(jìn)一步，可選地，所述第三生成模塊1370可以包括：第一分組單元，用于根據(jù)所述圖層信息的分組對(duì)所述DOM結(jié)構(gòu)進(jìn)行分組；第一添加單元，用于對(duì)所述DOM結(jié)構(gòu)的分組添加動(dòng)畫效果以生成動(dòng)態(tài)效果頁面。

作為選擇，在本發(fā)明的其他實(shí)施方式中，所述第三生成模塊1370可包括：第二分組單元，用于對(duì)所述DOM結(jié)構(gòu)進(jìn)行分組；第二添加單元，用于對(duì)所述DOM結(jié)構(gòu)的分組添加動(dòng)畫效果以生成動(dòng)態(tài)效果頁面。

此外，根據(jù)本發(fā)明的各種不同實(shí)施方式，所述生成動(dòng)態(tài)效果頁面的系統(tǒng)還包括：自定義模塊，用于執(zhí)行下述處理：獲取用戶開發(fā)的動(dòng)畫效果代碼，并解析所述動(dòng)畫效果代碼得到動(dòng)畫效果。

根據(jù)本發(fā)明實(shí)施方式，改進(jìn)了可上傳的多圖層圖片的格式要求，不僅能分析PSD文件的圖層信息，也可以分析其他類型多圖層圖片的圖層信息。由于現(xiàn)在大家對(duì)有動(dòng)畫效果的頁面需求更大，在生成靜態(tài)頁面后，增加了系統(tǒng)和裝置里可配置動(dòng)畫效果的選項(xiàng)。自動(dòng)化的開發(fā)方式節(jié)省人力成本，同時(shí)規(guī)避了人工開發(fā)不準(zhǔn)確帶來的一些問題。

通過以上的實(shí)施方式的描述，本領(lǐng)域的技術(shù)人員可以清楚地了解到本發(fā)明可借助軟件結(jié)合硬件平臺(tái)的方式來實(shí)現(xiàn)?；谶@樣的理解，本發(fā)明的技術(shù)方案對(duì)背景技術(shù)做出貢獻(xiàn)的全部或者部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計(jì)算機(jī)軟件產(chǎn)品可以存儲(chǔ)在存儲(chǔ)介質(zhì)中，如ROM/RAM、磁碟、光盤等，包括若干指令用以使得一臺(tái)計(jì)算機(jī)設(shè)備(可以是個(gè)人計(jì)算機(jī)，服務(wù)器，智能手機(jī)或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個(gè)實(shí)施例或者實(shí)施例的某些部分所述的方法。

本發(fā)明說明書中使用的術(shù)語和措辭僅僅為了舉例說明，并不意味構(gòu)成限定。本領(lǐng)域技術(shù)人員應(yīng)當(dāng)理解，在不脫離所公開的實(shí)施方式的基本原理的前提下，對(duì)上述實(shí)施方式中的各細(xì)節(jié)可進(jìn)行各種變化。因此，本發(fā)明的范圍只由權(quán)利要求確定，在權(quán)利要求中，除非另有說明，所有的術(shù)語應(yīng)按最寬泛合理的意思進(jìn)行理解。