一种基于静态图片的动态交互方法和装置

摘要

本发明实施例提供了一种基于静态图片的动态交互方法和装置，所述方法包括：在静态图片中选取特征区域；当监听到指定的交互操作事件时，根据指定的交互操作事件确定映射参考对象；根据所述映射参考对象对所述特征区域中的至少部分像素点映射到一帧或多帧扭曲图片中，以驱动所述静态图片逐帧变化。本发明实施例无需借助专门的应用生成动态效果，降低了技术门槛，提高了操作的简便性，此外，通过对用户的交互操作进行反馈，实现了静态图片的动态交互，丰富了动态效果的形式。

说明书

技术领域

本发明涉及图像处理技术领域，特别是涉及一种基于静态图片的动态 交互方法和一种基于静态图片的动态交互装置。

背景技术

随着计算机科技的发展，尤其是移动设备的广泛普及，基于计算机的 应用广泛进入人们生活的各个方面。

互联网上的图片浏览占据了用户访问量的很大一部分，随着移动互联 网的发展，用户在手机上浏览图片正日益成为趋势。但是传统的互联网图 片大部分都是静态图片，缺乏动态效果。

常用的动态图片一般采用GIF格式，需要专门的应用生成，一般的用 户很难编辑，技术门槛高，操作困难。

即使是GIF格式的动态图片，也仅是按照在先的设定进行动态的播 放，形式单一。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部 分地解决上述问题的一种基于静态图片的动态交互方法和相应的一种基于 静态图片的动态交互装置。

依据本发明的一个方面，提供了一种基于静态图片的动态交互方法， 包括：

在静态图片中选取特征区域；

当监听到指定的交互操作事件时，根据指定的交互操作事件确定映射 参考对象；

根据所述映射参考对象对所述特征区域中的至少部分像素点映射到一 帧或多帧扭曲图片中，以驱动所述静态图片逐帧变化。

可选地，所述指定的交互操作事件包括摇晃事件，所述映射参考对象 包括一个或多个参考点；

所述根据指定的交互操作事件确定映射参考对象的步骤包括：

按照摇晃事件的摇晃方向，在静态图片的特征区域中选取一个或多个 参考点。

可选地，所述指定的交互操作事件包括屏幕点击事件，所述映射参考 对象包括一个或多个参考点；

所述根据指定的交互操作事件确定映射参考对象的步骤包括：

按照指向发生屏幕点击事件的方向，在静态图片的特征区域中选取一 个或多个参考点。

可选地，所述特征区域具有特征点；

所述根据所述映射参考对象对所述特征区域中的至少部分像素点映射 到一帧或多帧扭曲图片中，以驱动所述静态图片逐帧变化的步骤包括：

根据所述特征点和所述一个或多个参考点将所述静态图片的像素点映 射到一帧或多帧扭曲图片中。

可选地，所述特征区域包括凸区域，所述特征点包括重心点。

可选地，所述根据所述特征点和所述一个或多个参考点将所述静态图 片的像素点映射到一帧或多帧扭曲图片中的步骤包括：

生成扭曲图片；

将在所述特征区域中第一连线上的像素点映射到第二连线上；

将所述第二连线上的像素点拷贝到在所述扭曲图片中的相同位置；

其中，所述第一连线为所述特征点与边缘点之间的连线，所述第二连 线为当前参考点与边缘点的连线，所述边缘点为所述特征区域边缘上的坐 标点。

可选地，所述将在所述特征区域中第一连线上的像素点映射到第二连 线上的步骤包括：

计算在所述特征区域中第一连线上的像素点，在第一连线上的相对位 置；

按照所述相对位置，将所述像素点拷贝到第二连线上。

可选地，所述根据所述特征点和所述一个或多个参考点将所述静态图 片的像素点映射到一帧或多帧扭曲图片中的步骤还包括：

在所述特征区域外的像素点映射到在所述扭曲图片中的相同位置。

可选地，所述根据所述特征点和所述一个或多个参考点将所述静态图 片的像素点映射到一帧或多帧扭曲图片中的步骤还包括：

对扭曲图片中位置重叠的像素点进行像素点叠加处理。

可选地，所述根据所述特征点和所述一个或多个参考点将所述静态图 片的像素点映射到一帧或多帧扭曲图片中的步骤还包括：

对扭曲图片中的空白位置进行像素点插值处理。

可选地，所述指定的交互操作事件包括摇晃事件，所述映射参考对象 包括所述特征区域中的至少部分像素点的运动方向；

所述根据指定的交互操作事件确定映射参考对象的步骤包括：

设置摇晃事件的摇晃方向为所述特征区域中的至少部分像素点的运动 方向。

可选地，所述指定的操作事件包括屏幕点击事件，所述映射参考对象 包括所述特征区域中的至少部分像素点的运动方向；

所述根据指定的操作事件确定映射参考对象的步骤包括：

设置指向发生屏幕点击事件的方向为所述特征区域中的至少部分像素 点的运动方向。

可选地，所述根据所述映射参考对象对所述特征区域中的至少部分像 素点映射到一帧或多帧扭曲图片中，以驱动所述静态图片逐帧变化的步骤 包括：

在所述运动方向上，按照预设模式对所述特征区域中的至少部分像素 点进行纹理映射，产生包含一帧或多帧扭曲图片变化的动态效果。

可选地，所述在所述运动方向上，按照预设模式对所述特征区域中的 至少部分像素点进行纹理映射，产生包含一帧或多帧扭曲图片变化的动态 效果的步骤包括：

