本申請涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，尤其涉及一種界面元素的滑動(dò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)用從早期的鍵盤操作時(shí)代、控件操作時(shí)代進(jìn)入滑動(dòng)操作時(shí)代。

在大多互聯(lián)網(wǎng)應(yīng)用中，都需要在界面元素之間進(jìn)行切換?；诨瑒?dòng)操作，用戶只需輕輕滑動(dòng)，即可完成界面元素之間的切換，這不僅可以提高屏幕利用率，而且有利于提高切換效率和用戶使用體驗(yàn)度。

技術(shù)實(shí)現(xiàn)要素：

為了進(jìn)一步改善滑動(dòng)技術(shù)，本申請發(fā)明人跟蹤研究了大量支持滑動(dòng)操作的應(yīng)用?；趯Υ罅恐С只瑒?dòng)操作的應(yīng)用的跟蹤研究，首先發(fā)現(xiàn)：這些應(yīng)用在滑動(dòng)實(shí)現(xiàn)上比較類似，一般是：將多個(gè)待顯示的界面元素排隊(duì)，默認(rèn)狀態(tài)下界面上顯示排在最前面的界面元素；當(dāng)用戶執(zhí)行滑動(dòng)操作時(shí)，當(dāng)前顯示的界面元素滑出界面，后面相鄰的界面元素滑入界面。

另外，為了發(fā)現(xiàn)滑動(dòng)技術(shù)的改善空間，本申請發(fā)明人還從不同維度對滑動(dòng)操作的效果進(jìn)行了分析。其中，一個(gè)維度是默認(rèn)狀態(tài)下顯示的界面元素的用戶流量或轉(zhuǎn)化率；另一個(gè)維度是需要用戶滑動(dòng)才能顯示的界面元素的用戶流量或轉(zhuǎn)化率；再一維度是用戶發(fā)生的滑動(dòng)次數(shù)；又一維度是用戶使用體驗(yàn)度。進(jìn)一步，綜合這些維度的分析結(jié)果，發(fā)現(xiàn)：非必要滑動(dòng)操作的次數(shù)在逐漸減少，導(dǎo)致后面需要滑動(dòng)才能顯示的界面元素的曝光率呈下降趨勢；而且用戶對滑動(dòng)操作的體驗(yàn)度越來越差。

其中，導(dǎo)致上述問題的原因可能有多種，但本申請發(fā)明人對導(dǎo)致上述問題的原因進(jìn)行了剖析，認(rèn)定：在滑動(dòng)操作出現(xiàn)初期，用戶的新鮮感較強(qiáng)，這種新鮮感體現(xiàn)為用戶頻繁地進(jìn)行滑動(dòng)操作，后面界面元素的曝光率較高，用戶對滑動(dòng)操作的體驗(yàn)度較好；當(dāng)滑動(dòng)操作進(jìn)入成熟期以后，即幾乎所有應(yīng)用都支持滑動(dòng)操作時(shí)，用戶對滑動(dòng)操作的新鮮感逐漸消失，出現(xiàn)滑動(dòng)疲態(tài)，這滑動(dòng)疲態(tài)主要體現(xiàn)為用戶一般只執(zhí)行必要的滑動(dòng)操作，非必要滑動(dòng)操作的次數(shù)逐漸減少，導(dǎo)致后面需要滑動(dòng)才能顯示的界面元素的曝光率呈下降趨勢。

針對上述認(rèn)定的原因，本申請發(fā)明人提出：通過增加滑動(dòng)操作的趣味性，重新提高用戶對滑動(dòng)操作的新鮮感，降低滑動(dòng)操作的枯燥感，以增加滑動(dòng)操作的次數(shù)，提高界面元素的曝光率。

基于上述分析，本申請實(shí)施例提供一種界面元素的滑動(dòng)控制方法，包括：

顯示一界面，所述界面包含可滑動(dòng)的第一界面元素；

響應(yīng)于對所述第一界面元素的滑動(dòng)操作，在所述界面上，與所述滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。

在一可選實(shí)施方式中，所述動(dòng)效的顯示步驟，包括：在所述第一界面元素的周邊，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效。

在一可選實(shí)施方式中，所述動(dòng)效的顯示步驟，包括以下至少一種：

在所述第一界面元素所在區(qū)域的相鄰區(qū)域，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效；

在所述第一界面元素的內(nèi)邊界，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效；

在所述第一界面元素的外邊界，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效；以及

在所述第一界面元素與其相鄰界面元素的交界，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效。

在一可選實(shí)施方式中，所述動(dòng)效的顯示步驟，還包括：響應(yīng)于對所述第一界面元素的滑動(dòng)操作，沿滑動(dòng)方向移動(dòng)所述第一界面元素；以及

接續(xù)于所述第一界面元素，將第二界面元素移入所述界面。

在一可選實(shí)施方式中，所述動(dòng)效的顯示步驟，還包括：響應(yīng)于對所述第一界面元素的滑動(dòng)操作，在所述界面上，以與所述滑動(dòng)操作的速度成比例變化的可視化屬性，顯示所述動(dòng)效。

在一可選實(shí)施方式中，所述動(dòng)效為波動(dòng)動(dòng)效，其中，所述可視化屬性包括：幅度、頻率、顏色、持續(xù)時(shí)間中的至少一種。

在一可選實(shí)施方式中，所述動(dòng)效的顯示步驟，還包括：在所述第一界面元素的邊界上，周期性地繪制所述波動(dòng)動(dòng)效的輪廓曲線，或者水平偏移量不同的多條輪廓曲線，以形成所述波動(dòng)動(dòng)效。

在一可選實(shí)施方式中，所述輪廓曲線的繪制步驟，包括：

根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù)，結(jié)合所述滑動(dòng)操作的速度，確定所述輪廓曲線的水平偏移量；

根據(jù)垂直幅度初始值和所述輪廓曲線對應(yīng)的周期數(shù)，結(jié)合所述波動(dòng)動(dòng)效的持續(xù)時(shí)間，確定所述輪廓曲線的垂直幅度值；

根據(jù)所述輪廓曲線的水平偏移量和垂直幅度值，在所述第一界面元素的邊界上繪制所述輪廓曲線。

在一可選實(shí)施方式中，所述輪廓曲線的繪制步驟，還包括：

根據(jù)所述輪廓曲線的水平偏移量和垂直幅度值，確定所述輪廓曲線在所述第一界面元素的邊界上的像素點(diǎn)；

連接所述像素點(diǎn)，以形成所述輪廓曲線；

閉合所述輪廓曲線；

填充所述閉合后的輪廓曲線。

在一可選實(shí)施方式中，所述輪廓曲線為正弦曲線/余弦曲線；其中，

所述輪廓曲線的水平偏移量的確定步驟，包括：

offsetX＝offsetX0+(i-1)*speed_hua；

所述輪廓曲線的垂直幅度值的確定步驟，包括：

A＝A0*(1-(i-1)/(60*duration_hua))；

其中，offsetX表示所述輪廓曲線的水平偏移量；

offsetX0表示所述水平偏移初始值；

speed_hua表示所述滑動(dòng)操作的速度；

i表示所述輪廓曲線對應(yīng)的周期數(shù)；

A表示所述輪廓曲線的垂直幅度值；

A0表示所述垂直幅度初始值；

duration_hua表示所述波動(dòng)動(dòng)效的持續(xù)時(shí)間。

在一可選實(shí)施方式中，所述波動(dòng)動(dòng)效為水波紋動(dòng)效、心電圖動(dòng)效、彈簧動(dòng)效或振蕩衰減動(dòng)效。

相應(yīng)地，本申請實(shí)施例還提供一種界面顯示方法，包括：

顯示一界面的入口；

響應(yīng)于對所述入口的點(diǎn)擊操作，在所述界面上，顯示動(dòng)效以及與所述動(dòng)效同步動(dòng)作的界面元素。

在一可選實(shí)施方式中，所述動(dòng)效以及所述界面元素的顯示步驟，包括：

在所述界面的邊界、頂部區(qū)域、底部區(qū)域或中間區(qū)域，顯示所述動(dòng)效以及所述界面元素。

在一可選實(shí)施方式中，所述動(dòng)效和/或所述界面元素的顯示步驟，還包括：在所述界面上，以預(yù)設(shè)規(guī)律變化的可視化屬性，顯示所述動(dòng)效和/或所述界面元素。

在一可選實(shí)施方式中，所述動(dòng)效為波動(dòng)動(dòng)效；其中，所述可視化屬性包括：幅度、頻率、顏色、持續(xù)時(shí)間中的至少一種。

在一可選實(shí)施方式中，所述動(dòng)效以及所述界面元素的顯示步驟，還包括：

在所述界面上，周期性地繪制所述波動(dòng)動(dòng)效的輪廓曲線，或者水平偏移量不同的多條輪廓曲線，以形成所述波動(dòng)動(dòng)效；以及

在繪制所述輪廓曲線的過程中，根據(jù)所述界面元素與所述波動(dòng)動(dòng)效之間的相對位置，動(dòng)態(tài)調(diào)整所述界面元素的位置。

在一可選實(shí)施方式中，所述輪廓曲線的繪制步驟，包括：

根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù)，結(jié)合預(yù)設(shè)水平偏移步長，確定所述輪廓曲線的水平偏移量；

根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值，在所述界面上繪制所述輪廓曲線。

在一可選實(shí)施方式中，所述輪廓曲線的繪制步驟，還包括：

根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值，確定所述輪廓曲線在所述界面上的像素點(diǎn)；

連接所述像素點(diǎn)，以形成所述輪廓曲線；

閉合所述輪廓曲線；

填充所述閉合后的輪廓曲線。

在一可選實(shí)施方式中，所述波動(dòng)動(dòng)效為水波紋動(dòng)效、心電圖動(dòng)效、彈簧動(dòng)效或振蕩衰減動(dòng)效。

在一可選實(shí)施方式中，所述界面為用戶詳情界面；所述界面元素為用戶頭像圖標(biāo)。

本申請又一實(shí)施例提供一種界面元素的滑動(dòng)控制裝置，包括：

界面顯示單元，用于顯示一界面，所述界面包含可滑動(dòng)的第一界面元素；

動(dòng)效顯示單元，用于響應(yīng)于對所述第一界面元素的滑動(dòng)操作，在所述界面上，與所述滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。

在一可選實(shí)施方式中，動(dòng)效顯示單元具體用于：在所述第一界面元素的周邊，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效。

在一可選實(shí)施方式中，動(dòng)效顯示單元具體用于執(zhí)行以下至少一種顯示操作：

在所述第一界面元素所在區(qū)域的相鄰區(qū)域，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效；

在所述第一界面元素的內(nèi)邊界，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效；

在所述第一界面元素的外邊界，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效；以及

