显示视图控件动态效果的方法及装置与流程

本发明涉及互联网技术领域，尤其涉及一种显示视图控件动态效果的方法及装置。

背景技术：

浏览器页面中常常嵌有图像窗口，用于显示静态或动态的视图控件(Image View)。此外，一些系统原生或第三方开发的应用程序中也会内嵌这种图像窗口，较为常见的包括操作系统的桌面背景，或者天气类应用中显示阴晴雨雪图标的窗口等。

当图像窗口用以显示动态视图控件时，视图控件的动态效果往往是程序预先设置好的，例如雨点从上飘落至下，或者信息标签按照预定轨迹进行循环位移等。这种动态效果样式呆板，无法对用户操作进行响应，不具有交互性能。

技术实现要素：

本发明提供一种显示视图控件动态效果的方法及装置，能够解决图像窗口欠缺交互功能的问题。

为解决上述问题，第一方面，本发明提供了一种显示视图控件动态效果的方法，包括：

检测终端相对终端本体上预设坐标轴的旋转角度；

根据所述旋转角度确定图像窗口中视图控件的位移方向和位移长度，所述图像窗口为终端提供的可视化部件；

按照所述位移方向及所述位移长度，显示所述视图控件在所述图像窗口中移动的动态效果。

第二方面，本发明还提供了一种显示视图控件动态效果的装置，包括：

检测单元，用于检测终端相对终端本体上预设坐标轴的旋转角度；

确定单元，用于根据所述旋转角度确定图像窗口中视图控件的位移方向和位移长度，所述图像窗口为终端提供的可视化部件；

显示单元，用于按照所述位移方向及所述位移长度，显示所述视图控件在所述图像窗口中移动的动态效果。

第三方面，本发明还提供了一种显示视图控件动态效果的装置，包括：

方向传感器，被配置为检测终端相对终端本体上预设坐标轴的旋转角度；

处理器，被配置为根据所述旋转角度确定图像窗口中视图控件的位移方向和位移长度，所述图像窗口为终端提供的可视化部件；

显示器，被配置为按照所述位移方向及所述位移长度，显示所述视图控件在所述图像窗口中移动的动态效果；

存储器，被配置为存储所述处理器的可执行指令；

总线，被配置为耦接所述方向传感器、所述处理器、所述显示器及所述存储器。

本发明提供的显示视图控件动态效果的方法及装置，能够通过检测终端相对预设坐标轴的旋转角度捕捉到终端在三维空间中的姿态变化，根据该姿态变化确定出图像窗口中视图控件的位移方向和位移长度，并据此显示视图控件在图像窗口中移动的动态效果。与现有技术中按照预定程序展示动态效果相比，本发明能够基于终端握持方式的变化调整图像窗口中动画元素的动态效果，从而实现具有人机交互功能的图像展示方式。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了本发明实施例提供的一种显示视图控件动态效果的方法流程图；

图2示出了本发明实施例中终端X轴、Y轴、Z轴的示意图；

图3a示出了本发明实施例中终端围绕X轴旋转的示意图；

图3b示出了本发明实施例中终端围绕Y轴旋转的示意图；

图3c示出了本发明实施例中终端围绕Z轴旋转的示意图；

图4示出了本发明实施例中位移方向所在延长线与Y轴之间存在夹角的示意图；

图5a和图5b分别示出了本发明实施例中旋转角度与位移方向关系的示意图；

图6a和图6b分别示出了本发明实施例中包含视图控件的图像窗口的示意图；

图7示出了本发明实施例提供的另一种显示视图控件动态效果的方法流程图；

图8示出了本发明实施例提供的映射表的示意图；

图9a和图9b分别示出了本发明实施例中位移长度与旋转角度数值之间关系的示意图；

图10示出了本发明实施例中另一种位移长度与旋转角度数值之间关系的示意图；

图11a和图11b分别示出了本发明实施例中终端围绕Y轴旋转的动态效果的示意图；

图12a和图12b分别示出了本发明实施例中终端围绕X轴旋转的动态效果的示意图；

图13a和图13b分别示出了本发明实施例中终端围绕Z轴旋转的动态效果的示意图；

