CN106548504A - 网页动画生成方法及装置 - Google Patents

Abstract

本发明公开了一种网页动画生成方法及装置。其中，该方法包括：获取图像运动信息，其中，图像运动信息用于表征图像在显示界面中的显示效果；接收外部输入的操作指令，其中，操作指令用于启动图像以动画的形式进行显示；响应操作指令，控制图像按照图像运动信息在显示界面中以动画的形式进行显示。本发明解决了由于浏览器与预先制作的动画显示效果不兼容而导致的用户体验差的技术问题。

Description

网页动画生成方法及装置

技术领域

本发明涉及互联网领域，具体而言，涉及一种网页动画生成方法及装置。

背景技术

如今，随着互联网技术的迅猛发展，智能设备变得越来越普及。人们可以利用身边的智能设备，快捷、方便的接入互联网，并利用智能终端***中的浏览器浏览各类网页。

网站为了提升用户在浏览网页时的浏览体验，通常会预先为网页页面设置特定的动画，来对用户的操作进行视觉上的反馈。例如，在用户通过点击链接对页面进行跳转时，通过预先设置的淡入淡出动画显示效果对页面进行切换过程进行显示；在用户通过滑动对网页中的图像进行切换时，通过预先设置的滚动动画显示效果对图像进行切换过程进行显示。

然而，目前的智能终端种类非常多，并且用户所使用的浏览器也各不相同。因此，使用预先制作的动画显示效果，会存在以下缺点：

1、预先制作的动画显示效果，制作过程非常复杂，增加了开发成本；

2、预先制作的动画显示效果，因部分浏览器的兼容性的问题导致无法显示，影响用户体验。

针对上述由于浏览器与预先制作的动画显示效果不兼容而导致的用户体验差的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种网页动画生成方法及装置，以至少解决由于浏览器与预先制作的动画显示效果不兼容而导致的用户体验差的技术问题。

根据本发明实施例的一个方面，提供了一种网页动画生成方法，包括：获取图像运动信息，其中，图像运动信息用于表征图像在显示界面中的显示效果；接收外部输入的操作指令，其中，操作指令用于启动图像以动画的形式进行显示；响应操作指令，控制图像按照图像运动信息在显示界面中以动画的形式进行显示。

根据本发明实施例的另一方面，还提供了一种网页动画生成装置，包括：获取模块，用于获取图像运动信息，其中，图像运动信息用于表征图像在显示界面中的显示效果；接收模块，用于接收外部输入的操作指令，其中，操作指令用于启动图像以动画的形式进行显示；动画模块，用于响应操作指令，控制图像按照图像运动信息在显示界面中以动画的形式进行显示。

在本发明实施例中，采用获取图像运动信息，其中，图像运动信息用于表征图像在显示界面中的显示效果；接收外部输入的操作指令，其中，操作指令用于启动图像以动画的形式进行显示；响应操作指令，控制图像按照图像运动信息在显示界面中以动画的形式进行显示的方式，通过获取模块，用于获取图像运动信息，其中，图像运动信息用于表征图像在显示界面中的显示效果；接收模块，用于接收外部输入的操作指令，其中，操作指令用于启动图像以动画的形式进行显示；动画模块，用于响应操作指令，控制图像按照图像运动信息在显示界面中以动画的形式进行显示，达到了在网页中通过以实时生成的方式与用户的操作进行动画交互的目的，从而实现了根据用户的触发信号在网页中实时生成的动画显示效果的技术效果，进而解决了由于浏览器与预先制作的动画显示效果不兼容而导致的用户体验差的技术问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是本发明实施例的一种实现网页动画生成方法的计算机终端的硬件结构框图；

图2是根据本发明实施例的一种网页动画生成方法的流程示意图；

图3是根据本发明实施例的一种网页动画生成方法的具体实施方式的详细流程图；

图4是根据本发明实施例的一种可选的网页动画生成方法的页面示意图；

图5是根据本发明实施例的一种可选的网页动画生成方法的页面示意图；

图6是根据本发明实施例的一种可选的网页动画生成方法的页面示意图；

图7是根据本发明实施例的一种可选的网页动画生成方法的页面示意图；

