[發明專利]一種Web端動畫配置方法及裝置

在審

• 申請號: 201910074532.2
• 申請日: 2019-01-25
• 公開（公告）號: CN109885795A
• 公開（公告）日: 2019-06-14
• 發明（設計）人: 李清鵬
• 申請（專利權）人: 平安科技（深圳）有限公司
• 主分類號: G06F16/958
• 分類號: G06F16/958;G06T13/80;G06F8/41
• 代理公司: 廣州三環專利商標代理有限公司 44202
• 代理人: 郝傳鑫;熊永強

1.一種Web端動畫配置方法，其特征在于，包括：

獲取用戶在動畫配置頁面導入的動畫元素，并接收用戶針對所述動畫元素輸入的動畫效果標識和動畫配置參數；

根據所述動畫效果標識和動畫配置參數生成針對所述動畫元素的第一CSS樣式和第二CSS樣式，所述第一CSS樣式用于定義所述動畫元素的基礎動畫屬性，所述第二CSS樣式包括分別定義所述動畫元素的動畫效果過程中各個元素運動狀態的多個樣式描述代碼；

在所述動畫配置頁面中加載所述動畫元素的第一CSS樣式和第二CSS樣式，以使在所述動畫配置頁面中預覽所述動畫元素的動畫效果；

在接收到針對所述動畫元素的動畫效果的確認指令后，將所述動畫元素的第一CSS樣式和第二CSS樣式添加至目標頁面中所述動畫元素對應的樣式描述代碼段中。

2.根據權利要求1所述的方法，其特征在于，所述動畫配置參數包括：動畫過程時長、動畫速度參數、動畫開始延時以及動畫播放次數；

所述根據所述動畫效果標識和動畫配置參數生成針對所述動畫元素的第二CSS樣式包括：

根據所述動畫效果標識確定所述動畫元素的運動軌跡，并結合所述動畫配置參數確定所述動畫元素在所述動畫過程時長中每一幀的元素動畫狀態。

3.根據權利要求2所述的方法，其特征在于，所述根據所述動畫效果標識確定所述動畫元素的運動軌跡，并結合所述動畫配置參數確定所述動畫元素在所述動畫過程時長中每一幀的元素動畫狀態包括：

根據所述動畫元素的運動軌跡中的初始狀態和所述動畫速度參數確定所述動畫元素在動畫開始后的每一幀的狀態變化量，從而確定所述動畫元素在所述動畫過程時長中每一幀的元素動畫狀態。

4.根據權利要求1所述的方法，其特征在于，所述動畫元素的第二CSS樣式中的樣式描述代碼包括多個不同兼容前綴的樣式描述語句，其中每個兼容前綴的樣式描述語句用于被該兼容前綴對應的瀏覽器內核識別和執行。

5.根據權利要求1所述的方法，其特征在于，所述動畫元素的第一CSS樣式包括多個不同兼容前綴的基礎動畫屬性描述，其中每個兼容前綴的基礎動畫屬性描述用于被該兼容前綴對應的瀏覽器內核識別和執行。

6.根據權利要求4或5所述的方法，其特征在于，所述兼容前綴包括：

-webkit-、-moz-、-o-或-ms-。

7.根據權利要求4或5所述的方法，其特征在于，在所述動畫配置頁面中加載所述動畫元素的第一CSS樣式和第二CSS樣式，以使在所述動畫配置頁面中預覽所述動畫元素的動畫效果包括：

切換不同瀏覽器內核打開加載了所述動畫元素的第一CSS樣式和第二CSS樣式的動畫配置頁面，以使在所述動畫配置頁面中預覽所述動畫元素的動畫效果。

8.一種Web端動畫配置裝置，其特征在于，所述裝置包括：

交互模塊，用于獲取用戶在動畫配置頁面導入的動畫元素，并接收所述用戶針對所述動畫元素輸入的動畫效果標識和動畫配置參數；

處理模塊，用于根據所述動畫效果標識和動畫配置參數生成針對所述動畫元素的第一CSS樣式和第二CSS樣式；

顯示模塊，在所述動畫配置頁面中加載所述動畫元素的第一CSS樣式和第二CSS樣式，以使在所述動畫配置頁面中預覽所述動畫元素的動畫效果；

確認模塊，用于在接收到針對所述動畫元素的動畫效果的確認指令后，將所述動畫元素的第一CSS樣式和第二CSS樣式添加至目標頁面中所述動畫元素對應的樣式描述代碼段中。

9.一種Web端動畫配置裝置，其特征在于，包括處理器、存儲器、輸入輸出接口；

所述處理器分別與所述存儲器和所述輸入輸出接口相連，其中，所述輸入輸出接口用于頁面交互，所述存儲器用于存儲程序代碼，所述處理器用于調用所述程序代碼，以執行如權利要求1-7任一項所述的方法。

10.一種計算機可讀存儲介質，其特征在于，所述計算機可讀存儲介質存儲有計算機程序，所述計算機程序包括程序指令，所述程序指令當被處理器執行時，執行如權利要求1-7任一項所述的方法。