图14a和图14b示出了本发明实施例中终端围绕X轴及Y轴旋转的动态效果的示意图；

图15a和图15b示出了本发明实施例中终端围绕X轴及Z轴旋转的动态效果的示意图；

图16示出了本发明实施例提供的一种显示视图控件动态效果的装置的组成框图；

图17示出了本发明实施例提供的另一种显示视图控件动态效果的装置的组成框图；

图18示出了本发明实施例提供的又一种显示视图控件动态效果的装置的组成框图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

为解决现有技术中图像窗口的显示方式欠缺交互功能的问题，本发明实施例提供一种显示视图控件动态效果的方法。该方法应用于终端侧，所述终端包括但不限于是：手机、平板电脑、可穿戴式设备。实际应用中，一切具有角度检测功能以及图像输出功能的便携式设备均可实现本发明实施例提供的方法。

如图1所示，该方法包括：

101、检测终端相对终端本体上预设坐标轴的旋转角度。

终端通过其自带的检测部件获取旋转角度参数，该部件可以内置于终端中，也可以集成在终端外壳上。实际应用中，该检测部件具体可以是方向传感器。

所述预设坐标轴是以终端终端本体为参照系设置的，如图2所示，与手机宽边平行的为X轴、与手机长边平行的为Y轴、垂直于手机屏幕所在平面的为Z轴。

如图3a所示，如果将手机屏幕朝上放置在水平桌面上，将手机顶部逐渐抬起，或者将手机底部逐渐抬起，那么手机将围绕X轴转动，方向传感器检测到手机相对X轴的旋转角度。实际应用中，手机围绕X轴旋转的角度变化范围为[-180°,+180°]。具体的，当手机屏幕朝上放置在水平桌面上时，X轴的旋转角度为0°，当将手机顶部逐渐抬起直至手机屏幕朝下放置在水平桌面上时，手机向后翻转了180°，此时X轴的旋转角度为-180°；与此相反，当将手机底部逐渐抬起直至手机屏幕朝下放置在水平桌面上时，手机向前翻转了180°，此时X轴的旋转角度为+180°。

如图3b所示，如果将手机屏幕朝上放置在水平桌面上，将手机左侧逐渐抬起，或者将手机右侧逐渐抬起，那么手机将围绕Y轴转动，方向传感器检测到手机相对Y轴的旋转角度。实际应用中，手机围绕Y轴旋转的角度变化范围为[-90°,+90°]。具体的，当手机屏幕朝上放置在水平桌面上时，Y轴的旋转角度为0°，当将手机左侧逐渐抬起直至手机垂直于水平桌面时，手机向右翻转了90°，此时Y轴的旋转角度为-90°；与此相反，当将手机右侧逐渐抬起直至手机垂直于水平桌面时，手机向左翻转了180°，此时Y轴的旋转角度为+90°。

如图3c所示，如果将手机屏幕朝上放置在水平桌面上，使手机在水平平面上做顺时针或逆时针旋转时，手机将围绕Z轴转动，方向传感器检测到手机相对Z轴的旋转角度。实际应用中，手机围绕Z轴旋转的角度变化范围为[0°,360°)。具体的，当手机屏幕朝上放置在水平桌面上时，手机顶部分别朝向正东、正南、正西、正北四个方向时的Z轴的旋转角度依次为：90°、180°、270°及0°。

本实施例中，方向传感器对Z、X、Y三轴的旋转角度进行实时检测，并分别记做参数values[0]、values[1]和values[2]。终端可以利用其中任意一个坐标轴的旋转角度调整动态效果，也可以结合其中任意两个或三个坐标轴的旋转角度对动态效果进行合成，本发明后续实施例将对此进行介绍。

需要说明的是，上述坐标轴是为方便构建三维坐标系而虚构的，并不具有可见形态，也不会对终端的外观造成破坏。

102、根据旋转角度确定图像窗口中视图控件的位移方向和位移长度。

终端中可以预先配置旋转角度与位移方向之间的映射关系，该关系可以基于具体的设计需求设置。在本实施例的一种实现方式中，旋转角度与位移方向之间的映射关系可以被配置为：位移方向所在延长线与坐标轴成预设角度值的夹角。以终端围绕Y轴旋转为例，图4给出了几种不同夹角值的情况，当终端围绕Y轴旋转时，图像窗口中的视图控件可以按照图4中虚线所示方向移动。

