CN107704154B - 导航栏过渡方法和系统 - Google Patents

Abstract

本发明提供了导航栏过渡方法和系统，涉及计算机技术领域，包括获取当前页面的页面类型和下一页面的页面类型，其中，页面类型包括第一导航栏页面和第二导航栏页面，第一导航栏页面显示有第一导航栏，第二导航栏页面不显示第一导航栏；判断下一页面的页面类型与当前页面的页面类型是否一致；当下一页面的页面类型与当前页面的页面类型不一致时，获取第二导航栏；将第二导航栏设置在第一导航栏页面，覆盖第一导航栏；将覆盖在第一导航栏上的第二导航栏随着第一导航栏页面进行切换，直至第二导航栏退出屏幕，采用替身导航栏，在页面切换过程中，起到平滑过渡的效果。

Description

导航栏过渡方法和系统

技术领域

本发明涉及计算机技术领域，尤其是涉及导航栏过渡方法和系统。

背景技术

现如今很多软件应用都通过手势拖动进行操作，其中，软件应用中的一些模块，例如个人中心模块，为了页面整洁美观，已经习惯在页面中不保留导航栏，并直接将页面背景覆盖到状态栏，但是此时回到其他有导航栏页面时，又需要显示导航栏，如果将两种页面直接进行切换，由于导航栏不能随页面一起进行切换，页面就会出现瞬间显示导航栏的情况，效果比较突兀，而不能起到平滑过渡的效果。

发明内容

有鉴于此，本发明的目的在于提供导航栏过渡方法和系统，采用替身导航栏，在页面切换过程中，起到平滑过渡的效果。

第一方面，本发明实施例提供了导航栏过渡方法，包括：

获取当前页面的页面类型和下一页面的页面类型，其中，所述页面类型包括第一导航栏页面和第二导航栏页面，所述第一导航栏页面显示有第一导航栏，所述第二导航栏页面不显示所述第一导航栏；

判断所述下一页面的页面类型与当前页面的页面类型是否一致；

当所述下一页面的页面类型与所述当前页面的页面类型不一致时，获取第二导航栏；

将所述第二导航栏设置在所述第一导航栏页面，覆盖所述第一导航栏；

将覆盖在所述第一导航栏上的所述第二导航栏随着所述第一导航栏页面进行切换，直至所述第二导航栏退出屏幕。

结合第一方面，本发明实施例提供了第一方面的第一种可能的实施方式，其中，在所述获取当前页面的页面类型和下一页面的页面类型之前，还包括：

获取页面切换手势信号；

根据所述页面切换手势信号和当前页面信息获取下一页面的页面类型，其中，所述当前页面信息包括所述当前页面的页面类型。

结合第一方面，本发明实施例提供了第一方面的第二种可能的实施方式，其中，所述当所述下一页面的页面类型与所述当前页面的页面类型不一致时，获取第二导航栏包括：

当所述当前页面为所述第一导航栏页面时，截取所述当前页面中的所述第一导航栏的图片，作为所述第二导航栏；

当所述当前页面为所述第二导航栏页面时，调用预先存储的所述第一导航栏的图片，作为所述第二导航栏。

结合第一方面，本发明实施例提供了第一方面的第三种可能的实施方式，其中，所述将覆盖在所述第一导航栏上的所述第二导航栏随着所述第一导航栏页面进行切换，直至所述第二导航栏退出屏幕包括：

将所述第二导航栏设置在所述第一导航栏页面，覆盖所述第一导航栏；

按照所述下一页面的页面类型调整所述第二导航栏透明度并设置所述第一导航栏的透明度，以使所述第二导航栏随着所述第一导航栏页面进行切换，直至所述第二导航栏退出屏幕。

结合第一方面，本发明实施例提供了第一方面的第四种可能的实施方式，其中，所述按照所述下一页面的页面类型调整所述第二导航栏透明度并设置所述第一导航栏的透明度，以使所述第二导航栏随着所述第一导航栏页面进行切换，直至所述第二导航栏退出屏幕包括：

