一种页面切换方法及装置转让专利

申请号 : CN201611204831.6

文献号 : CN106649725B

文献日 :

基本信息:

PDF:

法律信息:

相似专利:

发明人 : 陈峥

申请人 : 前海节事科技(深圳)有限公司

摘要 :

本发明提供一种页面切换方法,包括以下步骤:接收到页面切换指令后,获取当前页面的内容以及相对应的位置;判断当前页面的第一标题图形在切换页面中的位置和样式,对第一标题图形进行位置切换;判断当前页面的第一图形在切换页面中的位置和样式,对第一图形进行位置切换;判断当前页面的第二图形在切换页面中的位置和样式,对第二图形进行位置切换;判断当前页面的第一隐藏图形在切换页面中的位置和样式,对第一隐藏图形进行位置切换;对第三图形进行隐藏。本发明还提供了一种页面切换装置。该页面切换方法无需清空页面,避免白屏的产生,而且流畅度高、占用内存小,极大地提高了页面切换的效率,改善了用户体验。

权利要求 :

1.一种页面切换方法,其特征在于,包括以下步骤:

S1:接收到页面切换指令后,获取当前页面的内容以及相对应的位置;所述当前页面的内容包括第一标题图形、第一图形、第二图形、第三图形和第一隐藏图形;所述第二图形中还设置有第一图片;

S2:判断当前页面的第一标题图形在切换页面中的位置和样式,对所述第一标题图形进行位置切换,切换到切换页面对应的位置,并替换第一标题图形中文本框的文字;

S3:判断当前页面的第一图形在切换页面中的位置和样式,对所述第一图形进行位置切换,切换到切换页面对应的位置,在切换的过程中还进行图形样式的改变;

S4:判断当前页面的第二图形在切换页面中的位置和样式,以及第一图片在切换页面中的URL地址;对所述第二图形进行位置切换,切换到切换页面对应的位置,替换第一图片的URL地址,实现图片切换;

S5:判断当前页面的第一隐藏图形在切换页面中的位置和样式,对所述第一隐藏图形进行位置切换,切换到切换页面对应的位置,并在切换页面中显示;

S6:对第三图形进行隐藏;

S7:对切换页面中的图形、文字和图片进行渲染。

2.根据权利要求1所述的页面切换方法,其特征在于,所述位置切换通过切换动画的方式实现,所述切换动画包括圆角尺寸动画、位置移动动画、背景字体颜色变换动画、背景扫光动画、淡入淡出切换动画以及放射线效果动画。

3.根据权利要求2所述的页面切换方法,其特征在于,步骤S2、S3、S4、S5和S6的顺序根据页面切换需要进行调整;步骤S2-S5中图形位置切换的方式相互独立。

4.根据权利要求1所述的页面切换方法,其特征在于,在步骤S3中,若第一图形中文本框的文字在切换页面中保持不变,则保留所述文字;若第一图形中文本框的文字在切换页面中改变,则在第一图形位置切换到切换页面后,用新文字替换第一图形中文本框的文字。

5.根据权利要求1所述的页面切换方法,其特征在于,在步骤S5中,若所述第一隐藏图形中包含列表,则请求列表数据,显示列表框,并填充列表数据,实现在切换页面中对列表及数据的显示。

6.一种页面切换装置,其特征在于,包括:

指令接收单元,用于接收到页面切换指令后,获取当前页面的内容以及相对应的位置;

所述当前页面的内容包括第一标题图形、第一图形、第二图形、第三图形和第一隐藏图形;

所述第二图形中还设置有第一图片;

第一标题图形单元,用于判断当前页面的第一标题图形在切换页面中的位置和样式,对所述第一标题图形进行位置切换,切换到切换页面对应的位置,并替换第一标题图形中文本框的文字;

第一图形单元,用于判断当前页面的第一图形在切换页面中的位置和样式,对所述第一图形进行位置切换,切换到切换页面对应的位置,在切换的过程中还进行图形样式的改变;

