一种指示组件的动画效果的实现方法和系统与流程

本发明涉及人机交互技术领域，尤其是一种指示组件的动画效果的实现方法和系统。

背景技术：

人机交互界面中菜单选择项可以有很多的实现方案。用户可以通过点击菜单的热区以实现选中菜单中的选项，通常被选中的选项会与没有选中的选项在显示状态上有所不同。

尤其在车载的人机交互界面中，会涉及到很多菜单，这些菜单通常用于指示汽车的功能状态，人们也将其称之为指示器，即indicator。一般情况下，这些指示器可以通过编程语言的一些组件来实现，如java等编程语言所提供的view组件等。

但是，目前主流编程语言所提供的组件只能提供简单的动画效果。

技术实现要素：

为解决上述技术问题，本发明的目的在于：提供一种指示组件的动画效果的实现方法和系统。以实现一种运动组件来回弹动的动画效果，使指示组件中被选中的选项更加突出和醒目。

本发明实施例的第一方面提供了：

一种指示组件的动画效果的实现方法，包括以下步骤：

获取操作指令；

根据操作指令确定被选中的第一组件单元的位置；

根据第一组件单元的位置计算运动组件的运动轨迹参数，使运动组件根据运动轨迹参数以第一组件单元的中心位置为中心来回运动若干次。

进一步，所述以第一组件单元的中心位置为中心来回运动若干次，其具体包括：

以第一组件单元的中心位置为中心，在纵向方向来回运动若干次；

或者

以第一组件单元的中心位置为中心，在横向方向来回运动若干次。

进一步，还包括以下步骤：

获取第二组件单元的位置，其中，第二组件单元为在获取操作指令之前处于选中状态的组件单元；

所述根据第一组件单元的位置计算运动组件的运动轨迹参数，使运动组件根据运动轨迹参数以第一组件单元的中心位置为中心来回运动若干次，其具体为：

根据第二组件单元的位置和第一组件单元的位置，计算运动组件的运动轨迹参数，使运动组件根据运动轨迹参数，先从第二组件单元滑动到第一组件单元，然后以第一组件单元的中心位置为中心来回运动若干次。

进一步，还包括以下步骤：

获取动画组件的运动速度参数；

所述根据第二组件单元的位置和第一组件单元的位置，计算运动组件的运动轨迹参数，其具体包括：

根据第二组件单元的位置、第一组件单元的位置和运动速度参数，计算运动组件的轨迹参数；

或者

根据第二组件单元的位置、第一组件单元的位置和运动速度参数，计算运动组件从第二组件单元滑动到第一组件单元时的运动轨迹参数，然后根据第一组件单元的位置，计算运动组件以第一组件单元的中心位置为中心来回运动若干次时的运动轨迹参数；

或者

根据第二组件单元的位置和第一组件单元的位置，计算运动组件从第二组件单元滑动到第一组件单元时的运动轨迹参数，然后根据第一组件单元的位置和运动速度参数，计算运动组件以第一组件单元的中心位置为中心来回运动若干次时的运动轨迹参数。

进一步，所述来回运动若干次，其具体为：

以运动距离逐次衰减的方式来回运动若干次。

进一步，所述运动组件在来回运动若干次时，每次的运动距离比上一次的运动距离减少预设的比例或者预设值。

进一步，所述运动组件在以第一组件单元的中心位置为中心来回运动若干次时的运动轨迹参数，通过spring插值器计算。

进一步，还包括以下步骤：

将第一组件单元从非选中状态切换为选中状态；

将第二组件单元从选中状态切换为非选中状态。

本发明实施例的第二方面提供了：

一种指示组件的动画效果的实现系统，包括：

获取单元，用于获取操作指令；

确定单元，用于根据操作指令确定被选中的第一组件单元的位置；

动画实现单元，用于根据第一组件单元的位置计算运动组件的运动轨迹参数，使运动组件根据运动轨迹参数以第一组件单元的中心位置为中心来回运动若干次。

本发明实施例的第三方面提供了：

一种指示组件的动画效果的实现系统，包括：

存储器，用于存储程序；

处理器，用于加载所述程序以执行所述指示组件的动画效果的实现方法。

本发明的有益效果是：本发明根据操作指令确定被选中的第一组件单元的位置；根据第一组件单元的位置计算运动组件的运动轨迹参数，使运动组件根据运动轨迹参数以第一组件单元的中心位置为中心来回运动若干次，从而实现一种指示组件的选项被选中后运动组件来回弹动的动画效果，使被选中的选项更加突出和醒目。

附图说明

图1为本发明一种具体实施例的指示组件的动画效果的实现方法的流程图；