进一步的，在位移方向所在延长线上，还具有两个方向相反的位移方向，本实施例中同样可以基于具体的设计需求设置视图控件在该延长线上的具体位移方向。仍以Y轴为例，当视图控件为云彩、气球等元素时，为追求轻质物体向上漂浮的设计效果，可以配置视图控件的位移方向与终端的旋转方向相反，例如在图5a中，当终端左侧向上抬起以围绕Y轴向右旋转时，可以配置视图控件向图像窗口左侧移动；与此相反的，当视图控件为小球、砖块等元素时，为追求重质物体向下滚动的设计效果，可以配置视图控件的位移方向与终端的旋转方向一致，例如在图5b中，当终端左侧向上抬起以围绕Y轴向右旋转时，可以配置视图控件向图像窗口右侧移动。

对于位移长度，终端中也可以预先配置好旋转角度与位移长度之间的映射关系或计算关系。此外，终端中还可以配置不同的位移形式，例如做抛物线式的曲线运动，或者做破浪线式的迂回运动，或者基于运动轨迹上的预设离线点做跳跃运动等。为便于说明和理解，本实施例将以直线运动为例进行说明。

103、按照位移方向及位移长度，显示视图控件在图像窗口中移动的动态效果。

本实施例主要针对图像窗口中的视图控件实现动态移动效果，所述图像窗口为终端提供的可视化部件，可以由终端的操作系统提供该可视化部件的调用接口，操作系统的原生应用程序或者第三方应用程序可以通过接口调用的形式展示图像窗口。所述视图控件是指图像窗口中呈现的图像元素。本实施例中，视图控件可以是图像视图控件，例如图6a中的树木、云彩、手指等，或者视图控件也可以是文字视图控件，例如图6b中对话框里显示的字符等。这些图像元素是图像窗口的组成部分之一，与一般意义上以文件形式存储的照片不同，图像元素通常以控件的形式存在，在程序开发、运行阶段可以单独进行设计和控制。本实施例中，可以对图像窗口中可以移动的视图控件进行预先设定，本实施例不对视图控件的属性和数量进行限制。

在按照位移方向和位移长度移动视图控件时，终端需要不断绘制并呈现许多静态形式的图像窗口的图像帧，这些图像帧串联起来便实现了视图控件的动态效果。本实施例中，视图控件每产生一个长度步进值的位移变化时，终端绘制并呈现一个对应的图像帧。所述长度步进值是指视图控件移动的最小单位长度，该值可以预先进行设置，实际应用中可以使用像素点数量度量长度步进值，例如可以将长度步进值设置为10个像素点、5个像素点等。在对动态效果流畅度要求较为严格的情况下，长度步进值的最小粒度可以为1个像素点，此时，假设位移长度为1000个像素点，那么理论上终端需要绘制1000个图像帧以展示完整的动态效果。

需要说明的是，在终端旋转的过程中，图1所示流程是不断重复执行的，这是由于：方向传感器对角度变化的检测是实时进行的，在终端旋转的过程中，方向传感器不断返回新的旋转角度值。在方向传感器每获得一个新的旋转角度值后，终端就会执行一次图1所示流程，获取该旋转角度、确定相应的位移方向和位移长度，并据此显示相应的动态效果。在终端旋转完毕后，对应该旋转过程的整体动态效果是由该旋转过程中每次角度变化所产生的动态效果的累加。与长度步进值类似的，方向传感器也会按照某一预先设定的角度粒度返回旋转角度，该粒度即为角度步进值。实际应用中，可以将角度步进值设置为1°，如此，方向传感器每检测到1°的角度变化，终端就会执行一次图1流程，显示对应这1°的动态效果。

假设终端围绕Y轴旋转了30°，那么在该旋转过程中，终端不断接收方向传感器返回的旋转角度：1°、2°、3°…29°、30°；在每获得一个新的旋转角度时，终端执行一次图1流程，将视图控件向左移动10个像素点的长度，最终当终端完成30°的旋转后，图像窗口中的视图控件向左移动了300个像素点。

