CN108427726B

CN108427726B - 一种刷新方法和装置

Info

Publication number: CN108427726B
Application number: CN201810146537.7A
Authority: CN
Inventors: 蔡雪建
Original assignee: Beijing Dajia Internet Information Technology Co Ltd
Current assignee: Beijing Dajia Internet Information Technology Co Ltd
Priority date: 2018-02-12
Filing date: 2018-02-12
Publication date: 2020-10-02
Anticipated expiration: 2038-02-12
Also published as: WO2019153904A1; CN108427726A

Abstract

本发明实施例提供了一种刷新方法和装置，该方法包括：当检测到刷新操作时，向服务器申请业务数据；当等待所述业务数据时，在界面中绘制刷新图形，所述刷新图形包括中空的线条图、以及、在所述线条图中循环排列多段相邻相交的线条；旋转所述刷新图形并扩大多段所述线条合围的区域；当接收到所述业务数据时，取消显示所述刷新图形。通过代码绘制简单的线条实现了刷新动画，无需应用多帧图片，在刷新时操作流畅，大大提高了操作的效率，减少了卡顿的现象，同时，无需内置多帧图片，大大减少了应用的体积。

Description

一种刷新方法和装置

技术领域

本发明涉及计算机处理的技术领域，特别是涉及一种刷新方法和一种刷新装置。

背景技术

近年来，随着网络科技的高速发展，网络上的信息量急剧增加，例如，新闻、图片、小说、短视频，等等。

某些网站、平台对这些信息进行汇聚，将同属一类的信息推送至应用，展示给用户。

为了避免推送的流量过大，一般推送少量信息给应用，用户浏览完毕之后，若想继续浏览信息，则触发刷新操作，向网站、平台请求新一批的信息。

在请求信息期间，客户端通常展示刷新动画。

目前，这些刷新动画多是由多帧图片组成，加载图片的效率较低，容易发生卡顿，同时，图片的体积较大，导致应用的体积较大。

发明内容

本发明实施例提出了一种刷新方法和装置，以解决展示刷新动画时、加载多帧图片的效率较低，应用的体积较大的问题。

依据本发明的一个方面，提供了一种刷新方法，包括：

当检测到刷新操作时，向服务器申请业务数据；

当等待所述业务数据时，在界面中绘制刷新图形，所述刷新图形包括中空的线条图、以及、在所述线条图中循环排列多段相邻相交的线条；

旋转所述刷新图形并扩大多段所述线条合围的区域；

当接收到所述业务数据时，取消显示所述刷新图形。

可选地，所述在界面中绘制刷新图形，包括：

在界面中绘制中空的线条图；

在所述线条图上确定一端点，并基于所述端点在所述线条图中绘制线条；

多次复制所述线条并在所述线条图中按照多个预设的角度进行旋转，以使旋转后的线条的一端点位于所述线条图上，另一端点位于相邻的线条上。

可选地，所述旋转所述刷新图形并扩大多段所述线条合围的区域，包括：

以每段线条位于所述线条图上的一端点作为基点，将所述线条的另一端点从相邻的线条上移动至所述线条图上；

将每段线条的两个端点保持在所述线条图上、旋转并缩短每段线条。

可选地，所述以每段线条位于所述线条图上的一端点作为基点，将所述线条的另一端点从相邻的线条上移动至所述线条图上，包括：

以每段线条位于所述线条图上的一端点作为基点，调整每段线条的斜率；

计算每段线条调整斜率之后、位于相邻的线条上的另一端点。

可选地，所述将每段线条的两个端点保持在所述线条图上、旋转并缩短每段线条，包括：

旋转每条线段、并以每段线条位于所述线条图上的一端点作为基点，调整每段线条的斜率；

计算所述线条调整斜率之后、位于所述线条图上的另一端点。

可选地，所述旋转所述刷新图形并扩大多段所述线条合围的区域，还包括：

按照预设的角度旋转多段所述线条。

将所述线条图进行渐变处理；

旋转渐变处理之后的线条图。

根据本发明的另一方面，提供了一种刷新装置，包括：

业务数据申请模块，用于当检测到刷新操作时，向服务器申请业务数据；

刷新图形绘制模块，用于当等待所述业务数据时，在界面中绘制刷新图形，所述刷新图形包括中空的线条图、以及、在所述线条图中循环排列多段相邻相交的线条；