将所述特征区域划分一个或多个绘制图形；每个绘制图形中具有多个 顶点，每个顶点具有纹理坐标；

在所述运动方向上，按照预设模式在一个或多个时间点移动每个绘制 图像的顶点；

针对每个绘制图形，使用图形绘制接口按照每个顶点的纹理坐标对绘 制图形中的像素点进行纹理映射，产生包含一帧或多帧扭曲图片变化的动 态效果。

可选地，所述预设模式包括简谐运动模式和/或阻尼振动模式；

所述在所述运动方向上，按照预设模式在一个或多个时间点移动每个 绘制图像的顶点的步骤包括：

在所述运动方向上，按照简谐运动模式和/或阻尼振动模式在一个或多 个时间点移动每个绘制图像的顶点。

可选地，所述在所述运动方向上，按照简谐运动模式和/或阻尼振动模 式在一个或多个时间点移动每个绘制图像的顶点的步骤包括：

确定每个绘制图像的顶点的加速度；每个绘制图像的顶点具有原始坐 标；

按照所述加速度和/或预设的阻尼系数，计算在一个或多个时间点内沿 所述运动方向移动每个绘制图像的顶点的移动距离；

由所述原始坐标和所述移动距离计算每个绘制图像的顶点的目标坐 标。

可选地，所述方法还包括：

采用所述静态图片和所述一帧或多帧扭曲图像生成动态图片。

可选地，所述方法还包括：

基于所述特征区域生成动态信息；

将所述动态信息和脚本对象写入所述静态图片中，以生成动态交互文 件。

可选地，所述基于所述特征区域生成动态信息的步骤包括：

使用所述特征区域、所述特征点和所述一个或多个参考点生成动态信 息。

可选地，所述基于所述特征区域生成动态信息的步骤包括：

使用所述特征区域和所述特征区域中的至少部分像素点的运动方向生 成动态信息。

根据本发明的另一方面，提供了一种基于静态图片的动态交互装置， 包括：

选取模块，适于在静态图片中选取特征区域；

确定模块，适于在监听到指定的交互操作事件时，根据指定的交互操 作事件确定映射参考对象；

映射模块，适于根据所述映射参考对象对所述特征区域中的至少部分 像素点映射到一帧或多帧扭曲图片中，以驱动所述静态图片逐帧变化。

可选地，所述指定的交互操作事件包括摇晃事件，所述映射参考对象 包括一个或多个参考点；

所述确定模块还适于：

按照摇晃事件的摇晃方向，在静态图片的特征区域中选取一个或多个 参考点。

可选地，所述指定的交互操作事件包括屏幕点击事件，所述映射参考 对象包括一个或多个参考点；

所述确定模块还适于：

按照指向发生屏幕点击事件的方向，在静态图片的特征区域中选取一 个或多个参考点。

可选地，所述特征区域具有特征点；所述映射模块还适于：

根据所述特征点和所述一个或多个参考点将所述静态图片的像素点映 射到一帧或多帧扭曲图片中。

可选地，所述特征区域包括凸区域，所述特征点包括重心点。

可选地，所述映射模块还适于：

生成扭曲图片；

将在所述特征区域中第一连线上的像素点映射到第二连线上；

将所述第二连线上的像素点拷贝到在所述扭曲图片中的相同位置；

其中，所述第一连线为所述特征点与边缘点之间的连线，所述第二连 线为当前参考点与边缘点的连线，所述边缘点为所述特征区域边缘上的坐 标点。

可选地，所述映射模块还适于：

计算在所述特征区域中第一连线上的像素点，在第一连线上的相对位 置；

按照所述相对位置，将所述像素点拷贝到第二连线上。

可选地，所述映射模块还适于：

在所述特征区域外的像素点映射到在所述扭曲图片中的相同位置。

可选地，所述映射模块还适于：

对扭曲图片中位置重叠的像素点进行像素点叠加处理。

可选地，所述映射模块还适于：

对扭曲图片中的空白位置进行像素点插值处理。

可选地，所述指定的交互操作事件包括摇晃事件，所述映射参考对象 包括所述特征区域中的至少部分像素点的运动方向；

所述确定模块还适于：

设置摇晃事件的摇晃方向为所述特征区域中的至少部分像素点的运动 方向。

可选地，所述指定的操作事件包括屏幕点击事件，所述映射参考对象 包括所述特征区域中的至少部分像素点的运动方向；

所述确定模块还适于：

设置指向发生屏幕点击事件的方向为所述特征区域中的至少部分像素 点的运动方向。

可选地，所述映射模块还适于：

在所述运动方向上，按照预设模式对所述特征区域中的至少部分像素 点进行纹理映射，产生包含一帧或多帧扭曲图片变化的动态效果。

可选地，所述映射模块还适于：

将所述特征区域划分一个或多个绘制图形；每个绘制图形中具有多个 顶点，每个顶点具有纹理坐标；

在所述运动方向上，按照预设模式在一个或多个时间点移动每个绘制 图像的顶点；

针对每个绘制图形，使用图形绘制接口按照每个顶点的纹理坐标对绘 制图形中的像素点进行纹理映射，产生包含一帧或多帧扭曲图片变化的动 态效果。

可选地，所述预设模式包括简谐运动模式和/或阻尼振动模式；所述映 射模块还适于：

在所述运动方向上，按照简谐运动模式和/或阻尼振动模式在一个或多 个时间点移动每个绘制图像的顶点。

可选地，所述映射模块还适于：

确定每个绘制图像的顶点的加速度；每个绘制图像的顶点具有原始坐 标；