本步骤中，采用基于角度实时反馈的显示方式，其优势在于能够使得动态效果与终端旋转过程保持高度同步，从而保证交互反馈的即时性。

本实施例提供的显示视图控件动态效果的方法，能够通过检测终端相对预设坐标轴的旋转角度捕捉到终端在三维空间中的姿态变化，根据该姿态变化确定出图像窗口中视图控件的位移方向和位移长度，并据此显示视图控件在图像窗口中移动的动态效果。与现有技术中按照预定程序展示动态效果相比，本实施例能够基于终端握持方式的变化调整图像窗口中动画元素的动态效果，从而实现具有人机交互功能的图像展示方式。

进一步的，作为对上述方法的补充，本发明实施例还提供了一种显示视图控件动态效果的方法，如图7所示，该方法包括：

701、检测终端相对终端本体上预设坐标轴的旋转角度。

本实施例以终端围绕Y轴旋转为例进行说明，方向传感器对终端的角度变化进行实时检测，获得旋转角度values[0]、values[1]和values[2]，终端使用其中的values[2]执行图7后续步骤。

702、根据旋转角度的正负，确定视图控件的位移方向。

本实施例中，预设配置位移方向与预设坐标轴垂直，即两者夹角值为90°，或者换言之视图控件将沿着与Y轴垂直的水平线进行移动。终端可以根据旋转角度的正负，确定视图控件的位移方向。如前所述，Y轴的角度旋转范围为[-90°,+90°]，当终端左侧抬起向右旋转时，旋转角度由0°向-90°变化，当终端右侧抬起向左旋转时，旋转角度由0°向+90°变化。如果预先设置当旋转角度为负数时视图控件向左移动、旋转角度为正数时视图控件向右移动，则可以实现轻质物体向上漂浮的设计效果；反之，如果预先设置当旋转角度为负数时视图控件向右移动、旋转角度为正数时视图控件向左移动，则可以实现重质物体向下滚动的设计效果。本实施例将以前者配置关系为例进行说明。

703、根据旋转角度确定图像窗口中视图控件的位移方向和位移长度。

本步骤中，终端可以在预设的映射表中查找与旋转角度对应的位移长度。示例性的，图8给出了一种映射表的示意图，在该表中，每一个旋转角度值对应一个位移长度值，该位移长度的单位为像素点数量。表中的旋转角度按照预设的角度步进值设置，例如当角度步进值为1°时，映射表中应当包括从-90°到+90°共180个(不包括0°)旋转角度与位移长度的映射关系。

需要说明的是，本实施例中终端在旋转角度每发生一个角度步进值就对视图控件进行一次位移，因此上述映射表中对应每个旋转角度的位移长度应当是在增加最后一个角度步进值后的位移长度变化量。例如当旋转角度-30°对应的位移长度为200像素点时，其含义为当旋转角度从-29°增加到-30°时，将视图控件向左移动200个像素点，而非是指终端从0°旋转到-30°的过程中总共移动的像素点数量，当终端旋转到-30°并停止后，视图控件向左移动的总位移长度应当是映射表中1°到30°共30个旋转角度分别对应的位移长度之和。

实际应用中，可以通过对映射表的修改调整视图控件的移动速度，具体的：

如图9a所示，随着旋转角度数值(或称为绝对值)的不断增大，映射表中每一单位角度变化量(对应一个角度步进值)对应的位移长度不断增加，由此形成在斜率不断增加的映射关系。此种情况下，随着终端旋转角度数值的不断变大，视图控件的移动速度越来越快。

与此相反的，如图9b所示，随着旋转角度数值的不断增大，映射表中每一单位角度变化量(对应一个角度步进值)对应的位移长度不断减小，由此形成斜率不断减小的映射关系。此种情况下，随着终端旋转角度数值的不断变大，视图控件的移动速度越来越慢。

在本实施例的一种实现方式中，可以将映射表中每一单位角度增量对应的位移长度设置为同一个值，例如图10所示。由此形成如图10中斜率恒定的线性映射关系。此种情况下，视图控件将进行匀速移动。

