实现界面元素跟随的方法及装置技术领域
本发明涉及人机交互领域，尤其涉及一种实现界面元素跟随的方法及实现界面元
素跟随的装置。
背景技术
随着移动通信的技术的快速发展，用户在移动终端上进行操作时，移动终端会根
据用户的操作呈现出不同的视觉效果。
例如，在iOS平台的主界面上，在用户手持移动终端进行转动时，属于不同层级的
界面元素会根据移动终端的转动而进行转动，且在转动到预设位置时，产生瞬时的错位，进
而给用户产生层级错位感。在iOS平台的主界面上通过根据重力感应器3个轴的加速度分量
设置界面根节点的旋转参数，并结合控制程序实现层级错位的效果。
在上述方式中，一方面，层级错位表现的效果较弱，不能给用户带来较好的体验；
另一方面，通过上述方式对两个层级进行控制时，能表现出相对明显的层级错位的效果，但
在层级增多时，表现出的层级错位的效果就很不明显。
需要说明的是，上述背景技术部分公开的信息仅用于加强对本公开的背景的理
解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。
发明内容
本公开的目的在于提供一种实现界面元素跟随的方法及实现界面元素跟随的装
置，进而至少在一定程度上克服由于相关技术的限制和缺陷而导致的一个或者多个问题。
根据本公开的一个方面，提供一种实现界面元素跟随的方法，包括：
根据界面元素层级的不同将不同层级的所述界面元素分配到不同半径的同心球
面上；
对不同的所述层级的所述界面元素设定不同的减速回弹时间，并在一预设动作的
响应区域内检测是否接收到所述预设动作；
在检测接收到所述预设动作时，控制不同的所述层级的所述界面元素沿着分配的
球面以一预设方向运动；
在不同的所述层级中的所述界面元素运动到一预设位置时，使不同的所述层级的
所述界面元素基于设定的所述减速回弹时间分别进行制动。
在本公开的一种示例性实施例中，所述预设动作为拖动动作。
在本公开的一种示例性实施例中，所述预设动作为使呈现所述界面元素的移动终
端转动的动作。
在本公开的一种示例性实施例中，所述预设方向为跟随所述预设动作的方向或背
离所述预设动作的方向。
在本公开的一种示例性实施例中，所述层级包括美术场景层、通用底板层以及至
少一个前景层。
在本公开的一种示例性实施例中，还包括，对不同的所述层级的所述界面元素进
行缩放，包括：
设定一基准界面元素，并对所述基准界面元素进行一预设缩放比例的缩放；
根据所述基准界面元素设定灭点距离以及观察点到基准界面元素的距离；
基于所述预设缩放比例、所述灭点距离、所述观察点到基准界面元素的距离以及
待校正的所述界面元素到观察点的距离根据一预设算法计算出待校正的所述界面元素的
缩放比例，并根据该所述缩放比例对待校正的所述界面元素进行缩放。
根据本公开的一个方面，提供一种实现界面元素跟随的装置，包括：
分配模块，用于根据界面元素层级的不同将不同层级的所述界面元素分配到不同
半径的同心球面上；
设定模块，用于对不同的所述层级的所述界面元素设定不同的减速回弹时间，并
在一预设动作的响应区域内检测是否接收到所述预设动作；
控制模块，用于在检测接收到所述预设动作时，控制不同的所述层级的所述界面
元素沿着分配的球面以一预设方向运动；
制动模块，用于在不同的所述层级中的所述界面元素运动到一预设位置时，使不
同的所述层级的所述界面元素基于设定的所述减速回弹时间分别进行制动。
在本公开的一种示例性实施例中，所述预设动作为拖动动作。
在本公开的一种示例性实施例中，所述预设动作为使呈现所述界面元素的移动终
端转动的动作。
在本公开的一种示例性实施例中，所述预设方向为跟随所述预设动作的方向或背
离所述预设动作的方向。
在本公开的一种示例性实施例中，所述层级包括美术场景层、通用底板层以及至
少一个前景层。
在本公开的一种示例性实施例中，还包括，缩放模块，包括：
第一设定单元，用于设定一基准界面元素，并对所述基准界面元素进行一预设缩
放比例的缩放；
第二设定单元，用于根据所述基准界面元素设定灭点距离以及观察点到基准界面
元素的距离；
缩放单元，用于基于所述预设缩放比例、所述灭点距离、所述观察点到基准界面元
素的距离以及待校正的所述界面元素到观察点的距离根据一预设算法计算出待校正的所
述界面元素的缩放比例，并根据该所述缩放比例对待校正的所述界面元素进行缩放。
本公开一种示例性实施例提供的实现界面元素跟随的方法，通过对不同的层级的
界面元素设定不同的减速回弹时间，在检测接收到预设动作时，控制不同的层级的界面元
素沿着分配的球面以一预设方向运动到一预设位置，且在不同的层级的界面元素到达预设
位置时，使不同的层级的界面元素基于设定的减速回弹时间分别进行制动。一方面，通过对
不同的层级的界面元素设定不同的减速回弹时间，使不同的层级的界面元素到位的时间存
在细微差别，产生依次到位的效果，增强了视觉上的层级错位感，进而从视觉上带来更强的
3D效果，给用户带来更好的体验。另一方面，由于不需要根据重力感应器3个轴的加速度分
量设置界面根节点的旋转参数来实现层级错位的效果，仅通过给不同层级的界面元素设定
不同的减速回弹时间即可实现层级错位的效果，因此，在层级较多的时候，层级错位的效果
也比较明显。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不
能限制本公开。
附图说明
通过参照附图来详细描述其示例实施例，本公开的上述和其它特征及优点将变得
更加明显。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技
术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图
中：
图1为本公开一种实现界面元素跟随的方法的流程图。
图2为本公开一示例性实施例中不同半径的同心球面的示意图。
图3为本公开一示例性实施例中根据三角形平行截线计算方法计算缩放比例的示
意图。
图4为本公开一种实现界面元素跟随的装置的框图。
具体实施方式
现在将参考附图更全面地描述示例实施例。然而，示例实施例能够以多种形式实
施，且不应被理解为限于在此阐述的实施例；相反，提供这些实施例使得本公开将全面和完
整，并将示例实施例的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示
相同或类似的部分，因而将省略对它们的重复描述。
此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施
例中。在下面的描述中，提供许多具体细节从而给出对本公开的实施例的充分理解。然而，
本领域技术人员将意识到，可以实践本公开的技术方案而没有所述特定细节中的一个或更
多，或者可以采用其它的方法、组元、材料、装置、步骤等。在其它情况下，不详细示出或描述
公知结构、方法、装置、实现、材料或者操作以避免模糊本公开的各方面。
附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。
即，可以采用软件形式来实现这些功能实体，或在一个或多个软件硬化的模块中实现这些
功能实体或功能实体的一部分，或在不同网络和/或处理器装置和/或微控制器装置中实现
这些功能实体。
本示例性实施例中首先公开了一种实现界面元素跟随的方法。参考图1所示，该实
现界面元素跟随的方法包括以下步骤：
步骤S110.根据界面元素层级的不同将不同层级的所述界面元素分配到不同半径
的同心球面上；
步骤S120.对不同的所述层级的所述界面元素设定不同的减速回弹时间，并在一
预设动作的响应区域内检测是否接收到所述预设动作；
步骤S130.在检测接收到所述预设动作时，控制不同的所述层级的所述界面元素
沿着分配的球面以一预设方向运动；
步骤S140.在不同的所述层级的所述界面元素运动到一预设位置时，使不同的所
述层级中的所述界面元素基于设定的所述减速回弹时间分别进行制动。
根据本示例实施例中的实现界面元素跟随的方法，一方面，通过对不同的层级的
界面元素设定不同的减速回弹时间，使不同的层级的界面元素到位的时间存在细微差别，
产生依次到位的效果，增强了视觉上的层级错位感，进而从视觉上带来更强的3D效果，给用
户带来更好的体验。另一方面，由于不需要根据重力感应器3个轴的加速度分量设置界面根
节点的旋转参数来实现层级错位的效果，仅通过给不同层级的界面元素设定不同的减速回
弹时间即可实现层级错位的效果，因此，在层级较多的时候，层级错位的效果也比较明显。
下面，将参考图1对本示例实施例中的实现界面元素跟随的方法作进一步说明。
在步骤S110中根据界面元素层级的不同将不同层级的所述界面元素分配到不同
半径的同心球面上。
在本示例性实施例中，所述界面元素可以为工具栏，也可以为菜单、还可以为对话
框或状态提示栏等，本示例性实施例在此不做特殊限定。如图2所示，所述不同半径的同心
球面可以为以观察点为共同圆心的不同半径的球体与观察点的观察范围相交的球面。
在本示例性实施例中，可以在平行于触控界面的平面上设置X轴以及Y轴，在垂直
于触控界面的方向上设置一Z轴(即纵深坐标)。该Z轴可以通过填表方式在程序客户端进行
设置。通过设置Z轴为所有界面元素添加了Z轴坐标，可以根据界面元素的Z轴坐标来确定该
界面元素所处的层级。上述不同半径的同心球面与Z轴垂直，且不同半径的同心球面在Z轴
上对应不同的坐标。根据不同半径的同心球面在Z轴上的坐标将不同半径的同心球面与元
素所处的层级进行一一关联。在根据界面元素层级的不同将不同层级的所述界面元素分配
到不同半径的同心球面上时，首先可以通过界面元素在Z轴上的坐标判断该元素界面所处
的层级，然后根据元素所处的层级确定与该层级相关联的同心球面，最后将该界面元素分
配到该同心球面上。
在本公开的另一实施例里中，所述层级可以包括美术场景层、通用底板层以及至
少一个前景层。可以将属于美术场景层的界面元素分配到同心球面3上，将属于通用底板层
的界面元素分配到同心球面2上，将属于前景层的界面元素分配到同心球面1上。
步骤S120.对不同的所述层级的所述界面元素设定不同的减速回弹时间，并在一
预设动作的响应区域内检测是否接收到所述预设动作。
在本示例性实施例中，通过程序给不同的层级的界面元素设定不同的减速回弹时
间。例如，属于美术场景层的界面元素的减速回弹时间可以设置为0s，即在属于美术场景层
的界面元素运动至预设位置时，不产生减速回弹的效果。属于通用底板层的界面元素的减
速回弹时间可以设置为0.5s，即在属于通用底板层的界面元素运动至预设位置时，产生减
速回弹的效果且减速回弹的时间为0.5s。属于前景层的界面元素的减速回弹时间可以设置
为1s，即在属于前景层的界面元素运动至预设位置时，产生减速回弹的效果且减速回弹的
时间为1s。通过对不同的层级的界面元素设定不同的减速回弹时间，使不同的层级的界面
元素到位的时间存在细微差别，产生依次到位的效果，增强了视觉上的层级错位感，进而从
视觉上带来更强的3D效果，且在用户使用的过程中，使用户有更好的体验。另外，由于不需
要根据重力感应器3个轴的加速度分量设置界面根节点的旋转参数来实现层级错位的效
果，仅通过给不同层级的界面元素设定不同的减速回弹时间即可实现层级错位的效果，因
此，在层级较多的时候，层级错位的效果也比较明显。
所述预设动作的响应区域可以为触控界面的全部区域，也可以为触控界面的一部
分区域，本示例性实施例对此不作特殊限定。例如可以由开发商自行设定。所述预设动作可
以为拖动动作，还可以为滑动动作。在本公开的另一实施例中，所述预设动作也可以为使呈
现所述界面元素的移动终端转动的动作。具体的，可以在系统中设置一检测模块，通过检测
模块检测预设动作的触发信号，在检测到预设动作的触发信号时，则判定接收到预设动作。
在步骤S130中在检测接收到所述预设动作时，控制不同的所述层级的所述界面元
素沿着分配的球面以一预设方向运动。
在本示例性实施例中，所述预设方向可以为上，也可以为下，还可以为顺时针，本
示例性实施例对此不做特殊限定。在本公开的另一实施例中，所述预设方向可以为跟随所
述预设动作的方向或背离所述预设动作的方向。举例说明，预设动作的方向为左时，预设方
向可以为左，也可以为右。预设动作的方向为顺时针时，预设方向可以为顺时针，也可以为
逆时针。
在系统检测接收到预设动作时，通过程序控制不同的层级的界面元素沿着分配的
球面以一预设方向运动。
例如，预设动作为方向向左的拖动动作，在系统接收到上述拖动动作时，不同的层
级的界面元素可以沿着分配的球面向左运动，或者向右运动。再例如，预设动作为使呈现所
述界面元素的移动终端以顺时针的方向转动的动作，在系统接收到上述使呈现所述界面元
素的移动终端以顺时针的方向转动的动作时，不同的层级的界面元素可以沿着分配的球面
顺时针转动，或者逆时针转动。
在步骤S140中，在不同的所述层级中的所述界面元素运动到一预设位置时，使不
同的所述层级的所述界面元素基于设定的所述减速回弹时间分别进行制动。
在本示例性实施例中，所述预设位置可以根据预设动作确定。例如，预设动作为滑
动动作时，预设位置为界面元素沿着分配的球面运动的极限位置。预设动作为拖动动作时，
预设位置为界面元素沿着分配的球面运动到拖动动作结束的位置，本示例性实施例对此不
作特殊限定。在不同层级的界面元素运动到预设位置时，使不同的层级中的界面元素分别
按照设定的减速回弹时间进行制动。例如，所述层级可以包括美术场景层、通用底板层以及
前景层。设置美术场景层的界面元素的减速回弹时间为0s，通用底板层的界面元素的减速
回弹时间为0.5s，前景层的界面元素的减速回弹时间为1s。在美术场景层的界面元素、通用
底板层的界面元素以及前景层的界面元素运动到预设位置时，由于美术场景层的界面元素
的减速回弹时间是0s，因此美术场景层的界面元素在运动到预设位置时，会立刻停在预设
位置。由于通用底板层的界面元素的减速回弹时间为0.5s，因此，在通用底板层的界面元素
运动到预设位置时，通用地板层的界面元素会经过0.5s的减速回弹运动且在0.5s后停在预
设位置。由上可知，在前景层的界面元素运动到预设位置时，前景层的界面元素会经过1s的
减速回弹运动且在1s后停在预设位置。通过上述过程，使不同层级的界面元素按照设定的
减速回弹时间分别进行制动，且使得不同层级的界面元素的到位时间存在差别，产生依次
到位的效果，增强了视觉上的层级错位感，进而从视觉上带来更强的3D效果。
进一步的，为了使不同层级的界面元素达到同样的视觉比例，还可以包括，对不同
的所述层级的所述界面元素进行缩放，可以包括：
设定一基准界面元素，并对所述基准界面元素进行一预设缩放比例的缩放；根据
所述基准界面元素设定灭点距离以及观察点到基准界面元素的距离；基于所述预设缩放比
例、所述灭点距离、所述观察点到基准界面元素的距离以及待校正的所述界面元素到观察
点的距离根据一预设算法计算出待校正的所述界面元素的缩放比例，并根据该所述缩放比
例对待校正的所述界面元素进行缩放。
在本示例性实施例中，所述基准界面元素可以为Z轴坐标为0的界面元素，也可以
是Z轴坐标为1的界面元素，本示例性实施例对此不作特殊限定。所述预设缩放比例可以为
1，即不进行缩放，也可以为2，开发商还可以根据具体的需求进行设定。所述预设算法可以
为三角形平行截线计算方法。在本公开的其他实施例中，还可以根据具体的需求选择其他
算法。
下面经通过具体的例子对上述过程做进一步说明：
如图3中所示，首先，设S点为观察点，Z＝0的界面元素为基准界面元素，预设缩放
比例为1，即对基准界面元素不进行缩放；然后，设灭点距离SV＝a，观察点到基准界面元素
的距离SP1＝b；最后，利用三角形平行截线计算方法计算界面元素KP2的缩放比例，其中，观
察点到界面KP2的距离即SP2＝x，∠QVK的正切值为q，界面元素KP2的原始尺寸为1，即KP2＝
1。通过正切函数，可以计算出![]()
则![]()
即界用户不需要通过繁琐的操作
就可以实现目标需求。
界面元素KP2的视觉长度为![]()
为了将界面元素KP2的视觉尺寸变为1，需要对
界面元素KP2进行缩放，其缩放比例为![]()
需要注意的是，上述附图仅是根据本发明示例性实施例的方法所包括的处理的示
意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时
间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。
本示例性实施例中还公开了一种实现界面元素跟随的装置，参照图4所示，该实现
界面元素跟随的装置200可以包括：分配模块201、设定模块202、控制模块203、制动模块
204。其中：
分配模块201可以用于根据界面元素层级的不同将不同层级的所述界面元素分配
到不同半径的同心球面上；
设定模块202可以用于对不同的所述层级的所述界面元素设定不同的减速回弹时
间，并在一预设动作的响应区域内检测是否接收到所述预设动作；
控制模块203可以用于在检测接收到所述预设动作时，控制不同的所述层级的所
述界面元素沿着分配的球面以一预设方向运动；
制动模块204可以用于在不同的所述层级中的所述界面元素运动到一预设位置
时，使不同的所述层级的所述界面元素基于设定的所述减速回弹时间分别进行制动。
在另一示例性实施例中，所述预设动作可以为拖动动作。
在另一示例性实施例中，所述预设动作可以为使呈现所述界面元素的移动终端转
动的动作。
在另一示例性实施例中，所述预设方向可以为跟随所述预设动作的方向或背离所
述预设动作的方向。
在另一示例性实施例中，所述层级可以包括美术场景层、通用底板层以及至少一
个前景层。
在另一示例性实施例中，还可以包括，缩放模块，包括：
第一设定单元可以用于设定一基准界面元素，并对所述基准界面元素进行一预设
缩放比例的缩放；
第二设定单元可以用于根据所述基准界面元素设定灭点距离以及观察点到基准
界面元素的距离；
缩放单元可以用于基于所述预设缩放比例、所述灭点距离、所述观察点到基准界
面元素的距离以及待校正的所述界面元素到观察点的距离根据一预设算法计算出待校正
的所述界面元素的缩放比例，并根据该所述缩放比例对待校正的所述界面元素进行缩放。
上述中各实现界面元素跟随的装置模块的具体细节已经在对应的实现界面元素
跟随的方法中进行了详细的描述，因此此处不再赘述。
应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单
元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多
模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模
块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。
通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施
方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本发明
实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失
性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算
设备(可以是个人计算机、服务器、电子设备、或者网络设备等)执行根据本发明实施方式的
方法。
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其
它实施例。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者
适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或
惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由权利要求
指出。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并
且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限。