动态处理模块，用于旋转所述刷新图形并扩大多段所述线条合围的区域；

刷新图形取消模块，用于当接收到所述业务数据时，取消显示所述刷新图形。

可选地，所述刷新图形绘制模块包括：

线条图绘制子模块，用于在界面中绘制中空的线条图；

线条绘制子模块，用于在所述线条图上确定一端点，并基于所述端点在所述线条图中绘制线条；

复制旋转子模块，用于多次复制所述线条并在所述线条图中按照多个预设的角度进行旋转，以使旋转后的线条的一端点位于所述线条图上，另一端点位于相邻的线条上。

可选地，所述动态处理模块包括：

线条移动子模块，用于以每段线条位于所述线条图上的一端点作为基点，将所述线条的另一端点从相邻的线条上移动至所述线条图上；

线条缩短子模块，用于将每段线条的两个端点保持在所述线条图上、旋转并缩短每段线条。

可选地，所述线条移动子模块包括：

第一斜率调整单元，用于以每段线条位于所述线条图上的一端点作为基点，调整每段线条的斜率；

第一端点计算单元，用于计算每段线条调整斜率之后、位于相邻的线条上的另一端点。

可选地，所述线条缩短子模块包括：

第二斜率调整单元，用于旋转每条线段、并以每段线条位于所述线条图上的一端点作为基点，调整每段线条的斜率；

第二端点计算单元，用于计算所述线条调整斜率之后、位于所述线条图上的另一端点。

可选地，所述动态处理模块还包括：

线条旋转子模块，用于按照预设的角度旋转多段所述线条。

可选地，所述动态处理模块还包括：

渐变处理子模块，用于将所述线条图进行渐变处理；

线条图旋转子模块，用于旋转渐变处理之后的线条图。

本发明实施例包括以下优点：

本发明实施例当检测到刷新操作时，向服务器申请业务数据，在等待业务数据时，在界面中绘制刷新图形，其中，刷新图形包括中空的线条图、以及、在线条图中循环排列多段相邻相交的线条，旋转刷新图形并缩小多段线条，当接收到业务数据时，取消显示刷新图形，通过代码绘制简单的线条实现了刷新动画，无需应用多帧图片，在刷新时操作流畅，大大提高了操作的效率，减少了卡顿的现象，同时，无需内置多帧图片，大大减少了应用的体积。

附图说明

图1是本发明一个实施例的一种刷新方法的步骤流程图；

图2A至图2C是本发明一个实施例的一种刷新操作的示例图；

图3A至图3F是本发明一个实施例的一种刷新图形的处理示例图；

图4是本发明一个实施例的一种刷新装置的结构框图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

参照图1，示出了本发明一个实施例的一种刷新方法的步骤流程图，具体可以包括如下步骤：

步骤101，当检测到刷新操作时，向服务器申请业务数据。

在具体实现中，本发明实施例可以应用在各种可执行刷新操作的应用中，例如，短视频应用、新闻应用、搜索应用，等等。

这些应用可以安装在移动终端中，例如，手机、平板电脑、个人数字助理、穿戴设备(如眼镜、手表等)等等。

这些移动终端的操作***可以包括Android(安卓)、IOS、Windows Phone、Windows等等，本发明实施例对此不加以限制。

以短视频应用为例，如图2A所示，在移动终端中安装短视频应用，在该短视频应用的界面中，以瀑布流等形式展示多个长度为10秒至1分钟不等的短视频的封面图，用户点击某个封面图，则可以加载该封面图所属的短视频，供用户浏览。

如图2B所示，若用户对当前界面中的短视频不感兴趣或者已经浏览全部的短视频，则可以通过下拉操作(刷新操作)，刷新新的短视频。

当然，除了下拉操作之外，还可以采用其他方式作为刷新操作，例如，点击刷新控件、摇一摇，等等，本发明实施例对此不加以限制。

若应用检测到刷新操作，则可以向相应的服务器请求新的业务数据，例如，短视频、新闻数据、图片数据，等等。

步骤102，当等待所述业务数据时，在界面中绘制刷新图形。

应用发送申请业务数据的请求、服务器查询并返回业务数据，需要花费一定的处理时间，在此处理时间中，应用一方面等待业务数据，另一方面在界面中绘制刷新图形，提示用户正在处于刷新中。