进一步的，作为对图10所示方式的改进，在本实施例的另一种实现方式中，可以基于如下规则确定位移长度的大小：

$\frac{a}{A}=\frac{l}{L}$

其中，a为角度步进值，例如1°，A为单方向旋转的角度范围，本实施例中为90°，l为对应每一单位角度增量的位移长度，L为视图控件在单一方向上能够移动的最大距离。通过上述规则，可以将最大距离L平均分配给各个位移长度l，使得移动距离与角度之间等比例变动。

进一步的，除了通过预置映射表的方式之外，终端还可以基于预设的计算关系确定对应每一单位角度变化量的位移长度。具体的，以视图控件移动速度逐渐放缓为例：

Step1、终端在每获得一个新的旋转角度后，确定与该旋转角度对应的位移长度衰减量。

位移长度衰减量是指本次位移长度相对上一角度变化量对应的位移长度所减少的部分。由于需要使视图控件的移动速度逐渐放缓，因此需要保证随着旋转角度的不断增加，每一单位角度变化量对应的位移长度不断减少，由此需要计算每一旋转角度对应的位移长度衰减量。

在本实施例中，可以按照下述公式计算位移长度衰减量：

$Y=\frac{2(TA-X)}{T(T-1)}$

Y为位移长度衰减量、T为旋转角度、A为初始位移长度、X为最大位移长度。其中，初始位移长度是指当终端首次产生一个角度步进值的角度变化量时应当移动的长度，例如当终端的旋转角度从0°变化到1°时的位移长度。由于终端首次产生角度变化量时没有上一旋转角度的位移长度可以参考，因此对此端点情况需要人工设置一个初始位移长度，本实施例不对初始位移长度的具体数值进行限制。最大位移长度为视图控件在单一方向上能够移动的最大距离，例如视图控件从初始位置向左最多能够移动M个像素点，或者向右最多能够移动N个像素点，该最大位移长度等同于前述最大距离L。实际应用中，应当保证Y小于A，A小于X，X不大于视图控件初始位置到相应图像窗口边缘的距离。

在上述公式中角度单位为“度”，长度单位为“像素点数量”，在进行计算时直接将角度或长度的数值带入即可，无需带入单位。

Step2、将前一旋转角度对应的位移长度与位移长度衰减量相减，获得当前旋转角度对应的位移长度。

由于在终端旋转过程中不断产生新的旋转角度，并且终端基于每个新的旋转角度都要计算对应的位移长度，因此Step2中在计算对应当前旋转角度的位移长度时，终端可以直接获取前一旋转角度对应的位移长度。

较为特殊的，当终端首次产生角度变化量时，即当旋转角度从0°变化到1°时，并无前一旋转角度对应的位移长度可以参考使用，因此在Step2中，针对这一端点情况预设有初始位移长度A，终端将该初始位移长度A确定为旋转角度为1°时对应的位移长度。本实施例不对初始位移长度A的具体数值进行限制，实际应用中，可以根据经验值对其进行设定，较为理想的，可以将初始位移长度A设置为0.4X。

上述方式给出了一种使视图控件移动速度逐渐放缓的位移长度计算方式，与此相反的，当需要使视图控件的移动速度逐渐提高，可以参考上述公式计算位移长度增长量，并在Step2中将前一旋转角度对应的位移长度与位移长度增长量相加，获得当前旋转角度对应的位移长度。

进一步的，在本实施例的另一种实现方式中，还可以对产生动态效果的角度范围进行设置。具体的，可以根据设计需求或用户喜好设定一个角度变化范围，例如[-30°,+30°]，该范围由-30°和+30°两个角度阈值界定。如果终端旋转的角度超过该角度阈值，则视图控件不再进一步移动，停留在完成最后一次位移(对应-30°或+30°的位移长度)后的位置。具体的，终端在检测到旋转角度之后判断旋转角度是否超过预设的角度阈值，如果判断结果为是，则终端直接将位移长度确定为0，并取消执行上述确定位移长度的步骤。