在所述第一界面元素與其相鄰界面元素的交界，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效。

在一可選實(shí)施方式中，所述動(dòng)效顯示單元還用于：響應(yīng)于對所述第一界面元素的滑動(dòng)操作，沿滑動(dòng)方向移動(dòng)所述第一界面元素；以及

接續(xù)于所述第一界面元素，將第二界面元素移入所述界面。

在一可選實(shí)施方式中，所述動(dòng)效顯示單元還用于：響應(yīng)于對所述第一界面元素的滑動(dòng)操作，在所述界面上，以與所述滑動(dòng)操作的速度成比例變化的可視化屬性，顯示所述動(dòng)效。

在一可選實(shí)施方式中，所述動(dòng)效為波動(dòng)動(dòng)效，其中，所述可視化屬性包括：幅度、頻率、顏色、持續(xù)時(shí)間中的至少一種。

在一可選實(shí)施方式中，所述動(dòng)效顯示單元還用于：在所述第一界面元素的邊界上，周期性地繪制所述波動(dòng)動(dòng)效的輪廓曲線，或者水平偏移量不同的多條輪廓曲線，以形成所述波動(dòng)動(dòng)效。

在一可選實(shí)施方式中，所述動(dòng)效顯示單元具體用于：

根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù)，結(jié)合所述滑動(dòng)操作的速度，確定所述輪廓曲線的水平偏移量；

根據(jù)垂直幅度初始值和所述輪廓曲線對應(yīng)的周期數(shù)，結(jié)合所述波動(dòng)動(dòng)效的持續(xù)時(shí)間，確定所述輪廓曲線的垂直幅度值；

根據(jù)所述輪廓曲線的水平偏移量和垂直幅度值，在所述第一界面元素的邊界上繪制所述輪廓曲線。

在一可選實(shí)施方式中，所述動(dòng)效顯示單元具體用于：

根據(jù)所述輪廓曲線的水平偏移量和垂直幅度值，確定所述輪廓曲線在所述第一界面元素的邊界上的像素點(diǎn)；

連接所述像素點(diǎn)，以形成所述輪廓曲線；

閉合所述輪廓曲線；

填充所述閉合后的輪廓曲線。

在一可選實(shí)施方式中，所述輪廓曲線為正弦曲線/余弦曲線；其中，

所述動(dòng)效顯示單元具體用于根據(jù)公式offsetX＝offsetX0+(i-1)*speed_hua，確定所述輪廓曲線的水平偏移量；

所述動(dòng)效顯示單元具體用于根據(jù)公式A＝A0*(1-(i-1)/(60*duration_hua))，確定所述輪廓曲線的垂直幅度值；

其中，offsetX表示所述輪廓曲線的水平偏移量；

offsetX0表示所述水平偏移初始值；

speed_hua表示所述滑動(dòng)操作的速度；

i表示所述輪廓曲線對應(yīng)的周期數(shù)；

A表示所述輪廓曲線的垂直幅度值；

A0表示所述垂直幅度初始值；

duration_hua表示所述波動(dòng)動(dòng)效的持續(xù)時(shí)間。

在一可選實(shí)施方式中，所述波動(dòng)動(dòng)效為水波紋動(dòng)效、心電圖動(dòng)效、彈簧動(dòng)效或振蕩衰減動(dòng)效。

本申請實(shí)施還提供一種電子設(shè)備，所述電子設(shè)備包括顯示器、處理器和存儲(chǔ)器，所述存儲(chǔ)器用于存儲(chǔ)上述界面元素的滑動(dòng)控制裝置執(zhí)行上述界面元素的滑動(dòng)控制方法的程序，所述處理器被配置為用于執(zhí)行所述存儲(chǔ)器中存儲(chǔ)的程序，所述顯示器被配置為顯示所述處理器輸出的內(nèi)容。所述電子設(shè)備還可以包括通信接口，用于電子設(shè)備與其他設(shè)備或通信網(wǎng)絡(luò)通信。

本申請實(shí)施例還提供一種計(jì)算機(jī)存儲(chǔ)介質(zhì)，用于儲(chǔ)存上述界面元素的滑動(dòng)控制裝置所用的計(jì)算機(jī)軟件指令，其包含用于執(zhí)行上述界面元素的滑動(dòng)控制方法為上述界面元素的滑動(dòng)控制裝置所涉及的程序。

本申請又一實(shí)施例提供一種界面顯示裝置，包括：

入口顯示單元，用于顯示一界面入口；

動(dòng)效顯示單元，用于響應(yīng)于對所述入口的點(diǎn)擊操作，在所述界面上，顯示動(dòng)效以及與所述動(dòng)效同步動(dòng)作的界面元素。

在一可選實(shí)施方式中，所述動(dòng)效顯示單元具體用于：

在所述界面的邊界、頂部區(qū)域、底部區(qū)域或中間區(qū)域，顯示所述動(dòng)效以及所述界面元素。

在一可選實(shí)施方式中，所述動(dòng)效顯示單元還用于：在所述界面上，以預(yù)設(shè)規(guī)律變化的可視化屬性，顯示所述動(dòng)效和/或所述界面元素。

在一可選實(shí)施方式中，所述動(dòng)效為波動(dòng)動(dòng)效；其中，所述可視化屬性包括：幅度、頻率、顏色、持續(xù)時(shí)間中的至少一種。

在一可選實(shí)施方式中，所述動(dòng)效顯示單元還用于：

在所述界面上，周期性地繪制所述波動(dòng)動(dòng)效的輪廓曲線，或者水平偏移量不同的多條輪廓曲線，以形成所述波動(dòng)動(dòng)效；以及

在繪制所述輪廓曲線的過程中，根據(jù)所述界面元素與所述波動(dòng)動(dòng)效之間的相對位置，動(dòng)態(tài)調(diào)整所述界面元素的位置。

在一可選實(shí)施方式中，所述動(dòng)效顯示單元具體用于：

根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù)，結(jié)合預(yù)設(shè)水平偏移步長，確定所述輪廓曲線的水平偏移量；

根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值，在所述界面上繪制所述輪廓曲線。

在一可選實(shí)施方式中，所述動(dòng)效顯示單元具體用于：

根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值，確定所述輪廓曲線在所述界面上的像素點(diǎn)；

連接所述像素點(diǎn)，以形成所述輪廓曲線；

閉合所述輪廓曲線；

填充所述閉合后的輪廓曲線。

在一可選實(shí)施方式中，所述波動(dòng)動(dòng)效為水波紋動(dòng)效、心電圖動(dòng)效、彈簧動(dòng)效或振蕩衰減動(dòng)效。

在一可選實(shí)施方式中，所述界面為用戶詳情界面；所述界面元素為用戶頭像圖標(biāo)。

本申請實(shí)施還提供一種電子設(shè)備，所述電子設(shè)備包括顯示器、處理器和存儲(chǔ)器，所述存儲(chǔ)器用于存儲(chǔ)上述界面顯示裝置執(zhí)行上述界面顯示方法的程序，所述處理器被配置為用于執(zhí)行所述存儲(chǔ)器中存儲(chǔ)的程序，所述顯示器被配置為顯示所述處理器輸出的內(nèi)容。所述電子設(shè)備還可以包括通信接口，用于電子設(shè)備與其他設(shè)備或通信網(wǎng)絡(luò)通信。

本申請實(shí)施例還提供一種計(jì)算機(jī)存儲(chǔ)介質(zhì)，用于儲(chǔ)存上述界面顯示裝置所用的計(jì)算機(jī)軟件指令，其包含用于執(zhí)行上述界面顯示方法為上述界面顯示裝置所涉及的程序。

在本申請實(shí)施例中，響應(yīng)于對第一界面元素的滑動(dòng)操作，在界面上，與滑動(dòng)操作關(guān)聯(lián)的顯示動(dòng)效，增加了滑動(dòng)操作的趣味性，有利于提高用戶對滑動(dòng)操作的新鮮感，可增加用戶執(zhí)行滑動(dòng)操作的次數(shù)，提高后續(xù)界面元素的曝光率。

附圖說明

此處所說明的附圖用來提供對本申請的進(jìn)一步理解，構(gòu)成本申請的一部分，本申請的示意性實(shí)施例及其說明用于解釋本申請，并不構(gòu)成對本申請的不當(dāng)限定。在附圖中：

圖1為本申請一實(shí)施例提供的界面元素的滑動(dòng)控制方法的流程示意圖；

圖2為本申請另一實(shí)施例提供的外賣應(yīng)用的界面示意圖；

圖3a為本申請又一實(shí)施例提供的水波紋動(dòng)效的一種輪廓曲線的示意圖；

圖3b為本申請又一實(shí)施例提供的心電圖動(dòng)效的一種輪廓曲線的示意圖；

圖3c為本申請又一實(shí)施例提供的彈簧動(dòng)效的一種輪廓曲線的示意圖；

圖3d為本申請又一實(shí)施例提供的振蕩衰減動(dòng)效的一種輪廓曲線的示意圖；

圖4a-圖4c為本申請又一實(shí)施例提供的以外賣類應(yīng)用為例演示滑動(dòng)動(dòng)效的界面示意圖；

圖4d為本申請又一實(shí)施例提供的界面元素的滑動(dòng)控制方法的流程示意圖；

圖5為本申請又一實(shí)施例提供的水平偏移不同的余弦或正弦曲線的示意圖；

圖6為本申請又一實(shí)施例提供的界面顯示方法的流程示意圖；

圖7a-7c為本申請又一實(shí)施例提供的用戶頭像圖標(biāo)漂浮于水波紋動(dòng)效上的示意圖；

圖8為本申請又一實(shí)施例提供的界面元素的滑動(dòng)控制裝置的結(jié)構(gòu)示意圖；

圖9為本申請又一實(shí)施例提供的界面顯示裝置的結(jié)構(gòu)示意圖。

具體實(shí)施方式

為使本申請的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合本申請具體實(shí)施例及相應(yīng)的附圖對本申請技術(shù)方案進(jìn)行清楚、完整地描述。顯然，所描述的實(shí)施例僅是本申請一部分實(shí)施例，而不是全部的實(shí)施例?；诒旧暾堉械膶?shí)施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本申請保護(hù)的范圍。

圖1為本申請一實(shí)施例提供的界面元素的滑動(dòng)控制方法的流程示意圖。如圖1所示，所述方法包括：

101、顯示一界面，所述界面包含可滑動(dòng)的第一界面元素。

102、響應(yīng)于對第一界面元素的滑動(dòng)操作，在所述界面上，與所述滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。

