CN105022567B - 一种通过鼠标拖拽滑动切换界面的方法 - Google Patents

Abstract

本发明涉及一种通过鼠标拖拽滑动切换界面的方法。该方法主要用于通过鼠标拖拽滑动列表以使之在显示区域内滑动，通过滑动列表的滑动可切换多项显示列表分别在显示区域内的显示，该方法具体包括如下阶段：阶段S100，响应鼠标压下和鼠标移动事件；阶段S200，当鼠标释放压下的动作之后进入鼠标释放事件；阶段S300，滑动到达边缘后，超出边缘滑动和回弹滑动控制阶段。该方法通过鼠标拖拽滑动，然后利用简单的匀加（减）速直线运动组合而成的具有反弹效果的滑动动画技术，以及通过对鼠标滑动的监控，计算出鼠标滑动速度的技术，即可以实现流畅的滑动动画效果，该方法简单易操作，能有效解决通过鼠标拖拽滑动切换WinCE***界面的目的。

Description

一种通过鼠标拖拽滑动切换界面的方法

技术领域

本发明特别涉及一种通过鼠标拖拽滑动切换界面的方法。

背景技术

随着计算机技术的发展，现今的手机、电脑等设备的CPU速度越来越快，由此带来软件亦有着长足的发展，特别是在人机交互界面的操作性上，已变得越来越人性化。比如，现今普遍流行的智能手机上通过鼠标拖拽滑动切换页面的技术，就给了用户一种非常好的操作体验。该技术可以用在很多的人机交互界面上，比如，桌面图标页的左右页面切换；列表控件的垂直方向拖动；图片浏览的左右（上下）拖动切换等等。就目前而言，该效果在Android、ios等操作***上，由于***的支持，实现起来难度不大；但对于众多使用WinCE***的嵌入式设备，以及使用Window系列操作***的台式机电脑设备，想要实现此效果，由于操作***的不支持，则存在有不少的难度。

发明内容

本发明的目的在于提供一种通过鼠标拖拽滑动切换界面的方法。

本发明解决上述技术问题所采用的技术方案为：一种通过鼠标拖拽滑动切换界面的方法，所述界面包括一显示区域、及一个可在所述显示区域内滑动的且具有多项显示列表的滑动列表，所述的切换界面的方法主要用于通过鼠标拖拽所述滑动列表以使之在所述显示区域内滑动，通过所述滑动列表的滑动可切换所述多项显示列表分别在显示区域内的显示，该方法具体包括如下阶段：

阶段S1，获得鼠标在显示区域内的压下动作信息后进入鼠标移动事件，实时检测鼠标的所有移动过程，并记录下鼠标的移动信息，直至鼠标释放压下的动作；

阶段S2，当鼠标释放压下的动作之后进入鼠标释放事件，根据步骤S1中记录的鼠标的移动过程，计算出鼠标释放压下动作时的滑动速度，以此滑动速度作为滑动列表继续滑动的初速度、并以匀减速运动控制所述滑动列表在显示区域内顺势滑动；

阶段S3，根据步骤S2中滑动列表的滑动方向，当所述滑动列表向右滑动超出左边缘或向左滑动超出右边缘时，所述滑动列表进入反向回弹滑动阶段。

在优选的实施例中，所述阶段S1还包括：当获取鼠标压下动作信息后，首先判断所述滑动列表是否处于滑动过程中，如果是，则停止当前滑动列表的滑动动作、并标记鼠标已按下，如果否，则直接标记鼠标已按下，然后再进入鼠标移动事件；同时将鼠标的移动信息记录到一个队列Q中。

在优选的实施例中，所述阶段S2包括如下步骤：

步骤S210，响应鼠标释放事件，并在所述队列Q中取出鼠标在移动事件中的开始信息Qh和结尾信息Qe；

步骤S220，根据步骤S210中取出的开始信息Qh和结尾信息Qe计算出鼠标在释放时的运行初速度V0；

步骤S230，清除队列Q中的所有内容及鼠标已按下的信息；

步骤S240,预设一个最小速度Vmin，并判断步骤S220中的初速度V0是否小于该最小速度，如果是，则进入步骤S250，如果否，则进入步骤S260;

