CN108256062A - 网页动画实现方法、装置、电子设备、存储介质 - Google Patents

Abstract

本发明提供一种网页动画实现方法、装置、电子设备、存储介质，网页动画实现方法，包括：获取在一网页上的用户交互行为；判断所述用户交互行为是否命中HTML文件中的JavaScript脚本编写的预定用户交互行为；若所述用户交互行为命中HTML文件中的JavaScript脚本编写的预定用户交互行为，则根据所述预定用户交互行为判断所述HTML文件中是否存在与所述预定用户交互行为对应的自定义动画样式；若所述HTML文件中存在与所述预定用户交互行为对应的自定义动画样式，则获取与所述自定义动画样式对应的CSS动画配置数据；根据所述CSS动画配置数据显示动画效果。本发明提供的方法及装置实现根据用户交互行为的网页动画，且网页动画小巧轻便，使得网页打开速度快兼容性强且扩展性广泛。

Description

网页动画实现方法、装置、电子设备、存储介质

技术领域

本发明涉及计算机应用技术领域，尤其涉及一种网页动画实现方法、装置、电子设备、存储介质。

背景技术

随着计算机和网络技术的发展，通过网页获取信息成为人们生活的一部分。在网页浏览过程中，经常会包含动画效果，如通过服务器请求数据时，可能会有等待数据的过程，呈现等待的动画效果，表示等待过程。

现有的网页动画效果显示方法主要有两种：一种是通过使用后缀名为.gif的动态图片显示，另一种是使用JavaScript中的定时器动态修改字符内容的方式显示动画效果，但是这2种方法都存在劣势，第一种方法Gif动态图片占用空间大，费流量并且性能损耗大，加速手机电量消耗，动画的显示效果也不灵活，如动画速度不能控制等。第二种方法由于JavaScript属于脚本语言，技术实现上难度大，并且由于动画主体元素与JavaScript操作绑定，如果动画相关的HTML代码被修改，可能导致JavaScript代码出错。

此外，诸如OLED(Organic Light-Emitting Diode,有机电激光显示)显示技术的自发光显示屏具有自发光、广视角、几乎无穷高的对比度、较低耗电、极高反应速度等优点，因此，自发光显示屏被广泛使用。然而，在自发光显示屏长期使用过程中，其也可能会显现出轻微的视觉变化。诸如“图像残留”或“老化”换言之，随着使用时间的增长，自发光显示屏会出现图像残留，进而影响显示效果。

发明内容

本发明为了克服上述现有技术存在的缺陷，提供一种网页动画实现方法、装置、电子设备、存储介质，以实现根据用户交互行为的网页动画，且网页动画小巧轻便，使得网页打开速度快兼容性强且扩展性广泛。

根据本发明的一个方面，提供一种网页动画实现方法，包括：获取在一网页上的用户交互行为；判断所述用户交互行为是否命中HTML文件中的JavaScript脚本编写的预定用户交互行为；若所述用户交互行为命中HTML文件中的JavaScript脚本编写的预定用户交互行为，则根据所述预定用户交互行为判断所述HTML文件中是否存在与所述预定用户交互行为对应的自定义动画样式；若所述HTML文件中存在与所述预定用户交互行为对应的自定义动画样式，则获取与所述自定义动画样式对应的CSS动画配置数据；根据所述CSS动画配置数据显示动画效果。

优选地，所述获取在一网页上的用户交互行为的步骤之前还包括：获取显示所述网页的硬件设备的标识；根据所述网页的硬件设备的标识识别该硬件设备的显示屏是否为自发光型显示屏；若该硬件设备的显示屏为自发光型显示屏，则根据所述HTML文件获取所述网页上显示的静态图像，所述预定交互行为使得所述静态图像在所述自发光型显示屏上的同一位置保持时间超过第一时间阈值，且与所述预定用户交互行为对应的所述自定义动画样式的动画主体为所述静态图像。

