CN106375188B - 一种呈现互动表情的方法、装置以及系统 - Google Patents

Abstract

本发明公开了一种呈现互动表情的方法、装置以及系统。将即时通信过程中发送的表情信息布局为静态部分和互动部分，通过监听陀螺仪获得终端的实时姿态信息，并基于该姿态信息同步地、实时控制互动部分随终端的姿态变动而变动。通过上述陀螺仪信息与通信过程中发送表情结合，实现即时通信过程中表情信息与用户之间的互动。使聊天表情在用户在使用过程中反馈用户动作，与用户的动作产生交互，使表情更加具有趣味，满足用户更高层次的体验。

Description

一种呈现互动表情的方法、装置以及系统

技术领域

本发明涉及移动设备交互及活动方案，具体地，涉及一种呈现互动表情的方法、装置以及系统。

背景技术

移动终端人机交互的主要方式是机器在感知到用户的输入信息后，作出对应的响应。现有技术中，移动设备获得用户操作、环境状态信息的方式有很多，例如，通过按键获得用户的按键操作、通过触摸屏获得用户手势、通过光敏传感器获得当前环境的光照程度、通过GPS获取位置信息等。移动终端在相应的数据后，根据应用的预设指令做出对应反馈。

即时通信是互联网时代的最常用通信方式，常用的应用包括微信、移动QQ等。在即时通信过程中，用户之间除发送文字信息之外，还会发送静态图、动态图等构成的表情信息。

表情信息是指各种即时聊天过程中用于传递情感心情的小头像图片。表情信息的出现极大的丰富了聊天的乐趣，使得聊天不再是单调的文字叙述，特别是各种搞笑幽默动态图片的出现，使得聊天变得丰富多彩。自“腾讯QQ2003III简体中文正式版”出现以来QQ就具有自定义表情和动态QQ表情功能，个性字符，动感酷图，搞笑图片，都可以成为QQ自定义表情。

发明内容

发明人在使用和设计过程中发现，现有即使通信过程中，发送的表情信息通常包括静态图或者固定的动态图（.gif）。在使用过程中，表情本身是静止的或者只能按照固定帧格式变化，这种表情的呈现形式本身是呆板的，无法在感官上与用户产生交互，无法满足用户更高层次的体验需求。用户在使用过程中，会感到表情的感官死板，缺乏趣味。

为了解决上述技术问题，发明人提出一种在应用场景中，随用户对终端的操作，产生动态变化以反馈用户操作的表情。

具体地，本发明提出一种呈现互动表情的方法，包括：

将所述表情布局为相对独立的静止部分和互动部分；

呈现所述静止部分和所述互动部分的初始位置；

监听陀螺仪事件，获取所述初始位置所对应的陀螺仪输出量；持续获取所述陀螺仪输出量与所述初始位置所对应的陀螺仪输出量之间的相对偏移量；

修正所述相对偏移量，获得修正偏移量；

实时更新所述互动部分的位置，更新位置由所述初始位置与所述修正偏移量确定。

优选地，所述布局基于层叠式样表（CSS）技术，所述互动部分为文档对象模型（DOM）节点。

优选地，所述陀螺仪输出量为三维矢量，所述修正偏移量为所述相对偏移量在用户终端平面上的投影。

优选地，所述修正包括比例修正和函数修正。

优选地，所述比例修正包括正比例系数修正和负比例系数修正。

优选地，所述函数修正以所述相对偏移量为函数的自变量。

优选地，所述函数随所述相对偏移量的增大而趋于常数。

优选地，判断所述修正偏移量是否超出预定范围，若是，则将所述预定范围的端值作为所述修正偏移量。

优选地，判断所述修正偏移量是否超出预定范围，若是，则触发切换事件。

优选地，所述切换事件包括将所述静止部分切换为另一相关的静止部分。

本发明还提供一种呈现互动表情的装置，所述装置包括如下模块：布局模块，用于将所述表情布局为相对独立的静止部分和互动部分；呈现模块，用于呈现所述静止部分和所述互动部分的初始位置；监听模块，监听陀螺仪事件，获取所述初始位置所对应的陀螺仪输出量；持续获取所述陀螺仪输出量与所述初始位置所对应的陀螺仪输出量之间的相对偏移量；修正模块，修正所述相对偏移量，获得修正偏移量；实时更新模块，实时更新所述互动部分的位置，更新位置由所述初始位置与所述修正偏移量确定。