本實(shí)施例提供的方法可應(yīng)用于任何支持滑動(dòng)操作的應(yīng)用，例如電子商務(wù)類應(yīng)用、游戲類應(yīng)用、即時(shí)通訊類應(yīng)用等等。這些應(yīng)用提供界面，用于展示應(yīng)用相關(guān)的界面元素，同時(shí)也是用戶與應(yīng)用進(jìn)行交互的通道。所述界面可以是應(yīng)用啟動(dòng)時(shí)的首界面，也可以是應(yīng)用使用過程中的界面。另外，根據(jù)應(yīng)用的不同，界面的實(shí)現(xiàn)形式以及界面元素的實(shí)現(xiàn)形式都會(huì)有所不同，本實(shí)施例對此不做限定。

在本實(shí)施例中，界面上顯示有第一界面元素，第一界面元素支持滑動(dòng)操作，即用戶可滑動(dòng)第一界面元素。如果用戶滑動(dòng)第一界面元素，第一界面元素可沿滑動(dòng)方向移動(dòng)，例如可以向上移動(dòng)或向下移動(dòng)或滑出所述界面等。

在本實(shí)施例中，為了增加滑動(dòng)操作的趣味性，提高用戶對滑動(dòng)操作的新鮮感，將動(dòng)效與滑動(dòng)操作相關(guān)聯(lián)。當(dāng)用戶滑動(dòng)第一界面元素時(shí)，可捕捉到針對第一界面元素的滑動(dòng)操作，響應(yīng)于該滑動(dòng)操作，可在界面上，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。

在本實(shí)施例中，將動(dòng)效與滑動(dòng)操作相關(guān)聯(lián)，有利于提高用戶對滑動(dòng)操作的新鮮感，從用戶角度來看，為了體驗(yàn)動(dòng)效，可能會(huì)多次執(zhí)行滑動(dòng)操作，增加了滑動(dòng)操作的次數(shù)；進(jìn)一步，從界面角度來說，為了保證或提高界面的利用率，一個(gè)界面元素因滑動(dòng)而空出的界面區(qū)域勢必有另一個(gè)界面元素補(bǔ)入，提高了界面元素的曝光率。

在上述實(shí)施例或下述實(shí)施例中，在與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效的實(shí)現(xiàn)過程中，可涉及但不限于以下至少一方面的內(nèi)容：動(dòng)效的顯示位置、動(dòng)效的行為、動(dòng)效的基本樣式、動(dòng)效的實(shí)現(xiàn)手段、動(dòng)效的應(yīng)用等。其中，“與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效”可單獨(dú)涉及某一方面的內(nèi)容，也可以以任意組合方式涉及多方面的內(nèi)容。下面將針對每一方面單獨(dú)進(jìn)行說明：

動(dòng)效的顯示位置：原則上，動(dòng)效只需顯示于產(chǎn)生滑動(dòng)操作的界面上即可，對動(dòng)效在所述界面上的具體顯示位置可不做限定。當(dāng)然，在本申請上述實(shí)施例或下述實(shí)施例中，也可以通過進(jìn)一步限定動(dòng)效在界面上的顯示位置，以發(fā)揮動(dòng)效帶來的有益效果。

可選地，在本申請上述實(shí)施例或下述實(shí)施例中，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效的步驟，可以為：在第一界面元素的周邊，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。第一界面元素的周邊可以是界面上距離第一界面元素一定范圍內(nèi)的區(qū)域。所述一定范圍可以根據(jù)應(yīng)用場景、應(yīng)用需求以及終端屏幕等因素而適應(yīng)性設(shè)置。

舉例說明，所述第一界面元素的周邊可以包括但不限于以下至少一種：第一界面元素所在區(qū)域的相鄰區(qū)域、第一界面元素的內(nèi)邊界、第一界面元素的外邊界、第一界面元素與其相鄰界面元素的交界等。

例如，在一應(yīng)用實(shí)例中，界面被劃分為不同的區(qū)域，不同區(qū)域展示不同的界面元素。界面上某一區(qū)域展示第一界面元素，則可響應(yīng)于對第一界面元素的滑動(dòng)操作，在第一界面元素所在區(qū)域的相鄰區(qū)域內(nèi)，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。參考圖2，圖2所示為某一外賣應(yīng)用的界面，該界面從上往下依次包括頂部區(qū)域(圖2中的黑色區(qū)域)、類目導(dǎo)航區(qū)域、頭條區(qū)域、新年特惠區(qū)域等。在圖2中，第一界面元素為“火鍋節(jié)宣傳圖片”，展示于界面的頂部區(qū)域；類目導(dǎo)航區(qū)域?yàn)榈谝唤缑嬖厮趨^(qū)域的相鄰區(qū)域，當(dāng)用戶滑動(dòng)“火鍋節(jié)宣傳圖片”時(shí)，可在類目導(dǎo)航區(qū)域顯示動(dòng)效，以提高滑動(dòng)操作的趣味性。

又例如，在一應(yīng)用實(shí)例中，可響應(yīng)于對第一界面元素的滑動(dòng)操作，在第一界面元素的內(nèi)邊界，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。繼續(xù)參考圖2，當(dāng)用戶滑動(dòng)“火鍋節(jié)宣傳圖片”時(shí)，可在黑色分界線內(nèi)側(cè)顯示動(dòng)效，以提高滑動(dòng)操作的趣味性。進(jìn)一步可選地，可以在第一界面元素頂部黑色分界線的內(nèi)側(cè)顯示動(dòng)效；或者，可以在第一界面元素底部黑色分界線的內(nèi)側(cè)顯示動(dòng)效；或者，可以在第一界面元素左側(cè)黑色分界線的內(nèi)側(cè)顯示動(dòng)效；或者，可以在第一界面元素右側(cè)黑色分界線的內(nèi)側(cè)顯示動(dòng)效。

又例如，在一應(yīng)用實(shí)例中，可響應(yīng)于對第一界面元素的滑動(dòng)操作，在第一界面元素的外邊界，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。繼續(xù)參考圖2，當(dāng)用戶滑動(dòng)“火鍋節(jié)宣傳圖片”時(shí)，可在黑色分界線外側(cè)顯示動(dòng)效，以提高滑動(dòng)操作的趣味性。值得說明的是，在圖2中，第一界面元素頂部、左側(cè)以及右側(cè)黑色分界線的外側(cè)均超出界面范圍，故優(yōu)選在第一界面元素底部黑色分界線的外側(cè)顯示動(dòng)效，底部黑色分界線的外側(cè)實(shí)際上是類目導(dǎo)航區(qū)域的范圍。

又例如，在一應(yīng)用實(shí)例中，可響應(yīng)于對第一界面元素的滑動(dòng)操作，在第一界面元素與其相鄰界面元素的交界，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。繼續(xù)參考圖2，假設(shè)第一界面元素為“每日1元”，則當(dāng)用戶滑動(dòng)“每日1元”時(shí)，可在“每日1元”與“新年特惠”，“每日1元”與“起司家”，“每日1元”與“小資最愛”，以及“每日1元”與“外賣頭條”等交界中的至少一個(gè)交界處顯示動(dòng)效，以提高滑動(dòng)操作的趣味性。

其中，在用戶滑動(dòng)的第一界面元素的周邊顯示動(dòng)效，動(dòng)效距離第一界面元素相對較近，便于用戶關(guān)注到動(dòng)效，有利于突出動(dòng)效帶來的有效效果。

當(dāng)然，除了在第一界面元素的周邊顯示動(dòng)效之外，還可以在界面上的其它位置顯示動(dòng)效。

動(dòng)效的行為：原則上，動(dòng)效可以是具有任何行為的動(dòng)態(tài)內(nèi)容，對動(dòng)效的具體行為可不做限定。當(dāng)然，在本申請上述實(shí)施例或下述實(shí)施例中，也可以通過進(jìn)一步限定動(dòng)效的行為，以發(fā)揮動(dòng)效帶來的有益效果。

可選地，在本申請上述實(shí)施例或下述實(shí)施例中，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效的步驟，可以為：響應(yīng)于對第一界面元素的滑動(dòng)操作，在界面上，以與滑動(dòng)操作的速度成比例變化的可視化屬性，顯示動(dòng)效。簡單來說，動(dòng)效的行為主要通過動(dòng)效的可視化屬性來體現(xiàn)，具體為：動(dòng)效的可視化屬性，與滑動(dòng)操作的速度成比例的變化。這里的可視化屬性是指用戶能夠直觀看到的屬性，例如可以是動(dòng)效的顏色、持續(xù)時(shí)間、幅度、頻率、軌跡等。其中，不同動(dòng)效的可視化屬性也會(huì)有所不同。

在一應(yīng)用實(shí)例中，動(dòng)效的可視化屬性包括顏色，則動(dòng)效的顏色可以與滑動(dòng)操作的速度成比例的變化。例如，動(dòng)效的顏色可以從暗到亮變化，則滑動(dòng)操作的速度越快，動(dòng)效的顏色從暗到亮的變化越快；相反的，滑動(dòng)操作的速度越慢，動(dòng)效的顏色從暗到亮的變化也就越慢。又例如，動(dòng)效的顏色可以按照設(shè)定的顏色順序變換，則滑動(dòng)操作的速度越快，動(dòng)效的顏色按照設(shè)定的顏色順序變換的速度越快；相反，滑動(dòng)操作的速度越慢，動(dòng)效的顏色按照設(shè)定的顏色順序變換的速度越慢。

在另一應(yīng)用實(shí)例中，動(dòng)效的可視化屬性包括持續(xù)時(shí)間，則動(dòng)效的持續(xù)時(shí)間可以與滑動(dòng)操作的速度成比例的變化。例如，滑動(dòng)操作的速度越快，動(dòng)效的持續(xù)時(shí)間越長；相反，滑動(dòng)操作的速度越慢，動(dòng)效的持續(xù)時(shí)間越短?；蛘?，滑動(dòng)操作的速度越慢，動(dòng)效的持續(xù)時(shí)間越長；相反，滑動(dòng)操作的速度越快，動(dòng)效的持續(xù)時(shí)間越短。

在又一應(yīng)用實(shí)例中，動(dòng)效的可視化屬性包括幅度，則動(dòng)效的幅度可以與滑動(dòng)操作的速度成比例的變化。例如，滑動(dòng)操作的速度越快，動(dòng)效的幅度衰減越快；相反，滑動(dòng)操作的速度越慢，動(dòng)效的幅度衰減越慢?；蛘撸瑒?dòng)操作的速度越快，動(dòng)效的幅度衰減越慢；相反，滑動(dòng)操作的速度越慢，動(dòng)效的幅度衰減越快。

在又一應(yīng)用實(shí)例中，動(dòng)效的可視化屬性包括頻率，則動(dòng)效的頻率可以與滑動(dòng)操作的速度成比例的變化。例如，滑動(dòng)操作的速度越快，動(dòng)效的頻率越快；相反，滑動(dòng)操作的速度越慢，動(dòng)效的頻率越慢?；蛘?，滑動(dòng)操作的速度越慢，動(dòng)效的頻率越快；相反，滑動(dòng)操作的速度越快，動(dòng)效的頻率越慢。

