CN108388465B - 动态形变开关组件的实现方法、装置及终端 - Google Patents

Abstract

本发明提供一种动态形变开关组件的实现方法，该方法包括：接收用户触发开关组件的指令；响应所述指令，获取所述开关组件所显示图形的当前坐标和变化终止坐标；获取控制图形变化的参数；根据所述参数、当前坐标和变化终止坐标，计算图形的坐标变化过程；根据坐标变化过程生成所述开关组件变化过程的图形。本发明提供的动态形变开关组件的实现方法能够生成可实现打开或关闭某一应用界面功能的动态形变开关组件，在提高软件界面交互设计新颖性的同时还能够提高用户交互顺畅性，进而给用户留下深刻印象并提高应用的使用满意度，有效增强了用户对软件的粘性。

Description

动态形变开关组件的实现方法、装置及终端

技术领域

本发明涉及计算机技术领域，具体而言，本发明涉及一种动态形变开关组件的实现方法、装置及终端。

背景技术

随着计算机技术的不断发展，各种应用软件层出不穷，能够满足用户在不同领域、不同问题上的应用需求。然而，由于现有的应用软件数量庞大，各类软件界面及其交互方式设计雷同，面对千篇一律的设计，用户容易产生审美疲劳且应用的使用体验满意度较低。

现有技术中，为了使应用软件的软件界面及其交互方式区分于其他应用软件，往往会在应用软件中设置带有特效的界面交互方式以吸引用户关注，但其局限性在于，此类应用软件的界面交互设计仅为了吸引用户的注意力，往往无法兼具新颖性和实用性，无法给用户留下深刻印象且提高应用的使用满意度，用户对应用软件的粘性较低。

发明内容

为克服以上技术问题，特别是现有技术中应用软件界面交互设计无法兼具新颖性和实用性，无法给用户留下深刻印象且提高应用的使用满意度的问题，特提出以下技术方案：

本发明的实施例根据一个方面，提供了一种动态形变开关组件的实现方法，包括：

接收用户触发开关组件的指令；

响应所述指令，获取所述开关组件所显示图形的当前坐标和变化终止坐标；获取控制图形变化的参数；

根据所述参数、当前坐标和变化终止坐标，计算图形的坐标变化过程；

根据坐标变化过程生成所述开关组件变化过程的图形。

优选地，所述指令为打开状态切换为关闭状态的指令；

所述当前坐标对应所述开关组件处于打开状态所显示图形的坐标，所述变化终止坐标对应所述开关组件处于关闭状态所显示图形的坐标。

进一步地，当所述开关组件处于打开状态时，所述图形包含第一线条、第二线条和第三线条；所述第一线条、第二线条和第三线条顺次等距分布，且具有同一纵向对称轴；

当所述开关组件处于关闭状态时，所述图形包含所述第一线条和所述第三线条；所述第一线条和所述第三线条相交呈X型。

进一步地，所述根据所述参数、当前坐标和变化终止坐标，计算图形的坐标变化过程，包括：

根据所述当前坐标和变化终止坐标，获取所述开关组件的特征信息；

根据所述参数和所述特征信息，计算所述第一线条的旋转角度变化过程、纵向位移变化过程和横向位移变化过程；根据所述旋转角度变化过程和纵向位移变化过程，计算所述第一线条的纵坐标变化过程；根据所述横向位移变化过程和所述特征参数，计算所述第一线条的横坐标变化过程；

根据所述参数和所述特征信息，计算所述第二线条的长度变化过程；根据所述长度变化过程和所述特征信息，计算所述第二线条的坐标变化过程；

根据所述参数和所述特征信息，计算所述第三线条的旋转角度变化过程、纵向位移变化过程和横向位移变化过程；根据所述旋转角度变化过程和纵向位移变化过程，计算所述第三线条的纵坐标变化过程；根据所述横向位移变化过程和所述特征参数，计算所述第三线条的横坐标变化过程。

进一步地，所述特征信息包括：所述第一线条顺时针旋转的总旋转角

所述第一线条与所在图层上边界的初始距离pH，与所在图层左边界的初始距离pW、最终距离tW，以及所述第一线条的长度w；

所述根据所述参数和所述特征信息，计算所述第一线条的旋转角度变化过程、纵向位移变化过程和横向位移变化过程，包括：

根据所述参数和所述总旋转角

计算出所述第一线条的旋转角度变化过程为

根据所述参数、所述总旋转角

所述第一线条与所在图层上边界的初始距离pH，计算出所述第一线条的纵向位移变化过程为

根据所述参数，以及所述第一线条与所在图层左边界的初始距离pW、最终距离tW，计算出所述第一线条的横向位移变化过程为pW+(tW-pW)*mRatio；

