CN108875079A - 一种切换浏览器页面的方法 - Google Patents

Abstract

本发明提供一种切换浏览器页面的方法，即当浏览器从一个页面切换到另一个页面时，第一个页面显示的内容继续保持在屏幕上，待第二个页面有显示内容之后，第一个页面显示的内容逐渐地从屏幕上消失。在第一个页面显示的内容逐渐从屏幕上消失直至完全消失后，浏览器将第二个页面显示的内容直接显示在屏幕上；或者，在第一个页面显示的内容逐渐从屏幕上消失的过程中，随着第一个页面显示的内容逐渐消失，第二个页面显示的内容逐渐显示在屏幕上，直至第一个页面显示的内容完全消失第二个页面显示的内容完全呈现。本发明的优点：实现了浏览器从一个页面到另一个页面的平滑、顺畅地动画效果，为使用者带来更好的体验。

Description

一种切换浏览器页面的方法

技术领域

本发明涉及浏览器技术领域，具体地说，涉及一种切换浏览器页面的方法。

背景技术

浏览器是互联网时代最重要的软件之一，其功能非常强大，包含了很多用浏览器制作动画的功能，使用这些功能可以为使用者带来非常好的使用体验。基于这一点，在很多设备上都是用浏览器来制作程序界面，也就是所谓的Web UI(User Interface)。

但是，目前利用浏览器制作的动画仅限于在一个页面内实现，即在浏览器从一个页面切换到另一个页面时，目前的做法是：在显示第二个页面内容时，第一个页面显示的内容马上消失。在第一个页面消失和第二个页面显示的过程中没有渐变的过程，显得非常的生硬，用户体验非常差。

在安卓和IOS系统中，各种应用、各种窗口的切换都有非常平滑顺畅的动画、渐变效果，这些动画效果能够给使用者带来非常好的使用体验，也是这些系统能够吸引用户的重要原因。

虽然，目前也有一些支持多标签的浏览器在从一个标签页切换到另外一个标签页的时候，会通过图像叠加的方法在一个页面的显示内容上展示部分另外网页的内容，但是那只是为了让使用者能够快速预览不同页面的内容以便更好的区分不同的页面，并不是两个页面之间的彻底切换，也无法实现向安卓或IOS系统那样平滑的动画效果。

发明内容

鉴于目前浏览器页面切换生硬、不流畅、视觉效果不理想的问题，本发明的目的是提供一种切换浏览器页面的方法。该方法使得浏览器在从一个页面切换到另一个页面时，第一个页面不是立刻从屏幕上消失而是逐渐地从屏幕上消失，实现非常平滑顺畅的动画和渐变效果，为使用者提供更好的使用体验。

为实现上述目的，本发明采用以下技术方案：一种切换浏览器页面的方法，其特征在于：当浏览器从一个页面切换到另一个页面时，第一个页面显示的内容继续保持在屏幕上，待第二个页面有显示内容之后，第一个页面显示的内容逐渐地从屏幕上消失。

进一步地，在第一个页面显示的内容逐渐从屏幕上消失直至完全消失后，浏览器将第二个页面显示的内容直接显示在屏幕上。

进一步地，在第一个页面显示的内容逐渐从屏幕上消失的过程中，随着第一个页面显示的内容逐渐消失，第二个页面显示的内容逐渐显示在屏幕上，直至第一个页面显示的内容完全消失第二个页面显示的内容完全呈现。

附图说明

图1是本发明切换浏览器页面的方法流程图；

图2是本发明实施例一使第一个页面逐渐消失的方法流程图；

图3是本发明实施例一第一个页面通过向左滑动逐渐消失的效果示意图；

图4是本发明实施例二第一个页面通过透明度变化逐渐消失的效果示意图；

图5是本发明实施例三第一个页面通过裁剪逐渐消失的效果示意图；

图6是本发明在第一个页面逐渐消失的过程中逐渐显示第二个页面的流程图；

图7是本发明实施例四通过向左滑动实现第一个页面逐渐消失第二个页面逐渐显示的效果示意图；

图8是本发明实施例五通过页面透明度变化实现第一个页面逐渐消失第二个页面逐渐显示的效果示意图；