与上述方式类似的，终端也可以在判断旋转角度未超过角度阈值时将位移长度确定为0，而当旋转角度超过角度阈值时通过映射表或公式计算位移长度，从而使终端只有在旋转角度超过一定程度时才对视图控件进行移动，由此避免细微动作导致的误操作，节省终端的处理资源。

需要说明的是，前述将确定位移方向和确定位移长度的过程区分为步骤702和步骤703仅为便于表述，本实施例不对步骤702和步骤703的执行顺序进行限制，实际应用中，终端在执行完步骤701后，也可以先执行步骤703再执行步骤702，或者同时执行步骤702和步骤703。

704、按照位移方向及位移长度，采用多缓冲机制对图像窗口的图像帧进行显示。

如前所述，终端需要不断绘制图像帧以展示视图控件移动的动态效果。实际应用中，当采用传统的无缓冲绘图机制时，终端直接在图像窗口上绘制图像帧。由于绘制过程需要占用图像窗口UI(User Interface，简称用户界面)的主线程，会对主线程造成临时阻塞，无法对用户操作进行响应，因此本实施例可以采用单缓冲绘图机制，即创建一个画布(Canvas)，通过独立于主线程的另一线程在该画布上进行图像帧的绘制。在绘制完成后，再将该画布上的内容迁移到图像窗口的绘图表面上进行显示，由此避免了对图像窗口UI主线程的长期占用，使得主线程能够及时响应用户的操作事件。

进一步的，考虑到当图像内容较为复杂时，单缓冲机制的处理能力可能无法保证动态效果的流畅性。为避免图像出现卡顿，在本实施例的另一种实现方式中，可以采用多缓冲机制进行绘图，即创建多个画布，由不同的线程分别负责不同画布上的图像帧绘制和图像帧显示。当一个画布上的图像帧在图像窗口中绘制并显示时，其余画布进行其他图像帧的绘制，各个画布轮询将绘制的图像帧迁移到图像窗口的绘图表面上进行显示。理论上画布数量越多，终端的显示性能越优越。

进一步的，当兼顾处理器的线程资源消耗时，可以采用双缓冲绘图机制。终端创建独立于图像窗口绘图表面的第一画布和第二画布，然后首先在第一画布上绘制一个图像帧，绘制完成后将第一画布图像帧迁移到图像窗口绘图表面上进行显示。并且在显示第一画布图像帧的同时在第二画布上绘制下一图像帧。在第二画布绘制完毕后，将第二画布图像帧迁移到图像窗口绘图表面上进行显示，并在显示第二画布图像帧的同时在第一画布上绘制再下一个图像帧，如此反复，两画布交替进行图像帧的显示和绘制。

实际应用中，可以使用JAVA中的SurfaceView组件执行步骤704。SurfaceView组件是一种支持多缓冲机制的动态绘图组件，一方面可以实现复杂而高效的UI动态效果，另一方面又不会导致用户输入得不到及时响应。终端在获得位移方向和位移长度后，按照位移方向将位移长度转换为视图控件相对图像窗口左边缘的像素点数量，然后将该像素点数量赋值给SurfaceView组件中的paddingLeft参数，SurfaceView组件根据paddingLeft参数进行新图像帧的绘制。目前，4.1以前版本的SurfaceView组件默认支持双缓冲绘图机制，4.2以后版本的SurfaceView组件默认支持三缓冲绘图机制。实际应用中，可以通过修改组件代码最高扩展到32个画布。

上述SurfaceView组件仅为示例性说明，不作为对本实施例适用的操作系统、组件类型的具体限制。实际应用中，其他具有多缓冲绘图机制的组件、接口、配置文件程序等均可应用于本实施例所提供的方案中。

以上对本发明实施例的方法部分进行了说明，下面给出本发明实施例的几种应用场景：

1、手机围绕Y轴旋转

本场景中，配置视图控件的位移方向垂直于Y轴，当旋转角度小于0°时位移方向朝向图像窗口左边、当旋转角度大于0°时位移方向朝向图像窗口右边，由此形成轻质物体向上漂浮的动态效果。

如图11a所示，当手机左侧逐渐抬起时，产生小于0°的旋转角度，云彩向左侧进行直线移动；如图11b所示，当手机右侧逐渐抬起时，产生大于0°的旋转角度，云彩向右侧进行直线移动。