例如，如图2所示，在短视频应用的界面中展示多个短视频的封面图，这些短视频的图封面随用户的下拉操作而往下滑动，在界面的上方空出一个区域，在该区域可以绘制刷新图形、展示刷新动画。

在此示例中，该区域初始可以是用户不可见的区域，随之短视频的封面图往下滑动，逐渐转变为用户可见的区域，呈现逐渐拉出的动画。

在本发明实施例中，刷新图形包括中空的线条图、以及、在线条图中循环排列多段相邻相交的线条。

其中，该线条图可以为圆形、椭圆形等封闭图形，也可以为其他开放图形，本发明实施例对此不加以限制。

该线条图的中间形成一个空的区域，可以在该区域中绘制多段线条。

而绘制的多段线条循环排列，呈圆环状，相邻的线条相交，使得中间合围一个新的区域，初始时，由于各段线条相邻相交，因此，该区域为封闭区域。

例如，第一条线条与第二条线条相交、第二条线条与第三条线条相交、第三条线条与第四条线条相交……最后一条线条与第一条线条相交。

在本发明的一个实施例中，步骤102可以包括如下子步骤：

子步骤S11，在界面中绘制中空的线条图。

子步骤S12，在所述线条图上确定一端点，并基于所述端点在所述线条图中绘制线条。

子步骤S13，多次复制所述线条并在所述线条图中按照多个预设的角度进行旋转，以使旋转后的线条的一端点位于所述线条图上，另一端点位于相邻的线条上。

在具体实现中，应用在界面上设定了展示的区域，在该区域中绘制中空的线条图。

在该线条图上的某点作为端点，按照一定的斜率、长度绘制在该线条图中空的区域中绘制线条，如线段、弧线、折线等等。

多次复制该线条之后，将该线条旋转多个角度，即可获得多条线条，使得每条线条的形状、长度相同。

当然，如果旋转线条之后，端点并不位于线条图及相邻的线条上，则可以对该线条进行伸缩等操作，使得其端点位于线条图及相邻的线条。上

例如，如图3A所示，绘制圆形的线条图，在该线条图上绘制一段线段作为线条，复制该线段后，分别旋转60°、120°、180°、240°、300°，共获得6条交错的线段，合围一个中空的区域。

步骤103，旋转所述刷新图形并扩大多段所述线条合围的区域。

在具体实现中，若在界面中绘制了刷新图形，则可以对其进行旋转，同时，逐渐缩小多段线条，给用户呈现逐渐增大多段线条合围的图形，从而实现刷新动画。

在本发明的一个实施例中，步骤103可以包括如下子步骤：

子步骤S21，按照预设的角度旋转多段所述线条。

在具体实现中，低于下拉等刷新场景，在绘制了刷新图形之后，则可以按照一定的角度旋转线条，呈现刷新动画，衔接缩小多段线条的动画，提高用户体验，此阶段耗费的时间可占刷新动画的总时间的第一比例，如65％。

例如，如图3A所示，可以围绕圆形的圆心顺时针旋转全部的线段，从假设某条线段初始为15°，则可以将其旋转至135°。

是因为下拉刷新控件，在全部展示给用户之前，维护一定的旋转动效，使得刷新动画连贯，以给用户比较好的体验。

子步骤S22，以每段线条位于所述线条图上的一端点作为基点，将所述线条的另一端点从相邻的线条上移动至所述线条图上。

在本发明实施例中，对于每段线条，可以以该线条位于线条图上的一端点作为基点，保持该端点在线条图上不动，旋转线条，使得线条的另一端点从相邻的线条上移动至线条图上，此时，该线条的另一端点与相邻线条的一端点重合。

例如，如图3B所示，对于每一段线段，以其初始在圆形上的端点为基点固定不动，将另一端点在相邻的线条上进行滑动，直至滑动到圆形上，与相邻的线段位于圆形上的端点重合。

此阶段耗费的时间可占刷新动画的总时间的第二比例，且，第二比例小于第一比例，如32％。

在本发明的一个实施例中，子步骤S22进一步可以包括如下子步骤：

子步骤S221，以每段线条位于所述线条图上的一端点作为基点，调整每段线条的斜率。

子步骤S221，计算每段线条调整斜率之后、位于相邻的线条上的另一端点。