所述根据所述旋转角度变化过程和纵向位移变化过程，计算所述第一线条的纵坐标变化过程，包括：

根据所述第一线条的所述旋转角度变化过程为

和所述纵向位移变化过程

将所述第一线条所在图层做相对位移，得到所述第一线条的所述纵坐标变化过程等于0；

所述根据所述横向位移变化过程和所述特征参数，计算所述第一线条的横坐标变化过程，包括：

根据所述第一线条的所述横向位移变化过程pW+(tW-pW)*mRatio和长度w，计算出所述第一线条的左侧点横坐标变化过程为pW+(tW-pW)*mRatio，右侧点横坐标变化过程为pW+(tW-pW)*mRatio+w；

其中，所述mRatio为所述参数。

优选地，所述特征信息包括：所述第二线条的长度w和所述开关组件的横向宽度cW和纵向宽度cH；

根据所述参数和所述特征信息，计算所述第二线条的长度变化过程；根据所述长度变化过程和所述特征信息，计算所述第二线条的坐标变化过程，包括：

根据所述参数和所述长度w，计算出所述第二线条的长度变化过程为w*(1-mRatio)；根据所述长度变化过程w*(1-mRatio)、所述纵向宽度cW和所述纵向宽度cH，计算出所述第二线条的左侧点横坐标变化过程为(cW-w*(1-mRatio))/2，右侧点横坐标变化过程为(cW-w*(1-mRatio))/2+w*(1-mRatio)，所述第二线条的纵坐标变化过程为cH/2；其中，所述mRatio为所述参数。

优选地，所述获取控制图形变化的参数，包括：

获取基于预置的插值器和估值器生成的所述控制图形变化的参数。

优选地，所述获取控制图形变化的参数，包括：

获取与预置计时器对应的预置参数；

将所述预置参数作为所述控制图形变化的参数。

优选地，所述根据坐标变化过程生成所述开关组件变化过程的图形，包括：

根据所述坐标变化过程，采用Canvas.drawLine函数在所述第一线条所在图层、第二线条所在图层和第三线条所在的图层分别生成第一线条、第二线条和第三线条，将各图层叠加生成所述开关组件变化过程的图形。

优选地，所述根据坐标变化过程生成所述开关组件变化过程的图形之后，还包括：

在应用界面中显示生成的所述开关组件变化过程的图形。

优选地，所述指令为关闭状态切换为打开状态的指令；

所述当前坐标对应所述开关组件处于关闭状态所显示图形的坐标，所述变化终止坐标对应所述开关组件处于打开状态所显示图形的坐标；

当所述开关组件处于打开状态时，所述图形包含第一线条、第二线条和第三线条；所述第一线条、第二线条和第三线条顺次等距分布，且具有同一纵向对称轴；

当所述开关组件处于关闭状态时，所述图形包含所述第一线条和所述第三线条；所述第一线条和所述第三线条相交呈X型。

本发明的实施例根据另一个方面，还提供了一种动态形变开关组件的实现装置，其包括：

指令接收模块，用于接收用户触发开关组件的指令；

数据获取模块，用于响应所述指令，获取所述开关组件所显示图形的当前坐标和变化终止坐标；获取控制图形变化的参数；

坐标计算模块，用于根据所述参数、当前坐标和变化终止坐标，计算图形的坐标变化过程；

图形生成模块，用于根据坐标变化过程生成所述开关组件变化过程的图形。

本发明的实施例根据又一个方面，还提供了一种终端，所述终端包括一个或多个处理器；存储器；一个或多个应用程序，其中所述一个或多个应用程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个程序配置用于：执行上述的动态形变开关组件的实现方法。

本发明与现有技术相比，具有以下有益效果：

本发明提供的动态形变开关组件的实现方法、装置及终端，能够通过预置的图形生成方法生成可实现打开或关闭某一应用界面功能的动态形变开关组件，在提高软件界面交互设计新颖性的同时还能够提高用户交互顺畅性，进而给用户留下深刻印象并提高应用的使用满意度，有效增强了用户对软件的粘性。

此外，本发明提供的动态形变开关组件的实现方法、装置及终端，还可通过调整用于控制开关组件图形变化的参数，进而控制所述开关组件动态形变的渐变进度，可进一步提高用户交互顺畅性。

本发明附加的方面和优点将在下面的描述中部分给出，这些将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：

图1为本发明实施例提供的动态形变开关组件的实现方法的方法流程图；

图2为本发明实施例提供的所述开关组件图形的动态形变过程；

图3为图2中的图形第一线条的动态形变过程分析图；

图4为所述开关组件处于打开状态时的应用界面效果图；