当所述下一页面为所述第一导航栏页面时，将所述第二导航栏由半透明状态调整成不透明状态，并将所述第一导航栏由透明状态设置成不透明状态，以使所述第二导航栏随着所述第一导航栏页面进入视野，直至所述第一导航栏覆盖所述第二导航栏；

当所述下一页面为所述第二导航栏页面时，将所述第一导航栏由不透明状态设置成透明状态，并将所述第二导航栏由不透明状态调整成透明状态，以使所述第二导航栏随着所述第一导航栏页面退出屏幕。

结合第一方面，本发明实施例提供了第一方面的第五种可能的实施方式，其中，所述按照所述下一页面的页面类型调整所述第二导航栏透明度并设置所述第一导航栏的透明度，以使所述第二导航栏随着所述第一导航栏页面进行切换，直至所述第二导航栏退出屏幕还包括：

根据切换手势信号的滑动距离与手势响应区长度的比例来调整所述第二导航栏的透明度。

结合第一方面，本发明实施例提供了第一方面的第六种可能的实施方式，其中，还包括根据切换手势信号的滑动距离与手势响应区长度的比例来调整所述当前页面和所述下一页面的透明度。

结合第一方面，本发明实施例提供了第一方面的第七种可能的实施方式，其中，所述根据切换手势信号的滑动距离与手势响应区长度的比例来调整所述当前页面和所述下一页面的透明度包括：

根据所述切换手势信号的滑动距离与手势响应区长度的比例，所述当前页面由不透明状态调整为透明状态；

根据所述切换手势信号的滑动距离与手势响应区长度的比例，所述下一页面由半透明状态调整为透明状态。

结合第一方面，本发明实施例提供了第一方面的第八种可能的实施方式，其中，所述半透明状态包括透明度设置为0.3-0.5的状态。

第二方面，本发明实施例还提供导航栏过渡系统，包括：

第一获取单元，用于获取当前页面的页面类型和下一页面的页面类型，其中，所述页面类型包括第一导航栏页面和第二导航栏页面，所述第一导航栏页面显示有第一导航栏，所述第二导航栏页面不显示所述第一导航栏；

判断单元，用于判断所述下一页面的页面类型与当前页面的页面类型是否一致；

第二获取单元，用于当所述下一页面的页面类型与所述当前页面的页面类型不一致时，获取第二导航栏；

设置单元，用于将所述第二导航栏设置在所述第一导航栏页面，覆盖所述第一导航栏；

切换单元，用于将覆盖在所述第一导航栏上的所述第二导航栏随着所述第一导航栏页面进行切换，直至所述第二导航栏退出屏幕。

本发明实施例提供了导航栏过渡方法和系统，包括获取当前页面的页面类型和下一页面的页面类型，其中，页面类型包括第一导航栏页面和第二导航栏页面，第一导航栏页面显示有第一导航栏，第二导航栏页面不显示第一导航栏；判断下一页面的页面类型与当前页面的页面类型是否一致；当下一页面的页面类型与当前页面的页面类型不一致时，获取第二导航栏；将第二导航栏设置在第一导航栏页面，覆盖第一导航栏；将覆盖在第一导航栏上的第二导航栏随着第一导航栏页面进行切换，直至第二导航栏退出屏幕，采用替身导航栏，在页面切换过程中，起到平滑过渡的效果。

本发明的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的导航栏过渡方法流程图；

图2为本发明实施例提供的导航栏过渡方法中步骤S130的方法流程图；

图3为本发明实施例提供的导航栏过渡方法中步骤S160的方法流程图；

图4为本发明实施例提供的导航栏过渡系统结构示意图。

图标：10-第一获取单元；20-判断单元；30-第二获取单元；40-设置单元；50-切换单元。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

目前，有无导航栏的两种页面直接进行切换，效果较为突兀，不能起到平滑过渡的效果，基于此，本发明实施例提供的导航栏过渡方法和系统，采用替身导航栏，在页面切换过程中，起到平滑过渡的效果。

为便于对本实施例进行理解，首先对本发明实施例所公开的导航栏过渡方法进行详细介绍，

实施例一：

图1为本发明实施例提供的导航栏过渡方法流程图。

参照图1，导航栏过渡方法包括以下步骤：

