一種動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法和裝置制造方法
【專利摘要】本發(fā)明實(shí)施例公開(kāi)了一種動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法和裝置，用于在以HTML/CSS搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，避免界面背景中各種圖形的運(yùn)動(dòng)或顏色的變化在視覺(jué)上對(duì)主界面的影響，提升用戶體驗(yàn)。本發(fā)明實(shí)施例方法包括：在以HTML/CSS搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成動(dòng)態(tài)的圖形界面，為該圖形界面添加模糊半徑不小于1像素的模糊濾鏡，該模糊濾鏡會(huì)在該圖形界面上形成一層半透明的磨砂玻璃層的效果。
【專利說(shuō)明】—種動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法和裝置

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及圖像處理領(lǐng)域，尤其涉及一種動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法和裝置。

【背景技術(shù)】
[0002]隨著計(jì)算機(jī)界面顯示技術(shù)的發(fā)展，各種不同種類的背景畫面被應(yīng)用到各種顯示界面中。
[0003]由于動(dòng)態(tài)背景相對(duì)于靜態(tài)背景具有更為突出的視覺(jué)呈現(xiàn)能力和更加豐富的展示內(nèi)容，使得動(dòng)態(tài)背景被廣泛的應(yīng)用。
[0004]然而，在實(shí)際應(yīng)用中，采用動(dòng)態(tài)背景往往會(huì)因?yàn)閯?dòng)態(tài)背景的畫面中各種圖形的運(yùn)動(dòng)或顏色的變化而分散用戶對(duì)主界面的注意力，反而形成了干擾。


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

