CN104216606A - 基于安卓操作系统的WebView翻页特效方法 - Google Patents

Abstract

本发明提供一种基于安卓操作系统的WebView翻页特效方法，包括：截取显示WebView当前页面的WebView当前界面，生成一张WebView当前界面的界面位图；用界面位图覆盖WebView当前界面，将WebView当前界面拼接到界面位图的端部位置，然后界面静止一定的时间，在该时间WebView加载部分目标页面，得到WebView新界面；界面位图和WebView新界面整体平移，界面位图逐渐移离屏幕，WebView新界面一边加载目标页面一边逐渐移动，直至显示目标页面的WebView新界面完全显示在屏幕上。切换过程中不会出现白屏现象，具有操作方便、用户体验好的优点。

Description

基于安卓操作系统的WebView翻页特效方法

技术领域

本发明属于信息处理技术领域，具体涉及一种基于安卓操作系统的WebView翻页特效方法。

背景技术

现有使用安卓操作系统的设备通过WebView显示网页信息时，通常采用以下两种技术：(1)WebView不分页，即：将所有相关内容全部在同一页面展示。该种方法存在的主要问题为：首先，由于需要在同一页面展示所有内容，因此，必须通过网络下载所有内容，一方面，从互联网用户特征考虑，用户在浏览网页内容时候，只有对自己特别感兴趣的内容，才会查阅所有内容，大多数情况都只是查阅概要，因此，加载全部内容会浪费流量；另一方面，下载所有内容，会延长加载时间，延长了用户等待时间。其次，在同一页面展示所有内容时，页面长度过长，当用户滑到底端，再需要查阅顶端内容时，需要滑动页面较长时间，具有查看不方便的问题。(2)传统页面切换方式：该种方式只是简单的先清空WebView原界面，然后再加载新界面。因此，界面切换没有自然的过渡效果，具有页面过渡比较生硬的问题；另外，在新界面加载显示之前，屏幕界面空白，降低了用户的体验。另外，该种页面切换方式，必须在界面上添加某个链接或者按钮，只有点击了链接或者按钮后才能实现切换，具有操作不方便的问题。

发明内容

针对现有技术存在的缺陷，本发明提供一种基于安卓操作系统的WebView翻页特效方法，采用原界面位图和WebView新界面整体平移的方式进行界面切换，切换过程中不会出现白屏现象；采用动画效果，从而提高过渡的自然美观性；使用翻页手势的方式进行界面切换，具有操作方便的优点；具有操作方便、用户体验好的优点。

本发明采用的技术方案如下：

本发明提供一种基于安卓操作系统的WebView翻页特效方法，包括以下步骤：

S1，判断WebView当前页面是否同时符合以下三个翻页条件：第一，WebView当前页面位于端部位置；第二，存在与所述端部位置相邻的目标页面；第三，存在当所述当前页面翻页到所述目标页面的翻页手势；如果符合，则执行S2，否则，保持所述WebView当前页面，不执行后续翻页流程；

S2，判断所述翻页手势是否达到预设要求，如果符合，则执行S3；否则，恢复显示所述WebView当前页面，不执行后续翻页流程；

S3，截取显示所述WebView当前页面的WebView当前界面，生成一张所述WebView当前界面的界面位图；

S4，用所述界面位图覆盖所述WebView当前界面，将所述WebView当前界面拼接到所述界面位图的所述端部位置，然后界面静止一定的时间，在该时间所述WebView加载部分所述目标页面，得到WebView新界面；

S5，所述界面位图和所述WebView新界面整体平移，所述界面位图逐渐移离屏幕，所述WebView新界面一边加载所述目标页面一边逐渐移动，直至显示所述目标页面的WebView新界面完全显示在所述屏幕上。

优选的，S1中，所述三个翻页条件具体为：

所述端部位置包括所述WebView当前页面的页面顶端、页面底端、页面左端和页面右端；

与所述端部位置相邻的目标页面具体为：

当位于所述页面顶端时，所述目标页面为前一个页面；

当位于所述页面底端时，所述目标页面为后一个页面；