步骤S250，判断显示区域内当前显示列表的左边缘与显示区域左边缘之间的距离Io是否等于0，如果是，则鼠标释放事件完成，如果否，则进入步骤S251；

步骤S251,设置当前显示列表需要滑动的距离长度S=-Io,然后进入步骤S270；

步骤S260，预设一减速度a,并依据该减速度a和步骤S220中的初速度，计算出当滑动速度降为零时当前显示列表需要滑动的距离长度S；

步骤S261，计算出预计的滑动结束时滑动列表左侧边缘距离显示区域左侧边缘的距离Sr;

步骤S262，判断Sr是否位于显示区域的外部，如果是，则进入步骤S280，如果否，则进入步骤S263；

步骤S263，调整需要滑动的距离长度S为显示列表宽度的Iw的整倍数；

步骤S264，设置需要滑动的距离长度S=S-Io，然后进入步骤S270；

步骤S270，根据预设的减速度a和需要滑动的距离长度S，重新计算初速度V0；

步骤S280，根据鼠标释放时运行的起始点S0、预设的减速度a和需要滑动的距离长度S，启动滑动列表的滑动引擎；

步骤S290，鼠标释放事件处理完成。

在优选的实施例中，所述反向回弹滑动阶段包括减速滑动部分、反弹滑动的前1/3部分和反弹滑动的后2/3部分，所述1/3部分为加速运动，所述2/3部分为减速运动。

在优选的实施例中，所述滑动列表的滑动引擎用于定时提供匀加（减）速运动的最新位置点，供滑动控制使用，所述滑动引擎过程启动后，首先由定时器定时发出控制信息，响应定时器的定时消息后，滑动引擎执行如下步骤：

步骤S281：获取当前时间Tc；

步骤S282：计算与上次定时器消息之间的间隔时长 t = Tc-T0；

步骤S283：计算当前的速度Vc，计算采用如下的匀加速直线运动物理公式（a为负值）：Vc = V0 + a * t；

步骤S284：计算在t时间内滑行的距离S，计算采用如下的匀加速直线运动物理公式：S = V0 * t + a * t² / 2；

步骤S285：计算当前的位置点Sc = S0 + S；

步骤S286：保存当前状态作为下次定时消息的起始值：T0 = Tc；V0 = Vc；S0 =Sc；

步骤S287：发出消息，通知外界当前的位置点。外界响应该消息之后，就可以做相对应的处理；

步骤S288：判断Vc是否已达到零，假如是，则执行步骤S289；

步骤S289：发出消息，通知外界滑动速度已为零，外界响应该消息之后，可知滑动已结束，此时滑动引擎控制结束。

本发明通过鼠标拖拽滑动切换界面的方法的有益效果在于：该方法主要用于通过鼠标拖拽滑动列表以使之在显示区域内滑动，通过滑动列表的滑动可切换多项显示列表分别在显示区域内的显示，该方法具体包括如下阶段：阶段S1，响应鼠标压下和鼠标移动事件；阶段S2，当鼠标释放压下的动作之后进入鼠标释放事件；阶段S3，根据阶段S2中滑动列表的滑动方向，当所述滑动列表向右滑动超出左边缘或向左滑动超出右边缘时，滑动列表进入反向回弹滑动阶段。该方法通过按下鼠标并拖拽，然后利用简单的匀加（减）速直线运动组合而成的具有反弹效果的滑动动画技术，以及通过对鼠标滑动的监控，计算出鼠标滑动速度的技术，即可以实现流畅的滑动动画效果，该方法简单易操作，能有效解决通过鼠标拖拽滑动切换WinCE***界面的目的。

附图说明

图1为一实施例中通过鼠标拖拽滑动切换界面的方法的控制过程图。

图2为一实施例中滑动模型静态示意图。

图3为一实施例中鼠标压下事件处理流程图。

图4为一实施例中鼠标移动事件处理流程图。

图5为一实施例中鼠标释放事件处理流程图。

图6为一实施例中滑动引擎控制滑动过程的流程图。

图7为一实施例中边缘之外的反向回弹滑动阶段处理流程图。

图8为一实施例中滑动引擎的控制示意图。

图9为一实施例中模型滑动示意图a。

图10为一实施例中模型滑动示意图b。

图11为一实施例中模型滑动示意图c。

图12为一实施例中模型滑动示意图d。

具体实施方式