图2为本发明一种具体实施例的指示组件的动画效果的示意图；

图3为本发明一种具体实施例的运动组件的在匀速运动的情况下运动轨迹的示意图；

图4为本发明一种具体实施例的运动组件的在变速运动的情况下运动轨迹的示意图；

图5为本发明一种具体实施例的运动组件的运动轨迹的描述方式的示意图；

图6为本发明具体实施例的指示组件的第一种结构示意图；

图7为本发明具体实施例的指示组件的第二种结构示意图；

图8为本发明具体实施例的指示组件的第三种结构示意图。

具体实施方式

下面结合说明书附图和具体的实施例对本发明进行进一步的说明。

参照图1，本实施例公开了一种指示组件的动画效果的实现方法，本实施例可以应用在具备显示屏的计算机设备上，所述计算机设备可以执行以下方法，并通过显示屏显示出动画效果。所述计算机设备可以是汽车上的车载大屏、手机或者平板等设备。

本实施例的方法包括以下步骤：

s1、获取操作指令。

所述操作指令由用户触发或者输入，其中，可以通过触摸屏、麦克风、鼠标或者键盘等物理外设输入，并由计算机设备获取该操作指令。也就是说，所述操作指令可以是由声音、触摸或者点击等方式所触发的。

s2、根据操作指令确定被选中的第一组件单元的位置。

在本实施例中，第一组件单元的位置可以指第一组件单元的中心在系统中的位置坐标。或者指用于描述第一组件单元在系统中的位置的多个坐标点的集合。

例如，第一组件单元是一个圆形，可以通过圆心的位置坐标来描述这个圆形的位置。再例如，第一组件单元是一个长方形，可以通过描述该长方形的两个相对的顶点来描述这个长方形的位置。而对于第一组件单元为不规则图形的情况，可以采取指定中心位置的方式。例如，一个不规则的卡通形状，可以由在设计时自定义该不规则的卡通形状的一个点作为其中心坐标点，然后通过该被指定的中心坐标点来描述第一组件单元的位置。

因此，第一组件单元的位置由一个或者多个坐标点描述。

s3、根据第一组件单元的位置计算运动组件的运动轨迹参数，使运动组件根据运动轨迹参数以第一组件单元的中心位置为中心来回运动若干次。

参照图2，在本实施例中，创建了四个组件单元作为四个菜单的选项和一个运动组件200，其中包括组件单元201、组件单元202、组件单元203和组件单元204，这些组件单元由加入item(包括图片和文字等)的容器所构成，并且本实施例在每个容器的item上设置一个被选中时的动画效果，当然以item对应的热区被点击后，触发动画效果。所述运动组件200用于指示被选中的组件单元，所述运动组件200在一些场景下也被称作cover。在本实施例中，在时间点0，运动组件200处于组件单元201的位置上，表示组件单元201处于被选中的状态。在本实施例中，用户在时间点0和时间点1之间选中的组件单元204，例如，用户点击了一下组件单元204所对应的热区，触发了运动组件200的动画效果，即触发运动组件运动。首先，在用户选中组件单元204的时刻到时间点1之间，运动组件200从组件单元201的位置移动到组件单元204的位置上，即运动组件200的左边缘处于点e的位置，右边缘处于点a的位置。然后在时间点1到时间点2之间，运动组件200继续往右移动，直至右边缘到达点b的位置。在时间点2到时间点3之间，运动组件200往回运动，即往左运动，直到在时间点3其左边缘运动到点c的位置。随后在时间点3和时间点4之间，运动组件200又折返往右运动，在时间点4，其右边缘到达点d的位置。在时间点4和时间点5之间，运动组件200又往左运动，并在时间点5，停止在组件单元204上，即左边缘处于点e的位置，右边缘处于点a的位置。

在视觉效果上，运动组件200从组件单元201的位置，首先移动到组件单元204的位置，随后以组件单元204的中心作为运动中心在x轴的方向上来回运动数次。

在下面的部分实施例中，使用第一组件单元指代被选中的组件单元，如组件单元204；使用第二组件单元来指代在第一组件单元被选中之前被选中或者默认选中的组件单元，如组件单元201。

从上述运动过程可知，运动组件的运动轨迹可以分为两部分，即从第二组件单元运动到第一组件单元的运动轨迹，以及运动组件以第一组件单元的中心为中心进行来回运动的运动轨迹。在本实施例中将运动组件从第二组件单元运动到第一组件单元的运动轨迹称作第一轨迹，将运动组件以第一组件单元的中心为中心进行来回运动的轨迹称作第二轨迹。