图5为所述开关组件动态形变过程中的应用界面效果图；

图6为所述开关组件处于关闭状态时的应用界面效果图；

图7为本发明实施例提供的动态形变开关组件的实现装置的结构示意图；

图8为本发明实施例提供的终端的结构示意图。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本发明，而不能解释为对本发明的限制。

实施例一

本发明实施例提供了一种动态形变开关组件的实现方法，如图1所示，该方法包括：

步骤S101：接收用户触发开关组件的指令。

对于本实施例，所述开关组件为可实现打开或关闭某一应用软件界面功能的动态形变开关组件，所述开关组件在动态形变过程中具有两个目标状态，一个是打开状态，另一个是关闭状态。所述指令用于触发所述开关组件从当前目标状态切换为另一目标状态，例如，从打开状态切换为关闭状态，或从关闭状态切换为打开状态。

步骤S102：响应所述指令，获取所述开关组件所显示图形的当前坐标和变化终止坐标；获取控制图形变化的参数。

对于本实施例，所述开关组件所显示图形包含至少一个元素，各元素在所述开关组件动态形变过程中处于所述目标状态的坐标是预置的。所述获取所述开关组件所显示图形的当前坐标和变化终止坐标，具体为，获取所述开关组件所显示图形对应目标状态的预置坐标和另一目标状态的预置坐标。

对于本实施例，所述参数用于控制所述开关组件动态形变的变化进度，所述参数预置有初始值和结束值。在所述开关组件动态形变过程中，所述参数的值从初始值变化过渡至结束值，相应地，所述开关组件的图形从一目标状态对应的图形动态形变为另一目标状态对应的图形，当所述参数的值等于初始值或结束值时，所述开关组件处于某一目标状态。

步骤S103：根据所述参数、当前坐标和变化终止坐标，计算图形的坐标变化过程。

对于本实施例，通过当前坐标、变化终止坐标和控制所述开关组件动态形变变化进度的参数，可计算出在所述参数等于当前数值时所述图形的坐标。通过获取预置的所述参数在初始值和结束值之间的各个数值，可计算出所述开关组件动态形变过程中的图形的坐标变化过程。

步骤S104：根据坐标变化过程生成所述开关组件变化过程的图形。

对于本实施例，所述开关组件变化过程的图形在预置的图像绘制图层上完成。具体地，所述开关组件的图形包含的各元素的坐标变化过程，在各元素所在的图层分别绘制生成变化过程中的元素，并将各图层叠加生成所述开关组件变化过程中的图形。

本发明提供的动态形变开关组件的实现方法，能够通过预置的图形生成方法生成可实现打开或关闭某一应用界面功能的动态形变开关组件，在提高软件界面交互设计新颖性的同时还能够提高用户交互顺畅性，进而给用户留下深刻印象并提高应用的使用满意度，有效增强了用户对软件的粘性。

实施例二

对于本实施例，结合实际应用场景，示出一个具体例子以对本发明上述动态形变开关组件的实现方法做进一步详细说明。本实施例中的动态形变开关组件的图形可实现如图2所示的从左至右的渐变过程。

对于本实施例，在所述步骤S101中接收到的所述指令为打开状态切换为关闭状态的指令。当所述开关组件处于打开状态时，其图形对应图2中最左侧的图形，该图形包含三条线条，从上至下依次为第一线条、第二线条和第三线条，所述第一线条、第二线条和第三线条等长且顺次等距分布，三条线条具有同一纵向对称轴，即所述第一线条、第二线条和第三线条的中点均在同一纵向线上。当所述开关组件处于关闭状态时，其图形对应图2中最右侧的图形，该图形包含两条线条，其由所述开关组件处于打开状态时所显示图形中的所述第一线条和所述第三线条动态形变而成，所述第一线条和所述第三线条相交呈X型。

本发明针对上述例子的具体实现方式，在实施例一所示的基础上，还包括以下所示的步骤，其中，

所述步骤S103，包括：

根据所述当前坐标和变化终止坐标，获取所述开关组件的特征信息；

根据所述参数和所述特征信息，计算所述第一线条的旋转角度变化过程、纵向位移变化过程和横向位移变化过程；根据所述旋转角度变化过程和纵向位移变化过程，计算所述第一线条的纵坐标变化过程；根据所述横向位移变化过程和所述特征参数，计算所述第一线条的横坐标变化过程；

根据所述参数和所述特征信息，计算所述第二线条的长度变化过程；根据所述长度变化过程和所述特征信息，计算所述第二线条的坐标变化过程；

