一种页面切换系统、方法及窗帘特效页面切换方法技术方案

本发明专利技术公开了一种页面切换系统、方法及窗帘特效页面切换方法。所述系统包括监听模块、识别模块以及页面转换模块。通过接收用户操作，识别触摸或者鼠标事件，判断翻页效果的类别以及页面转换的方向，实现一整套翻页效果选择和页面转换系统，并利用HTML5技术，为用户提供了多种页面转换的翻页效果，特别提供了模拟真实窗帘推拉效果的翻转特效，给用户以更好的视觉效果和更丰富的操作体验。

【技术实现步骤摘要】
一种页面切换系统、方法及窗帘特效页面切换方法
本专利技术涉及智能设备的切屏特效，尤其涉及的是一种基于HTML5技术的具有多种翻页特效的一种页面切换系统、方法及窗帘特效页面切换方法。
技术介绍
在智能设备普遍化的当今社会，单一手势向上、向下滑动或鼠标滚动以获取更多信息的会话显示方式，往往需要用户连续的操作才能找到曾经看到过的某条消息。如何在较短的时间内推送信息给用户，并给用户在浏览信息时带来更好的视觉效果和更丰富的操作体验，更能接近现实中的物理模拟，成为了智能设备发展需要解决的问题。目前存在ios和android设备上的翻页效果，但是其实现方式不适用于FirefoxOS（火狐操作系统），不适用于HTML5下的跨平台思想。还有模拟电子书的翻页效果的javascript代码库，但是其效果单一，不够丰富。同时，目前还未出现成熟的CSS3D实现多页面切换的技术。因此，现有技术还有待于改进和发展。
技术实现思路
本专利技术要解决的技术问题在于，针对现有技术的上述缺陷，提供一种基于HTML5技术的具有多种翻页特效的页面切换系统、方法及窗帘特效页面切换方法。本专利技术解决技术问题所采用的技术方案如下：一种页面切换系统，其中，包括监听模块、识别模块以及页面转换模块，所述监听模块用于监听用户的操作事件；所述识别模块用于判断监听模块监听到的用户操作事件；所述页面转换模块用于根据用户对翻页效果类型的选择操作，确定翻页效果，并根据用户移动距离和移动方向进行所述翻页效果对应的翻页操作。所述的页面切换系统，其中，所述系统还包括：预设置模块，用于预先根据用户的选择操作，记录并存储用户选择的翻页效果选项；以及用于根据各翻页效果类型的选择值对翻页效果类型进行选择更改。所述的页面切换系统，其中，所述页面转换模块还包括初始化模块以及翻页处理模块。初始化模块用于对各类型翻页效果进行初始化，翻页处理模块用于在监听模块监听到移动事件后根据移动事件的移动情况进行播放各类型翻页效果的翻页动画。所述的页面切换系统，其中，所述翻页效果类型包括有多种，包括平滑移动、盒子内、盒子外、翻转、翻滚、波浪、风车和窗帘推拉。所述的页面切换系统，其中，所述的系统还包括物理模型维护模块，用于建立与维护特效物理模型，实时输出特效模型下的质点运动数据；动画渲染生成单元，用于根据所述的运动数据渲染生成特效动画一种具有多种翻页特效的页面切换方法，其中，包括步骤：监听用户的操作事件；当判断出该操作事件为移动事件且移动距离超过页面转换的阀值时，进行翻页初始化，并播放移动过程中的翻页动画；判断移动是否结束，当移动结束时，显示最终的当前页面。所述的页面切换方法，其中，在监听用户的操作事件之前还包括步骤：构建包括平滑移动、盒子内、盒子外、翻转、翻滚、波浪、风车和窗帘推拉的动画模型，所述的动画模型基于物理运动模型；记录用户对所述动画模型的选择，并选择进入特定的动画。所述的页面切换方法，其特征在于，当选择进入窗帘推拉的动画时，所述的方法包括：由质点-弹簧模型构造出布料动画模型，设置窗帘推拉效果的翻页效果。所述的页面切换方法，其中，在设置窗帘推拉效果的翻页效果时，利用HTML5webGL技术绘制相应的布料，并在布料上渲染当前页的一个影像。所述的页面切换方法，其中，在进行翻页初始化时，如果用户操作为从右向左推，则在平铺的布料上渲染当前页的影像作为窗帘推拉的初始状态，并将下一页堆叠在当前页的下面；如果为从左向右拉，则在合拢的布料上渲染前一页的影像作为窗帘推拉的初始状态，即将前一页堆叠在当前页的上面。所述的页面切换方法，其中，在移动事件中，绘制窗帘推拉的动画，从右往左推为打开下一个页面，从左往右拉为显示前一个页面，并边移动边绘制，根据布料的运动实时渲染页面。所述的页面切换方法，其中，移动结束后，如果为显示前一页动画，则将前一页窗帘拉开至完全遮挡住当前页，显示屏上显示正确的页面；如果为显示后一页动画，则将当前页窗帘推到最左边至完全显示下一页；如果为显示当前页动画，则将窗帘回退到完全展开，显示当前页。一种电子设备窗帘特效页面切换方法，其中，所述方法包括：建立窗帘波动的运动物理模型，所述的物理模型基于质点-弹簧模型的布料模拟；根据牛顿第二定律，建立所述窗帘波动的运动物理模型的质点运动方程，所述的质点运动方程包括外力驱动；求解所述的运动方程，确定模型质点的位置，并根据模型质点的位置对窗帘运动动画图像进行渲染，生成窗帘运动特效。所述的电子设备窗帘特效页面切换方法，其中，所述求解所述的运动方程包括：采用改进的欧拉方法对所述质点运动方程进行降阶，通过数值迭代求解方程稳定的解。所述的电子设备窗帘特效页面切换方法，其特征在于，所述根据模型质点的位置对窗帘运动动画图像进行渲染，生成窗帘运动特效步骤包括：利用webGL技术绘制相应的布料，构造窗帘效果的显示页面；在布料上渲染相应页面的一个影像，初始化窗帘推拉的初始状态；在移动事件中，绘制窗帘推拉的动画，从右往左推为打开下一个页面，从左往右拉为显示前一个页面，根据布料的模拟运动实时渲染页面。本专利技术所提供的具有多种翻页特效的页面切换系统、方法及窗帘特效页面切换方法，利用HTML5技术，为用户提供了多种页面转换的翻页效果，特别提供了模拟真实窗帘推拉效果的翻转特效，给用户以更好的视觉效果和更丰富的操作体验。附图说明图1是本专利技术提供的具有多种翻页特效的页面切换系统的结构示意图。图2是图1中一优选实施例的结构示意图。图3是本专利技术提供的具有多种翻页特效的页面切换方法的流程图。图4是图3中翻页效果识别和选择的流程图。图5是图3中盒子特效的三棱柱外页面初始状态示意图。图6是图5中外页面的转换流程图。图7是本专利技术提供的电子设备窗帘特效页面切换方法的流程图。具体实施方式为使本专利技术的目的、技术方案及优点更加清楚、明确，以下参照附图并举实施例对本专利技术进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本专利技术，并不用于限定本专利技术。本专利技术提供了一种基于HTML5技术的具有多种翻页特效的页面切换系统，其中，如图1所示，该系统包括监听模块10、识别模块20以及页面转换模块30。具体地，所述监听模块10用于监听用户的操作事件，识别模块20用于判断监听模块10监听到的用户操作事件，比如触摸操作事件或鼠标操作事件等等，并进一步判断用户操作事件的类型，是点击、移动或者抬起。页面转换模块30会针对不同操作事件的类型进行相应的处理，并在处理时，其首先会根据用户对翻页效果类型的设置，确定翻页效果，并根据用户移动距离和移动方向进行所述翻页效果对应的翻页操作。本专利技术的翻页效果有多种类型，具体包括平滑移动、盒子内、盒子外、翻转、翻滚、波浪、风车和窗帘推拉等翻页效果。针对不同类型的翻页效果，本专利技术进行不同的翻页处理操作。所述系统还包括预设置模块40，用于预先根据用户的选择操作，记录并存储用户选择的翻页效果选项。还用于对各翻页效果类型的选择更改，可以从LocalStorage（本地存储）中读取翻页效果类型的选择值，也可以对该选择值进行修改，并更新LocalStorage（本地存储）中的对应值，该选择值即为翻页效果的入口标识。优选地，如图2所示，所述页面转换模块30还包括初始化模块31和翻页处理模块32。初始化模块31用于对本文档来自技高网...