优选地，所述布局模块基于层叠式样表（CSS）技术，所述互动部分为文档对象模型（DOM）节点。

优选地，所述陀螺仪输出量为三维矢量，所述修正偏移量为所述相对偏移量在用户终端显示平面上的投影。

优选地，所述修正模块包括比例修正子模块和函数修正模块。

优选地，所述比例修正模块包括正比例修正子模块和负比例修正子模块。

优选地，所述函数修正模块以所述相对偏移量为函数的自变量。

优选地，所述函数随所述相对偏移量的增大而趋于常数。

优选地，所述实时更新模块包含第一判断模块，用于判断所述修正偏移量是否超出预定范围，若是，则将所述预定范围的端值作为所述修正偏移量。

优选地，所述实时更新模块包含第二判断模块，用于判断所述修正偏移量是否超出预定范围，若是，则触发切换事件。

优选地，所述切换事件包括将所述静止部分切换为另一相关的静止部分。

本发明还提供一种终端，包含前述的装置。

本发明的有益效果为：即时通讯过程中，用户发送和接收到的表情会随用户移动终端而发生变化，从而与用户形成互动。使聊天表情在用户在使用过程中反馈用户动作，与用户的动作产生交互，使表情更加具有趣味，满足用户更高层次的体验。

附图说明

下面结合附图对本发明的具体实施方式作进一步详细的说明：

图1是本发明实施例一所提供的方法流程图。

图2是本发明实施例二所提供的方法流程图。

图3是本发明实施例三所提供的方法流程图。

图4是本发明实施例所提供的装置框架图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步地详细描述。

发明涉及的技术术语解释如下：

加速度传感器：移动设备中的一种物理传感器装置，从三维坐标的角度衡量手机在三个方向上的加速度。多用于监测智能手机的各种位置状态，包括运动、检测摇晃、倾斜等。

移动设备：指智能移动手机和智能平板电脑，但不包括笔记本。本发明中主要指Android、IOS、Windows系统的移动设备。

三维坐标系：在立体空间中，定义原点和三个互相垂直带有正方向的轴：x轴、y轴、z轴。在坐标系中，给定任意一组x、y、z的值都能唯一确定一个点在坐标系中的位置。

人机交互：人机交互是指用户与计算机设备之间的交互关系，二者之间互相的信息传递。本发明中尤指人与移动设备之间的交互关系。

CSS：层叠式样表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言，CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计。

DOM：文档对象模型（Document Object Model）是W3C组织推广的处理可扩展标识语言的标准程式接口。DOM节点是指在XML文档中的每个成分都是一个节点。整个文档就是一个文档节点，每个XML是一个元素节点，每个XML属性是一个属性节点。

实施例1：

本实施例提出一种呈现互动表情的方法，如图1所示，包括：

步骤S101.将表情布局为相对独立的静止部分和互动部分，呈现所述静止部分和所述互动部分的初始位置。

现有技术中，表情通常采用一张静态图片或者GIF图表示。在本实施例中，使用“静态图片+独立布局的互动部分”进行布局。独立布局可选地使用层叠式样表（CSS）来完成，将互动部分设计为DOM节点。静止部分和互动部分共同组成表情，二者之间存在相对的位置关系，互动部分会随着DOM节点属性的改变而改变其坐标，从而改变其相对于静止图片的位置。

例如，在一些具体的实施例中，可以通过CSS将表情的双眼布局为两个DOM节点，这两个DOM节点是动态的。

例如，在一些具体的实施例中，可以通过CSS将表情的耳朵布局为DOM节点，这两个DOM节点是动态的。

例如，在一些具体的实施例中，可以通过CSS将表情的四肢布局为DOM节点，这两个DOM节点是动态的。

例如，可选择地，可以通过CSS将整个表情的布局为DOM节点，这个DOM节点是动态的。

布局的表情在发送时会以初始状态展现给用户。

步骤S102.监听陀螺仪事件，并获取所述陀螺仪的偏移量。