在本发明实施例中，如果线条为均匀分布，则可以以每段线条位于线条图上的一端点作为基点，固定不动，通过不断的修改每段的斜率，也就是间接修改线段与水平方向的夹角，重新计算另一端点在相邻线条上的位置，则可以定位线条的位置，以此实现线条的移动，直至另一端端点移动至线条图上、与相邻的线条位于圆形上的端点重合。

例如，如图3C所示，在移动终端中屏幕中以圆形的圆心作为原点建立坐标系，其中，x轴方向是从左往右，y轴方向是从上往下。

在圆形中具有两段线段l₁与l₂(为方便表示，绘制成直线)，l₂为l₁顺时针旋转60°获得，其中，l₁位于圆形的端点为A(0，-R)，与水平方向的夹角为θ，l₂位于圆形的端点为B

与水平方向的夹角为(θ+60°)。

拟合l₁与l₂的函数式，即y＝kx+b，其中，k为斜率，即tan(θ)，b是常数，代入上述参数，则可以获得如下关系式：

y＝tan(θ)x-R

由于l₁的另一端点位于l₂上，联合上述关系式进行求解，则可以获得l₁的另一端点的坐标：

在此关系式中，l₁的另一端点的坐标与θ(与水平方向的夹角)相关，因此，可以通过不断的修改l₁的斜率，也就是间接修改l₁与水平方向的夹角，以此实现l₁的另一端点在l₂上的移动。

子步骤S23，将每段线条的两个端点保持在所述线条图上、旋转并缩短每段线条。

在本发明实施例中，在保持线条的两个端点位于线条图上的情况下，可以旋转每段线条，同时，缩短每段线条的长度，呈现不断缩短线条，直至消失、保留线条图的刷新动画。

此时，由于相邻线条并不相交，因此，该多段线条合围的区域为开放区域。

例如，如图3D和图3E所示，在保持每条线段的两个端点位于圆形上的情况下，旋转每条线段，同时，缩短每条线段不断缩小长度，直至每条线段的长度为0，在界面上保留圆形。

此阶段耗费的时间可占刷新动画的总时间的第三比例，且，第三比例小于第二比例，如3％。

在本发明的一个实施例中，子步骤S23进一步可以包括如下子步骤：

子步骤S231，旋转每条线段、并以每段线条位于所述线条图上的一端点作为基点，调整每段线条的斜率。

子步骤S232，计算所述线条调整斜率之后、位于所述线条图上的另一端点。

在本发明实施例中，可以以每段线条位于线条图上的一端点作为基点，通过不断的修改每段的斜率，也就是间接修改线段与水平方向的夹角，重新计算另一端点在线条图上的位置，以此定位线条的位置，并且，不断缩短线条的长度，直至长度为0、两个端点重合。

与此同时，将线条旋转一定的角度(如30°)，呈现以线条重点为基准点，不断缩短线条，直至消失的刷新动画。

例如，如图3C所示，在移动终端中屏幕中以圆形的圆心作为原点建立坐标系，圆形中的线段l₁的两个端点A(0，-R)、B(x，y)位于圆形上，与水平方向的夹角为θ。

拟合l₁的函数式，即y＝kx+b，其中，k为斜率，即tan(θ)，b是常数，代入上述参数，则可以获得如下关系式：

y＝tan(θ)x-R

x²+y²＝R²

联合上述关系式进行求解，则可以获得l₁的另一端点的坐标：

在此关系式中，l₁的另一端点的坐标与θ(与水平方向的夹角)相关，因此，可以通过不断的修改l₁的斜率，也就是间接修改l₁与水平方向的夹角，以此实现l₁的另一端点圆形上的移动。

子步骤S24，将所述线条图进行渐变处理。

子步骤S25，旋转渐变处理之后的线条图。

对于线条图，则可以对其颜色、亮度、对比度等进行渐变处理，一直旋转渐变处理之后的线条度，等待业务数据。

在Android(安卓)***中，对于颜色的渐变处理，可以设置对应的SweepGradient(扫描渲染)参数到Paint实现渐变处理，并且绘制线条图不断以某个点(如圆心)为基准点进行旋转

例如，如图3F所示，以圆环为中心，设置圆环的渐变色从#ffababab到#0dababab，并且绘制圆形不断以圆心为基准点进行旋转。

步骤104，当接收到所述业务数据时，取消显示所述刷新图形。

