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

1.一种页面切换系统，其特征在于，包括监听模块、识别模块、页面转换模块、物理模型维护模块以及动画渲染生成单元，
所述监听模块用于监听用户的操作事件；
所述识别模块用于判断监听模块监听到的用户操作事件；
所述页面转换模块用于根据用户对翻页效果类型的选择操作，确定特定翻页效果，并根据用户移动距离和移动方向执行所述翻页效果对应的翻页操作；当选择进入窗帘推拉的动画时，由质点-弹簧模型构造出布料动画模型，执行窗帘推拉效果的翻页效果；
所述页面转换模块还包括初始化模块和翻页处理模块；
所述初始化模块用于对各类型翻页效果进行初始化，在进行翻页初始化时，如果用户操作为从右向左推，则在平铺的布料上渲染当前页的影像作为窗帘推拉的初始状态，并将下一页堆叠在当前页的下面；如果为从左向右拉，则在合拢的布料上渲染前一页的影像作为窗帘推拉的初始状态，即将前一页堆叠在当前页的上面；
所述翻页处理模块用于在监听模块监听到移动事件后根据移动事件的移动情况进行播放各类型翻页效果的翻页动画；
所述物理模型维护模块，用于建立与维护特效物理模型，实时输出特效模型下的质点运动数据；
所述动画渲染生成单元，用于根据所述的运动数据渲染生成特效动画。
2.根据权利要求1所述的页面切换系统，其特征在于，所述系统还包括：
预设置模块，用于预先根据用户的选择操作，记录并存储用户选择的翻页效果选项；以及用于根据各翻页效果类型的选择值对翻页效果类型进行选择更改。
3.根据权利要求1所述的页面切换系统，其特征在于，所述页面转换模块还包括初始化模块以及翻页处理模块，所述初始化模块用于对各类型翻页效果进行初始化，所述翻页处理模块用于在监听模块监听到移动事件后根据移动事件的移动情况进行播放各类型翻页效果的翻页动画。
4.根据权利要求1所述的页面切换系统，其特征在于，所述翻页效果类型包括有多种，包括平滑移动、盒子内、盒子外、翻转、翻滚、波浪、风车和窗帘推拉。
5.一种页面切换方法，其特征在于，包括步骤：
监听用户的操作事件；
当判断出该操作事件为移动事件且移动距离超过页面转换的阀值时，进行翻页初始化，并播放移动过程中的翻页动画；当选择进入窗帘推拉的动画时，由质点-弹簧模型构造出布料动画模型，执行窗帘推拉效果的翻页效果；
其中，在进行翻页初始化时，如果用户操作为从右向左推，则在平铺的布料上渲染当前页的影像作为窗帘推拉的初始状态，并将下一页堆叠在当前页的下面；如果为从左向右拉，则在合拢的布料上渲染前一页的影像作为窗帘推拉的初始状态，即将前一页堆叠在当前页的上面；
判断移动是否结束，当移动结束时，显示最终的当前页面。
6.根据权利要求5所述的页面切换方法，其特征在于，在监听用户的操作事件之前还包括步骤：
构建包括平滑移动、盒子内、盒子外、翻转、翻滚、波浪、风车和窗帘推拉的动画模型，所述的动画模型基于物理运动模型；
记录用户对所述动画模型的选择设置，当用户执行页面切换时，选择进入特定的动画。
7.根据权利要求6所述的页面切换方法，其特征在于，在设置窗帘推拉效果的翻页效果时，利用HTML5 webGL技术绘制相应的布料，并在布料上渲染相应页面的影像。
8.根据权利要求7所述的页面切换方法，其特征在于，在移动事件中，绘制窗帘推拉的动画，从右往左推为打开下一个页面，从左往右拉为显示前一个页面，并根据布料的运动实时绘制渲染页面。
9.根据权利要求8所述的页面切换方法，其特征在于，移动结束后，如果为显示前一页动画，则将前一页窗帘拉开至完全遮挡住当前页，显示屏上显示正确的页面；如果为显示后一页动画，则将当前页窗帘推到最左边至完全显示下一页；如果为显示当前页动画，则将窗帘回退到完全展开，显示当前页。
10.一种电子设备窗帘特效页面切换方法，其特征在于，所述方法包括：
建立窗帘波动的运动物理模型，所述的物理模型基于质点-弹簧模型的布料模拟；
根据牛顿第二定律，建立所述窗帘波动的运动物理模型的质点运动方程，所述的质点运动方程包括外力驱动；
求解所述的运动方程，确定模型质点的位置，并根据模型质点的位置对窗帘运动动画图像进行渲染，生成窗帘运动特效；
所述根据模型质点的位置对窗帘运动动画图像进行渲染，生成窗帘运动特效步骤包括：
利用webGL技术绘制相应的布料，构造窗帘效果的显示页面；
在布料上渲染相应页面的一个影像，初始化窗帘推拉的初始状态；
在进行翻页初始化时，如果用户操作为从右向左推，则在平铺的布料上渲染当前页的影像作为窗帘推拉的初始状态，并将下一页堆叠在当前页的下面；如果为从左向右拉，则在合拢的布料上渲染前一页的影像作为窗帘推拉的初始状态，即将前一页堆叠在当前页的上面。
11.根据权利要求10所述的电子设备窗帘特效页面切换方法，其特征在于，所述求解所述的运动方程包括：
采用改进的欧拉方法对所述质点运动方程进行降阶，通过数值迭代求解方程稳定的解。
12.根据权利要求10所述的电子设备窗帘特效页面切换方法，其特征在于，在翻页初始化后，还包括步骤：
在移动事件中，绘制窗帘推拉的动画，从右往左推为打开下一个页面，从左往右拉为显示前一个页面，根据布料的模拟运动实时渲染页面。