当位于所述页面左端时，所述目标页面为前一个页面；

当位于所述页面右端时，所述目标页面为后一个页面；

所述当前页面翻页到所述目标页面的翻页手势具体为：

当位于所述页面顶端时，所述翻页手势为下拉手势；

当位于所述页面底端时，所述翻页手势为上拉手势；

当位于所述页面左端时，所述翻页手势为右拉手势；

当位于所述页面右端时，所述翻页手势为左拉手势。

优选的，S2中，判断所述翻页手势是否达到预设要求，具体为：

当位于所述页面顶端时，判断所述下拉手势的下拉距离是否达到阈值；

当位于所述页面底端时，判断所述上拉手势的上拉距离是否达到阈值；

当位于所述页面左端时，判断所述右拉手势的右拉距离是否达到阈值；

当位于所述页面右端时，判断所述左拉手势的左拉距离是否达到阈值。

优选的，S5中，所述界面位图和所述WebView新界面整体平移具体为：

所述界面位图和所述WebView新界面以动画效果的显示方式进行整体平移。

优选的，所述动画效果为先加速后减速的平移动画效果。

本发明的有益效果如下：

本发明提供一种基于安卓操作系统的WebView翻页特效方法，具有以下优点：(1)采用原界面位图和WebView新界面整体平移的方式进行界面切换，切换过程中不会出现白屏现象；(2)采用动画效果，从而提高过渡的自然美观性；(3)使用翻页手势的方式进行界面切换，具有操作方便的优点。

附图说明

图1为本发明提供的基于安卓操作系统的WebView翻页特效方法的流程示意图。

具体实施方式

以下结合附图对本发明进行详细说明：

如图1所示，本发明提供一种基于安卓操作系统的WebView翻页特效方法，包括以下步骤：

S1，判断WebView当前页面是否同时符合以下三个翻页条件：第一，WebView当前页面位于端部位置；第二，存在与所述端部位置相邻的目标页面；第三，存在当所述当前页面翻页到所述目标页面的翻页手势；如果符合，则执行S2，否则，保持所述WebView当前页面，不执行后续翻页流程；

本步骤中，目标页面即为需要翻页定位到的页面。由于端部位置包括以下四种情况：WebView当前页面的页面顶端、页面底端、页面左端和页面右端；因此，与端部位置相邻的目标页面具体区分以下四种情况：

当位于页面顶端时，目标页面为前一个页面；

当位于页面底端时，目标页面为后一个页面；

当位于页面左端时，目标页面为前一个页面；

当位于页面右端时，目标页面为后一个页面；

与上述四种情况相应，当前页面翻页到目标页面的翻页手势根据用户使用习惯也区分为以下四种情况：

当位于页面顶端时，翻页手势为下拉手势；

当位于页面底端时，翻页手势为上拉手势；

当位于页面左端时，翻页手势为右拉手势；

当位于页面右端时，翻页手势为左拉手势。

以将WebView当前页面滑动到顶端为例，判断与端部位置相邻的目标页面即为：判断前页是否还存在内容，如果没有内容，则页面无法下拉；如果还有内容，则控制WebView的位置，使得WebView可以继续下拉，根据需要，还可以显示“下拉进入上一页”的提示信息。

本步骤中，当需要翻页时，不需要设置额外的页面切换按钮即可，从而简化了配置复杂度，方便用户使用。

S2，判断所述翻页手势是否达到预设要求，如果符合，则执行S3；否则，恢复显示所述WebView当前页面，不执行后续翻页流程；

与上述四种情况相应，判断翻页手势是否达到预设要求区分为以下四种情况：

当位于页面顶端时，判断下拉手势的下拉距离是否达到阈值；

当位于页面底端时，判断上拉手势的上拉距离是否达到阈值；

当位于页面左端时，判断右拉手势的右拉距离是否达到阈值；

当位于页面右端时，判断左拉手势的左拉距离是否达到阈值。

实际应用中，以页面下拉进入上一页为例，当翻页手势符合预设要求时，可以显示“松手进入上一页”的提示信息，从而方便用户使用。