如果应用接收到服务器返回的业务数据，则可以取消显示刷新图形，同时，按照界面的设定展示新的业务数据。

例如，如图2C所示，若短视频应用接收到服务器返回的新的短视频，则可以取消刷新动画，同时，将新的短视频的排序在原有的短视频之前，在界面中，将短视频的封面图往上滑动，直至到达可见区域的顶端，其中，新的短视频的封面图排序在最前的位置展示。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。

参照图4，示出了本发明一个实施例的一种刷新装置的结构框图，具体可以包括如下模块：

业务数据申请模块401，用于当检测到刷新操作时，向服务器申请业务数据；

刷新图形绘制模块402，用于当等待所述业务数据时，在界面中绘制刷新图形，所述刷新图形包括中空的线条图、以及、在所述线条图中循环排列多段相邻相交的线条；

动态处理模块403，用于旋转所述刷新图形并扩大多段所述线条合围的区域；

刷新图形取消模块404，用于当接收到所述业务数据时，取消显示所述刷新图形。

在本发明的一个实施例中，所述刷新图形绘制模块402包括：

线条图绘制子模块，用于在界面中绘制中空的线条图；

在本发明的一个实施例中，所述动态处理模块403包括：

在本发明的一个实施例中，所述线条移动子模块包括：

在本发明的一个实施例中，所述线条缩短子模块包括：

在本发明的一个实施例中，所述动态处理模块403还包括：

线条旋转子模块，用于按照预设的角度旋转多段所述线条。

在本发明的一个实施例中，所述动态处理模块403还包括：

渐变处理子模块，用于将所述线条图进行渐变处理；

线条图旋转子模块，用于旋转渐变处理之后的线条图。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本发明实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明实施例是参照根据本发明实施例的方法、终端设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本发明所提供的一种刷新方法和一种刷新装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims

1.一种刷新方法，其特征在于，包括：

当检测到刷新操作时，向服务器申请业务数据；

旋转所述刷新图形并扩大多段所述线条合围的区域；

当接收到所述业务数据时，取消显示所述刷新图形；

其中，所述旋转所述刷新图形并扩大多段所述线条合围的区域，包括：

旋转所述刷新图形并缩小所述多段相邻相交的线条。

2.根据权利要求1所述的方法，其特征在于，所述在界面中绘制刷新图形，包括：

在界面中绘制中空的线条图；

3.根据权利要求1或2所述的方法，其特征在于，所述旋转所述刷新图形并扩大多段所述线条合围的区域，包括：

4.根据权利要求3所述的方法，其特征在于，所述以每段线条位于所述线条图上的一端点作为基点，将所述线条的另一端点从相邻的线条上移动至所述线条图上，包括：

5.根据权利要求3所述的方法，其特征在于，所述将每段线条的两个端点保持在所述线条图上、旋转并缩短每段线条，包括：

6.根据权利要求3所述的方法，其特征在于，所述旋转所述刷新图形并扩大多段所述线条合围的区域，还包括：

按照预设的角度旋转多段所述线条。

7.根据权利要求3所述的方法，其特征在于，所述旋转所述刷新图形并扩大多段所述线条合围的区域，还包括：

将所述线条图进行渐变处理；

旋转渐变处理之后的线条图。

8.一种刷新装置，其特征在于，包括：

刷新图形取消模块，用于当接收到所述业务数据时，取消显示所述刷新图形；

其中，所述动态处理模块，具体用于：

旋转所述刷新图形并缩小所述多段相邻相交的线条。

9.根据权利要求8所述的装置，其特征在于，所述刷新图形绘制模块包括：

线条图绘制子模块，用于在界面中绘制中空的线条图；

10.根据权利要求8或9所述的装置，其特征在于，所述动态处理模块包括：

11.根据权利要求10所述的装置，其特征在于，所述线条移动子模块包括：

12.根据权利要求10所述的装置，其特征在于，所述线条缩短子模块包括：

13.根据权利要求10所述的装置，其特征在于，所述动态处理模块还包括：

线条旋转子模块，用于按照预设的角度旋转多段所述线条。

14.根据权利要求10所述的装置，其特征在于，所述动态处理模块还包括：

渐变处理子模块，用于将所述线条图进行渐变处理；

线条图旋转子模块，用于旋转渐变处理之后的线条图。