下面将结合具体实施例及附图对本发明通过鼠标拖拽滑动切换界面的方法作进一步详细描述。

一种通过鼠标拖拽滑动切换界面的方法，该界面包括一显示区域、及一个可在该显示区域内滑动的且具有多项显示列表的滑动列表。

请参见图2、图9至图12，为了更直观的描述，这里建立一个滑动模型，在图2中，有一个多项的列表（因为该列表为可滑动的，这里称为“滑动列表”）在显示区域内左右移动（亦可以上下移动，为阐述方便，这里只是列举了左右移动的例子，上下移动的原理是一样的）。该滑动列表的每一项都是等宽的，且每项宽度可以小于或者等于或者大于显示区域的宽度。并且，滑动列表的项数是没有限制的，可以是任意数量。

滑动列表在任何时刻都有一个当前项。当滑动列表静止时，当前项的左边缘总是与显示区域的左边缘对齐；当处在滑动时，当前项将会实时依据滑动的位置而改变，判断为当前项的依据是：左边缘最接近于显示区域左边缘的项为当前项。此规则表明：当前项左边缘的与显示区域左边缘的距离（Io）将一定小于 (1/2 * Iw)。通过Io和Iw，可以计算出滑动列表左边缘与显示区域左边缘的距离Sr = -(Iw * (当前项的序号) + Io)。该值也即是滑动列表相对显示区域的位置坐标值。如图9和图10所示。

更进一步，为了表现出更好的动画效果，当向右滑动超出滑动列表的第0项左边缘或向左滑动超出滑动列表的最后一项右边缘时，滑动仍会继续，不过，此时滑动将会遇到更大的阻力，使得滑动速度以更大的减速度减少到零。如图11和图12所示。

在滑动速度减少到零后，假如滑动已超出了边缘，则多项列表将进入与之前滑动方向相反的反向回弹运动阶段。在回弹的前1/3距离内，为匀加速运动阶段，滑动速度将从零开始逐步增大；当回弹超过1/3距离后，进入匀减速运动阶段，这时，通过计算获得恰当的减速度，使得当回弹抵达显示区域的边缘时，速度恰好为零。

以上为对整个滑动模型的描述。具体的实现方式如下：

请参见图1，本发明的切换界面的方法主要用于通过鼠标拖拽滑动列表以使之在显示区域内滑动，通过滑动列表的滑动可切换多项显示列表分别在显示区域内的显示，该方法具体包括如下阶段：

阶段S1，获得鼠标在显示区域内的压下动作信息后进入鼠标移动事件，实时检测鼠标的所有移动过程，并记录下鼠标的移动信息，直至鼠标释放压下的动作；

阶段S2，当鼠标释放压下的动作之后进入鼠标释放事件，根据步骤S1中记录的鼠标的移动过程，计算出鼠标释放压下动作时的滑动速度，以此滑动速度作为滑动列表继续滑动的初速度、并以匀减速运动控制所述滑动列表在显示区域内顺势滑动；

阶段S3，根据阶段S2中滑动列表的滑动方向，当所述滑动列表向右滑动超出左边缘或向左滑动超出右边缘时，所述滑动列表进入反向回弹滑动阶段。

请参见图3，阶段S1还包括：当获取鼠标压下动作信息后，首先判断滑动列表是否处于滑动过程中，如果是，则停止当前滑动列表的滑动动作、并标记鼠标已按下，如果否，则直接标记鼠标已按下，然后再进入鼠标移动事件；同时将鼠标的移动信息记录到一个队列Q中。

请参见图4，进入鼠标移动事件后，首先调整滑动列表的当前显示位置，然后将当前的鼠标信息，包括移动位置和移动瞬间的时间，记录到队列Q的结尾处，再取队列第一条记录的时间与当前时间相比，获得时间差，然后判断该时间差是否大于设定的时间值，如果是，则删除队列Q的第一条记录、并重新取队列第一条记录的时间与当前时间相比以获得时间差，如果否，则鼠标移动事件处理完成。

请参见图5，阶段S2包括如下步骤：

步骤S210，响应鼠标释放事件，并在队列Q中取出鼠标在移动事件中的开始信息Qh和结尾信息Qe；

