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

在審

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

本發明實施例公開了一種Web端動畫配置方法和裝置，所述方法包括：接收用戶針對動畫元素輸入的動畫效果標識和動畫配置參數；根據所述動畫效果標識和動畫配置參數生成所述動畫元素的第一CSS樣式和第二CSS樣式；在所述動畫配置頁面中加載所述動畫元素的第一CSS樣式和第二CSS樣式，以使在所述動畫配置頁面中預覽所述動畫元素的動畫效果；在接收到針對所述動畫元素的動畫效果的確認指令后，將所述動畫元素的第一CSS樣式和第二CSS樣式添加至目標頁面中所述動畫元素對應的樣式描述代碼段中。采用本發明，可通過獲取用戶輸入的數據直接生成用于描述所述動畫元素的運動過程的CSS樣式，從而簡化動畫配置，提高了動畫配置的效率。

技術領域

本發明涉及計算機技術領域，尤其涉及一種Web端動畫配置方法和裝置。

背景技術

隨著計算機和網絡技術的飛速發展，網頁成為人們獲取信息的一個重要部分，而一個完整的網頁往往包括文字、圖片及動畫效果等，而對于用戶來說，豐富的頁面內容和動態的頁面效果更能吸引他們的眼光，因此，頁面中動畫的配置、生成就格外重要?，F有技術中，在對文字、圖片、音頻和視頻等動畫元素進行動畫處理時，通過腳本代碼或程序語言等對上述動畫元素進行處理，還可能出現重復編寫的情況，使得動畫配置的過程十分復雜。在實際的項目開發過程中，動畫配置的代碼往往會很長，動畫配置會十分耗時耗力，從而影響Web端動畫開發的進程。

發明內容

基于此，為解決上述提到的動畫配置過程復雜，動畫表現效果可能不同的技術問題，特提供了一種Web端動畫配置方法，基于本方法可以通過獲取用戶針對動畫元素輸入的數據直接生成所述動畫元素的CSS樣式，從而實現對所述動畫元素的動畫樣式描述，簡化動畫配置過程。

本發明實施例一方面提供了一種Web端動畫配置的方法，其特征在于，包括：

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

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

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

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

其中，所述動畫配置參數包括：動畫過程時長、動畫速度參數、動畫開始延時以及動畫播放次數；

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

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

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

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

其中，所述動畫元素的第二CSS樣式中的樣式描述代碼包括多個不同兼容前綴的樣式描述語句，其中每個兼容前綴的樣式描述語句用于被該兼容前綴對應的瀏覽器內核識別和執行。

其中，所述動畫元素的第一CSS樣式包括多個不同兼容前綴的基礎動畫屬性描述，其中每個兼容前綴的基礎動畫屬性描述用于被該兼容前綴對應的瀏覽器內核識別和執行。