旋屏界面展示方法及裝置制造方法
【專利摘要】一種旋屏界面展示方法，包括：獲取起始旋屏事件，獲取界面窗口，獲取所述界面窗口的界面截圖；根據(jù)所述界面截圖生成遮擋視圖并添加到所述界面窗口中；獲取界面視圖，將所述界面視圖由所述界面窗口移除，并將所述界面視圖緩存；獲取結束旋屏事件，獲取緩存的界面視圖，將所述界面視圖重繪并添加到所述界面窗口中，所述遮擋視圖遮擋所述由緩存獲取到的界面視圖；將所述遮擋視圖由所述界面窗口移除。此外，還提供了一種旋屏界面展示裝置。上述旋屏界面展示方法及裝置能夠提高展示速度。
【專利說明】旋屏界面展示方法及裝置
【技術領域】
[0001]本發(fā)明涉及移動互聯(lián)網(wǎng)【技術領域】，特別是涉及一種旋屏界面展示方法及裝置。
【背景技術】
[0002]隨著移動互聯(lián)網(wǎng)技術的發(fā)展，智能終端已得到廣泛應用，例如智能手機、平板電腦等。智能終端通常具有一定長寬比(通常為4:3和16:9)的顯示屏。由于智能終端的便攜性，當智能終端在旋轉90度時，可根據(jù)智能終端的旋轉方向展示旋屏界面，即將顯示屏內的顯示內容在旋轉方向上相應地旋轉90度。
[0003]例如，在IOS系統(tǒng)中，可通過HWebView等界面視圖組件加載、解析、排版和渲染顯示界面，當智能終端旋屏90度時，則可根據(jù)屏幕尺寸重新排版界面內容。
[0004]然而，傳統(tǒng)技術中，對于顯示內容較多的界面，例如鏈接較多的門戶網(wǎng)站的網(wǎng)頁界面，在旋屏時，界面視圖需要花費大量時間根據(jù)屏幕尺寸對界面內容重新排版和渲染后，再展示旋屏界面，使得旋屏界面展示的速度較慢，從而影響用戶體驗。

【發(fā)明內容】

[0005]基于此，有必要提供一種能提高展示速度的旋屏界面展示方法。
[0006]一種旋屏界面展示方法，包括:
[0007]獲取起始旋屏事件，獲取界面窗口，獲取所述界面窗口的界面截圖；
[0008]根據(jù)所述界面截圖生成遮擋視圖并添加到所述界面窗口中；
[0009]獲取界面視圖，將所述界面視圖由所述界面窗口移除，并將所述界面視圖緩存；
[0010]獲取結束旋屏事件，獲取緩存的界面視圖，將所述界面視圖重繪并添加到所述界面窗口中，所述遮擋視圖遮擋所述由緩存獲取到的界面視圖；
[0011]將所述遮擋視圖由所述界面窗口移除。
[0012]此外，還有必要提供一種能提高展示速度的旋屏界面展示裝置。
[0013]一種旋屏界面展示裝置，包括:
[0014]界面截圖獲取模塊，用于獲取起始旋屏事件，獲取界面窗口，獲取所述界面窗口的界面截圖；
[0015]遮擋視圖生成模塊，用于根據(jù)所述界面截圖生成遮擋視圖并添加到所述界面窗口中；
[0016]界面視圖移除模塊，用于獲取界面視圖，將所述界面視圖由所述界面窗口移除，并將所述界面視圖緩存；
[0017]界面視圖重繪模塊，用于獲取結束旋屏事件，獲取緩存的界面視圖，將所述界面視圖重繪并添加到所述界面窗口中，所述遮擋視圖遮擋所述由緩存獲取到的界面視圖；
[0018]遮擋視圖移除模塊，用于將所述遮擋視圖由所述界面窗口移除。
[0019]上述旋屏界面展示方法及裝置，在起始旋屏事件觸發(fā)時，沒有先等待界面窗口中的界面視圖重繪完畢后再展示旋屏動畫，而是通過獲取界面窗口的界面截圖，并根據(jù)界面截圖生成遮擋視圖來代替界面視圖的可視效果。且在結束旋屏事件觸發(fā)時重繪界面視圖，然后移除遮擋視圖，使得旋屏過程中的可視效果與傳統(tǒng)技術的可視效果相同。由于獲取界面截圖并生成遮擋視圖的時間損耗遠遠小于重繪界面視圖的時間損耗，使得展示速度得到了提聞，從而提聞了用戶體驗。
【專利附圖】