步骤S220，根据步骤S210中取出的开始信息Qh和结尾信息Qe，将Qe与Qh的时间相减，可获取队列Q最近记录的时长Tm，并将Qe与Qh的鼠标位置相减，获得鼠标的运行距离Sm，以Sm/Tm，可以计算出鼠标在释放时的运行速度V0；由于滑动一般仅仅是水平方向滑动或仅仅是垂直方向滑动，因此，对于水平方向滑动，可以忽略鼠标的垂直方向的坐标变化；而对于垂直方向滑动，亦可以忽略鼠标的水平方向的坐标变化；

步骤S230，清除队列Q中的所有内容及鼠标已按下的信息；

步骤S240,预设一个最小速度Vmin，并判断步骤S220中的初速度V0是否小于该最小速度，如果是，则进入步骤S250，如果否，则进入步骤S260;

步骤S250，判断显示区域内当前显示列表的左边缘与显示区域左边缘之间的距离Io是否等于0，如果是，则鼠标释放事件完成，如果否，则进入步骤S251；

步骤S251,设置当前显示列表需要滑动的距离长度S=-Io,然后进入步骤S270；

步骤S260，预设一减速度a,并依据该减速度a和步骤S220中的初速度，计算出当滑动速度降为零时当前显示列表需要滑动的距离长度S；

步骤S261，计算出预计的滑动结束时滑动列表左侧边缘距离显示区域左侧边缘的距离Sr;

步骤S262，判断Sr是否位于显示区域的外部，如果是，则进入步骤S280，如果否，则进入步骤S263；

步骤S263，调整需要滑动的距离长度S为显示列表宽度的Iw的整倍数；

步骤S264，设置需要滑动的距离长度S=S-Io，然后进入步骤S270；

步骤S270，根据预设的减速度a和需要滑动的距离长度S，重新计算初速度V0；

步骤S280，根据鼠标释放时运行的起始点S0、预设的减速度a和需要滑动的距离长度S，启动滑动列表的滑动引擎；

步骤S290，鼠标释放事件处理完成。

在启动滑动引擎之后，请参见图6，进入滑动引擎控制阶段，滑动引擎将会定时的发出消息，告知当前的最新滑动位置，一直到滑动速度为零为止，在每次接收到最新的滑动位置消息的时候，判断滑动是否到达了边缘，假如到达了边缘，则进入到阶段S3；假如没有进入阶段S3而接收到滑动引擎发出的滑动速度降为零的消息，则表明滑动已经结束，整个滑动处理过程就此完成。

请参见图7，这是一个在边缘之外的反向回弹滑动阶段，其包括减速滑动部分、反弹滑动的前1/3部分和反弹滑动的后2/3部分，其1/3部分为加速运动，其2/3部分为减速运动。反弹的前部分和后部分组合，将实现如下的效果：反弹滑动启动→加速运动→反弹超过1/3距离→减速运动→恰好停止到显示区域的边缘，在进入阶段S3的瞬间，首先为滑动引擎设置一个更大的减速度，这就好比当滑动列表滑出边缘后，受到一个更大的阻力阻止其滑动。这是减速滑动部分。在设置了更大的减速度之后，滑动引擎继续定时发出消息，告知当前的滑动位置信息，直到滑动速度减为零为止。当接收到速度降为零消息之后，首先需要判断是否是已处于反弹的状态，假如是，表明反弹滑动已经结束，也亦是整个滑动过程已完成。否则，将依次执行如下的步骤：

步骤S33：滑动停止时的Sr值，为反弹运动的起点，这里定义为S0；

步骤S34：设置a = 预设的反弹加速度；

步骤S35：以a, V0, S0 作为参数，重新启动滑动引擎（此时V0=0，速度将越来越快）；

步骤S36：标记已进入了反弹状态。

在进入反弹状态之后，滑动引擎继续定时发出消息，告知当前的滑动位置信息。每次接收到一个新的滑动位置消息，将执行如下的步骤：

步骤S39：判断是否已有1/3反弹标志，假如有，则跳到步骤15；

步骤S3010：判断反弹是否已超过1/3的距离，假如没有，则跳到步骤15；

步骤S3011：取此时的Sr值为反弹滑动后部分的起点，定义为S0；

步骤S3012：设置当时的速度为V0，还需要滑动距离长度S = -S0，计算当滑动S距离后，速度为零的减速度a。计算公式如下：