其中，通過動(dòng)效的可視化屬性體現(xiàn)動(dòng)效的行為，更加直觀，便于用戶關(guān)注到動(dòng)效，而與滑動(dòng)操作的速度成比例變化，可以進(jìn)一步增加用戶對滑動(dòng)操作的興趣度，可刺激用戶嘗試不同速度的滑動(dòng)操作，以進(jìn)一步發(fā)揮動(dòng)效帶來的有益效果。

動(dòng)效的基本樣式：原則上，動(dòng)效可以是具有任何行為的動(dòng)態(tài)內(nèi)容，對其樣式可不做限定。當(dāng)然，在本申請上述實(shí)施例或下述實(shí)施例中，也可以通過進(jìn)一步限定動(dòng)效的基本樣式，以發(fā)揮動(dòng)效帶來的有益效果。

可選地，在本申請上述實(shí)施例或下述實(shí)施例中，與滑動(dòng)操作關(guān)聯(lián)顯示的動(dòng)效可以是波動(dòng)動(dòng)效。進(jìn)一步，所述波動(dòng)動(dòng)效可以包括：水波紋動(dòng)效、心電圖動(dòng)效、彈簧動(dòng)效、以及振蕩衰減動(dòng)效中的至少一種。

水波紋動(dòng)效是指在界面上實(shí)現(xiàn)的類似水波波動(dòng)的動(dòng)效。其中，水波紋動(dòng)效是一個(gè)動(dòng)態(tài)變化的過程，不便于圖示。為便于理解，圖3a示出水波紋動(dòng)效的一種輪廓曲線。值得說明的是，圖3a所示輪廓曲線僅為一種示例，并不限于此。其中，根據(jù)水波紋動(dòng)效的幅度、波動(dòng)頻率等不同，水波紋動(dòng)效的輪廓曲線也會(huì)有所不同。

心電圖動(dòng)效是指在界面上實(shí)現(xiàn)的類似心臟產(chǎn)生的電活動(dòng)變化的動(dòng)效。其中，心電圖動(dòng)效是一個(gè)動(dòng)態(tài)變化的過程，不便于圖示。為便于理解，圖3b示出心電圖動(dòng)效的一種輪廓曲線。值得說明的是，圖3b所示輪廓曲線僅為一種示例，并不限于此。其中，根據(jù)心電圖動(dòng)效的波動(dòng)頻率等不同，心電圖動(dòng)效的輪廓曲線也會(huì)有所不同。

彈簧動(dòng)效是指在界面上實(shí)現(xiàn)的類似彈簧收縮/伸張變化的動(dòng)效。其中，彈簧動(dòng)效是一個(gè)動(dòng)態(tài)變化的過程，不便于圖示。為便于理解，圖3c示出彈簧動(dòng)效的一種輪廓曲線。值得說明的是，圖3c所示輪廓曲線僅為一種示例，并不限于此。其中，根據(jù)彈簧動(dòng)效的收縮/伸張頻率等不同，彈簧動(dòng)效的輪廓曲線也會(huì)有所不同。

振蕩衰減動(dòng)效是指在界面上實(shí)現(xiàn)的類似物體振蕩衰減變化的動(dòng)效。其中，振蕩衰減動(dòng)效是一個(gè)動(dòng)態(tài)變化的過程，不便于圖示。為便于理解，圖3d示出振蕩衰減動(dòng)效的一種輪廓曲線。值得說明的是，圖3d所示輪廓曲線僅為一種示例，并不限于此。其中，根據(jù)振蕩衰減動(dòng)效的幅度、衰減速度等不同，振蕩衰減動(dòng)效的輪廓曲線也會(huì)有所不同。

當(dāng)然，除了上述波動(dòng)動(dòng)效之外，與滑動(dòng)操作關(guān)聯(lián)顯示的動(dòng)效還可以是其它樣式，例如跳動(dòng)的球球、從大到小漸變的圖像、飄落的雪花、閃動(dòng)的圖標(biāo)等等。

值得說明的是，動(dòng)效的基本樣式與動(dòng)效的行為可以相互結(jié)合。不同樣式的動(dòng)效，具有不同的可視化屬性，從而實(shí)現(xiàn)不同的動(dòng)態(tài)效果。例如，以波動(dòng)動(dòng)效為例，波動(dòng)動(dòng)效的可視化屬性可以包括幅度、頻率、顏色、持續(xù)時(shí)間等中的至少一種。這里的頻率主要是指波動(dòng)頻率。

在一應(yīng)用實(shí)例中，波動(dòng)動(dòng)效的可視化屬性包括幅度和波動(dòng)頻率，則動(dòng)效的波動(dòng)幅度和波動(dòng)頻率均可以與滑動(dòng)操作的速度成比例的變化。例如，滑動(dòng)操作的速度越快，波動(dòng)動(dòng)效的幅度衰減越快，波動(dòng)動(dòng)效的波動(dòng)頻率越快；相反，滑動(dòng)操作的速度越慢，波動(dòng)動(dòng)效的幅度衰減越慢，波動(dòng)動(dòng)效的波動(dòng)頻率越慢。

在另一應(yīng)用實(shí)例中，波動(dòng)動(dòng)效的可視化屬性包括幅度、波動(dòng)頻率以及持續(xù)時(shí)間，則動(dòng)效的波動(dòng)幅度、波動(dòng)頻率以及持續(xù)時(shí)間均可以與滑動(dòng)操作的速度成比例的變化。例如，滑動(dòng)操作的速度越快，波動(dòng)動(dòng)效的幅度衰減越快，波動(dòng)動(dòng)效的波動(dòng)頻率越快，波動(dòng)動(dòng)效的持續(xù)時(shí)間越短；相反，滑動(dòng)操作的速度越慢，波動(dòng)動(dòng)效的幅度衰減越慢，波動(dòng)動(dòng)效的波動(dòng)頻率越慢，波動(dòng)動(dòng)效的持續(xù)時(shí)間越長。

動(dòng)效的實(shí)現(xiàn)手段：原則上，本申請各實(shí)施例可以采用任何能夠按照本申請實(shí)施例中動(dòng)效的基本樣式以及行為實(shí)現(xiàn)所述動(dòng)效的技術(shù)手段。例如，可以采用視覺類創(chuàng)作工具，如Photoshop、After Effects等制作動(dòng)效。又例如，可以采用前端設(shè)計(jì)方法，如CSS、JavaScript等制作動(dòng)效。當(dāng)然，也可以結(jié)合動(dòng)效的基本樣式以及行為，采用曲線繪制方式來實(shí)現(xiàn)。

在一應(yīng)用實(shí)例中，可響應(yīng)于對第一界面元素的滑動(dòng)操作，在第一界面元素的邊界(包括內(nèi)邊界和/或外邊界)上顯示波動(dòng)動(dòng)效。以此為例，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效的步驟，可以為：在第一界面元素的邊界上，周期性地繪制波動(dòng)動(dòng)效的輪廓曲線，或者水平偏移量不同的多條輪廓曲線，以形成波動(dòng)動(dòng)效。

在一種實(shí)現(xiàn)方式中，可基于滑動(dòng)操作的速度確定水平偏移步長，不同周期繪制的輪廓曲線的水平偏移量可按照所述水平偏移步長增長?？蛇x地，可以直接將滑動(dòng)操作的速度轉(zhuǎn)換為水平偏移步長。另外，可基于波動(dòng)動(dòng)效的持續(xù)時(shí)間確定波動(dòng)動(dòng)效的幅度衰減速度，不同周期繪制的輪廓曲線的垂直幅度值可按照所述幅度衰減速度進(jìn)行衰減。可選地，可以取波動(dòng)動(dòng)效的持續(xù)時(shí)間的倒數(shù)作為幅度衰減速度。

基于上述原理，水平偏移量不同的輪廓曲線的繪制步驟，可以為：根據(jù)水平偏移初始值和輪廓曲線對應(yīng)的周期數(shù)，結(jié)合滑動(dòng)操作的速度，確定輪廓曲線的水平偏移量；根據(jù)垂直幅度初始值和輪廓曲線對應(yīng)的周期數(shù)，結(jié)合波動(dòng)動(dòng)效的持續(xù)時(shí)間，確定輪廓曲線的垂直幅度值；根據(jù)輪廓曲線的水平偏移量和垂直幅度值，在第一界面元素的邊界上繪制輪廓曲線。

進(jìn)一步可選地，上述基于水平偏移量和垂直幅度值，在第一界面元素的邊界上繪制輪廓曲線的步驟，可以為：根據(jù)輪廓曲線的水平偏移量和垂直幅度值，確定輪廓曲線在第一界面元素的邊界上的像素點(diǎn)；連接所述像素點(diǎn)，以形成所述輪廓曲線；閉合所述輪廓曲線；填充所述閉合后的輪廓曲線。

在一可選實(shí)施方式中，波動(dòng)動(dòng)效為水波紋動(dòng)效，相應(yīng)的，波動(dòng)動(dò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)用需求以及動(dòng)效樣式等因素適應(yīng)性設(shè)置；speed_hua表示滑動(dòng)操作的速度；i表示輪廓曲線對應(yīng)的周期數(shù)；A表示輪廓曲線的垂直幅度值；A0表示垂直幅度初始值，可根據(jù)應(yīng)用場景、應(yīng)用需求以及動(dòng)效樣式等因素適應(yīng)性設(shè)置；duration_hua表示波動(dòng)動(dòng)效的持續(xù)時(shí)間，可根據(jù)應(yīng)用場景、應(yīng)用需求以及動(dòng)效樣式等因素適應(yīng)性設(shè)置。

