一種頁面切換系統(tǒng)、方法及窗簾特效頁面切換方法
【專利摘要】本發(fā)明公開了一種頁面切換系統(tǒng)、方法及窗簾特效頁面切換方法。所述系統(tǒng)包括監(jiān)聽模塊、識別模塊以及頁面轉(zhuǎn)換模塊。通過接收用戶操作，識別觸摸或者鼠標事件，判斷翻頁效果的類別以及頁面轉(zhuǎn)換的方向，實現(xiàn)一整套翻頁效果選擇和頁面轉(zhuǎn)換系統(tǒng)，并利用HTML5技術(shù)，為用戶提供了多種頁面轉(zhuǎn)換的翻頁效果，特別提供了模擬真實窗簾推拉效果的翻轉(zhuǎn)特效，給用戶以更好的視覺效果和更豐富的操作體驗。
【專利說明】一種頁面切換系統(tǒng)、方法及窗簾特效頁面切換方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及智能設(shè)備的切屏特效，尤其涉及的是一種基于HTML5技術(shù)的具有多種 翻頁特效的一種頁面切換系統(tǒng)、方法及窗簾特效頁面切換方法。
【背景技術(shù)】
[0002]在智能設(shè)備普遍化的當(dāng)今社會，單一手勢向上、向下滑動或鼠標滾動以獲取更多 信息的會話顯示方式，往往需要用戶連續(xù)的操作才能找到曾經(jīng)看到過的某條消息。如何在 較短的時間內(nèi)推送信息給用戶，并給用戶在瀏覽信息時帶來更好的視覺效果和更豐富的操 作體驗，更能接近現(xiàn)實中的物理模擬，成為了智能設(shè)備發(fā)展需要解決的問題。
[0003]目前存在ios和android設(shè)備上的翻頁效果,但是其實現(xiàn)方式不適用于Firefox OS (火狐操作系統(tǒng))，不適用于HTML5下的跨平臺思想。還有模擬電子書的翻頁效果的 javascript代碼庫,但是其效果單一,不夠豐富。同時，目前還未出現(xiàn)成熟的CSS 3D實現(xiàn)多 頁面切換的技術(shù)。
[0004]因此，現(xiàn)有技術(shù)還有待于改進和發(fā)展。

【發(fā)明內(nèi)容】