a = -V02/(2*S)

步骤S3013：以a, V0, S0 作为参数，重新启动滚动引擎；

步骤S3014：标记已进入1/3反弹阶段；

步骤S3015：依据获取的最新滑动位置，设置滑动列表的新位置。

这些步骤完成之后，反弹滑动将进入到1/3反弹阶段。在1/3反弹阶段的速度降为零时，整个滑动过程完成。

至此，一个完整的通过鼠标拖拽实现平滑滑动的控制过程完成。

优选的，在整个滑动控制过程中，鼠标消息是由操作***发出的，这里只需要负责响应鼠标消息即可。但对于滑动引擎，是需要自己来实现。滑动引擎的目的是定时提供匀加（减）速运动的最新位置点，供滑动控制使用。

请参见图8，该图表示滑动引擎的控制示意图。从该图中可以看出，当启动滑动引擎之后，滑动引擎使用定时器来定时发出控制消息。

在响应定时器的定时消息之后，滑动引擎将执行如下的步骤，实现对滑动的处理：

步骤S1：获取当前时间Tc；

步骤S2：计算与上次定时器消息之间的间隔时长 t = Tc-T0；

步骤S3：计算当前的速度Vc，计算采用如下的匀加速直线运动物理公式（a为负值）：Vc = V0 + a * t；

步骤S4：计算在t时间内滑行的距离S，计算采用如下的匀加速直线运动物理公式：S = V0 * t + a * t² / 2；

步骤S5：计算当前的位置点Sc = S0 + S；

步骤S6：保存当前状态作为下次定时消息的起始值：T0 = Tc；V0 = Vc；S0 = Sc；

步骤S7：发出消息，通知外界当前的位置点。外界响应该消息之后，就可以做相对应的处理；

步骤S8：判断Vc是否已达到零，假如是，则执行步骤S9；

步骤S9：发出消息，通知外界滑动速度已为零。外界响应该消息之后，可知滑动已结束。

至此，滑动引擎部分设计完成。

综上，本发明通过鼠标拖拽滑动切换界面的方法，主要用于通过鼠标拖拽滑动列表以使之在显示区域内滑动，通过滑动列表的滑动可切换多项显示列表分别在显示区域内的显示，该方法具体包括如下阶段：阶段S1，响应鼠标压下和鼠标移动事件；阶段S2，当鼠标释放压下的动作之后进入鼠标释放事件；阶段S3，根据阶段S2中滑动列表的滑动方向，当所述滑动列表向右滑动超出左边缘或向左滑动超出右边缘时，滑动列表进入反向回弹滑动阶段。该方法利用简单的匀加（减）速直线运动组合而成的具有反弹效果的滑动动画技术，以及通过对鼠标滑动的监控，计算出鼠标滑动速度的技术，即可以实现流畅的滑动动画效果，通过在人机交互界面上采用鼠标拖拽滑动技术，可以实现界面切换的流畅滑动效果，能给予操作者一种良好的控制感觉。该技术不受操作***的局限，可以在任意适合的操作***上采用该技术来实现流畅的界面动画切换效果，该方法简单易操作，能有效解决通过鼠标拖拽滑动切换WinCE***界面的目的。

虽然对本发明的描述是结合以上具体实施例进行的，但是，熟悉本技术领域的人员能够根据上述的内容进行许多替换、修改和变化、是显而易见的。因此，所有这样的替代、改进和变化都包括在附后的权利要求的精神和范围内。

Claims (5)

1.一种通过鼠标拖拽滑动切换界面的方法，其特征在于：所述界面包括一显示区域、及一个可在所述显示区域内滑动的且具有多项显示列表的滑动列表，所述的切换界面的方法主要用于通过鼠标拖拽所述滑动列表以使之在所述显示区域内滑动，通过所述滑动列表的滑动可切换所述多项显示列表分别在显示区域内的显示，该方法具体包括如下步骤：

S1，获得鼠标在显示区域内的压下动作信息后进入鼠标移动事件，实时检测鼠标的所有移动过程，并记录下鼠标的移动信息，直至鼠标释放压下的动作；

S2，当鼠标释放压下的动作之后进入鼠标释放事件，根据步骤S1中记录的鼠标的移动过程，计算出鼠标释放压下动作时的滑动速度，以此滑动速度作为滑动列表继续滑动的初速度、并以匀减速运动控制所述滑动列表在显示区域内顺势滑动；