一种页面切换系统、方法及窗帘特效页面切换方法\n技术领域\n[0001] 本发明涉及智能设备的切屏特效，尤其涉及的是一种基于HTML5技术的具有多种翻页特效的一种页面切换系统、方法及窗帘特效页面切换方法。\n背景技术\n[0002] 在智能设备普遍化的当今社会，单一手势向上、向下滑动或鼠标滚动以获取更多信息的会话显示方式，往往需要用户连续的操作才能找到曾经看到过的某条消息。如何在较短的时间内推送信息给用户，并给用户在浏览信息时带来更好的视觉效果和更丰富的操作体验，更能接近现实中的物理模拟，成为了智能设备发展需要解决的问题。\n[0003] 目前存在ios和android设备上的翻页效果，但是其实现方式不适用于Firefox OS（火狐操作系统），不适用于HTML5下的跨平台思想。还有模拟电子书的翻页效果的javascript代码库，但是其效果单一，不够丰富。同时，目前还未出现成熟的CSS 3D实现多页面切换的技术。\n[0004] 因此，现有技术还有待于改进和发展。\n发明内容\n[0005] 本发明要解决的技术问题在于，针对现有技术的上述缺陷，提供一种基于HTML5技术的具有多种翻页特效的页面切换系统、方法及窗帘特效页面切换方法。\n[0006] 本发明解决技术问题所采用的技术方案如下：\n[0007] 一种页面切换系统，其中，包括监听模块、识别模块以及页面转换模块，[0008] 所述监听模块用于监听用户的操作事件；\n[0009] 所述识别模块用于判断监听模块监听到的用户操作事件；\n[0010] 所述页面转换模块用于根据用户对翻页效果类型的选择操作，确定翻页效果，并根据用户移动距离和移动方向进行所述翻页效果对应的翻页操作。\n[0011] 所述的页面切换系统，其中，所述系统还包括：\n[0012] 预设置模块，用于预先根据用户的选择操作，记录并存储用户选择的翻页效果选项；以及用于根据各翻页效果类型的选择值对翻页效果类型进行选择更改。\n[0013] 所述的页面切换系统，其中，所述页面转换模块还包括初始化模块以及翻页处理模块。初始化模块用于对各类型翻页效果进行初始化，翻页处理模块用于在监听模块监听到移动事件后根据移动事件的移动情况进行播放各类型翻页效果的翻页动画。\n[0014] 所述的页面切换系统，其中，所述翻页效果类型包括有多种，包括平滑移动、盒子内、盒子外、翻转、翻滚、波浪、风车和窗帘推拉。\n[0015] 所述的页面切换系统，其中，\n[0016] 所述的系统还包括物理模型维护模块，用于建立与维护特效物理模型，实时输出特效模型下的质点运动数据；\n[0017] 动画渲染生成单元，用于根据所述的运动数据渲染生成特效动画[0018] 一种具有多种翻页特效的页面切换方法，其中，包括步骤：\n[0019] 监听用户的操作事件；\n[0020] 当判断出该操作事件为移动事件且移动距离超过页面转换的阀值时，进行翻页初始化，并播放移动过程中的翻页动画；\n[0021] 判断移动是否结束，当移动结束时，显示最终的当前页面。\n[0022] 所述的页面切换方法，其中，在监听用户的操作事件之前还包括步骤：\n[0023] 构建包括平滑移动、盒子内、盒子外、翻转、翻滚、波浪、风车和窗帘推拉的动画模型，所述的动画模型基于物理运动模型；\n[0024] 记录用户对所述动画模型的选择，并选择进入特定的动画。\n[0025] 所述的页面切换方法，其特征在于，当选择进入窗帘推拉的动画时，所述的方法包括：\n[0026] 由质点-弹簧模型构造出布料动画模型，设置窗帘推拉效果的翻页效果。\n[0027] 所述的页面切换方法，其中，在设置窗帘推拉效果的翻页效果时，利用HTML5 webGL技术绘制相应的布料，并在布料上渲染当前页的一个影像。\n[0028] 所述的页面切换方法，其中，在进行翻页初始化时，如果用户操作为从右向左推，则在平铺的布料上渲染当前页的影像作为窗帘推拉的初始状态，并将下一页堆叠在当前页的下面；如果为从左向右拉，则在合拢的布料上渲染前一页的影像作为窗帘推拉的初始状态，即将前一页堆叠在当前页的上面。\n[0029] 所述的页面切换方法，其中，在移动事件中，绘制窗帘推拉的动画，从右往左推为打开下一个页面，从左往右拉为显示前一个页面，并边移动边绘制，根据布料的运动实时渲染页面。\n[0030] 所述的页面切换方法，其中，移动结束后，如果为显示前一页动画，则将前一页窗帘拉开至完全遮挡住当前页，显示屏上显示正确的页面；如果为显示后一页动画，则将当前页窗帘推到最左边至完全显示下一页；如果为显示当前页动画，则将窗帘回退到完全展开，显示当前页。\n[0031] 一种电子设备窗帘特效页面切换方法，其中，所述方法包括：\n[0032] 建立窗帘波动的运动物理模型，所述的物理模型基于质点-弹簧模型的布料模拟；\n[0033] 根据牛顿第二定律，建立所述窗帘波动的运动物理模型的质点运动方程，所述的质点运动方程包括外力驱动；\n[0034] 求解所述的运动方程，确定模型质点的位置，并根据模型质点的位置对窗帘运动动画图像进行渲染，生成窗帘运动特效。\n[0035] 所述的电子设备窗帘特效页面切换方法，其中，所述求解所述的运动方程包括：\n[0036] 采用改进的欧拉方法对所述质点运动方程进行降阶，通过数值迭代求解方程稳定的解。\n[0037] 所述的电子设备窗帘特效页面切换方法，其特征在于，所述根据模型质点的位置对窗帘运动动画图像进行渲染，生成窗帘运动特效步骤包括：\n[0038] 利用webGL技术绘制相应的布料，构造窗帘效果的显示页面；\n[0039] 在布料上渲染相应页面的一个影像，初始化窗帘推拉的初始状态；\n[0040] 在移动事件中，绘制窗帘推拉的动画，从右往左推为打开下一个页面，从左往右拉为显示前一个页面，根据布料的模拟运动实时渲染页面。\n[0041] 本发明所提供的具有多种翻页特效的页面切换系统、方法及窗帘特效页面切换方法，利用HTML5技术，为用户提供了多种页面转换的翻页效果，特别提供了模拟真实窗帘推拉效果的翻转特效，给用户以更好的视觉效果和更丰富的操作体验。\n附图说明\n[0042] 图1是本发明提供的具有多种翻页特效的页面切换系统的结构示意图。\n[0043] 图2是图1中一优选实施例的结构示意图。\n[0044] 图3是本发明提供的具有多种翻页特效的页面切换方法的流程图。\n[0045] 图4是图3中翻页效果识别和选择的流程图。\n[0046] 图5是图3中盒子特效的三棱柱外页面初始状态示意图。\n[0047] 图6是图5中外页面的转换流程图。\n[0048] 图7是本发明提供的电子设备窗帘特效页面切换方法的流程图。\n具体实施方式\n[0049] 为使本发明的目的、技术方案及优点更加清楚、明确，以下参照附图并举实施例对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。\n[0050] 本发明提供了一种基于HTML5技术的具有多种翻页特效的页面切换系统，其中，如图1所示，该系统包括监听模块10、识别模块20以及页面转换模块30。具体地，所述监听模块\n10用于监听用户的操作事件，识别模块20用于判断监听模块10监听到的用户操作事件，比如触摸操作事件或鼠标操作事件等等，并进一步判断用户操作事件的类型，是点击、移动或者抬起。页面转换模块30会针对不同操作事件的类型进行相应的处理，并在处理时，其首先会根据用户对翻页效果类型的设置，确定翻页效果，并根据用户移动距离和移动方向进行所述翻页效果对应的翻页操作。\n[0051] 本发明的翻页效果有多种类型，具体包括平滑移动、盒子内、盒子外、翻转、翻滚、波浪、风车和窗帘推拉等翻页效果。针对不同类型的翻页效果，本发明进行不同的翻页处理操作。\n[0052] 所述系统还包括预设置模块40，用于预先根据用户的选择操作，记录并存储用户选择的翻页效果选项。还用于对各翻页效果类型的选择更改，可以从LocalStorage（本地存储）中读取翻页效果类型的选择值，也可以对该选择值进行修改，并更新LocalStorage（本地存储）中的对应值，该选择值即为翻页效果的入口标识。\n[0053] 优选地，如图2所示，所述页面转换模块30还包括初始化模块31和翻页处理模块\n32。初始化模块31用于对各类型翻页效果进行初始化，翻页处理模块32用于在监听模块监听到移动事件后根据移动事件的移动情况进行播放各类型翻页效果的翻页动画。如果用户首次登录该系统，则预设置模块40会将翻页效果设置为默认的平滑移动方式，否则读取存储在系统中的翻页效果类型的选择值，每个翻页效果都有相应的选择值，根据选择值可以选定相应类型的翻页效果。\n[0054] 所述的系统还包括物理模型维护模块50，用于建立与维护特效物理模型，实时输出特效模型下的质点运动数据；\n[0055] 动画渲染生成单元60，用于根据所述的运动数据渲染生成特效动画。\n[0056] 基于上述具有多种翻页特效的页面切换系统，本发明还提供了一种页面切换方法，如图3所示，具体包括：\n[0057] 步骤S100、监听用户的操作事件；\n[0058] 其中，在步骤S100之前，需执行以下步骤：预先根据用户的选择操作，记录并存储用户选择的翻页效果选项，翻页效果有多种，包括上述的8种翻页效果，但并不限于上述8种。每种翻页效果类型都对应一个选择值，该选择值存储在LocalStorage（本地存储）中，作为翻页效果的入口标识。待选择值可以修改。\n[0059] 例如，如图4所示，翻页效果识别和选择的流程，包括步骤：\n[0060] 步骤S10、读取LocalStorage中翻页效果的选择值；\n[0061] 步骤S11、判断是否首次进入该系统，如果是则执行步骤S12，否则执行步骤S13；\n[0062] 步骤S12、设置翻页效果为默认的平滑移动，并将翻页效果选择器中的对应项设置为已选择，再执行步骤S14；\n[0063] 步骤S13、将从LocalStorage中读取的翻页效果的选择值所对应的翻页效果选项设置为已选择，再执行步骤S14；\n[0064] 步骤S14、监听翻页效果选择值的变化\n[0065] 步骤S15、判断翻页效果的选择值是否改变，如果是则执行步骤S16，否则执行步骤S17；\n[0066] 步骤S16、将新的选择值存储LocalStorage中。\n[0067] 步骤S200、当判断出该操作事件为移动事件且移动距离超过页面转换的阀值时，进行翻页初始化，并播放移动过程中的翻页动画。\n[0068] 步骤S300、判断移动是否结束，当移动结束时，显示最终的当前页面。之后以适当的页面呈现给用户，否则继续移动变换页面。\n[0069] 进一步地，本发明步骤S200和步骤S300主要实现的是在移动过程中和移动结束时翻页动画的播放，每一种类型的翻页效果有各自的初始化过程以及在移动过程中与移动结束时的翻页动画。因此，下面对每一种类型的翻页效果在移动过程中和移动结束时翻页动画的播放过程进行具体的描述。具体针对上述8种类型的翻页效果。\n[0070] 对于平滑移动效果：首先对页面显示进行初始化。设置页面显示为2D模式，初始化对应的三个页面，前一页向左移动整个屏幕的宽度；当前页不做变换；下一页向右移动整个屏幕的宽度。其次，在移动事件中，对移动操作进行判断，如果操作为向右移动，则操作前一页和当前页横向移动以显示对应的页面内容；如果操作为向左移动，则操作当前页和下一页横向移动以显示对应页面的内容。再者，监听到抬起事件时移动结束后，开始页面转换，判断当前的移动距离是否超过页面转换的阈值，如果大于该阈值且移动的方向为向左，则将页面转换到下一页，播放页面转换动画；如果大于该阈值且移动的方向为向右，则将页面转换到前一页，播放页面转换动画；如果小于该阈值，则播放当前页转换到最初原始状态的动画。\n[0071] 对于盒子内效果：首先对页面显示进行初始化。设置页面显示为3D模式，初始化对应的三个页面，设置页面父容器显示为preserve-3d，设置该容器的父容器景深以及视角位置；初始化立方体对应的各个页面：前一页转换为立方体的左侧面，并将其正面朝里；当前页转换为立方体的后一面；下一页转换为立方体的右侧面，并将其正面朝里。其次，在移动事件中，对移动操作进行判断，如果操作为向右移动，则操作页面的父容器逆时针旋转以显示对应的页面内容；如果操作为向左移动，则操作页面的父容器顺时针旋转以显示对应页面的内容。再者，监听到抬起事件时移动结束，开始页面转换，判断当前的移动距离是否超过页面转换的阈值，如果大于该阈值且移动的方向为向左，则设置并播放页面父容器的转换动画以将页面转换到下一页；如果大于该阈值且移动的方向为向右，则设置并播放页面父容器的转换动画以将页面转换到前一页；如果小于该阈值，则设置并播放页面父容器的转换动画以将当前页还原为初始状态。\n[0072] 对于盒子外效果：首先对页面显示进行初始化。设置页面显示为3D模式，初始化对应的三个页面，设置页面父容器显示为preserve-3d，设置该容器的父容器景深以及视角位置；初始化三棱柱对应的各个页面：前一页为三棱柱的左侧面，正面朝外、当前页为三棱柱的正面、下一页为三棱柱的右侧面，正面朝外，都设为背面不可见属性。该三棱柱初始状态如图5所示。其次，在移动事件中，对移动操作进行判断，如果操作为向右移动，则操作页面的父容器顺时针旋转以显示对应的页面内容；如操作为向左移动，则操作页面的父容器逆时针旋转以显示对应页面的内容。再者，监听到抬起事件时移动结束，开始页面转换，判断当前的移动距离是否超过页面转换的阈值，如果大于该阈值且移动的方向为向左，则设置并播放页面父容器的转换动画以将页面转换到下一页；如果大于该阈值且移动的方向为向右，则设置并播放页面父容器的转换动画以将页面转换到前一页；如果小于该阈值，则设置并播放页面父容器的转换动画以将当前页还原为初始状态。\n[0073] 下面以盒子外（也即等边三棱柱）为例对页面转换过程进行举例说明，如图6所示，三棱柱（盒子）外页面的转换流程，包括以下步骤：\n[0074] 步骤S20、计算用户操作移动的距离；\n[0075] 步骤S21、判断该距离是否大于页面转换的阀值，如果是执行步骤S22，否则结束；\n[0076] 步骤S22、设置页面显示为3D模式，并初始化3D场景以及三棱柱的三个页面；\n[0077] 步骤S23、判断是否移动，如果是执行步骤S24、否则执行步骤S26；\n[0078] 步骤S24、计算三棱柱的旋转角度；\n[0079] 步骤S25、依角度旋转三棱柱以显示对应页面内容；\n[0080] 步骤S26、判断移动是否结束，如果是则执行步骤S27、否则执行步骤S23；\n[0081] 步骤S27、判断是否停留在当前页，如果是则执行步骤S28，否则执行步骤S29；\n[0082] 步骤S28、设置三棱柱旋转回0角度的动画，并将当前页呈现给用户；\n[0083] 步骤S29、判断是否转换到下一页，如果是则执行步骤S30，否则执行步骤S31；\n[0084] 步骤S30、设置三棱柱旋转-120度的动画，将下一页呈现给用户；\n[0085] 步骤S31、设置三棱柱旋转120度的动画，将前一页呈现给用户。\n[0086] 对于翻转效果：首先进行初始化操作，将当前页设置为卡片的正面，如果为向左移动，则将下一页旋转180度设置为卡片的背面，如果为向右移动，则将前一页旋转180度设置为卡片的背面，设置页面的背面不可见属性。其次在移动事件中，对移动操作进行判断，如果操作为向右移动，则操作页面的父容器顺时针旋转以显示对应的页面内容；如果操作为向左移动，则操作页面的父容器逆时针旋转以显示对应页面的内容。再者，监听到抬起事件时移动结束，并且开始页面转换，判断当前的移动距离是否超过页面转换的阈值，如果大于该阈值且移动的方向为向左，则设置并播放页面父容器的转换动画以将页面转换到下一页；如果大于该阈值且移动的方向为向右，则设置并播放页面父容器的转换动画以将页面转换到前一页；如果小于该阈值，则设置并播放页面父容器的转换动画以将当前页还原为初始状态。\n[0087] 对于翻滚效果：首先进行初始化处理，其初始化与平滑移动一样，在此不再赘述。\n其次，在移动事件中，对移动操作进行判断，如果移动方向为向左，则将当前页的旋转起始点设置为左下角，下一页为右下角，移动时平移并旋转这两个页面，如果移动方向为向右，则将当前页的旋转起始点设置为右下角，前一页为左下角，移动时平移并旋转这两个页面，最大的旋转角度为90度。再者，监听到抬起事件时移动结束，开始页面转换，如果为显示前一页动画，则将当前页在移动到windowWidth（窗口宽度）的同时旋转至90度，将前一页在移动到屏幕起始位置时旋转至0度；如果为显示下一页动画，则将当前页在移动到-windowWidth的同时将其旋转到-90度，将下一页在移动到屏幕起始位置时旋转到0度。\n[0088] 对于波浪效果：首先进行初始化处理，其初始化与平滑移动一样，在此不再赘述。\n其次，在移动事件中，对移动操作进行判断，如果移动方向为向左，则将当前页在移动的同时逐渐缩小，下一页在移动时由0.5倍开始逐渐放大，相反，则将当前页向相反方向移动时逐渐缩小，前一页在移动时由0.5倍开始逐渐放大，当然并不限于由0.5倍开始放大，也可以为其他数值。再者，监听到抬起事件时移动结束，开始页面转换，如果为显示前一页动画，则将当前页在移动到windowWidth的同时逐渐缩小为0.5倍，将前一页在移动到屏幕起始位置时逐渐放大为1倍；如果为显示下一页动画，则将当前页在移动到-windowWidth的同时将其缩小为0.5倍，将下一页在移动到屏幕起始位置时放大为1倍。\n[0089] 对于风车效果：首先进行初始化处理，其初始化与平滑移动一样，在此不再赘述。\n其次，在移动事件中，对移动操作进行判断，如果移动方向为向左，则将当前页的旋转起始点设置为右上角，下一页为左上角，移动时平移并旋转这两个页面，如果移动方向为向右，则将当前页的旋转起始点设置为左上角，前一页为右上角，移动时平移并旋转这两个页面，最大的旋转角度为20度，当然并不限于20度，也可以为其他数值。再者，监听到抬起事件时移动结束，开始页面转换，如果为显示前一页动画，则将当前页在移动到windowWidth的同时旋转至-20度，将前一页在移动到屏幕起始位置0px时旋转至0度；如果为显示下一页动画，则将当前页在移动到-windowWidth的同时将其旋转到20度，将下一页在移动到屏幕起始位置时旋转到0度。\n[0090] 优选地，本发明以实现窗帘推拉效果为例，对窗帘推拉效果的实现过程进行具体描述。如图7所示，包括以下步骤：\n[0091] 步骤S110、建立窗帘波动的运动物理模型，所述的物理模型基于质点-弹簧模型的布料模拟。\n[0092] 本发明为了产生真实的窗帘布料运动效果，需要运用相应的布料模型。目前的布料模型包括几何模型和物理模型。对于几何模型来说：布料的形状完全用数学函数(例如正弦函数)描述。虽然该模型有较快的速度，但只能描述简单的形状，其模拟效果不真实，需用户干预，实用性差。本发明采用窗帘布料波动的物理模型对动画进行描述，模拟的动画运动效果更加逼真。本发明的物理模型：布料的形状用微分方程描述，该模型结合布料的物理属性，如质量、硬度和弹性等，运用力学理论建立微分方程组，最终用数值方法求解方程(组)，该模型可以反映真实的布料状态。\n[0093] 为了进一步提高运算速度，本发明基于质点-弹簧模型的布料模拟方法，该方法的物理模型，采用了显示欧拉与隐式迭代相结合的方法，即积分一步的变步长欧拉方法，可以把每次迭代的步长拉大，从而减少迭代次数，不仅能够实现较快的速度，还能够反映真实的布料状态，进而使得窗帘推拉的模拟效果真实并且运算效率更高。\n[0094] 在这种模型中，布料被视为在其中插入了许多质点，质点和质点之间用弹簧相连，在力（拉伸力、排斥力、剪切力、弯曲力和外界作用力）的作用下，布产生了变形。\n[0095] 步骤S120、根据牛顿第二定律，建立所述窗帘波动的运动物理模型的质点运动方程，所述的质点运动方程包括外力驱动。\n[0096] 具体地，根据物体上每一质点的运动要满足牛顿第二定律可得：\n[0097]  （1）\n[0098] 其中，是质点i的位置，是质点i的质量，是阻尼因子， 是所有与质点i相邻的节点， 是质点i与质点j之间的刚度，是质点i和质点j之间弹簧的初始长度，是质点i所受的其他外力，如重力等。方程（1）中右边是质点所受的合力，第一项为质点i所受的阻尼力，第二项为质点i所受的弹簧力，第三项为质点i所受的其它外力。\n[0099] 步骤S130、求解所述的运动方程，确定模型质点的位置，并根据模型质点的位置对窗帘运动动画图像进行渲染，生成窗帘运动特效。\n[0100] 方程（1）为常系数二阶微分方程求解初值问题，求解此问题常采用的数值方法为降阶法。将方程化为一阶微分方程组并用欧拉方法求解。\n[0101] 为了准确而快速的求解布料的运动方程，此处采用自适应欧拉方法——积分一步的变步长欧拉方法。因为显式欧拉方法求解方程，稳定性不够；隐式方法虽具有高稳定性，但实现较为复杂。所以，将两者结合起来，较好解决仿真问题。即采用改进的欧拉方法对所述质点运动方程进行降阶，通过数值迭代求解方程稳定的解。\n[0102] 改进的欧拉方法如下：\n[0103] 设一阶微分方程组\n[0104]\n[0105] 已知 点上的函数值 ，求 处的函数值\n[0106] 。改进的欧拉公式为：\n[0107]\n[0108] 同时，还需要设计一个自适应的步长，以免固定步长选取过大而超出算法的稳定区域，从而导致计算结果发散；或者固定步长选取过小而导致计算量过大。根据改进的欧拉公式以h为步长，由 计算 ；再以 为步长，由 跨两步计算 。此\n时，若满足停止条件，则停止计算，将 作为 。否则，将步长折半再进行计算，直到满足给定的结束条件。最后可取 （其中m+1为最终的迭代次\n数）。\n[0109] 在该模型中用规则的网格来描述布料模型，因此每个质点的质量相同，该质量等于布料总质量除以质点个数，则在布模拟中，每个质点的重力为一常数。将质点所受的各力带入方程（1），给定各初值，采用改进的欧拉方法求解即可。\n[0110] 根据模型质点的位置对窗帘运动动画图像进行渲染，生成窗帘运动特效。具体地，先构造窗帘效果的显示页面，本发明利用HTML5 webGL（WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D渲染加速）技术绘制相应的布料，webGL启用GPU加速。如果用户操作操作为从右向左推，则在平铺的布料上渲染当前页的影像作为窗帘推拉的初始状态，并将下一页堆叠在当前页的下面；如果为从左向右拉，则在合拢的布料上渲染前一页的影像作为窗帘推拉的初始状态，即将前一页堆叠在当前页的上面，据此，初始化窗帘推拉的初始状态。在移动事件中，绘制窗帘推拉的动画，从右往左推为打开下一个页面，从左往右拉为显示前一个页面。边移动边绘制，根据布料的运动实时渲染页面。移动结束后，如果为显示前一页动画，则将前一页窗帘拉开至完全遮挡住当前页，显示屏上显示正确的页面；如果为显示后一页动画，则将当前页窗帘推到最左边至完全显示下一页；如果为显示当前页动画，则将窗帘回退到完全展开，显示当前页。\n[0111] 综上所述，本发明提供的一种具有多种翻页特效的页面切换系统及其方法，通过接收用户操作，识别触摸或者鼠标事件，判断翻页效果的类别以及页面转换的方向，实现一整套翻页效果选择和页面转换系统，并利用HTML5技术，为用户提供了多种页面转换的翻页效果。特别地，以窗帘推拉效果的翻转特效实现为例，还提供了模拟真实窗帘推拉效果的翻转特效物理模型实现过程。本发明提供的一种具有多种翻页特效的页面切换系统及其方法，给用户以更好的视觉效果和更丰富的操作体验。\n[0112] 应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。