[发明专利]一种页面切换系统、方法及窗帘特效页面切换方法

说明书

技术领域

本发明涉及智能设备的切屏特效，尤其涉及的是一种基于HTML5技术的具有多种翻页特效的一种页面切换系统、方法及窗帘特效页面切换方法。

背景技术

在智能设备普遍化的当今社会，单一手势向上、向下滑动或鼠标滚动以获取更多信息的会话显示方式，往往需要用户连续的操作才能找到曾经看到过的某条消息。如何在较短的时间内推送信息给用户，并给用户在浏览信息时带来更好的视觉效果和更丰富的操作体验，更能接近现实中的物理模拟，成为了智能设备发展需要解决的问题。

目前存在ios和android设备上的翻页效果，但是其实现方式不适用于Firefox OS（火狐操作系统），不适用于HTML5下的跨平台思想。还有模拟电子书的翻页效果的javascript代码库，但是其效果单一，不够丰富。同时，目前还未出现成熟的CSS 3D实现多页面切换的技术。

因此，现有技术还有待于改进和发展。

发明内容

本发明要解决的技术问题在于，针对现有技术的上述缺陷，提供一种基于HTML5技术的具有多种翻页特效的页面切换系统、方法及窗帘特效页面切换方法。

本发明解决技术问题所采用的技术方案如下：

一种具有多种翻页特效的页面切换系统，其中，包括监听模块、识别模块以及页面转换模块，

所述监听模块用于监听用户的操作事件；

所述识别模块用于判断监听模块监听到的用户操作事件；

所述页面转换模块用于根据用户对翻页效果类型的选择操作，确定翻页效果，并根据用户移动距离和移动方向进行所述翻页效果对应的翻页操作。

所述的具有多种翻页特效的页面切换系统，其中，所述系统还包括：

预设置模块，用于预先根据用户的选择操作，记录并存储用户选择的翻页效果选项；以及用于根据各翻页效果类型的选择值对翻页效果类型进行选择更改。

所述的具有多种翻页特效的页面切换系统，其中，所述页面转换模块还包括初始化模块以及翻页处理模块。初始化模块用于对各类型翻页效果进行初始化，翻页处理模块用于在监听模块监听到移动事件后根据移动事件的移动情况进行播放各类型翻页效果的翻页动画。

所述的具有多种翻页特效的页面切换系统，其中，所述翻页效果类型包括有多种，包括平滑移动、盒子内、盒子外、翻转、翻滚、波浪、风车和窗帘推拉。

所述的具有多种翻页特效的页面切换系统，其中，

所述的系统还包括物理模型维护模块，用于建立与维护特效物理模型，实时输出特效模型下的质点运动数据；

动画渲染生成单元，用于根据所述的运动数据渲染生成特效动画

一种具有多种翻页特效的页面切换方法，其中，包括步骤：

监听用户的操作事件；

当判断出该操作事件为移动事件且移动距离超过页面转换的阀值时，进行翻页初始化，并播放移动过程中的翻页动画；

判断移动是否结束，当移动结束时，显示最终的当前页面。

所述的具有多种翻页特效的页面切换方法，其中，在监听用户的操作事件之前还包括步骤：

构建包括平滑移动、盒子内、盒子外、翻转、翻滚、波浪、风车和窗帘推拉的动画模型，所述的动画模型基于物理运动模型；

记录用户对所述动画模型的选择，并选择进入特定的动画。

所述的具有多种翻页特效的页面切换方法，其特征在于，当选择进入窗帘推拉的动画时，所述的方法包括：

由质点-弹簧模型构造出布料动画模型，设置窗帘推拉效果的翻页效果。

所述的具有多种翻页特效的页面切换方法，其中，在设置窗帘推拉效果的翻页效果时，利用HTML5 webGL技术绘制相应的布料，并在布料上渲染当前页的一个影像。

所述的具有多种翻页特效的页面切换方法，其中，在进行翻页初始化时，如果用户操作为从右向左推，则在平铺的布料上渲染当前页的影像作为窗帘推拉的初始状态，并将下一页堆叠在当前页的下面；如果为从左向右拉，则在合拢的布料上渲染前一页的影像作为窗帘推拉的初始状态，即将前一页堆叠在当前页的上面。

所述的具有多种翻页特效的页面切换方法，其中，在移动事件中，绘制窗帘推拉的动画，从右往左推为打开下一个页面，从左往右拉为显示前一个页面，并边移动边绘制，根据布料的运动实时渲染页面。