S3，根据阶段S2中滑动列表的滑动方向，当所述滑动列表向右滑动超出左边缘或向左滑动超出右边缘时，所述滑动列表进入反向回弹滑动阶段；

所述步骤S2包括如下步骤：

步骤S210，响应鼠标释放事件，并在记录有鼠标移动信息的队列Q中取出鼠标在移动事件中的开始信息Qh和结尾信息Qe；

步骤S220，根据步骤S210中取出的开始信息Qh和结尾信息Qe计算出鼠标在释放时的运行初速度V0；

步骤S230，清除队列Q中的所有内容及鼠标已按下的信息；

步骤S240,预设一个最小速度Vmin，并判断步骤S220中的初速度V0是否小于该最小速度，如果是，则进入步骤S250，如果否，则进入步骤S260；

步骤S250，判断显示区域内当前显示列表的左边缘与显示区域左边缘之间的距离Io是否等于0，如果是，则鼠标释放事件完成，如果否，则进入步骤S251；

步骤S251，设置当前显示列表需要滑动的距离长度S=-Io，然后进入步骤S270；

步骤S260，预设一减速度a,并依据该减速度a和步骤S220中的初速度，计算出当滑动速度降为零时当前显示列表需要滑动的距离长度S；

步骤S261，计算出预计的滑动结束时滑动列表左侧边缘距离显示区域左侧边缘的距离Sr;

步骤S262，判断Sr是否位于显示区域的外部，如果是，则进入步骤S280，如果否，则进入步骤S263；

步骤S263，调整需要滑动的距离长度S为显示列表宽度的Iw的整倍数；

步骤S264，设置需要滑动的距离长度S=S-Io，然后进入步骤S270；

步骤S270，根据预设的减速度a和需要滑动的距离长度S，重新计算初速度V0；

步骤S280，根据鼠标释放时运行的起始点S0、预设的减速度a和需要滑动的距离长度S，启动滑动列表的滑动引擎；

步骤S290，鼠标释放事件处理完成。

2.根据权利要求1所述的通过鼠标拖拽滑动切换界面的方法，其特征在于，所述阶段S1还包括：当获取鼠标压下动作信息后，首先判断所述滑动列表是否处于滑动过程中，如果是，则停止当前滑动列表的滑动动作、并标记鼠标已按下，如果否，则直接标记鼠标已按下，然后再进入鼠标移动事件；同时将鼠标的移动信息记录到一个队列Q中。

3.根据权利要求1所述的通过鼠标拖拽滑动切换界面的方法，其特征在于，所述反向回弹滑动阶段包括减速滑动部分、反弹滑动的前1/3部分和反弹滑动的后2/3部分，所述1/3部分为加速运动，所述2/3部分为减速运动。

4.根据权利要求3所述的通过鼠标拖拽滑动切换界面的方法，其特征在于，所述滑动列表的滑动引擎用于定时提供匀加速运动或匀减速运动的最新位置点，供滑动控制使用，所述滑动引擎过程启动后，首先由定时器定时发出控制信息，响应定时器的定时消息后，滑动引擎执行如下步骤：

步骤S281：获取当前时间Tc；

步骤S282：计算与上次定时器消息之间的间隔时长 t = Tc-T0；

步骤S283：计算当前的速度Vc，计算采用如下的匀加速直线运动物理公式：Vc = V0 +a * t；其中a为负值；

步骤S284：计算在t时间内滑行的距离S，计算采用如下的匀加速直线运动物理公式：S= V0 * t + a * t² / 2；

步骤S285：计算当前的位置点Sc = S0 + S；

步骤S286：保存当前状态作为下次定时消息的起始值：T0 = Tc；V0 = Vc；S0 = Sc；

步骤S287：发出消息，通知外界当前的位置点。

5.根据权利要求4所述的通过鼠标拖拽滑动切换界面的方法，其特征在于，外界响应该消息之后，就可以做相对应的处理；

步骤S288：判断Vc是否已达到零，假如是，则执行步骤S289；

步骤S289：发出消息，通知外界滑动速度已为零，外界响应该消息之后，可知滑动已结束，此时滑动引擎控制结束。