图8是根据本发明实施例的一种网页动画生成装置的结构示意图；

图9是根据本发明实施例的一种可选的网页动画生成装置的结构示意图；

图10是根据本发明实施例的一种可选的网页动画生成装置的动画模块的结构示意图；

图11是根据本发明实施例的一种可选的网页动画生成装置的动画模块的结构示意图；

图12是根据本发明实施例的一种可选的网页动画生成装置的动画模块的结构示意图；以及

图13是根据本发明实施例的一种可选的网页动画生成装置的动画模块的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、***、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

实施例1

根据本发明实施例，提供了一种网页动画生成方法的方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机***中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本申请实施例一所提供的方法实施例可以在移动终端、计算机终端或者类似的运算装置中执行。以运行在计算机终端上为例，图1是本发明实施例的一种实现网页动画生成方法的计算机终端的硬件结构框图。如图1所示，计算机终端10可以包括一个或多个(图中仅示出一个)处理器102(处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)、用于存储数据的存储器104、以及用于通信功能的传输模块106。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述电子装置的结构造成限定。例如，计算机终端10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。

存储器104可用于存储应用软件的软件程序以及模块，如本发明实施例中的网页动画生成方法对应的程序指令/模块，处理器102通过运行存储在存储器104内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的网页动画生成方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至计算机终端10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括计算机终端10的通信供应商提供的无线网络。在一个实例中，传输装置106包括一个网络适配器(Network Interface Controller，NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置106可以为射频(Radio Frequency，RF)模块，其用于通过无线方式与互联网进行通讯。

在上述运行环境下，本申请提供了如图2所示的网页动画生成方法。图2是根据本发明实施例一的网页动画生成方法的流程图。

如图2所示，应用于反向代理服务器中的网页动画生成方法的一种可选的方案包括如下实施步骤：

步骤S102，获取图像运动信息，其中，图像运动信息用于表征图像在显示界面中的显示效果。

具体的，在显示界面中，可以包含若干个图像元素，为了使这些静态图像元素具有动态的显示效果，可以预先分别为每个图像元素设置图像运动信息。通过图像运动信息，对图像元素的动态效果进行设定。其中，图像运动信息可以按照预先规定的存储格式，以数据表、XML、文本等形式进行存储，具体存储的形式不限，此处不作赘述。

在实际应用当中，以通过CSS3实现的网页页面的动画为例进行具体说明。CSS即层叠样式表(Cascading StyleSheet)，是一种在网页制作时采用的层叠样式表技术。通过CSS可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。而CSS3是CSS技术的第三个版本。

在CSS3中，包含了一套keyframes规则。可以利用keyframes在静态的网页中创建动画显示效果。利用keyframes创建动画的原理为，将用于描述网页页面的一套CSS样式表逐渐切换为另一套CSS样式表，通过改变两套CSS样式表中所记载的页面布局、字体、颜色、背景等属性参数，使网页页面中的内容产生动态效果。通过上述方法产生动画显示效果的过程中，还能够通过多次切换CSS样式表，以百分比的形式对CSS样式表进行切换的时间进行限定。其中，0％用于表示在CSS样式表间切换的开始时间，100％用于表示在CSS样式表间切换的结束时间。当然也可以通过from和to这两个关键词对CSS样式表进行切换的时间进行限定，此处不做赘述。

在CSS3中，还包含有Animation属性，在制作网页的时候，可以利用Animation属性，对网页中的各元素设置动画显示效果。其中，通过Animation属性可以对网页中的各元素的动画持续时间、动画重复次数等内容进行设定。

在CSS3中，还包含有Transform属性，在制作网页的时候，可以利用Transform属性使网页中的元素通过旋转、缩放或者倾斜等方式，实现2D动画显示效果或者3D动画显示效果。

在实现过程中，可以利用keyframes规则对CSS样式表中与发生变化的各个图像元素对应的属性参数进行设置。为每个CSS样式表中发生变化的图像元素设置相应的名称，例如可以为float1、float2、float3、float4、float5。设置在100％的时候，完成通过keyframes对CSS样式表中与图像元素对应的属性参数的切换。其中，利用keyframes规则，可以对应的CSS样式表中的页面布局、字体、颜色、背景等属性参数进行改变，从而实现图像元素的旋转、横轴位移、纵轴位移等动画显示效果。进一步的，通过Animation属性对CSS样式表中与图像元素对应的属性参数的切换持续时间、切换次数等内容进行限定。

步骤S104，接收外部输入的操作指令，其中，操作指令用于启动图像以动画的形式进行显示。

具体的，通过步骤S104接收外部输入的操作指令，从而根据接收到的操作指令来触发动画显示效果。其中，操作指令可以为点击显示界面中的特定位置生成的触发指令，也可以是在对显示界面中的内容进行切换时产生的切换指令。除此之外，还可以将其他指令设置为用于启动图像以动画的形式进行显示的操作指令，此处不做赘述。

步骤S106，响应操作指令，控制图像按照图像运动信息在显示界面中以动画的形式进行显示。

具体的，在步骤S106中，当接收到操作指令后，通过调用图像运动信息中的属性参数，并根据属性参数中的各个属性值控制图像元素在显示界面中的显示效果，从而实现以动画的形式进行显示。

在实际应用当中，还以通过CSS3实现的网页页面的动画为例进行具体说明。当接收到操作指令后，通过调用利用keyframes规则设置的CSS样式表中记录的与图像元素对应的发生改变的属性参数，和Animation属性中记录的切换时间、切换次数等参数，控制图像元素在显示界面中进行显示，从而产生动画显示效果。

通过上述步骤S102至步骤S106，通过获取预先设置的图像运动信息，在接收到外部输入的操作指令后，根据图像运动信息中记载的运动方式，控制图像在显示界面中以动画的形式进行显示。达到了在网页中通过以实时生成的方式与用户的操作进行动画交互的目的，从而实现了根据用户的触发信号在网页中实时生成的动画显示效果的技术效果，解决了现有技术中由于部分浏览器与预先制作的动画显示效果不兼容而导致的用户体验差的问题。

作为一种可选的实施方式，步骤S106响应操作指令，控制图像按照图像运动信息在显示界面中以动画的形式进行显示，可以包括：

步骤S1061，根据外部输入的操作指令，调用用于生成网页动画的动画类；

步骤S1063，通过动画类读取图像运动信息，并控制图像在显示界面中以动画的形式进行显示。

具体的，通过步骤S1061至步骤S1063，在接收到触发信号后，用于在显示界面中生成动画显示效果的动画类，对记载着动画运动属性的图像运动信息进行读取，从而在显示界面中，按照读取到的运动信息生成相应的动画显示效果。

作为一种可选的实施方式，图像运动信息至少包括：初始位置信息、目标位置信息以及运动时间信息，其中，初始位置信息用于记录图像在显示界面中的第一显示位置，目标位置信息用于记录图像在显示界面中的第二显示位置，运动时间信息用于记录图像由第一显示位置移动至第二显示位置所需要的时间长度。

在实际应用当中，以通过CSS3实现的网页页面的动画为例进行具体说明。在CSS中，在keyframes中对网页中与各对象对应的初始位置信息和目标位置信息进行记录，在Animation属性中对网页中与各对象对应的动画持续时间进行记录。

作为一种可选的实施方式，在图像运动信息包括初始位置信息、目标位置信息和运动时间信息时，步骤S106控制图像按照图像运动信息在显示界面中以动画的形式进行显示，包括：

步骤S61，读取与图像对应的图像运动信息。

步骤S63，控制图像在运动时间信息记录的时间长度内，由第一显示位置移动至第二显示位置。

具体的，通过步骤S61至步骤S63，读取图像运动信息中的初始位置信息、目标位置信息以及运动时间信息，通过初始位置信息和目标位置信息确定图像在显示界面中的第一显示位置和第二显示位置，并且通过运动时间信息确定图像在显示界面内运动的时间长度。通过控制图像在运动时间内由第一显示位置移动至第二显示位置，从而实现在网页中生成动画显示效果。

在实际应用当中，以通过CSS3实现的网页页面的动画为例进行具体说明。在CSS中，可以通过translateX变量和translateY变量对图像在显示界面中的位移进行控制。

作为一种可选的实施方式，在步骤S61在读取与图像对应的图像运动信息之后，步骤S106还可以包括：

步骤S621，获取显示界面的实际分辨率。

步骤S623，根据实际分辨率和图像运动信息，计算得到图像在显示界面中的第一显示位置和第二显示位置。

具体的，由于显示界面的分辨率不同，因此，可以在图像运动信息中的初始位置信息、目标位置信息以相对显示位置的形式进行记录。例如，以百分比的形式对图像在显示界面中的初始位置信息和目标位置信息进行记录。通过步骤S621至步骤S623，根据获取到的显示界面的实际分辨率、初始位置信息和目标位置信息，通过计算得到图像在显示界面中实际的第一显示位置和第二显示位置。按照第一显示位置和第二显示位置控制图像在显示界面中以动画的形式进行显示，生成与当前显示界面相匹配的动画显示效果。通过上述方法，可以使动画显示效果适用于任何分辨率的显示界面当中，从而提高了适应性。

作为一种可选的实施方式，图像运动信息还包括：旋转角度信息，旋转角度信息用于记录图像在显示界面中以图像的中心点为轴心进行旋转的角度，其中，在执行步骤S63控制图像在运动时间信息记录的时间长度内，由第一显示位置移动至第二显示位置的同时，还可以控制图像按照旋转角度信息记录的角度进行旋转。

具体的，除了在显示界面中，使图像产生位移的动画显示效果之外，还可以通过对图像的旋转角度进行设定，使显示界面中的图像产生旋转的动画显示效果。

在执行步骤S63控制图像在运动时间信息记录的时间长度内，图像在显示界面中由第一显示位置移动至第二显示位置的同时，还可以根据图像运动信息中的旋转角度信息，在时间长度内使图像进行旋转，从而产生旋转的动画显示效果。

在实际应用当中，以通过CSS3实现的网页页面的动画为例进行具体说明。其中，可以通过rotate变量对图像在显示界面中的旋转的角度进行控制。

作为一种可选的实施方式，图像运动信息还包括：初始缩放信息、目标缩放信息，初始缩放信息用于记录图像在显示界面中的第一缩放比例，目标缩放信息用于记录图像在显示界面中的第二缩放比例，其中，在执行步骤S63控制图像在运动时间信息记录的时间长度内，由第一显示位置移动至第二显示位置的同时，控制图像由第一缩放比例缩放至第二缩放比例。

具体的，除了在显示界面中，使图像产生位移和旋转的动画显示效果之外，还可以通过对图像的缩放信息进行设定，使显示界面中的图像产生由小变大或者由大变小的动画显示效果。

在执行步骤S63控制图像在运动时间信息记录的时间长度内，图像在显示界面中由第一显示位置移动至第二显示位置的同时，还可以根据图像运动信息中的初始缩放信息、目标缩放信息，在时间长度内使图像的大小发生变化，从而产生由大到小或者由小到大的动画显示效果。

作为一种可选的实施方式，图像在显示界面中的初始缩放信息和目标缩放信息，也可以通过图像占显示界面的比例的形式进行记录。将上述初始缩放信息和目标缩放信息分别与显示界面的实际分辨率进行计算，确定初始图像在显示界面中的第一缩放比例和第二缩放比例。通过上述方法，可以使在网页页面上生成的动画显示效果可以适配于任何分辨率的显示界面。

作为一种可选的实施方式，图像运动信息还包括：初始透明度信息和目标透明度信息，初始透明度信息用于记录图像在显示界面中的第一透明度，目标透明度信息用于记录图像在显示界面中的第二透明度，其中，在控制图像在运动时间信息记录的时间长度内，由第一显示位置移动至第二显示位置的同时，控制图像由第一透明度渐变为至第二透明度。

具体的，除了在显示界面中，使图像产生位移、旋转以及缩放的动画显示效果之外，还可以通过对图像的透明度信息进行设定，使显示界面中的图像产生由淡入或淡出的动画显示效果。

在执行步骤S63控制图像在运动时间信息记录的时间长度内，图像在显示界面中由第一显示位置移动至第二显示位置的同时，还可以根据图像运动信息中的初始透明度信息和目标透明度信息，在时间长度内使图像的透明度发生变化，从而产生淡入或者淡出的动画显示效果。

作为一种可选的实施方式，以星影联盟网站首页为例进行说明，如图3所示，具体步骤如下：

步骤S1，可以在与网页页面对应的html中设置了五个图像元素li，在每个图像元素中分别设置了a标签，这五个图像元素与图5中的五个圆形区域一一对应。

步骤S2，在CSS中的Keyframes内设置与圆形图像元素对应的类，例如：float1，在float1中，可以通过translateX和translateY对图像元素的位移进行设定，通过rotate对旋转角度进行设定。在需要生成动画显示效果时，通过调用这个float1类即可，如：

其中，在设置transform属性的时候分别设置了旋转角度、横向位移、纵向位移这三个属性，其中，旋转角度为rotate(-12deg)，即逆时针旋转12度；横向位移为translateX(-125px)，即在X轴方向向右移动5像素；纵向位移为translateY(35px)，即在Y轴方向向下移动35像素。除此之外，还利用百分比对与图像元素对应的属性的变化状态进行控制。当0％的时候为初始状态，这里不作任何声明，当100％时，表示在动画显示效果结束时，图像元素移动至上述设定的位置。

步骤S3，利用Animation对Keyframe的动画属性进行设定，其中，动画属性包括：动画执行时间，动画执行次数等。例如：li：nth-child(1)，其中，在执行动画时，通过li：nth-child(1)调用float1中的参数，对与之相应的图像元素li进行控制，生成预订动画显示效果，如：

步骤S4，判断用户是否通过点击显示界面中心的特定区域。

步骤S5，如图4所示，当用户点击显示界面中心的特定区域时，即当判断用户触发了点击事件时，利用上述设置的参数生成动画显示效果。

如图4所示，在初始的页面中，显示界面中只有中间一个圆形图像。当用户点击中间圆形图像区域后，触发生成动画显示效果。当触发动画显示效果后，用户不需要再次进行点击。经过显示界面经过如图5、图6的过程，最终的显示界面如图7所示。

在上述方法中通过将Transform属性的translateX、translateY、rotate值结合，并调用animation实现环形动画。

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

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

实施例2

根据本发明实施例，还提供了一种用于实施上述网页动画生成方法的网页动画生成装置，如图8所示，该装置包括：获取模块22、接收模块24和动画模块26。

其中，获取模块22，用于获取图像运动信息，其中，图像运动信息用于表征图像在显示界面中的显示效果；接收模块24，用于接收外部输入的操作指令，其中，操作指令用于启动图像以动画的形式进行显示；动画模块26，用于响应操作指令，控制图像按照图像运动信息在显示界面中以动画的形式进行显示。

通过上述获取模块22、接收模块24和动画模块26，通过获取预先设置的图像运动信息，在接收到外部输入的操作指令后，根据图像运动信息中记载的运动方式，控制图像在显示界面中以动画的形式进行显示。达到了在网页中通过以实时生成的方式与用户的操作进行动画交互的目的，从而实现了根据用户的触发信号在网页中实时生成的动画显示效果的技术效果，解决了现有技术中由于部分浏览器与预先制作的动画显示效果不兼容而导致的用户体验差的问题。

作为一种可选的实施方式，如图9所示，图像运动信息至少包括：初始位置信息、目标位置信息以及运动时间信息，其中，动画模块26包括：子读取模块261和第一子控制模块264。

其中，子读取模块261，用于读取与图像对应的图像运动信息，其中，初始位置信息用于记录图像在显示界面中的第一显示位置，目标位置信息用于记录图像在显示界面中的第二显示位置，运动时间信息用于记录图像由第一显示位置移动至第二显示位置所需要的时间长度；第一子控制模块264，用于控制图像在运动时间信息记录的时间长度内，由第一显示位置移动至第二显示位置。

具体的，通过上述子读取模块261和第一子控制模块264，读取图像运动信息中的初始位置信息、目标位置信息以及运动时间信息，通过初始位置信息和目标位置信息确定图像在显示界面中的第一显示位置和第二显示位置，并且通过运动时间信息确定图像在显示界面内运动的时间长度。通过控制图像在运动时间内由第一显示位置移动至第二显示位置，从而实现在网页中生成动画显示效果。

在实际应用当中，以通过CSS3实现的网页页面的动画为例进行具体说明。在CSS中，可以通过translateX变量和translateY变量对图像在显示界面中的位移进行控制。

作为一种可选的实施方式，如图10所示，动画模块26还包括：子获取模块262和子计算模块263。

其中，子获取模块262，用于获取显示界面的实际分辨率；子计算模块263，用于根据实际分辨率和图像运动信息，计算得到图像在显示界面中的第一显示位置和第二显示位置。

具体的，由于显示界面的分辨率不同，因此，可以在图像运动信息中的初始位置信息、目标位置信息以相对显示位置的形式进行记录。例如，以百分比的形式对图像在显示界面中的初始位置信息和目标位置信息进行记录。通过上述子获取模块262和子计算模块263，根据获取到的显示界面的实际分辨率、初始位置信息和目标位置信息，通过计算得到图像在显示界面中实际的第一显示位置和第二显示位置。按照第一显示位置和第二显示位置控制图像在显示界面中以动画的形式进行显示，生成与当前显示界面相匹配的动画显示效果。通过上述方法，可以使动画显示效果适用于任何分辨率的显示界面当中，从而提高了适应性。

作为一种可选的实施方式，如图11所示，在图像运动信息中还可以包括：旋转角度信息，旋转角度信息用于记录图像在显示界面中以图像的中心点为轴心进行旋转的角度，其中，动画模块26还包括：第二子控制模块265。其中，第二子控制模块265，用于控制图像按照旋转角度信息记录的角度进行旋转。

具体的，除了在显示界面中，使图像产生位移的动画显示效果之外，还可以通过对图像的旋转角度进行设定，使显示界面中的图像产生旋转的动画显示效果。

在上述第一子控制模块264执行控制图像在运动时间信息记录的时间长度内，图像在显示界面中由第一显示位置移动至第二显示位置的同时，还可以通过上述第二子控制模块265根据图像运动信息中的旋转角度信息，在时间长度内使图像进行旋转，从而产生旋转的动画显示效果。

在实际应用当中，以通过CSS3实现的网页页面的动画为例进行具体说明。其中，可以通过rotate变量对图像在显示界面中的旋转的角度进行控制。

作为一种可选的实施方式，如图12所示，在图像运动信息中还可以包括：初始缩放信息、目标缩放信息，初始缩放信息用于记录图像在显示界面中的第一缩放比例，目标缩放信息用于记录图像在显示界面中的第二缩放比例，其中，动画模块26还包括：第三子控制模块266。其中第三子控制模块266，用于控制图像由第一缩放比例缩放至第二缩放比例。

具体的，除了在显示界面中，使图像产生位移和旋转的动画显示效果之外，还可以通过对图像的缩放信息进行设定，使显示界面中的图像产生由小变大或者由大变小的动画显示效果。

在上述第一子控制模块264控制图像在运动时间信息记录的时间长度内，图像在显示界面中由第一显示位置移动至第二显示位置的同时，还可以通过上述第三子控制模块266根据图像运动信息中的初始缩放信息、目标缩放信息，在时间长度内使图像的大小发生变化，从而产生由大到小或者由小到大的动画显示效果。

作为一种可选的实施方式，如图13所示，在图像运动信息中还可以包括：初始透明度信息和目标透明度信息，初始透明度信息用于记录图像在显示界面中的第一透明度，目标透明度信息用于记录图像在显示界面中的第二透明度，其中，动画模块26还包括：第四子控制模块267。其中，第四子控制模块267，用于控制图像由第一透明度渐变为至第二透明度。

具体的，除了在显示界面中，使图像产生位移、旋转以及缩放的动画显示效果之外，还可以通过对图像的透明度信息进行设定，使显示界面中的图像产生由淡入或淡出的动画显示效果。

在上述第一子控制模块264控制图像在运动时间信息记录的时间长度内，图像在显示界面中由第一显示位置移动至第二显示位置的同时，还可以通过上述第四子控制模块267根据图像运动信息中的初始透明度信息和目标透明度信息，在时间长度内使图像的透明度发生变化，从而产生淡入或者淡出的动画显示效果。

实施例3

本发明的实施例还提供了一种存储介质。可选地，在本实施例中，上述存储介质可以用于保存上述实施例一所提供的网页动画生成方法所执行的程序代码。

可选地，在本实施例中，上述存储介质可以位于计算机网络中移动终端群中的网络中的多个网络设备中的至少一个网络设备。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：

S1，获取图像运动信息，其中，图像运动信息用于表征图像在显示界面中的显示效果；

S2，接收外部输入的操作指令，其中，操作指令用于启动图像以动画的形式进行显示；

S3，响应操作指令，控制图像按照图像运动信息在显示界面中以动画的形式进行显示。

可选地，存储介质还被设置为存储用于执行以下步骤的程序代码：

S1，读取与图像对应的图像运动信息；

S2，控制图像在运动时间信息记录的时间长度内，由第一显示位置移动至第二显示位置。

可选地，存储介质还被设置为存储用于执行以下步骤的程序代码：获取显示界面的实际分辨率；根据实际分辨率和图像运动信息，计算得到图像在显示界面中的第一显示位置和第二显示位置。

可选地，存储介质还被设置为存储用于执行以下步骤的程序代码：在控制图像在运动时间信息记录的时间长度内，由第一显示位置移动至第二显示位置的同时，控制图像按照旋转角度信息记录的角度进行旋转。

可选地，存储介质还被设置为存储用于执行以下步骤的程序代码：在控制图像在运动时间信息记录的时间长度内，由第一显示位置移动至第二显示位置的同时，控制图像由第一缩放比例缩放至第二缩放比例。

可选地，存储介质还被设置为存储用于执行以下步骤的程序代码：在控制图像在运动时间信息记录的时间长度内，由第一显示位置移动至第二显示位置的同时，控制图像由第一透明度渐变为至第二透明度。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在上述计算机可读取的存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在存储介质中，包括若干指令用以使得一台或多台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。

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

在本申请所提供的几个实施例中，应该理解到，所揭露的客户端，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

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

Claims (14)

1.一种网页动画生成方法，其特征在于，包括：

获取图像运动信息，其中，所述图像运动信息用于表征图像在显示界面中的显示效果；

接收外部输入的操作指令，其中，所述操作指令用于启动所述图像以动画的形式进行显示；

响应所述操作指令，控制所述图像按照所述图像运动信息在所述显示界面中以所述动画的形式进行显示。

2.根据权利要求1所述的方法，其特征在于，响应所述操作指令，控制所述图像按照所述图像运动信息在所述显示界面中以所述动画的形式进行显示，包括：

根据所述外部输入的操作指令，调用用于生成网页动画的动画类；

通过所述动画类读取所述图像运动信息，并控制所述图像在所述显示界面中以所述动画的形式进行显示。

3.根据权利要求2所述的方法，其特征在于，所述图像运动信息至少包括：初始位置信息、目标位置信息以及运动时间信息，其中，所述初始位置信息用于记录所述图像在所述显示界面中的第一显示位置，所述目标位置信息用于记录所述图像在所述显示界面中的第二显示位置，所述运动时间信息用于记录所述图像由所述第一显示位置移动至所述第二显示位置所需要的时间长度。

4.根据权利要求3所述的方法，其特征在于，在所述图像运动信息包括所述初始位置信息、所述目标位置信息和所述运动时间信息时，控制所述图像按照所述图像运动信息在所述显示界面中以所述动画的形式进行显示，包括：

读取与所述图像对应的所述图像运动信息；

控制所述图像在所述运动时间信息记录的时间长度内，由所述第一显示位置移动至所述第二显示位置。

5.根据权利要求4所述的方法，其特征在于，在读取与所述图像对应的所述图像运动信息之后，还包括：

获取所述显示界面的实际分辨率；

根据所述实际分辨率和所述图像运动信息，计算得到所述图像在所述显示界面中的所述第一显示位置和所述第二显示位置。

6.根据权利要求5所述的方法，其特征在于，所述图像运动信息还包括：旋转角度信息，所述旋转角度信息用于记录所述图像在所述显示界面中以所述图像的中心点为轴心进行旋转的角度，其中，在控制所述图像在所述运动时间信息记录的时间长度内，由所述第一显示位置移动至所述第二显示位置的同时，控制所述图像按照所述旋转角度信息记录的所述角度进行旋转。

7.根据权利要求6所述的方法，其特征在于，所述图像运动信息还包括：初始缩放信息、目标缩放信息，所述初始缩放信息用于记录所述图像在所述显示界面中的第一缩放比例，所述目标缩放信息用于记录所述图像在所述显示界面中的第二缩放比例，其中，在控制所述图像在所述运动时间信息记录的所述时间长度内，由所述第一显示位置移动至所述第二显示位置的同时，控制所述图像由所述第一缩放比例缩放至所述第二缩放比例。

8.根据权利要求7所述的方法，其特征在于，所述图像运动信息还包括：初始透明度信息和目标透明度信息，所述初始透明度信息用于记录所述图像在所述显示界面中的第一透明度，所述目标透明度信息用于记录所述图像在所述显示界面中的第二透明度，其中，在控制所述图像在所述运动时间信息记录的所述时间长度内，由所述第一显示位置移动至所述第二显示位置的同时，控制所述图像由所述第一透明度渐变为至所述第二透明度。

9.一种网页动画生成装置，其特征在于，包括：

获取模块，用于获取图像运动信息，其中，所述图像运动信息用于表征图像在显示界面中的显示效果；

接收模块，用于接收外部输入的操作指令，其中，所述操作指令用于启动所述图像以动画的形式进行显示；

动画模块，用于响应所述操作指令，控制所述图像按照所述图像运动信息在所述显示界面中以所述动画的形式进行显示。

10.根据权利要求9所述的装置，其特征在于，所述图像运动信息至少包括：初始位置信息、目标位置信息以及运动时间信息，其中，所述动画模块包括：

子读取模块，用于读取与所述图像对应的所述图像运动信息，其中，所述初始位置信息用于记录所述图像在所述显示界面中的第一显示位置，所述目标位置信息用于记录所述图像在所述显示界面中的第二显示位置，所述运动时间信息用于记录所述图像由所述第一显示位置移动至所述第二显示位置所需要的时间长度；

第一子控制模块，用于控制所述图像在所述运动时间信息记录的时间长度内，由所述第一显示位置移动至所述第二显示位置。

11.根据权利要求10所述的装置，其特征在于，所述动画模块还包括：

子获取模块，用于获取所述显示界面的实际分辨率；

子计算模块，用于根据所述实际分辨率和所述图像运动信息，计算得到所述图像在所述显示界面中的所述第一显示位置和所述第二显示位置。

12.根据权利要求11所述的装置，其特征在于，所述图像运动信息还包括：旋转角度信息，所述旋转角度信息用于记录所述图像在所述显示界面中以所述图像的中心点为轴心进行旋转的角度，其中，所述动画模块还包括：

第二子控制模块，用于控制所述图像按照所述旋转角度信息记录的所述角度进行旋转。

13.根据权利要求12所述的装置，其特征在于，所述图像运动信息还包括：初始缩放信息、目标缩放信息，所述初始缩放信息用于记录所述图像在所述显示界面中的第一缩放比例，所述目标缩放信息用于记录所述图像在所述显示界面中的第二缩放比例，其中，所述动画模块还包括：

第三子控制模块，用于控制所述图像由所述第一缩放比例缩放至所述第二缩放比例。

14.根据权利要求13所述的装置，其特征在于，所述图像运动信息还包括：初始透明度信息和目标透明度信息，所述初始透明度信息用于记录所述图像在所述显示界面中的第一透明度，所述目标透明度信息用于记录所述图像在所述显示界面中的第二透明度，其中，所述动画模块还包括：

第四子控制模块，用于控制所述图像由所述第一透明度渐变为至所述第二透明度。