步骤S110，获取当前页面的页面类型和下一页面的页面类型，其中，页面类型包括第一导航栏页面和第二导航栏页面，第一导航栏页面显示有第一导航栏，第二导航栏页面不显示第一导航栏；

步骤S120，判断下一页面的页面类型与当前页面的页面类型是否一致；

步骤S130，当下一页面的页面类型与当前页面的页面类型不一致时，获取第二导航栏；

步骤S140，将第二导航栏设置在第一导航栏页面，覆盖第一导航栏；

步骤S150，将覆盖在第一导航栏上的第二导航栏随着第一导航栏页面进行切换，直至第二导航栏退出屏幕。

具体地，实际操作过程中，当两个页面进行切换时，一个页面有导航栏，一个页面没有导航栏，如果直接切换，显示页面就会瞬间出现导航栏，而不能起到平滑的效果，从而有瑕疵，本发明实施例通过隐藏真实导航栏，而展示添加的替身导航栏，从而实现平滑过渡的目的；

这里，第一导航栏页面指的是有导航栏页面，第二导航栏页面指的是无导航栏页面，第一导航栏指的是真实导航栏，第二导航栏页面指的是替身导航栏；

进一步的，在步骤S110之前，还包括：

步骤S102，获取页面切换手势信号；

步骤S104，根据页面切换手势信号和当前页面信息获取下一页面的页面类型，其中，当前页面信息包括当前页面的页面类型。

具体地，通过监听页面切换手势信号，触发页面切换的动作，系统可预先得知各个页面的排列切换顺序，得到当前页面信息后，即可获取下一页面的页面类型；

这里，当前页面信息还包括当前页面的系统参数；

其中，页面切换手势信号包括从页面左侧向右侧滑动的一个响应事件，并不局限于此；

进一步的，如图2所示，上述实施例导航栏过渡方法中，步骤S130可采用如下步骤实现，包括：

步骤S132，当当前页面为第一导航栏页面时，截取当前页面中的第一导航栏的图片，作为第二导航栏；

步骤S134，当当前页面为第二导航栏页面时，调用预先存储的第一导航栏的图片，作为第二导航栏。

具体地，真实导航栏不能随页面一起进行切换动作，展示的效果比较生硬，因此，本发明实施例采用一个替身导航栏进行过渡作用。替身导航栏只是真实导航栏的一个替身图片，不具有真实导航栏的功能，可随着页面一起进行切换；

其中，若当前页面为无导航栏页面，从本地数据库或临时缓存中存储的真实导航栏的截图作为替身导航栏；

这里，虽然临时缓存会进行定时清理，但每次实际应用过程中都会初始化创建导航栏，这时会将真实导航栏进行截取，并存储在临时缓存中；

进一步的，上述实施例导航栏过渡方法中，步骤S150可采用如下步骤实现，包括：

步骤S152，将第二导航栏设置在第一导航栏页面，覆盖第一导航栏；

步骤S154，按照下一页面的页面类型调整第二导航栏透明度并设置第一导航栏的透明度，以使第二导航栏随着第一导航栏页面进行切换，直至第二导航栏退出屏幕。

具体地，显示视图中分为不同层级，可以理解为，一个导航栏对应一个导航栏控制器，一个视图控制器的载体是一个页面，多个视图控制器公用同一个导航栏控制器；

这里，无导航栏页面是指通过设置透明度，将真实导航栏进行隐藏的页面；

其中，调节替身导航栏的透明度，使得在切换页面的过程中，导航栏的过渡更加自然；

进一步的，上述实施例导航栏过渡方法中，步骤S154可采用如下步骤实现，包括：

步骤S1542，当下一页面为第一导航栏页面时，将第二导航栏由半透明状态调整成不透明状态，并将第一导航栏由透明状态设置成不透明状态，以使第二导航栏随着第一导航栏页面进入视野，直至第一导航栏覆盖第二导航栏；

步骤S1544，当下一页面为第二导航栏页面时，将第一导航栏由不透明状态设置成透明状态，并将第二导航栏由不透明状态调整成透明状态，以使第二导航栏随着第一导航栏页面退出屏幕。

具体地，有导航栏页面到无导航栏页面的切换过程为：