按照所述加速度和/或预设的阻尼系数，计算在一个或多个时间点内沿 所述运动方向移动每个绘制图像的顶点的移动距离；

由所述原始坐标和所述移动距离计算每个绘制图像的顶点的目标坐 标。

可选地，所述装置还包括：

第一生成模块，适于采用所述静态图片和所述一帧或多帧扭曲图像生 成动态图片。

可选地，所述装置还包括：

第二生成模块，适于基于所述特征区域生成动态信息；

写入模块，适于将所述动态信息和脚本对象写入所述静态图片中，以 生成动态交互文件。

可选地，所述第二生成模块还适于：

使用所述特征区域、所述特征点和所述一个或多个参考点生成动态信 息。

可选地，所述第二生成模块还适于：

使用所述特征区域和所述特征区域中的至少部分像素点的运动方向生 成动态信息。

本发明实施例由监听到指定的交互操作事件时确定映射参考对象，以 对静态图片的特征区域中的至少部分像素点映射到一帧或多帧扭曲图片 中，以驱动静态图片逐帧变化，无需借助专门的应用生成动态效果，降低 了技术门槛，提高了操作的简便性，此外，通过对用户的交互操作进行反 馈，实现了静态图片的动态交互，丰富了动态效果的形式。

本发明实施例基于一个或多个参考点将静态图片的像素点映射到一帧 或多帧扭曲图片中，生成动态效果，计算简单、无需依赖第三方开发包、 库文件或者工具，渲染生成速度快，对资源消耗少，容易跨平台。

本发明基于运动方向将特征区域中的至少部分像素点进行纹理映射， 产生包含一帧或多帧扭曲图片变化的动态效果，一方面，对特征区域生成 动态效果，减少了动态效果的体积，减少了传输时的带宽占用，方便传 输，另一方面，由于纹理映射效率很高，减少了生成动态效果的耗时，对 于网络图片或者系统相册里的图片等均可以很快地产生动态效果，快速、 方便地生成动态效果，实现了动态效果可以和用户的交互行为的实时互 动。

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

附图说明

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

图1示出了根据本发明一个实施例的一种基于静态图片的动态交互方法 实施例的步骤流程图；

图2示出了根据本发明一个实施例的一种静态图片的示例图；

图3示出了根据本发明一个实施例的一种在静态图片中选取特征区域的 示例图；

图4A和图4B示出了根据本发明一个实施例的一种像素点的映射示例 图；

图5A和图5B示出了根据本发明一个实施例的一种扭曲图像的示例 图；以及

图6示出了根据本发明一个实施例的一种基于静态图片的动态交互装置 实施例的结构框图。

具体实施方式

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

参照图1，示出了根据本发明一个实施例的一种基于静态图片的动态交 互方法实施例的步骤流程图，具体可以包括如下步骤：

步骤101，在静态图片中选取特征区域；

需要说明的是，本发明实施例可以应用于移动设备中，例如，手机、 PDA(Personal Digital Assistant，个人数字助理)、膝上型计算机、掌上电 脑等等，也可以应用于固定设备中，例如，个人电脑(Personal Computer， PC)、笔记本电脑等等，本发明实施例对此不加以限制。

这些移动设备或固定设备一般可以支持包括Android(安卓)、IOS、 WindowsPhone或者windows等的操作系统，通常可以存储静态图片。

静态图片，可以是相对于动态图片而言的，即不具有动态效果的图 片。

该静态图片可以包括JPG、JPEG、PNG、BMP等格式，本发明实施例 对此不加以限制。

在本发明实施例中，可以在静态图片中选取某一个区域作为特征区 域，该特征区域可以为多边形、圆形、椭圆型等形状，针对该特征区域中 的图像数据进行动态效果的生成。

例如，对于如图2所示的静态图片，可以提供一个如图3所示的椭圆形 选择框，用户可以改变该椭圆形的选择框的形状，并选择其对于静态图片 的位置，该位置可以确定为特征区域。

步骤102，当监听到指定的交互操作事件时，根据指定的交互操作事件 确定映射参考对象；

在具体实现中，该交互操作事件可以为由用户进行交互操作所引起的 事件。

映射参考对象可以为针对特征区域中的像素点进行映射时，作为映射 位置参考的对象。

通过该交互操作事件的触发，可以使得特征区域进行类似于物理水球 的抖动效果(近似装满水的气球)，并且其抖动方向和方式是根据用户不同 的交互操作而变化的，如手机摇动的方向、屏幕点击的位置等。

在本发明的一种可选实施例中，所述指定的交互操作事件可以包括摇 晃事件，所述映射参考对象可以包括一个或多个参考点；

则在本发明实施例中，步骤102可以包括如下子步骤：

子步骤S11，按照摇晃事件的摇晃方向，在静态图片的特征区域中选取 一个或多个参考点。

在具体实现中，可以在监听到指定的交互操作事件时，根据指定的交 互操作事件确定一个或多个参考点。

在本发明实施例中，用户可以通过摇晃进行交互操作。

具体而言，可以从操作系统(如Android)的传感器事件接口，监听加 速度传感器(如三轴加速度传感器)事件。

收到加速度传感器变化事件后，分别获取设备在水平、垂直以及空间 垂直三个方向的加速度，计算各方向加速度的平方和，并获取其平方根， 作为设备移动的综合加速度。

若综合加速度大于设定的加速度阈值，则可以判断监听到摇晃事件， 认定用户的摇晃操作进行交互。

在摇晃方向上，可以与摇晃方向相同，也可以与摇晃方向相反，在静 态图片的特征区域中选取一个或多个连续分布的参考点。