在生成第一轨迹时，可以采取以下几种实现方式：

第一种，运动组件瞬间从第二组件单元，移动到第一组件单元的位置上，然后再自行第二轨迹。例如，在第一个画面帧之中，运动组件处于第二组件单元的位置上，在第二个画面帧出现时，运动组件就处于第一组件单元的位置上。

第二种，运动组件以一定的速度从第二组件单元逐渐移动到第一组件单元的位置上。其中所述速度是指相邻两帧之间运动组件的相对位置变化除以两帧的时间间隔所得到的值。例如，可以用像素点每秒作为单位来描述运动组件的速度。运动组件在沿着第一轨迹运动时，其可以是匀速的，也可以是变速的。在一些实施例中，运动组件在每两个相邻帧之间的相对位置变化均相同。在另一些实施例中，运动组件在两个相邻帧之间的相对位置变化不相同，例如在第一帧和第二帧之间运动了1个像素点，而在第二帧和第三帧之间运动了2个像素点，第三帧和第四帧之间运动了3个像素点，呈现出一种加速的状态。

在运动组件沿第二轨迹运动时，即运动组件以第一组件单元的中心为中心进行来回运动时，其也可以采取多种实现方式。

在一些实施例中，运动组件的运动次数是固定的，例如，来回运动三次，即向左运动三次，向右运动三次，然后在第一组件单元的位置上停止运动。在另一些实施例中，运动组件的运动次数是不固定，其根据第一组件单元和第二组件单元之间的距离而定。例如，如果第一组件单元和第二组件单元的距离较远，运动组件在沿着第二轨迹运动时，回来运动的次数更多，即在一些实施例中，运动组件来回运动的次数与第一组件单元和第二组件单元的距离成正比。

除了使用速度去约束运动组件的运动状态以外，也可以采用时间去约束运动组件的运动状态，例如可以限定每个动画的呈现时间为0.5秒，然后根据呈现的时间来确定动画的运动状态，如运动距离和运动速度等。

在一些实施例中，运动组件在来回运动时，向左和向右的运动距离是相等的，例如，每次向左运动或者向右运动时，运动的距离均为30个像素点。

在另一些实施例中，运动组件在来回运动时，向左和向右的运动距离是不相等的，例如向右运动时均为30个像素点，向左运动时，均为20个像素点。

在另一些实施例中，运动组件在来回运动时，每一次运动的距离均为不相等的，例如，第一次向右运动时，从中心往右运动30个像素点，在第一次向左运动时，从右侧运动到中心再继续向左运动20个像素点，第二次向右运动时，先向右运动到中心然后继续向右运动10个像素点，最后向左运动到中心并停止。在本实施例中运动组件在来回运动时，呈现逐次衰减的趋势。

此外，运动组件的以第二轨迹进行运动时，其运动速度也可以有多种实现方式。

参照图3，坐标系中纵坐标表示运动组件在横向方向上的位置。运动组件从第二组件单元所处的位置点p3运动到第一组件单元所处的位置点o3。其中线段301表示运动组件沿第一轨迹运动时的位置变化，线段组302表示运动组件沿着第二轨迹运动时的位置变化。

图3的坐标系中的直线的斜率的绝对值均相同，但是符号有所不同。因此图3中直线的斜率表示运动组件在横向方向上的运动速度。如图3所示，运动组件以匀速的方式并呈逐次衰减的形式来回运动。

同理，在图4中，坐标系中纵坐标表示运动组件在横向方向上的位置。运动组件从第二组件单元所处的位置点p4运动到第一组件单元所处的位置点o4。其中线段401表示运动组件沿第一轨迹运动时的位置变化，线段组402表示运动组件沿着第二轨迹运动时的位置变化。从图4中可以看出，在线段组402中呈现变化的斜率，即运动组件在运动的过程中速度是变化的，其在运动过程中呈现一个衰减的正弦波。

关于运动轨迹的描述，在本实施例中可以采用一些坐标参数对运动组件的运动轨迹进行描述。描述方式也有很多种。

在一些实施例之中，可以以运动轨迹的多个端点来描述一个运动轨迹，参照图5，在本实施例中，运动组件从点o5开始向右运动，在t1时，运动组件运动到点a5，然后向左运动，并且在t1时到达点b5，然后运动组件向右运动，并在t2时到达点c5，最后运动组件在t3时从点c5运动到点d5后停止。这一段运动轨迹可以通过以下方式描述：

(o5，a5)，(a5，b5)，(b5，c5)，(c5，d5)。

当然具体的表达方式，根据程序语言的不同而不同。在本实施例中，可以根据运动轨迹的参数，结合运动组件的运动速度，算出运动组件在每一个画面帧之中的位置，从而生成一个连续的动画。

