本發明屬于滑屏處理技術領域,特別是一種滑屏顯示方法和裝置。
背景技術:
瀑布流又稱瀑布流式布局,是比較流行的一種頁面布局,視覺表現為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷加載數據塊并附加至當前尾部。瀑布流對于圖片的展現,是高效而具有吸引力的,用戶一眼掃過的快速閱讀模式可以在短時間內獲得更多的信息量,而瀑布流還避免了用戶鼠標點擊的翻頁操作。傳統瀑布流的主要特性是錯落有致,定寬而不定高的設計,從而讓頁面區別于傳統的矩陣式圖片布局模式,利用視覺層級,視線的任意流動又緩解了視覺疲勞,同時給人以不拘一格的感覺。
瀑布流有效地降低了界面復雜度,節省了空間。對觸屏設備來說,交互方式更符合直覺。在移動應用的交互環境當中,通過向上滑動進行滾屏的操作已經成為基本的用戶習慣,而且所需要的操作精準程度遠低于點擊鏈接或按鈕。以上兩點所帶來的交互便捷性可以使用戶將注意力更多的集中在內容而不是操作上,從而讓他們更樂于沉浸在探索與瀏覽當中。
從顯示效果上看,在傳統ktv系統或目前顯示的多媒體系統中,絕大多數界面顯示內容都是固定的,同時也有部分結合通過滑屏操作來顯示更多內容,但目前的滑屏是固定的內容和按固定規則的翻頁設計的滑屏,無法實現任意大小或動態變化內容的滑屏,同時滑屏內容無法支持多種多媒體對象的內容。
另外,在擁有豐富的運營資源和運營內容時,如果將這些資源都埋沒在二級頁面,用戶難以感知。
在現有技術中,為了方便控制圖片以規定的大小進行排版(例如同行等高度、同列等寬)進行排版,滑屏對象通常只有圖片,并不涉及視頻、動態圖片等資源,而且這種技術還需要限制滑屏對象的大小。
技術實現要素:
本發明實施方式提出一種滑屏顯示方法和裝置,從而實現多樣化顯示。
本發明實施方式的技術方案如下:獲取滑屏資源,所述滑屏資源包括滑屏內容、滑屏內容類型和滑屏內容相對位置;
根據滑屏資源創建滑屏對象,并保存滑屏對象到滑屏對象操作隊列中;
創建滑屏接口,通過調用滑屏對象操作隊列,將滑屏對象以瀑布流布局方式顯示。
在一個實施方式中,所述滑屏內容包括靜止圖片、動態圖片或視頻文件;所述動態圖片包括滾動圖片或gif圖片;所述滑屏內容相對位置為相對第一個滑屏內容的位置。
在一個實施方式中,所述滑屏內容為滾動圖片時,所述滑屏資源還包括用于指示是否包含滾動按鈕的字段。
在一個實施方式中,該方法還包括:當檢測到用戶的滑屏操作指令時,將滑屏操作指令發送給滑屏接口,滑屏接口響應滑屏操作指令更新界面顯示。
在一個實施方式中,所述滑屏接口響應滑屏操作指令更新界面顯示包括:
執行觸摸軌跡跟隨處理,并且在觸摸軌跡跟隨處理之后,執行慣性滑動處理和邊距調整操作,再更新界面顯示。
在一個實施方式中,所述執行慣性滑動處理包括:
(a)、執行慣性滑動前處理,包括刪除滑屏對象接收到的消息、清空滑屏回調函數、滑屏對象間距調節以及滑屏區域邊距調節:
(b)、執行慣性距離計算,包括:當觸摸結束瞬間的滑動速度小于預定值時,判定為僅執行觸摸軌跡跟隨處理;當觸摸結束瞬間的滑動速度大于預定值時,基于滑動距離與觸摸結束瞬間的滑動速度計算慣性距離;
(c)、執行慣性滑動,更新界面顯示。
在一個實施方式中,所述執行觸摸軌跡跟隨處理包括:
刪除滑屏對象接收到的消息及清空滑屏回調函數;
當觸摸軌跡跟隨的對象都在滑屏區域內時,手滑距離等于手滑動的距離;
當觸摸軌跡跟隨的對象超過滑屏區域時,設置超出滑屏區域的距離,其中當跟手滑對象與邊界越遠時,超出滑屏區域的距離越大。
在一個實施方式中,所述執行邊距調整操作包括:滿屏左邊距調節;滿屏右邊距調節;滿屏上邊距調節;滿屏下邊距調節;不滿屏向上調節左邊距;不滿屏向下調節左邊距;不滿屏向左調節左邊距;不滿屏向右調節左邊距。
在一個實施方式中,滑屏內容為視頻文件,所述視頻文件的每一幀在其相對位置處被展示;或,滑屏內容為gif圖片,所述gif圖片的每一幀在其相對位置處被展示;或,滑屏內容為滾動圖片,當滾動按鈕被觸發時,所述滾動圖片的每張圖片在其相對位置處被滾動展示。
一種滑屏顯示裝置,包括:
獲取模塊,用于獲取滑屏資源,所述滑屏資源包括滑屏內容、滑屏內容類型和滑屏內容相對位置;
對象創建模塊,用于根據滑屏資源創建滑屏對象,并保存滑屏對象到滑屏對象操作隊列中;
顯示模塊,用于創建滑屏接口,通過調用滑屏對象操作隊列,將滑屏對象以瀑布流布局方式顯示。
在一個實施方式中,所述滑屏內容包括靜止圖片、動態圖片或視頻文件;所述動態圖片包括滾動圖片或gif圖片;所述滑屏內容相對位置為相對第一個滑屏內容的位置。
在一個實施方式中,所述滑屏內容為滾動圖片時,所述滑屏資源還包括用于指示是否包含滾動按鈕的字段。
在一個實施方式中,還包括:更新顯示模塊,用于當檢測到用戶的滑屏操作指令時,將滑屏操作指令發送給滑屏接口,滑屏接口響應滑屏操作指令更新界面顯示。
在一個實施方式中,其特征在于,更新顯示模塊,用于執行觸摸軌跡跟隨處理,并且在觸摸軌跡跟隨處理之后,執行慣性滑動處理和邊距調整操作,再更新界面顯示。
在一個實施方式中,所述執行慣性滑動處理包括:(a)、執行慣性滑動前處理,包括刪除滑屏對象接收到的消息、清空滑屏回調函數、滑屏對象間距調節以及滑屏區域邊距調節:(b)、執行慣性距離計算,包括:當觸摸結束瞬間的滑動速度小于預定值時,判定為僅執行觸摸軌跡跟隨處理;當觸摸結束瞬間的滑動速度大于預定值時,基于滑動距離與觸摸結束瞬間的滑動速度計算慣性距離;(c)、執行慣性滑動,更新界面顯示;或,所述執行觸摸軌跡跟隨處理包括:刪除滑屏對象接收到的消息及清空滑屏回調函數;當觸摸軌跡跟隨的對象都在滑屏區域內時,手滑距離等于手滑動的距離;當觸摸軌跡跟隨的對象超過滑屏區域時,設置超出滑屏區域的距離,其中當跟手滑對象與邊界越遠時,超出滑屏區域的距離越大;或,所述執行邊距調整操作包括:滿屏左邊距調節;滿屏右邊距調節;滿屏上邊距調節;滿屏下邊距調節;不滿屏向上調節左邊距;不滿屏向下調節左邊距;不滿屏向左調節左邊距;不滿屏向右調節左邊距。
在一個實施方式中,滑屏內容為視頻文件,所述視頻文件的每一幀在其相對位置處被展示;或,滑屏內容為gif圖片,所述gif圖片的每一幀在其相對位置處被展示;或,滑屏內容為滾動圖片,當滾動按鈕被觸發時,所述滾動圖片的每張圖片在其相對位置處被滾動展示。
從上述技術方案可以看出,獲取滑屏資源,所述滑屏資源包括滑屏內容、滑屏內容類型和滑屏內容相對位置;根據滑屏資源創建滑屏對象,并保存滑屏對象到滑屏對象操作隊列中;創建滑屏接口,通過調用滑屏對象操作隊列,將滑屏對象以瀑布流布局方式顯示。因此,每個滑屏對象的滑屏內容都在各自的相對位置處被顯示。可見,本發明實施方式的滑屏內容具有各自的相對位置處,實現了多樣化顯示。而且,本發明實施方式支持不同對象大小和不同多媒體對象的瀑布流滑屏。
另外,本發明實施方式還創建新瀑布流滑屏類,實現瀑布流滑屏動作包括跟手滑和慣性滑動,實現瀑布流滑屏裁剪,對象位置可以任意配置。
還有,與滑屏對象只有圖片,并不涉及視頻、動態圖片等資源的現有技術相比,本發明實施方式的滑屏資源還包括動態圖片或視頻文件。現有技術難以將視頻文件或動態圖片以設定高度或寬帶進行排版(若以設定高度或寬帶進行排版,當視頻文件中的圖片中不符合設定高度或寬帶時,則修改工作量非常大)。本發明的瀑布流則不限制滑屏資源的大小,只需根據滑屏對象的大小及位置進行排版,顯著提高了頁面排布的效率。而且,本發明的滑屏資源還可以按不同大小來區分主次,顯示于界面上,便于突出商家需要運營的資源內容重要性,來達到商家利益更大化,用戶體驗也更好。
附圖說明
圖1為根據本發明實施方式滑屏顯示方法流程圖。
圖2為根據本發明實施方式滑屏顯示裝置的結構圖。
圖3為根據本發明實施方式滑屏顯示效果的示意圖。
圖4為根據本發明實施方式瀑布流滑屏顯示方法流程圖。
圖5為根據本發明實施方式瀑布流滑屏接口層次示意圖。
圖6為根據本發明實施方式滑屏操作處理流程示意圖。
圖7為根據本發明實施方式跟手滑前處理示意圖。
圖8a為根據本發明實施方式滑屏邊距調節第一示意圖。
圖8b為根據本發明實施方式滑屏邊距調節第二示意圖。
圖8c為根據本發明實施方式滑屏邊距調節第三示意圖。
圖8d為根據本發明實施方式滑屏邊距調節第四示意圖。
圖9為根據本發明實施方式慣性滑動距離示意圖。
圖10為根據本發明實施方式瀑布流滑屏顯示裝置結構圖。
具體實施方式
為使本發明的目的、技術方案和優點更加清楚,下面結合附圖對本發明作進一步的詳細描述。
為了描述上的簡潔和直觀,下文通過描述若干代表性的實施方式來對本發明的方案進行闡述。實施方式中大量的細節僅用于幫助理解本發明的方案。但是很明顯,本發明的技術方案實現時可以不局限于這些細節。為了避免不必要地模糊了本發明的方案,一些實施方式沒有進行細致地描述,而是僅給出了框架。下文中,“包括”是指“包括但不限于”,“根據……”是指“至少根據……,但不限于僅根據……”。由于漢語的語言習慣,下文中沒有特別指出一個成分的數量時,意味著該成分可以是一個也可以是多個,或可理解為至少一個。
圖1為根據本發明實施方式滑屏顯示方法流程圖。如圖1所示,該方法包括:
步驟101:獲取滑屏資源,所述滑屏資源包括滑屏內容、滑屏內容類型和滑屏內容相對位置。
比如,機頂盒從服務器下載html配置文件。在html配置文件中包含多個滑屏內容的各自配置信息。機頂盒解析html配置文件,將各個滑屏內容的相應配置項信息保存下來。單個配置項分別包含滑屏內容、滑屏內容類型、滑屏內容相對位置(比如,滑屏內容距第一個滑屏內容的位置、滑屏內容的寬度、滑屏內容的高度)。滑屏內容包括視頻文件、動態圖片(gif圖)、靜態圖片,其中,靜態圖片又包括單張圖片和多張圖片。
步驟102:根據滑屏資源創建滑屏對象,并保存滑屏對象到滑屏對象操作隊列中。
在這里,根據保存的配置項,即滑屏資源的相對位置、類型等信息,創建滑屏對象,用來渲染滑屏資源并顯示,并將創建的滑屏對象保存到滑屏對象操作隊列中。每個滑屏對象的位置、大小為滑屏資源預先配置的位置和寬高。在步驟102中,無需對滑屏內容的大小進行調整,只需根據滑屏資源的相對位置進行排布,無需再次對圖片的大小及位置進行調整。
步驟103:創建滑屏接口,通過調用滑屏對象操作隊列,將滑屏對象以瀑布流布局方式顯示。
在這里,調用滑屏接口,用創建的滑屏對象來渲染每個配置項的滑屏內容,并根據配置好的位置在界面上顯示,最終顯示瀑布流布局的界面。關于每種類型的渲染流程上有所區別,分別描述如下:
(1)單張圖片:直接將圖片紋理內容渲染到滑屏對象中。(2)多張圖片:這里用兩個對象來達到循環滾動的效果,即先在一個對象中渲染一張圖片的紋理,然后在另一個對象中渲染下一張圖片的紋理。一定時間后將當前對象滑動裁剪出去,另一個對象滑入并恢復裁剪,以達到動態循環滾動顯示多長圖片。也可以點擊左右按鈕手動滾動。(3)gif圖片:將gif圖片的每一幀紋理保存到一個隊列中,定時循環將隊列中保存的紋理渲染到滑屏對象中,形成動畫效果。(4)視頻:滑屏對象支持視頻的播放,可以直接將播放器播放的視頻流每幀內容渲染到滑屏對象中,以達到播放視頻的效果。
以上示范性描述了不同滑屏內容類型的相應處理方式,本領域技術人員可以意識到,這種描述僅是示范性的,并不用于限定本發明實施方式的保護范圍。
在本發明實施方式中,滑屏資源不僅可以包括靜止圖片,還可以包括動態圖片或視頻文件,等等。因此,本發明的瀑布流不限制滑屏資源的大小,只需根據滑屏對象的大小及位置進行排版,大大提高頁面排布的效率。另外,本發明的滑屏資源還可以按不同大小來區分主次,顯示于界面上,便于突出商家需要運營的資源內容重要性,來達到商家利益更大化,用戶體驗更好。
在一個實施方式中,滑屏內容包括靜止圖片、動態圖片或視頻文件;所述動態圖片包括滾動圖片或gif圖片;所述滑屏內容相對位置為相對第一個滑屏內容的位置。在一個實施方式中,滑屏內容為滾動圖片時,所述滑屏資源還包括用于指示是否包含滾動按鈕的字段。在一個實施方式中,該方法還包括:當檢測到用戶的滑屏操作指令時,將滑屏操作指令發送給滑屏接口,滑屏接口響應滑屏操作指令更新界面顯示。以水平滑動為例:1.用戶拖動滑動時實時檢測水平方向的移動距離并驅動對象移動相應的距離。2.用戶停止拖動滑動時,根據對象當前的滑動速度并根據公式計算對象應該繼續滑動多少距離可以停下來。停止滑動后需要適當調整對象的距離,保證最終停止的位置合適,不至于滑過界。3、對象需要在有效的矩形區域內顯示。因此在滑動過程中滑出有效區域的對象部分需要進行裁剪,滑入有效區域的對象需要恢復被裁剪的部分。由于滑屏對象的大小不一樣,在滑動時又需要考慮裁剪,即對象在滑出有效區域時滑出多少像素,就需要將該部分裁剪掉,滑動和裁剪是同時進行的,滑入時同樣原理,因此這種滑屏滑動動作都是按幀來完成的,即一幀滑動一像素,方便處理裁剪。其中對象被裁剪的部分是不進行渲染的,即在界面上是看不到的。
在一個實施方式中,滑屏接口響應滑屏操作指令更新界面顯示包括:執行觸摸軌跡跟隨處理,并且在觸摸軌跡跟隨處理之后,執行慣性滑動處理和邊距調整操作,再更新界面顯示。具體地,執行慣性滑動處理包括:(a)、執行慣性滑動前處理,包括刪除滑屏對象接收到的消息、清空滑屏回調函數、滑屏對象間距調節以及滑屏區域邊距調節:(b)、執行慣性距離計算,包括:當觸摸結束瞬間的滑動速度小于預定值時,判定為僅執行觸摸軌跡跟隨處理;當觸摸結束瞬間的滑動速度大于預定值時,基于滑動距離與觸摸結束瞬間的滑動速度計算慣性距離;(c)、執行慣性滑動,更新界面顯示。執行觸摸軌跡跟隨處理包括:刪除滑屏對象接收到的消息及清空滑屏回調函數;當觸摸軌跡跟隨的對象都在滑屏區域內時,手滑距離等于手滑動的距離;當觸摸軌跡跟隨的對象超過滑屏區域時,設置超出滑屏區域的距離,其中當跟手滑對象與邊界越遠時,超出滑屏區域的距離越大。執行邊距調整操作包括:滿屏左邊距調節;滿屏右邊距調節;滿屏上邊距調節;滿屏下邊距調節;不滿屏向上調節左邊距;不滿屏向下調節左邊距;不滿屏向左調節左邊距;不滿屏向右調節左邊距。
在一個實施方式中,滑屏內容為視頻文件,所述視頻文件的每一幀在其相對位置處被展示;或,滑屏內容為gif圖片,所述gif圖片的每一幀在其相對位置處被展示;或,滑屏內容為滾動圖片,當滾動按鈕被觸發時,所述滾動圖片的每張圖片在其相對位置處被滾動展示。
圖2為根據本發明實施方式滑屏顯示裝置的結構圖。如圖2所示,滑屏顯示裝置200包括:獲取模塊201,用于獲取滑屏資源,所述滑屏資源包括滑屏內容、滑屏內容類型和滑屏內容相對位置;對象創建模塊202,用于根據滑屏資源創建滑屏對象,并保存滑屏對象到滑屏對象操作隊列中;顯示模塊203,用于創建滑屏接口,通過調用滑屏對象操作隊列,將滑屏對象以瀑布流布局方式顯示。
在一個實施方式中,滑屏內容包括靜止圖片、動態圖片或視頻文件;所述動態圖片包括滾動圖片或gif圖片;所述滑屏內容相對位置為相對第一個滑屏內容的位置。當屏內容為滾動圖片時,所述滑屏資源還包括用于指示是否包含滾動按鈕的字段。在一個實施方式中,還包括:更新顯示模塊204,用于當檢測到用戶的滑屏操作指令時,將滑屏操作指令發送給滑屏接口,滑屏接口響應滑屏操作指令更新界面顯示。在一個實施方式中,更新顯示模塊204,用于執行觸摸軌跡跟隨處理,并且在觸摸軌跡跟隨處理之后,執行慣性滑動處理和邊距調整操作,再更新界面顯示。其中:執行慣性滑動處理包括:(a)、執行慣性滑動前處理,包括刪除滑屏對象接收到的消息、清空滑屏回調函數、滑屏對象間距調節以及滑屏區域邊距調節:(b)、執行慣性距離計算,包括:當觸摸結束瞬間的滑動速度小于預定值時,判定為僅執行觸摸軌跡跟隨處理;當觸摸結束瞬間的滑動速度大于預定值時,基于滑動距離與觸摸結束瞬間的滑動速度計算慣性距離;(c)、執行慣性滑動,更新界面顯示。
執行觸摸軌跡跟隨處理包括:刪除滑屏對象接收到的消息及清空滑屏回調函數;當觸摸軌跡跟隨的對象都在滑屏區域內時,手滑距離等于手滑動的距離;當觸摸軌跡跟隨的對象超過滑屏區域時,設置超出滑屏區域的距離,其中當跟手滑對象與邊界越遠時,超出滑屏區域的距離越大。
執行邊距調整操作包括:滿屏左邊距調節;滿屏右邊距調節;滿屏上邊距調節;滿屏下邊距調節;不滿屏向上調節左邊距;不滿屏向下調節左邊距;不滿屏向左調節左邊距;不滿屏向右調節左邊距。
在一個實施方式中,滑屏內容為視頻文件,所述視頻文件的每一幀在其相對位置處被展示;或,滑屏內容為gif圖片,所述gif圖片的每一幀在其相對位置處被展示;或,滑屏內容為滾動圖片,當滾動按鈕被觸發時,所述滾動圖片的每張圖片在其相對位置處被滾動展示。
圖3為根據本發明實施方式滑屏顯示效果的示意圖。在圖3中,呈現了基于嵌入式的滑屏方法中實現的瀑布流滑屏效果。滑屏對象同時支持視頻、gif、多圖片,而且對象大小可不同、對象顯示可配置。具體效果包括:1、滑屏中支持視頻對象的播放,并且滑屏的時候視頻也同時播放;2、滑屏中支持gif圖片的播放,并且滑屏的時候gif也同時播放;3、滑屏中支持多圖片滾動;圖片可以自動滾動,多圖片上還有兩個按鈕,可以點擊左右按鈕滾動;4、滑屏中對象大小可以任意配置,之前已有一個不同對象大小滑屏但不可任意配置;5、滑屏中對象位置可以任意配置;6、滑屏中跟手滑在邊距時采用力度調整,滑的距邊距越遠,越難滑動;7、滑屏慣性滑動采用減速滑動,即從快速滑動到慢慢滑動最后停止;8、滑屏對象可設置倒影,倒影跟著滑屏滑動。
綜上,基于現有滑屏設計的基本框架思路,申請人提出支持不同對象大小、不同多媒體對象的瀑布流滑屏。同時為了減少滑屏線程和對象一直占用系統cpu、內存等系統資源,進行改進為動態創建銷毀的方法優化。總體的思路為:1、創建新瀑布流滑屏類。2、實現瀑布流滑屏動作包括跟手滑和慣性滑動。3、實現瀑布流滑屏裁剪問題。4、實現瀑布滑屏中界面顯示的多樣化,支持非常多不同大小的對象,并且位置可以任意配置,對象包括視頻對象、gif圖片、多圖片;滑屏中偏下方的對象設置倒影,等等。下面對本發明實施方式的具體實現過程進行更細致的詳細說明。圖4為根據本發明實施方式瀑布流滑屏顯示方法流程圖。如圖4所示,該方法包括:
步驟401:在滑屏操作隊列類中創建包含滑屏對象文件(即滑屏內容)和滑屏對象相對位置的瀑布流滑屏結構體。
步驟402:創建用于實現瀑布流滑屏操作的瀑布流滑屏類,通過傳入符合瀑布流滑屏結構體類型的滑屏對象,重載滑屏創建函數以創建瀑布流滑屏函數。
步驟403:通過調用瀑布流滑屏函數,利用應用層窗口創建瀑布流滑屏,其中每個滑屏對象的滑屏對象文件都在各自的滑屏對象相對位置處被顯示。
可見,本發明實施方式實現了創建新瀑布流滑屏類。在一個實施方式中,滑屏對象文件包括:靜止圖片文件、多圖片文件、圖像互換格式圖片文件、視頻文件或滾動圖片文件;所述滑屏對象相對位置為滑屏對象相對第一個滑屏對象的位置。可見,本發明實施方式實現了瀑布滑屏中界面顯示的多樣化,支持非常多不同大小的對象,并且位置可以任意配置,對象包括視頻對象、gif圖片、多圖片等等。
在一個實施方式中,瀑布流滑屏結構體還包括:用于指示是否包含滾動按鈕的字段。在一個實施方式中,該方法還包括:當應用層窗口檢測到滑屏操作信息時,將滑屏操作信息傳遞到瀑布流滑屏類;瀑布流滑屏類響應于滑屏操作信息執行更新操作。
優選地,執行更新操作包括:執行滑屏跟手滑處理,并且在滑屏跟手滑處理之后,執行慣性滑動處理和邊距調整操作。
在一個實施方式中,執行慣性滑動處理包括:
(a)、執行慣性滑動前處理,包括刪除滑屏全局轉動消息、清空滑屏回調函數、滑屏對象間距調節以及滑屏邊距調節:(b)、執行慣性距離計算,包括:當松手瞬間的滑動速度小于預定值時,判定為僅執行跟手滑處理;當松手瞬間的滑動速度小于預定值時,基于滑動距離與松手瞬間的滑動速度計算慣性距離;(c)、執行慣性滑動,其中每一次滑動一幀。
在一個實施方式中,執行滑屏跟手滑處理包括:刪除滑屏全局轉動消息及清空滑屏回調函數;當跟手滑對象都在滑屏區域內時,手滑距離等于手滑動的距離;當跟手滑對象超過滑屏區域時,設置標記量boundarydis,其中當跟手滑對象與邊界越遠時,boundarydis越大。在一個實施方式中,執行邊距調整操作包括:滿屏左邊距調節;滿屏右邊距調節;不滿屏向左調節左邊距;不滿屏向右調節左邊距,等等。可見,本發明實施方式實現了瀑布流滑屏動作包括跟手滑和慣性滑動。以及實現瀑布流滑屏裁剪。在一個實施方式中,滑屏對象文件為視頻文件,視頻文件的每一幀在其相對位置處被展示;或,滑屏對象文件為圖像互換格式圖片文件,圖像互換格式圖片文件的每一幀在其相對位置處被展示;或,滑屏對象文件為多圖片文件,當滾動按鈕被觸發時,多圖片文件的每張圖片在其相對位置處被滾動展示;或,為滑屏對象設置倒影。在一個實施方式中,瀑布流滑屏結構體還包括對象區域范圍;每個滑屏對象的滑屏對象文件都基于各自的滑屏對象相對位置被顯示包括:每個滑屏對象的滑屏對象文件在各自的滑屏對象相對位置處的、各自對象區域范圍內被顯示。
具體的、當滑屏對象文件為視頻,在播放視頻時,對滑屏中的視頻對象數據實時更新,即實時將視頻中的每一幀替換到視頻對象中。當滑屏對象文件為gif圖片,在播放gif圖片時,對滑屏中的gif對象數據實時更新,即實時將gif圖片中的每一幀替換到視頻對象中。而且,當滑屏對象文件為滾動圖片,滑屏中滾動圖片對象即為多張圖片循環顯示,創建四個對象,一個為當前顯示對象,一個為待替換對象,另外兩個為左右按鈕,多圖片會自動的滾動,單擊左右按鈕左右滾動。優選地,可以將所有滑屏對象大小傳入到滑屏中,根據滑屏對象大小創建滑屏。還可以將所有滑屏對象相對起點位置傳入到滑屏中,根據滑屏對象相對位置創建滑屏。當滑屏已到達最邊距時,再要滑動就會產生一個阻礙的力使之感覺起來難以滑動,即跟手滑此時滑動距離與手滑動的距離有一個系數關系,該系數為0~1。慣性滑動有一個減速效果,松手后速度超過某個值的時候讓速度從開始的值慢慢遞減,這樣產生一個慢慢滑動停止的效果。滑屏對象在偏底部的時候給其設置一個倒影,該倒影會跟著滑屏滑動。
也就是說,本發明實現界面顯示的多樣化,支持非常多不同大小的對象,并且位置可以任意配置,對象包括視頻對象、gif圖片、多圖片;滑屏中偏下方的對象設置倒影;跟手滑采用力度調整,滑動距邊距越遠越難拉動;滑屏慣性滑動采用減速滑動,其中,滑屏支持視頻對象;滑屏支持gif圖片對象;滑屏支持多圖片對象;滑屏對象大小任意配置;滑屏中相對起點位置可以任意配置;滑屏跟手滑邊距采用力度調整;滑屏慣性滑動做減速運動;滑屏對象設置倒影。而且,針對傳統滑屏的優化包括:1、優化滑屏中線程創建,本發明實施方式優選采用動態創建和銷毀線程;2、滑屏對象采用動態創建,進入頁面創建滑屏對象退出銷毀滑屏對象。
可見,本申請的具體實現包含:1、在coperatedeque(滑屏操作隊列類,見滑屏接口層次圖第二層)中創建用于瀑布流滑屏隊列操作管理的3d對象結構體。2、創建瀑布流滑屏類cslidepinterest(見滑屏接口層次圖第三層,和其他方式滑屏類同級),用于實現瀑布流滑屏操作,重載基類的滑屏創建函數createslide,通過傳入屬于瀑布流滑屏對象結構體類型的對象進行創建瀑布流滑屏。3、使用到瀑布流滑屏的應用層窗口(見滑屏接口層次圖第一層wnd頁面),通過調用瀑布流滑屏進行創建滑屏,同時實現創建、解析、存儲滑屏需要的圖片、視頻、位置、大小等資源信息,同時增加滑屏線程監聽和對滑屏對象、滑屏evge場景、滑屏線程進行管理刪除的控制,當該應用層窗口檢測用戶滑屏操作消息(一般為鼠標消息、觸摸屏消息)傳遞消息給瀑布流滑屏類進行滑屏操作處理。4、瀑布流滑屏類對滑屏對象的操作對列進行左滑、右滑、快速滑、跟手滑等操作,同時進行更新對象位置、對象顯示內容,當出發更新后回調應用層進行各類對象的更新(如:視頻對象、gif對象、多圖屏對象等)每類對象有對應的結構體進行創建響應。5、在用戶滑屏動作時對跟手滑、慣性滑進行調整優化,以達到更自然更好效果的體驗。
下面結合具體實例對本發明進行更詳細的描述。
(1)、創建瀑布流滑屏
1、瀑布流滑屏結構體
每個對象都為不規則大小圖片并且位置初始化都在首頁中,為了創建對象、保證每次滑動結束后重置滑屏位置和設置滾動滑屏左右按鈕對象顯示優先級,需要傳入一個結構體,該結構體包括圖片,每個對象與第一個對象的相對位置,對象是否為按鈕類型。定義結構體homepageparam定義如下:
2、滑屏創建函數重載
結構體用來創建滑屏,現有技術滑屏的創建函數已經不適合瀑布流滑屏,在這里以函數重載的方式創建瀑布流滑屏createslide(intnlayer,slide_modeslidemode,conststd::vector<homepageparam>&vechpparam,hwndhwnd,hdchdc)以創建滑屏對象。包括:(a)創建一個雙端隊列來管理所有對象,創建滑屏對象,每個對象都是根據圖片內容、大小創建,當滑屏對象為左右按鈕則時顯示優先級加1;(b)創建一個瀑布流滑屏類,設置滑屏默認屬性、計算對象與第一個對象相對位置等,算出相對位置是為了防止刪除滑屏消息時對象位置混亂。當完成上述兩部操作該滑屏創建基本完成,還有一些屬性需要在應用目標中設置,例如滑屏有效區、鼠標有效區、滑屏對象數等。
3、滑屏接口層次
圖5為根據本發明實施方式瀑布流滑屏接口層次示意圖。滑屏接口分為三層,層次關系如下:第一層為頁面接口層,包括cslidectrl類。cslidectrl類,滑屏操作控制類,包括滑屏數據獲取和具體實現兩部分。該類主要與頁面交互,設置一些初始化屬性。cslidectrl類是一個全局類。cslidectrl類主要功能是與頁面交互,每個需要滑屏的wnd頁面都要通過cslidectrl類來設置或獲取滑屏當前信息。第二層為中間層,數據處理和滑屏鼠標操作層,包括coperatedeque類和coperateslide類。如圖5所示,這兩個類是1:1關系,分別作為cslidectrl類的類成員數組變量的元素。對于evge滑屏模式,coperatedeque類維護一個重要成員變量object_dequem_objectdeque雙端隊列,相當于從wnd頁面獲取到的紋理的evge對象的緩沖區。coperateslide是滑屏鼠標操作類,主要對鼠標手勢的判斷。第三層是滑屏實現層,包括cslideevgeobject類、cslidebitblt類、cslidecoverflow類和cslidecoverflowcircle類。這四個類分別繼承coperateslide類,延續了coperateslide類的鼠標手勢判斷。cslideevgeobject是evge模式下的滑屏。滑屏的對象是evgeobject。利用evge的函數對其進行evgemove,evgeshow等操作。cslidebitblt是直接用minigui貼圖操作來模擬滑動效果,主要用于不需要過炫效果的滑屏操作。cslidecoverflow是coverflow下的滑屏,滑屏的對象是evgeobject。利用evge的函數對其進行evgemove,evgerotate等操作。滑屏實現層還包括cslidehomepageparam類,cslidehomepageparam類繼承coperateslide類,延續了coperateslide類的鼠標手勢判斷,用于實現瀑布流滑屏。
(2)、滑屏操作處理
整個滑屏操作是通過消息響應來完成的,判斷是否為滑屏消息,如果為滑屏消息執行跟手滑,跟手滑結束之后都會調用慣性滑動,在慣性滑動中執行慣性滑動和邊距調整操作,該滑屏與之前的滑屏最大的區別是,每一次只滑動一幀,該思路的好處有解決裁剪問題、實現減速操作。圖6為根據本發明實施方式滑屏操作處理流程示意圖。
滑屏操作處理包括滑屏跟手滑和慣性滑動。
對于滑屏跟手滑,包含:
1、跟手滑前處理
每次跟手滑之前刪除滑屏全局轉動消息以及滑屏回調函數清空,該操作是為了防止每次跟手滑的時候還有對象滾動消息在運動,它會導致許多的問題。跟手滑前處理處理要素包括:(a)在邊距多次滑動之后不能滑回去,引起這個的原因是沒有關閉上一次消息,當之前消息運動完之后會將消息狀態置為state_stop_mu,這就導致了之后的跟手滑不能正常進行;還有就是這兩個滑屏動作本就屬于一次滑屏,所以不算一次滑屏結束。問題顯示如圖7所示,圖7為根據本發明實施方式跟手滑前處理示意圖。b)按設計思路是只要有滑動響應都應按照當前的滑動方向進行滑動,假如之前的消息沒有被刪除,跟手滑可能不會按照我們所需要的滑動進行。(c)在每次刪除滑屏全局轉動消息時如果不進行滑屏回調函數清空和對象位置調整,也可能造成對象顯示錯亂。
2、跟手滑處理
跟手滑分為兩種情況,一種跟手滑過程中對象填充滿滑屏區域,另一種是對象超過滑屏區域。跟手滑處理要素包括:(a)跟手滑對象都在滑屏區域內,跟手滑距離等于手滑動的距離。(b)當對象超過滑屏區域時,設置一個標記量boundarydis,當跟手滑與邊界越遠時,boundarydis越大,表示跟手滑越來滑動,知道最好已經滑不動;該過程表現為當我們拉彈弓時所需的力會越來越大,直到最后彈弓已經拉不動,該效果能給用戶一個更好的感受。
每一次跟手滑之后都會調用慣性滑動,下面介紹慣性滑動。
對于慣性滑動處理,包含:
1、慣性滑動前處理
每次慣性滑動之前刪除滑屏全局轉動消息、清空滑屏回調函數、滑屏對象間距調節、滑屏邊距調節。慣性滑動前處理要素包含:(a)刪除滑屏全局轉動消息和清空滑屏回調函數,按設計思路是只要有滑動響應都應按照當前的滑動方向進行滑動,假如之前的消息沒有被刪除,慣性滑動可能不會按照我們所需要的滑動進行,也可能造成對象顯示紊亂的現象。(b)滑屏對象間距調節,對象左右滑動多次之后會出現間距變小的情況。解決方法:重置對象位置,可以采用如下三種方法傳入每個對象與前一個對象的距離:在創建滑屏的時候傳入;在窗口頁面中設置;在滑屏中獲取或者實時獲取。最后選取了在創建窗口的時候傳入參數值每一個對象初始矩形位置,然后計算每個對象與第一個對象的距離。在每次stopslide之后都調用重置對象位置函數。(c)滑屏邊距調節,滑屏邊距調節包含圖8a-圖8d所示的四種情況。圖8a為根據本發明實施方式滑屏邊距調節第一示意圖。圖8b為根據本發明實施方式滑屏邊距調節第二示意圖。圖8c為根據本發明實施方式滑屏邊距調節第三示意圖。圖8d為根據本發明實施方式滑屏邊距調節第四示意圖。
圖8a、圖8c、圖8d三種情況都為左邊距調整;三種情況中又有圖8a、圖8c兩種可以視為一種情況。圖8a和圖8c都是nfirstx大于滑屏區域左邊x坐標,該調整距離為ndistance=abs(nfirstx-m_slidevalidarea.left);方向為state_preview;圖8b為滿一屏時且nlastx+width小于滑屏區域右邊x坐標,該調整距離為ndistance=abs(m_slidevalidarea.right-nlastx-objwidth);方向為state_nextview;圖8d為不滿一屏時且nfirstx小于或等于滑屏區域左邊x坐標,該調整距離為ndistance=abs(m_slidevalidarea.left-nfirstx);方向為state_nextview。
為了實現慢慢減速的過程,每次只運動一幀數據,在每一幀運行完之后調用回調函數然后進行下一幀,直到最后到達終點。第一幀運行的距離為ndistance-nnum*nnum,后面每一幀運動的距離為2×nnum-1,最后總距離就是ndistance。
2、慣性距離計算
慣性距離計算的考慮要素包含:(a)當速度小于某個值時,視為僅僅只做跟手滑。(b)滑動距離與速度的3/2次方成正比,與距離的1/2次方成正比,距離dis=fabs((round(fspeed*sqrt(fabs(fspeed))*sqrt(fabs(fdis)))))。(c)總幀數為慣性距離的1/2次方,總幀數為nframe=(int)sqrt(ndistance)。(d)如果慣性滑動的距離會超過滑屏邊距時,需要設置兩個標記量g_sumdistance和g_curdistance,g_curdistance表示慣性滑動的距離,g_sumdistance為允許慣性滑動的最大距離,當g_curdistance大于g_sumdistance時進行邊距調整。
3、執行慣性滑動
執行慣性滑動的要素包括:
(a)速度由快變慢,在這里采用勻減速運行;實際實現是每次只滑一幀的距離,除第一幀為總慣性距離減去總幀數的平方,其余每一幀滑動的像素為2×nframe-1,最后剛好是慣性距離。(b)第一個消息在runslidebyobject中調用,第一幀運行的距離為ndistance-nnum*nnum,并設置一個回調函數,傳入參照對象方向、句柄、滑屏指針和剩余幀數,當消息執行完之后就會調用回調函數,在回調函數中重復操作第一次操作,但是距離為2×nnum-1,如圖9所示,圖9為根據本發明實施方式慣性滑動距離示意圖,并重新設置回調。每次總幀數自減1,直到幀數為0或者滑屏對象都已超過邊界時停止回調,然后調用滑屏邊界函數處理。(c)消息回調函數。i.判斷滑動距離是否超過滑屏區域,該判斷為每一幀后都進行,確保超過滑屏區域最多一幀的距離,當超過滑屏區域時,數據重置、回調函數清空、調用邊距調整函數。ii.判斷是否為最后一幀消息回調,如果為最后一幀將狀態置為state_stop_mu,并清空消息回調函數。iii.當不為最后一幀消息回調時,總幀數自減1,設置回調函數,調用對象運動函數,當前滑動距離加2×nnum-1。(d)之前分析速度都是采用按住滑屏和松開滑屏這一段距離的最大速度,現在采用的是松手瞬間的速度,然后對該速度進行處理。這樣做的效果明顯好于之前取最大速度的效果。
下面分別對滑屏顯示視頻對象、gif圖片對象和滾動圖片對象進行示范性說明。雖然gif圖片和滾動圖片顯示是在首頁實現的,但由于是對滑屏對象進行處理,暫且把它歸為滑屏。
1、顯示gif圖片
1.1定義gif結構體
gif結構體:存儲gif圖片信息和該gif圖片在總對象中的位置(0開始)
1.2獲取gif圖片信息和創建gif圖片
(1)定義一個gif結構體容器,從html文件中解析出gif圖片信息,結構體中的nobjectlocation表示該gif圖片為所有圖片對象中的位置。(2)創建動態圖片對象函數createanimationfromgif89afile。(3)獲取gif圖第一幀信息,將animationframe指針指向gif圖片序列的第一幀。tempgifelement.animationframe=tempgifelement.animation->frames;(4)設置背景顏色、通過第一幀gif圖信息創建gifdc面板,將第一幀圖片信息傳入滑屏中
1.3播放gif圖片
gif圖片其實是一組圖片序列,顯示gif圖片即為對著一圖片依順序進行播放,此處是在程序的ontimer中實現。(1)獲取顯示gif圖片的evge對象id。(2)將dc中的矩形區域圖片填充到bitmap中、然后用bitmap替換該evge對象紋理。(3)指向下一幀動態圖片,如果沒有下一幀返回第一張圖片,依次循環。
2、顯示滾動圖片
2.1定義三個結構體:
第一個單圖片結構體;第二個多圖片結構體,由一張圖片或多張圖片組成;第三個瀑布流滑屏結構體,該結構體已經在滑屏創建中了解,這里描述單圖片結構體和多圖片結構體
(1)單圖片結構體:該結構體存儲單個圖片對象的圖片信息、響應信息。
(2)多圖片結構體:該結構體包括一個或多個單圖片結構體、圖片是否為多圖片、圖片運動類型、圖片當前顯示為第幾張,圖片待替代對象句柄等。
2.2獲取多圖片并創建圖片evge對象
(1)定義一個多圖片結構體容器,用來存儲每一個對象的所有圖片信息。(2)對于多圖片而言,需要三個多圖片對象,第一個為多圖片,另外兩個為左右按鈕。(3)獲取每一張圖片,并將第一張圖片設為初始圖片傳給滑屏,其它圖片保存下來。(4)創建左右按鈕對象,這兩個對象中都只有一張圖片,該左右按鈕圖片現在是從皮膚包中獲取的,并且創建的滑屏對象顯示優先級加1。
2.3滾動圖片實現
(1)獲取滾動圖片的evge對象id。(2)滾動圖片包括向前和向后兩種情況,當向前滾動時,該對象顯示的圖片第幾張標記減1,向后滾動加1。(3)獲取該對象的位置,計算該對象終點位置、待替代對象初始位置和終點位置。(4)重置待替代對象的裁剪狀態、初始位置、初始大小等,設置該對象消息處理回調函數,在該回調函數中將m_banifinish置為true,表示本次圖片滾動結束。(5)執行圖片滾動和裁剪操作,交換待替代對象和原對象的句柄值。(6)滑屏時禁止圖片滾動,dobeginslide:m_banifinish=false,如果正在滾動,直接重置滾動圖片位置;doafterslide:m_banifinish=true。
3、視頻對象實現
a)在滑屏中把視頻對象同樣看為一個類似圖片對象,滑屏中統一處理。
b)不同于圖片對象,視頻對象顯示的內容是視頻,是需要播放視頻的,所以通過調播放解碼庫,進行播放視頻,這里就創建一個視頻解碼線程:staticvoid*evgevideodecodethread(void*pparam)。
c)通過播放視頻后得到視頻每一幀數據,其實每一幀數據就是一張圖像內存,如:intevge_native_decodergetpicture(intichannel,evge_native_surfacesurface,intistartx,intistarty,intisurfacewidth,intisurfaceheight)
d)得到每一幀圖像內存后,即可更新到視頻對象紋理中,如:intevgesetsubvideoteximage(pevge_p_displayhdisplay,pevge_p_textureinfoptexture,unsignedint*addr)
e)這樣視頻對象就實時在滑屏函數線程的各種處理中實現播放。
現有的cslidectrl::createslide函數只創建一個滑屏,滑屏中對象暫時沒有被創建,之后會調用cslidectrl::createslideoperate函數創建滑屏對象,創建對象采用evge場景創建,當前頁面退出時,需要調用cslidectrl::deleteslideoperate刪除滑屏對象和清空evge場景。與瀑布流滑屏對比,調用cslidectrl::createslideoperate函數創建滑屏對象時增加一個滑屏線程監聽(現有技術為滑屏存在就有線程,本申請只是存在當前滑屏線程);另調用cslidectrl::deleteslideoperate刪除滑屏對象、情況evge場景、刪除滑屏線程。
綜上,本發明實施方式的滑屏中支持視頻對象的播放,并且滑屏的時候視頻也同時播放。滑屏中支持gif圖片的播放,并且滑屏的時候gif也同時播放。滑屏中支持多圖片滾動;圖片可以自動滾動,多圖片上還有兩個按鈕,可以點擊左右按鈕滾動。滑屏中對象大小可以任意配置。滑屏中對象位置可以任意配置。滑屏中跟手滑在邊距時采用力度調整,滑的距邊距越遠,越難滑動。滑屏慣性滑動采用減速滑動,即從快速滑動到慢慢滑動最后停止。滑屏對象可設置倒影,倒影跟著滑屏滑動。
圖10為根據本發明實施方式瀑布流滑屏顯示裝置結構圖。如圖10所示,瀑布流滑屏顯示裝置1000包括:結構體創建模塊1001,用于在滑屏操作隊列類中創建包含滑屏對象文件和滑屏對象相對位置的瀑布流滑屏結構體;函數創建模塊1002,用于創建用于實現瀑布流滑屏操作的瀑布流滑屏類,通過傳入符合瀑布流滑屏結構體類型的滑屏對象,重載滑屏創建函數以創建瀑布流滑屏函數;顯示模塊1003,用于通過調用瀑布流滑屏函數,利用應用層窗口創建瀑布流滑屏,其中每個滑屏對象的滑屏對象文件都在各自的滑屏對象相對位置處被顯示。在一個實施方式中,滑屏對象文件包括:靜止圖片文件、多圖片文件、圖像互換格式圖片文件、視頻文件或滾動圖片文件;所述滑屏對象相對位置為滑屏對象與第一個滑屏對象的相對位置。在一個實施方式中,還包括:更新模塊,用于當應用層窗口檢測到滑屏操作信息時,將滑屏操作信息傳遞到瀑布流滑屏類;瀑布流滑屏類響應于滑屏操作信息執行更新操作。在一個實施方式中,執行更新操作包括:執行滑屏跟手滑處理,并且在滑屏跟手滑處理之后,執行慣性滑動處理和邊距調整操作。在一個實施方式中,所述執行慣性滑動處理包括:(a)、執行慣性滑動前處理,包括刪除滑屏全局轉動消息、清空滑屏回調函數、滑屏對象間距調節以及滑屏邊距調節:(b)、執行慣性距離計算,包括:當松手瞬間的滑動速度小于預定值時,判定為僅執行跟手滑處理;當松手瞬間的滑動速度小于預定值時,基于滑動距離與松手瞬間的滑動速度計算慣性距離;(c)、執行慣性滑動,其中每一次滑動一幀;或,所述執行滑屏跟手滑處理包括:刪除滑屏全局轉動消息及清空滑屏回調函數;當跟手滑對象都在滑屏區域內時,手滑距離等于手滑動的距離;當跟手滑對象超過滑屏區域時,設置標記量boundarydis,其中當跟手滑對象與邊界越遠時,boundarydis越大;或,所述執行邊距調整操作包括:滿屏左邊距調節;滿屏右邊距調節;不滿屏向左調節左邊距;不滿屏向右調節左邊距。在一個實施方式中,滑屏對象文件為視頻文件,視頻文件的每一幀在其相對位置處被展示;或,滑屏對象文件為圖像互換格式圖片文件,圖像互換格式圖片文件的每一幀在其相對位置處被展示;或,滑屏對象文件為多圖片文件,當滾動按鈕被觸發時,多圖片文件的每張圖片在其相對位置處被滾動展示;或,為滑屏對象設置倒影。在一個實施方式中,瀑布流滑屏結構體還包括對象區域范圍;顯示模塊,用于利用應用層窗口通過調用瀑布流滑屏類以創建瀑布流滑屏,其中每個滑屏對象的滑屏對象文件在各自的滑屏對象相對位置處的、各自對象區域范圍內被顯示。
以上所述,僅為本發明的較佳實施例而已,并非用于限定本發明的保護范圍。凡在本發明的精神和原則之內,所作的任何修改、等同替換、改進等,均應包含在本發明的保護范圍之內。