优选地，还包括：获取在当前网页上打开目标网页的用户交互行为；根据所述HTML文件获取所述目标网页上显示的静态图像；确定所述目标网页上显示的静态图像是否命中当前网页上显示的静态图像；若所述目标网页上显示的静态图像命中当前网页上显示的静态图像，则获取该静态图像在当前网页及目标网页上的坐标位置；若该静态图像在当前网页及目标网页上的坐标位置相同，则在当前网页上打开目标网页的用户交互行为命中所述预定用户交互行为，且与所述预定用户交互行为对应的所述自定义动画样式的动画主体为该静态图像。

优选地，还包括：获取更新当前网页的用户交互行为；根据所述HTML文件获取更新后当前网页上显示的静态图像；确定更新后当前网页上显示的静态图像是否命中更新前当前网页上显示的静态图像；若更新后当前网页上显示的静态图像命中更新前当前网页上显示的静态图像，则获取该静态图像在更新后当前网页上及更新前当前网页上的坐标位置；若该静态图像在更新后当前网页及更新前当前网页上的坐标位置相同，则更新当前网页的用户交互行为命中所述预定用户交互行为，且与所述预定用户交互行为对应的所述自定义动画样式的动画主体为该静态图像。

优选地，所述网页包括如下任一项或多项区域：次动态区域，所述次动态区域显示在静态显示及动态显示之间切换的静态图像，所述次动态区域具有第一状态和第二状态，当所述静态图像静态显示在所述次动态区域中时，所述静态区域处于第一状态，当所述静态图像作为所述动画主体动态显示在所述次动态区域中时，所述次动态区域处于第二状态，所述次动态区域在所述第二状态时，随所述动画主体的移动而移动；动态区域，所述动态区域显示非静态的网页内容。

优选地，所述根据所述CSS动画配置数据显示动画效果的步骤之前还包括：当网页更新时，仅对处于第二状态的次动态区域及动态区域进行渲染。

优选地，所述自定义动态样式包括如下形式中一种或多种：逐渐增加所述静态图像的透明度；旋转所述静态图像；放大/缩小所述静态图像；使所述静态图像抖动。

优选地，当识别所述网页中距离所述静态图片边界预定数量的像素点都为黑色，则触发所述静态图片由透明度100％变化至透明度0％；当识别所述网页中距离所述静态图片边界预定数量的像素点中存在多个不为黑色，则触发所述静态图片由透明度0％变化至透明度100％。

优选地，所述静态图片由透明度100％变化至透明度0％的变化时间为1帧的播放时间；所述静态图片由透明度0％变化至透明度100％的变化时间长于所述1帧的播放时间。

优选地，每次所述静态图片由透明度100％变化至透明度0％时，使所述静态图像沿一方向移动数个像素点的位置。

根据本发明的又一方面，还提供一种网页动画实现装置，包括：获取模块，用于在一网页上获取用户交互行为；第一判断模块，用于判断所述用户交互行为是否命中HTML文件中的JavaScript脚本编写的预定用户交互行为；第二判断模块，若所述用户交互行为命中HTML文件中的JavaScript脚本编写的预定用户交互行为，则用于根据所述预定用户交互行为判断所述HTML文件中是否存在与所述预定用户交互行为对应的自定义动画样式；动画样式获取模块，若所述HTML文件中存在与所述预定用户交互行为对应的自定义动画样式，则用于获取与所述自定义动画样式对应的CSS动画配置数据；显示模块，用于根据所述CSS动画配置数据显示动画效果。

根据本发明的又一方面，还提供一种电子设备，所述电子设备包括：处理器；存储介质，其上存储有计算机程序，所述计算机程序被所述处理器运行时执行如上所述的步骤。

根据本发明的又一方面，还提供一种存储介质，所述存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如上所述的步骤。

相比现有技术，本发明实现根据用户交互行为的网页动画，且网页动画小巧轻便，使得网页打开速度快兼容性强且扩展性广泛。此外，本发明还通过硬件显示屏的识别，当自发光显示屏的硬件显示网页时，若静态图片在同一位置保持显示时间过久，即将该静态图片作为动画主体进行动画显示，由此，改善自发光显示屏出现图像残留，进而影响显示效果的问题。