在另一些实施例中，也可以直接确定出每一帧画面中运动组件的位置坐标，然后将一连串的坐标点作为运动轨迹。例如，可以将运动轨迹在程序中写入每一个坐标点，即把运动轨迹固定写在程序之中。

上面仅仅对运动组件在横向方向上进行来回运动的情况进行了说明，但是并不意味着运动组件只能在横向方向上进行运动。

在一些实施例中，所述运动组件也可以以第一组件单元的中心为中心，在纵向方向上实现来回运动。至于运动组件在纵向方向上运动的具体实现细节，可以根据上述实施例所描述的运动组件的实现细节变换得到。

接着对多个组件单元所构成的指示组件进行说明。

参照图6，在本实施例中，指示组件由组件单元601、组件单元602和、组件单元603和组件单元604和运动组件600组成。在本实施例中，运动组件600在横向方向上运动。当然，本实施例的运动组件600在实现来回运动时，即呈现来回弹动的效果时，也可以在纵向方向实施。其中，在本实施例中，组件单元601、组件单元602和、组件单元603和组件单元604为高度和宽度均可变的水平容器，它们均添加有文字和图片的接口，同时，每个组件单元均设置有点击事件。

参照图7，在本实施例中，指示组件由组件单元701、组件单元702和、组件单元703和组件单元704和运动组件700组成。在本实施例中，运动组件700在纵向方向上运动。当然，本实施例的运动组件700在实现来回运动时，即呈现来回弹动的效果时，也可以在横向方向上实施。其中，在本实施例中，组件单元701、组件单元702和、组件单元703和组件单元704均为可变宽高的垂直容器，它们均添加有文字和图片的接口，同时，每个组件单元均设置有点击事件。

参照图8，在本实施例中，指示组件由组件单元801、组件单元802和、组件单元803和组件单元804和运动组件800组成，它们形成一个十字形的指示组件。在本实施例中，运动组件800既可以在纵向方向上运动，又可以在横向方向上运动，根据运动组件800的起始位置和目标位置，运动组件800可以先横向运动再纵向运动，或者先纵向运动再横向运动。在本实施例中运动组件800在实施来回弹动时，可以在纵向方向或者横向方向实施。

综上所述，上述实施例可以实现一种指示组件的选项被选中后来回弹动的动画效果，使被选中的选项更加突出和醒目。

作为优选的实施例，所述以第一组件单元的中心位置为中心来回运动若干次，其具体包括：

以第一组件单元的中心位置为中心，在纵向方向来回运动若干次；

或者

以第一组件单元的中心位置为中心，在横向方向来回运动若干次。

在本实施例中，所述第一组件单元的中心位置，可以是设定的中心位置，也可以是第一组件单元的几何中心。如矩形的几何中心是矩形两个对角线的交点，圆形的几何中心是圆心。

本实施例使运动组件以第一组件单元的中心位置为中心实现来回弹动，其产生对称的美感，使得用户可以得到更好的视觉效果。此外，本实施例提供了横向运动和纵向运动两种方式，使得指示器的类型更加多元化。

作为优选的实施例，还包括以下步骤：

获取第二组件单元的位置，其中，第二组件单元为在获取操作指令之前处于选中状态的组件单元；

所述步骤s3，其具体为：

根据第二组件单元的位置和第一组件单元的位置，计算运动组件的运动轨迹参数，使运动组件根据运动轨迹参数，先从第二组件单元滑动到第一组件单元，然后以第一组件单元的中心位置为中心来回运动若干次。

本实施例中的运动组件根据运动轨迹参数，先从第二组件单元滑动到第一组件单元，在视觉上更加流畅，可以避免用户感受到卡顿感，使得动画更加连贯和流畅。

当然，那么意味着在本实施例中，需要计算出运动组件从第二组件单元的位置滑动到第一组件单元的位置时，运动组件在每一帧上的位置坐标。

作为优选的实施例，还包括以下步骤：

获取动画组件的运动速度参数；

在本实施例中，所述根据第二组件单元的位置和第一组件单元的位置，计算运动组件的运动轨迹参数，其具体包括：

根据第二组件单元的位置、第一组件单元的位置和运动速度参数，计算运动组件的轨迹参数。在本实施例中，运动组件的运动速度保持不变，在整个运动过程中匀速运动，在实现来回弹动时，运动组件只有运动方向改变。

在另一些实施例中，所述根据第二组件单元的位置和第一组件单元的位置，计算运动组件的运动轨迹参数，其具体包括：