根据所述参数和所述特征信息，计算所述第三线条的旋转角度变化过程、纵向位移变化过程和横向位移变化过程；根据所述旋转角度变化过程和纵向位移变化过程，计算所述第三线条的纵坐标变化过程；根据所述横向位移变化过程和所述特征参数，计算所述第三线条的横坐标变化过程。

对于本实施例，所述当前坐标对应所述开关组件处于打开状态所显示图形的坐标，所述变化终止坐标对应所述开关组件处于关闭状态所显示图形的坐标。

对于本实施例，所述特征信息用于计算所述第一线条、第二线条和第三线条坐标变化过程。所述特征信息的数值可根据所述当前坐标和变化终止坐标计算得出。

对于本实施例，用于控制所述开关组件动态形变变化进度的所述参数的初始值预置为0，结束值预置为1。所述参数为浮点小数参数，在所述开关组件动态形变过程中，所述参数的值从0变化过渡至1。所述参数的值为0时，所述开关组件处于打开状态；所述参数的值为1时，所述开关组件处于关闭状态；所述参数的值大于0且小于1时，所述开关组件处于从打开状态动态形变至关闭状态的过程中。

当所述参数的值等于0或1时，根据获取的所述当前坐标或变化终止坐标，直接绘制生成所述参数对应状态的图形。

当所述参数的值大于0且小于1，处于中间值时，在本实施例中，所述开关组件包含的所述第一线条、第二线条和第三线条分别在其所在的图层上绘制生成。

在所述开关组件动态形变过程中所述第一线条的坐标变化过程计算方法如下：

在本实施例中，所要获取的用于计算所述第一线条坐标变化过程的所述特征信息，包括：所述第一线条顺时针旋转的总旋转角；所述第一线条与所在图层上边界的初始距离；所述第一线条与所在图层左边界的初始距离、最终距离；所述第一线条的长度。

首先，计算出所述第一线条顺时针旋转的旋转角度变化过程，假设所述总旋转角是

度，结合所述参数，那么所述旋转角度变化过程为

所述mRatio为所述参数。参见图3，所述开关组件处于打开状态时，所述第一线条与其所在图层上边界的距离为已知pH，那么如果不对画布进行位移，当所述第一线条旋转到所述总旋转角

度时，所述距离的最终值为

图3中a为所述开关组件处于打开状态时所述第一线条对应的状态，b为所述第一线条旋转后对应的状态，x为旋转加移动画布后对应的最终状态。则可计算出所述第一线条的纵向位移变化过程为

然后，所述开关组件处于打开状态时所述第一线条与所在图层左边界的距离为已知pW，处于关闭状态时所述第一线条与所在图层左边界的距离为已知tW，则可计算出所述第一线条的横向位移过程为pW+(tW-pW)*mRatio。得出以上每个渐变时刻，所述第一线条所在图层的旋转角度变化过程为

所述图层往上平移距离变化过程为

以及所述第一线条的横向位移变化过程为pW+(tW-pW)*mRatio。最后，已知所述第一线条的长度为w，则可计算出所述第一线条的左侧坐标变化过程为(pW+(tW-pW)*mRatio，0)，右侧坐标变化过程为(pW+(tW-pW)*mRatio+w，0)。

由此可知，根据所述参数和所述总旋转角

可计算出所述第一线条的旋转角度变化过程为

根据所述参数、所述总旋转角

所述第一线条与所在图层上边界的初始距离pH，可计算出所述第一线条的纵向位移变化过程为

根据所述参数，以及所述第一线条与所在图层左边界的初始距离pW、最终距离tW，可计算出所述第一线条的横向位移变化过程为pW+(tW-pW)*mRatio；随后，根据所述第一线条的所述旋转角度变化过程为

和所述纵向位移变化过程

将所述第一线条所在图层做相对位移之后，可得到所述第一线条的所述纵坐标变化过程等于0；最后，根据所述第一线条的所述横向位移变化过程pW+(tW-pW)*mRatio和长度w，可计算出所述第一线条的左侧点横坐标变化过程为pW+(tW-pW)*mRatio，右侧点横坐标变化过程为pW+(tW-pW)*mRatio+w。

在所述开关组件动态形变过程中所述第二线条的坐标变化过程计算方法如下：

在本实施例中，所要获取的用于计算所述第二线条坐标变化过程的所述特征信息，包括：所述第二线条的长度w和所述开关组件的横向宽度和纵向宽度。其中，所述开关组件的横向宽度和纵向宽度为所述开关组件处于打开状态时所显示图形的总宽度。

