圖形界面的交互方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及互聯(lián)網(wǎng)領(lǐng)域，具體而言，涉及一種圖形界面的交互方法及裝置。
【背景技術(shù)】
[0002]近年來，隨著移動互聯(lián)網(wǎng)的發(fā)展，生活、學習、工作等都可以在網(wǎng)頁上實現(xiàn)。而基于傳統(tǒng)的按鈕、圖片組成的用戶界面，已經(jīng)無法滿足需要了。
[0003]在功能日益同質(zhì)化的今天，在做好應用功能本身的同時，其界面能否給用戶帶來新鮮感，也成為了越發(fā)的重要。在現(xiàn)有技術(shù)中，利用動畫軟件(例如Adobe Flash)制作的動態(tài)交互界面，因其絢麗的效果，以及良好的交互性能而深受用戶歡迎。但是利用動畫軟件制作出的動態(tài)交互界面，其制作和修改的過程十分繁瑣。并且，在運行動態(tài)交互界面時，需要調(diào)用特定的播放插件，通用性就受到了系統(tǒng)中是否安裝相應的播放插件的限制。同時，利用動畫軟件制作出的動態(tài)交互界面還存在系統(tǒng)資源占用高等問題。上述問題，無論是開發(fā)人員的開發(fā)，還是終端用戶的使用體驗，都受到很大的影響。
[0004]針對現(xiàn)有技術(shù)中因使用利用動畫軟件制作的動態(tài)交互界面，導致的動態(tài)交互界面開發(fā)繁瑣、通用性低的問題，目前尚未提出有效的解決方案。

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