S3，截取显示所述WebView当前页面的WebView当前界面，生成一张所述WebView当前界面的界面位图；

S4，用所述界面位图覆盖所述WebView当前界面，将所述WebView当前界面拼接到所述界面位图的所述端部位置，然后界面静止一定的时间，在该时间所述WebView加载部分所述目标页面，得到WebView新界面；

本步骤中，界面静止一定时间的主要作用为：一方面，在进行后续页面平移操作时，使动画显示更自然，连贯性更好；另一方面，在该段时间内，WebView可以加载部分翻页页面，当继续后续的操作时，防止出现白屏现象。

S5，所述界面位图和所述WebView新界面整体平移，所述界面位图逐渐移离屏幕，所述WebView新界面一边加载所述目标页面一边逐渐移动，直至显示所述目标页面的WebView新界面完全显示在所述屏幕上。

界面位图和WebView新界面整体平移时，为提高用户的使用体验，可以使界面位图和WebView新界面以动画效果的显示方式进行整体平移。动画显示效果可以为平移动画效果。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视本发明的保护范围。

Claims (5)

1.一种基于安卓操作系统的WebView翻页特效方法，其特征在于，包括以下步骤：

S1，判断WebView当前页面是否同时符合以下三个翻页条件：第一，WebView当前页面位于端部位置；第二，存在与所述端部位置相邻的目标页面；第三，存在当所述当前页面翻页到所述目标页面的翻页手势；如果符合，则执行S2，否则，保持所述WebView当前页面，不执行后续翻页流程；

S2，判断所述翻页手势是否达到预设要求，如果符合，则执行S3；否则，恢复显示所述WebView当前页面，不执行后续翻页流程；

S3，截取显示所述WebView当前页面的WebView当前界面，生成一张所述WebView当前界面的界面位图；

S4，用所述界面位图覆盖所述WebView当前界面，将所述WebView当前界面拼接到所述界面位图的所述端部位置，然后界面静止一定的时间，在该时间所述WebView加载部分所述目标页面，得到WebView新界面；

S5，所述界面位图和所述WebView新界面整体平移，所述界面位图逐渐移离屏幕，所述WebView新界面一边加载所述目标页面一边逐渐移动，直至显示所述目标页面的WebView新界面完全显示在所述屏幕上。

2.根据权利要求1所述的基于安卓操作系统的WebView翻页特效方法，其特征在于，S1中，所述三个翻页条件具体为：

所述端部位置包括所述WebView当前页面的页面顶端、页面底端、页面左端和页面右端；

与所述端部位置相邻的目标页面具体为：

当位于所述页面顶端时，所述目标页面为前一个页面；

当位于所述页面底端时，所述目标页面为后一个页面；

当位于所述页面左端时，所述目标页面为前一个页面；

当位于所述页面右端时，所述目标页面为后一个页面；

所述当前页面翻页到所述目标页面的翻页手势具体为：

当位于所述页面顶端时，所述翻页手势为下拉手势；

当位于所述页面底端时，所述翻页手势为上拉手势；

当位于所述页面左端时，所述翻页手势为右拉手势；

当位于所述页面右端时，所述翻页手势为左拉手势。

3.根据权利要求2所述的基于安卓操作系统的WebView翻页特效方法，其特征在于，S2中，判断所述翻页手势是否达到预设要求，具体为：

当位于所述页面顶端时，判断所述下拉手势的下拉距离是否达到阈值；

当位于所述页面底端时，判断所述上拉手势的上拉距离是否达到阈值；

当位于所述页面左端时，判断所述右拉手势的右拉距离是否达到阈值；

当位于所述页面右端时，判断所述左拉手势的左拉距离是否达到阈值。

4.根据权利要求1所述的基于安卓操作系统的WebView翻页特效方法，其特征在于，S5中，所述界面位图和所述WebView新界面整体平移具体为：

所述界面位图和所述WebView新界面以动画效果的显示方式进行整体平移。

5.根据权利要求4所述的基于安卓操作系统的WebView翻页特效方法，其特征在于，所述动画效果为先加速后减速的平移动画效果。