[發(fā)明專利]一種EPG異形圖組件及其展示方法

在審

• 申請?zhí)枺?/td>: 202011441726.0
• 申請日: 2020-12-08
• 公開（公告）號: CN112596715A
• 公開（公告）日: 2021-04-02
• 發(fā)明（設(shè)計(jì)）人: 姚蘭;魏代邦;隆龍;張曉剛
• 申請（專利權(quán)）人: 海看網(wǎng)絡(luò)科技（山東）股份有限公司
• 主分類號: G06F8/30
• 分類號: G06F8/30;G06F8/38;G06F9/451;G06T13/00
• 代理公司: 濟(jì)南華典專利代理事務(wù)所(普通合伙企業(yè)) 37293
• 代理人: 李景華

1.一種EPG異形圖的展現(xiàn)方法，其特征在于：包括：

自定義一個動畫工具類HkAnimals，其實(shí)現(xiàn)動畫方法為：

步驟1.1、HkAnimals對象創(chuàng)建時，接收一個執(zhí)行動畫的html元素以及一組動畫參數(shù)；

步驟1.2、HkAnimals對象的動畫參數(shù)包含動畫執(zhí)行前元素的css樣式、動畫執(zhí)行后元素的css樣式、動畫的總時間、動畫片的時間、動畫過渡算法；

步驟1.3、HkAnimals對象執(zhí)行動畫函數(shù)，通過JavaScript的setInterval定時器函數(shù)，不斷調(diào)用匿名函數(shù)，計(jì)算并改變目標(biāo)元素的css樣式，實(shí)現(xiàn)元素的動畫效果，其中setInterval的執(zhí)行周期為創(chuàng)建對象時配置的動畫參數(shù)的動畫片的時間；

異形圖組件使用上述動畫工具類實(shí)現(xiàn)異形圖效果，其方法為：

步驟2.1、提供兩張相同尺寸的圖片，一張是背景圖片，一張是異形圖片，異形圖片的背景使用透明色，當(dāng)異形圖片覆蓋在背景圖片時，二者形成一張完整的畫面；

步驟2.2、異形圖組件是一個特殊的div，它包含兩個img元素，兩個img元素的縱軸坐標(biāo)z-index不同，位于下方的img元素為背景圖控件，用于渲染異形圖的背景圖片，位于上方的img元素為異形圖空間，用于渲染異形圖的異形圖片，兩個控件均使用相對于外層div布局；

步驟2.3、當(dāng)異形圖獲取焦點(diǎn)時，調(diào)用HkAnimals的初始化方法創(chuàng)建動畫對象，將異形圖控件和動畫參數(shù)傳遞給動畫對象，并執(zhí)行動畫方法；

步驟2.4、動畫參數(shù)的動畫執(zhí)行前元素的css樣式和動畫執(zhí)行后元素的css樣式部分的css樣式包括布局參數(shù)left、top、right、bottom、width、height，通過這些參數(shù)可以實(shí)現(xiàn)異形圖控件的平移和縮放動畫；

步驟2.5、當(dāng)異形圖失去焦點(diǎn)時，同樣調(diào)用HkAnimals的動畫方法，此時的動畫執(zhí)行前元素的css樣式和動畫執(zhí)行后元素的css樣式的內(nèi)容與步驟2.4中的相反，即步驟2.5中的動畫執(zhí)行前元素的css樣式是步驟2.4中的動畫執(zhí)行后元素的css樣式，步驟2.5中的動畫執(zhí)行后元素的css樣式是步驟2.4中的動畫執(zhí)行前元素的css樣式，執(zhí)行動畫后，異形圖的樣式會恢復(fù)到初始的狀態(tài)，進(jìn)而實(shí)現(xiàn)異形圖的展現(xiàn)。

2.根據(jù)權(quán)利要求1所述的一種EPG異形圖的展現(xiàn)方法，其特征在于：所述動畫執(zhí)行前元素的css樣式和動畫執(zhí)行后元素的css樣式都是代表一組css樣式的JS對象，JS對象的每一組屬性的鍵值為css的樣式名稱，值為對應(yīng)的css樣式值，動畫執(zhí)行前元素的css樣式和動畫執(zhí)行后元素的css樣式包含的樣式屬性的條目相同。

3.根據(jù)權(quán)利要求1所述的一種EPG異形圖的展現(xiàn)方法，其特征在于：自定義動畫類HkAnimals的方法，包括：

為Window對象定義一個ClassMaker的變量，該變量包含函數(shù)create的引用，通過執(zhí)行該函數(shù)用于快速定義類、并按約定規(guī)則過濾構(gòu)造方法和原型方法；

ClassMaker的函數(shù)create用于過濾構(gòu)造函數(shù)和普通函數(shù)；

在HkAnimals.js中通過自執(zhí)行函數(shù)完成上述ClassMaker變量的定義；

在HkAnimals.js中通過ClassMaker的create方法，創(chuàng)建類HkAnimals；

定義以下劃線命名的構(gòu)造函數(shù)，構(gòu)造函數(shù)定義了HkAnimals動畫類的屬性，分別是執(zhí)行動畫的html元素以及動畫參數(shù)，創(chuàng)建HkAnimals對象時只需傳遞執(zhí)行動畫的html元素以及動畫參數(shù)即可完成初始化；

定義功能函數(shù)，功能函數(shù)包括開始動畫函數(shù)start、結(jié)束動畫函數(shù)stop、計(jì)算中間樣式函數(shù)compute、設(shè)置樣式函數(shù)setStyle。