第二图形单元,判断当前页面的第二图形在切换页面中的位置和样式,以及第一图片在切换页面中的URL地址;对所述第二图形进行位置切换,切换到切换页面对应的位置,替换第一图片的URL地址,实现图片切换;

第一隐藏图形单元,判断当前页面的第一隐藏图形在切换页面中的位置和样式,对所述第一隐藏图形进行位置切换,切换到切换页面对应的位置,并在切换页面中显示;

第三图形单元,对第三图形进行隐藏。

7.根据权利要求6所述的页面切换装置,其特征在于,所述装置还包括位置切换单元,用于使位置切换通过切换动画的方式实现,所述切换动画包括圆角尺寸动画、位置移动动画、背景字体颜色变换动画、背景扫光动画、淡入淡出切换动画以及放射线效果动画。

8.根据权利要求7所述的页面切换装置,其特征在于,第一标题图形单元、第一图形单元、第二图形单元、第一隐藏图形单元和第三图形单元的工作顺序根据页面切换需要进行调整;各个图形单元中的位置切换方式相互独立。

9.根据权利要求6所述的页面切换装置,其特征在于,所述第一图形单元,在具体用于切换时,若第一图形中文本框的文字在切换页面中保持不变,则保留所述文字;若第一图形中文本框的文字在切换页面中改变,则在第一图形位置切换到切换页面后,用新文字替换第一图形中文本框的文字。

10.根据权利要求6所述的页面切换装置,其特征在于,第一隐藏图形单元,在具体用于显示时,若所述第一隐藏图形中包含列表,则请求列表数据,显示列表框,并填充列表数据,实现在切换页面中对列表及数据的显示。

说明书 :

一种页面切换方法及装置

技术领域

[0001] 本发明涉及计算机技术领域,更具体地,涉及一种页面切换方法及装置。

背景技术

[0002] 随着信息技术的不断发展和互联网技术的广泛应用,通过浏览器浏览信息已经成为人们日常生活中的一部分。浏览器的主要功能就是在一个浏览器标签内承载多个网页页面,并当用户想要浏览不同网页页面时,进行网页页面的切换。
[0003] 目前浏览器的页面切换方式主要有两种,一种是在当前页面打开新的网页,另一种是在新的窗口打开新的网页。对于在当前页面打开新的网页,用户的体验是网页打开速度慢,而且多标签切换经常造成操作困扰,并且在切换页面后出现页面“闪白”的白屏状况;对于在新的窗口打开新的网页,该方法占用内存大,影响网页使用时的流畅度。

发明内容