[0005]本發(fā)明的主要目的在于提供一種圖形界面的交互方法及裝置，以解決現(xiàn)有技術(shù)中因使用利用動畫軟件制作的動態(tài)交互界面，導致的動態(tài)交互界面開發(fā)繁瑣、通用性低的問題。
[0006]為了實現(xiàn)上述目的，根據(jù)本發(fā)明實施例的一個方面，提供了一種圖形界面的交互方法。該方法包括:獲取預先設(shè)置的第一圖形元素和第二圖形元素；利用第一圖形元素中的預定區(qū)域和第二圖形元素，對顯示界面進行填充；獲取觸發(fā)信號；根據(jù)觸發(fā)信號，將第一圖形元素自預定區(qū)域向預定方向移動第一距離；根據(jù)觸發(fā)信號，將第二圖形元素向預定方向移動第二距離。
[0007]進一步的，在獲取預先設(shè)置的第一圖形元素和第二圖形元素之后，方法還包括:獲取顯示界面的界面分辨率和/或預先設(shè)置的切換次數(shù)，其中，切換次數(shù)為對顯示界面內(nèi)填充內(nèi)容進行切換的次數(shù)；根據(jù)界面分辨率和/或切換次數(shù)，確定第一距離和第二距離。
[0008]進一步的，當單獨獲取界面分辨率時，根據(jù)界面分辨率和/或切換次數(shù)，確定第一距離和第二距離包括:根據(jù)界面分辨率和第一圖形元素的第一圖像分辨率，對第一圖形元素進行切分，確定切換次數(shù)；根據(jù)切換次數(shù)和第一圖像分辨率，確定第一距離；根據(jù)切換次數(shù)和第二圖形元素的第二圖像分辨率，確定第二距離。
[0009]進一步的，當單獨獲取切換次數(shù)時，根據(jù)界面分辨率和/或切換次數(shù)，確定第一距離和第二距離包括:根據(jù)切換次數(shù)和第一圖形元素的第一圖像分辨率，確定第一距離；根據(jù)切換次數(shù)和第二圖形元素的第二圖像分辨率，確定第二距離。
[0010]進一步的，當同時獲取界面分辨率和切換次數(shù)時，根據(jù)界面分辨率和/或切換次數(shù)，確定第一距離和第二距離包括:根據(jù)界面分辨率和切換次數(shù)，對第一圖形元素進行縮放得到第一圖形元素的第三圖像分辨率；根據(jù)切換次數(shù)和第三圖像分辨率，確定第一距離；根據(jù)切換次數(shù)和第二圖形元素的第二圖像分辨率，確定第二距離。
[0011]進一步的，在獲取觸發(fā)信號之后，方法還包括:獲取文字信息；根據(jù)觸發(fā)信號和文字信息，切換在顯示界面中顯示的文字內(nèi)容。
[0012]進一步的，根據(jù)觸發(fā)信號和文字信息，切換在顯示界面中顯示的文字內(nèi)容包括:根據(jù)文字信息和切換次數(shù)，確定與切換次數(shù)數(shù)量匹配的文字字段；根據(jù)所觸發(fā)信號，依次切換顯示界面中用于顯示的文字字段。
[0013]進一步的，依次切換顯示界面中用于顯示的文字字段包括:根據(jù)觸發(fā)信號，獲取第一圖形元素在切換的過程中實時的實際移動距離；根據(jù)實際移動距離和第一距離，計算得出實際移動距離和第一距離的切換比值；根據(jù)切換比值，調(diào)整文字字段的透明度屬性。
[0014]為了實現(xiàn)上述目的，根據(jù)本發(fā)明實施例的另一方面，提供了一種圖形界面的交互裝置，該裝置包括:第一獲取模塊，用于獲取預先設(shè)置的第一圖形元素和第二圖形元素；填充模塊，用于利用第一圖形元素中的預定區(qū)域和第二圖形元素，對顯示界面進行填充；第二獲取模塊，用于獲取觸發(fā)信號；第一處理模塊，用于根據(jù)觸發(fā)信號，將第一圖形元素自預定區(qū)域向預定方向移動第一距離；第二處理模塊，用于根據(jù)觸發(fā)信號，將第二圖形元素向預定方向移動第二距離。
[0015]進一步的，裝置還包括:第三獲取模塊，用于獲取文字信息；第三處理模塊，用于根據(jù)觸發(fā)信號和文字信息，切換在顯示界面中顯示的文字內(nèi)容。
[0016]根據(jù)發(fā)明實施例，通過獲取預先設(shè)置的第一圖形元素和第二圖形元素；利用第一圖形元素中的預定區(qū)域和第二圖形元素，對顯示界面進行填充；獲取觸發(fā)信號；根據(jù)觸發(fā)信號，將第一圖形元素自預定區(qū)域向預定方向移動第一距離；根據(jù)觸發(fā)信號，將第二圖形元素向預定方向移動第二距離，解決了現(xiàn)有技術(shù)中因使用利用動畫軟件制作的動態(tài)交互界面，導致的動態(tài)交互界面開發(fā)繁瑣、通用性低的問題。達到了開發(fā)人員在不使用第三方動畫軟件的情況下，就可以簡單快捷的開發(fā)動態(tài)交互界面的目的。通過上述實施例，可以通過兩個疊加的圖形元素的移動，實現(xiàn)動態(tài)交互的視覺效果。
【附圖說明】
[0017]構(gòu)成本申請的一部分的附圖用來提供對本發(fā)明的進一步理解，本發(fā)明的示意性實施例及其說明用于解釋本發(fā)明，并不構(gòu)成對本發(fā)明的不當限定。在附圖中:
[0018]圖1是根據(jù)本發(fā)明實施例一的一種圖形界面的交互方法的流程圖；
[0019]圖2是根據(jù)本發(fā)明實施例一可選的一種圖形界面的交互方法的流程圖；
[0020]圖3是根據(jù)本發(fā)明實施例一可選的一種圖形界面的交互方法的流程圖；
[0021]圖4是根據(jù)本發(fā)明實施例二的一種圖形界面的交互裝置的結(jié)構(gòu)示意圖；以及
[0022]圖5是根據(jù)本發(fā)明實施例二可選的一種圖形界面的交互裝置的結(jié)構(gòu)示意圖。
【具體實施方式】
[0023]需要說明的是，在不沖突的情況下，本申請中的實施例及實施例中的特征可以相互組合。下面將參考附圖并結(jié)合實施例來詳細說明本發(fā)明。
[0024]為了使本技術(shù)領(lǐng)域的人員更好地理解本發(fā)明方案，下面將結(jié)合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術(shù)方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發(fā)明一部分的實施例，而不是全部的實施例?；诒景l(fā)明中的實施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都應當屬于本發(fā)明保護的范圍。
[0025]需要說明的是，本發(fā)明的說明書和權(quán)利要求書及上述附圖中的術(shù)語“第一”、“第二”等是用于區(qū)別類似的對象，而不必用于描述特定的順序或先后次序。應該理解這樣使用的數(shù)據(jù)在適當情況下可以互換，以便這里描述的本發(fā)明的實施例。此外，術(shù)語“包括”和“具有”以及他們的任何變形，意圖在于覆蓋不排他的包含，例如，包含了一系列步驟或單元的過程、方法、系統(tǒng)、產(chǎn)品或設(shè)備不必限于清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或?qū)τ谶@些過程、方法、產(chǎn)品或設(shè)備固有的其它步驟或單元。
[0026]實施例1
[0027]本發(fā)明實施例提供了一種圖形界面的交互方法，圖1是根據(jù)本發(fā)明實施例的圖形界面的交互方法的流程圖，如圖1所示，該方法包括步驟如下:
[0028]步驟SI I，獲取預先設(shè)置的第一圖形元素和第二圖形元素。
[0029]步驟S13，利用第一圖形元素中的預定區(qū)域和第二圖形元素，對顯示界面進行填充。
[0030]步驟S15，獲取觸發(fā)信號。
[0031]步驟S17，根據(jù)觸發(fā)信號，將第一圖形元素自預定區(qū)域向預定方向移動第一距離。
[0032]步驟S19，根據(jù)觸發(fā)信號，將第二圖形元素向