所述开关组件从打开状态动态形变为关闭状态过程中，所述第二线条的长度逐渐缩短。已知所述开关组件处于打开状态时所述第二线条的长度为w，所述开关组件的横向宽度为cW，因为所述第二线条处于所述开关组件中央，所述第二线条的长度变化过程为w*(1-mRatio)，所述mRatio为所述参数，所述第二线条的左侧点横坐标变化过程为(cW–w*(1-mRatio))/2,右侧点横坐标变化过程为(cW–w*(1-mRatio))/2+w*(1-mRatio)，纵坐标变化过程恒等于cH/2。

由此可知，根据所述参数和所述长度w，可计算出所述第二线条的长度变化过程为w*(1-mRatio)；根据所述长度变化过程w*(1-mRatio)、所述纵向宽度cW和所述纵向宽度cH，可计算出所述第二线条的左侧点横坐标变化过程为(cW-w*(1-mRatio))/2，右侧点横坐标变化过程为(cW-w*(1-mRatio))/2+w*(1-mRatio)，所述第二线条的纵坐标变化过程为cH/2。

对于本实施例，所述第三线条的坐标变化过程与所述第一线条的坐标变化过程的不同点仅在于线条动态形变的方向相反，故所述开关组件动态形变过程中所述第三线条的坐标变化过程计算方法与上述第一线条的坐标变化过程计算方法雷同，此处不再赘述。

在计算出各线条的所述坐标变化过程之后，所述步骤S104根据坐标变化过程生成所述开关组件变化过程的图形，具体包括：

根据所述坐标变化过程，采用Canvas.drawLine函数在所述第一线条所在图层、第二线条所在图层和第三线条所在的图层分别生成第一线条、第二线条和第三线条，将各图层叠加生成所述开关组件变化过程的图行。

对于本实施例，所述第一线条、第二线条和第三线条的绘制生成基于终端中预置的2D图像API完成，所述Canvas.drawLine函数用于根据传入的坐标绘制生成线条。

需明确指出的是，在其他实施例中，所述动态形变开关组件的图形还可实现如图2所示的从右至左的渐变过程。此时，所述指令为关闭状态切换为打开状态的指令；所述当前坐标对应所述开关组件处于关闭状态所显示图形的坐标，所述变化终止坐标对应所述开关组件处于打开状态所显示图形的坐标；当所述开关组件处于打开状态时，所述图形包含第一线条、第二线条和第三线条；所述第一线条、第二线条和第三线条顺次等距分布，且具有同一纵向对称轴；当所述开关组件处于关闭状态时，所述图形包含所述第一线条和所述第三线条；所述第一线条和所述第三线条相交呈X型。

需明确指出的是，所述动态形变开关组件的图形并不局限于本实施例示出的所述图形，其还可以是其动态形变过程中坐标变化过程的计算方法适用于本发明所提供的动态形变开关组件实现方法的其他图形，如仅包含本实施例所述的第一线条和第三线条的图形等，本实施例对此不做限定。

在本实施例中，示出了一个具体例子对本发明提供的动态形变开关组件的实现方法做进一步详细阐述。该方法能够通过预置的图形生成方法生成可实现打开或关闭某一应用界面功能的动态形变开关组件，所述开关组件处于打开状态及关闭状态时对应的图形与所要表示的状态信息匹配度高，具有明显的表示打开和关闭特征，在用户打开和关闭应用界面场景中，所述开关组件能够实行其图形在打开状态和关闭状态之间平滑过渡，在提高软件界面交互设计新颖性的同时还能够提高用户交互顺畅性，进而给用户留下深刻印象并提高应用的使用满意度，有效增强了用户对软件的粘性。

实施例三

本发明实施例的另一种可能的实现方式，在实施例一或二所示的基础上，还包括实施例三所示的步骤，其中，

所述步骤S102中的所述获取控制图形变化的参数，包括：获取基于预置的插值器和估值器生成的所述控制图形变化的参数。

对于本实施例，所述参数在初始值和结束值之间的数值可基于预置的属性动画库中的插值器和估值器生成。其中，所述属性动画库为Android开发团队在3.0版本中引入的动画库，所述插值器用于定义图形的变化速率，所述估值器用于计算所述参数的数值。所述插值器可以是各种线性插值器或非线性插值器，如匀速、加速、减速等。所述估值器预置有整数型、浮点型等类型。

例如，当所述参数的初始值以浮点型数值的形式过渡至结束值时，所述估值器通常采用浮点型估值器，当预置的插值器为线性插值器时，基于所述线性插值和浮点型估值器计算出所述参数在初始值和结束值之间的各个数值，再根据所述参数可以得到所述开关组件的图形以匀速从一目标状态平滑切换至另一目标状态的动态形变过程。

在本实施例中，通过调整用于控制开关组件图形变化的参数，进而控制所述开关组件动态形变的渐变进度，可实现进一步提高用户交互顺畅性。

实施例四