附图说明

通过参照附图详细描述其示例实施方式，本发明的上述和其它特征及优点将变得更加明显。

图1示出了根据本发明实施例的页面动画实现方法的流程图。

图2至图4示出了根据本发明实施例的页面动画实现方法的各个实施例的流程图。

图5至图11示出了根据本发明实施例的网页中的静态图像的示意图。

图12示出了根据本发明实施例的页面动画实现装置的示意图。

图13示意性示出本公开示例性实施例中一种计算机可读存储介质示意图。

图14示意性示出本公开示例性实施例中一种电子设备示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。

此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

为了解决现有技术的缺陷，实现根据用户交互行为的网页动画，且网页动画小巧轻便，使得网页打开速度快兼容性强且扩展性广泛，本发明提供一种页面动画实现方法、装置、电子设备、存储介质。

图1示出了根据本发明实施例的页面动画实现方法的流程图。图1示出了5个步骤：

步骤S110：获取在一网页上的用户交互行为。

步骤S120：判断所述用户交互行为是否命中HTML文件中的JavaScript脚本编写的预定用户交互行为。

若步骤120判断所述用户交互行为命中HTML文件中的JavaScript脚本编写的预定用户交互行为，则执行步骤S130：根据所述预定用户交互行为判断所述HTML文件中是否存在与所述预定用户交互行为对应的自定义动画样式。

若步骤S130判断所述HTML文件中存在与所述预定用户交互行为对应的自定义动画样式，则执行步骤S140获取与所述自定义动画样式对应的CSS动画配置数据。

步骤S150：根据所述CSS动画配置数据显示动画效果。

具体而言，HTML是超文本标记语言，即HTML(Hypertext Markup Language)，是用于描述网页文档的一种标记语言。HTML文件是由HTML命令组成的描述性文本，通过HTML命令显示文字、图形、动画、声音、表格、链接等。当需要浏览网页时终端发送网页请求，获取到与网页对应的HTML文件，通过解析HTML文件显示网页，在解析的过程中，判断HTML文件中是否存在自定义动画样式，自定义动画样式是指根据需要设计的动画的表现形式，包括动画的显示时长和显示方式、动画主体的形状、动画主体的位置、动画主体的个数、动画主体在不同时间的状态等，动画主体是指动画组成的各个部分，如动态的"…"逐个出现，其中的一个"就可以称为一个动画主体。查找HTML文件中是否存在自定义标签或预设字符串的形式或HTML自带的可实现自定义动画样式的标签，如果存在，则判断为HTML文件中存在自定义动画样式，否则，判断为HTML文件中不存在自定义动画样式。

具体而言，CSS(CascadingStyleSheets，层叠样式表)是一种用来表现HTML文件样式的计算机语言，CSS动画配置数据是指通过CSS实现的用来控制动画效果的数据，如控制动画的显示时长和显示方式的参数、控制动画主体形状的参数、控制动画主***置的参数、控制动画主体个数的参数、控制动画主体在不同时间状态的参数等。同样的动画效果，可以通过不同的CSS动画配置数据(即动画属性)实现，如控制动画主体形状的参数可以由文本投影参数或内边距参数、边框参数、背景参数、图层投影参数等组成，通过各种参数的配合生成动画主体，控制动画主***置的参数可以由字符间距控制参数组成，也可以由字符缩进参数组成，控制动画主体个数的参数可以由隐藏字符参数将字符隐藏从而改变动画主体的个数，也可以由透明度参数使动画主体透明从而改变动画主体的个数。由于CSS的灵活性，可通过CSS动画配置数据方便灵活的控制动画效果。

具体而言，JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。可在JavaScript脚本编写中采用jQuery。jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax(Asynchronous Javascript And XML)交互。