该步骤具体包括：监听陀螺仪事件，获取所述初始位置所对应的陀螺仪输出量；持续获取所述陀螺仪输出量与所述初始位置所对应的陀螺仪输出量之间的相对偏移量。

使用常规事件监听方法注册陀螺仪事件。例如在Html事件中，使用deviceorientation事件，此事件是检测设备方向变化时的事件。其常用属性为alpha(x)、beta(y)、gamma(z)。默认将手机垂直，且正面（90度）面向用户，alpha：左右旋转，beta：前后旋转，gamma：扭转（自转）。当然，根据不同的三维坐标系，转动参数也可以采用其他的方式进行定义。

当移动终端发生了位置偏移（移动，旋转，晃动等），陀螺仪事件被触发，此时可以通过陀螺仪获取设备发生偏移的X（gamma）、Y（beta）、Z（alpha）轴坐标。

在具体实施过程中，可以通过记录表情发送时的初始位置所对应的偏移量和用户移动终端的即时偏移量来获得终端的相对偏移量，即输出一个差值。当然，由于表示陀螺仪输出的是一个矢量值（X,Y,Z三个方向），输出的该差值是一个矢量差或者矢量差在用户终端显示屏幕上的投影或者特定方向的投影。

步骤S103.修正所述相对偏移量，获得修正偏移量。

获取步骤S102的偏移量后，将该值赋值给眼睛DOM节点的transform属性。如此，DOM节点的位置将随陀螺仪读取到的终端偏移值发生偏移。由于陀螺仪输出的是一个三维坐标，即一个具有三自由度的矢量值，在本实施例中，将DOM节点的移动设计为陀螺仪输出关于时间的变化率，即当前时刻的输出值与前一时刻输出值之差。由于陀螺仪的输出值往往较大，为了使表情更加生动，并且在某些情况下，互动的位移不会过大，需要对不同时刻之间陀螺仪输出的变化率进行修正。即互动部分的移动量由初始位置陀螺仪输出量与当前时刻陀螺仪输出量进行修正得到。修正可以使用系数修正，也可以使用函数修正，修正后得到修正偏移量。

步骤S104.实时更新所述互动部分的位置，更新位置由所述初始位置与所述修正偏移量确定。

在获取步骤S103的修正偏移量后，即实时地移动互动部分。移动过程是使互动部分相对于初始位置移动修正偏移量以获得当前位置。由于使用者倾斜移动终端的过程中，对于陀螺仪输出值的获取是连续的，互动部分的移动轨迹也是连续的。以表情的双眼布局为两个DOM节点为例，用户在使用场景中，终端发生了位置偏移时，终端中所呈现的表情图像中，表情的双眼也会随着倾斜发生相对连续地转动，从而与用户之间形成互动。

为了获得更好的移动效果，实时地更新所述互动部分的位置，还可以采用前一时刻陀螺仪输出值与当前时刻陀螺仪输出值之差确定即时移动量的方式。

实施例2：

本实施例提出一种呈现互动表情的方法，如图2所示，包括：

步骤S201.将表情布局为相对独立的静止部分和互动部分。

现有技术中，表情通常采用一张静态图片或者GIF图表示。在本实施例中，使用“静态图片+独立布局的互动部分”进行布局。独立布局可选地使用层叠式样表（CSS）来完成，将互动部分设计为文档对象模型（DOM）节点。静止部分和互动部分共同组成表情，二者之间存在相对的位置关系，互动部分会随着DOM节点属性的改变而改变其坐标，从而改变其相对于静止图片的位置。

例如，在一些具体的实施例中，可以通过CSS将表情的双眼布局为两个DOM节点，这两个DOM节点是动态的。

例如，在一些具体的实施例中，可以通过CSS将表情的耳朵布局为DOM节点，这两个DOM节点是动态的。

例如，在一些具体的实施例中，可以通过CSS将表情的四肢布局为DOM节点，这两个DOM节点是动态的。

例如，可选择地，可以通过CSS将整个表情的布局为DOM节点，这个DOM节点是动态的。

步骤S202. 监听陀螺仪事件，获取所述初始位置所对应的陀螺仪输出量；持续获取所述陀螺仪输出量与所述初始位置所对应的陀螺仪输出量之间的相对偏移量。