本发明实施例的另一种可能的实现方式，在实施例一或二所示的基础上，还包括实施例四所示的步骤，其中，

所述步骤S102中的所述获取控制图形变化的参数，包括：

获取与预置计时器对应的预置参数；将所述预置参数作为所述控制图形变化的参数。

对于本实施例，通过使用定时器，定时规律地改变所述参数的数值，具体地，使用定时器，获取与所述定时器预置某一时间节点对应的预置参数，在当前时间节点将所述预置参数赋予所述参数，最终获得所述参数从初始值过渡至结束值之间的各个数值。

在本实施例中，通过调整用于控制开关组件图形变化的参数，进而控制所述开关组件动态形变的渐变进度，可实现进一步提高用户交互顺畅性。

实施例五

本发明实施例的另一种可能的实现方式，在实施例一或二所示的基础上，还包括实施例五所示的步骤，其中，

所述步骤S104之后，还包括：

在应用界面中显示生成的所述开关组件变化过程的图形。

对于本实施例，在用户打开或关闭应用界面的应用场景中，所述开关组件可在应用页面切换过程中实现动态形变，从当前目标状态切换至另一目标状态。

具体地，参见图4至6的显示于应用界面中的所述开关组件动态形变效果图，以实施例二所述开关组件的图形为例对本实施例进行详细阐述。如图4所示，当应用处于打开某一栏目的应用界面时，显示于所述应用界面中的所述开关组件显示有处于打开状态时对应的图形；在用户欲关闭当前栏目的应用界面，触发所述开关组件之后，应用响应所述触发指令进行应用界面切换，如图5所示，在应用界面切换过程中，所述开关组件也随之进行动态形变；如图6所示，当应用完成从此前栏目的应用界面切换至包含全部栏目的应用界面时，所述开关组件也实现了从打开状态对应的图形平滑渐进过渡至关闭状态对应的图形。

在本实施例中，所述动态形变开关组件通过预置的图形生成方法生成可实现打开或关闭某一应用界面功能的动态形变开关组件，所述开关组件处于打开状态及关闭状态时对应的图形与其所在的应用界面匹配度高，具有明显的表示打开和关闭特征，在用户打开和关闭应用界面场景中，所述开关组件能够在应用界面切换过程中实行其图形在打开状态和关闭状态之间平滑过渡，在提高软件界面交互设计新颖性的同时还能够提高用户交互顺畅性，进而给用户留下深刻印象并提高应用的使用满意度，有效增强了用户对软件的粘性。

此外，本发明实施例提供了一种动态形变开关组件的实现装置，如图7所示，所述装置包括：

指令接收模块201，用于接收用户触发开关组件的指令；

数据获取模块202，用于响应所述指令，获取所述开关组件所显示图形的当前坐标和变化终止坐标；获取控制图形变化的参数；

坐标计算模块203，用于根据所述参数、当前坐标和变化终止坐标，计算图形的坐标变化过程；

图形生成模块204，用于根据坐标变化过程生成所述开关组件变化过程的图形。

本发明提供的动态形变开关组件的实现装置，能够通过预置的图形生成方法生成可实现打开或关闭某一应用界面功能的动态形变开关组件，在提高软件界面交互设计新颖性的同时还能够提高用户交互顺畅性，进而给用户留下深刻印象并提高应用的使用满意度，有效增强了用户对软件的粘性。此外，该装置还可通过调整用于控制开关组件图形变化的参数，进而控制所述开关组件动态形变的渐变进度，可进一步提高用户交互顺畅性。

本发明实施例提供的动态形变开关组件的实现装置可以实现上述提供的方法实施例，具体功能实现请参见方法实施例中的说明，在此不再赘述。

此外，本发明实施例还提供了一种终端，如图8所示，所述终端可以包括一个或者一个以上的处理器301，还包括存储器302、WiFi(wireless fidelity，无线保真)电路303、RF(Radio Frequency，射频)电路304、音频电路305、传感器306、输出设备307、输入设备304、电源309，处理器301是终端的控制中心，利用各种接口和线路连接以上各部分。本领域技术人员可以理解，图8中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