下面分别结合图2至图4说明本发明的多个实施例。参见图2，图2示出了3个步骤，图2示出的3个步骤在图1中的步骤S110之前执行：

步骤S210：获取显示所述网页的硬件设备的标识。

步骤S220：根据所述网页的硬件设备的标识识别该硬件设备的显示屏是否为自发光型显示屏。

具体而言，步骤S220中可根据硬件设备的标识识别硬件设备的型号，并根据硬件设备的型号与其显示屏类型的映射表，确定该硬件设备的显示屏的类型。可选地，仅储存具有自发光显示屏的硬件设备的型号，减少储存负载。

步骤S230：若该硬件设备的显示屏为自发光型显示屏，则根据所述HTML文件获取所述网页上显示的静态图像，所述预定交互行为使得所述静态图像在所述自发光型显示屏上的同一位置保持时间超过第一时间阈值，且与所述预定用户交互行为对应的所述自定义动画样式的动画主体为所述静态图像。第一时间阈值例如可以是30分钟、1个小时、2个小时等。

由于，长时间使用自发光型显示屏，尤其是长时间显示同一静态图像，可能会出现图像残留，进而影响显示效果。因此，通过上述步骤可以识别硬件设备的显示屏类型，并当硬件设备具有自发光型显示屏时，使长时间在显示屏同一位置显示的静态图像进行动画显示。各个静态图像的自定义动画样式具有相同的CSS动画配置数据。该CSS动画配置数据预先设置，并可直接进行调用，减少储存负载。在一些变化例中，根据各静态图像的位置可实现不同的CSS动画配置(例如运动时避开网页主要内容)，增加显示效果。

在图2的实施例的基础上，图3和图4示出了两个不同的实施例。

首先参见图3，图3示出了6个步骤：

步骤S310：获取在当前网页上打开目标网页的用户交互行为。

步骤S320：根据所述HTML文件获取所述目标网页上显示的静态图像。

步骤S330：确定所述目标网页上显示的静态图像是否命中当前网页上显示的静态图像。

步骤S340：若所述目标网页上显示的静态图像命中当前网页上显示的静态图像，则获取该静态图像在当前网页及目标网页上的坐标位置。

步骤S350：判断该静态图像在当前网页及目标网页上的坐标位置是否相同。

步骤S360：若该静态图像在当前网页及目标网页上的坐标位置相同，则在当前网页上打开目标网页的用户交互行为命中所述预定用户交互行为，且与所述预定用户交互行为对应的所述自定义动画样式的动画主体为该静态图像。

在图3所示的实施例中，可以理解，同一网站的多个网页的同一位置处例如都具有该网站的标识图片，且该标识图片可能不随用户交互而移动，因此，当用户浏览该网站的多个网页时，该标识图片会在显示屏的同一位置显示较久的时间，通过上述步骤，使该标识图片进行动画显示，以避免自发光显示屏会出现图像残留，进而影响显示效果。此外，在又一些实施例中，同一网站的多个网页的同一位置处例如都具有该网站的标识图片，该标识图片可能随用户交互而移动，当用户交互使得该标识图片在显示屏的同一位置显示较久的时间，通过上述步骤，使该标识图片进行动画显示，以避免自发光显示屏会出现图像残留，进而影响显示效果。

下面参见图4，图4示出了6个步骤：

步骤S301：获取更新当前网页的用户交互行为:。

步骤S302：根据所述HTML文件获取更新后当前网页上显示的静态图像。

步骤S303：确定更新后当前网页上显示的静态图像是否命中更新前当前网页上显示的静态图像。

步骤S304：若更新后当前网页上显示的静态图像命中更新前当前网页上显示的静态图像，则获取该静态图像在更新后当前网页上及更新前当前网页上的坐标位置。

步骤S305：确定该静态图像在更新后当前网页及更新前当前网页上的坐标位置是否相同。

步骤S306：若该静态图像在更新后当前网页及更新前当前网页上的坐标位置相同，则更新当前网页的用户交互行为命中所述预定用户交互行为，且与所述预定用户交互行为对应的所述自定义动画样式的动画主体为该静态图像。