使用常规事件监听方法注册陀螺仪事件。例如在Html事件中，使用deviceorientation事件，此事件是检测设备方向变化时的事件。其常用属性为alpha(x)、beta(y)、gamma(z)。默认将手机垂直，且正面（90度）面向用户，alpha：左右旋转，beta：前后旋转，gamma：扭转（自转）。当然，根据不同的三维坐标系，转动参数也可以采用其他的方式进行定义。

当移动终端发生了位置偏移（移动，旋转，晃动等），陀螺仪事件被触发，此时可以通过陀螺仪获取设备发生偏移的X（gamma）、Y（beta）、Z（alpha）轴坐标。

步骤S203. 修正所述相对偏移量，获得修正偏移量。

获取步骤S202的偏移量后，将该值赋值给眼睛DOM节点的transform属性。如此，DOM节点的位置将随陀螺仪读取到的终端偏移值发生偏移。由于陀螺仪输出的是一个三维坐标，即一个具有三自由度的矢量值，在本实施例中，将DOM节点的移动设计为陀螺仪输出关于时间的变化率，即当前时刻的输出值与前一时刻输出值之差。由于陀螺仪的输出值往往较大，为了使表情更加生动，设置一修正系数，对不同时刻之间陀螺仪输出的变化率进行修正。即互动部分的移动量由陀螺仪在当前时刻的输出值与前一时刻输出值之差乘以修正系数决定。

为了更好地实现互动的效果，可以将偏移量乘以一个修正系数，从而得到一个DOM节点移动值，同时将该值赋值给眼睛DOM节点的transform属性。修正系数会大大地丰富表情的互动效果，以双眼布局的两个DOM节点为例，选择正系数的修正系数，表情双眼将伴随着终端倾斜方向同方向地转动。选择负系数的修正系数，表情双眼将伴随着终端倾斜方向反方向地转动。选择随偏移量增加而增大的修正系数，表情双眼将随偏移量增加而转动加快。选择随偏移量增加而减小的修正系数，表情双眼将随偏移量增加而转动加快。

在一个具体的实施例中，对于布局为双眼的两个DOM节点，选择将修正系数设置为-0.1，即将陀螺仪偏移量信息乘以-0.1。那么，在呈现的表情图像中，表情的双眼将会随着终端的偏移，向终端反方向移动，当然移动的量会较实际的偏移量小。

步骤S204. 实时更新所述互动部分的位置，更新位置由所述初始位置与所述修正偏移量确定。

在该过程中还包括判读修正偏移量是否在预设范围内，若是，根据修正偏移量同步地更改所述互动部分的位置坐标；若否，将预设范围的最大值设置为修正偏移量。

在获取步骤S203的互动部分移动矢量后，即实时地移动互动部分。移动过程是使互动部分沿着移动矢量移动以获得当前位置。该方式的技术效果是，使用者倾斜移动终端的过程中，互动部分的移动轨迹始终是连续的。

实施例3：

在一些实施例中，为了防止互动部分的移动幅度过大，采取设定边界数值的方式，当倾斜量大于边界数值时，则使用边界数值替代移动值。在一些优选的实施例中，通过优化修正系数，使当倾斜量不大于边界数值。

本实施例提出一种呈现互动表情的方法，如图3所示，包括：

步骤S301.将表情布局为相对独立的静止部分和互动部分。

现有技术中，表情通常采用一张静态图片或者GIF图表示。在本实施例中，使用“静态图片+独立布局的互动部分”进行布局。独立布局可选地使用层叠式样表（CSS）来完成，将互动部分设计为DOM节点。静止部分和互动部分共同组成表情，二者之间存在相对的位置关系，互动部分会随着DOM节点属性的改变而改变其坐标，从而改变其相对于静止图片的位置。

例如，在一些具体的实施例中，可以通过CSS将表情的双眼布局为两个DOM节点，这两个DOM节点是动态的。

例如，在一些具体的实施例中，可以通过CSS将表情的耳朵布局为DOM节点，这两个DOM节点是动态的。

例如，在一些具体的实施例中，可以通过CSS将表情的四肢布局为DOM节点，这两个DOM节点是动态的。

例如，可选择地，可以通过CSS将整个表情的布局为DOM节点，这个DOM节点是动态的。

步骤S302.监听陀螺仪事件，并获取所述陀螺仪的偏移量。