[0004] 本发明要解决的技术问题在于,针对现有技术在切换页面时会出现“闪白”的白屏状况及流畅度低、占用内存大等技术缺陷,提供一种避免白屏产生、流畅度高及占用内存小的页面切换方法及装置
[0005] 本发明解决其技术问题所采用的技术方案是:提供一种页面切换方法,包括以下步骤:
[0006] S1:接收到页面切换指令后,获取当前页面的内容以及相对应的位置;所述当前页面的内容包括第一标题图形、第一图形、第二图形、第三图形和第一隐藏图形;所述第二图形中还设置有第一图片;
[0007] S2:判断当前页面的第一标题图形在切换页面中的位置和样式,对所述第一标题图形进行位置切换,切换到切换页面对应的位置,并替换第一标题图形中文本框的文字;
[0008] S3:判断当前页面的第一图形在切换页面中的位置和样式,对所述第一图形进行位置切换,切换到切换页面对应的位置,在切换的过程中还进行图形样式的改变;
[0009] S4:判断当前页面的第二图形在切换页面中的位置和样式,以及第一图片在切换页面中的URL地址;对所述第二图形进行位置切换,切换到切换页面对应的位置,替换第一图片的URL地址,实现图片切换;
[0010] S5:判断当前页面的第一隐藏图形在切换页面中的位置和样式,对所述第一隐藏图形进行位置切换,切换到切换页面对应的位置,并在切换页面中显示;
[0011] S6:对第三图形进行隐藏;
[0012] S7:对切换页面中的图形、文字和图片进行渲染。
[0013] 优选地,所述位置切换通过切换动画的方式实现,所述切换动画包括圆角尺寸动画、位置移动动画、背景字体颜色变换动画、背景扫光动画、淡入淡出切换动画以及放射线效果动画。
[0014] 优选地,步骤S2、S3、S4、S5和S6的顺序可以根据页面切换需要进行调整;步骤S2-S5中位置切换的方式相互独立。
[0015] 优选地,在步骤S3中,若第一图形中文本框的文字在切换页面中保持不变,则保留所述文字;若第一图形中文本框的文字在切换页面中改变,则在第一图形位置切换到切换页面后,用新文字替换第一图形中文本框的文字。
[0016] 优选地,在步骤S5中,若所述第一隐藏图形中包含列表,则请求列表数据,显示列表框,并填充列表数据,实现在切换页面中对列表及数据的显示。
[0017] 本发明还提供一种页面切换装置,包括:
[0018] 指令接收单元,用于接收到页面切换指令后,获取当前页面的内容以及相对应的位置;所述当前页面的内容包括第一标题图形、第一图形、第二图形、第三图形和第一隐藏图形;所述第二图形中还设置有第一图片;
[0019] 第一标题图形单元,用于判断当前页面的第一标题图形在切换页面中的位置和样式,对所述第一标题图形进行位置切换,切换到切换页面对应的位置,并替换第一标题图形中文本框的文字;
[0020] 第一图形单元,用于判断当前页面的第一图形在切换页面中的位置和样式,对所述第一图形进行位置切换,切换到切换页面对应的位置,在切换的过程中还进行图形样式的改变;
[0021] 第二图形单元,判断当前页面的第二图形在切换页面中的位置和样式,以及第一图片在切换页面中的URL地址;对所述第二图形进行位置切换,切换到切换页面对应的位置,替换第一图片的URL地址,实现图片切换;
[0022] 第一隐藏图形单元,判断当前页面的第一隐藏图形在切换页面中的位置和样式,对所述第一隐藏图形进行位置切换,切换到切换页面对应的位置,并在切换页面中显示;
[0023] 第三图形单元,对第三图形进行隐藏。
[0024] 优选地,所述装置还包括位置切换单元,用于使位置切换通过切换动画的方式实现,所述切换动画包括圆角尺寸动画、位置移动动画、背景字体颜色变换动画、背景扫光动画、淡入淡出切换动画以及放射线效果动画。
[0025] 优选地,各个图形单元中的位置切换方式相互独立。
[0026] 优选地,所述第一图形单元,在具体用于切换时,若第一图形中文本框的文字在切换页面中保持不变,则保留所述文字;若第一图形中文本框的文字在切换页面中改变,则在第一图形位置切换到切换页面后,用新文字替换第一图形中文本框的文字。
[0027] 优选地,第一隐藏图形单元,在具体用于显示时,若所述第一隐藏图形中包含列表,则请求列表数据,显示列表框,并填充列表数据,实现在切换页面中对列表及数据的显示。
[0028] 本发明的有益效果在于,该页面切换方法无需清空页面,避免白屏的产生,而且流畅度高、占用内存小,极大地提高了页面切换的效率,改善了用户体验。

附图说明

[0029] 下面将结合附图及实施例对本发明作进一步说明,附图中:
[0030] 图1是本发明页面切换方法的流程示意图;
[0031] 图2是常规页面切换时出现白屏的示意图;
[0032] 图3是本发明页面切换方法的页面切换示意图;
[0033] 图4是常规页面切换时进行页面渲染的流程示意图;
[0034] 图5是本发明页面切换方法的页面渲染的流程示意图。

具体实施方式