在图4所示的实施例中，可以理解，当用户浏览同一网页时，该网页可能按一定周期进行刷新，可在每次刷新时，判断该网页更新前和更新后是否具有同一静态图像，且该静态图像的位置是否在显示屏中的相同位置，由此，使该静态图片进行动画显示，以避免自发光显示屏会出现图像残留，进而影响显示效果。

图5至图11示出了根据本发明实施例的网页中的静态图像的示意图。图5至图11仅仅是示意性起见，本发明并非以此为限。

首先参见图5至图8，网页500包括次动态区域510和/或动态区域520。次动态区域510显示在静态显示及动态显示之间切换的静态图像。所述次动态区域510具有第一状态和第二状态，当所述静态图像静态显示在所述次动态区域510中时，所述次动态区域510处于第一状态。当所述静态图像作为所述动画主体动态显示在所述次动态区域510中时，所述次动态区域510处于第二状态。所述次动态区域510在所述第二状态时，随所述动画主体的移动而移动。所述次动态区域510在所述第二状态时，所述静态图像的自定义动态样式可以逐渐增加所述静态图像的透明度(如图5和图6)；旋转所述静态图像(如图5和图7)；放大/缩小所述静态图像(放大/缩小不影响其他网页内容且不影响该静态图像的显示)；使所述静态图像抖动(如图5和图8)。所述动态区域520显示非静态的网页内容。非静态的网页内容指的是至多在第一时间阈值范围内保持在原位置的网页内容(包括图像、文字)。可以理解，网页中还可以有静态区域，静态区域可以是不显示任何内容的区域。

进一步地，在图1的步骤S150之前还包括：当网页更新时，仅对处于第二状态的次动态区域及动态区域进行渲染。换言之，网页更新时，不对第一状态的次动态区域进行渲染，以加快网页刷新速度。

继续参见图9至图11，在图9至图11的实施例中，用户在网页中的播放器观看视频，上述的静态图像例如可以是视频中的水印。当播放器中的视频在切换的过程中出现黑色切换帧时(即当识别所述网页中距离所述静态图片边界预定数量的像素点都为黑色)，则触发所述静态图片由透明度100％变化至透明度0％(如图10和图11)。当识别切换帧结束后正常播放时(即所述网页中距离所述静态图片边界预定数量的像素点中存在多个不为黑色)，则触发所述静态图片由透明度0％变化至透明度100％(如图11和图9所示)。可以理解，为了缓解水印时隐时现对视频观看造成的影响，当静态图片由透明度100％变化至透明度0％的变化时间为1帧的播放时间(即切换帧的播放时间)。所述静态图片由透明度0％变化至透明度100％的变化时间长于所述1帧的播放时间。例如，所述静态图片由透明度0％逐渐变化至透明度100％，其可持续10秒、20秒或更久。进一步地，当视频中出现多个切换帧时，每次所述静态图片由透明度100％变化至透明度0％时，都使所述静态图像沿一方向移动数个像素点的位置，以避免同一位置一直显示同一像素值的像素。

图12示出了根据本发明实施例的页面动画实现装置的示意图。

网页动画实现装置400包括获取模块410、第一判断模块420、第二判断模块430、动画样式获取模块440及显示模块450。

获取模块410用于在一网页上获取用户交互行为。第一判断模块420用于判断所述用户交互行为是否命中HTML文件中的JavaScript脚本编写的预定用户交互行为。若所述用户交互行为命中HTML文件中的JavaScript脚本编写的预定用户交互行为，则第二判断模块430用于根据所述预定用户交互行为判断所述HTML文件中是否存在与所述预定用户交互行为对应的自定义动画样式。若所述HTML文件中存在与所述预定用户交互行为对应的自定义动画样式，则动画样式获取模块440用于获取与所述自定义动画样式对应的CSS动画配置数据。显示模块450用于根据所述CSS动画配置数据显示动画效果。