使用常规事件监听方法注册陀螺仪事件。例如在Html事件中，使用deviceorientation事件，此事件是检测设备方向变化时的事件。其常用属性为alpha(x)、beta(y)、gamma(z)。默认将手机垂直，且正面（90度）面向用户，alpha：左右旋转，beta：前后旋转，gamma：扭转（自转）。当然，根据不同的三维坐标系，转动参数也可以采用其他的方式进行定义。

当移动终端发生了位置偏移（移动，旋转，晃动等），陀螺仪事件被触发，此时可以通过陀螺仪获取设备发生偏移的X（gamma）、Y（beta）、Z（alpha）轴坐标。

步骤S303.确定所述互动部分的移动矢量，所述移动矢量通过当前时刻所述偏移矢量与前一时刻所述偏移矢量之差乘以修正系数获得；

获取步骤S302的偏移量后，将该值赋值给眼睛DOM节点的transform属性。如此，DOM节点的位置将随陀螺仪读取到的终端偏移值发生偏移。由于陀螺仪输出的是一个三维坐标，即一个具有三自由度的矢量值，在本实施例中，将DOM节点的移动设计为陀螺仪输出关于时间的变化率，即当前时刻的输出值与前一时刻输出值之差。由于陀螺仪的输出值往往较大，为了使表情更加生动，设置一修正系数，对不同时刻之间陀螺仪输出的变化率进行修正。即互动部分的移动量由陀螺仪在当前时刻的输出值与前一时刻输出值之差乘以修正系数决定。

为了更好地实现互动的效果，可以将偏移量乘以一个修正系数，从而得到一个DOM节点移动值，同时将该值赋值给眼睛DOM节点的transform属性。修正系数会大大地丰富表情的互动效果，以双眼布局的两个DOM节点为例，选择正系数的修正系数，表情双眼将伴随着终端倾斜方向同方向地转动。选择负系数的修正系数，表情双眼将伴随着终端倾斜方向反方向地转动。选择随偏移量增加而增大的修正系数，表情双眼将随偏移量增加而转动加快。选择随偏移量增加而减小的修正系数，表情双眼将随偏移量增加而转动加快。

在一个具体的实施例中，设置最大偏移量，当所述陀螺仪的输出的偏移量大于预先设置的最大偏移量时，为了防止互动部分的移动范围过大，将最大偏移量赋值给所述偏移量。这样，在用户使用场景中，用户倾斜终端达到一定程度时，再继续倾斜，表情的的互动部分即在一个位置不再继续移动。

在一个具体的实施例中，对于布局为双眼的两个DOM节点，选择将修正系数设置为-0.1，即将陀螺仪偏移量信息乘以-0.1，然后设置边界数值为-9和+9。如果陀螺仪偏移量信息乘以修正系数后为-9.05（小于-9），则使用-9这个边界值作为偏移量，在呈现的表情图像中，表情的双眼将会停止在边界值对应的位置。

具体的实施例中，使用如下代码实现对于互动部分边界值的赋予。

在一个具体的实施例中，为了防止互动部分的移动幅度过大，将修正系数设定为随倾斜值增大函数形式，例如指数函数，函数为：

y=k*(-ax+1)，x>0

y=k*(a-x-1), x<0

其中，0<a<1，k为边界范围。在本实施例中，自变量x表示陀螺仪输出的数值，y表示表情中互动部分移动的数值，由于函数映射关系，随着倾斜角度x的变大，互动部的位置坐标的增大趋势是减小的，并且不过超过[-k,k]的范围。本实施例可以省去设定边界条件步骤，直接利用修正系数达到约束互动部的移动范围，并且由于函数修正系数随x增大而逐渐减小，还能够实现表情眼睛转动速度变化的效果，增强互动的真实感。

在本实施例中，修正系数不限于使用指数函数，对数函数，双曲函数等具有渐进线或随变量产生极限的函数都可以用于作为修正系数，并且不同的函数作为修正系数会由于函数的变化率不同（一阶导数）具有不同效果。

在该过程中还包括判读修正偏步骤S304. 实时更新所述互动部分的位置，更新位置由所述初始位置与所述修正偏移量确定。