图9是本发明实施例六通过页面剪切实现第一个页面逐渐消失第二个页面逐渐显示的效果示意图。

具体实施方式

以下将参考附图详细说明本发明的示例性实施例、特征和方面。附图中相同的附图标记表示功能相同或相似的元件。尽管在附图中示出了实施例的各种方面，但是除非特别指出，不必按比例绘制附图。

为克服现有技术中，浏览器从一个页面切换到另一个页面时，第一个页面显示的内容马上消失，直接切换到第二个页面显示的内容，切换过于生硬、不流畅的问题，本发明提供一种切换浏览器页面的方法，即：当浏览器从一个页面切换到另一个页面时，第一个页面显示的内容继续保持在屏幕上，待第二个页面有显示内容之后，第一个页面显示的内容逐渐地从屏幕上消失。

进一步地，在第一个页面显示的内容逐渐从屏幕上消失直至完全消失后，浏览器将第二个页面显示的内容直接显示在屏幕上。

进一步地，在第一个页面显示的内容逐渐从屏幕上消失的过程中，随着第一个页面显示的内容的消失，第二个页面显示的内容逐渐显示在屏幕上，直至第一个页面显示的内容完全消失第二个页面显示的内容完全呈现。

图1为本发明提供的切换浏览器页面的方法流程图。如图所示，本发明切换浏览器页面的方法为：

步骤S1：浏览器在屏幕上显示第一个页面的内容；

步骤S2：浏览器开始加载第二个页面的内容，但此时屏幕上仍然显示第一个页面的内容；

步骤S3：浏览器将第二个页面显示的内容保存到内存中，同时，将第一个页面显示的内容保存到内存中，此时，屏幕上显示的仍然是第一个页面的内容；

步骤S4：浏览器将第一个页面显示的内容逐渐地从屏幕上消失；

步骤S5：在第一个页面显示的内容逐渐从屏幕上消失的过程中，浏览器将第二个页面显示的内容逐渐显示在屏幕上；或者当第一个页面显示的内容完全消失后，浏览器将第二个页面显示的内容直接显示在屏幕上。

将第一个页面显示的内容逐渐从屏幕上消失的方法有许多，下面结合具体实施例详细说明。

实施例一：通过将页面向左滑动的动画方法，即可实现将第一个页面显示的内容逐渐从屏幕上消失的目的。

如图2所示，所述步骤S4可以进一步分解为：

步骤S41：设定屏幕的宽度为W，动画的最大步骤为M，每一步动画显示的宽度为S＝W÷M，设定动画的当前步骤为N，1≤N≤M，N的初始值为1，

步骤S42：对保存在内存中的第一页面的显示内容按照动画步骤第N步的效果显示在屏幕上，第N步动画显示的宽度为W–S×N；

步骤S43：判断N是否等于M？如果N＝M，执行步骤S5；否则，N＝N+1，并等待T秒，0.001秒≤T≤5秒，继续执行步骤S42。

如图3所示，通过向左滑动页面的方法可见将第一个页面显示的内容逐渐从屏幕上消失。假定屏幕宽度为W，第一个页面显示的宽度也为W，动画最大步骤为M，当前的动画步骤是N(1≤N≤M)，动画每向左移动一步的图像宽度为S，S＝W÷M。第N步，第一个页面的显示宽度为W-S×N。随着N值的不断变大，第一个页面的显示部分将逐渐变窄，当N等于M的时候，第一个页面将完全消失。

当第一个页面显示的内容完全消失后，浏览器将第二个页面显示的内容直接显示在屏幕上，从而实现从第一个页面向第二个页面的平滑过渡、最终实现页面流畅切换的效果。

在本发明实施例一中，通过页面向左滑动，使第一个页面显示的内容逐渐从屏幕上消失，当然，也可以通过页面向右滑动的方式，使第一个页面显示的内容逐渐从屏幕上消失，在此不再赘述。

实施例二：通过页面透明度的动画方法，实现将第一个页面显示的内容逐渐从屏幕上消失的效果。如图4所示，具体方法：