基于上述公式(1)和(2)計(jì)算出的水平偏移量和垂直幅度值，可采用下述公式(3)或(4)，計(jì)算像素點(diǎn)的坐標(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表示水波紋動(dòng)效中一個(gè)波紋的寬度，可根據(jù)應(yīng)用場景、應(yīng)用需求以及動(dòng)效樣式等因素適應(yīng)性設(shè)置；offsetY0表示垂直偏移量可根據(jù)應(yīng)用場景、應(yīng)用需求以及動(dòng)效樣式等因素適應(yīng)性設(shè)置；x表示像素點(diǎn)的水平坐標(biāo)值，其取值為[0,max]，max的值可根據(jù)應(yīng)用場景、應(yīng)用需求以及動(dòng)效樣式等因素適應(yīng)性設(shè)置；相應(yīng)的，y表示像素點(diǎn)的垂直坐標(biāo)值，其取值為[y(0),y(max)]。

動(dòng)效的應(yīng)用：本申請上述實(shí)施或下述實(shí)施例提供的動(dòng)效與滑動(dòng)操作相關(guān)聯(lián)，原則上，可應(yīng)用于任何支持滑動(dòng)操作的應(yīng)用，例如電子商務(wù)類應(yīng)用、游戲類應(yīng)用、即時(shí)通訊類應(yīng)用等等。

在下述實(shí)施例中，以電子商務(wù)應(yīng)用場景中的外賣類應(yīng)用為例，結(jié)合外賣類應(yīng)用的界面圖示，詳細(xì)說明本申請技術(shù)方案的操作流程。

參考圖4a-圖4c，一種界面元素的滑動(dòng)控制方法如圖4d所示，包括以下步驟：

401、顯示一界面，所述界面包含可滑動(dòng)的第一界面元素。

參考圖4a，外賣類應(yīng)用的首界面的頂部區(qū)域顯示有第一界面元素，即“火鍋節(jié)宣傳圖片”。

402、響應(yīng)于對第一界面元素的滑動(dòng)操作，沿滑動(dòng)方向移動(dòng)第一界面元素，接續(xù)于第一界面元素，將第二界面元素移入所述界面；以及在所述界面上，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。

參考圖4b，當(dāng)用戶向界面左側(cè)滑動(dòng)“火鍋節(jié)宣傳圖片”時(shí)，“火鍋節(jié)宣傳圖片”向界面左側(cè)移出，同時(shí)，“新年要常吃雞宣傳圖片”從界面右側(cè)移入界面。值得說明的是，在圖4b中，在“火鍋節(jié)宣傳圖片”和“新年要常吃雞宣傳圖片”的底部已經(jīng)出現(xiàn)水波紋動(dòng)效，但并不限于此。

繼續(xù)參考圖4c，“火鍋節(jié)宣傳圖片”完全移出界面，“新年要常吃雞宣傳圖片”完全移入界面，且其底部出現(xiàn)水波紋動(dòng)效。

在本實(shí)施例中，水波紋動(dòng)效是通過余弦函數(shù)y＝Acos(ωx+φ)+h或正弦函數(shù)y＝Asin(ωx+φ)+h，周期性繪制水平偏移量不同的余弦曲線或正弦曲線形成的。具體可通過利用微分的思想，通過余弦函數(shù)或正弦函數(shù)求得很多很多的點(diǎn)的坐標(biāo)，然后將這些點(diǎn)連成一條線，就可以得到一條余弦或正弦曲線。

在本實(shí)施例中，水波紋動(dòng)效的波動(dòng)頻率與滑動(dòng)速率成比例的改變，具體可通過滑動(dòng)速率v來等比例修改φ值來實(shí)現(xiàn)。

在本實(shí)施例中，水波紋動(dòng)效的幅度隨著持續(xù)時(shí)間逐漸衰減，當(dāng)持續(xù)時(shí)間結(jié)束時(shí)波動(dòng)幅度逐漸趨0，具體可以通過每次繪制余弦或正弦曲線時(shí)，逐漸減小A值來實(shí)現(xiàn)。

在實(shí)現(xiàn)上，預(yù)先配置以下參數(shù)：

A0：水波紋的初始固定波峰，即垂直幅度初始值；

waveWidth：一個(gè)波紋的寬度；

offsetX0：X軸的初始偏移量，即水平偏移初始值；

offsetY0：Y軸的固定偏移量，即垂直偏移量；

duration_hua：總波動(dòng)時(shí)長，即水波紋動(dòng)效的持續(xù)時(shí)間。

當(dāng)用戶滑動(dòng)“火鍋節(jié)宣傳圖片”時(shí)，捕獲滑動(dòng)操作的速度，記為speed_hua；啟動(dòng)定時(shí)器，在每個(gè)計(jì)時(shí)周期到達(dá)時(shí)，根據(jù)公式(1)、(2)和(3)或公式(1)、(2)和(4)，計(jì)算該周期內(nèi)余弦或正弦曲線上像素點(diǎn)的坐標(biāo)值，進(jìn)而基于計(jì)算出的坐標(biāo)值，繪制余弦或正弦曲線，形成視覺上的水波紋動(dòng)效。其中，不同周期繪制的余弦或正弦曲線的水平偏移不同，一種示例如圖5所示。

在外賣類應(yīng)用中，響應(yīng)于對界面上相應(yīng)元素的滑動(dòng)操作，在界面上，與滑動(dòng)操作關(guān)聯(lián)的顯示動(dòng)效，增加了滑動(dòng)操作的趣味性，有利于提高用戶對滑動(dòng)操作的新鮮感，可增加用戶執(zhí)行滑動(dòng)操作的次數(shù)，提高后續(xù)界面元素的曝光率。

圖6為本申請又一實(shí)施例提供的界面顯示方法的流程示意圖。如圖6所示，所述方法包括：

601、顯示一界面的入口。

602、響應(yīng)于對所述入口的點(diǎn)擊操作，在所述界面上，顯示動(dòng)效以及與所述動(dòng)效同步動(dòng)作的界面元素。

本實(shí)施例提供的方法可應(yīng)用于任何應(yīng)用，例如電子商務(wù)類應(yīng)用、游戲類應(yīng)用、即時(shí)通訊類應(yīng)用等等。這些應(yīng)用提供界面，用于展示應(yīng)用相關(guān)的界面元素。所述界面可以是應(yīng)用啟動(dòng)時(shí)的首界面，也可以是應(yīng)用使用過程中的界面。另外，這些應(yīng)用還會(huì)提供進(jìn)入界面的入口。例如，對應(yīng)用的首界面來說，應(yīng)用圖標(biāo)即可視為進(jìn)入首界面的入口，用戶點(diǎn)擊應(yīng)用圖標(biāo)啟動(dòng)應(yīng)用，進(jìn)而顯示首界面。對應(yīng)用的非首界面，上一界面(如首界面)上的導(dǎo)航按鈕或相關(guān)鏈接等可作為進(jìn)入該非首界面的入口，用戶通過點(diǎn)擊上一界面(如首界面)上的導(dǎo)航按鈕或相關(guān)鏈接等進(jìn)入該非首界面。

在本實(shí)施例中，響應(yīng)于用戶對界面入口的點(diǎn)擊操作，顯示所述界面；在該界面上除了顯示常規(guī)內(nèi)容之外，還顯示有動(dòng)效以及與動(dòng)效同步動(dòng)作的界面元素。這樣可以增加界面的趣味性，便于用戶點(diǎn)擊進(jìn)入該界面，進(jìn)而增加該界面上內(nèi)容的曝光率。

在上述實(shí)施例或下述實(shí)施例中，并不限定動(dòng)效以及與動(dòng)效同步動(dòng)作的界面元素在界面上的顯示位置。例如，可以在界面的邊界、頂部區(qū)域、底部區(qū)域或中間區(qū)域，顯示動(dòng)效以及與動(dòng)效同步動(dòng)作的界面元素。

在上述實(shí)施例或下述實(shí)施例中，并不限定動(dòng)效和/或與動(dòng)效同步動(dòng)作的界面元素的行為或變化風(fēng)格?？蛇x地，可以通過可視化屬性體現(xiàn)動(dòng)效和/或與動(dòng)效同步動(dòng)作的界面元素的行為?；诖?，動(dòng)效和/或與動(dòng)效同步動(dòng)作的界面元素的顯示步驟，可以為：在界面上，以預(yù)設(shè)規(guī)律變化的可視化屬性，顯示動(dòng)效和/或與動(dòng)效同步動(dòng)作的界面元素。這里的可視化屬性是指用戶能夠直觀看到的屬性，例如可以是動(dòng)效的顏色、持續(xù)時(shí)間、幅度、頻率、軌跡等。其中，不同動(dòng)效的可視化屬性也會(huì)有所不同。

在一應(yīng)用實(shí)例中，動(dòng)效的可視化屬性包括顏色，則動(dòng)效的顏色可以按照預(yù)設(shè)規(guī)律變化。例如，動(dòng)效的顏色可以按照預(yù)設(shè)的變化速度從暗到亮逐漸變化；或者，動(dòng)效的顏色也可以按照預(yù)設(shè)的變化速度從亮到暗逐漸變化。

在另一應(yīng)用實(shí)例中，動(dòng)效的可視化屬性包括幅度，則動(dòng)效的幅度可以按照預(yù)設(shè)的規(guī)律變化。例如，動(dòng)效的顏色可以按照預(yù)設(shè)的變化速度從最大逐漸變化到某一預(yù)設(shè)值，例如0，再從該預(yù)設(shè)值開始逐漸變?yōu)樽畲蟆?/p>

在又一應(yīng)用實(shí)例中，與動(dòng)效同步動(dòng)作的界面元素的可視化屬性包括顏色，則動(dòng)效的顏色可以按照預(yù)設(shè)規(guī)律變化。例如，界面元素的顏色可以按照預(yù)設(shè)的變化速度從暗到亮逐漸變化；或者，界面元素的顏色也可以按照預(yù)設(shè)的變化速度從亮到暗逐漸變化。

值得說明的是，對于與動(dòng)效同步動(dòng)作的界面元素和動(dòng)效均具有的可視化屬性，與動(dòng)效同步動(dòng)作的界面元素可以與動(dòng)效做相同變化，也可以與動(dòng)效做不同變化，對此不做限定。

另外，在本申請實(shí)施例中，更為關(guān)注動(dòng)效的可視化屬性的變化。

在上述實(shí)施例或下述實(shí)施例中，不限定動(dòng)效的樣式?？蛇x地，動(dòng)效可以為波動(dòng)動(dòng)效。對波動(dòng)動(dòng)效來說，其可視化屬性包括但不限于此：幅度、頻率、顏色、持續(xù)時(shí)間中的至少一種。

進(jìn)一步，波動(dòng)動(dòng)效可以是但不限于：水波紋動(dòng)效、心電圖動(dòng)效、彈簧動(dòng)效或振蕩衰減動(dòng)效。關(guān)于這些波動(dòng)動(dòng)效的說明可參見前述實(shí)施例，在此不再贅述。

基于上述波動(dòng)動(dòng)效，實(shí)現(xiàn)波動(dòng)動(dòng)效以及與波動(dòng)動(dòng)效同步動(dòng)作的界面元素的步驟，可以為：在界面上，周期性地繪制波動(dòng)動(dòng)效的輪廓曲線，或者水平偏移量不同的多條輪廓曲線，以形成波動(dòng)動(dòng)效；以及在繪制輪廓曲線的過程中，根據(jù)界面元素與波動(dòng)動(dòng)效之間的相對位置，動(dòng)態(tài)調(diào)整界面元素的位置，使得界面元素能與波動(dòng)動(dòng)效同步動(dòng)作。對波動(dòng)動(dòng)效來說，界面元素能與波動(dòng)動(dòng)效同步動(dòng)作主要是指界面元素以與波動(dòng)動(dòng)效相同的頻率波動(dòng)。