移量是否在预设范围内，若是，根据修正偏移量同步地更改所述互动部分的位置坐标；若否，则触发切换事件。切换事件是预定义事件，包含静态部分的切换，动态部分的切换或者隐藏等。

在获取步骤S303的互动部分移动矢量后，即实时地移动互动部分。移动过程是使互动部分沿着移动矢量移动以获得当前位置。该方式的技术效果是，使用者倾斜移动终端的过程中，互动部分的移动轨迹始终是连续的，并且不会超出预定的可移动范围。

实施例4：

在一些实施例中，当终端倾斜达到预定值时，还会触发切换事件，切换事件会触发静态背景的切换或者触发其他事件。

本实施例提出一种呈现互动表情的方法，如图4所示，包括：

步骤S401.将表情布局为相对独立的静止部分和互动部分。

现有技术中，表情通常采用一张静态图片或者GIF图表示。在本实施例中，使用“静态图片+独立布局的互动部分”进行布局。独立布局可选地使用层叠式样表（CSS）来完成，将互动部分设计为DOM节点。静止部分和互动部分共同组成表情，二者之间存在相对的位置关系，互动部分会随着DOM节点属性的改变而改变其坐标，从而改变其相对于静止图片的位置。

例如，在一些具体的实施例中，可以通过CSS将表情的双眼布局为两个DOM节点，这两个DOM节点是动态的。

例如，在一些具体的实施例中，可以通过CSS将表情的耳朵布局为DOM节点，这两个DOM节点是动态的。

例如，在一些具体的实施例中，可以通过CSS将表情的四肢布局为DOM节点，这两个DOM节点是动态的。

例如，可选择地，可以通过CSS将整个表情的布局为DOM节点，这个DOM节点是动态的。

步骤S402.监听陀螺仪事件，并获取所述陀螺仪的偏移量。

使用常规事件监听方法注册陀螺仪事件。例如在Html事件中，使用deviceorientation事件，此事件是检测设备方向变化时的事件。其常用属性为alpha(x)、beta(y)、gamma(z)。默认将手机垂直，且正面（90度）面向用户，alpha：左右旋转，beta：前后旋转，gamma：扭转（自转）。当然，根据不同的三维坐标系，转动参数也可以采用其他的方式进行定义。

当移动终端发生了位置偏移（移动，旋转，晃动等），陀螺仪事件被触发，此时可以通过陀螺仪获取设备发生偏移的X（gamma）、Y（beta）、Z（alpha）轴坐标。

步骤S403.确定所述互动部分的移动矢量，所述移动矢量通过当前时刻所述偏移矢量与前一时刻所述偏移矢量之差乘以修正系数获得；

获取步骤S402的偏移量后，将该值赋值给眼睛DOM节点的transform属性。如此，DOM节点的位置将随陀螺仪读取到的终端偏移值发生偏移。由于陀螺仪输出的是一个三维坐标，即一个具有三自由度的矢量值，在本实施例中，将DOM节点的移动设计为陀螺仪输出关于时间的变化率，即当前时刻的输出值与前一时刻输出值之差。由于陀螺仪的输出值往往较大，为了使表情更加生动，设置一修正系数，对不同时刻之间陀螺仪输出的变化率进行修正。即互动部分的移动量由陀螺仪在当前时刻的输出值与前一时刻输出值之差乘以修正系数决定。

在本实施例中，将当陀螺仪偏移量达到边界值时，触发一表情变化事件。所述事件可以是，使用一副与原静态图表情相关联的静态图替代现有的静态图片，或者触发一个动态的gif图替代现有静态图。

以双眼布局为例，当双眼转动到临界位置时，触发切换事件，使用一副闭眼表情的静态图片代替现有图片。

当然，当双眼转动到临界位置时，触发切换事件，也可以是一个具有睁眼、闭眼动画的gif动图替换静态图片。

步骤S404. 实时更新所述互动部分的位置，更新位置由所述初始位置与所述修正偏移量确定。

在获取步骤S403的互动部分移动矢量后，即实时地移动互动部分。移动过程是使互动部分沿着移动矢量移动以获得当前位置。该方式的技术效果是，使用者倾斜移动终端的过程中，互动部分的移动轨迹始终是连续的。

