] 子步驟b:按照公式[2],計算六邊形的高度Height:
[0048] Height=L/AspectRatio [2]
[0049] 其中,AspectRatio為正六邊形的寬高比。
[0050] 子步驟c:按照公式[3],計算每行正六邊形之間的縱向偏移量HOffset:
[0051] HOffset= 1.5*SideLength [3]
[0052] 其中,SideLength為正六邊形的邊長。
[0053] 子步驟d:從屏幕下方邊角處橫向依次排列所述正六邊形,得到第一行正六邊形。
[0054] 比如,以圖3為例,當(dāng)界面顯示入口(對于此概念的介紹,請見后文)顯示于屏幕 左側(cè)時,建立如圖3所示的直角坐標(biāo)系,正六邊形從坐標(biāo)系原點開始向右排列??紤]到屏幕 下方的邊緣是直線,因此,從坐標(biāo)系原點開始排列的正六邊形,可以是如圖3所示的不完整 的正六邊形。
[0055] 需要說明的是,當(dāng)界面顯示入口在屏幕右側(cè)時,可以從屏幕右下角處開始往左排 列正六邊形。
[0056] 這里將六邊形所在行的行數(shù)記為n,從而如圖3所示的、從坐標(biāo)系原點開始排列的 正六邊形所在行的行數(shù)η= 1,即該行正六邊形為第1行正六邊形。
[0057] 子步驟e:以第1行正六邊形為基準(zhǔn),按照每行正六邊形之間的縱向偏移HOffset, 從下往上依次排列第η行正六邊形至鋪滿整個屏幕,當(dāng)η為偶數(shù)行時,還需將該行向左偏移 二分之一個正六邊形的寬度,使得各行之間錯落排布而不發(fā)生交疊。
[0058] 第一應(yīng)用在完成正六邊形的排列之后,還會為每個正六邊形分別設(shè)置控件,從而 可以通過為每個正六邊形設(shè)置的控件,實現(xiàn)在正六邊形中顯示圖標(biāo)、文字等內(nèi)容,以及展示 后續(xù)所述的動畫效果。對控件的設(shè)置步驟與設(shè)置正六邊形的步驟相似,也可以是采用逐行 排列的方式,為各正六邊形設(shè)置控件,這樣可以保證每個控件的位置和正六邊形的位置相 一致。
[0059] 基于上述預(yù)定的顯示方式,改變了傳統(tǒng)單調(diào)的界面顯示效果,增強了用戶的使用 體驗,可有效提尚用戶粘性。
[0060] 步驟12 :根據(jù)觸發(fā)所述界面切換指令的滑動手勢操作的滑動軌跡的信息,從所述 至少兩個界面部分中確定需要展示動畫效果的界面部分,并利用所述控件展示相應(yīng)的動畫 效果。
[0061] 所述動畫效果包括但不限于:翻轉(zhuǎn)界面部分、旋轉(zhuǎn)界面部分、淡出淡入界面部分、 縮放界面部分。
[0062] 其中,所述動畫效果,比如包括:界面部分按一定角度和方向翻轉(zhuǎn);所述旋轉(zhuǎn)界面 部分,比如包括:界面部分按一定方向旋轉(zhuǎn)并縮放;淡出淡入界面部分,比如包括:界面部 分先漸漸淡化消失然后再漸漸顯示;縮放界面部分,比如包括:界面部分先縮小然后再放 大。
[0063] 根據(jù)所述滑動軌跡的信息,確定動畫效果的相關(guān)參數(shù),具體包括下述至少一種:
[0064] 根據(jù)所述滑動軌跡的滑動方向,確定界面部分的變化方向;
[0065] 根據(jù)所述滑動軌跡的滑動距離,確定動畫效果的實現(xiàn)程度;
[0066] 根據(jù)所述滑動軌跡的滑動距離,確定完成動畫效果所需的時長。
[0067] 具體的,當(dāng)所述動畫效果為翻轉(zhuǎn)界面部分時,第一應(yīng)用可以根據(jù)所述滑動軌跡的 滑動方向,確定界面部分的翻轉(zhuǎn)方向;根據(jù)所述滑動軌跡的滑動距離,確定界面部分的翻轉(zhuǎn) 角度;根據(jù)所述滑動軌跡的滑動距離,確定完成動畫效果所需的時長。
[0068] 當(dāng)所述動畫效果為旋轉(zhuǎn)界面部分時,第一應(yīng)用可以根據(jù)所述滑動軌跡的滑動方 向,確定界面部分的旋轉(zhuǎn)方向;根據(jù)所述滑動軌跡的滑動距離,確定界面部分的尺寸,比如 可以在滑動距離從〇變化至等于第一距離閾值時,確定界面部分從原始尺寸逐漸縮小至原 始尺寸的50%,進一步地,當(dāng)滑動距離從等于第一距離閾值變化至等于第二距離閾值(該 第二距離閾值大于第一距離閾值)時,確定界面部分從原始尺寸的50%縮小為原始尺寸的 10% ;根據(jù)所述滑動軌跡的滑動距離,確定完成動畫效果所需的時長。
[0069] 當(dāng)所述動畫效果為淡入淡出界面部分時,第一應(yīng)用可以根據(jù)所述滑動軌跡的滑動 距離,確定界面部分的透明度(透明度的取值范圍為[0,1],完全不透明狀態(tài)下透明度為1, 完全透明狀態(tài)下透明度為〇,),比如可以是在滑動距離從〇變化至等于第一距離閾值時,確 定界面部分的透明度從1逐漸縮小至0. 5,進一步地,當(dāng)滑動距離從等于第一距離閾值變化 至等于第二距離閾值(該第二距離閾值大于第一距離閾值)時,確定界面部分的透明度從 〇. 5逐漸縮小至0. 1 ;根據(jù)所述滑動軌跡的滑動距離,確定完成動畫效果所需的時長。
[0070] 當(dāng)所述動畫效果為縮放界面部分時,第一應(yīng)用可以根據(jù)所述滑動軌跡的滑動距 離,確定界面部分的尺寸,比如可以在滑動距離從〇變化至等于第一距離閾值時,確定界面 部分從原始尺寸逐漸縮小至原始尺寸的50%,進一步地,當(dāng)滑動距離從等于第一距離閾值 變化至等于第二距離閾值(該第二距離閾值大于第一距離閾值)時,確定界面部分從原始 尺寸的50%縮小為原始尺寸的10% ;根據(jù)所述滑動軌跡的滑動距離,確定完成動畫效果所 需的時長。
[0071] 以動畫效果為翻轉(zhuǎn)界面部分為例,如圖2b所示,為界面部分按照預(yù)定的翻轉(zhuǎn)幅 度,沿各自豎直中軸進行翻轉(zhuǎn)的示意圖,該示意圖中包含翻轉(zhuǎn)過程中某幾個時刻的第一界 面的截圖,圖中箭頭的指向,表示了在翻轉(zhuǎn)界面部分的過程中,不同時刻的界面截圖在展示 時間上的由先至后的順序。此外,圖中的手指運動軌跡為觸發(fā)界面切換指令的手勢操作的 滑動軌跡。
[0072] 根據(jù)滑動軌跡的信息,確定需要展示動畫效果的界面部分和動畫效果的相關(guān)參 數(shù)。具體通過如下子步驟實現(xiàn):
[0073] 子步驟I:在當(dāng)前展示的界面為第一界面時,第一應(yīng)用檢測到用戶對于第一界面 的滑動手勢操作(該滑動手勢操作觸發(fā)界面切換指令)時,獲取滑動手勢操作的初始觸摸 點坐標(biāo)(TouchX,TouchY),如圖3所示;
[0074] 子步驟II:獲取各個正六邊形的中心點坐標(biāo)(CenterXnm、CenterYnm),根據(jù)三角函 數(shù)計算觸摸點(TouchX,TouchY)和各個正六邊形的中心點坐標(biāo)(CenterXnm、CenterYnm)之 間的距離distance?,其中η表示正六邊形所在行的行數(shù),m表示正六邊形所在列的列數(shù),nm 表示正六邊形所在的位置為第η行第m列。
[0075] 子步驟III:記distancenm的最小值為distanceMin,此最短距離對應(yīng)的六邊形即 為中心六邊形,將此六邊形記為ring(0),如圖3中標(biāo)0六邊形所示;查找當(dāng)前ring(0)正 六邊形的所有外環(huán)六邊形,記為ring(l),如圖3中標(biāo)1六邊形其共同構(gòu)成ring(l);依此 類推,可以查找到得到ring數(shù)組。其中,ring數(shù)組可以表示為{ring(j)},j的取值范圍為 [0,N]。比如ring數(shù)組可以包含ring(0)、ring(l)、·'ringOO,其中,N的具體數(shù)值由初 始觸摸點的位置決定。
[0076] 子步驟IV:檢測到用戶手指移動時,按照下述公式[4]計算用戶手指當(dāng)前觸摸位 置與初始觸摸點的X坐標(biāo)的差A(yù)X:
[0077] ΔX=MoveX-TouchX [4]
[0078] 其中,MoveX為用戶手指當(dāng)前觸摸位置的X坐標(biāo)。
[0079] 針對圖3所示的坐標(biāo)系而言,可以根據(jù)Δχ的正負確定六邊形的翻轉(zhuǎn)方向,如果 Δχ為正,則正向翻轉(zhuǎn),如果Δχ為負,則逆向翻轉(zhuǎn)。如圖3中,標(biāo)2正六邊形中所示箭頭方 向為正向翻轉(zhuǎn),即六邊形左側(cè)向屏幕外側(cè)翻轉(zhuǎn),右側(cè)向屏幕內(nèi)側(cè)翻轉(zhuǎn),反之則為逆向翻轉(zhuǎn);
[0080] 子步驟V:按照下述公式[5]計算ring(j)的