[0005]本發(fā)明要解決的技術(shù)問題在于，針對現(xiàn)有技術(shù)的上述缺陷，提供一種基于HTML5 技術(shù)的具有多種翻頁特效的頁面切換系統(tǒng)、方法及窗簾特效頁面切換方法。
[0006]本發(fā)明解決技術(shù)問題所采用的技術(shù)方案如下:
一種具有多種翻頁特效的頁面切換系統(tǒng)，其中，包括監(jiān)聽模塊、識別模塊以及頁面轉(zhuǎn)換 模塊，
所述監(jiān)聽模塊用于監(jiān)聽用戶的操作事件；
所述識別模塊用于判斷監(jiān)聽模塊監(jiān)聽到的用戶操作事件；
所述頁面轉(zhuǎn)換模塊用于根據(jù)用戶對翻頁效果類型的選擇操作，確定翻頁效果，并根據(jù) 用戶移動距離和移動方向進行所述翻頁效果對應(yīng)的翻頁操作。
[0007]所述的具有多種翻頁特效的頁面切換系統(tǒng)，其中，所述系統(tǒng)還包括:
預(yù)設(shè)置模塊，用于預(yù)先根據(jù)用戶的選擇操作，記錄并存儲用戶選擇的翻頁效果選項；以 及用于根據(jù)各翻頁效果類型的選擇值對翻頁效果類型進行選擇更改。
[0008]所述的具有多種翻頁特效的頁面切換系統(tǒng)，其中，所述頁面轉(zhuǎn)換模塊還包括初始 化模塊以及翻頁處理模塊。初始化模塊用于對各類型翻頁效果進行初始化，翻頁處理模塊 用于在監(jiān)聽模塊監(jiān)聽到移動事件后根據(jù)移動事件的移動情況進行播放各類型翻頁效果的 翻頁動畫。
[0009]所述的具有多種翻頁特效的頁面切換系統(tǒng)，其中，所述翻頁效果類型包括有多種， 包括平滑移動、盒子內(nèi)、盒子外、翻轉(zhuǎn)、翻滾、波浪、風(fēng)車和窗簾推拉。
[0010]所述的具有多種翻頁特效的頁面切換系統(tǒng)，其中，
所述的系統(tǒng)還包括物理模型維護模塊，用于建立與維護特效物理模型，實時輸出特效模型下的質(zhì)點運動數(shù)據(jù)；
動畫渲染生成單元，用于根據(jù)所述的運動數(shù)據(jù)渲染生成特效動畫 一種具有多種翻頁特效的頁面切換方法，其中，包括步驟:
監(jiān)聽用戶的操作事件；
當(dāng)判斷出該操作事件為移動事件且移動距離超過頁面轉(zhuǎn)換的閥值時，進行翻頁初始化，并播放移動過程中的翻頁動畫；
判斷移動是否結(jié)束，當(dāng)移動結(jié)束時，顯示最終的當(dāng)前頁面。
[0011]所述的具有多種翻頁特效的頁面切換方法，其中，在監(jiān)聽用戶的操作事件之前還包括步驟:
構(gòu)建包括平滑移動、盒子內(nèi)、盒子外、翻轉(zhuǎn)、翻滾、波浪、風(fēng)車和窗簾推拉的動畫模型，所述的動畫模型基于物理運動模型；
記錄用戶對所述動畫模型的選擇，并選擇進入特定的動畫。
[0012]所述的具有多種翻頁特效的頁面切換方法，其特征在于，當(dāng)選擇進入窗簾推拉的動畫時，所述的方法包括:
由質(zhì)點-彈簧模型構(gòu)造出布料動畫模型，設(shè)置窗簾推拉效果的翻頁效果。
[0013]所述的具有多種翻頁特效的頁面切換方法，其中，在設(shè)置窗簾推拉效果的翻頁效果時，利用HTML5 webGL技術(shù)繪制相應(yīng)的布料，并在布料上渲染當(dāng)前頁的一個影像。
[0014]所述的具有多種翻頁特效的頁面切換方法，其中，在進行翻頁初始化時，如果用戶操作為從右向左推，則在平鋪的布料上渲染當(dāng)前頁的影像作為窗簾推拉的初始狀態(tài)，并將下一頁堆疊在當(dāng)前頁的下面；如果為從左向右拉，則在合攏的布料上渲染前一頁的影像作為窗簾推拉的初始狀態(tài)，即將前一頁堆疊在當(dāng)前頁的上面。
[0015]所述的具有多種翻頁特效的頁面切換方法，其中，在移動事件中，繪制窗簾推拉的動畫，從右往左推為打開下一個頁面，從左往右拉為顯示前一個頁面，并邊移動邊繪制，根據(jù)布料的運動實時渲染頁面。
[0016]所述的具有多種翻頁特效的頁面切換方法，其中，移動結(jié)束后，如果為顯示前一頁動畫，則將前一頁窗簾拉開至完全遮擋住當(dāng)前頁，顯示屏上顯示正確的頁面；如果為顯示后一頁動畫，則將當(dāng)前頁窗簾推到最左邊至完全顯示下一頁；如果為顯示當(dāng)前頁動畫，則將窗簾回退到完全展開，顯示當(dāng)前頁。
[0017]一種電子設(shè)備窗簾特效頁面切換方法，其中，所述方法包括:
建立窗簾波動的運動物理模型，所述的物理模型基于質(zhì)點-彈簧模型的布料模擬；根據(jù)牛頓第二定律，建立所述窗簾波動的運動物理模型的質(zhì)點運動方程，所述的質(zhì)點運動方程包括外力驅(qū)動；
求解所述的運動方程，確定模型質(zhì)點的位置，并根據(jù)模型質(zhì)點的位置對窗簾運動動畫圖像進行渲染，生成窗簾運動特效。
[0018]所述的電子設(shè)備窗簾特效頁面切換方法，其中，所述求解所述的運動方程包括:
采用改進的歐拉方法對所述質(zhì)點運動方程進行降階，通過數(shù)值迭代求解方程穩(wěn)定的解。
[0019]所述的電子設(shè)備窗簾特效頁面切換方法，其特征在于，所述根據(jù)模型質(zhì)點的位置對窗簾運動動畫圖像進行渲染，生成窗簾運動特效步驟包括: 利用webGL技術(shù)繪制相應(yīng)的布料，構(gòu)造窗簾效果的顯示頁面；
在布料上渲染相應(yīng)頁面的一個影像，初始化窗簾推拉的初始狀態(tài)；
在移動事件中，繪制窗簾推拉的動畫，從右往左推為打開下一個頁面，從左往右拉為顯示前一個頁面，根據(jù)布料的模擬運動實時渲染頁面。
[0020]本發(fā)明所提供的具有多種翻頁特效的頁面切換系統(tǒng)、方法及窗簾特效頁面切換方法，利用HTML5技術(shù)，為用戶提供了多種頁面轉(zhuǎn)換的翻頁效果，特別提供了模擬真實窗簾推拉效果的翻轉(zhuǎn)特效，給用戶以更好的視覺效果和更豐富的操作體驗。
【專利附圖】