WiFi电路303可为用户提供无线局域网或互联网访问；其可包括天线、WiFi模块等。RF电路304可收发信息，或在通话过程中信号的接收和发送；其可包括天线、至少一个放大器、调谐器、一个或多个振荡器、耦合器、双工器等。音频电路305可将接收到的音频数据转换成电信号，传输到扬声器，也可将传声器收集的声音信号转换为音频数据，发给处理器301处理；其可设置扬声器、传声器、耳机接口等。传感器306可用于感应外界信号，并发给处理器301处理；其可包括运动传感器、光传感器等。输出设备307可用于显示各种信号；其可为采用LCD(Liquid Crystal Display，液晶显示器)、OLED(Organic Light-EmittingDiode,有机发光二极管)等形式来配置显示面板。输入设备304可用于输入数字和字符等信息；其可为物理按键、触控面板等。电源309可为终端各部分供电，通过电源管理系统与处理器309逻辑连接；其可包括一个或一个以上的直流或交流电源、充电系统、电源状态指示器等组件。存储器302可用于存储软件程序以及模块；其可为计算机可读存储介质，具体的为硬盘、闪存等。处理器是终端的控制中心，通过运行或执行存储在存储器302内的软件程序和/或模块，以及调用存储在存储器302的数据，执行终端各种功能、处理终端数据。

作为一个实施例，终端包括：一个或多个处理器301，存储器302，一个或多个应用程序，其中所述一个或多个应用程序被存储在存储器302中并被配置为由所述一个或多个处理器301执行，所述一个或多个程序配置用于执行以上实施例一至五所述的动态形变开关组件的实现方法。

本发明提供的终端，能够通过预置的图形生成方法生成可实现打开或关闭某一应用界面功能的动态形变开关组件，在提高软件界面交互设计新颖性的同时还能够提高用户交互顺畅性，进而给用户留下深刻印象并提高应用的使用满意度，有效增强了用户对软件的粘性。此外，所述终端还可通过调整用于控制开关组件图形变化的参数，进而控制所述开关组件动态形变的渐变进度，可进一步提高用户交互顺畅性。

本发明实施例提供的终端可以实现上述提供的方法实施例，具体功能实现请参见方法实施例中的说明，在此不再赘述。

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

Claims (13)

1.一种动态形变开关组件的实现方法，其特征在于，包括如下步骤：

接收用户触发开关组件的指令；

响应所述指令，获取所述开关组件所显示图形的当前坐标和变化终止坐标；获取控制图形变化的参数，所述参数用于控制所述开关组件动态形变的变化进度，所述参数预置有初始值和结束值，在所述开关组件动态形变过程中，所述参数的值从初始值变化过渡至结束值，相应地，所述开关组件的图形从一目标状态对应的图形动态形变为另一目标状态对应的图形，当所述参数的值等于初始值或结束值时，所述开关组件处于某一目标状态；

根据所述参数、当前坐标和变化终止坐标，计算图形的坐标变化过程；

根据坐标变化过程生成所述开关组件变化过程的图形。

2.根据权利要求1所述的动态形变开关组件的实现方法，其特征在于，所述指令为打开状态切换为关闭状态的指令；

所述当前坐标对应所述开关组件处于打开状态所显示图形的坐标，所述变化终止坐标对应所述开关组件处于关闭状态所显示图形的坐标。

3.根据权利要求2所述的动态形变开关组件的实现方法，其特征在于：

当所述开关组件处于打开状态时，所述图形包含第一线条、第二线条和第三线条；所述第一线条、第二线条和第三线条顺次等距分布，且具有同一纵向对称轴；

当所述开关组件处于关闭状态时，所述图形包含所述第一线条和所述第三线条；所述第一线条和所述第三线条相交呈X型。

4.根据权利要求3所述的动态形变开关组件的实现方法，其特征在于，所述根据所述参数、当前坐标和变化终止坐标，计算图形的坐标变化过程，包括：

根据所述当前坐标和变化终止坐标，获取所述开关组件的特征信息，所述特征信息用于计算所述第一线条、第二线条和第三线条坐标变化过程，所述特征信息的数值可根据所述当前坐标和变化终止坐标计算得出；

根据所述参数和所述特征信息，计算所述第一线条的旋转角度变化过程、纵向位移变化过程和横向位移变化过程；根据所述旋转角度变化过程和纵向位移变化过程，计算所述第一线条的纵坐标变化过程；根据所述横向位移变化过程和所述特征参数，计算所述第一线条的横坐标变化过程；

根据所述参数和所述特征信息，计算所述第二线条的长度变化过程；根据所述长度变化过程和所述特征信息，计算所述第二线条的坐标变化过程；

根据所述参数和所述特征信息，计算所述第三线条的旋转角度变化过程、纵向位移变化过程和横向位移变化过程；根据所述旋转角度变化过程和纵向位移变化过程，计算所述第三线条的纵坐标变化过程；根据所述横向位移变化过程和所述特征参数，计算所述第三线条的横坐标变化过程。

5.根据权利要求4所述的动态形变开关组件的实现方法，其特征在于，所述特征信息包括：所述第一线条顺时针旋转的总旋转角

所述第一线条与所在图层上边界的初始距离pH，与所在图层左边界的初始距离pW、最终距离tW，以及所述第一线条的长度w；