在一種實(shí)現(xiàn)方式中，可預(yù)設(shè)水平偏移步長，不同周期繪制的輪廓曲線的水平偏移量可按照所述水平偏移步長增長。另外，可預(yù)設(shè)垂直幅度值，不同周期繪制的輪廓曲線的垂直幅度值保持不變?；诖?，水平偏移量不同的輪廓曲線的繪制步驟，可以為：根據(jù)水平偏移初始值和輪廓曲線對應(yīng)的周期數(shù)，結(jié)合預(yù)設(shè)水平偏移步長，確定輪廓曲線的水平偏移量；根據(jù)輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值，在界面上繪制輪廓曲線。

進(jìn)一步可選地，上述基于水平偏移量和垂直幅度值，在第一界面元素的邊界上繪制輪廓曲線的步驟，可以為：根據(jù)輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值，確定輪廓曲線在所述界面上的像素點(diǎn)；連接所述像素點(diǎn)，以形成所述輪廓曲線；閉合所述輪廓曲線；填充所述閉合后的輪廓曲線。

對于波動(dòng)動(dòng)效為水波紋動(dòng)效的情況，其輪廓曲線為正弦曲線/余弦曲線。水波紋動(dòng)效是通過余弦函數(shù)y＝Acos(ωx+φ)+h或正弦函數(shù)y＝Asin(ωx+φ)+h，周期性繪制水平偏移量不同的余弦曲線或正弦曲線形成的。輪廓曲線的繪制過程可參見前述實(shí)施例，在此不再贅述。區(qū)別僅在于，該實(shí)施例中的水平偏移步長為預(yù)設(shè)值，而不是滑動(dòng)操作的速度，且垂直幅度值不做衰減。

在上述實(shí)施或下述實(shí)施例中，所述界面可以是電子商務(wù)類應(yīng)用、游戲類應(yīng)用、即時(shí)通訊類應(yīng)用等中的界面。以電子商務(wù)應(yīng)用場景中的外賣類應(yīng)用為例，所述界面可以是用戶詳情界面；相應(yīng)的，與動(dòng)效同步動(dòng)作的界面元素可以是用戶頭像圖標(biāo)。以動(dòng)效為水波紋動(dòng)效為例，則本實(shí)施例提供的用戶詳情界面的示意圖如圖7a-7c所示。參見圖7a-7c，用戶頭像圖標(biāo)漂浮于水波紋動(dòng)效之上，且跟隨水波紋上下浮動(dòng)。

需要說明的是，上述實(shí)施例所提供方法的各步驟的執(zhí)行主體均可以是同一設(shè)備，或者，該方法也由不同設(shè)備作為執(zhí)行主體。比如，步驟201至步驟203的執(zhí)行主體可以為設(shè)備A；又比如，步驟201和202的執(zhí)行主體可以為設(shè)備A，步驟203的執(zhí)行主體可以為設(shè)備B；等等。

圖8為本申請又一實(shí)施例提供的界面元素的滑動(dòng)控制裝置的結(jié)構(gòu)示意圖。如圖8所示，所述裝置包括：界面顯示單元81和動(dòng)效顯示單元82。

界面顯示單元81，用于顯示一界面，所述界面包含可滑動(dòng)的第一界面元素。

動(dòng)效顯示單元82，用于響應(yīng)于對第一界面元素的滑動(dòng)操作，在界面上，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。

在一可選實(shí)施方式中，動(dòng)效顯示單元82具體用于：在第一界面元素的周邊，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。

在一可選實(shí)施方式中，動(dòng)效顯示單元82具體用于執(zhí)行以下至少一種顯示操作：

在第一界面元素所在區(qū)域的相鄰區(qū)域，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效；

在第一界面元素的內(nèi)邊界，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效；

在第一界面元素的外邊界，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效；以及

在第一界面元素與其相鄰界面元素的交界，與滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。

在一可選實(shí)施方式中，動(dòng)效顯示單元82還用于：響應(yīng)于對第一界面元素的滑動(dòng)操作，沿滑動(dòng)方向移動(dòng)第一界面元素；以及接續(xù)于第一界面元素，將第二界面元素移入界面。

在一可選實(shí)施方式中，動(dòng)效顯示單元82還用于：響應(yīng)于對第一界面元素的滑動(dòng)操作，在界面上，以與滑動(dòng)操作的速度成比例變化的可視化屬性，顯示動(dòng)效。

在一可選實(shí)施方式中，動(dòng)效為波動(dòng)動(dòng)效，其中，可視化屬性包括：幅度、頻率、顏色、持續(xù)時(shí)間中的至少一種。

在一可選實(shí)施方式中，動(dòng)效顯示單元82還用于：在第一界面元素的邊界上，周期性地繪制波動(dòng)動(dòng)效的輪廓曲線，或者水平偏移量不同的多條輪廓曲線，以形成波動(dòng)動(dòng)效。

在一可選實(shí)施方式中，動(dòng)效顯示單元82具體用于：根據(jù)水平偏移初始值和輪廓曲線對應(yīng)的周期數(shù)，結(jié)合滑動(dòng)操作的速度，確定輪廓曲線的水平偏移量；根據(jù)垂直幅度初始值和輪廓曲線對應(yīng)的周期數(shù)，結(jié)合波動(dòng)動(dòng)效的持續(xù)時(shí)間，確定輪廓曲線的垂直幅度值；根據(jù)輪廓曲線的水平偏移量和垂直幅度值，在第一界面元素的邊界上繪制輪廓曲線。

在一可選實(shí)施方式中，動(dòng)效顯示單元82具體用于：根據(jù)輪廓曲線的水平偏移量和垂直幅度值，確定輪廓曲線在第一界面元素的邊界上的像素點(diǎn)；連接像素點(diǎn)，以形成輪廓曲線；閉合輪廓曲線；填充閉合后的輪廓曲線。

在一可選實(shí)施方式中，輪廓曲線為正弦曲線/余弦曲線。基于此，動(dòng)效顯示單元82具體用于根據(jù)公式(1)，確定輪廓曲線的水平偏移量；相應(yīng)的，動(dòng)效顯示單元82具體用于根據(jù)公式(2)，確定輪廓曲線的垂直幅度值。關(guān)于公式(1)和(2)可參見前述方法實(shí)施例中的描述。

在一可選實(shí)施方式中，波動(dòng)動(dòng)效為水波紋動(dòng)效、心電圖動(dòng)效、彈簧動(dòng)效或振蕩衰減動(dòng)效。

本實(shí)施例提供的界面元素的滑動(dòng)控制裝置，可用于執(zhí)行上述相應(yīng)方法的流程，詳細(xì)流程在此不再贅述。

本實(shí)施例提供的界面元素的滑動(dòng)控制裝置，可響應(yīng)于對第一界面元素的滑動(dòng)操作，在界面上，與滑動(dòng)操作關(guān)聯(lián)的顯示動(dòng)效，增加了滑動(dòng)操作的趣味性，有利于提高用戶對滑動(dòng)操作的新鮮感，可增加用戶執(zhí)行滑動(dòng)操作的次數(shù)，提高后續(xù)界面元素的曝光率。

本申請實(shí)施還提供一種電子設(shè)備，電子設(shè)備包括顯示器、處理器和存儲(chǔ)器，存儲(chǔ)器用于存儲(chǔ)上述界面元素的滑動(dòng)控制裝置執(zhí)行上述界面元素的滑動(dòng)控制方法的程序，處理器被配置為用于執(zhí)行存儲(chǔ)器中存儲(chǔ)的程序，顯示器被配置為顯示處理器輸出的內(nèi)容。電子設(shè)備還可以包括通信接口，用于電子設(shè)備與其他設(shè)備或通信網(wǎng)絡(luò)通信。

本申請實(shí)施例還提供一種計(jì)算機(jī)存儲(chǔ)介質(zhì)，用于儲(chǔ)存上述界面元素的滑動(dòng)控制裝置所用的計(jì)算機(jī)軟件指令，其包含用于執(zhí)行上述界面元素的滑動(dòng)控制方法為上述界面元素的滑動(dòng)控制裝置所涉及的程序。

圖9為本申請又一實(shí)施例提供的界面顯示裝置的結(jié)構(gòu)示意圖。如圖9所示，所述裝置包括：入口顯示單元91和動(dòng)效顯示單元92。

入口顯示單元91，用于顯示一界面入口。

動(dòng)效顯示單元92，用于響應(yīng)于對入口的點(diǎn)擊操作，在界面上，顯示動(dòng)效以及與動(dòng)效同步動(dòng)作的界面元素。

在一可選實(shí)施方式中，動(dòng)效顯示單元92具體用于：在界面的邊界、頂部區(qū)域、底部區(qū)域或中間區(qū)域，顯示動(dòng)效以及界面元素。

在一可選實(shí)施方式中，動(dòng)效顯示單元92還用于：在界面上，以預(yù)設(shè)規(guī)律變化的可視化屬性，顯示動(dòng)效和/或界面元素。

在一可選實(shí)施方式中，動(dòng)效為波動(dòng)動(dòng)效；其中，可視化屬性包括：幅度、頻率、顏色、持續(xù)時(shí)間中的至少一種。

在一可選實(shí)施方式中，動(dòng)效顯示單元92還用于：在界面上，周期性地繪制波動(dòng)動(dòng)效的輪廓曲線，或者水平偏移量不同的多條輪廓曲線，以形成波動(dòng)動(dòng)效；以及在繪制輪廓曲線的過程中，根據(jù)界面元素與波動(dòng)動(dòng)效之間的相對位置，動(dòng)態(tài)調(diào)整界面元素的位置。

在一可選實(shí)施方式中，動(dòng)效顯示單元92具體用于：根據(jù)水平偏移初始值和輪廓曲線對應(yīng)的周期數(shù)，結(jié)合預(yù)設(shè)水平偏移步長，確定輪廓曲線的水平偏移量；根據(jù)輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值，在界面上繪制輪廓曲線。

在一可選實(shí)施方式中，動(dòng)效顯示單元92具體用于：根據(jù)輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值，確定輪廓曲線在界面上的像素點(diǎn)；連接像素點(diǎn)，以形成輪廓曲線；閉合輪廓曲線；填充閉合后的輪廓曲線。

在一可選實(shí)施方式中，波動(dòng)動(dòng)效為水波紋動(dòng)效、心電圖動(dòng)效、彈簧動(dòng)效或振蕩衰減動(dòng)效。

在一可選實(shí)施方式中，界面為用戶詳情界面；界面元素為用戶頭像圖標(biāo)。