在本发明的一种可选实施例中，所述指定的交互操作事件可以包括屏 幕点击事件，所述映射参考对象可以包括一个或多个参考点；

则在本发明实施例中，步骤102可以包括如下子步骤：

子步骤S12，按照指向发生屏幕点击事件的方向，在静态图片的特征区 域中选取一个或多个参考点。

在本发明实施例中，用户可以通过点击屏幕(如特征区域)进行交互操 作。

若监听到屏幕点击事件，则可以按照指向发生屏幕点击事件的方向， 如特征区域的中心点/重心点指向发生屏幕点击事件的方向，可以与该方向 相同，也可以与该方向相反，在静态图片的特征区域中选取一个或多个连 续分布的参考点。

当然，上述参考点的确定方式只是作为示例，在实施本发明实施例 时，可以根据实际情况设置其他参考点的确定方式，例如，直接指定参考 点的位置，本发明实施例对此不加以限制。另外，除了上述参考点的确定 方式外，本领域技术人员还可以根据实际需要采用其它参考点的确定方 式，本发明实施例对此也不加以限制。

在本发明的一种可选实施例中，所述指定的交互操作事件可以包括摇 晃事件，所述映射参考对象可以包括所述特征区域中的至少部分像素点的 运动方向；

则在本发明实施例中，步骤102可以包括如下子步骤：

子步骤S13，设置摇晃事件的摇晃方向为所述特征区域中的至少部分像 素点的运动方向。

为了产生动态效果，可以移动绘制图形的顶点的位置，顶点的位置的 移动可以取决于用户的交互操作。

例如，当用户手摇晃手机时，则绘制图形的顶点可以会往摇晃的方向 移动，其形状也会随之改变。

又例如，当用户手触摸屏幕的某个位置，则绘制图形的顶点可以会往 用户的触摸点移动，其形状也会随之改变。

通过该交互操作事件的触发，可以使得特征区域进行类似于物理水球 的抖动效果(近似装满水的气球)，并且其抖动方向和方式是根据用户不同 的交互操作而变化的，如手机摇动的方向、屏幕点击的位置等。

在本发明实施例中，用户可以通过摇晃进行交互操作。

在摇晃方向上，可以与摇晃方向相同，也可以与摇晃方向相反，作为 静态图片的特征区域中选取特征区域中的至少部分像素点的运动方向。

需要说明的是，运动方向可以包括加速度。

在本发明的一种可选实施例中，所述指定的操作事件可以包括屏幕点 击事件，所述映射参考对象可以包括所述特征区域中的至少部分像素点的 运动方向；

则在本发明实施例中，步骤102可以包括如下子步骤：

子步骤S14，设置指向发生屏幕点击事件的方向为所述特征区域中的至 少部分像素点的运动方向。

在本发明实施例中，用户可以通过点击屏幕(如特征区域)进行交互操 作。

若监听到屏幕点击事件，则可以按照指向发生屏幕点击事件的方向， 如特征区域的中心点/重心点指向发生屏幕点击事件的方向，可以与该方向 相同，也可以与该方向相反，作为静态图片的特征区域中选取特征区域中 的至少部分像素点的运动方向。

当然，上述运动方向的确定方式只是作为示例，在实施本发明实施例 时，可以根据实际情况设置其他运动方向的确定方式，本发明实施例对此 不加以限制。另外，除了上述参考点的确定方式外，本领域技术人员还可 以根据实际需要采用其它运动方向的确定方式，本发明实施例对此也不加 以限制。

步骤103，根据所述映射参考对象对所述特征区域中的至少部分像素点 映射到一帧或多帧扭曲图片中，以驱动所述静态图片逐帧变化。

在具体实现中，可以映射参考对象作为扭曲的幅度参考，对静态图片 进行映射，以生成扭曲图片。

当映射参考对象的幅度越大，扭曲的幅度可以越大，当映射参考对象 的幅度越小，扭曲的幅度可以越小。

本发明实施例由监听到指定的交互操作事件时确定映射参考对象，以 对静态图片的特征区域中的至少部分像素点映射到一帧或多帧扭曲图片 中，以驱动静态图片逐帧变化，无需借助专门的应用生成动态效果，降低 了技术门槛，提高了操作的简便性，此外，通过对用户的交互操作进行反 馈，实现了静态图片的动态交互，丰富了动态效果的形式。

在本发明的一种可选实施例中，步骤103可以包括如下子步骤：

子步骤S21，根据所述特征点和所述一个或多个参考点将所述静态图片 的像素点映射到一帧或多帧扭曲图片中。

在本发明实施例中，所述特征区域中可以具有特征点，用以进行动态 效果的生成。

在本发明实施例中，可以以特征点为基准，以参考点作为扭曲的幅度 参考，对静态图片进行映射，以生成扭曲图片。

静态图片中的特征区域中的像素点可以沿特征点指向参考点的方向映 射，造成静态图片的扭曲。当参考点偏离特征点越大，扭曲的幅度可以越 大，当参考点偏离特征点越小，扭曲的幅度可以越小，特别地，当特征点 与参考点重合时，扭曲图片中可以不产生扭曲。

在本发明实施例的一种可选示例中，所述特征区域可以包括凸区域， 所述特征点可以包括重心点。

凸区域，从几何上看可以是指图形是往外凸的，没有凹进去的地方。

代数上可以这样定义凸区域:集合中任取两个点a、b，有t*a+(1-t)*b仍 属于这个集合，其中0<t<1，这个表达式的意思可以是连接两个点a b的直 线段还在集合中。