[0005]本發(fā)明實(shí)施例提供了一種動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法和裝置，用于以超文本標(biāo)記語(yǔ)言級(jí)聯(lián)樣式表033搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，避免界面背景中各種圖形的運(yùn)動(dòng)或顏色的變化在視覺(jué)上對(duì)主界面的影響，提升用戶的使用體驗(yàn)。
[0006]一種動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法，包括:
[0007]在以超文本標(biāo)記語(yǔ)言級(jí)聯(lián)樣式表￠33搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成動(dòng)態(tài)的圖形界面；
[0008]為所述圖形界面添加模糊濾鏡，所述模糊濾鏡的模糊半徑不小于1像素。
[0009]一種裝置，包括:
[0010]生成模塊，用于在以0111/(^3搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成動(dòng)態(tài)的圖形界面；
[0011]渲染模塊，用于為所述生成模塊生成的圖形界面添加模糊濾鏡，所述模糊濾鏡的模糊半徑不小于1像素。
[0012]從以上技術(shù)方案可以看出，本發(fā)明實(shí)施例具有以下優(yōu)點(diǎn):在以!1111/(^3搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成動(dòng)態(tài)的圖形界面，為該圖形界面添加模糊半徑不小于1像素的模糊濾鏡，該模糊濾鏡會(huì)在該圖形界面上形成一層半透明的磨砂玻璃層的效果，從而使透過(guò)該磨砂玻璃層看到的圖形界面中所有運(yùn)動(dòng)的圖形或變換的顏色的輪廓變得模糊，從視覺(jué)上產(chǎn)生一種相互交融的顏色在緩慢流動(dòng)的效果，整個(gè)流動(dòng)過(guò)程十分自然，而這種顏色緩慢流動(dòng)的效果不會(huì)分散用戶對(duì)主界面的注意力，既保持了動(dòng)態(tài)背景圖形界面的絢麗效果，又避免了界面背景中各種圖形的運(yùn)動(dòng)或顏色的變化在視覺(jué)上對(duì)主界面的影響，提升了用戶的使用體驗(yàn)。

【專利附圖】

【附圖說(shuō)明】
[0013]圖1為本發(fā)明實(shí)施例中動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法的一個(gè)流程示意圖；
[0014]圖2為本發(fā)明實(shí)施例中圖形界面與主界面一個(gè)示意圖；
[0015]圖3為本發(fā)明實(shí)施例中動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法的另一個(gè)流程示意圖；
[0016]圖4為本發(fā)明實(shí)施例中動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法的另一個(gè)流程示意圖；
[0017]圖5為本發(fā)明實(shí)施例中生成的圖形一個(gè)實(shí)例示意圖；
[0018]圖6為本發(fā)明實(shí)施例中裝置的一個(gè)結(jié)構(gòu)示意圖；
[0019]圖7為本發(fā)明實(shí)施例中裝置的另一個(gè)結(jié)構(gòu)示意圖；
[0020]圖8為本發(fā)明實(shí)施例中裝置的另一個(gè)結(jié)構(gòu)示意圖。

【具體實(shí)施方式】
[0021]下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對(duì)本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明的一部分實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域技術(shù)人員在沒(méi)有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。
[0022]請(qǐng)參閱圖1，本發(fā)明實(shí)施例中動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法一個(gè)實(shí)施例包括:
[0023]101、在以!1111/(:33搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成動(dòng)態(tài)的圖形界面；
[0024]運(yùn)行著以搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)的裝置在該應(yīng)用或網(wǎng)頁(yè)中生成動(dòng)態(tài)的圖形界面。
[0025]該動(dòng)態(tài)的圖形界面上存在圖形的運(yùn)動(dòng)或顏色的變換，且該動(dòng)態(tài)的圖形界面在該應(yīng)用或網(wǎng)頁(yè)的主界面之下，作為該主界面的背景界面，該主界面為該應(yīng)用或網(wǎng)頁(yè)的主要界面，包括用于接收用戶輸入信息的界面或顯示信息給用戶的界面。
[0026]102、為所述圖形界面添加模糊濾鏡。
[0027]該裝置生成動(dòng)態(tài)的圖形界面后，為該圖形界面添加模糊濾鏡，該模糊濾鏡的模糊半徑不小于1像素。
[0028]可以理解的是，圖形界面上添加模糊濾鏡，會(huì)產(chǎn)生磨砂玻璃效果，透過(guò)該磨砂玻璃效果觀察該圖形界面上的圖形，會(huì)發(fā)現(xiàn)該圖形界面上圖形的界限不再分明，而使得各個(gè)圖形的顏色相互交融，模糊半徑越大，該圖形與顏色相互交融的效果越強(qiáng)，當(dāng)模糊半徑足夠大時(shí)，甚至不再能觀察到圖形的確切形狀，而只能觀察到區(qū)域性的顏色的緩慢變換與流動(dòng)。
[0029]本發(fā)明實(shí)施例在以0111/(^3搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成動(dòng)態(tài)的圖形界面，為該圖形界面添加模糊半徑不小于1像素的模糊濾鏡，該模糊濾鏡會(huì)在該圖形界面上形成一層半透明的磨砂玻璃層的效果，從而使透過(guò)該磨砂玻璃層看到的圖形界面中所有運(yùn)動(dòng)的圖形或變換的顏色的輪廓變得模糊，從視覺(jué)上產(chǎn)生一種相互交融的顏色在緩慢流動(dòng)的效果，整個(gè)流動(dòng)過(guò)程十分自然，而這種顏色緩慢流動(dòng)的效果不會(huì)分散用戶對(duì)主界面的注意力，既保持了動(dòng)態(tài)背景圖形界面的絢麗效果，又避免了界面背景中各種圖形的運(yùn)動(dòng)或顏色的變化在視覺(jué)上對(duì)主界面的影響，提升了用戶的使用體驗(yàn)。其中本實(shí)施例中圖形界面與主界面的關(guān)系可以如圖2所示，圖2所示為一個(gè)以!11117(^3搭建用戶界面的應(yīng)用，其中201所示部分為主界面，供用戶輸入信息，202所示部分位于主界面201之下，作為該主界面201的背景界面，顯示有動(dòng)態(tài)的顏色變換。
[0030]上面實(shí)施例中，為圖形界面添加模糊半徑不小于1像素的模糊濾鏡。在實(shí)際應(yīng)用中，可以根據(jù)多個(gè)因素來(lái)確定一個(gè)最優(yōu)的模糊半徑再進(jìn)行模糊濾鏡的添加，請(qǐng)參閱圖3，本發(fā)明實(shí)施例中動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法另一個(gè)實(shí)施例包括:
[0031]301、在以！II祖7(:33搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成動(dòng)態(tài)的圖形界面；
[0032]運(yùn)行著以!1111/(:33搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)的裝置在該應(yīng)用或網(wǎng)頁(yè)中生成動(dòng)態(tài)的圖形界面。
[0033]該動(dòng)態(tài)的圖形界面上存在圖形的運(yùn)動(dòng)或顏色的變換，且該動(dòng)態(tài)的圖形界面在該應(yīng)用或網(wǎng)頁(yè)的主界面之下，作為該主界面的背景界面，該主界面為該應(yīng)用或網(wǎng)頁(yè)的主要界面，包括用于接收用戶輸入信息的界面或顯示信息給用戶的界面。
[0034]該裝置可以為任意能夠運(yùn)行該以!搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)的設(shè)備，例如計(jì)算機(jī)，服務(wù)器，智能終端等。
[0035]302、根據(jù)所述圖形界面中圖形的復(fù)雜度以及渲染所述圖形界面的設(shè)備的性能，確定所述模糊濾鏡的模糊半徑為第一模糊半徑；
[0036]裝置生成動(dòng)態(tài)的圖形界面后，根據(jù)該圖形界面中圖形的復(fù)雜度以及渲染該圖形界面的設(shè)備的性能，確定該模糊濾鏡的模糊半徑為第一模糊半徑。
[0037]渲染該圖形界面的設(shè)備可以為該生成動(dòng)態(tài)圖形界面的裝置，也可以為單獨(dú)對(duì)圖形界面進(jìn)行渲染的部件，此處不作限定。
[0038]可以理解的是，該模糊半徑的取值范圍為1到正無(wú)窮，圖形界面中圖形的復(fù)雜度越高，要產(chǎn)生較好的交融效果，則該模糊半徑就需要越大，因?yàn)槟：霃皆酱?，圖形的邊緣顯示越不明顯，給人的感覺(jué)為該磨砂玻璃越“厚”;而模糊半徑越大，對(duì)渲染該圖形界面的設(shè)備的性能要求越高，所以，綜合考慮圖形的復(fù)雜度以及渲染該圖形界面的設(shè)備的性能，可以確定一個(gè)最優(yōu)的模糊半徑，即本實(shí)施例中的第一模糊半徑，使得既能實(shí)現(xiàn)較好的交融效果，觀察不到圖形的輪廓，又不占用過(guò)多的系統(tǒng)資源而導(dǎo)致設(shè)備不能承受。
[0039]303、按照所述第一模糊半徑為所述圖形界面添加模糊濾鏡。
[0040]裝置確定所述模糊濾鏡的模糊半徑為第一模糊半徑后，按照該第一模糊半徑為該圖形界面添加模糊濾鏡。
[0041]可以理解的是，為了支撐該模糊濾鏡的視覺(jué)效果，節(jié)省系統(tǒng)資源，在對(duì)添加了模糊濾鏡后的圖形界面進(jìn)行渲染時(shí)，可以開(kāi)啟硬件加速，使得設(shè)備的圖形處理器？1~006881118 1)1111:, 6^11)能發(fā)揮功能，而不單單依靠軟件渲染引擎。
[0042]可選的，按照該第一模糊半徑為該圖形界面添加模糊濾鏡后，還可以設(shè)置調(diào)整該模糊半徑的接口，使得用戶可以隨時(shí)根據(jù)實(shí)際情況對(duì)該模糊半徑進(jìn)行調(diào)整，具體的顯示該接口的方式可以有很多種，例如可以顯示為滑塊，也可以顯示為百分比框，此處不作限定。
[0043]本發(fā)明實(shí)施例中，根據(jù)圖形界面中圖形的復(fù)雜度以及渲染該圖形界面的設(shè)備的性能，確定該模糊濾鏡的模糊半徑為第一模糊半徑，使得按照該第一模糊半徑添加模糊濾鏡后的圖形界面取得展示效果與系統(tǒng)資源的平衡，在獲得足夠的展示效果的同時(shí)，避免消耗過(guò)多的系統(tǒng)資源而導(dǎo)致界面的卡頓，使得該顏色動(dòng)態(tài)流動(dòng)的效果得以流暢的呈現(xiàn)。
[0044]上面實(shí)施例中，生成動(dòng)態(tài)的圖形界面，在實(shí)際應(yīng)用中，在以搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中生成動(dòng)態(tài)的圖形界面的具體實(shí)現(xiàn)方式有很多種，例如可以采用原生的088和01乂，也可以由可縮放矢量圖形37(}生成，還可以采用第五代超文本標(biāo)記語(yǔ)言的元素生成，此處不作限定。下面以采用原生的(:33和0^為例，對(duì)本發(fā)明實(shí)施例中的動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法進(jìn)行具體描述，請(qǐng)參閱圖4，本發(fā)明實(shí)施例中動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法另一個(gè)實(shí)施例包括:
[0045]401、在以肌祖7(^3搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成用于展示圖形的層；
[0046]運(yùn)行著以搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)的裝置在該應(yīng)用或網(wǎng)頁(yè)中生成用于展示圖形的層。
[0047]可選的，該層可以為!1111文件中一個(gè)獨(dú)立的層次017元素，該層只用于視覺(jué)效果的實(shí)現(xiàn)，從而不會(huì)與其它界面元素互相干擾，該層作為主界面的背景界面，該主界面為該應(yīng)用或網(wǎng)頁(yè)的主要界面，包括用于接收用戶輸入信息的界面或顯示信息給用戶的界面。
[0048]該裝置可以為任意能夠運(yùn)行該以!搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)的設(shè)備，例如計(jì)算機(jī)，服務(wù)器，智能終端等。
[0049]可選的，以!1111/(:33搭建用戶界面的網(wǎng)頁(yè)可以為瀏覽器中顯示的網(wǎng)頁(yè)，而以搭建用戶界面的應(yīng)用可以為以網(wǎng)頁(yè)方式展示內(nèi)容的應(yīng)用程序。
[0050]402、在所述層上生成用于展示顏色的圖形；
[0051]裝置生成用于展示圖形的層后，在該層上生成用于展示顏色的圖形。
[0052]具體在該層上生成圖形的方式有很多種，可選的，以采用0^和(:33為例包括:先采用0^和(:33在該層上生成(:33圖形，再為該(:33圖形設(shè)置隨時(shí)間改變的顏色、大小或透明度。
[0053]生成的該圖形的數(shù)量可以為多個(gè)，圖形的形狀也可以是多種多樣的，例如圓形，矩形、三角形以及其他復(fù)雜的或簡(jiǎn)單的，規(guī)則或不規(guī)則的幾何圖形等，或者它們的組合等，此處不作限定。
[0054]403、為所述圖形添加位移動(dòng)畫并設(shè)置動(dòng)畫屬性，該層與圖形組合為動(dòng)態(tài)的圖形界面；
[0055]在該層生成圖形后，為該圖形添加位移動(dòng)畫并設(shè)置動(dòng)畫屬性，該層與圖形組合為動(dòng)態(tài)的圖形界面。
[0056]圖形的位移動(dòng)畫的路徑可以為直線，也可以為曲線或者任意不規(guī)則路徑，而每個(gè)圖形位移動(dòng)畫的位移方向都可以單獨(dú)進(jìn)行設(shè)置，任一個(gè)圖形的位移方向可以與其他圖形的位移方向相同，也可以不同，此處不作限定。
[0057]其中，(:％圖形的動(dòng)畫屬性包括:位移加速度，循環(huán)次數(shù)，播放時(shí)間等，再配合(:33圖形本身設(shè)置的隨時(shí)間改變的顏色、大小或透明度，這樣多種多樣的組合方式組合出的圖形的動(dòng)態(tài)效果也可以多種多樣。
[0058]該(:33圖形的位移動(dòng)畫除了使用(:33來(lái)實(shí)現(xiàn)，也可以利用腳本來(lái)實(shí)現(xiàn)，此處不作限定。
[0059]404、根據(jù)所述圖形界面中圖形的復(fù)雜度以及渲染所述圖形界面的設(shè)備的性能，確定所述模糊濾鏡的模糊半徑為第一模糊半徑；
[0060]裝置生成動(dòng)態(tài)的圖形界面后，根據(jù)該圖形界面中圖形的復(fù)雜度以及渲染該圖形界面的設(shè)備的性能，確定該模糊濾鏡的模糊半徑為第一模糊半徑。
[0061]渲染該圖形界面的設(shè)備可以為該生成動(dòng)態(tài)圖形界面的裝置，也可以為單獨(dú)對(duì)圖形界面進(jìn)行渲染的部件，此處不作限定。
[0062]可以理解的是，該模糊半徑的取值范圍為1到正無(wú)窮，圖形界面中圖形的復(fù)雜度越高，要產(chǎn)生較好的交融效果，則該模糊半徑就需要越大，因?yàn)槟：霃皆酱?，圖形的邊緣顯示越不明顯，給人的感覺(jué)為該磨砂玻璃越“厚”;而模糊半徑越大，對(duì)渲染該圖形界面的設(shè)備的性能要求越高，所以，綜合考慮圖形的復(fù)雜度以及渲染該圖形界面的設(shè)備的性能，可以確定一個(gè)最優(yōu)的模糊半徑，即本實(shí)施例中的第一模糊半徑，使得既能實(shí)現(xiàn)較好的交融效果，觀察不到圖形的輪廓，又不占用過(guò)多的系統(tǒng)資源而導(dǎo)致設(shè)備不能承受。
[0063]405、按照所述第一模糊半徑為所述圖形界面添加模糊濾鏡。
[0064]裝置確定所述模糊濾鏡的模糊半徑為第一模糊半徑后，按照該第一模糊半徑為該圖形界面添加模糊濾鏡。
[0065]可以理解的是，為了支撐該模糊濾鏡的視覺(jué)效果，節(jié)省系統(tǒng)資源，在對(duì)添加了模糊濾鏡后的圖形界面進(jìn)行渲染時(shí)，可以開(kāi)啟硬件加速，使得設(shè)備的圖形處理器？1~006881118 1)1111:, 6^11)能發(fā)揮功能，而不單單依靠軟件渲染引擎。
[0066]可選的，按照該第一模糊半徑為該圖形界面添加模糊濾鏡后，還可以設(shè)置調(diào)整該模糊半徑的接口，使得用戶可以隨時(shí)根據(jù)實(shí)際情況對(duì)該模糊半徑進(jìn)行調(diào)整，具體的顯示該接口的方式可以有很多種，例如可以顯示為滑塊，也可以顯示為百分比框，此處不作限定。
[0067]本發(fā)明實(shí)施例中，通過(guò)為層上的圖形添加位移動(dòng)畫，可以使得視覺(jué)效果始終保存動(dòng)態(tài)，讓用戶感覺(jué)圖形界面中的顏色一直在流動(dòng)。
[0068]為便于理解，下面以一具體應(yīng)用場(chǎng)景對(duì)本發(fā)明實(shí)施例中動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法進(jìn)行具體描述:
[0069]在一個(gè)以搭建用戶界面的應(yīng)用中，利用文件中一個(gè)獨(dú)立的01乂元素生成用于展示圖形的0^層，該層作為應(yīng)用主界面的背景圖形界面，位于主界面之下，只用于視覺(jué)效果的實(shí)現(xiàn)，不與其他界面元素相互干擾；
[0070]如圖5所示，在該017層上采用0^和(:33生成多個(gè)033圖形，并為該0^層統(tǒng)一添加(:33的圓角屬性，生成圓形圖形，并為各圓形(:33圖形設(shè)置不同的隨時(shí)間改變的顏色、大小或透明度，例如，設(shè)定其中一個(gè)為在2秒內(nèi)從紅色變化為黃色，從半徑20像素變化為50像素，設(shè)定另一個(gè)為在5秒內(nèi)從綠色變化為藍(lán)色，從半徑30像素變化為5像素等；
[0071]在該017層上生成各033圖形后，為各033圖形添加位移動(dòng)畫，每一個(gè)圖形的位移動(dòng)畫可以不同，例如圖5的3個(gè)圖形中每個(gè)圖形的位移方向都不相同，并設(shè)置為各圖形設(shè)置動(dòng)畫屬性，例如可以設(shè)置為循環(huán)播放，則各圖形循環(huán)的按照位移動(dòng)畫進(jìn)行播放，如此便由該01乂層與各運(yùn)動(dòng)的(:33圖形構(gòu)成了動(dòng)態(tài)的圖形界面；
[0072]根據(jù)該圖形界面中圖形的復(fù)雜度以及渲染該圖形界面的設(shè)備的性能，確定當(dāng)模糊半徑為100像素時(shí)，滿足各圖形的邊緣顯示不明顯且各圖形中顏色的交融效果好，并且對(duì)系統(tǒng)資源的消耗不會(huì)對(duì)設(shè)備運(yùn)行造成影響的條件，則確定模糊半徑100像素為第一模糊半徑；
[0073]使用161^11:內(nèi)核特有的濾鏡為該圖形界面添加模糊半徑為100像素的模糊濾鏡，同時(shí)通過(guò)將0，0)語(yǔ)句加入到0^層中開(kāi)啟硬件加速，利用設(shè)備的對(duì)該圖形界面進(jìn)行渲染；
[0074]設(shè)置調(diào)整該模糊半徑的接口為滑塊形式，滑塊的起點(diǎn)為模糊半徑1像素，滑塊的終端為模糊半徑500像素，通過(guò)拖動(dòng)滑塊可以實(shí)時(shí)改變模糊濾鏡的模糊半徑，可以理解的是，該滑塊起點(diǎn)與終點(diǎn)的模糊半徑可以根據(jù)實(shí)際情況設(shè)定，此處僅為一個(gè)示例。
[0075]下面對(duì)本發(fā)明實(shí)施例中的裝置進(jìn)行描述，請(qǐng)參閱圖6，本發(fā)明實(shí)施例中裝置一個(gè)實(shí)施例包括:
[0076]生成模塊601，用于在以0111/(^3搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成動(dòng)態(tài)的圖形界面；
[0077]渲染模塊602，用于為所述生成模塊601生成的圖形界面添加模糊濾鏡，所述模糊濾鏡的模糊半徑不小于1像素。
[0078]本發(fā)明實(shí)施例中在以搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成模塊601生成動(dòng)態(tài)的圖形界面，渲染模塊602為該圖形界面添加模糊半徑不小于1像素的模糊濾鏡，該模糊濾鏡會(huì)在該圖形界面上形成一層半透明的磨砂玻璃層的效果，從而使透過(guò)該磨砂玻璃層看到的圖形界面中所有運(yùn)動(dòng)的圖形或變換的顏色的輪廓變得模糊，從視覺(jué)上產(chǎn)生一種相互交融的顏色在緩慢流動(dòng)的效果，并且整個(gè)流動(dòng)過(guò)程十分自然，而這種顏色緩慢流動(dòng)的效果不會(huì)分散用戶對(duì)主界面的注意力，既保持了圖形界面的絢麗效果，給人以賞心悅目的感覺(jué)，又避免了界面背景中各種圖形的運(yùn)動(dòng)或顏色的變化在視覺(jué)上對(duì)主界面的影響，提升了用戶體驗(yàn)。
[0079]上面實(shí)施例中，渲染模塊602為圖形界面添加模糊半徑不小于1像素的模糊濾鏡，在實(shí)際應(yīng)用中，渲染模塊602可以根據(jù)多個(gè)因素來(lái)確定一個(gè)最優(yōu)的模糊半徑再進(jìn)行模糊濾鏡的添加，請(qǐng)參閱圖7，本發(fā)明實(shí)施例中裝置另一個(gè)實(shí)施例包括:
[0080]生成模塊701，用于在以搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成動(dòng)態(tài)的圖形界面；
[0081]渲染模塊702，用于為所述生成模塊701生成的圖形界面添加模糊濾鏡，所述模糊濾鏡的模糊半徑不小于1像素；
[0082]本實(shí)施例中，該渲染模塊702具體包括:
[0083]確定單元7021，用于根據(jù)所述生成模塊701生成的圖形界面中圖形的復(fù)雜度以及渲染所述圖形界面的設(shè)備的性能，確定所述模糊濾鏡的模糊半徑為第一模糊半徑；
[0084]添加單元7022，用于按照所述確定單元7021確定的第一模糊半徑為所述圖形界面添加模糊濾鏡；
[0085]可選的，該裝置還可以包括:
[0086]設(shè)置模塊703，用于設(shè)置調(diào)整所述模糊半徑的接口。
[0087]本發(fā)明實(shí)施例中，確定單元7021根據(jù)圖形界面中圖形的復(fù)雜度以及渲染該圖形界面的設(shè)備的性能，確定該模糊濾鏡的模糊半徑為第一模糊半徑，使得添加單元7022按照該第一模糊半徑添加模糊濾鏡后的圖形界面取得展示效果與系統(tǒng)資源的平衡，在獲得足夠的展示效果的同時(shí)，避免消耗過(guò)多的系統(tǒng)資源而導(dǎo)致界面卡頓，使得該顏色動(dòng)態(tài)流動(dòng)的效果得以流暢的呈現(xiàn)。
[0088]上面實(shí)施例中，生成模塊701生成動(dòng)態(tài)的圖形界面，在實(shí)際應(yīng)用中，生成模塊701在以11111/(:33搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中生成動(dòng)態(tài)的圖形界面的具體實(shí)現(xiàn)方式有很多種，例如可以采用原生的033和01乂，也可以由可縮放矢量圖形37(}生成，還可以采用第五代超文本標(biāo)記語(yǔ)言肌祖^5的元素生成，此處不作限定。下面以生成模塊701采用原生的(:％和0^為例對(duì)本發(fā)明實(shí)施例中的裝置進(jìn)行具體描述，請(qǐng)參閱圖8，本發(fā)明實(shí)施例中裝置另一個(gè)實(shí)施例包括:
[0089]生成模塊801，用于在以肌祖7(^3搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成動(dòng)態(tài)的圖形界面；
[0090]渲染模塊802，用于為所述生成模塊801生成的圖形界面添加模糊濾鏡，所述模糊濾鏡的模糊半徑不小于1像素；
[0091〕 該渲染模塊802具體包括:
[0092]確定單元8021，用于根據(jù)所述生成模塊801生成的圖形界面中圖形的復(fù)雜度以及渲染所述圖形界面的設(shè)備的性能，確定所述模糊濾鏡的模糊半徑為第一模糊半徑；
[0093]添加單元8022，用于按照所述確定單元8021確定的第一模糊半徑為所述圖形界面添加模糊濾鏡；
[0094]可選的，該裝置還可以包括:
[0095]設(shè)置模塊803，用于設(shè)置調(diào)整所述模糊半徑的接口 ；
[0096]本實(shí)施例中，該生成模塊801具體包括:
[0097]層生成單元8011，用于在以肌祖7(^3搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成用于展示圖形的層；
[0098]圖形生成單元8012，用于在所述層生成單元8011生成的層上生成用于展示顏色的圖形；
[0099]動(dòng)畫設(shè)置單元8013，用于為所述圖形生成單元8012生成的圖形添加位移動(dòng)畫并設(shè)置動(dòng)畫屬性；
[0100]可選的，所述層生成單元8011生成的層為！1111^文件中一個(gè)獨(dú)立的層次017元素；
[0101]所述圖形生成單元8012具體包括:
[0102]圖形生成子單元80121，用于采用0^和(:33在所述層上生成(:33圖形；
[0103]設(shè)置子單元80122，用于為所述圖形生成子單元80121生成的(:33圖形設(shè)置隨時(shí)間改變的顏色、大小或透明度。
[0104]本發(fā)明實(shí)施例中，通過(guò)動(dòng)畫設(shè)置單元8013為層上的圖形添加位移動(dòng)畫，可以使得視覺(jué)效果始終保存動(dòng)態(tài)，讓用戶感覺(jué)圖形界面中的顏色一直在流動(dòng)。
[0105]為了便于理解上述實(shí)施例，下面以上述裝置各個(gè)單元在一個(gè)具體應(yīng)用場(chǎng)景中的交互過(guò)程進(jìn)行說(shuō)明:
[0106]在一個(gè)以搭建用戶界面的應(yīng)用中，層生成單元8011利用文件中一個(gè)獨(dú)立的017元素生成用于展示圖形的017層，該層作為應(yīng)用主界面的背景圖形界面，位于主界面之下，只用于視覺(jué)效果的實(shí)現(xiàn)，不與其他界面元素相互干擾；
[0107]如圖5所示，圖形生成子單元80121在該01乂層上采用01乂和(:33生成多個(gè)033圖形，并為該0^層統(tǒng)一添加(:33的圓角屬性，生成圓形圖形，設(shè)置子單元80122為各圓形088圖形設(shè)置不同的隨時(shí)間改變的顏色、大小或透明度，例如，設(shè)定其中一個(gè)圖形的顏色變化為在2秒內(nèi)從紅色變化為黃色，大小變化為從半徑20像素變化為50像素，設(shè)定另一個(gè)圖形的顏色變化為在5秒內(nèi)從綠色變化為藍(lán)色，大小變化為從半徑30像素變化為5像素等；
[0108]圖形生成單元8012在該0^層上生成各(:33圖形后，動(dòng)畫設(shè)置單元8013為各033圖形添加位移動(dòng)畫，每一個(gè)圖形的位移動(dòng)畫可以不同，例如圖5的3個(gè)圖形中每個(gè)圖形的位移方向都不相同，并為各圖形設(shè)置動(dòng)畫屬性，例如可以設(shè)置為循環(huán)播放，則各圖形循環(huán)的按照位移動(dòng)畫進(jìn)行播放，如此便由該0^層與各運(yùn)動(dòng)的(:33圖形構(gòu)成了動(dòng)態(tài)的圖形界面；
[0109]確定單元8021根據(jù)該圖形界面中圖形的復(fù)雜度以及渲染該圖形界面的設(shè)備的性能，確定當(dāng)模糊半徑為100像素時(shí)，滿足各圖形的邊緣顯示不明顯且各圖形中顏色的交融效果好，并且對(duì)系統(tǒng)資源的消耗不會(huì)對(duì)設(shè)備運(yùn)行造成影響的條件，則確定模糊半徑100像素為第一模糊半徑；
[0110]添加單元8022 使用 161^11:內(nèi)核特有的濾鏡為該圖形界面添加模糊半徑為100像素的模糊濾鏡，同時(shí)通過(guò)將-冊(cè)1^11:-1:1^118？0；011:63(1(0,0,0)語(yǔ)句加入到0^層中開(kāi)啟硬件加速，利用設(shè)備的對(duì)該圖形界面進(jìn)行渲染；
[0111]設(shè)置模塊803設(shè)置調(diào)整該模糊半徑的接口為滑塊形式，滑塊的起點(diǎn)為模糊半徑1像素，滑塊的終點(diǎn)為模糊半徑500像素，通過(guò)拖動(dòng)滑塊可以實(shí)時(shí)改變模糊濾鏡的模糊半徑，可以理解的是，該滑塊起點(diǎn)與終點(diǎn)的模糊半徑可以根據(jù)實(shí)際情況設(shè)定，此處僅為一個(gè)示例。
[0112]所屬領(lǐng)域的技術(shù)人員可以清楚地了解到，為描述的方便和簡(jiǎn)潔，上述描述的系統(tǒng)，裝置和單元的具體工作過(guò)程，可以參考前述方法實(shí)施例中的對(duì)應(yīng)過(guò)程，在此不再贅述。
[0113]在本申請(qǐng)所提供的幾個(gè)實(shí)施例中，應(yīng)該理解到，所揭露的系統(tǒng)，裝置和方法，可以通過(guò)其它的方式實(shí)現(xiàn)。例如，以上所描述的裝置實(shí)施例僅僅是示意性的，例如，所述單元的劃分，僅僅為一種邏輯功能劃分，實(shí)際實(shí)現(xiàn)時(shí)可以有另外的劃分方式，例如多個(gè)單元或組件可以結(jié)合或者可以集成到另一個(gè)系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。
[0114]所述作為分離部件說(shuō)明的單元可以是或者也可以不是物理上分開(kāi)的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個(gè)地方，或者也可以分布到多個(gè)網(wǎng)絡(luò)單元上?？梢愿鶕?jù)實(shí)際的需要選擇其中的部分或者全部單元來(lái)實(shí)現(xiàn)本實(shí)施例方案的目的。
[0115]另外，在本發(fā)明各個(gè)實(shí)施例中的各功能單元可以集成在一個(gè)處理單元中，也可以是各個(gè)單元單獨(dú)物理存在，也可以兩個(gè)或兩個(gè)以上單元集成在一個(gè)單元中。上述集成的單元既可以采用硬件的形式實(shí)現(xiàn)，也可以采用軟件功能單元的形式實(shí)現(xiàn)。
[0116]所述集成的單元如果以軟件功能單元的形式實(shí)現(xiàn)并作為獨(dú)立的產(chǎn)品銷售或使用時(shí)，可以存儲(chǔ)在一個(gè)計(jì)算機(jī)可讀取存儲(chǔ)介質(zhì)中。基于這樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說(shuō)對(duì)現(xiàn)有技術(shù)做出貢獻(xiàn)的部分或者該技術(shù)方案的全部或部分可以以軟件產(chǎn)品的形式體現(xiàn)出來(lái)，該計(jì)算機(jī)軟件產(chǎn)品存儲(chǔ)在一個(gè)存儲(chǔ)介質(zhì)中，包括若干指令用以使得一臺(tái)計(jì)算機(jī)設(shè)備(可以是個(gè)人計(jì)算機(jī)，服務(wù)器，或者智能終端等)執(zhí)行本發(fā)明各個(gè)實(shí)施例所述方法的全部或部分步驟。而前述的存儲(chǔ)介質(zhì)包括山盤、移動(dòng)硬盤、只讀存儲(chǔ)器
、隨機(jī)存取存儲(chǔ)器^00688、磁碟或者光盤等各種可以存儲(chǔ)程序代碼的介質(zhì)。
[0117]以上所述，以上實(shí)施例僅用以說(shuō)明本發(fā)明的技術(shù)方案，而非對(duì)其限制；盡管參照前述實(shí)施例對(duì)本發(fā)明進(jìn)行了詳細(xì)的說(shuō)明，本領(lǐng)域的普通技術(shù)人員應(yīng)當(dāng)理解:其依然可以對(duì)前述各實(shí)施例所記載的技術(shù)方案進(jìn)行修改，或者對(duì)其中部分技術(shù)特征進(jìn)行等同替換；而這些修改或者替換，并不使相應(yīng)技術(shù)方案的本質(zhì)脫離本發(fā)明各實(shí)施例技術(shù)方案的精神和范圍。
【權(quán)利要求】
1.一種動(dòng)態(tài)顯示顏色的實(shí)現(xiàn)方法，其特征在于，包括: 在以超文本標(biāo)記語(yǔ)言HTML/級(jí)聯(lián)樣式表CSS搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成動(dòng)態(tài)的圖形界面； 為所述圖形界面添加模糊濾鏡，所述模糊濾鏡的模糊半徑不小于I像素。
2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述為所述圖形界面添加模糊濾鏡具體包括: 根據(jù)所述圖形界面中圖形的復(fù)雜度以及渲染所述圖形界面的設(shè)備的性能，確定所述模糊濾鏡的模糊半徑為第一模糊半徑； 按照所述第一模糊半徑為所述圖形界面添加模糊濾鏡。
3.根據(jù)權(quán)利要求2所述的方法，其特征在于，所述方法還包括: 設(shè)置調(diào)整所述模糊半徑的接口。
4.根據(jù)權(quán)利要求1至3中任一項(xiàng)所述的方法，其特征在于，所述生成動(dòng)態(tài)的圖形界面具體包括: 生成用于展示圖形的層； 在所述層上生成用于展示顏色的圖形； 為所述圖形添加位移動(dòng)畫并設(shè)置動(dòng)畫屬性，所述層與所述圖形組合為所述動(dòng)態(tài)的圖形界面。
5.根據(jù)權(quán)利要求4所述的方法，其特征在于，所述圖形的數(shù)量為多個(gè)，所述層為HTML文件中一個(gè)獨(dú)立的層次DIV元素； 在所述層上生成用于展示顏色的圖形具體包括: 采用DIV和CSS在所述層上生成圖形，或采用SVG在所述層上生成圖形，或采用HTML5Canvas在所述層上生成圖形； 為所述圖形設(shè)置隨時(shí)間改變的顏色、大小或透明度。
6.一種裝置，其特征在于，包括: 生成模塊，用于在以HTML/CSS搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成動(dòng)態(tài)的圖形界面；渲染模塊，用于為所述生成模塊生成的圖形界面添加模糊濾鏡，所述模糊濾鏡的模糊半徑不小于I像素。
7.根據(jù)權(quán)利要求6所述的裝置，其特征在于，所述渲染模塊具體包括: 確定單元，用于根據(jù)所述生成模塊生成的圖形界面中圖形的復(fù)雜度以及渲染所述圖形界面的設(shè)備的性能，確定所述模糊濾鏡的模糊半徑為第一模糊半徑； 添加單元，用于按照所述確定單元確定的第一模糊半徑為所述圖形界面添加模糊濾鏡。
8.根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述裝置還包括: 設(shè)置模塊，用于設(shè)置調(diào)整所述模糊半徑的接口。
9.根據(jù)權(quán)利要求6至8中任一項(xiàng)所述的裝置，其特征在于，所述生成模塊具體包括: 層生成單元，用于在以HTML/CSS搭建用戶界面的應(yīng)用或網(wǎng)頁(yè)中，生成用于展示圖形的層； 圖形生成單元，用于在所述層生成單元生成的層上生成用于展示顏色的圖形； 動(dòng)畫設(shè)置單元，用于為所述圖形生成單元生成的圖形添加位移動(dòng)畫并設(shè)置動(dòng)畫屬性，所述層與所述圖形組合為所述動(dòng)態(tài)的圖形界面。
10.根據(jù)權(quán)利要求9所述的裝置，其特征在于， 所述層生成單元生成的層為HTML文件中一個(gè)獨(dú)立的層次DIV元素； 所述圖形生成單元具體包括: 圖形生成子單元，用于采用DIV和CSS在所述層上生成圖形，或采用SVG在所述層上生成圖形，或采用HTML 5Canvas在所述層上生成圖形； 設(shè)置子單元，用于為所述圖形生成子單元生成的圖形設(shè)置隨時(shí)間改變的顏色、大小或透明度。
【文檔編號(hào)】G06T13/00GK104361011SQ201410539340
【公開(kāi)日】2015年2月18日 申請(qǐng)日期:2014年10月13日 優(yōu)先權(quán)日:2014年10月13日
【發(fā)明者】蔣釗 申請(qǐng)人:廣東威創(chuàng)視訊科技股份有限公司