本實(shí)施例提供的界面顯示裝置，可用于執(zhí)行上述相應(yīng)方法的流程，詳細(xì)流程在此不再贅述。

本實(shí)施例提供的界面顯示裝置，在界面上顯示動(dòng)效以及與動(dòng)效同步動(dòng)作的界面元素，增加了界面的趣味性，可增加用戶對界面的訪問次數(shù)，提高界面元素的曝光率。

本申請實(shí)施還提供一種電子設(shè)備，電子設(shè)備包括顯示器、處理器和存儲(chǔ)器，存儲(chǔ)器用于存儲(chǔ)上述界面顯示裝置執(zhí)行上述界面顯示方法的程序，處理器被配置為用于執(zhí)行存儲(chǔ)器中存儲(chǔ)的程序，顯示器被配置為顯示處理器輸出的內(nèi)容。電子設(shè)備還可以包括通信接口，用于電子設(shè)備與其他設(shè)備或通信網(wǎng)絡(luò)通信。

本申請實(shí)施例還提供一種計(jì)算機(jī)存儲(chǔ)介質(zhì)，用于儲(chǔ)存上述界面顯示裝置所用的計(jì)算機(jī)軟件指令，其包含用于執(zhí)行上述界面顯示方法為上述界面顯示裝置所涉及的程序。

本領(lǐng)域內(nèi)的技術(shù)人員應(yīng)明白，本發(fā)明的實(shí)施例可提供為方法、系統(tǒng)、或計(jì)算機(jī)程序產(chǎn)品。因此，本發(fā)明可采用完全硬件實(shí)施例、完全軟件實(shí)施例、或結(jié)合軟件和硬件方面的實(shí)施例的形式。而且，本發(fā)明可采用在一個(gè)或多個(gè)其中包含有計(jì)算機(jī)可用程序代碼的計(jì)算機(jī)可用存儲(chǔ)介質(zhì)(包括但不限于磁盤存儲(chǔ)器、CD-ROM、光學(xué)存儲(chǔ)器等)上實(shí)施的計(jì)算機(jī)程序產(chǎn)品的形式。

本發(fā)明是參照根據(jù)本發(fā)明實(shí)施例的方法、設(shè)備(系統(tǒng))、和計(jì)算機(jī)程序產(chǎn)品的流程圖和/或方框圖來描述的。應(yīng)理解可由計(jì)算機(jī)程序指令實(shí)現(xiàn)流程圖和/或方框圖中的每一流程和/或方框、以及流程圖和/或方框圖中的流程和/或方框的結(jié)合?？商峁┻@些計(jì)算機(jī)程序指令到通用計(jì)算機(jī)、專用計(jì)算機(jī)、嵌入式處理機(jī)或其他可編程數(shù)據(jù)處理設(shè)備的處理器以產(chǎn)生一個(gè)機(jī)器，使得通過計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備的處理器執(zhí)行的指令產(chǎn)生用于實(shí)現(xiàn)在流程圖一個(gè)流程或多個(gè)流程和/或方框圖一個(gè)方框或多個(gè)方框中指定的功能的裝置。

這些計(jì)算機(jī)程序指令也可存儲(chǔ)在能引導(dǎo)計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備以特定方式工作的計(jì)算機(jī)可讀存儲(chǔ)器中，使得存儲(chǔ)在該計(jì)算機(jī)可讀存儲(chǔ)器中的指令產(chǎn)生包括指令裝置的制造品，該指令裝置實(shí)現(xiàn)在流程圖一個(gè)流程或多個(gè)流程和/或方框圖一個(gè)方框或多個(gè)方框中指定的功能。

這些計(jì)算機(jī)程序指令也可裝載到計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備上，使得在計(jì)算機(jī)或其他可編程設(shè)備上執(zhí)行一系列操作步驟以產(chǎn)生計(jì)算機(jī)實(shí)現(xiàn)的處理，從而在計(jì)算機(jī)或其他可編程設(shè)備上執(zhí)行的指令提供用于實(shí)現(xiàn)在流程圖一個(gè)流程或多個(gè)流程和/或方框圖一個(gè)方框或多個(gè)方框中指定的功能的步驟。

在一個(gè)典型的配置中，計(jì)算設(shè)備包括一個(gè)或多個(gè)處理器(CPU)、輸入/輸出接口、網(wǎng)絡(luò)接口和內(nèi)存。

內(nèi)存可能包括計(jì)算機(jī)可讀介質(zhì)中的非永久性存儲(chǔ)器，隨機(jī)存取存儲(chǔ)器(RAM)和/或非易失性內(nèi)存等形式，如只讀存儲(chǔ)器(ROM)或閃存(flash RAM)。內(nèi)存是計(jì)算機(jī)可讀介質(zhì)的示例。

計(jì)算機(jī)可讀介質(zhì)包括永久性和非永久性、可移動(dòng)和非可移動(dòng)媒體可以由任何方法或技術(shù)來實(shí)現(xiàn)信息存儲(chǔ)。信息可以是計(jì)算機(jī)可讀指令、數(shù)據(jù)結(jié)構(gòu)、程序的模塊或其他數(shù)據(jù)。計(jì)算機(jī)的存儲(chǔ)介質(zhì)的例子包括，但不限于相變內(nèi)存(PRAM)、靜態(tài)隨機(jī)存取存儲(chǔ)器(SRAM)、動(dòng)態(tài)隨機(jī)存取存儲(chǔ)器(DRAM)、其他類型的隨機(jī)存取存儲(chǔ)器(RAM)、只讀存儲(chǔ)器(ROM)、電可擦除可編程只讀存儲(chǔ)器(EEPROM)、快閃記憶體或其他內(nèi)存技術(shù)、只讀光盤只讀存儲(chǔ)器(CD-ROM)、數(shù)字多功能光盤(DVD)或其他光學(xué)存儲(chǔ)、磁盒式磁帶，磁帶磁磁盤存儲(chǔ)或其他磁性存儲(chǔ)設(shè)備或任何其他非傳輸介質(zhì)，可用于存儲(chǔ)可以被計(jì)算設(shè)備訪問的信息。按照本文中的界定，計(jì)算機(jī)可讀介質(zhì)不包括暫存電腦可讀媒體(transitory media)，如調(diào)制的數(shù)據(jù)信號(hào)和載波。

還需要說明的是，術(shù)語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、商品或者設(shè)備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、商品或者設(shè)備所固有的要素。在沒有更多限制的情況下，由語句“包括一個(gè)……”限定的要素，并不排除在包括所述要素的過程、方法、商品或者設(shè)備中還存在另外的相同要素。

本領(lǐng)域技術(shù)人員應(yīng)明白，本申請的實(shí)施例可提供為方法、系統(tǒng)或計(jì)算機(jī)程序產(chǎn)品。因此，本申請可采用完全硬件實(shí)施例、完全軟件實(shí)施例或結(jié)合軟件和硬件方面的實(shí)施例的形式。而且，本申請可采用在一個(gè)或多個(gè)其中包含有計(jì)算機(jī)可用程序代碼的計(jì)算機(jī)可用存儲(chǔ)介質(zhì)(包括但不限于磁盤存儲(chǔ)器、CD-ROM、光學(xué)存儲(chǔ)器等)上實(shí)施的計(jì)算機(jī)程序產(chǎn)品的形式。

以上所述僅為本申請的實(shí)施例而已，并不用于限制本申請。對于本領(lǐng)域技術(shù)人員來說，本申請可以有各種更改和變化。凡在本申請的精神和原理之內(nèi)所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本申請的權(quán)利要求范圍之內(nèi)。

本申請公開A1、一種界面元素的滑動(dòng)控制方法，包括：

顯示一界面，所述界面包含可滑動(dòng)的第一界面元素；

響應(yīng)于對所述第一界面元素的滑動(dòng)操作，在所述界面上，與所述滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。

A2、如A1所述的方法中，所述動(dòng)效的顯示步驟，包括：在所述第一界面元素的周邊，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效。

A3、如A2所述的方法中，所述動(dòng)效的顯示步驟，包括以下至少一種：

在所述第一界面元素所在區(qū)域的相鄰區(qū)域，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效；

在所述第一界面元素的內(nèi)邊界，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效；

在所述第一界面元素的外邊界，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效；以及

在所述第一界面元素與其相鄰界面元素的交界，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效。

A4、如A1所述的方法中，所述動(dòng)效的顯示步驟，還包括：響應(yīng)于對所述第一界面元素的滑動(dòng)操作，沿滑動(dòng)方向移動(dòng)所述第一界面元素；以及

接續(xù)于所述第一界面元素，將第二界面元素移入所述界面。

A5、如A1～A4中任一項(xiàng)所述的方法，所述動(dòng)效的顯示步驟，還包括：

響應(yīng)于對所述第一界面元素的滑動(dòng)操作，在所述界面上，以與所述滑動(dòng)操作的速度成比例變化的可視化屬性，顯示所述動(dòng)效。

A6、如A5所述的方法中，所述動(dòng)效為波動(dòng)動(dòng)效，其中，所述可視化屬性包括：幅度、頻率、顏色、持續(xù)時(shí)間中的至少一種。

A7、如A6所述的方法中，所述動(dòng)效的顯示步驟，還包括：在所述第一界面元素的邊界上，周期性地繪制所述波動(dòng)動(dòng)效的輪廓曲線，或者水平偏移量不同的多條輪廓曲線，以形成所述波動(dòng)動(dòng)效。

A8、如A7所述的方法中，所述輪廓曲線的繪制步驟，包括：

根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù)，結(jié)合所述滑動(dòng)操作的速度，確定所述輪廓曲線的水平偏移量；

根據(jù)垂直幅度初始值和所述輪廓曲線對應(yīng)的周期數(shù)，結(jié)合所述波動(dòng)動(dòng)效的持續(xù)時(shí)間，確定所述輪廓曲線的垂直幅度值；

根據(jù)所述輪廓曲線的水平偏移量和垂直幅度值，在所述第一界面元素的邊界上繪制所述輪廓曲線。

A9、如A8所述的方法中，所述輪廓曲線的繪制步驟，還包括：

根據(jù)所述輪廓曲線的水平偏移量和垂直幅度值，確定所述輪廓曲線在所述第一界面元素的邊界上的像素點(diǎn)；

連接所述像素點(diǎn)，以形成所述輪廓曲線；

閉合所述輪廓曲線；

填充所述閉合后的輪廓曲線。

A10、如A9所述的方法中，所述輪廓曲線為正弦曲線/余弦曲線；其中，

所述輪廓曲線的水平偏移量的確定步驟，包括：

offsetX＝offsetX0+(i-1)*speed_hua；

所述輪廓曲線的垂直幅度值的確定步驟，包括：

A＝A0*(1-(i-1)/(60*duration_hua))；

