本申請涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域,尤其涉及一種界面元素的滑動控制方法、界面顯示方法及裝置。
背景技術(shù):
隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展,基于互聯(lián)網(wǎng)的應(yīng)用越來越多。而互聯(lián)網(wǎng)應(yīng)用與觸屏終端的結(jié)合,使得互聯(lián)網(wǎng)應(yīng)用從早期的鍵盤操作時代、控件操作時代進入滑動操作時代。
在大多互聯(lián)網(wǎng)應(yīng)用中,都需要在界面元素之間進行切換。基于滑動操作,用戶只需輕輕滑動,即可完成界面元素之間的切換,這不僅可以提高屏幕利用率,而且有利于提高切換效率和用戶使用體驗度。
技術(shù)實現(xiàn)要素:
為了進一步改善滑動技術(shù),本申請發(fā)明人跟蹤研究了大量支持滑動操作的應(yīng)用?;趯Υ罅恐С只瑒硬僮鞯膽?yīng)用的跟蹤研究,首先發(fā)現(xiàn):這些應(yīng)用在滑動實現(xiàn)上比較類似,一般是:將多個待顯示的界面元素排隊,默認狀態(tài)下界面上顯示排在最前面的界面元素;當(dāng)用戶執(zhí)行滑動操作時,當(dāng)前顯示的界面元素滑出界面,后面相鄰的界面元素滑入界面。
另外,為了發(fā)現(xiàn)滑動技術(shù)的改善空間,本申請發(fā)明人還從不同維度對滑動操作的效果進行了分析。其中,一個維度是默認狀態(tài)下顯示的界面元素的用戶流量或轉(zhuǎn)化率;另一個維度是需要用戶滑動才能顯示的界面元素的用戶流量或轉(zhuǎn)化率;再一維度是用戶發(fā)生的滑動次數(shù);又一維度是用戶使用體驗度。進一步,綜合這些維度的分析結(jié)果,發(fā)現(xiàn):非必要滑動操作的次數(shù)在逐漸減少,導(dǎo)致后面需要滑動才能顯示的界面元素的曝光率呈下降趨勢;而且用戶對滑動操作的體驗度越來越差。
其中,導(dǎo)致上述問題的原因可能有多種,但本申請發(fā)明人對導(dǎo)致上述問題的原因進行了剖析,認定:在滑動操作出現(xiàn)初期,用戶的新鮮感較強,這種新鮮感體現(xiàn)為用戶頻繁地進行滑動操作,后面界面元素的曝光率較高,用戶對滑動操作的體驗度較好;當(dāng)滑動操作進入成熟期以后,即幾乎所有應(yīng)用都支持滑動操作時,用戶對滑動操作的新鮮感逐漸消失,出現(xiàn)滑動疲態(tài),這滑動疲態(tài)主要體現(xiàn)為用戶一般只執(zhí)行必要的滑動操作,非必要滑動操作的次數(shù)逐漸減少,導(dǎo)致后面需要滑動才能顯示的界面元素的曝光率呈下降趨勢。
針對上述認定的原因,本申請發(fā)明人提出:通過增加滑動操作的趣味性,重新提高用戶對滑動操作的新鮮感,降低滑動操作的枯燥感,以增加滑動操作的次數(shù),提高界面元素的曝光率。
基于上述分析,本申請實施例提供一種界面元素的滑動控制方法,包括:
顯示一界面,所述界面包含可滑動的第一界面元素;
響應(yīng)于對所述第一界面元素的滑動操作,在所述界面上,與所述滑動操作關(guān)聯(lián)地顯示動效。
在一可選實施方式中,所述動效的顯示步驟,包括:在所述第一界面元素的周邊,與所述滑動操作關(guān)聯(lián)地顯示所述動效。
在一可選實施方式中,所述動效的顯示步驟,包括以下至少一種:
在所述第一界面元素所在區(qū)域的相鄰區(qū)域,與所述滑動操作關(guān)聯(lián)地顯示所述動效;
在所述第一界面元素的內(nèi)邊界,與所述滑動操作關(guān)聯(lián)地顯示所述動效;
在所述第一界面元素的外邊界,與所述滑動操作關(guān)聯(lián)地顯示所述動效;以及
在所述第一界面元素與其相鄰界面元素的交界,與所述滑動操作關(guān)聯(lián)地顯示所述動效。
在一可選實施方式中,所述動效的顯示步驟,還包括:響應(yīng)于對所述第一界面元素的滑動操作,沿滑動方向移動所述第一界面元素;以及
接續(xù)于所述第一界面元素,將第二界面元素移入所述界面。
在一可選實施方式中,所述動效的顯示步驟,還包括:響應(yīng)于對所述第一界面元素的滑動操作,在所述界面上,以與所述滑動操作的速度成比例變化的可視化屬性,顯示所述動效。
在一可選實施方式中,所述動效為波動動效,其中,所述可視化屬性包括:幅度、頻率、顏色、持續(xù)時間中的至少一種。
在一可選實施方式中,所述動效的顯示步驟,還包括:在所述第一界面元素的邊界上,周期性地繪制所述波動動效的輪廓曲線,或者水平偏移量不同的多條輪廓曲線,以形成所述波動動效。
在一可選實施方式中,所述輪廓曲線的繪制步驟,包括:
根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù),結(jié)合所述滑動操作的速度,確定所述輪廓曲線的水平偏移量;
根據(jù)垂直幅度初始值和所述輪廓曲線對應(yīng)的周期數(shù),結(jié)合所述波動動效的持續(xù)時間,確定所述輪廓曲線的垂直幅度值;
根據(jù)所述輪廓曲線的水平偏移量和垂直幅度值,在所述第一界面元素的邊界上繪制所述輪廓曲線。
在一可選實施方式中,所述輪廓曲線的繪制步驟,還包括:
根據(jù)所述輪廓曲線的水平偏移量和垂直幅度值,確定所述輪廓曲線在所述第一界面元素的邊界上的像素點;
連接所述像素點,以形成所述輪廓曲線;
閉合所述輪廓曲線;
填充所述閉合后的輪廓曲線。
在一可選實施方式中,所述輪廓曲線為正弦曲線/余弦曲線;其中,
所述輪廓曲線的水平偏移量的確定步驟,包括:
offsetX=offsetX0+(i-1)*speed_hua;
所述輪廓曲線的垂直幅度值的確定步驟,包括:
A=A0*(1-(i-1)/(60*duration_hua));
其中,offsetX表示所述輪廓曲線的水平偏移量;
offsetX0表示所述水平偏移初始值;
speed_hua表示所述滑動操作的速度;
i表示所述輪廓曲線對應(yīng)的周期數(shù);
A表示所述輪廓曲線的垂直幅度值;
A0表示所述垂直幅度初始值;
duration_hua表示所述波動動效的持續(xù)時間。
在一可選實施方式中,所述波動動效為水波紋動效、心電圖動效、彈簧動效或振蕩衰減動效。
相應(yīng)地,本申請實施例還提供一種界面顯示方法,包括:
顯示一界面的入口;
響應(yīng)于對所述入口的點擊操作,在所述界面上,顯示動效以及與所述動效同步動作的界面元素。
在一可選實施方式中,所述動效以及所述界面元素的顯示步驟,包括:
在所述界面的邊界、頂部區(qū)域、底部區(qū)域或中間區(qū)域,顯示所述動效以及所述界面元素。
在一可選實施方式中,所述動效和/或所述界面元素的顯示步驟,還包括:在所述界面上,以預(yù)設(shè)規(guī)律變化的可視化屬性,顯示所述動效和/或所述界面元素。
在一可選實施方式中,所述動效為波動動效;其中,所述可視化屬性包括:幅度、頻率、顏色、持續(xù)時間中的至少一種。
在一可選實施方式中,所述動效以及所述界面元素的顯示步驟,還包括:
在所述界面上,周期性地繪制所述波動動效的輪廓曲線,或者水平偏移量不同的多條輪廓曲線,以形成所述波動動效;以及
在繪制所述輪廓曲線的過程中,根據(jù)所述界面元素與所述波動動效之間的相對位置,動態(tài)調(diào)整所述界面元素的位置。
在一可選實施方式中,所述輪廓曲線的繪制步驟,包括:
根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù),結(jié)合預(yù)設(shè)水平偏移步長,確定所述輪廓曲線的水平偏移量;
根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值,在所述界面上繪制所述輪廓曲線。
在一可選實施方式中,所述輪廓曲線的繪制步驟,還包括:
根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值,確定所述輪廓曲線在所述界面上的像素點;
連接所述像素點,以形成所述輪廓曲線;
閉合所述輪廓曲線;
填充所述閉合后的輪廓曲線。
在一可選實施方式中,所述波動動效為水波紋動效、心電圖動效、彈簧動效或振蕩衰減動效。
在一可選實施方式中,所述界面為用戶詳情界面;所述界面元素為用戶頭像圖標(biāo)。
本申請又一實施例提供一種界面元素的滑動控制裝置,包括:
界面顯示單元,用于顯示一界面,所述界面包含可滑動的第一界面元素;
動效顯示單元,用于響應(yīng)于對所述第一界面元素的滑動操作,在所述界面上,與所述滑動操作關(guān)聯(lián)地顯示動效。
在一可選實施方式中,動效顯示單元具體用于:在所述第一界面元素的周邊,與所述滑動操作關(guān)聯(lián)地顯示所述動效。
在一可選實施方式中,動效顯示單元具體用于執(zhí)行以下至少一種顯示操作:
在所述第一界面元素所在區(qū)域的相鄰區(qū)域,與所述滑動操作關(guān)聯(lián)地顯示所述動效;
在所述第一界面元素的內(nèi)邊界,與所述滑動操作關(guān)聯(lián)地顯示所述動效;
在所述第一界面元素的外邊界,與所述滑動操作關(guān)聯(lián)地顯示所述動效;以及
在所述第一界面元素與其相鄰界面元素的交界,與所述滑動操作關(guān)聯(lián)地顯示所述動效。
在一可選實施方式中,所述動效顯示單元還用于:響應(yīng)于對所述第一界面元素的滑動操作,沿滑動方向移動所述第一界面元素;以及
接續(xù)于所述第一界面元素,將第二界面元素移入所述界面。
在一可選實施方式中,所述動效顯示單元還用于:響應(yīng)于對所述第一界面元素的滑動操作,在所述界面上,以與所述滑動操作的速度成比例變化的可視化屬性,顯示所述動效。
在一可選實施方式中,所述動效為波動動效,其中,所述可視化屬性包括:幅度、頻率、顏色、持續(xù)時間中的至少一種。
在一可選實施方式中,所述動效顯示單元還用于:在所述第一界面元素的邊界上,周期性地繪制所述波動動效的輪廓曲線,或者水平偏移量不同的多條輪廓曲線,以形成所述波動動效。
在一可選實施方式中,所述動效顯示單元具體用于:
根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù),結(jié)合所述滑動操作的速度,確定所述輪廓曲線的水平偏移量;
根據(jù)垂直幅度初始值和所述輪廓曲線對應(yīng)的周期數(shù),結(jié)合所述波動動效的持續(xù)時間,確定所述輪廓曲線的垂直幅度值;
根據(jù)所述輪廓曲線的水平偏移量和垂直幅度值,在所述第一界面元素的邊界上繪制所述輪廓曲線。
在一可選實施方式中,所述動效顯示單元具體用于:
根據(jù)所述輪廓曲線的水平偏移量和垂直幅度值,確定所述輪廓曲線在所述第一界面元素的邊界上的像素點;
連接所述像素點,以形成所述輪廓曲線;
閉合所述輪廓曲線;
填充所述閉合后的輪廓曲線。
在一可選實施方式中,所述輪廓曲線為正弦曲線/余弦曲線;其中,
所述動效顯示單元具體用于根據(jù)公式offsetX=offsetX0+(i-1)*speed_hua,確定所述輪廓曲線的水平偏移量;
所述動效顯示單元具體用于根據(jù)公式A=A0*(1-(i-1)/(60*duration_hua)),確定所述輪廓曲線的垂直幅度值;
其中,offsetX表示所述輪廓曲線的水平偏移量;
offsetX0表示所述水平偏移初始值;
speed_hua表示所述滑動操作的速度;
i表示所述輪廓曲線對應(yīng)的周期數(shù);
A表示所述輪廓曲線的垂直幅度值;
A0表示所述垂直幅度初始值;
duration_hua表示所述波動動效的持續(xù)時間。
在一可選實施方式中,所述波動動效為水波紋動效、心電圖動效、彈簧動效或振蕩衰減動效。
本申請實施還提供一種電子設(shè)備,所述電子設(shè)備包括顯示器、處理器和存儲器,所述存儲器用于存儲上述界面元素的滑動控制裝置執(zhí)行上述界面元素的滑動控制方法的程序,所述處理器被配置為用于執(zhí)行所述存儲器中存儲的程序,所述顯示器被配置為顯示所述處理器輸出的內(nèi)容。所述電子設(shè)備還可以包括通信接口,用于電子設(shè)備與其他設(shè)備或通信網(wǎng)絡(luò)通信。
本申請實施例還提供一種計算機存儲介質(zhì),用于儲存上述界面元素的滑動控制裝置所用的計算機軟件指令,其包含用于執(zhí)行上述界面元素的滑動控制方法為上述界面元素的滑動控制裝置所涉及的程序。
本申請又一實施例提供一種界面顯示裝置,包括:
入口顯示單元,用于顯示一界面入口;
動效顯示單元,用于響應(yīng)于對所述入口的點擊操作,在所述界面上,顯示動效以及與所述動效同步動作的界面元素。
在一可選實施方式中,所述動效顯示單元具體用于:
在所述界面的邊界、頂部區(qū)域、底部區(qū)域或中間區(qū)域,顯示所述動效以及所述界面元素。
在一可選實施方式中,所述動效顯示單元還用于:在所述界面上,以預(yù)設(shè)規(guī)律變化的可視化屬性,顯示所述動效和/或所述界面元素。
在一可選實施方式中,所述動效為波動動效;其中,所述可視化屬性包括:幅度、頻率、顏色、持續(xù)時間中的至少一種。
在一可選實施方式中,所述動效顯示單元還用于:
在所述界面上,周期性地繪制所述波動動效的輪廓曲線,或者水平偏移量不同的多條輪廓曲線,以形成所述波動動效;以及
在繪制所述輪廓曲線的過程中,根據(jù)所述界面元素與所述波動動效之間的相對位置,動態(tài)調(diào)整所述界面元素的位置。
在一可選實施方式中,所述動效顯示單元具體用于:
根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù),結(jié)合預(yù)設(shè)水平偏移步長,確定所述輪廓曲線的水平偏移量;
根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值,在所述界面上繪制所述輪廓曲線。
在一可選實施方式中,所述動效顯示單元具體用于:
根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值,確定所述輪廓曲線在所述界面上的像素點;
連接所述像素點,以形成所述輪廓曲線;
閉合所述輪廓曲線;
填充所述閉合后的輪廓曲線。
在一可選實施方式中,所述波動動效為水波紋動效、心電圖動效、彈簧動效或振蕩衰減動效。
在一可選實施方式中,所述界面為用戶詳情界面;所述界面元素為用戶頭像圖標(biāo)。
本申請實施還提供一種電子設(shè)備,所述電子設(shè)備包括顯示器、處理器和存儲器,所述存儲器用于存儲上述界面顯示裝置執(zhí)行上述界面顯示方法的程序,所述處理器被配置為用于執(zhí)行所述存儲器中存儲的程序,所述顯示器被配置為顯示所述處理器輸出的內(nèi)容。所述電子設(shè)備還可以包括通信接口,用于電子設(shè)備與其他設(shè)備或通信網(wǎng)絡(luò)通信。
本申請實施例還提供一種計算機存儲介質(zhì),用于儲存上述界面顯示裝置所用的計算機軟件指令,其包含用于執(zhí)行上述界面顯示方法為上述界面顯示裝置所涉及的程序。
在本申請實施例中,響應(yīng)于對第一界面元素的滑動操作,在界面上,與滑動操作關(guān)聯(lián)的顯示動效,增加了滑動操作的趣味性,有利于提高用戶對滑動操作的新鮮感,可增加用戶執(zhí)行滑動操作的次數(shù),提高后續(xù)界面元素的曝光率。
附圖說明
此處所說明的附圖用來提供對本申請的進一步理解,構(gòu)成本申請的一部分,本申請的示意性實施例及其說明用于解釋本申請,并不構(gòu)成對本申請的不當(dāng)限定。在附圖中:
圖1為本申請一實施例提供的界面元素的滑動控制方法的流程示意圖;
圖2為本申請另一實施例提供的外賣應(yīng)用的界面示意圖;
圖3a為本申請又一實施例提供的水波紋動效的一種輪廓曲線的示意圖;
圖3b為本申請又一實施例提供的心電圖動效的一種輪廓曲線的示意圖;
圖3c為本申請又一實施例提供的彈簧動效的一種輪廓曲線的示意圖;
圖3d為本申請又一實施例提供的振蕩衰減動效的一種輪廓曲線的示意圖;
圖4a-圖4c為本申請又一實施例提供的以外賣類應(yīng)用為例演示滑動動效的界面示意圖;
圖4d為本申請又一實施例提供的界面元素的滑動控制方法的流程示意圖;
圖5為本申請又一實施例提供的水平偏移不同的余弦或正弦曲線的示意圖;
圖6為本申請又一實施例提供的界面顯示方法的流程示意圖;
圖7a-7c為本申請又一實施例提供的用戶頭像圖標(biāo)漂浮于水波紋動效上的示意圖;
圖8為本申請又一實施例提供的界面元素的滑動控制裝置的結(jié)構(gòu)示意圖;
圖9為本申請又一實施例提供的界面顯示裝置的結(jié)構(gòu)示意圖。
具體實施方式
為使本申請的目的、技術(shù)方案和優(yōu)點更加清楚,下面將結(jié)合本申請具體實施例及相應(yīng)的附圖對本申請技術(shù)方案進行清楚、完整地描述。顯然,所描述的實施例僅是本申請一部分實施例,而不是全部的實施例?;诒旧暾堉械膶嵤├?,本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例,都屬于本申請保護的范圍。
圖1為本申請一實施例提供的界面元素的滑動控制方法的流程示意圖。如圖1所示,所述方法包括:
101、顯示一界面,所述界面包含可滑動的第一界面元素。
102、響應(yīng)于對第一界面元素的滑動操作,在所述界面上,與所述滑動操作關(guān)聯(lián)地顯示動效。
本實施例提供的方法可應(yīng)用于任何支持滑動操作的應(yīng)用,例如電子商務(wù)類應(yīng)用、游戲類應(yīng)用、即時通訊類應(yīng)用等等。這些應(yīng)用提供界面,用于展示應(yīng)用相關(guān)的界面元素,同時也是用戶與應(yīng)用進行交互的通道。所述界面可以是應(yīng)用啟動時的首界面,也可以是應(yīng)用使用過程中的界面。另外,根據(jù)應(yīng)用的不同,界面的實現(xiàn)形式以及界面元素的實現(xiàn)形式都會有所不同,本實施例對此不做限定。
在本實施例中,界面上顯示有第一界面元素,第一界面元素支持滑動操作,即用戶可滑動第一界面元素。如果用戶滑動第一界面元素,第一界面元素可沿滑動方向移動,例如可以向上移動或向下移動或滑出所述界面等。
在本實施例中,為了增加滑動操作的趣味性,提高用戶對滑動操作的新鮮感,將動效與滑動操作相關(guān)聯(lián)。當(dāng)用戶滑動第一界面元素時,可捕捉到針對第一界面元素的滑動操作,響應(yīng)于該滑動操作,可在界面上,與滑動操作關(guān)聯(lián)地顯示動效。
在本實施例中,將動效與滑動操作相關(guān)聯(lián),有利于提高用戶對滑動操作的新鮮感,從用戶角度來看,為了體驗動效,可能會多次執(zhí)行滑動操作,增加了滑動操作的次數(shù);進一步,從界面角度來說,為了保證或提高界面的利用率,一個界面元素因滑動而空出的界面區(qū)域勢必有另一個界面元素補入,提高了界面元素的曝光率。
在上述實施例或下述實施例中,在與滑動操作關(guān)聯(lián)地顯示動效的實現(xiàn)過程中,可涉及但不限于以下至少一方面的內(nèi)容:動效的顯示位置、動效的行為、動效的基本樣式、動效的實現(xiàn)手段、動效的應(yīng)用等。其中,“與滑動操作關(guān)聯(lián)地顯示動效”可單獨涉及某一方面的內(nèi)容,也可以以任意組合方式涉及多方面的內(nèi)容。下面將針對每一方面單獨進行說明:
動效的顯示位置:原則上,動效只需顯示于產(chǎn)生滑動操作的界面上即可,對動效在所述界面上的具體顯示位置可不做限定。當(dāng)然,在本申請上述實施例或下述實施例中,也可以通過進一步限定動效在界面上的顯示位置,以發(fā)揮動效帶來的有益效果。
可選地,在本申請上述實施例或下述實施例中,與滑動操作關(guān)聯(lián)地顯示動效的步驟,可以為:在第一界面元素的周邊,與滑動操作關(guān)聯(lián)地顯示動效。第一界面元素的周邊可以是界面上距離第一界面元素一定范圍內(nèi)的區(qū)域。所述一定范圍可以根據(jù)應(yīng)用場景、應(yīng)用需求以及終端屏幕等因素而適應(yīng)性設(shè)置。
舉例說明,所述第一界面元素的周邊可以包括但不限于以下至少一種:第一界面元素所在區(qū)域的相鄰區(qū)域、第一界面元素的內(nèi)邊界、第一界面元素的外邊界、第一界面元素與其相鄰界面元素的交界等。
例如,在一應(yīng)用實例中,界面被劃分為不同的區(qū)域,不同區(qū)域展示不同的界面元素。界面上某一區(qū)域展示第一界面元素,則可響應(yīng)于對第一界面元素的滑動操作,在第一界面元素所在區(qū)域的相鄰區(qū)域內(nèi),與滑動操作關(guān)聯(lián)地顯示動效。參考圖2,圖2所示為某一外賣應(yīng)用的界面,該界面從上往下依次包括頂部區(qū)域(圖2中的黑色區(qū)域)、類目導(dǎo)航區(qū)域、頭條區(qū)域、新年特惠區(qū)域等。在圖2中,第一界面元素為“火鍋節(jié)宣傳圖片”,展示于界面的頂部區(qū)域;類目導(dǎo)航區(qū)域為第一界面元素所在區(qū)域的相鄰區(qū)域,當(dāng)用戶滑動“火鍋節(jié)宣傳圖片”時,可在類目導(dǎo)航區(qū)域顯示動效,以提高滑動操作的趣味性。
又例如,在一應(yīng)用實例中,可響應(yīng)于對第一界面元素的滑動操作,在第一界面元素的內(nèi)邊界,與滑動操作關(guān)聯(lián)地顯示動效。繼續(xù)參考圖2,當(dāng)用戶滑動“火鍋節(jié)宣傳圖片”時,可在黑色分界線內(nèi)側(cè)顯示動效,以提高滑動操作的趣味性。進一步可選地,可以在第一界面元素頂部黑色分界線的內(nèi)側(cè)顯示動效;或者,可以在第一界面元素底部黑色分界線的內(nèi)側(cè)顯示動效;或者,可以在第一界面元素左側(cè)黑色分界線的內(nèi)側(cè)顯示動效;或者,可以在第一界面元素右側(cè)黑色分界線的內(nèi)側(cè)顯示動效。
又例如,在一應(yīng)用實例中,可響應(yīng)于對第一界面元素的滑動操作,在第一界面元素的外邊界,與滑動操作關(guān)聯(lián)地顯示動效。繼續(xù)參考圖2,當(dāng)用戶滑動“火鍋節(jié)宣傳圖片”時,可在黑色分界線外側(cè)顯示動效,以提高滑動操作的趣味性。值得說明的是,在圖2中,第一界面元素頂部、左側(cè)以及右側(cè)黑色分界線的外側(cè)均超出界面范圍,故優(yōu)選在第一界面元素底部黑色分界線的外側(cè)顯示動效,底部黑色分界線的外側(cè)實際上是類目導(dǎo)航區(qū)域的范圍。
又例如,在一應(yīng)用實例中,可響應(yīng)于對第一界面元素的滑動操作,在第一界面元素與其相鄰界面元素的交界,與滑動操作關(guān)聯(lián)地顯示動效。繼續(xù)參考圖2,假設(shè)第一界面元素為“每日1元”,則當(dāng)用戶滑動“每日1元”時,可在“每日1元”與“新年特惠”,“每日1元”與“起司家”,“每日1元”與“小資最愛”,以及“每日1元”與“外賣頭條”等交界中的至少一個交界處顯示動效,以提高滑動操作的趣味性。
其中,在用戶滑動的第一界面元素的周邊顯示動效,動效距離第一界面元素相對較近,便于用戶關(guān)注到動效,有利于突出動效帶來的有效效果。
當(dāng)然,除了在第一界面元素的周邊顯示動效之外,還可以在界面上的其它位置顯示動效。
動效的行為:原則上,動效可以是具有任何行為的動態(tài)內(nèi)容,對動效的具體行為可不做限定。當(dāng)然,在本申請上述實施例或下述實施例中,也可以通過進一步限定動效的行為,以發(fā)揮動效帶來的有益效果。
可選地,在本申請上述實施例或下述實施例中,與滑動操作關(guān)聯(lián)地顯示動效的步驟,可以為:響應(yīng)于對第一界面元素的滑動操作,在界面上,以與滑動操作的速度成比例變化的可視化屬性,顯示動效。簡單來說,動效的行為主要通過動效的可視化屬性來體現(xiàn),具體為:動效的可視化屬性,與滑動操作的速度成比例的變化。這里的可視化屬性是指用戶能夠直觀看到的屬性,例如可以是動效的顏色、持續(xù)時間、幅度、頻率、軌跡等。其中,不同動效的可視化屬性也會有所不同。
在一應(yīng)用實例中,動效的可視化屬性包括顏色,則動效的顏色可以與滑動操作的速度成比例的變化。例如,動效的顏色可以從暗到亮變化,則滑動操作的速度越快,動效的顏色從暗到亮的變化越快;相反的,滑動操作的速度越慢,動效的顏色從暗到亮的變化也就越慢。又例如,動效的顏色可以按照設(shè)定的顏色順序變換,則滑動操作的速度越快,動效的顏色按照設(shè)定的顏色順序變換的速度越快;相反,滑動操作的速度越慢,動效的顏色按照設(shè)定的顏色順序變換的速度越慢。
在另一應(yīng)用實例中,動效的可視化屬性包括持續(xù)時間,則動效的持續(xù)時間可以與滑動操作的速度成比例的變化。例如,滑動操作的速度越快,動效的持續(xù)時間越長;相反,滑動操作的速度越慢,動效的持續(xù)時間越短。或者,滑動操作的速度越慢,動效的持續(xù)時間越長;相反,滑動操作的速度越快,動效的持續(xù)時間越短。
在又一應(yīng)用實例中,動效的可視化屬性包括幅度,則動效的幅度可以與滑動操作的速度成比例的變化。例如,滑動操作的速度越快,動效的幅度衰減越快;相反,滑動操作的速度越慢,動效的幅度衰減越慢。或者,滑動操作的速度越快,動效的幅度衰減越慢;相反,滑動操作的速度越慢,動效的幅度衰減越快。
在又一應(yīng)用實例中,動效的可視化屬性包括頻率,則動效的頻率可以與滑動操作的速度成比例的變化。例如,滑動操作的速度越快,動效的頻率越快;相反,滑動操作的速度越慢,動效的頻率越慢?;蛘撸瑒硬僮鞯乃俣仍铰瑒有У念l率越快;相反,滑動操作的速度越快,動效的頻率越慢。
其中,通過動效的可視化屬性體現(xiàn)動效的行為,更加直觀,便于用戶關(guān)注到動效,而與滑動操作的速度成比例變化,可以進一步增加用戶對滑動操作的興趣度,可刺激用戶嘗試不同速度的滑動操作,以進一步發(fā)揮動效帶來的有益效果。
動效的基本樣式:原則上,動效可以是具有任何行為的動態(tài)內(nèi)容,對其樣式可不做限定。當(dāng)然,在本申請上述實施例或下述實施例中,也可以通過進一步限定動效的基本樣式,以發(fā)揮動效帶來的有益效果。
可選地,在本申請上述實施例或下述實施例中,與滑動操作關(guān)聯(lián)顯示的動效可以是波動動效。進一步,所述波動動效可以包括:水波紋動效、心電圖動效、彈簧動效、以及振蕩衰減動效中的至少一種。
水波紋動效是指在界面上實現(xiàn)的類似水波波動的動效。其中,水波紋動效是一個動態(tài)變化的過程,不便于圖示。為便于理解,圖3a示出水波紋動效的一種輪廓曲線。值得說明的是,圖3a所示輪廓曲線僅為一種示例,并不限于此。其中,根據(jù)水波紋動效的幅度、波動頻率等不同,水波紋動效的輪廓曲線也會有所不同。
心電圖動效是指在界面上實現(xiàn)的類似心臟產(chǎn)生的電活動變化的動效。其中,心電圖動效是一個動態(tài)變化的過程,不便于圖示。為便于理解,圖3b示出心電圖動效的一種輪廓曲線。值得說明的是,圖3b所示輪廓曲線僅為一種示例,并不限于此。其中,根據(jù)心電圖動效的波動頻率等不同,心電圖動效的輪廓曲線也會有所不同。
彈簧動效是指在界面上實現(xiàn)的類似彈簧收縮/伸張變化的動效。其中,彈簧動效是一個動態(tài)變化的過程,不便于圖示。為便于理解,圖3c示出彈簧動效的一種輪廓曲線。值得說明的是,圖3c所示輪廓曲線僅為一種示例,并不限于此。其中,根據(jù)彈簧動效的收縮/伸張頻率等不同,彈簧動效的輪廓曲線也會有所不同。
振蕩衰減動效是指在界面上實現(xiàn)的類似物體振蕩衰減變化的動效。其中,振蕩衰減動效是一個動態(tài)變化的過程,不便于圖示。為便于理解,圖3d示出振蕩衰減動效的一種輪廓曲線。值得說明的是,圖3d所示輪廓曲線僅為一種示例,并不限于此。其中,根據(jù)振蕩衰減動效的幅度、衰減速度等不同,振蕩衰減動效的輪廓曲線也會有所不同。
當(dāng)然,除了上述波動動效之外,與滑動操作關(guān)聯(lián)顯示的動效還可以是其它樣式,例如跳動的球球、從大到小漸變的圖像、飄落的雪花、閃動的圖標(biāo)等等。
值得說明的是,動效的基本樣式與動效的行為可以相互結(jié)合。不同樣式的動效,具有不同的可視化屬性,從而實現(xiàn)不同的動態(tài)效果。例如,以波動動效為例,波動動效的可視化屬性可以包括幅度、頻率、顏色、持續(xù)時間等中的至少一種。這里的頻率主要是指波動頻率。
在一應(yīng)用實例中,波動動效的可視化屬性包括幅度和波動頻率,則動效的波動幅度和波動頻率均可以與滑動操作的速度成比例的變化。例如,滑動操作的速度越快,波動動效的幅度衰減越快,波動動效的波動頻率越快;相反,滑動操作的速度越慢,波動動效的幅度衰減越慢,波動動效的波動頻率越慢。
在另一應(yīng)用實例中,波動動效的可視化屬性包括幅度、波動頻率以及持續(xù)時間,則動效的波動幅度、波動頻率以及持續(xù)時間均可以與滑動操作的速度成比例的變化。例如,滑動操作的速度越快,波動動效的幅度衰減越快,波動動效的波動頻率越快,波動動效的持續(xù)時間越短;相反,滑動操作的速度越慢,波動動效的幅度衰減越慢,波動動效的波動頻率越慢,波動動效的持續(xù)時間越長。
動效的實現(xiàn)手段:原則上,本申請各實施例可以采用任何能夠按照本申請實施例中動效的基本樣式以及行為實現(xiàn)所述動效的技術(shù)手段。例如,可以采用視覺類創(chuàng)作工具,如Photoshop、After Effects等制作動效。又例如,可以采用前端設(shè)計方法,如CSS、JavaScript等制作動效。當(dāng)然,也可以結(jié)合動效的基本樣式以及行為,采用曲線繪制方式來實現(xiàn)。
在一應(yīng)用實例中,可響應(yīng)于對第一界面元素的滑動操作,在第一界面元素的邊界(包括內(nèi)邊界和/或外邊界)上顯示波動動效。以此為例,與滑動操作關(guān)聯(lián)地顯示動效的步驟,可以為:在第一界面元素的邊界上,周期性地繪制波動動效的輪廓曲線,或者水平偏移量不同的多條輪廓曲線,以形成波動動效。
在一種實現(xiàn)方式中,可基于滑動操作的速度確定水平偏移步長,不同周期繪制的輪廓曲線的水平偏移量可按照所述水平偏移步長增長??蛇x地,可以直接將滑動操作的速度轉(zhuǎn)換為水平偏移步長。另外,可基于波動動效的持續(xù)時間確定波動動效的幅度衰減速度,不同周期繪制的輪廓曲線的垂直幅度值可按照所述幅度衰減速度進行衰減??蛇x地,可以取波動動效的持續(xù)時間的倒數(shù)作為幅度衰減速度。
基于上述原理,水平偏移量不同的輪廓曲線的繪制步驟,可以為:根據(jù)水平偏移初始值和輪廓曲線對應(yīng)的周期數(shù),結(jié)合滑動操作的速度,確定輪廓曲線的水平偏移量;根據(jù)垂直幅度初始值和輪廓曲線對應(yīng)的周期數(shù),結(jié)合波動動效的持續(xù)時間,確定輪廓曲線的垂直幅度值;根據(jù)輪廓曲線的水平偏移量和垂直幅度值,在第一界面元素的邊界上繪制輪廓曲線。
進一步可選地,上述基于水平偏移量和垂直幅度值,在第一界面元素的邊界上繪制輪廓曲線的步驟,可以為:根據(jù)輪廓曲線的水平偏移量和垂直幅度值,確定輪廓曲線在第一界面元素的邊界上的像素點;連接所述像素點,以形成所述輪廓曲線;閉合所述輪廓曲線;填充所述閉合后的輪廓曲線。
在一可選實施方式中,波動動效為水波紋動效,相應(yīng)的,波動動效的輪廓曲線為正弦曲線/余弦曲線?;诖?,可分別根據(jù)下述公式(1)和(2)確定輪廓曲線的水平偏移量和垂直幅度值;
offsetX=offsetX0+(i-1)*speed_hua (1)
A=A0*(1-(i-1)/(60*duration_hua)) (2)
在上述公式(1)和(2)中,offsetX表示輪廓曲線的水平偏移量;offsetX0表示水平偏移初始值,可根據(jù)應(yīng)用場景、應(yīng)用需求以及動效樣式等因素適應(yīng)性設(shè)置;speed_hua表示滑動操作的速度;i表示輪廓曲線對應(yīng)的周期數(shù);A表示輪廓曲線的垂直幅度值;A0表示垂直幅度初始值,可根據(jù)應(yīng)用場景、應(yīng)用需求以及動效樣式等因素適應(yīng)性設(shè)置;duration_hua表示波動動效的持續(xù)時間,可根據(jù)應(yīng)用場景、應(yīng)用需求以及動效樣式等因素適應(yīng)性設(shè)置。
基于上述公式(1)和(2)計算出的水平偏移量和垂直幅度值,可采用下述公式(3)或(4),計算像素點的坐標(biāo)。
y=A*cos(waveCount*π*x/waveWidth+offsetX*π/waveWidth)+offsetY0 (3)
y=A*sin(waveCount*π*x/waveWidth+offsetX*π/waveWidth)+offsetY0 (4)
在上述公式(3)和(4)中,waveWidth表示水波紋動效中一個波紋的寬度,可根據(jù)應(yīng)用場景、應(yīng)用需求以及動效樣式等因素適應(yīng)性設(shè)置;offsetY0表示垂直偏移量可根據(jù)應(yīng)用場景、應(yīng)用需求以及動效樣式等因素適應(yīng)性設(shè)置;x表示像素點的水平坐標(biāo)值,其取值為[0,max],max的值可根據(jù)應(yīng)用場景、應(yīng)用需求以及動效樣式等因素適應(yīng)性設(shè)置;相應(yīng)的,y表示像素點的垂直坐標(biāo)值,其取值為[y(0),y(max)]。
動效的應(yīng)用:本申請上述實施或下述實施例提供的動效與滑動操作相關(guān)聯(lián),原則上,可應(yīng)用于任何支持滑動操作的應(yīng)用,例如電子商務(wù)類應(yīng)用、游戲類應(yīng)用、即時通訊類應(yīng)用等等。
在下述實施例中,以電子商務(wù)應(yīng)用場景中的外賣類應(yīng)用為例,結(jié)合外賣類應(yīng)用的界面圖示,詳細說明本申請技術(shù)方案的操作流程。
參考圖4a-圖4c,一種界面元素的滑動控制方法如圖4d所示,包括以下步驟:
401、顯示一界面,所述界面包含可滑動的第一界面元素。
參考圖4a,外賣類應(yīng)用的首界面的頂部區(qū)域顯示有第一界面元素,即“火鍋節(jié)宣傳圖片”。
402、響應(yīng)于對第一界面元素的滑動操作,沿滑動方向移動第一界面元素,接續(xù)于第一界面元素,將第二界面元素移入所述界面;以及在所述界面上,與滑動操作關(guān)聯(lián)地顯示動效。
參考圖4b,當(dāng)用戶向界面左側(cè)滑動“火鍋節(jié)宣傳圖片”時,“火鍋節(jié)宣傳圖片”向界面左側(cè)移出,同時,“新年要常吃雞宣傳圖片”從界面右側(cè)移入界面。值得說明的是,在圖4b中,在“火鍋節(jié)宣傳圖片”和“新年要常吃雞宣傳圖片”的底部已經(jīng)出現(xiàn)水波紋動效,但并不限于此。
繼續(xù)參考圖4c,“火鍋節(jié)宣傳圖片”完全移出界面,“新年要常吃雞宣傳圖片”完全移入界面,且其底部出現(xiàn)水波紋動效。
在本實施例中,水波紋動效是通過余弦函數(shù)y=Acos(ωx+φ)+h或正弦函數(shù)y=Asin(ωx+φ)+h,周期性繪制水平偏移量不同的余弦曲線或正弦曲線形成的。具體可通過利用微分的思想,通過余弦函數(shù)或正弦函數(shù)求得很多很多的點的坐標(biāo),然后將這些點連成一條線,就可以得到一條余弦或正弦曲線。
在本實施例中,水波紋動效的波動頻率與滑動速率成比例的改變,具體可通過滑動速率v來等比例修改φ值來實現(xiàn)。
在本實施例中,水波紋動效的幅度隨著持續(xù)時間逐漸衰減,當(dāng)持續(xù)時間結(jié)束時波動幅度逐漸趨0,具體可以通過每次繪制余弦或正弦曲線時,逐漸減小A值來實現(xiàn)。
在實現(xiàn)上,預(yù)先配置以下參數(shù):
A0:水波紋的初始固定波峰,即垂直幅度初始值;
waveWidth:一個波紋的寬度;
offsetX0:X軸的初始偏移量,即水平偏移初始值;
offsetY0:Y軸的固定偏移量,即垂直偏移量;
duration_hua:總波動時長,即水波紋動效的持續(xù)時間。
當(dāng)用戶滑動“火鍋節(jié)宣傳圖片”時,捕獲滑動操作的速度,記為speed_hua;啟動定時器,在每個計時周期到達時,根據(jù)公式(1)、(2)和(3)或公式(1)、(2)和(4),計算該周期內(nèi)余弦或正弦曲線上像素點的坐標(biāo)值,進而基于計算出的坐標(biāo)值,繪制余弦或正弦曲線,形成視覺上的水波紋動效。其中,不同周期繪制的余弦或正弦曲線的水平偏移不同,一種示例如圖5所示。
在外賣類應(yīng)用中,響應(yīng)于對界面上相應(yīng)元素的滑動操作,在界面上,與滑動操作關(guān)聯(lián)的顯示動效,增加了滑動操作的趣味性,有利于提高用戶對滑動操作的新鮮感,可增加用戶執(zhí)行滑動操作的次數(shù),提高后續(xù)界面元素的曝光率。
圖6為本申請又一實施例提供的界面顯示方法的流程示意圖。如圖6所示,所述方法包括:
601、顯示一界面的入口。
602、響應(yīng)于對所述入口的點擊操作,在所述界面上,顯示動效以及與所述動效同步動作的界面元素。
本實施例提供的方法可應(yīng)用于任何應(yīng)用,例如電子商務(wù)類應(yīng)用、游戲類應(yīng)用、即時通訊類應(yīng)用等等。這些應(yīng)用提供界面,用于展示應(yīng)用相關(guān)的界面元素。所述界面可以是應(yīng)用啟動時的首界面,也可以是應(yīng)用使用過程中的界面。另外,這些應(yīng)用還會提供進入界面的入口。例如,對應(yīng)用的首界面來說,應(yīng)用圖標(biāo)即可視為進入首界面的入口,用戶點擊應(yīng)用圖標(biāo)啟動應(yīng)用,進而顯示首界面。對應(yīng)用的非首界面,上一界面(如首界面)上的導(dǎo)航按鈕或相關(guān)鏈接等可作為進入該非首界面的入口,用戶通過點擊上一界面(如首界面)上的導(dǎo)航按鈕或相關(guān)鏈接等進入該非首界面。
在本實施例中,響應(yīng)于用戶對界面入口的點擊操作,顯示所述界面;在該界面上除了顯示常規(guī)內(nèi)容之外,還顯示有動效以及與動效同步動作的界面元素。這樣可以增加界面的趣味性,便于用戶點擊進入該界面,進而增加該界面上內(nèi)容的曝光率。
在上述實施例或下述實施例中,并不限定動效以及與動效同步動作的界面元素在界面上的顯示位置。例如,可以在界面的邊界、頂部區(qū)域、底部區(qū)域或中間區(qū)域,顯示動效以及與動效同步動作的界面元素。
在上述實施例或下述實施例中,并不限定動效和/或與動效同步動作的界面元素的行為或變化風(fēng)格??蛇x地,可以通過可視化屬性體現(xiàn)動效和/或與動效同步動作的界面元素的行為?;诖耍瑒有Ш?或與動效同步動作的界面元素的顯示步驟,可以為:在界面上,以預(yù)設(shè)規(guī)律變化的可視化屬性,顯示動效和/或與動效同步動作的界面元素。這里的可視化屬性是指用戶能夠直觀看到的屬性,例如可以是動效的顏色、持續(xù)時間、幅度、頻率、軌跡等。其中,不同動效的可視化屬性也會有所不同。
在一應(yīng)用實例中,動效的可視化屬性包括顏色,則動效的顏色可以按照預(yù)設(shè)規(guī)律變化。例如,動效的顏色可以按照預(yù)設(shè)的變化速度從暗到亮逐漸變化;或者,動效的顏色也可以按照預(yù)設(shè)的變化速度從亮到暗逐漸變化。
在另一應(yīng)用實例中,動效的可視化屬性包括幅度,則動效的幅度可以按照預(yù)設(shè)的規(guī)律變化。例如,動效的顏色可以按照預(yù)設(shè)的變化速度從最大逐漸變化到某一預(yù)設(shè)值,例如0,再從該預(yù)設(shè)值開始逐漸變?yōu)樽畲蟆?/p>
在又一應(yīng)用實例中,與動效同步動作的界面元素的可視化屬性包括顏色,則動效的顏色可以按照預(yù)設(shè)規(guī)律變化。例如,界面元素的顏色可以按照預(yù)設(shè)的變化速度從暗到亮逐漸變化;或者,界面元素的顏色也可以按照預(yù)設(shè)的變化速度從亮到暗逐漸變化。
值得說明的是,對于與動效同步動作的界面元素和動效均具有的可視化屬性,與動效同步動作的界面元素可以與動效做相同變化,也可以與動效做不同變化,對此不做限定。
另外,在本申請實施例中,更為關(guān)注動效的可視化屬性的變化。
在上述實施例或下述實施例中,不限定動效的樣式??蛇x地,動效可以為波動動效。對波動動效來說,其可視化屬性包括但不限于此:幅度、頻率、顏色、持續(xù)時間中的至少一種。
進一步,波動動效可以是但不限于:水波紋動效、心電圖動效、彈簧動效或振蕩衰減動效。關(guān)于這些波動動效的說明可參見前述實施例,在此不再贅述。
基于上述波動動效,實現(xiàn)波動動效以及與波動動效同步動作的界面元素的步驟,可以為:在界面上,周期性地繪制波動動效的輪廓曲線,或者水平偏移量不同的多條輪廓曲線,以形成波動動效;以及在繪制輪廓曲線的過程中,根據(jù)界面元素與波動動效之間的相對位置,動態(tài)調(diào)整界面元素的位置,使得界面元素能與波動動效同步動作。對波動動效來說,界面元素能與波動動效同步動作主要是指界面元素以與波動動效相同的頻率波動。
在一種實現(xiàn)方式中,可預(yù)設(shè)水平偏移步長,不同周期繪制的輪廓曲線的水平偏移量可按照所述水平偏移步長增長。另外,可預(yù)設(shè)垂直幅度值,不同周期繪制的輪廓曲線的垂直幅度值保持不變?;诖耍狡屏坎煌妮喞€的繪制步驟,可以為:根據(jù)水平偏移初始值和輪廓曲線對應(yīng)的周期數(shù),結(jié)合預(yù)設(shè)水平偏移步長,確定輪廓曲線的水平偏移量;根據(jù)輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值,在界面上繪制輪廓曲線。
進一步可選地,上述基于水平偏移量和垂直幅度值,在第一界面元素的邊界上繪制輪廓曲線的步驟,可以為:根據(jù)輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值,確定輪廓曲線在所述界面上的像素點;連接所述像素點,以形成所述輪廓曲線;閉合所述輪廓曲線;填充所述閉合后的輪廓曲線。
對于波動動效為水波紋動效的情況,其輪廓曲線為正弦曲線/余弦曲線。水波紋動效是通過余弦函數(shù)y=Acos(ωx+φ)+h或正弦函數(shù)y=Asin(ωx+φ)+h,周期性繪制水平偏移量不同的余弦曲線或正弦曲線形成的。輪廓曲線的繪制過程可參見前述實施例,在此不再贅述。區(qū)別僅在于,該實施例中的水平偏移步長為預(yù)設(shè)值,而不是滑動操作的速度,且垂直幅度值不做衰減。
在上述實施或下述實施例中,所述界面可以是電子商務(wù)類應(yīng)用、游戲類應(yīng)用、即時通訊類應(yīng)用等中的界面。以電子商務(wù)應(yīng)用場景中的外賣類應(yīng)用為例,所述界面可以是用戶詳情界面;相應(yīng)的,與動效同步動作的界面元素可以是用戶頭像圖標(biāo)。以動效為水波紋動效為例,則本實施例提供的用戶詳情界面的示意圖如圖7a-7c所示。參見圖7a-7c,用戶頭像圖標(biāo)漂浮于水波紋動效之上,且跟隨水波紋上下浮動。
需要說明的是,上述實施例所提供方法的各步驟的執(zhí)行主體均可以是同一設(shè)備,或者,該方法也由不同設(shè)備作為執(zhí)行主體。比如,步驟201至步驟203的執(zhí)行主體可以為設(shè)備A;又比如,步驟201和202的執(zhí)行主體可以為設(shè)備A,步驟203的執(zhí)行主體可以為設(shè)備B;等等。
圖8為本申請又一實施例提供的界面元素的滑動控制裝置的結(jié)構(gòu)示意圖。如圖8所示,所述裝置包括:界面顯示單元81和動效顯示單元82。
界面顯示單元81,用于顯示一界面,所述界面包含可滑動的第一界面元素。
動效顯示單元82,用于響應(yīng)于對第一界面元素的滑動操作,在界面上,與滑動操作關(guān)聯(lián)地顯示動效。
在一可選實施方式中,動效顯示單元82具體用于:在第一界面元素的周邊,與滑動操作關(guān)聯(lián)地顯示動效。
在一可選實施方式中,動效顯示單元82具體用于執(zhí)行以下至少一種顯示操作:
在第一界面元素所在區(qū)域的相鄰區(qū)域,與滑動操作關(guān)聯(lián)地顯示動效;
在第一界面元素的內(nèi)邊界,與滑動操作關(guān)聯(lián)地顯示動效;
在第一界面元素的外邊界,與滑動操作關(guān)聯(lián)地顯示動效;以及
在第一界面元素與其相鄰界面元素的交界,與滑動操作關(guān)聯(lián)地顯示動效。
在一可選實施方式中,動效顯示單元82還用于:響應(yīng)于對第一界面元素的滑動操作,沿滑動方向移動第一界面元素;以及接續(xù)于第一界面元素,將第二界面元素移入界面。
在一可選實施方式中,動效顯示單元82還用于:響應(yīng)于對第一界面元素的滑動操作,在界面上,以與滑動操作的速度成比例變化的可視化屬性,顯示動效。
在一可選實施方式中,動效為波動動效,其中,可視化屬性包括:幅度、頻率、顏色、持續(xù)時間中的至少一種。
在一可選實施方式中,動效顯示單元82還用于:在第一界面元素的邊界上,周期性地繪制波動動效的輪廓曲線,或者水平偏移量不同的多條輪廓曲線,以形成波動動效。
在一可選實施方式中,動效顯示單元82具體用于:根據(jù)水平偏移初始值和輪廓曲線對應(yīng)的周期數(shù),結(jié)合滑動操作的速度,確定輪廓曲線的水平偏移量;根據(jù)垂直幅度初始值和輪廓曲線對應(yīng)的周期數(shù),結(jié)合波動動效的持續(xù)時間,確定輪廓曲線的垂直幅度值;根據(jù)輪廓曲線的水平偏移量和垂直幅度值,在第一界面元素的邊界上繪制輪廓曲線。
在一可選實施方式中,動效顯示單元82具體用于:根據(jù)輪廓曲線的水平偏移量和垂直幅度值,確定輪廓曲線在第一界面元素的邊界上的像素點;連接像素點,以形成輪廓曲線;閉合輪廓曲線;填充閉合后的輪廓曲線。
在一可選實施方式中,輪廓曲線為正弦曲線/余弦曲線?;诖耍瑒有э@示單元82具體用于根據(jù)公式(1),確定輪廓曲線的水平偏移量;相應(yīng)的,動效顯示單元82具體用于根據(jù)公式(2),確定輪廓曲線的垂直幅度值。關(guān)于公式(1)和(2)可參見前述方法實施例中的描述。
在一可選實施方式中,波動動效為水波紋動效、心電圖動效、彈簧動效或振蕩衰減動效。
本實施例提供的界面元素的滑動控制裝置,可用于執(zhí)行上述相應(yīng)方法的流程,詳細流程在此不再贅述。
本實施例提供的界面元素的滑動控制裝置,可響應(yīng)于對第一界面元素的滑動操作,在界面上,與滑動操作關(guān)聯(lián)的顯示動效,增加了滑動操作的趣味性,有利于提高用戶對滑動操作的新鮮感,可增加用戶執(zhí)行滑動操作的次數(shù),提高后續(xù)界面元素的曝光率。
本申請實施還提供一種電子設(shè)備,電子設(shè)備包括顯示器、處理器和存儲器,存儲器用于存儲上述界面元素的滑動控制裝置執(zhí)行上述界面元素的滑動控制方法的程序,處理器被配置為用于執(zhí)行存儲器中存儲的程序,顯示器被配置為顯示處理器輸出的內(nèi)容。電子設(shè)備還可以包括通信接口,用于電子設(shè)備與其他設(shè)備或通信網(wǎng)絡(luò)通信。
本申請實施例還提供一種計算機存儲介質(zhì),用于儲存上述界面元素的滑動控制裝置所用的計算機軟件指令,其包含用于執(zhí)行上述界面元素的滑動控制方法為上述界面元素的滑動控制裝置所涉及的程序。
圖9為本申請又一實施例提供的界面顯示裝置的結(jié)構(gòu)示意圖。如圖9所示,所述裝置包括:入口顯示單元91和動效顯示單元92。
入口顯示單元91,用于顯示一界面入口。
動效顯示單元92,用于響應(yīng)于對入口的點擊操作,在界面上,顯示動效以及與動效同步動作的界面元素。
在一可選實施方式中,動效顯示單元92具體用于:在界面的邊界、頂部區(qū)域、底部區(qū)域或中間區(qū)域,顯示動效以及界面元素。
在一可選實施方式中,動效顯示單元92還用于:在界面上,以預(yù)設(shè)規(guī)律變化的可視化屬性,顯示動效和/或界面元素。
在一可選實施方式中,動效為波動動效;其中,可視化屬性包括:幅度、頻率、顏色、持續(xù)時間中的至少一種。
在一可選實施方式中,動效顯示單元92還用于:在界面上,周期性地繪制波動動效的輪廓曲線,或者水平偏移量不同的多條輪廓曲線,以形成波動動效;以及在繪制輪廓曲線的過程中,根據(jù)界面元素與波動動效之間的相對位置,動態(tài)調(diào)整界面元素的位置。
在一可選實施方式中,動效顯示單元92具體用于:根據(jù)水平偏移初始值和輪廓曲線對應(yīng)的周期數(shù),結(jié)合預(yù)設(shè)水平偏移步長,確定輪廓曲線的水平偏移量;根據(jù)輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值,在界面上繪制輪廓曲線。
在一可選實施方式中,動效顯示單元92具體用于:根據(jù)輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值,確定輪廓曲線在界面上的像素點;連接像素點,以形成輪廓曲線;閉合輪廓曲線;填充閉合后的輪廓曲線。
在一可選實施方式中,波動動效為水波紋動效、心電圖動效、彈簧動效或振蕩衰減動效。
在一可選實施方式中,界面為用戶詳情界面;界面元素為用戶頭像圖標(biāo)。
本實施例提供的界面顯示裝置,可用于執(zhí)行上述相應(yīng)方法的流程,詳細流程在此不再贅述。
本實施例提供的界面顯示裝置,在界面上顯示動效以及與動效同步動作的界面元素,增加了界面的趣味性,可增加用戶對界面的訪問次數(shù),提高界面元素的曝光率。
本申請實施還提供一種電子設(shè)備,電子設(shè)備包括顯示器、處理器和存儲器,存儲器用于存儲上述界面顯示裝置執(zhí)行上述界面顯示方法的程序,處理器被配置為用于執(zhí)行存儲器中存儲的程序,顯示器被配置為顯示處理器輸出的內(nèi)容。電子設(shè)備還可以包括通信接口,用于電子設(shè)備與其他設(shè)備或通信網(wǎng)絡(luò)通信。
本申請實施例還提供一種計算機存儲介質(zhì),用于儲存上述界面顯示裝置所用的計算機軟件指令,其包含用于執(zhí)行上述界面顯示方法為上述界面顯示裝置所涉及的程序。
本領(lǐng)域內(nèi)的技術(shù)人員應(yīng)明白,本發(fā)明的實施例可提供為方法、系統(tǒng)、或計算機程序產(chǎn)品。因此,本發(fā)明可采用完全硬件實施例、完全軟件實施例、或結(jié)合軟件和硬件方面的實施例的形式。而且,本發(fā)明可采用在一個或多個其中包含有計算機可用程序代碼的計算機可用存儲介質(zhì)(包括但不限于磁盤存儲器、CD-ROM、光學(xué)存儲器等)上實施的計算機程序產(chǎn)品的形式。
本發(fā)明是參照根據(jù)本發(fā)明實施例的方法、設(shè)備(系統(tǒng))、和計算機程序產(chǎn)品的流程圖和/或方框圖來描述的。應(yīng)理解可由計算機程序指令實現(xiàn)流程圖和/或方框圖中的每一流程和/或方框、以及流程圖和/或方框圖中的流程和/或方框的結(jié)合??商峁┻@些計算機程序指令到通用計算機、專用計算機、嵌入式處理機或其他可編程數(shù)據(jù)處理設(shè)備的處理器以產(chǎn)生一個機器,使得通過計算機或其他可編程數(shù)據(jù)處理設(shè)備的處理器執(zhí)行的指令產(chǎn)生用于實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的裝置。
這些計算機程序指令也可存儲在能引導(dǎo)計算機或其他可編程數(shù)據(jù)處理設(shè)備以特定方式工作的計算機可讀存儲器中,使得存儲在該計算機可讀存儲器中的指令產(chǎn)生包括指令裝置的制造品,該指令裝置實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能。
這些計算機程序指令也可裝載到計算機或其他可編程數(shù)據(jù)處理設(shè)備上,使得在計算機或其他可編程設(shè)備上執(zhí)行一系列操作步驟以產(chǎn)生計算機實現(xiàn)的處理,從而在計算機或其他可編程設(shè)備上執(zhí)行的指令提供用于實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的步驟。
在一個典型的配置中,計算設(shè)備包括一個或多個處理器(CPU)、輸入/輸出接口、網(wǎng)絡(luò)接口和內(nèi)存。
內(nèi)存可能包括計算機可讀介質(zhì)中的非永久性存儲器,隨機存取存儲器(RAM)和/或非易失性內(nèi)存等形式,如只讀存儲器(ROM)或閃存(flash RAM)。內(nèi)存是計算機可讀介質(zhì)的示例。
計算機可讀介質(zhì)包括永久性和非永久性、可移動和非可移動媒體可以由任何方法或技術(shù)來實現(xiàn)信息存儲。信息可以是計算機可讀指令、數(shù)據(jù)結(jié)構(gòu)、程序的模塊或其他數(shù)據(jù)。計算機的存儲介質(zhì)的例子包括,但不限于相變內(nèi)存(PRAM)、靜態(tài)隨機存取存儲器(SRAM)、動態(tài)隨機存取存儲器(DRAM)、其他類型的隨機存取存儲器(RAM)、只讀存儲器(ROM)、電可擦除可編程只讀存儲器(EEPROM)、快閃記憶體或其他內(nèi)存技術(shù)、只讀光盤只讀存儲器(CD-ROM)、數(shù)字多功能光盤(DVD)或其他光學(xué)存儲、磁盒式磁帶,磁帶磁磁盤存儲或其他磁性存儲設(shè)備或任何其他非傳輸介質(zhì),可用于存儲可以被計算設(shè)備訪問的信息。按照本文中的界定,計算機可讀介質(zhì)不包括暫存電腦可讀媒體(transitory media),如調(diào)制的數(shù)據(jù)信號和載波。
還需要說明的是,術(shù)語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含,從而使得包括一系列要素的過程、方法、商品或者設(shè)備不僅包括那些要素,而且還包括沒有明確列出的其他要素,或者是還包括為這種過程、方法、商品或者設(shè)備所固有的要素。在沒有更多限制的情況下,由語句“包括一個……”限定的要素,并不排除在包括所述要素的過程、方法、商品或者設(shè)備中還存在另外的相同要素。
本領(lǐng)域技術(shù)人員應(yīng)明白,本申請的實施例可提供為方法、系統(tǒng)或計算機程序產(chǎn)品。因此,本申請可采用完全硬件實施例、完全軟件實施例或結(jié)合軟件和硬件方面的實施例的形式。而且,本申請可采用在一個或多個其中包含有計算機可用程序代碼的計算機可用存儲介質(zhì)(包括但不限于磁盤存儲器、CD-ROM、光學(xué)存儲器等)上實施的計算機程序產(chǎn)品的形式。
以上所述僅為本申請的實施例而已,并不用于限制本申請。對于本領(lǐng)域技術(shù)人員來說,本申請可以有各種更改和變化。凡在本申請的精神和原理之內(nèi)所作的任何修改、等同替換、改進等,均應(yīng)包含在本申請的權(quán)利要求范圍之內(nèi)。
本申請公開A1、一種界面元素的滑動控制方法,包括:
顯示一界面,所述界面包含可滑動的第一界面元素;
響應(yīng)于對所述第一界面元素的滑動操作,在所述界面上,與所述滑動操作關(guān)聯(lián)地顯示動效。
A2、如A1所述的方法中,所述動效的顯示步驟,包括:在所述第一界面元素的周邊,與所述滑動操作關(guān)聯(lián)地顯示所述動效。
A3、如A2所述的方法中,所述動效的顯示步驟,包括以下至少一種:
在所述第一界面元素所在區(qū)域的相鄰區(qū)域,與所述滑動操作關(guān)聯(lián)地顯示所述動效;
在所述第一界面元素的內(nèi)邊界,與所述滑動操作關(guān)聯(lián)地顯示所述動效;
在所述第一界面元素的外邊界,與所述滑動操作關(guān)聯(lián)地顯示所述動效;以及
在所述第一界面元素與其相鄰界面元素的交界,與所述滑動操作關(guān)聯(lián)地顯示所述動效。
A4、如A1所述的方法中,所述動效的顯示步驟,還包括:響應(yīng)于對所述第一界面元素的滑動操作,沿滑動方向移動所述第一界面元素;以及
接續(xù)于所述第一界面元素,將第二界面元素移入所述界面。
A5、如A1~A4中任一項所述的方法,所述動效的顯示步驟,還包括:
響應(yīng)于對所述第一界面元素的滑動操作,在所述界面上,以與所述滑動操作的速度成比例變化的可視化屬性,顯示所述動效。
A6、如A5所述的方法中,所述動效為波動動效,其中,所述可視化屬性包括:幅度、頻率、顏色、持續(xù)時間中的至少一種。
A7、如A6所述的方法中,所述動效的顯示步驟,還包括:在所述第一界面元素的邊界上,周期性地繪制所述波動動效的輪廓曲線,或者水平偏移量不同的多條輪廓曲線,以形成所述波動動效。
A8、如A7所述的方法中,所述輪廓曲線的繪制步驟,包括:
根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù),結(jié)合所述滑動操作的速度,確定所述輪廓曲線的水平偏移量;
根據(jù)垂直幅度初始值和所述輪廓曲線對應(yīng)的周期數(shù),結(jié)合所述波動動效的持續(xù)時間,確定所述輪廓曲線的垂直幅度值;
根據(jù)所述輪廓曲線的水平偏移量和垂直幅度值,在所述第一界面元素的邊界上繪制所述輪廓曲線。
A9、如A8所述的方法中,所述輪廓曲線的繪制步驟,還包括:
根據(jù)所述輪廓曲線的水平偏移量和垂直幅度值,確定所述輪廓曲線在所述第一界面元素的邊界上的像素點;
連接所述像素點,以形成所述輪廓曲線;
閉合所述輪廓曲線;
填充所述閉合后的輪廓曲線。
A10、如A9所述的方法中,所述輪廓曲線為正弦曲線/余弦曲線;其中,
所述輪廓曲線的水平偏移量的確定步驟,包括:
offsetX=offsetX0+(i-1)*speed_hua;
所述輪廓曲線的垂直幅度值的確定步驟,包括:
A=A0*(1-(i-1)/(60*duration_hua));
其中,offsetX表示所述輪廓曲線的水平偏移量;
offsetX0表示所述水平偏移初始值;
speed_hua表示所述滑動操作的速度;
i表示所述輪廓曲線對應(yīng)的周期數(shù);
A表示所述輪廓曲線的垂直幅度值;
A0表示所述垂直幅度初始值;
duration_hua表示所述波動動效的持續(xù)時間。
A11、如A6所述的方法中,所述波動動效為水波紋動效、心電圖動效、彈簧動效或振蕩衰減動效。
本申請還公開了B12、一種界面顯示方法,包括:
顯示一界面的入口;
響應(yīng)于對所述入口的點擊操作,在所述界面上,顯示動效以及與所述動效同步動作的界面元素。
B13、如B12所述的方法中,所述動效以及所述界面元素的顯示步驟,包括:
在所述界面的邊界、頂部區(qū)域、底部區(qū)域或中間區(qū)域,顯示所述動效以及所述界面元素。
B14、如B12或B13所述的方法中,所述動效和/或所述界面元素的顯示步驟,還包括:在所述界面上,以預(yù)設(shè)規(guī)律變化的可視化屬性,顯示所述動效和/或所述界面元素。
B15、如B14所述的方法中,所述動效為波動動效;其中,所述可視化屬性包括:幅度、頻率、顏色、持續(xù)時間中的至少一種。
B16、如B15所述的方法中,所述動效以及所述界面元素的顯示步驟,還包括:
在所述界面上,周期性地繪制所述波動動效的輪廓曲線,或者水平偏移量不同的多條輪廓曲線,以形成所述波動動效;以及
在繪制所述輪廓曲線的過程中,根據(jù)所述界面元素與所述波動動效之間的相對位置,動態(tài)調(diào)整所述界面元素的位置。
B17、如B16所述的方法中,所述輪廓曲線的繪制步驟,包括:
根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù),結(jié)合預(yù)設(shè)水平偏移步長,確定所述輪廓曲線的水平偏移量;
根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值,在所述界面上繪制所述輪廓曲線。
B18、如B17所述的方法中,所述輪廓曲線的繪制步驟,還包括:
根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值,確定所述輪廓曲線在所述界面上的像素點;
連接所述像素點,以形成所述輪廓曲線;
閉合所述輪廓曲線;
填充所述閉合后的輪廓曲線。
B19、如B15所述的方法中,所述波動動效為水波紋動效、心電圖動效、彈簧動效或振蕩衰減動效。
B20、如B12或B13所述的方法中,所述界面為用戶詳情界面;所述界面元素為用戶頭像圖標(biāo)。
本申請還公開了C21、一種界面元素的滑動控制裝置,包括:
界面顯示單元,用于顯示一界面,所述界面包含可滑動的第一界面元素;
動效顯示單元,用于響應(yīng)于對所述第一界面元素的滑動操作,在所述界面上,與所述滑動操作關(guān)聯(lián)地顯示動效。
C22、如C21所述的裝置,所述動效顯示單元具體用于:在所述第一界面元素的周邊,與所述滑動操作關(guān)聯(lián)地顯示所述動效。
C23、如C22所述的裝置中,所述動效顯示單元具體用于執(zhí)行以下至少一種顯示操作:
在所述第一界面元素所在區(qū)域的相鄰區(qū)域,與所述滑動操作關(guān)聯(lián)地顯示所述動效;
在所述第一界面元素的內(nèi)邊界,與所述滑動操作關(guān)聯(lián)地顯示所述動效;
在所述第一界面元素的外邊界,與所述滑動操作關(guān)聯(lián)地顯示所述動效;以及
在所述第一界面元素與其相鄰界面元素的交界,與所述滑動操作關(guān)聯(lián)地顯示所述動效。
C24、如C21所述的裝置,所述動效顯示單元還用于:響應(yīng)于對所述第一界面元素的滑動操作,沿滑動方向移動所述第一界面元素;以及
接續(xù)于所述第一界面元素,將第二界面元素移入所述界面。
C25、如C21~C24中任一項所述的裝置中,所述動效顯示單元還用于:響應(yīng)于對所述第一界面元素的滑動操作,在所述界面上,以與所述滑動操作的速度成比例變化的可視化屬性,顯示所述動效。
C26、如C25所述的裝置中,所述動效為波動動效,其中,所述可視化屬性包括:幅度、頻率、顏色、持續(xù)時間中的至少一種。
C27、如C26所述的裝置中,所述動效顯示單元還用于:在所述第一界面元素的邊界上,周期性地繪制所述波動動效的輪廓曲線,或者水平偏移量不同的多條輪廓曲線,以形成所述波動動效。
C28、如C27所述的裝置中,所述動效顯示單元具體用于:
根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù),結(jié)合所述滑動操作的速度,確定所述輪廓曲線的水平偏移量;
根據(jù)垂直幅度初始值和所述輪廓曲線對應(yīng)的周期數(shù),結(jié)合所述波動動效的持續(xù)時間,確定所述輪廓曲線的垂直幅度值;
根據(jù)所述輪廓曲線的水平偏移量和垂直幅度值,在所述第一界面元素的邊界上繪制所述輪廓曲線。
C29、如C28所述的裝置中,所述輪廓曲線為正弦曲線/余弦曲線;其中,
所述動效顯示單元具體用于根據(jù)公式offsetX=offsetX0+(i-1)*speed_hua,確定所述輪廓曲線的水平偏移量;
所述動效顯示單元具體用于根據(jù)公式A=A0*(1-(i-1)/(60*duration_hua)),確定所述輪廓曲線的垂直幅度值;
其中,offsetX表示所述輪廓曲線的水平偏移量;
offsetX0表示所述水平偏移初始值;
speed_hua表示所述滑動操作的速度;
i表示所述輪廓曲線對應(yīng)的周期數(shù);
A表示所述輪廓曲線的垂直幅度值;
A0表示所述垂直幅度初始值;
duration_hua表示所述波動動效的持續(xù)時間。
C30、如C26所述的裝置中,所述波動動效為水波紋動效、心電圖動效、彈簧動效或振蕩衰減動效。
本申請還公開了D31、一種電子設(shè)備,包括顯示器、存儲器和處理器;其中,
所述存儲器用于存儲一條或多條計算機指令,其中,所述一條或多條計算機指令供所述處理器調(diào)用執(zhí)行;
所述處理器用于:執(zhí)行所述存儲器中存儲的程序,以用于:
控制所述顯示器顯示一界面,所述界面包含可滑動的第一界面元素;
響應(yīng)于對所述第一界面元素的滑動操作,在所述界面上,與所述滑動操作關(guān)聯(lián)地顯示動效。
本申請還公開了E32、一種界面顯示裝置,包括:
入口顯示單元,用于顯示一界面入口;
動效顯示單元,用于響應(yīng)于對所述入口的點擊操作,在所述界面上,顯示動效以及與所述動效同步動作的界面元素。
E33、如E32所述的裝置中,所述動效顯示單元具體用于:
在所述界面的邊界、頂部區(qū)域、底部區(qū)域或中間區(qū)域,顯示所述動效以及所述界面元素。
E34、如E32或E33所述的裝置中,所述動效顯示單元還用于:在所述界面上,以預(yù)設(shè)規(guī)律變化的可視化屬性,顯示所述動效和/或所述界面元素。
E35、如E34所述的裝置中,所述動效為波動動效;其中,所述可視化屬性包括:幅度、頻率、顏色、持續(xù)時間中的至少一種。
E36、如E35所述的裝置中,所述動效顯示單元還用于:
在所述界面上,周期性地繪制所述波動動效的輪廓曲線,或者水平偏移量不同的多條輪廓曲線,以形成所述波動動效;以及
在繪制所述輪廓曲線的過程中,根據(jù)所述界面元素與所述波動動效之間的相對位置,動態(tài)調(diào)整所述界面元素的位置。
E37、如E36所述的裝置中,所述動效顯示單元具體用于:
根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù),結(jié)合預(yù)設(shè)水平偏移步長,確定所述輪廓曲線的水平偏移量;
根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值,在所述界面上繪制所述輪廓曲線。
E38、如E37所述的裝置中,所述動效顯示單元具體用于:
根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值,確定所述輪廓曲線在所述界面上的像素點;
連接所述像素點,以形成所述輪廓曲線;
閉合所述輪廓曲線;
填充所述閉合后的輪廓曲線。
E39、如E35所述的裝置中,所述波動動效為水波紋動效、心電圖動效、彈簧動效或振蕩衰減動效。
E40、如E32或E33所述的裝置中,所述界面為用戶詳情界面;所述界面元素為用戶頭像圖標(biāo)。
本申請還公開F41,一種電子設(shè)備,包括顯示器、存儲器和處理器;其中,
所述存儲器用于存儲一條或多條計算機指令,其中,所述一條或多條計算機指令供所述處理器調(diào)用執(zhí)行;
所述處理器用于:執(zhí)行所述存儲器中存儲的程序,以用于:
控制所述顯示器顯示一界面的入口;
響應(yīng)于對所述入口的點擊操作,在所述界面上,顯示動效以及與所述動效同步動作的界面元素。