【附圖說明】
[0020]圖1為一個實施例中旋屏界面展示方法的流程圖；
[0021]圖2為一個實施例中智能終端豎屏狀態(tài)的界面效果圖；
[0022]圖3為一個實施例中智能終端橫屏狀態(tài)的界面效果圖；
[0023]圖4為另一個實施例中智能終端橫屏狀態(tài)的界面效果圖；
[0024]圖5為一個實施例中旋屏界面展示裝置的結構示意圖。
【具體實施方式】
[0025]在一個實施例中，如圖1所示，一種旋屏界面展示方法，包括以下步驟:
[0026]步驟S102，獲取起始旋屏事件，獲取界面窗口，獲取界面窗口的界面截圖。
[0027]界面窗口即智能終端中用于展示應用的顯示內容的窗口。如圖2和圖3所示，智能終端的顯示區(qū)域內通常包括任務欄和界面窗口兩部分，任務欄顯示顯示操作系統(tǒng)信息；界面窗口則顯示應用的顯示內容(如圖2和圖3中的網(wǎng)頁內容)。
[0028]起始旋屏事件即對智能終端進行旋轉操作后，智能終端在開始旋轉顯示屏中的界面窗口之前觸發(fā)的事件。起始旋屏事件對應有相應的事件處理函數(shù)。可通過事件處理函數(shù)調用系統(tǒng)提供的截圖函數(shù)截取界面窗口的界面截圖。
[0029]例如，在IOS 系統(tǒng)中，函數(shù) WillAnimateRotationToInterfaceOrientation (以下簡稱起始旋屏事件響應函數(shù))即為與捕獲到的起始旋屏事件對應的事件處理函數(shù)?？赏ㄟ^在該事件處理函數(shù)調用IOS系統(tǒng)提供的截圖函數(shù)來截取界面截圖。
[0030]步驟S104，根據(jù)界面截圖生成遮擋視圖并添加到界面窗口中。
[0031]在智能終端的操作系統(tǒng)中，界面內容的展示對象以界面視圖的形式存在。例如，在IOS系統(tǒng)中在展示網(wǎng)頁內容時，其展示對象即為nWebView組件。遮擋視圖即位于界面視圖上層且用于遮擋界面視圖的視圖層。
[0032]在一個實施例中，可通過預設的視圖層級設置函數(shù)設置遮擋視圖與界面視圖的層級關系，從而使得遮擋視圖能夠將界面視圖遮擋。例如，可通過設置遮擋視圖和界面視圖的層級關系來使遮擋視圖位于界面視圖的上層，從而將其遮擋。
[0033]在一個實施例中，根據(jù)旋轉后的界面截圖生成遮擋視圖的步驟之前還可獲取顯示屏的長寬比，根據(jù)長寬比調整界面截圖。
[0034]在本實施例中，根據(jù)長寬比調整界面截圖的步驟可具體為:根據(jù)長寬比對界面截圖進行拉伸處理。
[0035]例如，如圖2和圖3所示，若捕獲到起始旋轉事件時，智能終端處于豎屏狀態(tài)(即智能終端由豎屏狀態(tài)向橫屏狀態(tài)旋轉)，則可將界面截圖按照獲取到的顯示屏的長寬比進行拉伸，使得界面截圖的寬度由顯示屏的寬度擴展至顯示屏的長度。同樣，若智能終端由橫屏狀態(tài)向豎屏狀態(tài)旋轉，則將界面截圖的寬度由顯示屏的長度收縮至顯示屏的寬度。[0036]在另一個實施例中，根據(jù)長寬比調整界面截圖的步驟可具體為:根據(jù)長寬比對界面截圖進行對稱補白，并將界面截圖居中。
[0037]例如，如圖2和圖4所示，若捕獲到起始旋轉事件時，智能終端處于豎屏狀態(tài)(即智能終端由豎屏狀態(tài)向橫屏狀態(tài)旋轉)，則可通過對界面截圖進行對稱補白后使其寬度由顯示屏的寬度擴展至顯示屏的長度，并將界面截圖居中。需要說明的是，對稱補白所使用的背景色可以是任意顏色、背景圖等。
[0038]經(jīng)過拉伸或居中處理的界面截圖即可完整地模擬旋轉后界面視圖，且可將界面視圖完全遮擋。
[0039]步驟S106，獲取界面視圖，將界面視圖由界面窗口移除，并將界面視圖緩存。
[0040]將界面視圖由界面窗口移除，可以使智能終端不需要花費時間開始重新繪制界面視圖中的顯示內容而直接展示旋屏的動畫。也就是說，界面窗口在添加了遮擋視圖并移除了界面視圖之后，可立即顯示與該遮擋視圖的旋屏動畫，而不用等待界面視圖重繪完成后再將其整體顯示，從而加快了展示速度。
[0041]可預定義用于緩存的全局變量，通過將界面視圖賦值給該全局變量將其緩存。
[0042]步驟S108，獲取結束旋屏事件，獲取緩存的界面視圖，將界面視圖重繪并添加到界面窗口中，遮擋視圖遮擋由緩存獲取到的界面視圖。
[0043]結束旋屏事件即界面窗口停止旋轉時觸發(fā)的事件。結束旋屏事件同樣也對應有相應的事件處理函數(shù)。在一個實施例中，可通過事件處理函數(shù)獲取全局變量的值來獲取緩存的界面視圖。
[0044]在一個實施例中，將界面視圖重繪的步驟可具體為:根據(jù)長寬比重繪界面視圖。
[0045]本實施例中，生成遮擋視圖時對界面截圖的操作為拉伸處理，則可通過將界面視圖對應的顯示內容中各顯示元素的橫坐標和縱坐標均乘以長寬比來生成界面視圖，從而使得生成的界面視圖的可視效果與拉伸后的界面截圖相同。
[0046]在另一個實施例中，生成遮擋視圖時對界面截圖的操作為居中處理，則可先根據(jù)長寬比在顯示內容兩側生成對稱的補白元素，使其顯示內容和補白元素的寬度之和為顯示屏的長度。然后通過將界面視圖對應的顯示內容中各顯示元素的橫坐標平移補白元素的寬度值來生成界面視圖。需要說明的是，補白元素對應的補白顏色與前述的對稱補白所采用的背景色、背景圖一致。
[0047]將由緩存獲取到的界面視圖添加到界面窗口中的步驟之前可獲取遮擋視圖的層級?？筛鶕?jù)獲取到的遮擋視圖的層級將界面視圖添加到界面窗口中，且使得遮擋視圖遮擋由緩存獲取到的界面視圖。也就是說，在將界面視圖添加到界面窗口中的過程中，可通過層級設置函數(shù)將界面視圖置于遮擋視圖的下層，使得遮擋視圖遮擋由緩存獲取到的界面視圖。
[0048]步驟S110，將遮擋視圖由界面窗口移除。
[0049]在一個實施例中，在將遮擋視圖由界面窗口移除的步驟之前還可等待界面視圖重繪完畢，使得遮擋視圖和界面視圖的顯示效果的替換實現(xiàn)無縫連接，從而讓用戶無法感覺到遮擋視圖的存在，使得整個過程透明化。
[0050]在一個實施例中，如圖5所示，一種旋屏界面展示裝置，包括界面截圖獲取模塊102、遮擋視圖生成模塊104、界面視圖移除模塊106、界面視圖重繪模塊108以及遮擋視圖移除模塊110，其中:
[0051]界面截圖獲取模塊102，用于獲取起始旋屏事件，獲取界面窗口，獲取界面窗口的界面截圖。
[0052]界面窗口即智能終端中用于展示應用的顯示內容的窗口。如圖2和圖3所示，智能終端的顯示區(qū)域內通常包括任務欄和界面窗口兩部分，任務欄顯示顯示操作系統(tǒng)信息；界面窗口則顯示應用的顯示內容(如圖2和圖3中的網(wǎng)頁內容)。
[0053]起始旋屏事件即對智能終端進行旋轉操作后，智能終端在開始旋轉顯示屏中的界面窗口之前觸發(fā)的事件。起始旋屏事件對應有相應的事件處理函數(shù)。界面截圖獲取模塊102可用于通過事件處理函數(shù)調用系統(tǒng)提供的截圖函數(shù)截取界面窗口的界面截圖。
[0054]例如，在IOS 系統(tǒng)中，函數(shù) WillAnimateRotationToInterfaceOrientation (以下簡稱起始旋屏事件響應函數(shù))即為與捕獲到的起始旋屏事件對應的事件處理函數(shù)?？赏ㄟ^在該事件處理函數(shù)調用IOS系統(tǒng)提供的截圖函數(shù)來截取界面截圖。
[0055]遮擋視圖生成模塊104，用于根據(jù)界面截圖生成遮擋視圖并添加到界面窗口中。
[0056]在智能終端的操作系統(tǒng)中，界面內容的展示對象以界面視圖的形式存在。例如，在IOS系統(tǒng)中在展示網(wǎng)頁內容時，其展示對象即為nWebView組件。遮擋視圖即位于界面視圖上層且用于遮擋界面視圖的視圖層。
[0057]在一個實施例中，遮擋視圖生成模塊104可用于通過預設的視圖層級設置函數(shù)設置遮擋視圖與界面視圖的層級關系，從而使得遮擋視圖能夠將界面視圖遮擋。例如，可通過設置遮擋視圖和界面視圖的層級關系來使遮擋視圖位于界面視圖的上層，從而將其遮擋。
[0058]在一個實施例中，遮擋視圖生成模塊104還可用于可獲取顯示屏的長寬比，根據(jù)長寬比調整界面截圖。
[0059]在本實施例中，遮擋視圖生成模塊104還可用于根據(jù)長寬比對界面截圖進行拉伸處理。
[0060]例如，如圖2和圖3所示，若捕獲到起始旋轉事件時，智能終端處于豎屏狀態(tài)(即智能終端由豎屏狀態(tài)向橫屏狀態(tài)旋轉)，則可將界面截圖按照獲取到的顯示屏的長寬比進行拉伸，使得界面截圖的寬度由顯示屏的寬度擴展至顯示屏的長度。同樣，若智能終端由橫屏狀態(tài)向豎屏狀態(tài)旋轉，則將界面截圖的寬度由顯示屏的長度收縮至顯示屏的寬度。
[0061]在另一個實施例中，遮擋視圖生成模塊104還可用于根據(jù)長寬比對界面截圖進行對稱補白，并將界面截圖居中。
[0062]例如，如圖2和圖4所示，若捕獲到起始旋轉事件時，智能終端處于豎屏狀態(tài)(即智能終端由豎屏狀態(tài)向橫屏狀態(tài)旋轉)，則可通過對界面截圖進行對稱補白后使其寬度由顯示屏的寬度擴展至顯示屏的長度，并將界面截圖居中。需要說明的是，對稱補白所使用的背景色可以是任意顏色、背景圖等。
[0063]經(jīng)過拉伸或居中處理的界面截圖即可完整地模擬旋轉后界面視圖，且可將界面視圖完全遮擋。
[0064]界面視圖移除模塊106，用于獲取界面視圖，將界面視圖由界面窗口移除，并將界面視圖緩存。
[0065]將界面視圖由界面窗口移除，可以使智能終端不需要花費時間開始重新繪制界面視圖中的顯示內容而直接展示旋屏的動畫。也就是說，界面窗口在添加了遮擋視圖并移除了界面視圖之后，可立即顯示與該遮擋視圖的旋屏動畫，而不用等待界面視圖重繪完成后再將其整體顯示，從而加快了展示速度。
[0066]界面視圖移除模塊106還可用于預定義用于緩存的全局變量，通過將界面視圖賦值給該全局變量將其緩存。
[0067]界面視圖重繪模塊108，用于獲取結束旋屏事件，獲取緩存的界面視圖，將界面視圖重繪并添加到界面窗口中，遮擋視圖遮擋由緩存獲取到的界面視圖。
[0068]結束旋屏事件即界面窗口停止旋轉時觸發(fā)的事件。結束旋屏事件同樣也對應有相應的事件處理函數(shù)。在一個實施例中，界面視圖重繪模塊108可用于通過事件處理函數(shù)獲取全局變量的值來獲取緩存的界面視圖。
[0069]在一個實施例中，界面視圖重繪模塊108用于根據(jù)長寬比重繪界面視圖。
[0070]本實施例中，生成遮擋視圖時對界面截圖的操作為拉伸處理，則界面視圖重繪模塊108可用于通過將界面視圖對應的顯示內容中各顯示元素的橫坐標和縱坐標均乘以長寬比來生成界面視圖，從而使得生成的界面視圖的可視效果與拉伸后的界面截圖相同。
[0071]在另一個實施例中，生成遮擋視圖時對界面截圖的操作為居中處理，則界面視圖重繪模塊108可用于可先根據(jù)長寬比在顯示內容兩側生成對稱的補白元素，使其顯示內容和補白元素的寬度之和為顯示屏的長度。然后通過將界面視圖對應的顯示內容中各顯示元素的橫坐標平移補白元素的寬度值來生成界面視圖。需要說明的是，補白元素對應的補白顏色與前述的對稱補白所采用的背景色、背景圖一致。
[0072]界面視圖重繪模塊108還可用于獲取遮擋視圖的層級，根據(jù)獲取到的遮擋視圖的層級將界面視圖添加到界面窗口中，且使得遮擋視圖遮擋由緩存獲取到的界面視圖。也就是說，在將界面視圖添加到界面窗口中的過程中，界面視圖重繪模塊108可用于通過層級設置函數(shù)將界面視圖置于遮擋視圖的下層，使得遮擋視圖遮擋由緩存獲取到的界面視圖。
[0073]遮擋視圖移除模塊110，用于將遮擋視圖由界面窗口移除。
[0074]在一個實施例中，遮擋視圖移除模塊110還可用于先等待界面視圖重繪完畢，再將遮擋視圖由界面窗口移除，使得遮擋視圖和界面視圖的顯示效果的替換實現(xiàn)無縫連接，從而讓用戶無法感覺到遮擋視圖的存在，使得整個過程透明化。
[0075]上述旋屏界面展示方法及裝置，在起始旋屏事件觸發(fā)時，沒有先等待界面窗口中的界面視圖重繪完畢后再展示旋屏動畫，而是通過獲取界面窗口的界面截圖，并根據(jù)界面截圖生成遮擋視圖來代替界面視圖的可視效果。且在結束旋屏事件觸發(fā)時重繪界面視圖，然后移除遮擋視圖，使得旋屏過程中的可視效果與傳統(tǒng)技術的可視效果相同。由于獲取界面截圖并生成遮擋視圖的時間損耗遠遠小于重繪界面視圖的時間損耗，使得展示速度得到了提聞，從而提聞了用戶體驗。
[0076]本領域普通技術人員可以理解實現(xiàn)上述實施例方法中的全部或部分流程，是可以通過計算機程序來指令相關的硬件來完成，所述的程序可存儲于一計算機可讀取存儲介質中，該程序在執(zhí)行時，可包括如上述各方法的實施例的流程。其中，所述的存儲介質可為磁碟、光盤、只讀存儲記憶體(Read-Only Memory, ROM)或隨機存儲記憶體(Random AccessMemory, RAM)等。
[0077]以上所述實施例僅表達了本發(fā)明的幾種實施方式，其描述較為具體和詳細，但并不能因此而理解為對本發(fā)明專利范圍的限制。應當指出的是，對于本領域的普通技術人員來說，在不脫離本發(fā)明構思的前提下，還可以做出若干變形和改進，這些都屬于本發(fā)明的保護范圍。因此，本發(fā)明專利的保護范圍應以所附權利要求為準。
【權利要求】
1.一種旋屏界面展示方法，包括: 獲取起始旋屏事件，獲取界面窗口，獲取所述界面窗口的界面截圖； 根據(jù)所述界面截圖生成遮擋視圖并添加到所述界面窗口中； 獲取界面視圖，將所述界面視圖由所述界面窗口移除，并將所述界面視圖緩存； 獲取結束旋屏事件，獲取緩存的界面視圖，將所述界面視圖重繪并添加到所述界面窗口中，所述遮擋視圖遮擋所述由緩存獲取到的界面視圖； 將所述遮擋視圖由所述界面窗口移除。
2.根據(jù)權利要求1所述的旋屏界面展示方法，其特征在于，所述根據(jù)所述旋轉后的界面截圖生成遮擋視圖的步驟之前可包括: 獲取顯示屏的長寬比； 根據(jù)所述長寬比調整所述界面截圖。
3.根據(jù)權利要求2所述的旋屏界面展示方法，其特征在于，所述根據(jù)所述長寬比調整所述界面截圖的步驟為: 根據(jù)所述長寬比對所述界面截圖進行拉伸處理。
4.根據(jù)權利要求2所述的旋屏界面展示方法，其特征在于，所述根據(jù)所述長寬比調整所述界面截圖的步驟為: 根據(jù)所述長寬比對所述界面截圖進行對稱補白，并將所述界面截圖居中。
5.根據(jù)權利要求1至4任一項所述的旋屏界面展示方法，其特征在于，所述將所述界面視圖重繪的步驟為: 根據(jù)所述長寬比重繪界面視圖。
6.一種旋屏界面展示裝置，其特征在于，包括: 界面截圖獲取模塊，用于獲取起始旋屏事件，獲取界面窗口，獲取所述界面窗口的界面截圖； 遮擋視圖生成模塊，用于根據(jù)所述界面截圖生成遮擋視圖并添加到所述界面窗口中；界面視圖移除模塊，用于獲取界面視圖，將所述界面視圖由所述界面窗口移除，并將所述界面視圖緩存； 界面視圖重繪模塊，用于獲取結束旋屏事件，獲取緩存的界面視圖，將所述界面視圖重繪并添加到所述界面窗口中，所述遮擋視圖遮擋所述由緩存獲取到的界面視圖； 遮擋視圖移除模塊，用于將所述遮擋視圖由所述界面窗口移除。
7.根據(jù)權利要求6所述的旋屏界面展示裝置，其特征在于，所述遮擋視圖生成模塊還用于獲取顯示屏的長寬比，根據(jù)所述長寬比調整所述界面截圖。
8.根據(jù)權利要求7所述的旋屏界面展示裝置，其特征在于，所述遮擋視圖生成模塊還用于根據(jù)所述長寬比對所述界面截圖進行拉伸處理。
9.根據(jù)權利要求7所述的旋屏界面展示裝置，其特征在于，所述遮擋視圖生成模塊還用于根據(jù)所述長寬比對所述界面截圖進行對稱補白，并將所述界面截圖居中。
10.根據(jù)權利要求6至9任一項所述的旋屏界面展示裝置，其特征在于，所述界面視圖重繪模塊還用于根據(jù)所述長寬比重繪界面視圖。
【文檔編號】G06F3/0481GK103970397SQ201310037568
【公開日】2014年8月6日 申請日期:2013年1月30日 優(yōu)先權日:2013年1月30日
【發(fā)明者】李慧, 許峰峰, 蘇瑞 申請人:騰訊科技（深圳）有限公司