几何上的重心，又称为几何中心，当物体为均质(密度为定值)，质心 等同于形心，如，三角形三条中线的交点。

在本发明的一种可选实施例中，子步骤S21可以包括如下子步骤：

子步骤S211，生成扭曲图片；

在本发明实施例中，扭曲图片的初始状态可以是空白的。

子步骤S212，将在所述特征区域中第一连线上的像素点映射到第二连 线上；

其中，所述第一连线可以为所述特征点与边缘点之间的连线，所述第 二连线可以为当前参考点与边缘点的连线，所述边缘点可以为所述特征区 域边缘上的坐标点。

本发明实施例中，对于在特征区域中的像素点，可以按照参考点进行 映射。

需要说明的是，若特征区域为凸区域，参考点为特征区域内的像素 点，则映射后的像素点可以位于特征区域内，实现特征区域内的像素点在 特征区域内进行映射，而不会映射到特征区域外。

例如，如图4A所示，C0为特征点(如重心点)，C1可以为参考点，E 可以边缘点，则C0E可以为第一连线，C1E可以为第二连线，本发明实施 例中，可以将第一连线C0E上的像素点P0，映射到第二连线C1E上，获得 映射到的点P1。

在本发明的一种可选实施例中，子步骤S212可以包括如下子步骤：

子步骤S2121，计算在所述特征区域中第一连线上的像素点，在第一连 线上的相对位置；

子步骤S2122，按照所述相对位置，将所述像素点拷贝到第二连线上。

在实际应用中，可以以比例关系表达像素点的相对位置。

例如，在一个示例中，如图4A所示，线段C0P0与线段C0E的比值， 作为比例R，可以作为像素点P0在第一连线C0E上的相对位置。根据比例 R，求得线段C1E上的点P1，使得线段C1P1与第二连线C1E的比值为R。

当然，在本发明实施例还可以采用其他包含像素点的线段与第一连线 之间比例表达相对位置，本发明实施例对此不加以限制。

子步骤S213，将所述第二连线上的像素点拷贝到在所述扭曲图片中的 相同位置；

若确定了第二连线上像素点的位置，则可以将其拷贝到扭曲图片中的 相同位置，进行图像的扭曲映射。

在本发明的一种可选实施例中，子步骤S21还可以包括如下子步骤：

子步骤S214，在所述特征区域外的像素点映射到在所述扭曲图片中的 相同位置。

本发明实施例中，如果静态图片上像素点在凸特征区域外，则可以直 接拷贝到扭曲图片上对应的相同位置，不产生扭曲。

当然，本发明实施例也可以不对特征区域外的像素点进行映射，仅基 于特征区域中的像素点进行映射，本发明实施例对此不加以限制。

在本发明的一种可选实施例中，子步骤S21还可以包括如下子步骤：

子步骤S215，对扭曲图片中位置重叠的像素点进行像素点叠加处理。

在本发明实施例中，由于静态图片进行映射产生扭曲，在扭曲图片中 像素点较为集中的区域，可能会产生像素点的位置重叠的情形。

针对像素点的位置重叠的情形，本发明实施例可以进行像素点叠加处 理。

例如，若应用RGB色彩模式，则可以通过对像素点的红(R)、绿(G)、 蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色 的。

当然，为了进一步减少计算量，也可以从叠加的像素点中选取一个像 素点(如随机选取像素点、选取最后拷贝到该位置的像素点)作为该位置的 像素点，还可以采用其他方式选取该位置的像素点，本发明实施例对此不 加以限制。

在本发明的一种可选实施例中，子步骤S21还可以包括如下子步骤：

子步骤S216，对扭曲图片中的空白位置进行像素点插值处理。

在本发明实施例中，由于静态图片进行映射产生扭曲，在扭曲图片中 像素点较为稀疏的区域，可能会由某些像素点没有被赋值(即没有像素点映 射到该位置，该位置的像素点为原始状态，如白色)，产生空白位置的情 形。

针对扭曲图片中的空白位置的情形，本发明实施例可以进行像素点插 值处理，以补全扭曲图片。

例如，对于没有被赋值的像素点Px，选取距离它最近的已经赋值的像 素点Py(如上方的像素点、下方的像素点、左侧的像素点、右侧的像素点 等)，将像素点Py的值赋给像素点Px。

在实际应用中，当参考点(如图4A所示的C1)移动到某一个位置的时 候，可以根据参考点(如图4A所示的C1)的位置映射出一张扭曲图片，随 着参考点(如图4A所示的C1)移动到不同的位置，扭曲图片也发生变化， 扭曲图片可以连续播放，从而形成动态效果。

如图5A所示，若参考点(如图4A所示的C1)在特征点(如图4A所 示的C0)的左侧，则特征图像中整体可以往左侧扭曲；图5B所示，若参考 点在特征点(如图4A所示的C0)的右侧，则特征图像中整体可以往右侧扭 曲。

进一步地，若参考点的位置根据指定的交互操作事件确定，则参考点 可以从特征点的位置出发，沿指定的交互操作事件对应的方向(如摇晃事件 的摇晃方向、指向发生屏幕点击事件的方向)在特征点两侧分布，最终与特 征点重合，则特征区域映射出的扭曲图片可以沿指定的交互操作事件对应 的方向来回扭曲，产生抖动效果，并最终静止。

例如，如图4A所示，参考点C1沿着经过重心点C0的X轴方向上做震 荡移动，参考点C1每移动到一个位置就会生成一个扭曲图片，扭曲图片逐 帧播放，可以产生如图5A和图5B所示的特征区域内的图像表现出左右震 动的动态效果。