根据第二组件单元的位置、第一组件单元的位置和运动速度参数，计算运动组件从第二组件单元滑动到第一组件单元时的运动轨迹参数，然后根据第一组件单元的位置，计算运动组件以第一组件单元的中心位置为中心来回运动若干次时的运动轨迹参数。在本实施例中，根据运动速度参数设置运动组件从第二组件单元滑动到第一组件单元时的运动速度，而运动组件在来回运动时的速度为用户不可设置的值。

在另一些实施例中，所述根据第二组件单元的位置和第一组件单元的位置，计算运动组件的运动轨迹参数，其具体包括：

根据第二组件单元的位置和第一组件单元的位置，计算运动组件从第二组件单元滑动到第一组件单元时的运动轨迹参数，然后根据第一组件单元的位置和运动速度参数，计算运动组件以第一组件单元的中心位置为中心来回运动若干次时的运动轨迹参数。在本实施例中，根据运动速度参数设置运动组件在来回运动时的运动速度，而运动组件在从第二组件单元滑动到第一组件单元时的速度为用户不可设置的值。

在上述实施例中，根据第一组件单元和第二组件单元的位置，以及运动组件的运动速度，就可以算出从第二组件单元运动到第一组件单元时，运动组件的运动轨迹。

在执行来回运动时，只需要确定第一组件单元的位置，以及来回弹动时来回运动的次数和每次的运动距离，就可以得到运动组件在来回弹动时的运动轨迹。

本实施例增加了运动速度参数，使得动画组件的运动速度可以调节。所述运动速度参数被写在配置文件之中或者被放置在软件的设置单元之中，以便于用户进行调整。

作为优选的实施例，所述来回运动若干次，其具体为：

以运动距离逐次衰减的方式来回运动若干次。

在本实施例中，以运动距离逐次衰减的方式来回运动若干次，其具有更加自然的弹动效果，能够带来更好的视觉体验。

作为优选的实施例，所述运动组件在来回运动若干次时，每次的运动距离比上一次的运动距离减少预设的比例或者预设值。

在本实施例中，运动组件每次的运动距离比上一次减少50％，当然，这里所指的运动距离是指运动组件相对于第一组件单元中心的运动距离。

作为替代的实施例，设定运动组件每次的运动距离比上一次减少一个固定值，例如每次减少10个像素点，直到最终运动距离小于或者等于0才使运动组件停止运动。或者是运动组件的运动次数达到设定次数后才停止运动。

作为优选的实施例，所述运动组件在以第一组件单元的中心位置为中心来回运动若干次时的运动轨迹参数，通过spring插值器计算。

其中，所述spring插值器通过以下公式实现运动组件在来回运动时的运动轨迹的计算。

pow(2，-10*x)*sin((x-factor/4)*(2*π)/factor)+1。

其中，pow(a，b)运算表示求a的b次幂，在本实施例中，x表示时间变化值，factor为常数。在本实施例中，由于正弦函数的存在，本函数的抛出值会呈现衰减的正弦波形。

本实施例采用spring插值器来计算运动轨迹便于开发者将代码应用在不同的指示组件之中，即将本实施例应用在不同的指示组件中，无需反复修改运动轨迹。

作为优选的实施例，还包括以下步骤：

将第一组件单元从非选中状态切换为选中状态；

将第二组件单元从选中状态切换为非选中状态。

在本实施例之中，组件单元包括两个状态，即选中状态和非选中状态。组件单元在不同的状态下，显示效果不相同。例如，组件单元在选中状态下，文字为高亮状态，而其处于非选中状态时，文字为灰色状态。

本实施例将组件单元从选中状态和非选中状态中进行切换，使得被选中的组件单元具有更加醒目的标识。

本实施例公开了一种指示组件的动画效果的实现系统，包括：

获取单元，用于获取操作指令；

确定单元，用于根据操作指令确定被选中的第一组件单元的位置；

动画实现单元，用于根据第一组件单元的位置计算运动组件的运动轨迹参数，使运动组件根据运动轨迹参数以第一组件单元的中心位置为中心来回运动若干次。

本实施例公开了一种指示组件的动画效果的实现系统，包括：

存储器，用于存储程序；

处理器，用于加载所述程序以执行所述指示组件的动画效果的实现方法。

上述系统实施例能够实现与方法实施例相同的技术效果。

对于上述方法实施例中的步骤编号，其仅为了便于阐述说明而设置，对步骤之间的顺序不做任何限定，实施例中的各步骤的执行顺序均可根据本领域技术人员的理解来进行适应性调整。

以上是对本发明的较佳实施进行了具体说明，但本发明并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做作出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。