【附圖說明】
[0021]圖1是本發(fā)明提供的具有多種翻頁特效的頁面切換系統(tǒng)的結(jié)構(gòu)示意圖。
[0022]圖2是圖1中一優(yōu)選實施例的結(jié)構(gòu)示意圖。
[0023]圖3是本發(fā)明提供的具有多種翻頁特效的頁面切換方法的流程圖。
[0024]圖4是圖3中翻頁效果識別和選擇的流程圖。
[0025]圖5是圖3中盒子特效的三棱柱外頁面初始狀態(tài)示意圖。
[0026]圖6是圖5中外頁面的轉(zhuǎn)換流程圖。
[0027]圖7是本發(fā)明提供的電子設(shè)備窗簾特效頁面切換方法的流程圖。
【具體實施方式】
[0028]為使本發(fā)明的目的、技術(shù)方案及優(yōu)點更加清楚、明確，以下參照附圖并舉實施例對本發(fā)明進一步詳細說明。應(yīng)當(dāng)理解，此處所描述的具體實施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0029]本發(fā)明提供了一種基于HTML5技術(shù)的具有多種翻頁特效的頁面切換系統(tǒng)，其中，如圖1所示，該系統(tǒng)包括監(jiān)聽模塊10、識別模塊20以及頁面轉(zhuǎn)換模塊30。具體地，所述監(jiān)聽模塊10用于監(jiān)聽用戶的操作事件，識別模塊20用于判斷監(jiān)聽模塊10監(jiān)聽到的用戶操作事件，比如觸摸操作事件或鼠標操作事件等等，并進一步判斷用戶操作事件的類型，是點擊、移動或者抬起。頁面轉(zhuǎn)換模塊30會針對不同操作事件的類型進行相應(yīng)的處理，并在處理時，其首先會根據(jù)用戶對翻頁效果類型的設(shè)置，確定翻頁效果，并根據(jù)用戶移動距離和移動方向進行所述翻頁效果對應(yīng)的翻頁操作。
[0030]本發(fā)明的翻頁效果有多種類型，具體包括平滑移動、盒子內(nèi)、盒子外、翻轉(zhuǎn)、翻滾、波浪、風(fēng)車和窗簾推拉等翻頁效果。針對不同類型的翻頁效果，本發(fā)明進行不同的翻頁處理操作。
[0031]所述系統(tǒng)還包括預(yù)設(shè)置模塊40，用于預(yù)先根據(jù)用戶的選擇操作，記錄并存儲用戶選擇的翻頁效果選項。還用于對各翻頁效果類型的選擇更改，可以從LocalStorage(本地存儲)中讀取翻頁效果類型的選擇值，也可以對該選擇值進行修改，并更新LocalStorage (本地存儲)中的對應(yīng)值，該選擇值即為翻頁效果的入口標識。
[0032]優(yōu)選地，如圖2所示，所述頁面轉(zhuǎn)換模塊30還包括初始化模塊31和翻頁處理模塊32。初始化模塊31用于對各類型翻頁效果進行初始化，翻頁處理模塊32用于在監(jiān)聽模塊監(jiān)聽到移動事件后根據(jù)移動事件的移動情況進行播放各類型翻頁效果的翻頁動畫。如果用戶首次登錄該系統(tǒng)，則預(yù)設(shè)置模塊40會將翻頁效果設(shè)置為默認的平滑移動方式，否則讀取存儲在系統(tǒng)中的翻頁效果類型的選擇值，每個翻頁效果都有相應(yīng)的選擇值，根據(jù)選擇值可 以選定相應(yīng)類型的翻頁效果。
[0033]所述的系統(tǒng)還包括物理模型維護模塊50，用于建立與維護特效物理模型，實時輸 出特效模型下的質(zhì)點運動數(shù)據(jù)；
動畫渲染生成單元60，用于根據(jù)所述的運動數(shù)據(jù)渲染生成特效動畫。
[0034]基于上述具有多種翻頁特效的頁面切換系統(tǒng)，本發(fā)明還提供了一種頁面切換方 法，如圖3所示，具體包括:
步驟S100、監(jiān)聽用戶的操作事件；
其中，在步驟SlOO之前，需執(zhí)行以下步驟:預(yù)先根據(jù)用戶的選擇操作，記錄并存儲用戶 選擇的翻頁效果選項，翻頁效果有多種，包括上述的8種翻頁效果，但并不限于上述8種。每 種翻頁效果類型都對應(yīng)一個選擇值，該選擇值存儲在LocalStorage (本地存儲)中，作為翻 頁效果的入口標識。待選擇值可以修改。
[0035]例如，如圖4所示，翻頁效果識別和選擇的流程，包括步驟:
步驟S10、讀取LocalStorage中翻頁效果的選擇值；
步驟S11、判斷是否首次進入該系統(tǒng)，如果是則執(zhí)行步驟S12，否則執(zhí)行步驟S13 ；
步驟S12、設(shè)置翻頁效果為默認的平滑移動，并將翻頁效果選擇器中的對應(yīng)項設(shè)置為已 選擇，再執(zhí)行步驟S14;
步驟S13、將從LocalStorage中讀取的翻頁效果的選擇值所對應(yīng)的翻頁效果選項設(shè)置 為已選擇，再執(zhí)行步驟S14 ；
步驟S14、監(jiān)聽翻頁效果選擇值的變化
步驟S15、判斷翻頁效果的選擇值是否改變，如果是則執(zhí)行步驟S16，否則執(zhí)行步驟
S14 ；
步驟S16、將新的選擇值存儲LocalStorage中。
[0036]步驟S200、當(dāng)判斷出該操作事件為移動事件且移動距離超過頁面轉(zhuǎn)換的閥值時， 進行翻頁初始化，并播放移動過程中的翻頁動畫。
[0037]步驟S300、判斷移動是否結(jié)束，當(dāng)移動結(jié)束時，顯示最終的當(dāng)前頁面。之后以適當(dāng) 的頁面呈現(xiàn)給用戶，否則繼續(xù)移動變換頁面。
[0038]進一步地，本發(fā)明步驟S200和步驟S300主要實現(xiàn)的是在移動過程中和移動結(jié)束 時翻頁動畫的播放，每一種類型的翻頁效果有各自的初始化過程以及在移動過程中與移動 結(jié)束時的翻頁動畫。因此，下面對每一種類型的翻頁效果在移動過程中和移動結(jié)束時翻頁 動畫的播放過程進行具體的描述。具體針對上述8種類型的翻頁效果。
[0039]對于平滑移動效果:首先對頁面顯示進行初始化。設(shè)置頁面顯示為2D模式，初始 化對應(yīng)的三個頁面，前一頁向左移動整個屏幕的寬度；當(dāng)前頁不做變換；下一頁向右移動 整個屏幕的寬度。其次，在移動事件中，對移動操作進行判斷，如果操作為向右移動，則操作 前一頁和當(dāng)前頁橫向移動以顯示對應(yīng)的頁面內(nèi)容；如果操作為向左移動，則操作當(dāng)前頁和 下一頁橫向移動以顯示對應(yīng)頁面的內(nèi)容。再者，監(jiān)聽到抬起事件時移動結(jié)束后，開始頁面轉(zhuǎn) 換，判斷當(dāng)前的移動距離是否超過頁面轉(zhuǎn)換的閾值，如果大于該閾值且移動的方向為向左， 則將頁面轉(zhuǎn)換到下一頁，播放頁面轉(zhuǎn)換動畫；如果大于該閾值且移動的方向為向右，則將頁 面轉(zhuǎn)換到前一頁，播放頁面轉(zhuǎn)換動畫；如果小于該閾值，則播放當(dāng)前頁轉(zhuǎn)換到最初原始狀態(tài)的動畫。
[0040]對于盒子內(nèi)效果:首先對頁面顯示進行初始化。設(shè)置頁面顯示為3D模式，初始化對應(yīng)的三個頁面，設(shè)置頁面父容器顯示為preServe-3d，設(shè)置該容器的父容器景深以及視角位置；初始化立方體對應(yīng)的各個頁面:前一頁轉(zhuǎn)換為立方體的左側(cè)面，并將其正面朝里；當(dāng)前頁轉(zhuǎn)換為立方體的后一面；下一頁轉(zhuǎn)換為立方體的右側(cè)面，并將其正面朝里。其次，在移動事件中，對移動操作進行判斷，如果操作為向右移動，則操作頁面的父容器逆時針旋轉(zhuǎn)以顯示對應(yīng)的頁面內(nèi)容；如果操作為向左移動，則操作頁面的父容器順時針旋轉(zhuǎn)以顯示對應(yīng)頁面的內(nèi)容。再者，監(jiān)聽到抬起事件時移動結(jié)束，開始頁面轉(zhuǎn)換，判斷當(dāng)前的移動距離是否超過頁面轉(zhuǎn)換的閾值，如果大于該閾值且移動的方向為向左，則設(shè)置并播放頁面父容器的轉(zhuǎn)換動畫以將頁面轉(zhuǎn)換到下一頁；如果大于該閾值且移動的方向為向右，則設(shè)置并播放頁面父容器的轉(zhuǎn)換動畫以將頁面轉(zhuǎn)換到前一頁；如果小于該閾值，則設(shè)置并播放頁面父容器的轉(zhuǎn)換動畫以將當(dāng)前頁還原為初始狀態(tài)。
[0041]對于盒子外效果:首先對頁面顯示進行初始化。設(shè)置頁面顯示為3D模式，初始化對應(yīng)的三個頁面，設(shè)置頁面父容器顯示為preServe-3d，設(shè)置該容器的父容器景深以及視角位置；初始化三棱柱對應(yīng)的各個頁面:前一頁為三棱柱的左側(cè)面，正面朝外、當(dāng)前頁為三棱柱的正面、下一頁為三棱柱的右側(cè)面，正面朝外，都設(shè)為背面不可見屬性。該三棱柱初始狀態(tài)如圖5所示。其次，在移動事件中，對移動操作進行判斷，如果操作為向右移動，則操作頁面的父容器順時針旋轉(zhuǎn)以顯示對應(yīng)的頁面內(nèi)容；如操作為向左移動，則操作頁面的父容器逆時針旋轉(zhuǎn)以顯示對應(yīng)頁面的內(nèi)容。再者，監(jiān)聽到抬起事件時移動結(jié)束，開始頁面轉(zhuǎn)換，判斷當(dāng)前的移動距離是否超過頁面轉(zhuǎn)換的閾值，如果大于該閾值且移動的方向為向左，則設(shè)置并播放頁面父容器的轉(zhuǎn)換動畫以將頁面轉(zhuǎn)換到下一頁；如果大于該閾值且移動的方向為向右，則設(shè)置并播放頁面父容器的轉(zhuǎn)換動畫以將頁面轉(zhuǎn)換到前一頁；如果小于該閾值，則設(shè)置并播放頁面父容器的轉(zhuǎn)換動畫以將當(dāng)前頁還原為初始狀態(tài)。
[0042]下面以盒子外(也即等邊三棱柱)為例對頁面轉(zhuǎn)換過程進行舉例說明，如圖6所示，三棱柱(盒子)外頁面的轉(zhuǎn)換流程，包括以下步驟:
步驟S20、計算用戶操作移動的距離；
步驟S21、判斷該距離是否大于頁面轉(zhuǎn)換的閥值，如果是執(zhí)行步驟S22，否則結(jié)束；
步驟S22、設(shè)置頁面顯示為3D模式，并初始化3D場景以及三棱柱的三個頁面；
步驟S23、判斷是否移動，如果是執(zhí)行步驟S24、否則執(zhí)行步驟S26 ；
步驟S24、計算三棱柱的旋轉(zhuǎn)角度；
步驟S25、依角度旋轉(zhuǎn)三棱柱以顯示對應(yīng)頁面內(nèi)容；
步驟S26、判斷移動是否結(jié)束，如果是則執(zhí)行步驟S27、否則執(zhí)行步驟S23 ；
步驟S27、判斷是否停留在當(dāng)前頁，如果是則執(zhí)行步驟S28，否則執(zhí)行步驟S29 ；
步驟S28、設(shè)置三棱柱旋轉(zhuǎn)回O角度的動畫，并將當(dāng)前頁呈現(xiàn)給用戶；
步驟S29、判斷是否轉(zhuǎn)換到下一頁，如果是則執(zhí)行步驟S30，否則執(zhí)行步驟S31 ；
步驟S30、設(shè)置三棱柱旋轉(zhuǎn)-120度的動畫，將下一頁呈現(xiàn)給用戶；
步驟S31、設(shè)置三棱柱旋轉(zhuǎn)120度的動畫，將前一頁呈現(xiàn)給用戶。
[0043]對于翻轉(zhuǎn)效果:首先進行初始化操作，將當(dāng)前頁設(shè)置為卡片的正面，如果為向左移動，則將下一頁旋轉(zhuǎn)180度設(shè)置為卡片的背面，如果為向右移動，則將前一頁旋轉(zhuǎn)180度設(shè)置為卡片的背面，設(shè)置頁面的背面不可見屬性。其次在移動事件中，對移動操作進行判斷， 如果操作為向右移動，則操作頁面的父容器順時針旋轉(zhuǎn)以顯示對應(yīng)的頁面內(nèi)容；如果操作 為向左移動，則操作頁面的父容器逆時針旋轉(zhuǎn)以顯示對應(yīng)頁面的內(nèi)容。再者，監(jiān)聽到抬起事 件時移動結(jié)束，并且開始頁面轉(zhuǎn)換，判斷當(dāng)前的移動距離是否超過頁面轉(zhuǎn)換的閾值，如果大 于該閾值且移動的方向為向左，則設(shè)置并播放頁面父容器的轉(zhuǎn)換動畫以將頁面轉(zhuǎn)換到下一 頁；如果大于該閾值且移動的方向為向右，則設(shè)置并播放頁面父容器的轉(zhuǎn)換動畫以將頁面 轉(zhuǎn)換到前一頁；如果小于該閾值，則設(shè)置并播放頁面父容器的轉(zhuǎn)換動畫以將當(dāng)前頁還原為 初始狀態(tài)。
[0044]對于翻滾效果:首先進行初始化處理，其初始化與平滑移動一樣，在此不再贅述。 其次，在移動事件中，對移動操作進行判斷，如果移動方向為向左，則將當(dāng)前頁的旋轉(zhuǎn)起始 點設(shè)置為左下角，下一頁為右下角，移動時平移并旋轉(zhuǎn)這兩個頁面，如果移動方向為向右， 則將當(dāng)前頁的旋轉(zhuǎn)起始點設(shè)置為右下角，前一頁為左下角，移動時平移并旋轉(zhuǎn)這兩個頁 面，最大的旋轉(zhuǎn)角度為90度。再者，監(jiān)聽到抬起事件時移動結(jié)束，開始頁面轉(zhuǎn)換，如果為 顯示前一頁動畫，則將當(dāng)前頁在移動到windowWidth (窗口寬度)的同時旋轉(zhuǎn)至90度，將 前一頁在移動到屏幕起始位置時旋轉(zhuǎn)至0度；如果為顯示下一頁動畫，則將當(dāng)前頁在移動 到-windowWidth的同時將其旋轉(zhuǎn)到-90度，將下一頁在移動到屏幕起始位置時旋轉(zhuǎn)到0 度。
[0045]度度對于波浪效果:首先進行初始化處理，其初始化與平滑移動一樣，在此不再贅 述。其次，在移動事件中，對移動操作進行判斷，如果移動方向為向左，則將當(dāng)前頁在移動的 同時逐漸縮小，下一頁在移動時由0.5倍開始逐漸放大，相反，則將當(dāng)前頁向相反方向移動 時逐漸縮小，前一頁在移動時由0.5倍開始逐漸放大，當(dāng)然并不限于由0.5倍開始放大，也 可以為其他數(shù)值。再者，監(jiān)聽到抬起事件時移動結(jié)束，開始頁面轉(zhuǎn)換，如果為顯示前一頁動 畫，則將當(dāng)前頁在移動到windowWidth的同時逐漸縮小為0.5倍，將前一頁在移動到屏幕起 始位置時逐漸放大為I倍；如果為顯示下一頁動畫，則將當(dāng)前頁在移動到-windowWidth的 同時將其縮小為0.5倍，將下一頁在移動到屏幕起始位置時放大為I倍。
[0046]對于風(fēng)車效果:首先進行初始化處理，其初始化與平滑移動一樣，在此不再贅述。 其次，在移動事件中，對移動操作進行判斷，如果移動方向為向左，則將當(dāng)前頁的旋轉(zhuǎn)起始 點設(shè)置為右上角，下一頁為左上角，移動時平移并旋轉(zhuǎn)這兩個頁面，如果移動方向為向右， 則將當(dāng)前頁的旋轉(zhuǎn)起始點設(shè)置為左上角，前一頁為右上角，移動時平移并旋轉(zhuǎn)這兩個頁面， 最大的旋轉(zhuǎn)角度為20度，當(dāng)然并不限于20度，也可以為其他數(shù)值。再者，監(jiān)聽到抬起事件 時移動結(jié)束，開始頁面轉(zhuǎn)換，如果為顯示前一頁動畫，則將當(dāng)前頁在移動到windowWidth的 同時旋轉(zhuǎn)至-20度，將前一頁在移動到屏幕起始位置Opx時旋轉(zhuǎn)至0度；如果為顯示下一頁 動畫，則將當(dāng)前頁在移動到-windowWidth的同時將其旋轉(zhuǎn)到20度，將下一頁在移動到屏幕 起始位置時旋轉(zhuǎn)到0度。
[0047]優(yōu)選地，本發(fā)明以實現(xiàn)窗簾推拉效果為例，對窗簾推拉效果的實現(xiàn)過程進行具體 描述。如圖7所示，包括以下步驟:
步驟S110、建立窗簾波動的運動物理模型，所述的物理模型基于質(zhì)點-彈簧模型的布 料模擬。
[0048]本發(fā)明為了產(chǎn)生真實的窗簾布料運動效果，需要運用相應(yīng)的布料模型。目前的布料模型包括幾何模型和物理模型。對于幾何模型來說:布料的形狀完全用數(shù)學(xué)函數(shù)(例如正弦函數(shù))描述。雖然該模型有較快的速度，但只能描述簡單的形狀，其模擬效果不真實，需用戶干預(yù)，實用性差。本發(fā)明采用窗簾布料波動的物理模型對動畫進行描述，模擬的動畫運動效果更加逼真。本發(fā)明的物理模型:布料的形狀用微分方程描述，該模型結(jié)合布料的物理屬性，如質(zhì)量、硬度和彈性等，運用力學(xué)理論建立微分方程組，最終用數(shù)值方法求解方程(組)，該模型可以反映真實的布料狀態(tài)。
[0049]為了進一步提高運算速度，本發(fā)明基于質(zhì)點-彈簧模型的布料模擬方法，該方法的物理模型，采用了顯示歐拉與隱式迭代相結(jié)合的方法，即積分一步的變步長歐拉方法，可以把每次迭代的步長拉大，從而減少迭代次數(shù)，不僅能夠?qū)崿F(xiàn)較快的速度，還能夠反映真實的布料狀態(tài)，進而使得窗簾推拉的模擬效果真實并且運算效率更高。
[0050]在這種模型中，布料被視為在其中插入了許多質(zhì)點，質(zhì)點和質(zhì)點之間用彈簧相連，在力(拉伸力、排斥力、剪切力、彎曲力和外界作用力)的作用下，布產(chǎn)生了變形。
[0051]步驟S120、根據(jù)牛頓第二定律，建立所述窗簾波動的運動物理模型的質(zhì)點運動方程，所述的質(zhì)點運動方程包括外力驅(qū)動。
[0052]具體地，根據(jù)物體上每一質(zhì)點的運動要滿足牛頓第二定律可得:
【權(quán)利要求】
1.一種頁面切換系統(tǒng)，其特征在于，包括監(jiān)聽模塊、識別模塊以及頁面轉(zhuǎn)換模塊，所述監(jiān)聽模塊用于監(jiān)聽用戶的操作事件；所述識別模塊用于判斷監(jiān)聽模塊監(jiān)聽到的用戶操作事件；所述頁面轉(zhuǎn)換模塊用于根據(jù)用戶對翻頁效果類型的選擇操作，確定特定翻頁效果，并根據(jù)用戶移動距離和移動方向執(zhí)行所述翻頁效果對應(yīng)的翻頁操作。
2.根據(jù)權(quán)利要求1所述的具有多種翻頁特效的頁面切換系統(tǒng)，其特征在于，所述系統(tǒng)還包括:預(yù)設(shè)置模塊，用于預(yù)先根據(jù)用戶的選擇操作，記錄并存儲用戶選擇的翻頁效果選項；以及用于根據(jù)各翻頁效果類型的選擇值對翻頁效果類型進行選擇更改。
3.根據(jù)權(quán)利要求1所述的具有多種翻頁特效的頁面切換系統(tǒng)，其特征在于，所述頁面轉(zhuǎn)換模塊還包括初始化模塊以及翻頁處理模塊，所述初始化模塊用于對各類型翻頁效果進行初始化，所述翻頁處理模塊用于在監(jiān)聽模塊監(jiān)聽到移動事件后根據(jù)移動事件的移動情況進行播放各類型翻頁效果的翻頁動畫。
4.根據(jù)權(quán)利要求1所述的具有多種翻頁特效的頁面切換系統(tǒng)，其特征在于，所述翻頁效果類型包括有多種，包括平滑移動、盒子內(nèi)、盒子外、翻轉(zhuǎn)、翻滾、波浪、風(fēng)車和窗簾推拉。
5.根據(jù)權(quán)利要求3所述的具有多種翻頁特效的頁面切換系統(tǒng)，其特征在于，所述的系統(tǒng)還包括物理模型維護模塊，用于建立與維護特效物理模型，實時輸出特效模型下的質(zhì)點運動數(shù)據(jù)；動畫渲染生成單元，用于根據(jù)所述的運動數(shù)據(jù)渲染生成特效動畫。
6.一種具有多種翻頁特效的頁面切換方法，其特征在于，包括步驟:監(jiān)聽用戶的操作事件；`當(dāng)判斷出該操作事件為移動事件且移動距離超過頁面轉(zhuǎn)換的閥值時，進行翻頁初始化，并播放移動過程中的翻頁動畫；判斷移動是否結(jié)束，當(dāng)移動結(jié)束時，顯示最終的當(dāng)前頁面。
7.根據(jù)權(quán)利要求6所述的具有多種翻頁特效的頁面切換方法，其特征在于，在監(jiān)聽用戶的操作事件之前還包括步驟:構(gòu)建包括平滑移動、盒子內(nèi)、盒子外、翻轉(zhuǎn)、翻滾、波浪、風(fēng)車和窗簾推拉的動畫模型，所述的動畫模型基于物理運動模型；記錄用戶對所述動畫模型的選擇設(shè)置，當(dāng)用戶執(zhí)行頁面切換時，選擇進入特定的動畫。
8.根據(jù)權(quán)利要求7所述的具有多種翻頁特效的頁面切換方法，其特征在于，當(dāng)選擇進入窗簾推拉的動畫時，所述的方法包括:由質(zhì)點-彈簧模型構(gòu)造出布料動畫模型，執(zhí)行窗簾推拉效果的翻頁效果。
9.根據(jù)權(quán)利要求8所述的具有多種翻頁特效的頁面切換方法，其特征在于，在設(shè)置窗簾推拉效果的翻頁效果時，利用HTML5 webGL技術(shù)繪制相應(yīng)的布料，并在布料上渲染相應(yīng)頁面的影像。
10.根據(jù)權(quán)利要求9所述的具有多種翻頁特效的頁面切換方法，其特征在于，在進行翻頁初始化時，如果用戶操作為從右向左推，則在平鋪的布料上渲染當(dāng)前頁的影像作為窗簾推拉的初始狀態(tài)，并將下一頁堆疊在當(dāng)前頁的下面；如果為從左向右拉，則在合攏的布料上渲染前一頁的影像作為窗簾推拉的初始狀態(tài)，即將前一頁堆疊在當(dāng)前頁的上面。
11.根據(jù)權(quán)利要求10所述的具有多種翻頁特效的頁面切換方法，其特征在于，在移動事件中，繪制窗簾推拉的動畫，從右往左推為打開下一個頁面，從左往右拉為顯示前一個頁面，并根據(jù)布料的運動實時繪制渲染頁面。
12.根據(jù)權(quán)利要求10所述的具有多種翻頁特效的頁面切換方法，其特征在于，移動結(jié)束后，如果為顯示前一頁動畫，則將前一頁窗簾拉開至完全遮擋住當(dāng)前頁，顯示屏上顯示正確的頁面；如果為顯示后一頁動畫，則將當(dāng)前頁窗簾推到最左邊至完全顯示下一頁；如果為顯示當(dāng)前頁動畫，則將窗簾回退到完全展開，顯示當(dāng)前頁。
13.一種電子設(shè)備窗簾特效頁面切換方法，其特征在于，所述方法包括: 建立窗簾波動的運動物理模型，所述的物理模型基于質(zhì)點-彈簧模型的布料模擬；根據(jù)牛頓第二定律，建立所述窗簾波動的運動物理模型的質(zhì)點運動方程，所述的質(zhì)點運動方程包括外力驅(qū)動； 求解所述的運動方程，確定模型質(zhì)點的位置，并根據(jù)模型質(zhì)點的位置對窗簾運動動畫圖像進行渲染，生成窗簾運動特效。
14.根據(jù)權(quán)利要求13所述的電子設(shè)備窗簾特效頁面切換方法，其特征在于，所述求解所述的運動方程包括: 采用改進的歐拉方法對所述質(zhì)點運動方程進行降階，通過數(shù)值迭代求解方程穩(wěn)定的解。
15.根據(jù)權(quán)利要求13所述的電子設(shè)備窗簾特效頁面切換方法，其特征在于，所述根據(jù)模型質(zhì)點的位置對窗簾運動動畫圖像進行渲染，生成窗簾運動特效步驟包括: 利用webGL技術(shù)繪制相應(yīng)的布料，構(gòu)造窗簾效果的顯示頁面； 在布料上渲染相應(yīng)頁面的一個影像，初始化窗簾推拉的初始狀態(tài)； 在移動事件中，繪制窗簾推拉的動畫，從右往左推為打開下一個頁面，從左往右拉為顯示前一個頁面，根據(jù)布料的模擬運動實時渲染頁面。
【文檔編號】G06F9/44GK103530030SQ201310085802
【公開日】2014年1月22日 申請日期:2013年3月18日 優(yōu)先權(quán)日:2013年3月18日
【發(fā)明者】龍秀萍 申請人:Tcl集團股份有限公司