本发明实施例基于一个或多个参考点将静态图片的像素点映射到一帧 或多帧扭曲图片中，生成动态效果，计算简单、无需依赖第三方开发包、 库文件或者工具，渲染生成速度快，对资源消耗少，容易跨平台。

在本发明的一种可选实施例中，步骤103可以包括如下子步骤：

子步骤S31，在所述运动方向上，按照预设模式对所述特征区域中的至 少部分像素点进行纹理映射，产生包含一帧或多帧扭曲图片变化的动态效 果。

在本发明实施例中，可以以运动方向(包括加速度)作为扭曲的幅度参 考，对静态图片进行映射，以生成扭曲图片。

静态图片中的特征区域中的像素点可以沿运动方向映射，造成静态图 片的扭曲。

当运动方向的幅度越大(如加速度的幅度越大、点击屏幕的位置离特征 区域的中心越远)，扭曲的幅度可以越大，当运动方向的幅度越小(如加速 度的幅度越小、点击屏幕的位置离特征区域的中心越近)，扭曲的幅度可以 越小。

在本发明的一种可选实施例中，子步骤S31可以包括如下子步骤：

子步骤S311，将所述特征区域划分一个或多个绘制图形；

在本发明实施例中，可以应用图形学的方式，即可以基于网格的生成 动态效果。

具体而言，可以将特征区域划分为一个或多个绘制图形，可选为三角 形或其他形状的网格(即绘制图形)，采用三角形是因为图形绘制接口，如 OpenGL(Open Graphics Library)，对于三角形的图形渲染有高效率的加速 算法。

每个绘制图形中可以具有多个顶点，每个绘制图形(如三角形)可以由 顶点(如三个顶点)表示，除了对应的二维坐标外，每个顶点可以具有静态 图片的纹理坐标。

在一个实施例中，可以对特征区域的中心区域划分一个或多个绘制图 形，以模拟类似于物理水球的抖动效果(近似装满水的气球)。

子步骤S312，在所述运动方向上，按照预设模式在一个或多个时间点 移动每个绘制图像的顶点；

在本发明实施例中，可以按照预设模式，沿该运动方向的相同方向、 相反方向移动每个绘制图形的顶点。

在本发明的一种可选实施例中，所述预设模式可以包括简谐运动模式 和/或阻尼振动模式；则在本发明实施例中，子步骤S312可以包括如下子步 骤：

子步骤S3121，在所述运动方向上，按照简谐运动模式和/或阻尼振动 模式在一个或多个时间点移动每个绘制图像的顶点。

简谐运动，或简谐振动、谐振、SHM(Simple Harmonic Motion)，可以 指某物体(如每个绘制图形的顶点)进行简谐运动时，物体(如每个绘制图 形的顶点)所受的力跟位移成正比，并且力总是指向平衡位置。

阻尼振动可以指在阻力作用下的震动，当阻力大小可以忽略时，可以 说是简谐运动。振动过程中受到阻力的作用，振幅逐渐减小，能量逐渐损 失，直至振动停止。

在本发明实施例的一种可选示例中，子步骤S3121可以包括如下子步 骤：

子步骤S31211，确定每个绘制图像的顶点的加速度；

若交互操作事件为摇晃事件，则可以从该摇晃事件中提取摇晃时初始 的加速度，作为每个绘制图形的顶点的加速度，摇晃的幅度越大，每个绘 制图形的顶点的加速度也越大。

若交互操作事件为屏幕点击事件，则可以提取预设的加速度作为每个 绘制图形的顶点初始的加速度。

子步骤S31212，按照所述加速度和/或预设的阻尼系数，计算在一个或 多个时间点内沿所述运动方向移动每个绘制图像的顶点的移动距离；

对于简谐运动，可以按照该加速度模拟每个绘制图形的顶点所受的 力，该力指向平衡位置，构建弹簧模型，模拟每个绘制图形的顶点沿运动 方向进行简谐运动。

对于阻尼振动，可以按照该阻尼系统模拟每个绘制图形的顶点所受的 阻力，模拟每个绘制图形的顶点沿运动方向进行阻尼振动。

基于加速度、阻尼系数、运动方向可以通过运动学公式计算出在一个 或多个时间点内移动距离。

子步骤S31213，由所述原始坐标和所述移动距离计算每个绘制图像的 顶点的目标坐标。

在本发明实施例中，每个绘制图形的顶点可以具有原始坐标，即在静 态图片中的原始的二维坐标，沿运动方向，添加上该移动距离，则可以获 得移动后的每个绘制图形的顶点的位置(即目标坐标)。

子步骤S313，针对每个绘制图形，使用图形绘制接口按照每个顶点的 纹理坐标对绘制图形中的像素点进行纹理映射，产生包含一帧或多帧扭曲 图片变化的动态效果。

在具体实现中，图形绘制接口可以采用OpenGL，其可以提供纹理映射 (Texture Mapping)，即是将纹理空间中的纹理像素映射到屏幕空间中的像 素的过程。

通常，使用纹理映射的步骤可以如下：

第一步:定义纹理对象

const int TexNumber4；

GLuint mes_Texture[TexNumber]；//定义纹理对象数组

第二步:生成纹理对象数组

glGenTextures(TexNumber,m_Texture)；

第三步:通过使用glBindTexture选择纹理对象，来完成该纹理对象的定 义。

glBindTexture(GL_TEXTURE 2D,m_Texture[0])；