[0035] 为了对本发明的技术特征、目的和效果有更加清楚的理解,现对照附图详细说明本发明的具体实施方式。
[0036] 图1是本发明页面切换方法的流程示意图。该页面切换方法包括以下步骤:
[0037] S1:接收到页面切换指令后,获取当前页面的内容以及相对应的位置;当前页面的内容包括第一标题图形、第一图形、第二图形、第三图形和第一隐藏图形;第二图形中还设置有第一图片;
[0038] S2:判断当前页面的第一标题图形在切换页面中的位置和样式,对第一标题图形进行位置切换,切换到切换页面对应的位置,并替换第一标题图形中文本框的文字;
[0039] S3:判断当前页面的第一图形在切换页面中的位置和样式,对第一图形进行位置切换,切换到切换页面对应的位置,在切换的过程中还进行图形样式的改变;
[0040] S4:判断当前页面的第二图形在切换页面中的位置和样式,以及第一图片在切换页面中的URL地址;对第二图形进行位置切换,切换到切换页面对应的位置,替换第一图片的URL地址,实现图片切换;
[0041] S5:判断当前页面的第一隐藏图形在切换页面中的位置和样式,对第一隐藏图形进行位置切换,切换到切换页面对应的位置,并在切换页面中显示;
[0042] S6:对第三图形进行隐藏;
[0043] S7:对切换页面中的图形、文字和图片进行渲染,显示切换页面,从而完成从当前页面到切换页面的切换。
[0044] 步骤S2、S3、S4、S5和S6的顺序可以根据页面切换需要进行任意的调整;步骤S2-S5中图形位置切换应用的动画方式相互独立。图形、图片以及文本框的位置可以分别由二维坐标(x,y)或者三维坐标(x,y,z)进行定位。
[0045] 本发明的页面切换方法对当前页面和切换页面中的图形内容和图形样式进行优化融合,避免了每次在切换页面时都需要重新去下载新的切换页面的图形内容和图形样式。本发明的页面切换方法利用当前页面的图形样式,基于切换动画对图形样式进行改变和位置移动,并且根据需要替换图形内容和文字,因此省去了下载步骤,极大地提高了切换页面的反应速度,改善了用户浏览网页的流畅度。
[0046] 本发明方法中涉及的文字、图片、图形以及页面都有各自的样式。更加详细地,图形的样式包括了图形的透明度、边框颜色、背景颜色、尺寸以及图形的变化,包括图形的缩放、旋转、移动和倾斜等,图形的样式还包括图形中文本框之间和文字之间的间距,以及文本框和文字各自的颜色、尺寸和透明度等。相似地,文字、图片以及页面的样式都包括了有如以上所述图形的样式包括的内容和变化。
[0047] 图2是常规页面切换时出现白屏的示意图。常规的切换方法为S1:在显示当前页面后发出切换指令;S2:下载替换页面的内容;S3:播放页面切换动画;S4:清空当前页面的内容;S5:渲染并显示替换页面。重要地,在清空当前页面的步骤S4中,页面会出现短暂的白屏。而且步骤S2中下载替换页面的内容也需要占用较大内存,并且下载的速度决定了下载内容的时间长短。
[0048] 图3是本发明页面切换方法的页面切换示意图。本发明中各个步骤中提到的位置切换可以通过切换动画的方式来实现,切换动画包括圆角尺寸动画、位置移动动画、背景字体颜色变换动画、背景扫光动画、淡入淡出切换动画以及放射线效果动画。而且各个步骤中位置切换的动画方式相互独立,具体的动画方式取决于图形的样式和位置,使所选择的动画方式符合高效方便进行切换的原则。
[0049] 在传统的页面切换中,由于采用页面整体切换,切换动画局限于页面整体的切换效果,如翻页、滑动和折叠等。而本发明的切换方法中,因为没有采用整体切换,而是对各个图形进行位置和样式的切换改变,因此能够使用的切换动画更为广泛灵活,速度也更加快。
[0050] 在步骤S3中,若第一图形中文本框的文字在切换页面中保持不变,则保留文字;若第一图形中文本框的文字在切换页面中改变,则在第一图形位置切换到切换页面后,用新文字替换第一图形中文本框的文字。
[0051] 在步骤S5中,若第一隐藏图形中包含列表,则请求列表数据,显示列表框,并填充列表数据,实现在切换页面中对列表及数据的显示。
[0052] 本发明的切换方法适用的情况包括两个页面数据相同,例如数据透视(通过不同视角,视图查看),还包括数据比较少的页面例如登录注册首页,以及具有类似结构的页面,比如都有导航栏,标题栏,侧边栏等等。
[0053] 与常规的页面切换方法相比较,本发明的页面切换方法不需要清空当前页面的内容,也不需要下载替换页面的内容,而是基于切换动画对图形样式进行改变和位置移动,实现了从当前页面到切换页面的无缝切换,因而避免了白屏的产生,而且免去下载替换页面的内容能够节省下载时间,直接将当前页面中各个图形通过切换动画进行样式和位置的变化,并根据需要进行图形中文字的替换、隐藏和显示,因此极大提高页面切换的速度和流畅度。
[0054] 图4是常规页面切换时进行页面渲染的流程示意图。主要包括以下步骤,S1:下载当前页面的内容、样式和脚本;S2:对当前页面进行渲染;S3:发出切换指令,并下载替换页面的内容、样式和脚本;S4:对替换页面进行渲染。
[0055] 图5是本发明页面切换方法的页面渲染的流程示意图。主要包括以下步骤,S1:下载当前页面的内容、样式和脚本;S2:对当前页面进行渲染;S3:发出切换指令;S4:对替换页面进行渲染。从图5中可以看出,本发明的页面切换技术省去了重新下载新的页面(替换页面)内容,而是将原页面(当前页面)中的内容、样式和脚本进行一定的变化或替换,再应用到新页面(替换页面)中,从而提高了切换的速度和效率,免去了下载新的内容、样式和脚本的下载步骤,降低了对下载速度的要求,在所有图形完成样式和位置的切换,所有图形文字完成替换之后,直接进行渲染,完成页面的切换和显示。
[0056] 本发明还提供了一种页面切换装置,包括:
[0057] 指令接收单元,用于接收到页面切换指令后,获取当前页面的内容以及相对应的位置;当前页面的内容包括第一标题图形、第一图形、第二图形、第三图形和第一隐藏图形;第二图形中还设置有第一图片;
[0058] 第一标题图形单元,用于判断当前页面的第一标题图形在切换页面中的位置和样式,对第一标题图形进行位置切换,切换到切换页面对应的位置,并替换第一标题图形中文本框的文字;
[0059] 第一图形单元,用于判断当前页面的第一图形在切换页面中的位置和样式,对第一图形进行位置切换,切换到切换页面对应的位置,在切换的过程中还进行图形样式的改变;
[0060] 第二图形单元,判断当前页面的第二图形在切换页面中的位置和样式,以及第一图片在切换页面中的URL地址;对第二图形进行位置切换,切换到切换页面对应的位置,替换第一图片的URL地址,实现图片切换;
[0061] 第一隐藏图形单元,判断当前页面的第一隐藏图形在切换页面中的位置和样式,对第一隐藏图形进行位置切换,切换到切换页面对应的位置,并在切换页面中显示;
[0062] 第三图形单元,对第三图形进行隐藏。
[0063] 页面切换装置还包括位置切换单元,用于使位置切换通过切换动画的方式实现,切换动画包括圆角尺寸动画、位置移动动画、背景字体颜色变换动画、背景扫光动画、淡入淡出切换动画以及放射线效果动画。
[0064] 各个图形单元中的位置切换方式相互独立。
[0065] 第一图形单元,在具体用于切换时,若第一图形中文本框的文字在切换页面中保持不变,则保留文字;若第一图形中文本框的文字在切换页面中改变,则在第一图形位置切换到切换页面后,用新文字替换第一图形中文本框的文字。
[0066] 第一隐藏图形单元,在具体用于显示时,若第一隐藏图形中包含列表,则请求列表数据,显示列表框,并填充列表数据,实现在切换页面中对列表及数据的显示。
[0067] 上面结合附图对本发明的实施例进行了描述,但是本发明并不局限于上述的具体实施方式,上述的具体实施方式仅仅是示意性的,而不是限制性的,本领域的普通技术人员在本发明的启示下,在不脱离本发明宗旨和权利要求所保护的范围情况下,还可做出很多形式,这些均属于本发明的保护之内。