图12仅仅是示意性地示出各个模块，可以理解，这些模块可以虚拟的软件模块或实际的硬件模块，这些模块的合并、拆分及其余模块的增加都在本发明的保护范围之内。

在本公开的示例性实施例中，还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被例如处理器执行时可以实现上述任意一个实施例中所述电子处方流转处理方法的步骤。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述电子处方流转处理方法部分中描述的根据本发明各种示例性实施方式的步骤。

参考图13所示，描述了根据本发明的实施方式的用于实现上述方法的程序产品800，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

所述计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在租户计算设备上执行、部分地在租户设备上执行、作为一个独立的软件包执行、部分在租户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到租户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

在本公开的示例性实施例中，还提供一种电子设备，该电子设备可以包括处理器，以及用于存储所述处理器的可执行指令的存储器。其中，所述处理器配置为经由执行所述可执行指令来执行上述任意一个实施例中所述电子处方流转处理方法的步骤。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为***、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“***”。

下面参照图14来描述根据本发明的这种实施方式的电子设备600。图14显示的电子设备600仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图14所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：至少一个处理单元610、至少一个存储单元620、连接不同***组件(包括存储单元620和处理单元610)的总线630、显示单元640等。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元610执行，使得所述处理单元610执行本说明书上述电子处方流转处理方法部分中描述的根据本发明各种示例性实施方式的步骤。例如，所述处理单元610可以执行如图1中所示的步骤。

所述存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)6201和/或高速缓存存储单元6202，还可以进一步包括只读存储单元(ROM)6203。

所述存储单元620还可以包括具有一组(至少一个)程序模块6205的程序/实用工具6204，这样的程序模块6205包括但不限于：操作***、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、***总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备600也可以与一个或多个外部设备700(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得租户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口650进行。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器660可以通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID***、磁带驱动器以及数据备份存储***等。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、或者网络设备等)执行根据本公开实施方式的上述电子处方流转处理方法。

相比现有技术，本发明实现根据用户交互行为的网页动画，且网页动画小巧轻便，使得网页打开速度快兼容性强且扩展性广泛。此外，本发明还通过硬件显示屏的识别，当自发光显示屏的硬件显示网页时，若静态图片在同一位置保持显示时间过久，即将该静态图片作为动画主体进行动画显示，由此，改善自发光显示屏出现图像残留，进而影响显示效果的问题。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由所附的权利要求指出。

Claims (13)

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

获取在一网页上的用户交互行为；

判断所述用户交互行为是否命中HTML文件中的JavaScript脚本编写的预定用户交互行为；

若所述用户交互行为命中HTML文件中的JavaScript脚本编写的预定用户交互行为，则根据所述预定用户交互行为判断所述HTML文件中是否存在与所述预定用户交互行为对应的自定义动画样式；

若所述HTML文件中存在与所述预定用户交互行为对应的自定义动画样式，则获取与所述自定义动画样式对应的CSS动画配置数据；

根据所述CSS动画配置数据显示动画效果。

2.如权利要求1所述的网页动画实现方法，其特征在于，

所述获取在一网页上的用户交互行为的步骤之前还包括：

获取显示所述网页的硬件设备的标识；

根据所述网页的硬件设备的标识识别该硬件设备的显示屏是否为自发光型显示屏；

若该硬件设备的显示屏为自发光型显示屏，则根据所述HTML文件获取所述网页上显示的静态图像，所述预定交互行为使得所述静态图像在所述自发光型显示屏上的同一位置保持时间超过第一时间阈值，且与所述预定用户交互行为对应的所述自定义动画样式的动画主体为所述静态图像。

3.根据权利要求2所述的网页动画实现方法，其特征在于，还包括：

获取在当前网页上打开目标网页的用户交互行为；

根据所述HTML文件获取所述目标网页上显示的静态图像；

确定所述目标网页上显示的静态图像是否命中当前网页上显示的静态图像；