glTexImage2D(GL_TEXTURE_2D,0,3,mes_Texmapl.GetWidth(),mee_Tex  mapl.GetHeight(),0,GL_BGR_EXT,GL_UNSIGNED_BYTE,mse_Texmapl.Get  DibBitsl'trQ)；

第四步:在绘制景物之前通过glBindTexture，为该景物加载相应的纹 理。

glBindTexture(GLes_TEXTURE_2D,mse_Texture[0])；

第五步:在程序结束之前调用glDeleteTextures删除纹理对象。

glDeleteTextures(TexNumber,mee_Texture)。

在一个示例中，如图4B所示，绘制图形为三角形，其包括一个或多个 像素点，其中，顶点在纹理空间中具有纹理坐标，顶点a的纹理坐标为 (0.2，0.8)，顶点b的纹理坐标为(0.4，0.2)，顶点c的纹理坐标为(0.8， 0.4)，将该绘制图形移动的顶点进行移动，使得绘制图形发生变形，进行 OpenGL纹理映射到获对象空间，渲染出来后，绘制图形产生了拉伸、压缩 等效果，特征区域就会呈现出移动的现象。

如图5A所示，若运特征区域中的至少部分像素点的运动方向往特征区 域的左侧，则特征图像中整体可以往左侧扭曲；图5B所示，若特征区域中 的至少部分像素点的运动方向往特征区域的右侧，则特征图像中整体可以 往右侧扭曲。

通过OpenGL的纹理映射，可以将静态图片的特征区域中心区域附近的 绘制图形的顶点模拟弹簧的简谐运动，使得图片被规律的进行拉升，产生 类似于弹力水球的抖动效果。

进一步地，若运动方向根据指定的交互操作事件确定，则特征区域中 的至少部分像素点的运动方向可以沿指定的交互操作事件对应的方向(如摇 晃事件的摇晃方向、指向发生屏幕点击事件的方向)在特征区域的两侧(如 左侧和右侧、上方和下方)，则按照简谐运动模式和/或阻尼振动模式，特征 区域映射出的扭曲图片可以沿指定的交互操作事件对应的方向来回扭曲， 产生抖动效果，并最终静止。

其中，根据传感器可以判断手机摇动的方向，静态图片中特征区域可 以会沿着摇动方向运动，当设备左右上下剧烈摇动时，特征区域可以绕着 中心旋转以模拟猛烈摇动的动态效果。

通过判断手指点击屏幕的位置，特征区域中心可以沿着中心位置和点 击位置的方向进行抖动，当手指按住抖动区域内，并在屏幕上来回滑动 时，特征区域中心可以跟随手指运动的方向，产生被拖拽的效果，并通过 微抖动算法，使得抖动区域产生水球被拖拽时产生的微微抖动的效果，增 强其物理真实性。

例如，设备左右摇晃或者用户在特征区域中左右来回滑动，使得特征 区域中的至少部分像素点沿水平轴方向上做震荡移动，特征区域中每个绘 制图形的顶点在每一个时间点移动到一个位置就会生成一个扭曲图片，扭 曲图片逐帧播放，可以产生如图5A和图5B所示的特征区域内的图像表现 出左右震动的动态效果。

本发明基于运动方向将特征区域中的至少部分像素点进行纹理映射， 产生包含一帧或多帧扭曲图片变化的动态效果，一方面，对特征区域生成 动态效果，减少了动态效果的体积，减少了传输时的带宽占用，方便传 输，另一方面，由于纹理映射效率很高，减少了生成动态效果的耗时，对 于网络图片或者系统相册里的图片等均可以很快地产生动态效果，快速、 方便地生成动态效果，实现了动态效果可以和用户的交互行为的实时互 动。

在本发明的一种可选实施例中，所述方法还可以包括如下步骤：

步骤104，采用所述静态图片和所述一帧或多帧扭曲图像生成动态图 片。

在本发明实施例中，可以保存一帧静态图片，以及，一帧或多帧包括 该特征区域的扭曲图片，生成动态图片，例如GIF。

相对于传统的GIF，由于减少了扭曲图片以外的图像数据的存储，可以 减少动态图片的体积大小。

在本发明的一种可选实施例中，所述方法还可以包括如下步骤：

步骤105，基于所述特征区域生成动态信息；

动态信息可以为将静态图片的特征区域映射到一帧或多帧扭曲图像的 配置信息，例如XML(Extensible Markup Language，可扩展的标识语言)、 json(Javascript Object Notation，数据交换语言)等。

以json设计的配置信息的示例可以如下：

在本发明的一种可选实施例中，步骤105可以包括如下子步骤：

子步骤S41，使用所述特征区域、所述特征点和所述一个或多个参考点 生成动态信息。

在本发明实施例中，可以将特征区域、特征点和一个或多个参考点生 成动态信息，以支持基于参考点的动态效果的生成。

在本发明的一种可选实施例中，步骤105可以包括如下子步骤：

子步骤S42，使用所述特征区域和所述特征区域中的至少部分像素点的 运动方向生成动态信息。

在本发明实施例中，可以将特征区域、特征区域中的至少部分像素点 的运动方向生成生成动态信息，以支持基于运动方向的动态效果的生成。

步骤106，将所述动态信息和脚本对象写入所述静态图片中，以生成动 态交互文件。

在本发明实施例中，可以将动态信息、脚本对象(如JS脚本)写入静 态图片中，可以传输到网络或者给其他用户、也可以进行存储。

在读取该脚本对象后，可以使用脚本对象按照该动态信息对该静态图 片进行映射，以产生逐帧变化的动态效果。

对于方法实施例，为了简单描述，故将其都表述为一系列的动作组 合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺 序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时 进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属 于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。

参照图6，示出了根据本发明一个实施例的一种基于静态图片的动态交 互装置实施例的结构框图，具体可以包括如下模块：

选取模块601，适于在静态图片中选取特征区域；

确定模块602，适于在监听到指定的交互操作事件时，根据指定的交互 操作事件确定映射参考对象；

映射模块603，适于根据所述映射参考对象对所述特征区域中的至少部 分像素点映射到一帧或多帧扭曲图片中，以驱动所述静态图片逐帧变化。

在本发明的一种可选实施例中，所述指定的交互操作事件可以包括摇 晃事件，所述映射参考对象可以包括一个或多个参考点；

所述确定模块602还可以适于：

按照摇晃事件的摇晃方向，在静态图片的特征区域中选取一个或多个 参考点。

在本发明的一种可选实施例中，所述指定的交互操作事件可以包括屏 幕点击事件，所述映射参考对象可以包括一个或多个参考点；

所述确定模块602还可以适于：

按照指向发生屏幕点击事件的方向，在静态图片的特征区域中选取一 个或多个参考点。

在本发明的一种可选实施例中，所述特征区域可以具有特征点；所述 映射模块603还可以适于：

根据所述特征点和所述一个或多个参考点将所述静态图片的像素点映 射到一帧或多帧扭曲图片中。

在本发明实施例的一种可选示例中，所述特征区域可以包括凸区域， 所述特征点可以包括重心点。

在本发明的一种可选实施例中，所述映射模块603还可以适于：

生成扭曲图片；

将在所述特征区域中第一连线上的像素点映射到第二连线上；

将所述第二连线上的像素点拷贝到在所述扭曲图片中的相同位置；

其中，所述第一连线为所述特征点与边缘点之间的连线，所述第二连 线为当前参考点与边缘点的连线，所述边缘点为所述特征区域边缘上的坐 标点。

在本发明的一种可选实施例中，所述映射模块603还可以适于：

计算在所述特征区域中第一连线上的像素点，在第一连线上的相对位 置；

按照所述相对位置，将所述像素点拷贝到第二连线上。

在本发明的一种可选实施例中，所述映射模块603还可以适于：

在所述特征区域外的像素点映射到在所述扭曲图片中的相同位置。

在本发明的一种可选实施例中，所述映射模块603还可以适于：

对扭曲图片中位置重叠的像素点进行像素点叠加处理。

在本发明的一种可选实施例中，所述映射模块603还可以适于：

对扭曲图片中的空白位置进行像素点插值处理。

在本发明的一种可选实施例中，所述指定的交互操作事件可以包括摇 晃事件，所述映射参考对象可以包括所述特征区域中的至少部分像素点的 运动方向；所述确定模块602还可以适于：

设置摇晃事件的摇晃方向为所述特征区域中的至少部分像素点的运动 方向。

在本发明的一种可选实施例中，所述指定的操作事件可以包括屏幕点 击事件，所述映射参考对象可以包括所述特征区域中的至少部分像素点的 运动方向；所述确定模块602还可以适于：

设置指向发生屏幕点击事件的方向为所述特征区域中的至少部分像素 点的运动方向。

在本发明的一种可选实施例中，所述映射模块603还可以适于：

在所述运动方向上，按照预设模式对所述特征区域中的至少部分像素 点进行纹理映射，产生包含一帧或多帧扭曲图片变化的动态效果。

在本发明的一种可选实施例中，所述映射模块603还可以适于：

将所述特征区域划分一个或多个绘制图形；每个绘制图形中具有多个 顶点，每个顶点具有纹理坐标；

在所述运动方向上，按照预设模式在一个或多个时间点移动每个绘制 图像的顶点；

针对每个绘制图形，使用图形绘制接口按照每个顶点的纹理坐标对绘 制图形中的像素点进行纹理映射，产生包含一帧或多帧扭曲图片变化的动 态效果。

在本发明的一种可选实施例中，所述预设模式可以包括简谐运动模式 和/或阻尼振动模式；所述映射模块603还可以适于：

在所述运动方向上，按照简谐运动模式和/或阻尼振动模式在一个或多 个时间点移动每个绘制图像的顶点。

在本发明的一种可选实施例中，所述映射模块603还可以适于：

确定每个绘制图像的顶点的加速度；每个绘制图像的顶点具有原始坐 标；

按照所述加速度和/或预设的阻尼系数，计算在一个或多个时间点内沿 所述运动方向移动每个绘制图像的顶点的移动距离；

由所述原始坐标和所述移动距离计算每个绘制图像的顶点的目标坐 标。

在本发明的一种可选实施例中，所述装置还可以包括如下模块：

第一生成模块，适于采用所述静态图片和所述一帧或多帧扭曲图像生 成动态图片。

在本发明的一种可选实施例中，所述装置还可以包括如下模块：

第二生成模块，适于基于所述特征区域生成动态信息；

写入模块，适于将所述动态信息和脚本对象写入所述静态图片中，以 生成动态交互文件。

在本发明的一种可选实施例中，所述第二生成模块还可以适于：

使用所述特征区域、所述特征点和所述一个或多个参考点生成动态信 息。

在本发明的一种可选实施例中，所述第二生成模块还可以适于：

使用所述特征区域和所述特征区域中的至少部分像素点的运动方向生 成动态信息。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比 较简单，相关之处参见方法实施例的部分说明即可。

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

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

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

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

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

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

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