假设页面透明度分为M个等级，1表示完全不透明，M表示完全透明。当前的动画步骤是N(1≤N≤M)，N的初始值为1。当N等于1时，第一个页面完全不透明，清晰地显示第一个页面的内容，随着N的增大，第一个页面的透明度逐渐增大，从视觉效果上来看就是第一个页面在慢慢消失；当N等于M时，第一个页面显示的内容就完全消失乐，从而达到将第一个页面显示的内容逐渐从屏幕上消失的目的。

实施例三：通过剪切的动画方法，实现将第一个页面显示的内容逐渐从屏幕上消失的效果。如图5所示，具体方法：逐次从第一个页面中裁剪掉某些区域，逐步扩大裁剪区域，直至将第一个页面显示的内容完全裁剪掉。至于每一步如何在第一个页面上选择裁剪区域，有很多种方法，例如从上到下逐条裁剪，从左到右逐条裁剪，等等，只要有基本数学知识的人都可以设计出这样的算法，并不是本发明的内容，这里不展开描述。

当第一个页面显示的内容逐渐从屏幕上消失，直至完全消失后，浏览器可以直接将第二个页面显示的内容显示在屏幕上；也可以，如图6所示，在第一个页面显示的内容逐渐从屏幕上消失的过程中，将第二个页面显示的内容逐渐显示在屏幕上。具体方法如下：

按照动画步骤将第一个页面第N步显示的内容和第二个页面第N步显示的内容进行合成，并且把合成后的内容显示到屏幕上。

实施例四：通过将页面向左滑动的动画方法，在第一个页面显示的内容逐渐从屏幕上消失的过程中，将第二个页面显示的内容逐渐显示在屏幕上。

如图7所示，通过页面向左滑动的动画方法，在将第一个页面显示的内容逐渐从屏幕上消失的过程中，将第二个页面的内容逐渐显示在屏幕上。设定屏幕宽度为W，第一个页面和第二个页面的显示宽度也都是W，动画最大步骤为M，动画每向左移动一步的图像宽度为S，S＝W÷M；当前的动画步骤是N(1≤N≤M)，N的初始值为1。

此时在屏幕上显示的内容包括第一个页面的右侧部分和第二个页面的左侧部分，其中第一个页面的显示部分宽度为W-S×N，第二个页面的显示部分宽度为S×N。随着N值的不断变大，第一个页面的显示部分将逐渐变窄而第二个页面的显示部分将逐渐变宽，当N等于M的时候，第一个页面将完全消失，第二个页面的显示宽度将等于W，也就是第二个页面占满了整个屏幕，从而达到第一个页面显示的内容逐渐从屏幕上消失，第一个页面向第二个页面的平滑过渡、切换的效果。

实施例五：通过页面透明度的动画方法，在第一个页面显示的内容逐渐从屏幕上消失的过程中，将第二个页面显示的内容逐渐显示在屏幕上。

如图8所示，将第一个页面显示的内容和第二个页面显示的内容按照透明度进行叠加，并将叠加后生成的图像显示在屏幕上；将页面透明度分为M个等级，1表示完全不透明，M表示完全透明。当前的动画步骤是N(1≤N≤M)，设定第一个页面的透明度为N，第二个页面的透明度为M-N。当N等于1时，第一个页面的透明度为1而第二个页面的透明度为M，表示第一个页面完全不透明而第二个页面完全透明，此时屏幕上只能看到第一个页面的显示内容；随着N的增大，第一个页面的透明度逐渐增大而第二个页面的透明度将逐渐降低，从视觉效果上来看就是第一个页面在慢慢消失而第二个页面在慢慢的显现出来；当N等于M时，第一个页面的透明度为M而第二个页面的透明度为1，表示第一个页面完全透明而第二个页面完全不透明，此时屏幕上只能看到第二个页面的内容，从而实现第一个页面显示的内容逐渐从屏幕上消失，在第一个页面显示的内容逐渐消失的过程中，第二个页面的内容逐渐显示在屏幕上，即从第一个页面向第二个页面的平滑过渡、切换的效果。

实施例六：通过页面裁剪动画方法，在第一个页面显示的内容逐渐从屏幕上消失的过程中，将第二个页面显示的内容逐渐显示在屏幕上。