2、手机围绕X轴旋转

本场景中，配置视图控件的位移方向垂直于X轴，当旋转角度小于0°时位移方向朝向图像窗口底部、当旋转角度大于0°时位移方向朝向图像窗口顶部，由此形成重质物体向下滚动的动态效果。

如图12a所示，当手机顶部逐渐抬起时，产生小于0°的旋转角度，小球向图像窗口底部进行直线移动；如图12b所示，当手机底部逐渐抬起时，产生大于0°的旋转角度，小球向图像窗口顶部进行直线移动。

3、手机围绕Z轴旋转

本场景中，配置视图控件的位移方向与旋转方向相反，当旋转角度递增时位移方向朝向图像窗口左边、当旋转角度递减时位移方向朝向图像窗口右边，由此形成视图控件相对旋转方向反向运动的动态效果。

如图13a所示，当手机放置于水平桌面上并且顺时针旋转时，旋转角度逐渐递增，云彩向图像窗口左边移动；如图13b所示，当手机在水平桌面上逆时针旋转时，旋转角度逐渐递减，云彩向图像窗口右边移动。

4、手机同时围绕X轴、Y轴旋转

本场景中，当手机围绕X轴旋转时，配置视图控件的位移方向垂直于X轴，当旋转角度小于0°时位移方向朝向图像窗口顶部、当旋转角度大于0°时位移方向朝向图像窗口底部，由此形成轻质物体向上漂浮的动态效果。当手机围绕Y轴旋转时，配置视图控件的位移方向垂直于Y轴，当旋转角度小于0°时位移方向朝向图像窗口左边、当旋转角度大于0°时位移方向朝向图像窗口右边，由此形成轻质物体向上漂浮的动态效果。

当手机左上角逐渐抬起时，X轴上产生小于0°的旋转角度，云彩向图像窗口顶部进行直线移动，同时Y轴上产生小于0°的旋转角度，云彩向图像窗口左边进行直线移动。两个方向合成后的移动轨迹如图14a所示，云彩朝向图像窗口左上角移动。与此类似的，当手机右下角逐渐抬起时，如图14b所示云彩朝向图像窗口右下角移动。

5、手机同时围绕X轴、Z轴旋转

本场景中，当手机围绕X轴旋转时，配置视图控件的位移方向垂直于X轴，当旋转角度小于0°时位移方向朝向图像窗口顶部、当旋转角度大于0°时位移方向朝向图像窗口底部，由此形成轻质物体向上漂浮的动态效果。当手机围绕Z轴旋转时，配置视图控件的位移方向与旋转方向相反，当逆时针旋转时位移方向朝向图像窗口右边、当顺时针旋转时位移方向朝向图像窗口左边。

当手机顶部逐渐抬起并且围绕Z轴逆时针旋转时，云彩的合成动态效果如图15a所示；当手机底部逐渐抬起并且围绕Z轴顺时针旋转时，云彩的合成动态效果如图15b所示。

6、手机同时围绕Y轴、Z轴旋转

7手机同时围绕X轴、Y轴、Z轴旋转

6、7两种情况可以参照场景5给出的合成方式实现，此处不再赘述。

进一步的，作为对上述方法的实现，本发明实施例还提供了一种显示视图控件动态效果的装置。该装置可以位于终端内部，也可以集成于终端外部，并与终端建立有数据交互关系。如图16所示，该装置包括：检测单元161、确定单元162、显示单元163，其中：

检测单元161，用于检测终端相对终端本体上预设坐标轴的旋转角度；

确定单元162，用于根据旋转角度确定图像窗口中视图控件的位移方向和位移长度，图像窗口为终端提供的可视化部件；

显示单元163，用于按照位移方向及位移长度，显示视图控件在图像窗口中移动的动态效果。

进一步的，位移方向与预设坐标轴垂直；

如图17所示，确定单元162，包括：

第一确定模块1621，用于根据旋转角度的正负，确定视图控件的位移方向。

进一步的，如图17所示，确定单元162包括第二确定模块1622，用于：

确定与旋转角度对应的位移长度衰减量；