若所述目标网页上显示的静态图像命中当前网页上显示的静态图像，则获取该静态图像在当前网页及目标网页上的坐标位置；

若该静态图像在当前网页及目标网页上的坐标位置相同，则在当前网页上打开目标网页的用户交互行为命中所述预定用户交互行为，且与所述预定用户交互行为对应的所述自定义动画样式的动画主体为该静态图像。

4.根据权利要求2所述的网页动画实现方法，其特征在于，还包括：

获取更新当前网页的用户交互行为；

根据所述HTML文件获取更新后当前网页上显示的静态图像；

确定更新后当前网页上显示的静态图像是否命中更新前当前网页上显示的静态图像；

若更新后当前网页上显示的静态图像命中更新前当前网页上显示的静态图像，则获取该静态图像在更新后当前网页上及更新前当前网页上的坐标位置；

若该静态图像在更新后当前网页及更新前当前网页上的坐标位置相同，则更新当前网页的用户交互行为命中所述预定用户交互行为，且与所述预定用户交互行为对应的所述自定义动画样式的动画主体为该静态图像。

5.根据权利要求2所述的网页动画实现方法，其特征在于，所述网页包括如下任一项或多项区域：

次动态区域，所述次动态区域显示在静态显示及动态显示之间切换的静态图像，所述次动态区域具有第一状态和第二状态，当所述静态图像静态显示在所述次动态区域中时，所述静态区域处于第一状态，当所述静态图像作为所述动画主体动态显示在所述次动态区域中时，所述次动态区域处于第二状态，所述次动态区域在所述第二状态时，随所述动画主体的移动而移动；

动态区域，所述动态区域显示非静态的网页内容。

6.根据权利要求5所述的网页动画实现方法，其特征在于，所述根据所述CSS动画配置数据显示动画效果的步骤之前还包括：

当网页更新时，仅对处于第二状态的次动态区域及动态区域进行渲染。

7.根据权利要求2至6任一项所述的网页动画实现方法，其特征在于，所述自定义动态样式包括如下形式中一种或多种：

逐渐增加所述静态图像的透明度；

旋转所述静态图像；

放大/缩小所述静态图像；

使所述静态图像抖动。

8.根据权利要求2至6任一项所述的网页动画实现方法，其特征在于，

当识别所述网页中距离所述静态图片边界预定数量的像素点都为黑色，则触发所述静态图片由透明度100％变化至透明度0％；

当识别所述网页中距离所述静态图片边界预定数量的像素点中存在多个不为黑色，则触发所述静态图片由透明度0％变化至透明度100％。

9.根据权利要求8所述的网页动画实现方法，其特征在于，所述静态图片由透明度100％变化至透明度0％的变化时间为1帧的播放时间；

所述静态图片由透明度0％变化至透明度100％的变化时间长于所述1帧的播放时间。

10.根据权利要求8所述的网页动画实现方法，其特征在于，每次所述静态图片由透明度100％变化至透明度0％时，使所述静态图像沿一方向移动数个像素点的位置。

11.一种网页动画实现装置，其特征在于，包括：

获取模块，用于在一网页上获取用户交互行为；

第一判断模块，用于判断所述用户交互行为是否命中HTML文件中的JavaScript脚本编写的预定用户交互行为；

第二判断模块，若所述用户交互行为命中HTML文件中的JavaScript脚本编写的预定用户交互行为，则用于根据所述预定用户交互行为判断所述HTML文件中是否存在与所述预定用户交互行为对应的自定义动画样式；

动画样式获取模块，若所述HTML文件中存在与所述预定用户交互行为对应的自定义动画样式，则用于获取与所述自定义动画样式对应的CSS动画配置数据；

显示模块，用于根据所述CSS动画配置数据显示动画效果。

12.一种电子设备，其特征在于，所述电子设备包括：

处理器；

存储介质，其上存储有计算机程序，所述计算机程序被所述处理器运行时执行如权利要求1至10任一项所述的步骤。

13.一种存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如权利要求1至10任一项所述的步骤。