如图9所示，将第一个页面显示的内容和第二个页面显示的内容完全重合叠加，显示在屏幕上，即将第一个页面显示的内容完全覆盖在第二个页面显示的内容上面；然后，逐次从第一个页面中裁剪掉某些区域，并在第一个页面被裁剪掉的区域显示第二个页面在相应区域的内容；分N次(N≥1)将第一个页面的所有区域都裁剪掉，同时将第二个页面的内容分N次全部显示出来，此时屏幕上只能看到第二个页面的内容，从而达到从第一个页面向第二个页面的平滑过渡、最终实现页面切换的效果。

至于每个步骤如何在第一个页面上选择裁剪的区域，有很多种方法，例如从上到下逐条裁剪，从左到右逐条裁剪，等等，只要有基本数学知识的人都可以设计出这样的算法，并不是本发明的内容，这里不展开描述。

本发明的优点：

1、在浏览器从一个页面切换到另一个页面时，通过将第一个页面显示的内容逐渐从屏幕上消失的方式，实现浏览器从一个页面到另一个页面的平滑、顺畅地动画效果，为使用者带来更好的体验。

2、在第一个页面显示的内容逐渐从屏幕上消失的过程中，随着第一个页面显示的内容的消失，第二个页面显示的内容逐渐显示在屏幕上，直至第一个页面显示的内容完全消失第二个页面显示的内容完全呈现，这个切换过程自然、流畅。

最后应说明的是：以上所述的各实施例仅用于说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述实施例所记载的技术方案进行修改，或者对其中部分或全部技术特征进行等同替换；而这些修改或替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (9)

1.一种切换浏览器页面的方法，其特征在于：当浏览器从一个页面切换到另一个页面时，第一个页面显示的内容继续保持在屏幕上，待第二个页面有显示内容之后，第一个页面显示的内容逐渐地从屏幕上消失。

2.根据权利要求1所述的切换浏览器页面的方法，其特征在于：在第一个页面显示的内容逐渐从屏幕上消失直至完全消失后，浏览器将第二个页面显示的内容直接显示在屏幕上。

3.根据权利要求1所述的切换浏览器页面的方法，其特征在于：在第一个页面显示的内容逐渐从屏幕上消失的过程中，随着第一个页面显示的内容逐渐消失，第二个页面显示的内容逐渐显示在屏幕上，直至第一个页面显示的内容完全消失第二个页面显示的内容完全呈现。

4.根据权利要求1所述的切换浏览器页面的方法，其特征在于：所述第一个页面显示的内容通过将页面向左/向右滑动的动画方法逐渐从屏幕上消失。

5.根据权利要求1所述的切换浏览器页面的方法，其特征在于：所述第一个页面显示的内容通过页面透明度的动画方法逐渐从屏幕上消失。

6.根据权利要求1所述的切换浏览器页面的方法，其特征在于：所述第一个页面显示的内容通过剪切的动画方法逐渐从屏幕上消失。

7.根据权利要求3所述的切换浏览器页面的方法，其特征在于：通过页面向左/向右滑动的方式，在第一个页面显示的内容逐渐从屏幕上消失的过程中，按照动画步骤将第一个页面第N步显示的内容和第二个页面第N步显示的内容进行合成，并且把合成后的内容显示到屏幕上。

8.根据权利要求3所述的切换浏览器页面的方法，其特征在于：通过页面透明度的动画方法，将第一个页面显示的内容和第二个页面显示的内容按照透明度进行叠加，并将叠加后生成的图像显示在屏幕上；将第一个页面的透明度逐渐增大，从完全不透明到完全透明；同时，将第二个页面的透明度从完全透明到完全不透明。

9.根据权利要求3所述的切换浏览器页面的方法，其特征在于：通过页面裁剪动画方法，将第一个页面显示的内容完全覆盖在第二个页面显示的内容上面；然后，逐次从第一个页面中裁剪掉某些区域，并在第一个页面被裁剪掉的区域显示第二个页面在相应区域的内容；分N次将第一个页面的所有区域都裁剪掉，同时将第二个页面的内容分N次全部显示出来，N≥1。