其中，offsetX表示所述輪廓曲線的水平偏移量；

offsetX0表示所述水平偏移初始值；

speed_hua表示所述滑動(dòng)操作的速度；

i表示所述輪廓曲線對應(yīng)的周期數(shù)；

A表示所述輪廓曲線的垂直幅度值；

A0表示所述垂直幅度初始值；

duration_hua表示所述波動(dòng)動(dòng)效的持續(xù)時(shí)間。

A11、如A6所述的方法中，所述波動(dòng)動(dòng)效為水波紋動(dòng)效、心電圖動(dòng)效、彈簧動(dòng)效或振蕩衰減動(dòng)效。

本申請還公開了B12、一種界面顯示方法，包括：

顯示一界面的入口；

響應(yīng)于對所述入口的點(diǎn)擊操作，在所述界面上，顯示動(dòng)效以及與所述動(dòng)效同步動(dòng)作的界面元素。

B13、如B12所述的方法中，所述動(dòng)效以及所述界面元素的顯示步驟，包括：

在所述界面的邊界、頂部區(qū)域、底部區(qū)域或中間區(qū)域，顯示所述動(dòng)效以及所述界面元素。

B14、如B12或B13所述的方法中，所述動(dòng)效和/或所述界面元素的顯示步驟，還包括：在所述界面上，以預(yù)設(shè)規(guī)律變化的可視化屬性，顯示所述動(dòng)效和/或所述界面元素。

B15、如B14所述的方法中，所述動(dòng)效為波動(dòng)動(dòng)效；其中，所述可視化屬性包括：幅度、頻率、顏色、持續(xù)時(shí)間中的至少一種。

B16、如B15所述的方法中，所述動(dòng)效以及所述界面元素的顯示步驟，還包括：

在所述界面上，周期性地繪制所述波動(dòng)動(dòng)效的輪廓曲線，或者水平偏移量不同的多條輪廓曲線，以形成所述波動(dòng)動(dòng)效；以及

在繪制所述輪廓曲線的過程中，根據(jù)所述界面元素與所述波動(dòng)動(dòng)效之間的相對位置，動(dòng)態(tài)調(diào)整所述界面元素的位置。

B17、如B16所述的方法中，所述輪廓曲線的繪制步驟，包括：

根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù)，結(jié)合預(yù)設(shè)水平偏移步長，確定所述輪廓曲線的水平偏移量；

根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值，在所述界面上繪制所述輪廓曲線。

B18、如B17所述的方法中，所述輪廓曲線的繪制步驟，還包括：

根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值，確定所述輪廓曲線在所述界面上的像素點(diǎn)；

連接所述像素點(diǎn)，以形成所述輪廓曲線；

閉合所述輪廓曲線；

填充所述閉合后的輪廓曲線。

B19、如B15所述的方法中，所述波動(dòng)動(dòng)效為水波紋動(dòng)效、心電圖動(dòng)效、彈簧動(dòng)效或振蕩衰減動(dòng)效。

B20、如B12或B13所述的方法中，所述界面為用戶詳情界面；所述界面元素為用戶頭像圖標(biāo)。

本申請還公開了C21、一種界面元素的滑動(dòng)控制裝置，包括：

界面顯示單元，用于顯示一界面，所述界面包含可滑動(dòng)的第一界面元素；

動(dòng)效顯示單元，用于響應(yīng)于對所述第一界面元素的滑動(dòng)操作，在所述界面上，與所述滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。

C22、如C21所述的裝置，所述動(dòng)效顯示單元具體用于：在所述第一界面元素的周邊，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效。

C23、如C22所述的裝置中，所述動(dòng)效顯示單元具體用于執(zhí)行以下至少一種顯示操作：

在所述第一界面元素所在區(qū)域的相鄰區(qū)域，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效；

在所述第一界面元素的內(nèi)邊界，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效；

在所述第一界面元素的外邊界，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效；以及

在所述第一界面元素與其相鄰界面元素的交界，與所述滑動(dòng)操作關(guān)聯(lián)地顯示所述動(dòng)效。

C24、如C21所述的裝置，所述動(dòng)效顯示單元還用于：響應(yīng)于對所述第一界面元素的滑動(dòng)操作，沿滑動(dòng)方向移動(dòng)所述第一界面元素；以及

接續(xù)于所述第一界面元素，將第二界面元素移入所述界面。

C25、如C21～C24中任一項(xiàng)所述的裝置中，所述動(dòng)效顯示單元還用于：響應(yīng)于對所述第一界面元素的滑動(dòng)操作，在所述界面上，以與所述滑動(dòng)操作的速度成比例變化的可視化屬性，顯示所述動(dòng)效。

C26、如C25所述的裝置中，所述動(dòng)效為波動(dòng)動(dòng)效，其中，所述可視化屬性包括：幅度、頻率、顏色、持續(xù)時(shí)間中的至少一種。

C27、如C26所述的裝置中，所述動(dòng)效顯示單元還用于：在所述第一界面元素的邊界上，周期性地繪制所述波動(dòng)動(dòng)效的輪廓曲線，或者水平偏移量不同的多條輪廓曲線，以形成所述波動(dòng)動(dòng)效。

C28、如C27所述的裝置中，所述動(dòng)效顯示單元具體用于：

根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù)，結(jié)合所述滑動(dòng)操作的速度，確定所述輪廓曲線的水平偏移量；

根據(jù)垂直幅度初始值和所述輪廓曲線對應(yīng)的周期數(shù)，結(jié)合所述波動(dòng)動(dòng)效的持續(xù)時(shí)間，確定所述輪廓曲線的垂直幅度值；

根據(jù)所述輪廓曲線的水平偏移量和垂直幅度值，在所述第一界面元素的邊界上繪制所述輪廓曲線。

C29、如C28所述的裝置中，所述輪廓曲線為正弦曲線/余弦曲線；其中，

所述動(dòng)效顯示單元具體用于根據(jù)公式offsetX＝offsetX0+(i-1)*speed_hua，確定所述輪廓曲線的水平偏移量；

所述動(dòng)效顯示單元具體用于根據(jù)公式A＝A0*(1-(i-1)/(60*duration_hua))，確定所述輪廓曲線的垂直幅度值；

其中，offsetX表示所述輪廓曲線的水平偏移量；

offsetX0表示所述水平偏移初始值；

speed_hua表示所述滑動(dòng)操作的速度；

i表示所述輪廓曲線對應(yīng)的周期數(shù)；

A表示所述輪廓曲線的垂直幅度值；

A0表示所述垂直幅度初始值；

duration_hua表示所述波動(dòng)動(dòng)效的持續(xù)時(shí)間。

C30、如C26所述的裝置中，所述波動(dòng)動(dòng)效為水波紋動(dòng)效、心電圖動(dòng)效、彈簧動(dòng)效或振蕩衰減動(dòng)效。

本申請還公開了D31、一種電子設(shè)備，包括顯示器、存儲(chǔ)器和處理器；其中，

所述存儲(chǔ)器用于存儲(chǔ)一條或多條計(jì)算機(jī)指令，其中，所述一條或多條計(jì)算機(jī)指令供所述處理器調(diào)用執(zhí)行；

所述處理器用于：執(zhí)行所述存儲(chǔ)器中存儲(chǔ)的程序，以用于：

控制所述顯示器顯示一界面，所述界面包含可滑動(dòng)的第一界面元素；

響應(yīng)于對所述第一界面元素的滑動(dòng)操作，在所述界面上，與所述滑動(dòng)操作關(guān)聯(lián)地顯示動(dòng)效。

本申請還公開了E32、一種界面顯示裝置，包括：

入口顯示單元，用于顯示一界面入口；

動(dòng)效顯示單元，用于響應(yīng)于對所述入口的點(diǎn)擊操作，在所述界面上，顯示動(dòng)效以及與所述動(dòng)效同步動(dòng)作的界面元素。

E33、如E32所述的裝置中，所述動(dòng)效顯示單元具體用于：

在所述界面的邊界、頂部區(qū)域、底部區(qū)域或中間區(qū)域，顯示所述動(dòng)效以及所述界面元素。

E34、如E32或E33所述的裝置中，所述動(dòng)效顯示單元還用于：在所述界面上，以預(yù)設(shè)規(guī)律變化的可視化屬性，顯示所述動(dòng)效和/或所述界面元素。

E35、如E34所述的裝置中，所述動(dòng)效為波動(dòng)動(dòng)效；其中，所述可視化屬性包括：幅度、頻率、顏色、持續(xù)時(shí)間中的至少一種。

E36、如E35所述的裝置中，所述動(dòng)效顯示單元還用于：

在所述界面上，周期性地繪制所述波動(dòng)動(dòng)效的輪廓曲線，或者水平偏移量不同的多條輪廓曲線，以形成所述波動(dòng)動(dòng)效；以及

在繪制所述輪廓曲線的過程中，根據(jù)所述界面元素與所述波動(dòng)動(dòng)效之間的相對位置，動(dòng)態(tài)調(diào)整所述界面元素的位置。

E37、如E36所述的裝置中，所述動(dòng)效顯示單元具體用于：

根據(jù)水平偏移初始值和所述輪廓曲線對應(yīng)的周期數(shù)，結(jié)合預(yù)設(shè)水平偏移步長，確定所述輪廓曲線的水平偏移量；

根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值，在所述界面上繪制所述輪廓曲線。

E38、如E37所述的裝置中，所述動(dòng)效顯示單元具體用于：

根據(jù)所述輪廓曲線的水平偏移量和預(yù)設(shè)的垂直幅度值，確定所述輪廓曲線在所述界面上的像素點(diǎn)；

連接所述像素點(diǎn)，以形成所述輪廓曲線；

閉合所述輪廓曲線；

填充所述閉合后的輪廓曲線。

E39、如E35所述的裝置中，所述波動(dòng)動(dòng)效為水波紋動(dòng)效、心電圖動(dòng)效、彈簧動(dòng)效或振蕩衰減動(dòng)效。

E40、如E32或E33所述的裝置中，所述界面為用戶詳情界面；所述界面元素為用戶頭像圖標(biāo)。

本申請還公開F41，一種電子設(shè)備，包括顯示器、存儲(chǔ)器和處理器；其中，

所述存儲(chǔ)器用于存儲(chǔ)一條或多條計(jì)算機(jī)指令，其中，所述一條或多條計(jì)算機(jī)指令供所述處理器調(diào)用執(zhí)行；

所述處理器用于：執(zhí)行所述存儲(chǔ)器中存儲(chǔ)的程序，以用于：

控制所述顯示器顯示一界面的入口；

響應(yīng)于對所述入口的點(diǎn)擊操作，在所述界面上，顯示動(dòng)效以及與所述動(dòng)效同步動(dòng)作的界面元素。