在滑动到预设无导航栏页面的过程中，真实导航栏由不透明变为透明隐藏，替身导航栏由不透明，变为透明，直至退出屏幕；

这里，无导航栏页面到有导航栏页面的切换过程为：

在滑动到预设有导航栏页面的过程中，替身导航栏由半透明状态转化为不透明，这时，真实导航栏由透明到不透明状态，直至将替身导航栏进行覆盖；

进一步的，还包括步骤S1546，根据切换手势信号的滑动距离与手势响应区长度的比例来调整第二导航栏的透明度。

具体地，通过对切换手势信号进行监听，获取切换手势信号的滑动距离，与屏幕上预设的响应区长度的比例来调整替身导航栏的透明度，实现导航栏更加自然平滑的过渡；

进一步的，本发明实施例还包括：

步骤S160，根据切换手势信号的滑动距离与手势响应区长度的比例来调整当前页面和下一页面的透明度。

具体地，在页面切换过程中，调整页面的透明度，达到淡入淡出的目的，提高用户的体验度；

进一步的，如图3所示，上述实施例导航栏过渡方法中，步骤S160可采用如下步骤实现，包括：

步骤S162，根据切换手势信号的滑动距离与手势响应区长度的比例，当前页面由不透明状态调整为透明状态；

步骤S164，根据切换手势信号的滑动距离与手势响应区长度的比例，下一页面由半透明状态调整为透明状态。

具体地，通过监听切换手势信号，来获取拖动页面的百分比，从而设置当前页面导航栏的透明度，下一个页面的透明度及拖动的进度等等,这样我们就可以通过滑动的进度来实现导航栏逐渐由透明到不透明的渐变过程和页面切换的淡入淡出效果，从而达到在使用手势拖动切换时，导航栏更加的流畅自然，能够看到导航栏和页面是一个整体的被拖动效果，而不是导航栏突兀的变化，实现平滑过渡的目的；

进一步的，半透明状态包括透明度设置为0.3-0.5的状态。

这里，半透明状态的透明度包括0.3、0.4、0.5，且不限于此；

本发明实施例提供了导航栏过渡方法，包括获取当前页面的页面类型和下一页面的页面类型，其中，页面类型包括第一导航栏页面和第二导航栏页面，第一导航栏页面显示有第一导航栏，第二导航栏页面不显示第一导航栏；判断下一页面的页面类型与当前页面的页面类型是否一致；当下一页面的页面类型与当前页面的页面类型不一致时，获取第二导航栏；将第二导航栏设置在第一导航栏页面，覆盖第一导航栏；将覆盖在第一导航栏上的第二导航栏随着第一导航栏页面进行切换，直至第二导航栏退出屏幕，采用替身导航栏，在页面切换过程中，起到平滑过渡的效果。

实施例二：

图4为本发明实施例提供的导航栏过渡系统结构示意图。

参照图4，导航栏过渡系统包括：

第一获取单元10，用于获取当前页面的页面类型和下一页面的页面类型，其中，页面类型包括第一导航栏页面和第二导航栏页面，第一导航栏页面显示有第一导航栏，第二导航栏页面不显示第一导航栏；

判断单元20，用于判断下一页面的页面类型与当前页面的页面类型是否一致；

第二获取单元30，用于当下一页面的页面类型与当前页面的页面类型不一致时，获取第二导航栏；

设置单元40，用于将第二导航栏设置在第一导航栏页面，覆盖第一导航栏；

切换单元50，用于将覆盖在第一导航栏上的第二导航栏随着第一导航栏页面进行切换，直至第二导航栏退出屏幕。

本发明实施例提供的导航栏过渡系统，与上述实施例提供的导航栏过渡方法具有相同的技术特征，所以也能解决相同的技术问题，达到相同的技术效果。

本发明实施例所提供的导航栏过渡方法以及系统的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见方法实施例，在此不再赘述。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

另外，在本发明实施例的描述中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

本发明实施例还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例提供的导航栏过渡方法的步骤。

本发明实施例还提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器运行时执行上述实施例的导航栏过渡方法的步骤。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (8)

1.一种导航栏过渡方法，其特征在于，包括：

