[發(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
• 代理人: 李景華

本發(fā)明涉及一種EPG異形圖組件及其展示方法，包括：該組件通過HTML和JS技術(shù)實(shí)現(xiàn)，能夠完整的實(shí)現(xiàn)EPG系統(tǒng)下的異形圖展現(xiàn)要求，自定義一個動畫工具類HkAnimals，異形圖組件使用上述動畫工具類實(shí)現(xiàn)異形圖效果，異形圖的樣式會恢復(fù)到初始的狀態(tài)，進(jìn)而實(shí)現(xiàn)異形圖的展現(xiàn)。本發(fā)明提供了一種在Web環(huán)境下的動畫類和一種使用該動畫類實(shí)現(xiàn)的異形圖組件，該異形圖組件完整的實(shí)現(xiàn)了異形圖的功能，并且支持在低版本瀏覽器上運(yùn)行，該動畫類提供了一種統(tǒng)一的動畫效果，使用者通過創(chuàng)建HkAnimals對象并調(diào)用相應(yīng)方法即可實(shí)現(xiàn)期望的動畫效果。

技術(shù)領(lǐng)域

本發(fā)明涉及網(wǎng)絡(luò)電視技術(shù)領(lǐng)域，具體涉及一種EPG異形圖組件及其展示方法。

背景技術(shù)

IPTV作為網(wǎng)絡(luò)與傳統(tǒng)媒體結(jié)合的范例,已成為三網(wǎng)融合最具體的一種表現(xiàn)。它集成了電視網(wǎng),互聯(lián)網(wǎng)以及電信業(yè)務(wù)的各自優(yōu)點(diǎn),為用戶打造全新的功能體驗(yàn)，是未來網(wǎng)絡(luò)電視技術(shù)發(fā)展的一個趨勢。IPTV以其獨(dú)特的性能、嶄新的服務(wù)方式、高質(zhì)量的圖像展現(xiàn)在視頻市場上,其相關(guān)話題成為業(yè)界談?wù)摰慕裹c(diǎn),相關(guān)內(nèi)容正在吸引著全球越來越多的目光。

隨著業(yè)務(wù)的不斷發(fā)展，用戶對應(yīng)用體驗(yàn)度的要求也越來越高。以EPG系統(tǒng)為代表的IPTV應(yīng)用也經(jīng)歷了從單維度的靜態(tài)信息展現(xiàn)到立體化、多維度、互動性的綜合媒資平臺轉(zhuǎn)化的過程。

目前，通過機(jī)頂盒內(nèi)置的瀏覽器，借助Web相關(guān)技術(shù)，將內(nèi)容以網(wǎng)頁的形式投放，這種方式是本發(fā)明所處系統(tǒng)的實(shí)現(xiàn)方式。機(jī)頂盒內(nèi)置的瀏覽器的版本往往較其它瀏覽器APP的版本為低，因此許多功能受到一定的限制。而異形圖則是一種特殊的圖片展現(xiàn)效果，在特定場景下會有動畫效果，即圖片的某一部分相對于其它部分做運(yùn)動的動畫，Javascript沒有提供動畫方法，Html5和Css3雖然提供了動畫屬性，但在低版本瀏覽器上無法運(yùn)行。

發(fā)明內(nèi)容

為克服所述不足，本發(fā)明的目的在于提供一種EPG異形圖的展現(xiàn)方法，基于JavaScript的動畫的實(shí)現(xiàn)方法，該訪法完全基于JavaScript，在低版本瀏覽器內(nèi)核上運(yùn)行，且該方法具有較好的封裝性，供調(diào)用者方便使用。

本發(fā)明的另一目的是使用上述發(fā)明動畫方法實(shí)現(xiàn)一種Web原生環(huán)境下的異形圖組件，該組件通過HTML和JS技術(shù)實(shí)現(xiàn)，能夠完整的實(shí)現(xiàn)EPG系統(tǒng)下的異形圖展現(xiàn)要求。

本發(fā)明解決其技術(shù)問題所采用的技術(shù)方案是：一種EPG異形圖的展現(xiàn)方法，包括：

定義一個動畫工具類HkAnimals，使用者通過創(chuàng)建該類的對象并調(diào)用相應(yīng)得到動畫方法，即可完成動畫屬性的配置并執(zhí)行動畫，該方案的實(shí)現(xiàn)過程為：

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

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

其中動畫執(zhí)行前元素的css樣式(begin)和動畫執(zhí)行后元素的css樣式(end)都是代表一組css樣式的JS對象，JS對象的每一組屬性的鍵值為css的樣式名稱，值為對應(yīng)的css樣式值，begin和end包含的樣式屬性的條目相同；

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

步驟1.3.1、執(zhí)行setInterval定時器函數(shù)之前，首先根據(jù)當(dāng)前時間和配置的動畫的總時間，計(jì)算出動畫的結(jié)束時間(endTime)；