所述根据所述参数和所述特征信息，计算所述第一线条的旋转角度变化过程、纵向位移变化过程和横向位移变化过程，包括：

根据所述参数和所述总旋转角

计算出所述第一线条的旋转角度变化过程为

根据所述参数、所述总旋转角

所述第一线条与所在图层上边界的初始距离pH，计算出所述第一线条的纵向位移变化过程为

根据所述参数，以及所述第一线条与所在图层左边界的初始距离pW、最终距离tW，计算出所述第一线条的横向位移变化过程为pW+(tW-pW)*mRatio；

所述根据所述旋转角度变化过程和纵向位移变化过程，计算所述第一线条的纵坐标变化过程，包括：

根据所述第一线条的所述旋转角度变化过程为

和所述纵向位移变化过程

将所述第一线条所在图层做相对位移，得到所述第一线条的所述纵坐标变化过程等于0；

所述根据所述横向位移变化过程和所述特征参数，计算所述第一线条的横坐标变化过程，包括：

根据所述第一线条的所述横向位移变化过程pW+(tW-pW)*mRatio和长度w，计算出所述第一线条的左侧点横坐标变化过程为pW+(tW-pW)*mRatio，右侧点横坐标变化过程为pW+(tW-pW)*mRatio+w；

其中，所述mRatio为所述参数。

6.根据权利要求4所述的动态形变开关组件的实现方法，其特征在于，所述特征信息包括：所述第二线条的长度w和所述开关组件的横向宽度cW和纵向宽度cH；

根据所述参数和所述特征信息，计算所述第二线条的长度变化过程；根据所述长度变化过程和所述特征信息，计算所述第二线条的坐标变化过程，包括：

根据所述参数和所述长度w，计算出所述第二线条的长度变化过程为w*(1-mRatio)；根据所述长度变化过程w*(1-mRatio)、所述纵向宽度cW和所述纵向宽度cH，计算出所述第二线条的左侧点横坐标变化过程为(cW-w*(1-mRatio))/2，右侧点横坐标变化过程为(cW-w*(1-mRatio))/2+w*(1-mRatio)，所述第二线条的纵坐标变化过程为cH/2；其中，所述mRatio为所述参数。

7.根据权利要求1所述的动态形变开关组件的实现方法，其特征在于，所述获取控制图形变化的参数，包括：

获取基于预置的插值器和估值器生成的所述控制图形变化的参数。

8.根据权利要求1所述的动态形变开关组件的实现方法，其特征在于，所述获取控制图形变化的参数，包括：

获取与预置计时器对应的预置参数；

将所述预置参数作为所述控制图形变化的参数。

9.根据权利要求3所述的动态形变开关组件的实现方法，其特征在于，所述根据坐标变化过程生成所述开关组件变化过程的图形，包括：

根据所述坐标变化过程，采用Canvas.drawLine函数在所述第一线条所在图层、第二线条所在图层和第三线条所在的图层分别生成第一线条、第二线条和第三线条，将各图层叠加生成所述开关组件变化过程的图形。

10.根据权利要求1所述的动态形变开关组件的实现方法，其特征在于，所述根据坐标变化过程生成所述开关组件变化过程的图形之后，还包括：

在应用界面中显示生成的所述开关组件变化过程的图形。

11.根据权利要求1所述的动态形变开关组件的实现方法，其特征在于，所述指令为关闭状态切换为打开状态的指令；

所述当前坐标对应所述开关组件处于关闭状态所显示图形的坐标，所述变化终止坐标对应所述开关组件处于打开状态所显示图形的坐标；

当所述开关组件处于打开状态时，所述图形包含第一线条、第二线条和第三线条；所述第一线条、第二线条和第三线条顺次等距分布，且具有同一纵向对称轴；

当所述开关组件处于关闭状态时，所述图形包含所述第一线条和所述第三线条；所述第一线条和所述第三线条相交呈X型。

12.一种动态形变开关组件的实现装置，其特征在于，包括：

指令接收模块，用于接收用户触发开关组件的指令；

数据获取模块，用于响应所述指令，获取所述开关组件所显示图形的当前坐标和变化终止坐标；获取控制图形变化的参数；

坐标计算模块，用于根据所述参数、当前坐标和变化终止坐标，计算图形的坐标变化过程；

图形生成模块，用于根据坐标变化过程生成所述开关组件变化过程的图形。

13.一种终端，其特征在于，其包括：

一个或多个处理器；

存储器；

一个或多个应用程序，其中所述一个或多个应用程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个程序配置用于：执行根据权利要求1至11任一项所述的动态形变开关组件的实现方法。

Images