获取当前页面的页面类型和下一页面的页面类型，其中，所述页面类型包括第一导航栏页面和第二导航栏页面，所述第一导航栏页面显示有第一导航栏，所述第二导航栏页面不显示所述第一导航栏；

判断所述下一页面的页面类型与当前页面的页面类型是否一致；

当所述下一页面的页面类型与所述当前页面的页面类型不一致时，获取第二导航栏；

将所述第二导航栏设置在所述第一导航栏页面，覆盖所述第一导航栏；

将覆盖在所述第一导航栏上的所述第二导航栏随着所述第一导航栏页面进行切换，直至所述第二导航栏退出屏幕。

2.根据权利要求1所述的导航栏过渡方法，其特征在于，在所述获取当前页面的页面类型和下一页面的页面类型之前，还包括：

获取页面切换手势信号；

根据所述页面切换手势信号和当前页面信息获取下一页面的页面类型，其中，所述当前页面信息包括所述当前页面的页面类型。

3.根据权利要求1所述的导航栏过渡方法，其特征在于，所述当所述下一页面的页面类型与所述当前页面的页面类型不一致时，获取第二导航栏包括：

当所述当前页面为所述第一导航栏页面时，截取所述当前页面中的所述第一导航栏的图片，作为所述第二导航栏；

当所述当前页面为所述第二导航栏页面时，调用预先存储的所述第一导航栏的图片，作为所述第二导航栏。

4.根据权利要求1所述的导航栏过渡方法，其特征在于，所述将覆盖在所述第一导航栏上的所述第二导航栏随着所述第一导航栏页面进行切换，直至所述第二导航栏退出屏幕包括：

将所述第二导航栏设置在所述第一导航栏页面，覆盖所述第一导航栏；

按照所述下一页面的页面类型调整所述第二导航栏透明度并设置所述第一导航栏的透明度，以使所述第二导航栏随着所述第一导航栏页面进行切换，直至所述第二导航栏退出屏幕。

5.根据权利要求4所述的导航栏过渡方法，其特征在于，所述按照所述下一页面的页面类型调整所述第二导航栏透明度并设置所述第一导航栏的透明度，以使所述第二导航栏随着所述第一导航栏页面进行切换，直至所述第二导航栏退出屏幕包括：

当所述下一页面为所述第一导航栏页面时，将所述第二导航栏由半透明状态调整成不透明状态，并将所述第一导航栏由透明状态设置成不透明状态，以使所述第二导航栏随着所述第一导航栏页面进入视野，直至所述第一导航栏覆盖所述第二导航栏；

当所述下一页面为所述第二导航栏页面时，将所述第一导航栏由不透明状态设置成透明状态，并将所述第二导航栏由不透明状态调整成透明状态，以使所述第二导航栏随着所述第一导航栏页面退出屏幕。

6.根据权利要求4所述的导航栏过渡方法，其特征在于，所述按照所述下一页面的页面类型调整所述第二导航栏透明度并设置所述第一导航栏的透明度，以使所述第二导航栏随着所述第一导航栏页面进行切换，直至所述第二导航栏退出屏幕还包括：

根据切换手势信号的滑动距离与手势响应区长度的比例来调整所述第二导航栏的透明度。

7.根据权利要求5所述的导航栏过渡方法，其特征在于，所述半透明状态包括透明度设置为0.3-0.5的状态。

8.一种导航栏过渡系统，其特征在于，包括：

第一获取单元，用于获取当前页面的页面类型和下一页面的页面类型，其中，所述页面类型包括第一导航栏页面和第二导航栏页面，所述第一导航栏页面显示有第一导航栏，所述第二导航栏页面不显示所述第一导航栏；

判断单元，用于判断所述下一页面的页面类型与当前页面的页面类型是否一致；

第二获取单元，用于当所述下一页面的页面类型与所述当前页面的页面类型不一致时，获取第二导航栏；

设置单元，用于将所述第二导航栏设置在所述第一导航栏页面，覆盖所述第一导航栏；

切换单元，用于将覆盖在所述第一导航栏上的所述第二导航栏随着所述第一导航栏页面进行切换，直至所述第二导航栏退出屏幕。

Images