图片动态展示方法和装置的制造方法
【专利摘要】本发明涉及一种图片动态展示方法和装置，该图片动态展示方法包括：获取多于一个的图片；确定获取的图片的展示顺序；根据所述展示顺序确定获取的各图片对应于完整轨迹中的局部轨迹；根据所述展示顺序轮流绘制相应的局部轨迹，在绘制的局部轨迹对应的展示区域内展示相应的所述图片；其中，在按所述展示顺序相邻的局部轨迹之间过渡时按照在所述完整轨迹中相应的过渡轨迹进行连续绘制。本发明提供的图片动态展示方法和装置提高了通过图片传达信息的效率。
【专利说明】
图片动态展示方法和装置
技术领域
[0001]本发明涉及信息处理技术领域，特别是涉及一种图片动态展示方法和装置。【背景技术】
[0002]图片是一种可承载视觉信息的数据，通过展示图片可以将视觉信息还原。图片作为一种常用的信息承载体，可以记录现实世界中发生的事件，也可以表达图片作者的情感等，将图片展示出来可以再现历史事件的内容，或者可以传达图片作者情感等。
[0003]目前展示图片主要是根据用户操作来进行展示，比如展示一系列图片的缩略图， 检测到用户点击的缩略图后，展示被点击的缩略图对应的图片。然而，目前根据用户操作来展示图片的方式，依赖于用户操作，操作繁琐，使得通过图片传达信息的效率低。
【发明内容】
[0004]基于此，有必要针对目前根据用户操作来展示图片的方式，导致通过图片传达信息的效率低的问题，提供一种图片动态展示方法。[00〇5]—种图片动态展不方法，包括:
[0006]获取多于一个的图片；[00〇7]确定获取的图片的展不顺序；
[0008]根据所述展示顺序确定获取的各图片对应于完整轨迹中的局部轨迹；
[0009]根据所述展示顺序轮流绘制相应的局部轨迹，在绘制的局部轨迹对应的展示区域内展示相应的所述图片;其中，在按所述展示顺序相邻的局部轨迹之间过渡时按照在所述完整轨迹中相应的过渡轨迹进行连续绘制。[〇〇1〇] 一种图片动态展示装置，包括:
[0011]图片获取模块，用于获取多于一个的图片；
[0012]展示顺序确定模块，用于确定获取的图片的展示顺序；
[0013]局部轨迹确定模块，用于根据所述展示顺序确定获取的各图片对应于完整轨迹中的局部轨迹；
[0014]轨迹绘制模块，用于根据所述展示顺序轮流绘制相应的局部轨迹，且在按所述展示顺序相邻的局部轨迹之间过渡时按照在所述完整轨迹中相应的过渡轨迹进行连续绘制；
[0015]图片展示模块，用于在绘制的局部轨迹对应的展示区域内展示相应的所述图片。
[0016]上述图片动态展示方法和装置，对于多个图片，确定各图片的展示顺序，并根据展示顺序确定图片对应的局部轨迹，这样各个图片对应的局部轨迹在完整轨迹中也是按照该展示顺序排列的。根据展示顺序轮流地绘制各个图片对应的局部轨迹，绘制的局部轨迹对应有展示区域，在该展示区域内展示该局部轨迹对应的图片，这样可以按照展示顺序轮流展示图片，不需要用户操作的干预，提高了通过图片传达信息的效率。而且在按所述展示顺序相邻的局部轨迹之间过渡时，按照在所述完整轨迹中相应的过渡轨迹进行连续绘制，这样随着图片的展示，可以呈现出整个完整轨迹，通过完整轨迹的变换能够以可视形式表达图片之间的联系，进一步提高了通过图片传达信息的效率。【附图说明】
[0017]图1为一个实施例中电子设备的内部结构不意图；
[0018]图2为一个实施例中图片动态展示方法的流程示意图；
[0019]图3为一个实施例中完整轨迹的示意图；
[0020]图4为一个实施例中绘制各条局部轨迹时的屏幕显示区域的示意图；
[0021]图5为一个实施例中在相邻局部轨迹之间过渡时屏幕显示区域的变化示意图； [〇〇22]图6为另一个实施例中在相邻局部轨迹之间过渡时屏幕显示区域的变化示意图；
[0023]图7为一个实施例中根据展示顺序轮流绘制相应的局部轨迹，在绘制的局部轨迹对应的展示区域内展示相应的图片时屏幕显示区域的变化示意图；
[0024]图8为一个实施例中确定获取的图片的展示顺序的步骤的流程示意图；
[0025]图9为一个实施例中根据展示顺序轮流绘制相应的局部轨迹的步骤的流程示意图；
[0026]图10为一个实施例中通过运动目标的运动表示局部轨迹的变化的步骤的流程示意图；
[0027]图11为一个实施例中控制运动目标沿绘制的局部轨迹运动的步骤的流程示意图；
[0028]图12为一个实施例中局部轨迹的绘制以及运动目标的运动控制的步骤的流程示意图；
[0029]图13为一个实施例中图片动态展示装置的结构框图；
[0030]图14为另一个实施例中图片动态展示装置的结构框图。【具体实施方式】
[0031]为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
[0032]如图1所示，在一个实施例中，提供了一种电子设备，包括通过系统总线连接的处理器、非易失性存储介质、内存储器、网络接口、显示屏和输入装置。其中，电子设备的非易失性存储介质存储有操作系统，还包括一种图片动态展示装置，该图片动态展示装置用于实现一种图片动态展示方法。该处理器用于提供计算和控制能力，支撑整个电子设备的运行。电子设备中的内存储器为非易失性存储介质中的图片动态展示装置的运行提供环境， 该内存储器中可储存有计算机可读指令，该计算机可读指令被处理器执行时，可使得处理器执行一种图片动态展示方法。网络接口用于连接到网络进行通信，比如从服务器获取用于计算轨迹、绘制轨迹以及展示图片的脚本等。电子设备的显示屏可以是液晶显示屏或者电子墨水显示屏等，输入装置可以是显示屏上覆盖的触摸层，也可以是电子设备外壳上设置的按键、轨迹球或触控板，也可以是外接的键盘、触控板或鼠标等。该电子设备可以是手机、平板电脑或者个人数字助理或穿戴式设备等。本领域技术人员可以理解，图1中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的电子设备的限定，具体的电子设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
[0033]如图2所示，在一个实施例中，提供了一种图片动态展示方法，本实施例以该方法应用于上述图1所示的电子设备来举例说明。电子设备上可运行有可展示图片的应用程序， 通过该应用程序实现该图片动态展示方法。应用程序可以是社交网络应用或者即时通信应用等。该方法具体包括如下步骤:[〇〇34] 步骤202,获取多于一个的图片。
[0035]其中，图片可以是人物照片、景观照片、人工合成图片或者计算机合成图片等。电子设备可获取两个或多于两个的图片，获取的图片可以是具有相同特征的图片，比如同一次出行过程中拍摄的照片，同一地点拍摄的照片，相同色系的图片，还比如包含相同人物或者相同物品的图片等。
[0036]电子设备可访问用于展示图片的网页，从而在网页中触发获取多于一个的图片。 网页可通过扫描二维码得到的网页地址访问。电子设备可提供图片选择控件，检测到对图片选择控件的触发操作后，进入目录选择界面，检测在目录选择界面中触发的图片选择指令，根据图片选择指令选择多于一个的图片。电子设备也可以分多次获取总计多于一个的图片，每次可获取一个或多个图片。[〇〇37]步骤204，确定获取的图片的展示顺序。[〇〇38]其中，图片的展示顺序是指获取的图片在展示时出现的先后顺序。在一个实施例中，电子设备可根据图片的名称或者图片大小等图片属性对获取的图片进行排序，进而根据排序结果确定获取的各个图片的展示顺序。
[0039]步骤206,根据展示顺序确定获取的各图片对应于完整轨迹中的局部轨迹。
[0040]其中，完整轨迹可以是整体形态上呈连续状态的线条，当然完整轨迹在视觉上可以呈现为实线、点线或者点划线等形态，但如果这些不同形态的完整轨迹的数学函数是连续的，就可以认为是连续的完整轨迹。完整轨迹可以是预先设定的，也可以是根据用户操作从多个备选的完整轨迹中选中的，也可以是实时生成的。完整轨迹可以是封闭的，比如可以是圆形、椭圆形或者不规则封闭图形；完整轨迹可以是开放的，比如一段曲线段或者折线段。为了呈现完整轨迹的变化，完整轨迹可以不处于一条直线上。
[0041]在一个实施例中，完整轨迹中局部轨迹的数量可以是固定的。具体地，完整轨迹中可预先划分出固定数量的局部轨迹，电子设备可从所有的局部轨迹中选择与图片数量相等数量的相邻的局部轨迹，并按照展示顺序将图片与选择的局部轨迹一一对应。当图片数量超出局部轨迹的固定数量时，可以循环选取重复的局部轨迹。局部轨迹可以通过与电子设备的屏幕显示区域尺寸匹配的矩形从完整轨迹中截取出。其中，局部轨迹相邻是指局部轨迹在位置上相邻，相邻的局部轨迹通过过渡轨迹连接。具体两条局部轨迹相邻是指这两条局部轨迹之间通过一个过渡轨迹连接，多条局部轨迹相邻则是这些局部轨迹按顺序每两条局部轨迹之间通过一个过渡轨迹连接。在其它实施例中，电子设备也可以实时从完整轨迹中划分出与图片数量相等数量的局部轨迹，并与获取的图片一一对应。
[0042]在一个实施例中，完整轨迹中的局部轨迹位于完整轨迹中的固定位置处。在一个实施例中，完整轨迹中的局部轨迹可以具有指定的先后顺序，电子设备从所有的局部轨迹中选择与图片数量相等数量的相邻的局部轨迹时，可按照该先后顺序选择，比如无论图片数量多少，都从某标记为第一位的局部轨迹起选择。
[0043]举例说明，参照图3所示的完整轨迹300,该完整轨迹300是封闭图形，由若干三阶贝塞尔曲线围成。该完整轨迹300上固定位置的点D1至D16表示各局部轨迹的端点，也是过渡轨迹的端点。012、034、056、078、0910、01112、01314以及01516是完整轨迹300中固定位置的8条局部轨迹，023、045、067、089、01011、01213、01415以及0161是完整轨迹300中固定位置的8个过渡轨迹。局部轨迹D12通过过渡轨迹D23与局部轨迹D34连接。可以设定局部轨迹的先后顺序依次为〇12、034、056、078、0910、01112、01314以及01516，则选择局部轨迹与图片对应时从局部轨迹D12起按照先后顺序遍历选取。当图片数量大于8时，按照先后顺序遍历完后还可以继续从局部轨迹D12起循环遍历，直至为所有图片找到对应的局部轨迹。
[0044]步骤208,根据展示顺序轮流绘制相应的局部轨迹，在绘制的局部轨迹对应的展示区域内展示相应的图片；其中，在按展示顺序相邻的局部轨迹之间过渡时按照在完整轨迹中相应的过渡轨迹进行连续绘制。
[0045]具体地，电子设备按照图片的展示顺序，轮流绘制与展示顺序相应的局部轨迹，绘制局部轨迹时从局部轨迹的起始点开始绘制到结束点。其中，电子设备具体可按照固定的绘制速度或者固定的绘制时间绘制局部轨迹。这里绘制速度是指单位时间内绘制局部轨迹的长度，这里绘制时间则是绘制一条局部轨迹所消耗的时间。绘制速度和绘制时间可在使得局部轨迹的绘制过程对于人眼可见的取值范围内取值。
[0046]在一个实施例中，电子设备可米用基于HTML的SVG(Scalable Vector Graphics， 可缩放矢量图形)绘制局部轨迹。具体地，电子设备可通过SVG路径(path)获取局部轨迹的长度，通过SVG stroke-dasharray(虚线样式)属性设置局部轨迹为虚线实线长度和间隔宽度均为局部轨迹的长度的虚线，通过SVG stroke-dashoffset(虚线起始偏移)属性控制虚线开始时的偏移长度从局部轨迹的长度逐渐变化为〇,便可以实现从局部轨迹的起始点到结束点的渐变绘制。
[0047]电子设备在每绘制出一条局部轨迹后，在绘制的局部轨迹对应的展示区域内展示按照展示顺序应当展示的图片。电子设备具体可在每绘制出一条局部轨迹后，停留一时间段，在停留的时间段内在绘制的局部轨迹对应的展示区域内展示相应的图片。停留的时间段可以是固定值，也可以是在时间段范围内随机取值。停留的时间段可以大于当前局部轨迹的绘制时间，这样可以保证图片得到充分展示，停留的时间段可以取2秒。局部轨迹对应的展示区域可以是覆盖一部分局部轨迹的区域，也可以是局部轨迹旁边的区域。
[0048]在一个实施例中，电子设备还可以在展示区域中展示相应图片的图片描述文本。 其中图片描述文本是描述图片的文本，可以是用户输入的文字、图片摘要信息或者随机选取的通用描述语句等。
[0049]电子设备在相邻的局部轨迹之间切换时，电子设备从当前局部轨迹的结束点开始，按照相邻的局部轨迹对应的完整轨迹中的过渡轨迹过渡到下一局部轨迹的起始点。过渡轨迹的绘制速度可以大于局部轨迹的绘制速度，从而可以突出局部轨迹的绘制过程，并保证局部轨迹之间过渡的流畅和速度。
[0050]举例说明。如图4所示，401至408依次是绘制各条局部轨迹时电子设备的屏幕显示区域，电子设备的屏幕显示区域按照从401到408的顺序平滑过渡。比如在从屏幕显示区域 401过渡到屏幕显示区域402时，参照图5,从屏幕显示区域401依次经过虚线表示的位置逐渐过渡到屏幕显示区域402;再参照图6,图6示出了从屏幕显示区域401过渡到屏幕显示区域402过程中电子设备显示的过渡轨迹的变化。电子设备的屏幕显示区域从401变化到408 的过程中，在屏幕显示区域中覆盖部分局部轨迹的展示区域内展示的图片如图7所示。
[0051]上述图片动态展示方法，对于多个图片，确定各图片的展示顺序，并根据展示顺序确定图片对应的局部轨迹，这样各个图片对应的局部轨迹在完整轨迹中也是按照该展示顺序排列的。根据展示顺序轮流地绘制各个图片对应的局部轨迹，绘制的局部轨迹对应有展示区域，在该展示区域内展示该局部轨迹对应的图片，这样可以按照展示顺序轮流展示图片，不需要用户操作的干预，提高了通过图片传达信息的效率。而且在按展示顺序相邻的局部轨迹之间过渡时，按照在完整轨迹中相应的过渡轨迹进行连续绘制，这样随着图片的展示，可以呈现出整个完整轨迹，通过完整轨迹的变换能够以可视形式表达图片之间的联系， 进一步提高了通过图片传达信息的效率。[〇〇52] 如图8所示，在一个实施例中，步骤204具体包括以下步骤:[〇〇53]步骤802，根据获取的图片获取相应的时间信息和/或空间信息。
[0054]其中，时间信息可以是图片的修改时间或者拍摄时间，空间信息可以是拍摄图片时的地理坐标、或者识别出的图片中景观的地理位置或者海拔高度。时间信息和空间信息可以从图片的摘要属性中提取，也可以从数据库中查询与图片的标识对应存储的时间信息和/或空间信息得到。
[0055]步骤804,按照获取的时间信息和/或空间信息对相应的图片排序。
[0056]具体地，电子设备可在时间维度，按照时间信息的先后顺序对相应图片进行排序。 图片的拍摄时间可以反映相应图片中的内容产生的先后顺序，比如可以反映用户旅游过程中拍摄照片的先后，排序后可以反映出用户旅游的先后顺序，还可以与图片描述文本集合， 对图片进行动态展示。
[0057]电子设备还可以在空间维度，按照图片的空间信息将图片进行归类，将相同空间区域的图片连续排序。空间信息可以从图片摘要信息中提取，也可以通过对图片的自动识别得到。不同空间区域的图片可以按照特定的方向进行排序，比如从北到南或者从南到北。 不同空间区域的图片还可以结合时间信息进行排序。[〇〇58]步骤806,根据图片排序结果确定获取的图片的展示顺序。
[0059]具体地，电子设备可以直接将图片排序顺序确定为图片的展示顺序，也可以根据用户操作对图片排序结果进行调整，从而得到图片的展示顺序。
[0060]本实施例中，通过图片的时间信息和/空间信息确定图片的展示顺序，可以反映出图片之间的自然关联，图片按照该展示顺序展示后，可通过完整轨迹的变化反映出图片之间的时间或地理位置变化，传达更多信息量。比如对于用户在出行过程中拍摄的图片，通过完整轨迹的变化可以反映出用户从一个景点移动到另一个景点，反映出时间和/或地理位置的变化。
[0061]如图9所示，在一个实施例中，根据展示顺序轮流绘制相应的局部轨迹的步骤具体包括如下步骤:[〇〇62]步骤902,获取确定的各条局部轨迹所经过的轨迹点序列。
[0063]其中，轨迹点是构成局部轨迹的离散点。轨迹点可用相对于电子设备的屏幕显示区域中坐标原点的横纵坐标来表示。当采用多阶赛贝尔曲线绘制局部轨迹时，轨迹点是多阶赛贝尔曲线经过的点。多阶赛贝尔曲线是指多于一阶的赛贝尔曲线，比如三阶、四阶或者五阶赛贝尔曲线。多阶也可以称为多次。赛贝尔曲线(B6zier curve)又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。
[0064]轨迹点按照绘制相应局部轨迹的顺序排列形成轨迹点序列。电子设备具体在绘制局部轨迹之前读取或者计算出展示图片时需绘制的相应的局部轨迹所经过的轨迹点序列。 轨迹点序列中轨迹点的数量可以是固定的，可根据当前的屏幕显示区域尺寸动态计算出。 [〇〇65]步骤904,获取与轨迹点序列对应的控制点序列。
[0066]其中，控制点是控制多阶赛贝尔曲线形状的点，利用轨迹点序列中作为多阶赛贝尔曲线端点的轨迹点与相应控制点结合可以绘制出特定形状的多阶赛贝尔曲线。将控制点按照组成局部轨迹的多阶赛贝尔曲线在相应局部轨迹中的位置顺序排列形成控制点序列。 [〇〇67] 步骤906,根据展示顺序，轮流按照相应局部轨迹对应的轨迹点序列和控制点序列绘制多阶赛贝尔曲线，得到相应的局部轨迹。
[0068]具体地，电子设备根据展示顺序轮流绘制局部轨迹，并在绘制每条局部轨迹时，按照该条局部轨迹对应的轨迹点序列和控制点序列绘制多阶赛贝尔曲线组成该条局部轨迹。 轨迹点序列可以包括多阶赛贝尔曲线的端点，端点包括相应多阶赛贝尔曲线的起始点和结束点。电子设备在按照该条局部轨迹对应的轨迹点序列和控制点序列绘制多阶赛贝尔曲线组成该条局部轨迹，具体可以遍历轨迹点序列，确定需绘制的局部轨迹中各条多阶赛贝尔曲线的参数组，参数组包括端点和控制点，从而按照参数组绘制相应的多阶赛贝尔曲线以得到相应的局部轨迹。
[0069]本实施例中，在确定好各条局部轨迹对应的轨迹点序列和控制点序列之后，便可以利用轨迹点序列和控制点序列中有限的离散点，通过绘制多阶赛贝尔曲线绘制出相应的局部轨迹，绘制效率高，且由于多阶赛贝尔曲线本身是矢量图且平滑，绘制出的局部轨迹视觉效果好。
[0070]在一个实施例中，多阶赛贝尔曲线为三阶赛贝尔曲线;轨迹点序列中按顺序每三个轨迹点组成一个三阶赛贝尔曲线;绘制的三阶赛贝尔曲线顺序邻接，邻接处的轨迹点对应的控制点关于该邻接处的轨迹点中心对称。
[0071]具体地，电子设备在遍历轨迹点序列确定各条多阶赛贝尔曲线的参数组时，可将每条多阶赛贝尔曲线切分为两条半段多阶赛贝尔曲线，每半段多阶赛贝尔曲线具有相应的参数组，每个参数组包括该半段多阶赛贝尔曲线的端点、切分点和控制点，每个端点、切分点和控制点可以用相应的横纵坐标来表示。轨迹点序列可由每半段多阶赛贝尔曲线的端点和切分点按照绘制顺序排列形成。三阶赛贝尔曲线顺序邻接是指一个三阶赛贝尔曲线的结束点与另一个三阶赛贝尔曲线的起始点为相同点，以此类推。[〇〇72]举例说明，假设按照屏幕显示区域尺寸和轨迹点的固定数量确定轨迹点序列为A (Ax，Ay)、B(Bx，By)、C(Cx，Cy)、D(Dx，Dy)……，其中轨迹点A和C是一条三阶赛贝尔曲线的端点，具体分别是起始点和结束点，轨迹点B是该三阶赛贝尔曲线的切分点。假设控制点序列为a(ax，ay)、b(bx，by)、c(cx，cy).，其中控制点a和b分别是轨迹点A和C对应三阶赛贝尔曲线的两个控制点。贝电子设备可划分出参数组为(Ax，Ay，ax，ay，Bx，By)、(Bx，By，bx，by，Cx，Cy)、(Cx，Cy，cx，cy，Dx，Dy)..，且控制点b(bx，by)和控制点c (cx，cy)关于轨迹点C(Cx，Cy)中心对称。[〇〇73]本实施例中，一条三阶赛贝尔曲线被划分为两条半段三阶赛贝尔曲线进行绘制，三阶赛贝尔曲线顺序邻接，邻接处的轨迹点对应的控制点关于该邻接处的轨迹点中心对称，可以利用离散点绘制出整体上平滑的矢量的局部曲线，使得轨迹变化平滑。
[0074] 如图10所示，在一个实施例中，该图片动态展示方法还包括通过运动目标的运动表示局部轨迹的变化的步骤，具体包括如下步骤:[〇〇75] 步骤1002,生成运动目标。[〇〇76] 其中，运动目标是可显示在屏幕显示区域中且可移动的虚拟目标，比如可以是交通工具虚拟形象或者人物形象或者卡通形象等，交通工具比如飞机、火车、汽车或者自行车等。通过调整运动目标的位置随时间变化可以使得运动目标运动。[〇〇77] 步骤1004,控制运动目标沿绘制的局部轨迹运动。
[0078]具体地，电子设备可在绘制局部轨迹同时时或绘制出局部轨迹后，控制运动目标按照绘制的局部轨迹运动。运动目标的运动速度可以高于、等于或者低于局部轨迹的运动速度。在一个实施例中，运动目标可以具有表示运动朝向的部位，比如飞机头部，电子设备可通过调整运动目标的姿态使得运动目标所表示的运动朝向与运动目标的实际运动方向一致。电子设备可选择若干局部轨迹运动触发运动目标的运动，而剩余的局部轨迹可仅进行局部轨迹的绘制而不触发运动目标的运动。
[0079]步骤1006,当运动目标运动到指定位置或者运动达到指定时长或者沿绘制的局部轨迹运动结束后，执行在绘制的局部轨迹对应的展示区域内展示相应的图片。
[0080]其中，指定位置可以是预先存储的局部轨迹上的位置，也可以是按照预设比例和局部轨迹的长度计算出的，该预设比例表示运动目标从局部轨迹的起始点到达指定位置时所经过的运动轨迹的长度占局部轨迹的长度的比例。指定时长是运动目标从局部轨迹的起始点开始运动的时间至到达指定位置时所经过的时间长度。运动结束是指运动目标到达当前绘制的局部轨迹的结束点。[0081 ] 本实施例中，通过运动目标沿绘制的局部轨迹运动，可以动态地反映出展示图片的过程中绘制的局部轨迹的变化，可更进一步地表达出图片之间的联系。[〇〇82] 如图11所示，在一个实施例中，步骤1004具体包括如下步骤:
[0083]步骤1102,获取运动目标的运动耗时；运动耗时根据预设运动速度和相应的局部轨迹的长度计算获得。
[0084]其中，运动耗时是运动目标从局部轨迹的起始点沿绘制的局部轨迹运动到结束点所需的时间长度。电子设备具体可实时或者预先将局部轨迹的长度除以预设运动速度得到运动目标的运动耗时。局部轨迹的长度可通过高斯勒让德积分算法计算出，具体电子设备可分12个节点并结合相应的三阶赛贝尔曲线计算出相应的局部轨迹的长度。[〇〇85]步骤1104,根据运动耗时确定运动目标随时间变化的坐标。
[0086]具体地，电子设备在获知经过局部轨迹的长度所需总的运动耗时后，便可以从0到该运动耗时的范围内取若干时间点，并计算出每个时间点处运动目标的坐标，从而得到运动目标随时间变化的一系列坐标。运动目标随时间变化的坐标可利用JavaScript脚本动态计算出。
[0087]更具体地，电子设备可获取到从局部轨迹的起始点开始随时间tl变化的运动长度为tl/T*length，其中T为运动耗时，length为局部轨迹的长度；电子设备可利用高斯勒让德积分算法以及离散的时间点tl处的运动长度，求取该时间点tl处的坐标。具体在求取坐标时，可通过二分法逐步分割相应赛贝尔曲线，直至分割后确定大致等于运动长度为tl/T* length的曲线长度，从而确定此时赛贝尔曲线的t参数，进而根据该t参数计算出相应坐标。 其中t参数取值为[0，1]，表示相应赛贝尔曲线绘制时的时间变化。[〇〇88]步骤1106,根据确定的坐标改变运动目标的位置。
[0089]具体地，电子设备可按照随时间变化的坐标，设置相应时间点运动目标的位置为相应坐标。其中运动目标的运动可通过:requestAnimat1nFrame API(逐帧动画应用程序编程接口)进行控制。运动目标的位置可通过CSS3transform(CSS3是层叠样式表，transform 是CSS3的旋转属性)中的matrix(矩阵)属性来改变运动目标的位置和姿态，姿态可以用来调整运动目标的运动朝向。
[0090]本实施例中，获取到运动目标的运动耗时，从而基于运动耗时确定运动目标随时间变化的坐标，进而根据确定的坐标改变运动目标的位置，可实现对运动目标位置的精确控制。
[0091]如图12所示，在一个实施例中，上述图片动态展示方法中局部轨迹的绘制以及运动目标的运动控制具体通过以下步骤实现:[〇〇92]步骤1202，获取当前需绘制的局部轨迹所经过的轨迹点序列。[〇〇93]步骤1204,获取与轨迹点序列对应的控制点序列。[〇〇94]步骤1206,生成轨迹动画容器和运动目标。[0095 ]步骤12 0 8，遍历当前需绘制的局部轨迹所经过的轨迹点序列，确定当前需绘制的局部轨迹中各条多阶赛贝尔曲线的参数组。[〇〇96]步骤1210,生成用于绘制局部轨迹的SVG路径节点。若生成成功则调用浏览器内核提供的SVG功能执行步骤1212;若生成失败则通过应用程序自定义算法执行步骤1216。其中浏览器内核可集成在应用程序中。本实施例中应用程序可以不是浏览器。[〇〇97]步骤1212,根据当前需绘制的局部轨迹中各条多阶赛贝尔曲线的参数组，通过SVG 路径获取当前需绘制的局部轨迹的长度length，根据预设运动速度speed和当前需绘制的局部轨迹的长度length计算运动耗时T，设置SVG stroke-dasharray属性设置虚线实线长度和间隔宽度均为局部轨迹的长度length。
[0098]步骤1214,通过JavaScript脚本的动画配置更改SVG stroke-dashoffset属性，以实现在轨迹动画容器中绘制当前需绘制的局部轨迹。
[0099]步骤1216,根据当前需绘制的局部轨迹中各条多阶赛贝尔曲线的参数组，利用高斯勒让德积分算法计算出当前需绘制的局部轨迹的长度length，根据预设运动速度speed 和当前需绘制的局部轨迹的长度1 ength计算运动耗时T。[〇1〇〇]步骤1218,通过requestAnimat1nFrame API触发运动目标的动画，根据运动耗时T确定运动目标随时间变化的坐标，并根据确定的坐标，通过CSS3transform中的matrix属性改变运动目标的位置和姿态。[0101 ]本实施例中，在可成功生成SVG路径节点时，通过浏览器内核利用SVG路径来完成局部轨迹的绘制，可高效地实现局部轨迹的绘制。当生成SVG路径节点失败时，则可以不生成局部轨迹路径，可以兼容不支持SVG路径的终端或者对SVG路径支持不够理想的终端，提高了兼容性。后续再控制运动目标沿局部轨迹的运动，不仅可以表达出图片之间的联系，也可以在无法通过SVG路径绘制局部轨迹时也能够通过运动目标的运动轨迹反映出局部轨迹的形状。
[0102]如图13所示，在一个实施例中，提供了一种图片动态展示装置1300,包括图片获取模块1301、展示顺序确定模块1302、局部轨迹确定模块1303、轨迹绘制模块1304和图片展示模块1305。
[0103]图片获取模块1301，用于获取多于一个的图片。[〇1〇4]其中，图片的展示顺序是指获取的图片在展示时出现的先后顺序。在一个实施例中，图片获取模块1301可用于根据图片的名称或者图片大小等图片属性对获取的图片进行排序，进而根据排序结果确定获取的各个图片的展示顺序。[〇1〇5]展不顺序确定t旲块1302，用于确定获取的图片的展不顺序。
[0106]其中，图片的展示顺序是指获取的图片在展示时出现的先后顺序。在一个实施例中，展示顺序确定模块1302可根据图片的名称或者图片大小等图片属性对获取的图片进行排序，进而根据排序结果确定获取的各个图片的展示顺序。
[0107]局部轨迹确定模块1303,用于根据展示顺序确定获取的各图片对应于完整轨迹中的局部轨迹。
[0108]其中，完整轨迹可以是整体形态上呈连续状态的线条，当然完整轨迹在视觉上可以呈现为实线、点线或者点划线等形态，但如果这些不同形态的完整轨迹的数学函数是连续的，就可以认为是连续的完整轨迹。完整轨迹可以是预先设定的，也可以是根据用户操作从多个备选的完整轨迹中选中的，也可以是实时生成的。完整轨迹可以是封闭的，比如可以是圆形、椭圆形或者不规则封闭图形；完整轨迹可以是开放的，比如一段曲线段或者折线段。为了呈现完整轨迹的变化，完整轨迹可以不处于一条直线上。
[0109]在一个实施例中，完整轨迹中局部轨迹的数量可以是固定的。具体地，完整轨迹中可预先划分出固定数量的局部轨迹，局部轨迹确定模块1303可从所有的局部轨迹中选择与图片数量相等数量的相邻的局部轨迹，并按照展示顺序将图片与选择的局部轨迹一一对应。当图片数量超出局部轨迹的固定数量时，可以循环选取重复的局部轨迹。局部轨迹可以通过与电子设备的屏幕显示区域尺寸匹配的矩形从完整轨迹中截取出。其中，局部轨迹相邻是指局部轨迹在位置上相邻，相邻的局部轨迹通过过渡轨迹连接。具体两条局部轨迹相邻是指这两条局部轨迹之间通过一个过渡轨迹连接，多条局部轨迹相邻则是这些局部轨迹按顺序每两条局部轨迹之间通过一个过渡轨迹连接。在其它实施例中，局部轨迹确定模块 1303也可以实时从完整轨迹中划分出与图片数量相等数量的局部轨迹，并与获取的图片一一对应。
[0110]在一个实施例中，完整轨迹中的局部轨迹位于完整轨迹中的固定位置处。在一个实施例中，完整轨迹中的局部轨迹可以具有指定的先后顺序，局部轨迹确定模块1303可用于从所有的局部轨迹中选择与图片数量相等数量的相邻的局部轨迹时，可按照该先后顺序选择，比如无论图片数量多少，都从某标记为第一位的局部轨迹起选择。
[0111]轨迹绘制模块1304,用于根据展示顺序轮流绘制相应的局部轨迹，且在按展示顺序相邻的局部轨迹之间过渡时按照在完整轨迹中相应的过渡轨迹进行连续绘制。
[0112]具体地，轨迹绘制模块1304按照图片的展示顺序，轮流绘制与展示顺序相应的局部轨迹，绘制局部轨迹时从局部轨迹的起始点开始绘制到结束点。其中，轨迹绘制模块1304 具体可按照固定的绘制速度或者固定的绘制时间绘制局部轨迹。这里绘制速度是指单位时间内绘制局部轨迹的长度，这里绘制时间则是绘制一条局部轨迹所消耗的时间。绘制速度和绘制时间可在使得局部轨迹的绘制过程对于人眼可见的取值范围内取值。
[0113]在一个实施例中，轨迹绘制模块1304可采用基于HTML的SVG(Scalable Vector Graphics，可缩放矢量图形)绘制局部轨迹。具体地，轨迹绘制模块1304可通过SVG路径 (path)获取局部轨迹的长度，通过SVG stroke-dasharray(虚线样式)属性设置局部轨迹为虚线实线长度和间隔宽度均为局部轨迹的长度的虚线，通过SVG stroke-dashoffset(虚线起始偏移)属性控制虚线开始时的偏移长度从局部轨迹的长度逐渐变化为〇,便可以实现从局部轨迹的起始点到结束点的渐变绘制。
[0114]轨迹绘制模块1304在相邻的局部轨迹之间切换时，可从当前局部轨迹的结束点开始，按照相邻的局部轨迹对应的完整轨迹中的过渡轨迹过渡到下一局部轨迹的起始点。过渡轨迹的绘制速度可以大于局部轨迹的绘制速度，从而可以突出局部轨迹的绘制过程，并保证局部轨迹之间过渡的流畅和速度。
[0115]图片展示模块1305,用于在绘制的局部轨迹对应的展示区域内展示相应的图片。
[0116]在每绘制出一条局部轨迹后，图片展示模块1305可用于在绘制的局部轨迹对应的展示区域内展示按照展示顺序应当展示的图片。具体轨迹绘制模块1304可在每绘制出一条局部轨迹后，停留一时间段，在停留的时间段内由图片展示模块1305在绘制的局部轨迹对应的展示区域内展示相应的图片。停留的时间段可以是固定值，也可以是在时间段范围内随机取值。停留的时间段可以大于当前局部轨迹的绘制时间，这样可以保证图片得到充分展示，停留的时间段可以取2秒。局部轨迹对应的展示区域可以是覆盖一部分局部轨迹的区域，也可以是局部轨迹旁边的区域。
[0117]在一个实施例中，图片展示模块1305还可以在展示区域中展示相应图片的图片描述文本。其中图片描述文本是描述图片的文本，可以是用户输入的文字、图片摘要信息或者随机选取的通用描述语句等。
[0118]上述图片动态展示装置1300,对于多个图片，确定各图片的展示顺序，并根据展示顺序确定图片对应的局部轨迹，这样各个图片对应的局部轨迹在完整轨迹中也是按照该展示顺序排列的。根据展示顺序轮流地绘制各个图片对应的局部轨迹，绘制的局部轨迹对应有展示区域，在该展示区域内展示该局部轨迹对应的图片，这样可以按照展示顺序轮流展示图片，不需要用户操作的干预，提高了通过图片传达信息的效率。而且在按展示顺序相邻的局部轨迹之间过渡时，按照在完整轨迹中相应的过渡轨迹进行连续绘制，这样随着图片的展示，可以呈现出整个完整轨迹，通过完整轨迹的变换能够以可视形式表达图片之间的联系，进一步提高了通过图片传达信息的效率。
[0119]在一个实施例中，完整轨迹是封闭的;完整轨迹中局部轨迹的数量是固定的;完整轨迹中的局部轨迹位于完整轨迹中的固定位置处。
[0120]在一个实施例中，展示顺序确定模块1302还用于根据获取的图片获取相应的时间信息和/或空间信息；按照获取的时间信息和/或空间信息对相应的图片排序;根据图片排序结果确定获取的图片的展示顺序。
[0121]本实施例中，通过图片的时间信息和/空间信息确定图片的展示顺序，可以反映出图片之间的自然关联，图片按照该展示顺序展示后，可通过完整轨迹的变化反映出图片之间的时间或地理位置变化，传达更多信息量。比如对于用户在出行过程中拍摄的图片，通过完整轨迹的变化可以反映出用户从一个景点移动到另一个景点，反映出时间和/或地理位置的变化。
[0122]在一个实施例中，轨迹绘制模块1304还用于获取确定的各条局部轨迹所经过的轨迹点序列;获取与轨迹点序列对应的控制点序列;根据展示顺序，轮流按照相应局部轨迹对应的轨迹点序列和控制点序列绘制多阶赛贝尔曲线，得到相应的局部轨迹。
[0123]本实施例中，在确定好各条局部轨迹对应的轨迹点序列和控制点序列之后，便可以利用轨迹点序列和控制点序列中有限的离散点，通过绘制多阶赛贝尔曲线绘制出相应的局部轨迹，绘制效率高，且由于多阶赛贝尔曲线本身是矢量图且平滑，绘制出的局部轨迹视觉效果好。
[0124]在一个实施例中，多阶赛贝尔曲线为三阶赛贝尔曲线;轨迹点序列中按顺序每三个轨迹点组成一个三阶赛贝尔曲线;绘制的三阶赛贝尔曲线顺序邻接，邻接处的轨迹点对应的控制点关于该邻接处的轨迹点中心对称。
[0125]本实施例中，一条三阶赛贝尔曲线被划分为两条半段三阶赛贝尔曲线进行绘制， 三阶赛贝尔曲线顺序邻接，邻接处的轨迹点对应的控制点关于该邻接处的轨迹点中心对称，可以利用离散点绘制出整体上平滑的矢量的局部曲线，使得轨迹变化平滑。
[0126]如图14所示，在一个实施例中，图片动态展示装置1300还包括:运动目标生成模块 1306和运动控制模块1307。[〇127]运动目标生成模块1306，用于生成运动目标。
[0128]运动控制模块1307,用于控制运动目标沿绘制的局部轨迹运动。
[0129]图片展示模块1305用于当运动目标运动到指定位置或者运动达到指定时长或者沿绘制的局部轨迹运动结束后，执行在绘制的局部轨迹对应的展示区域内展示相应的图片。
[0130]本实施例中，通过运动目标沿绘制的局部轨迹运动，可以动态地反映出展示图片的过程中绘制的局部轨迹的变化，可更进一步地表达出图片之间的联系。
[0131]在一个实施例中，运动控制模块1307还用于获取运动目标的运动耗时;运动耗时根据预设运动速度和相应的局部轨迹的长度计算获得;根据运动耗时确定运动目标随时间变化的坐标;根据确定的坐标改变运动目标的位置。
[0132]本实施例中，获取到运动目标的运动耗时，从而基于运动耗时确定运动目标随时间变化的坐标，进而根据确定的坐标改变运动目标的位置，可实现对运动目标位置的精确控制。
[0133]本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。
[0134]以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
[0135]以上实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。 因此，本发明专利的保护范围应以所附权利要求为准。
【主权项】
1.一种图片动态展示方法，包括:获取多于一个的图片；确定获取的图片的展示顺序；根据所述展示顺序确定获取的各图片对应于完整轨迹中的局部轨迹；根据所述展示顺序轮流绘制相应的局部轨迹，在绘制的局部轨迹对应的展示区域内展 示相应的所述图片；其中，在按所述展示顺序相邻的局部轨迹之间过渡时按照在所述完整 轨迹中相应的过渡轨迹进行连续绘制。2.根据权利要求1所述的方法，其特征在于，所述完整轨迹中局部轨迹的数量是固定 的;所述完整轨迹中的所述局部轨迹位于所述完整轨迹中的固定位置处。3.根据权利要求1所述的方法，其特征在于，所述确定获取的图片的展示顺序包括:根据获取的图片获取相应的时间信息和/或空间信息；按照获取的时间信息和/或空间信息对相应的图片排序；根据图片排序结果确定获取的图片的展示顺序。4.根据权利要求1所述的方法，其特征在于，所述根据所述展示顺序轮流绘制相应的局 部轨迹包括:获取确定的各条局部轨迹所经过的轨迹点序列；获取与所述轨迹点序列对应的控制点序列；根据所述展示顺序，轮流按照相应局部轨迹对应的轨迹点序列和控制点序列绘制多阶 赛贝尔曲线，得到相应的局部轨迹。5.根据权利要求4所述的方法，其特征在于，所述多阶赛贝尔曲线为三阶赛贝尔曲线； 所述轨迹点序列中按顺序每三个轨迹点组成一个三阶赛贝尔曲线;绘制的三阶赛贝尔曲线 顺序邻接，邻接处的轨迹点对应的控制点关于该邻接处的轨迹点中心对称。6.根据权利要求1所述的方法，其特征在于，还包括:生成运动目标；控制所述运动目标沿绘制的局部轨迹运动；当所述运动目标运动到指定位置或者运动达到指定时长或者沿绘制的局部轨迹运动 结束后，执行所述在绘制的局部轨迹对应的展示区域内展示相应的所述图片的步骤。7.根据权利要求6所述的方法，其特征在于，所述控制所述运动目标沿绘制的局部轨迹 运动包括:获取所述运动目标的运动耗时;所述运动耗时根据预设运动速度和相应的局部轨迹的 长度计算获得；根据所述运动耗时确定所述运动目标随时间变化的坐标；根据确定的坐标改变所述运动目标的位置。8.—种图片动态展示装置，其特征在于，包括:图片获取模块，用于获取多于一个的图片；展示顺序确定模块，用于确定获取的图片的展示顺序；局部轨迹确定模块，用于根据所述展示顺序确定获取的各图片对应于完整轨迹中的局 部轨迹；轨迹绘制模块，用于根据所述展示顺序轮流绘制相应的局部轨迹，且在按所述展示顺序相邻的局部轨迹之间过渡时按照在所述完整轨迹中相应的过渡轨迹进行连续绘制；图片展示模块，用于在绘制的局部轨迹对应的展示区域内展示相应的所述图片。9.根据权利要求8所述的装置，其特征在于，所述完整轨迹中局部轨迹的数量是固定 的;所述完整轨迹中的所述局部轨迹位于所述完整轨迹中的固定位置处。10.根据权利要求8所述的装置，其特征在于，所述展示顺序确定模块还用于根据获取 的图片获取相应的时间信息和/或空间信息;按照获取的时间信息和/或空间信息对相应的 图片排序;根据图片排序结果确定获取的图片的展示顺序。11.根据权利要求8所述的装置，其特征在于，所述轨迹绘制模块还用于获取确定的各 条局部轨迹所经过的轨迹点序列；获取与所述轨迹点序列对应的控制点序列；根据所述展 示顺序，轮流按照相应局部轨迹对应的轨迹点序列和控制点序列绘制多阶赛贝尔曲线，得 到相应的局部轨迹。12.根据权利要求11所述的装置，其特征在于，所述多阶赛贝尔曲线为三阶赛贝尔曲 线；所述轨迹点序列中按顺序每三个轨迹点组成一个三阶赛贝尔曲线；绘制的三阶赛贝尔 曲线顺序邻接，邻接处的轨迹点对应的控制点关于该邻接处的轨迹点中心对称。13.根据权利要求8所述的装置，其特征在于，还包括:运动目标生成模块，用于生成运动目标；运动控制模块，用于控制所述运动目标沿绘制的局部轨迹运动；所述图片展示模块用于当所述运动目标运动到指定位置或者运动达到指定时长或者 沿绘制的局部轨迹运动结束后，在绘制的局部轨迹对应的展示区域内展示相应的所述图 片。14.根据权利要求13所述的装置，其特征在于，所述运动控制模块还用于获取所述运动 目标的运动耗时;所述运动耗时根据预设运动速度和相应的局部轨迹的长度计算获得;根 据所述运动耗时确定所述运动目标随时间变化的坐标;根据确定的坐标改变所述运动目标 的位置。
【文档编号】G06F17/30GK106021519SQ201610349904
【公开日】2016年10月12日
【申请日】2016年5月24日
【发明人】蔡述雄, 谢梓洪
【申请人】腾讯科技（深圳）有限公司