例如，将表情的双眼布局为两个DOM节点，用户在使用场景中，终端发生了位置偏移时，终端中所呈现的表情图像中，表情的双眼也会随着倾斜发生相对地转动，从而与用户之间形成互动。

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

Claims (17)

1.一种呈现互动表情的方法，其特征在于，所述方法包括如下步骤：

将所述表情布局为相对独立的静止部分和互动部分；

呈现所述静止部分和所述互动部分的初始位置；

监听陀螺仪事件，获取所述初始位置所对应的陀螺仪输出量；持续获取所述陀螺仪输出量与所述初始位置所对应的陀螺仪输出量之间的相对偏移量，所述陀螺仪输出量包括表征设备位置偏移的三维矢量，所述设备位置偏移包括移动，旋转，晃动；

修正所述相对偏移量，获得修正偏移量；

当所述修正偏移量在预定范围内，实时更新所述互动部分的位置，更新位置由所述初始位置与所述修正偏移量确定；

当所述修正偏移量超出预定范围，将预设范围的最大值设置为修正偏移量，实时更新所述互动部分的位置，更新位置由所述初始位置与所述修正偏移量确定；或，当所述修正偏移量超出预定范围，触发切换事件，所述切换事件包括静止部分的切换，所述静止部分的切换包括利用静态图或者动态图替代现有的静态图片。

2.根据权利要求1所述的方法，其特征在于，所述布局基于层叠式样表（CSS）技术，所述互动部分为文档对象模型（DOM）节点。

3.根据权利要求1所述的方法，其特征在于，所述修正偏移量为所述相对偏移量在用户终端平面上的投影。

4.根据权利要求1所述的方法，其特征在于，所述修正包括比例修正和函数修正。

5.根据权利要求4所述的方法，其特征在于，所述比例修正包括正比例系数修正和负比例系数修正。

6.根据权利要求4所述的方法，其特征在于，所述函数修正以所述相对偏移量为函数的自变量。

7.根据权利要求6所述的方法，其特征在于，所述函数随所述相对偏移量的增大而趋于常数。

8.根据权利要求1所述的方法，其特征在于，所述静止部分的切换包括将所述静止部分切换为另一相关的静止部分。

9.一种呈现互动表情的装置，其特征在于，所述装置包括如下模块：

布局模块，用于将所述表情布局为相对独立的静止部分和互动部分；

呈现模块，用于呈现所述静止部分和所述互动部分的初始位置；

监听模块，监听陀螺仪事件，获取所述初始位置所对应的陀螺仪输出量；持续获取所述陀螺仪输出量与所述初始位置所对应的陀螺仪输出量之间的相对偏移量，所述陀螺仪输出量包括表征设备位置偏移的三维矢量，所述设备位置偏移包括移动，旋转，晃动；

修正模块，修正所述相对偏移量，获得修正偏移量；

实时更新模块，当所述修正偏移量在预定范围内，实时更新所述互动部分的位置，更新位置由所述初始位置与所述修正偏移量确定；

当所述修正偏移量超出预定范围，将预设范围的最大值设置为修正偏移量，实时更新所述互动部分的位置，更新位置由所述初始位置与所述修正偏移量确定；或，当所述修正偏移量超出预定范围，触发切换事件，所述切换事件包括静止部分的切换，所述静止部分的切换包括利用静态图或者动态图替代现有的静态图片。

10.根据权利要求9所述的装置，其特征在于，所述布局模块基于层叠式样表（CSS）技术，所述互动部分为文档对象模型（DOM）节点。

11.根据权利要求9所述的装置，其特征在于，所述修正偏移量为所述相对偏移量在用户终端显示平面上的投影。

12.根据权利要求9所述的装置，其特征在于，所述修正模块包括比例修正子模块和函数修正模块。

13.根据权利要求12所述的装置，其特征在于，所述比例修正子模块包括正比例修正子模块和负比例修正子模块。

14.根据权利要求12所述的装置，其特征在于，所述函数修正模块以所述相对偏移量为函数的自变量。

15.根据权利要求14所述的装置，其特征在于，所述函数随所述相对偏移量的增大而趋于常数。

16.根据权利要求9所述的装置，其特征在于，所述静止部分的切换包括将所述静止部分切换为另一相关的静止部分。

17.一种终端，包含权利要求9-16之一所述的装置。

Images