将前一旋转角度对应的位移长度与位移长度衰减量相减，获得当前旋转角度对应的位移长度。

进一步的，第二确定模块1622用于当首次产生角度变化时，将预设的初始位移长度确定为位移长度。

进一步的，第二确定模块1622用于按照下述公式计算位移长度衰减量：

$Y=\frac{2(TA-X)}{T(T-1)}$

Y为位移长度衰减量、T为旋转角度、A为初始位移长度、X为最大位移长度，其中，A小于X，Y小于A。

进一步的，确定单元162用于在预设的映射表中查找与旋转角度对应的位移长度。

进一步的，检测单元161检测的旋转角度的数值与确定单元162确定的位移长度之间呈线性映射关系。

进一步的，确定单元162用于若旋转角度超过预设的角度阈值，则将位移长度确定为0。

进一步的，显示单元163，用于采用多缓冲机制对图像窗口的图像帧进行显示。

进一步的，显示单元163采用双缓冲机制；

显示单元163用于：

在显示第一画布图像帧的同时在第二画布上绘制下一图像帧；

在第二画布绘制完毕后，显示第二画布图像帧并同时在第一画布上绘制再下一个图像帧，两画布交替进行图像帧的显示和绘制。

进一步的，作为对上述方法的实现，本发明实施例还提供了一种显示视图控件动态效果的装置。该装置可以位于终端内部，也可以集成于终端外部，并与终端建立有数据交互关系。如图18所示，该装置包括：方向传感器181、处理器182、显示器183、存储器184以及总线185，其中：

方向传感器181，被配置为检测终端相对终端本体上预设坐标轴的旋转角度；

处理器182，被配置为根据旋转角度确定图像窗口中视图控件的位移方向和位移长度，图像窗口为终端提供的可视化部件；

显示器183，被配置为按照位移方向及位移长度，显示视图控件在图像窗口中移动的动态效果；

存储器184，被配置为存储处理器182的可执行指令；

总线185，被配置为耦接方向传感器181、处理器182、显示器183及存储器184。

进一步的，处理器182被配置为根据旋转角度的正负，确定视图控件的位移方向。

进一步的，处理器182被配置为：

确定与旋转角度对应的位移长度衰减量；

将前一旋转角度对应的位移长度与位移长度衰减量相减，获得当前旋转角度对应的位移长度。

进一步的，处理器182被配置为：

当首次产生角度变化时，将预设的初始位移长度确定为位移长度。

进一步的，处理器182被配置为：

按照下述公式计算位移长度衰减量：

$Y=\frac{2(TA-X)}{T(T-1)}$

Y为位移长度衰减量、T为旋转角度、A为初始位移长度、X为最大位移长度，其中，A小于X，Y小于A。

进一步的，处理器182被配置为：

在预设的映射表中查找与旋转角度对应的位移长度。

进一步的，处理器182被配置为旋转角度的数值与位移长度之间呈线性映射关系。

进一步的，处理器182被配置为：

若旋转角度超过预设的角度阈值，则将位移长度确定为0。

进一步的，显示器183被配置为：

采用多缓冲机制对图像窗口的图像帧进行显示。

进一步的，显示器183被配置为采用双缓冲机制；

显示器183被配置为：

在显示第一画布图像帧的同时在第二画布上绘制下一图像帧；

在第二画布绘制完毕后，显示第二画布图像帧并同时在第一画布上绘制再下一个图像帧，两画布交替进行图像帧的显示和绘制。

本发明实施例提供的显示视图控件动态效果的装置，能够通过检测终端相对预设坐标轴的旋转角度捕捉到终端在三维空间中的姿态变化，根据该姿态变化确定出图像窗口中视图控件的位移方向和位移长度，并据此显示视图控件在图像窗口中移动的动态效果。与现有技术中按照预定程序展示动态效果相比，本发明实施例能够基于终端握持方式的变化调整图像窗口中动画元素的动态效果，从而实现具有人机交互功能的图像展示方式。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

可以理解的是，上述方法及装置中的相关特征可以相互参考。另外，上述实施例中的“第一”、“第二”等是用于区分各实施例，而并不代表各实施例的优劣。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的发明名称(如确定网站内链接等级的装置)中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。