【技术保护点】
一种页面切换系统，其特征在于，包括监听模块、识别模块以及页面转换模块，所述监听模块用于监听用户的操作事件；所述识别模块用于判断监听模块监听到的用户操作事件；所述页面转换模块用于根据用户对翻页效果类型的选择操作，确定特定翻页效果，并根据用户移动距离和移动方向执行所述翻页效果对应的翻页操作。

【技术特征摘要】
1.一种页面切换系统，其特征在于，包括监听模块、识别模块、页面转换模块、物理模型维护模块以及动画渲染生成单元，所述监听模块用于监听用户的操作事件；所述识别模块用于判断监听模块监听到的用户操作事件；所述页面转换模块用于根据用户对翻页效果类型的选择操作，确定特定翻页效果，并根据用户移动距离和移动方向执行所述翻页效果对应的翻页操作；当选择进入窗帘推拉的动画时，由质点-弹簧模型构造出布料动画模型，执行窗帘推拉效果的翻页效果；所述页面转换模块还包括初始化模块和翻页处理模块；所述初始化模块用于对各类型翻页效果进行初始化，在进行翻页初始化时，如果用户操作为从右向左推，则在平铺的布料上渲染当前页的影像作为窗帘推拉的初始状态，并将下一页堆叠在当前页的下面；如果为从左向右拉，则在合拢的布料上渲染前一页的影像作为窗帘推拉的初始状态，即将前一页堆叠在当前页的上面；所述翻页处理模块用于在监听模块监听到移动事件后根据移动事件的移动情况进行播放各类型翻页效果的翻页动画；所述物理模型维护模块，用于建立与维护特效物理模型，实时输出特效模型下的质点运动数据；所述动画渲染生成单元，用于根据所述的运动数据渲染生成特效动画。2.根据权利要求1所述的页面切换系统，其特征在于，所述系统还包括：预设置模块，用于预先根据用户的选择操作，记录并存储用户选择的翻页效果选项；以及用于根据各翻页效果类型的选择值对翻页效果类型进行选择更改。3.根据权利要求1所述的页面切换系统，其特征在于，所述页面转换模块还包括初始化模块以及翻页处理模块，所述初始化模块用于对各类型翻页效果进行初始化，所述翻页处理模块用于在监听模块监听到移动事件后根据移动事件的移动情况进行播放各类型翻页效果的翻页动画。4.根据权利要求1所述的页面切换系统，其特征在于，所述翻页效果类型包括有多种，包括平滑移动、盒子内、盒子外、翻转、翻滚、波浪、风车和窗帘推拉。5.一种页面切换方法，其特征在于，包括步骤：监听用户的操作事件；当判断出该操作事件为移动事件且移动距离超过页面转换的阀值时，进行翻页初始化，并播放移动过程中的翻页动画；当选择进入窗帘推拉的动画时，由质点-弹簧模型构造出布料动画模型，执行窗帘推拉效果的翻页效果；其中，在进行翻页初始化时，如果用户操作为从右向左推，则在平铺的布料上渲染当前页的影像作为窗帘推拉的初始状态，并将下一页堆叠在当前页的下面；如果为从左向右拉，则在合拢的布料上渲染前一页的影像作为窗帘推拉的初始状态，即将前一页堆叠在当前页的上...

【专利技术属性】
技术研发人员：龙秀萍，
申请(专利权)人：TCL集团股份有限公司，
类型：发明
国别省市：