CN108090176A - 基于网页的动画显示方法、装置、设备及存储介质 - Google Patents

Abstract

本发明实施例公开了一种基于网页的动画显示方法、装置、设备及存储介质。所述方法包括：根据检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数；根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，所述目标网页匹配有预设的封装动画集，所述封装动画集中的不同封装动画对应所述目标对象不同的显示方式；按照所述目标动画显示样式在所述目标网页上对所述目标对象进行动画显示。通过本发明的技术方案，能够实现用户与web界面之间的互动，提高用户体验，并减少开发代码量。

Description

基于网页的动画显示方法、装置、设备及存储介质

技术领域

本发明涉及人机交互技术，尤其涉及一种基于网页的动画显示方法、装置、设备及存储介质。

背景技术

随着人机交互技术的不断发展，人们对web界面的要求越来越高，不仅希望页面能够动起来，而且甚至能和人们进行互动。

目前，传统技术中主要采用在网页中使用固定的动画显示样式，且在不同界面甚至同一界面上，会重复使用一些常见的动画效果，例如变大、缩小、出现、消失、左移、右移等。因此，现有技术不仅无法实现用户与web界面进行互动，用户体验差，还会导致开发者在做web界面开发时代码量增大。

发明内容

本发明实施例提供一种基于网页的动画显示方法、装置、设备及存储介质，以实现用户与web界面之间的互动，提高用户体验，并减少开发代码量。

第一方面，本发明实施例提供了一种基于网页的动画显示方法，包括：

根据检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数；

根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，所述目标网页匹配有预设的封装动画集，所述封装动画集中的不同封装动画对应所述目标对象不同的显示方式；

按照所述目标动画显示样式在所述目标网页上对所述目标对象进行动画显示。

进一步的，所述根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，包括：

根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式。

进一步的，所述动画操作信息包括文本输入信息；

相应地，所述获取与所述动画操作信息匹配的动画显示参数，包括：

根据在目标网页中检测到的针对目标对象输入的文本输入信息，生成文本控制显示参数指令；

接收所述文本控制显示参数指令匹配得到的动画显示参数。

进一步的，所述动画显示参数包括显示时间、显示动作以及显示间隔；

相应地，所述根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式，包括：

在所述显示时间范围内，按照所述显示间隔，调用与所述显示动作匹配的至少两个封装动画，生成目标动画显示样式。

进一步的，所述动画操作信息包括移动手势信息；

相应地，所述根据检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数，包括：

若通过视频采集设备检测到针对选中的目标网页中的目标对象的操作手势，则采集所述操作手势对应的移动手势信息；

根据所述移动手势信息生成手势控制显示参数指令；

接收所述手势控制显示参数指令匹配得到的动画显示参数。

进一步的，所述动画显示参数包括显示动作；

相应地，所述根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式，包括：

在预设显示时间范围内，按照预设显示间隔，调用与所述显示动作匹配的至少两个封装动画，生成目标动画显示样式。

进一步的，所述动画操作信息包括滑屏轨迹信息；所述动画显示参数包括滑屏轨迹坐标；

相应地，所述根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，包括：

根据所述滑屏轨迹坐标的位置走向，依次调用与所述位置走向对应的至少一个封装动画，生成目标动画显示样式。

进一步的，所述封装动画的调用方式包括：在与所述目标网页关联的CSS文件或JS文件中引用所述封装动画对应的名称；

其中，在与所述目标网页关联的React项目文件中，预先引入所述封装动画集。

进一步的，所述封装动画对应的显示方式包括：颜色的显示方式、缩放的显示方式、位移的显示方式、旋转的显示方式、出现的显示方式、消失的显示方式以及闪烁的显示方式中的至少一种。

第二方面，本发明实施例还提供了一种基于网页的动画显示装置，该装置包括：

参数获取模块，用于根据在检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数；

样式生成模块，用于根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，所述目标网页匹配有预设的封装动画集，所述封装动画集中的不同封装动画对应所述目标对象不同的显示方式；

动画显示模块，用于按照所述目标动画显示样式在所述目标网页上对所述目标对象进行动画显示。

进一步的，所述样式生成模块包括：

生成子模块，用于根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式。

进一步的，所述动画操作信息包括文本输入信息；

相应地，所述参数获取模块具体用于：

根据在目标网页中检测到的针对目标对象输入的文本输入信息，生成文本控制显示参数指令；

接收所述文本控制显示参数指令匹配得到的动画显示参数。

进一步的，所述动画显示参数包括显示时间、显示动作以及显示间隔；

相应地，所述生成子模块具体用于：

在所述显示时间范围内，按照所述显示间隔，调用与所述显示动作匹配的至少两个封装动画，生成目标动画显示样式。

进一步的，所述动画操作信息包括移动手势信息；

相应地，所述参数获取模块具体用于：

若通过视频采集设备检测到针对选中的目标网页中的目标对象的操作手势，则采集所述操作手势对应的移动手势信息；

根据所述移动手势信息生成手势控制显示参数指令；

接收所述手势控制显示参数指令匹配得到的动画显示参数。

进一步的，所述动画显示参数包括显示动作；

相应地，所述生成子模块具体用于：

在预设显示时间范围内，按照预设显示间隔，调用与所述显示动作匹配的至少两个封装动画，生成目标动画显示样式。

进一步的，所述动画操作信息包括滑屏轨迹信息；所述动画显示参数包括滑屏轨迹坐标；

相应地，所述样式生成模块具体用于：

根据所述滑屏轨迹坐标的位置走向，依次调用与所述位置走向对应的至少一个封装动画，生成目标动画显示样式。

进一步的，所述封装动画的调用方式包括：在与所述目标网页关联的CSS文件或JS文件中引用所述封装动画对应的名称；

其中，在与所述目标网页关联的React项目文件中，预先引入所述封装动画集。

第三方面，本发明实施例还提供了一种计算机设备，该设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本发明实施例中任一所述的基于网页的动画显示方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明实施例中任一所述的基于网页的动画显示方法。

本发明实施例通过获取与检测到的针对目标网页中的目标对象的动画操作信息相匹配的动画显示参数，并根据与该参数匹配的至少一个封装动画生成目标动画显示样式，进而按照该目标动画显示样式对目标网页上的目标对象进行动画显示，利用了封装动画易于构建、调用和重新组合的优点，解决了现有技术中使用固定的网页动画显示而导致的用户体验差，且重复的动画效果导致的增加开发代码量的问题，实现了用户与web界面之间的互动，提高用户体验，并减少开发代码量的效果。

附图说明

图1是本发明实施例一提供的一种基于网页的动画显示方法的流程示意图；

图2是本发明实施例二提供的一种基于网页的动画显示方法的流程示意图；

图3是本发明实施例三提供的一种基于网页的动画显示装置的结构示意图；

图4是本发明实施例四提供的一种计算机设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1为本发明实施例一提供的一种基于网页的动画显示方法的流程示意图。该方法可适用于制作并显示网页动画的情况，该方法可以由基于网页的动画显示装置来执行，该装置可由硬件和/或软件组成，并一般可集成在计算机以及所有包含网页动画显示功能的终端中。具体包括如下：

S110、根据检测到的针对目标网页中的目标对象的动画操作信息，获取与动画操作信息匹配的动画显示参数。

可选的，目标对象可以是目标网页中需要进行动画显示的显示主体，目标网页中的目标对象可以是默认设置的，也可以是根据用户的选择实时设置的，在此不作限定。动画操作信息可以是针对目标网页中的目标对象进行的动画显示操作所生成的信息，其中，该动画显示操作包括但不限于滑屏操作、文本输入操作、手势移动操作等。

示例性的，可在服务器或终端上预先设置一个匹配数据表，记录动画操作信息与动画显示参数之间的匹配关系，当需要获取动画显示参数时，可通过查询该匹配数据表获取与该动画操作信息相匹配的动画显示参数。可选的，动画操作信息与动画显示参数之间可以是一一对应的关系，也可以是一对多的关系。获取动画显示参数的目的在于，将动画操作信息转换为对动画显示的控制参数，以根据该动画显示参数进行相应的动画显示。

S120、根据与动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，目标网页匹配有预设的封装动画集，封装动画集中的不同封装动画对应目标对象不同的显示方式。

其中，动画显示参数中可包含与该参数相匹配的至少一个封装动画的信息，可选的，目标动画显示样式可由至少一个封装动画按照特定顺序组合而成，具体的，生成不同动画显示样式所使用的封装动画可不相同，且每种封装动画可对应于目标对象不同的显示方式，因而，不同动画显示样式的显示方式可不相同，具体显示方式可根据组成的封装动画确定。

可选的，目标网页预先匹配有预设的封装动画集，该封装动画集可预先配置在远端服务器上，也可预先配置在本地计算机上，在此不作限定。封装动画集中可包含多个对应于不同显示方式的不同的封装动画，其中，封装动画之间可相互独立，也可相互嵌套调用，若封装动画集与实际的动画显示需求有区别，还可以对封装动画集中的封装动画直接进行修改，或者在封装动画集中新建一个封装动画，以便在需要时直接进行调用。示例性的，封装动画可通过animation.css文件建立并封装在一个动画集里，开发者只需要更改该封装动画集里的封装动画中的代码，即可完成对使用该封装动画的动画显示方式进行更改，而无需对每个网页中的动画显示代码都分别进行更改，从而减少了动画开发代码量。

通过获取的动画显示参数匹配出的至少一个封装动画生成目标动画显示样式的好处在于，只要从用户进行的动画操作中提取对应的动画显示参数，即可自动生成相应的目标动画显示样式，从而实现了用户与web界面之间的互动，提高了用户体验。

优选的，动画操作信息包括滑屏轨迹信息；动画显示参数包括滑屏轨迹坐标；

相应地，根据与动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，包括：

根据滑屏轨迹坐标的位置走向，依次调用与位置走向对应的至少一个封装动画，生成目标动画显示样式。其中，滑屏轨迹可以是手指对于触屏的触控轨迹，也可以是鼠标对于屏幕的点击轨迹。

示例性的，对于具有触摸屏的终端，用户针对目标网页中的目标对象进行的动画操作可以是滑屏操作。根据滑屏操作产生的动画操作信息包括滑屏轨迹信息，从检测到的滑屏轨迹信息中获取的动画显示参数包括对应的滑屏轨迹坐标，也即滑屏路径中各采样点对应的位置坐标。

当获取到一系列滑屏轨迹坐标后，可根据这一系列滑屏轨迹坐标的位置走向，依次调用与该位置走向对应的至少一个封装动画，例如，当轨迹坐标中的下一坐标相对于当前坐标而言是向左运动的，则调用位移封装包，控制目标对象在目标网页中向左移动；当轨迹坐标中的下一坐标相对于当前坐标而言是向右上方运动的，则调用位移封装包，控制目标对象在目标网页中向右和向上移动，以此类推。

优选的，封装动画对应的显示方式包括：颜色的显示方式、缩放的显示方式、位移的显示方式、旋转的显示方式、出现的显示方式、消失的显示方式以及闪烁的显示方式中的至少一种。

可选的，不同的显示方式可通过调用不同的封装动画显示出来，示例性的，颜色的显示方式可包括变淡、加深、更改色彩等；缩放的显示方式可包括缩小、放大(放大又可包括展宽、伸长、整体放大等)等；位移的显示方式可包括向上、向下、向左、向右等；旋转的显示方式可包括旋转45°、90°、180°、顺时针旋转、逆时针旋转等；出现的显示方式可包括带缩放的出现、带旋转的出现、带位移的出现、带颜色的出现等；消失的显示方式可包括带缩放的消失、带旋转的消失、带位移的消失、带颜色的消失等；闪烁的显示方式可包括七彩颜色的变化闪烁、若有若无的变化闪烁等。以上只是对各种显示方式的举例而不是限定，当然，每种显示方式还可包括其他的显示效果，也可删除其中的某些效果，在此不再赘述。具体的，可通过调用动画封装中不同的参数以显现出不同的显示效果。

S130、按照目标动画显示样式在目标网页上对目标对象进行动画显示。

可选的，当目标动画显示样式生成后，可在后台自动生成相应的动画代码，示例性的，可利用React开发网页界面，在目标动画显示样式生成时，也即网页代码发生改变时，React将会自动管理用户接口界面更新数据发生变化部分，并进行相应的显示，因此，当动画显示样式发生变化时或添加目标动画显示样式时，可以在目标网页上对目标对象进行相应的动画显示。

本实施例的技术方案，通过获取与检测到的针对目标网页中的目标对象的动画操作信息相匹配的动画显示参数，并根据与该参数匹配的至少一个封装动画生成目标动画显示样式，进而按照该目标动画显示样式对目标网页上的目标对象进行动画显示，利用了封装动画易于构建、调用和重新组合的优点，解决了现有技术中使用固定的网页动画显示而导致的用户体验差，且重复的动画效果导致的增加开发代码量的问题，实现了用户与web界面之间的互动，提高用户体验，并减少开发代码量的效果。

实施例二

图2为本发明实施例二提供的一种基于网页的动画显示方法的流程示意图。本实施例以上述实施例为基础进行优化，提供了优选的基于网页的动画显示方法，具体是，将根据与动画显示参数匹配的至少一个封装动画，生成目标动画显示样式进一步优化为，包括：根据与动画显示参数匹配的至少两个封装动画以及与动画显示参数匹配的封装动画组合方式，生成目标动画显示样式。具体包括如下：

S210、根据检测到的针对目标网页中的目标对象的动画操作信息，获取与动画操作信息匹配的动画显示参数。

S220、根据与动画显示参数匹配的至少两个封装动画以及与动画显示参数匹配的封装动画组合方式，生成目标动画显示样式，目标网页匹配有预设的封装动画集，封装动画集中的不同封装动画对应目标对象不同的显示方式。

可选的，动画显示参数中还可包含与该参数匹配的封装动画之间的组合信息，该组合信息对应的封装动画组合方式可表征多个封装动画之间的显示关系，例如两个封装动画之间的先后顺序、显示间隔等。示例性的，若获取的动画显示参数匹配有相应的封装动画组合方式，则可根据该动画显示参数匹配的至少两个封装动画以及该封装动画组合方式，生成目标动画显示样式，具体的，可将匹配的至少两个封装动画按照该封装动画组合方式进行组合，以生成对应的目标动画显示样式。

根据获取的动画显示参数匹配的至少两个封装动画以及封装动画之间的组合方式，生成目标动画显示样式的好处在于，可以根据用户的选择对网页中的动画效果进行任意搭配，更好地实现了用户与web界面之间的互动，提升了用户体验。

在一个实际例子中，优选的，动画操作信息包括文本输入信息；

相应地，根据检测到的针对目标网页中的目标对象的动画操作信息，获取与动画操作信息匹配的动画显示参数，包括：

根据在目标网页中检测到的针对目标对象输入的文本输入信息，生成文本控制显示参数指令；

接收文本控制显示参数指令匹配得到的动画显示参数。

示例性的，当用户针对目标网页中的目标对象的动画操作为文本输入操作时，则可检测到根据该文本输入操作产生的文本输入信息。根据该文本输入信息可生成相应的文本控制显示参数指令，例如，输入的文本信息为“2s内旋转出现，间隔1s，缩小消失”，则可根据该文本输入信息生成携带有该文本信息内容以及操作类别(即文本类)文本控制显示参数指令。可选的，若对文本内容的识别过程是在远端服务器中执行的，则将该文本控制显示参数指令发送至远端服务器进行文本识别，并根据识别结果匹配相应的动画显示参数，进而发送给目标网页所在的显示终端。

优选的，动画显示参数包括显示时间、显示动作以及显示间隔；

相应地，根据与动画显示参数匹配的至少两个封装动画以及与动画显示参数匹配的封装动画组合方式，生成目标动画显示样式，包括：

在显示时间范围内，按照显示间隔，调用与显示动作匹配的至少两个封装动画，生成目标动画显示样式。

示例性的，当动画操作信息为文本输入信息时，对应获取的动画显示参数可包括显示时间、显示动作以及显示间隔，如上例所说的“2s内旋转出现，间隔1s，缩小消失”对应的文本控制显示参数指令匹配得到的动画显示参数，可以是显示时间为2s、显示动作为先旋转出现再缩小消失，显示间隔为1s。可选的，若文本识别结果中不包含其中任一参数，则可用默认的参数进行代替。例如，目标网页中的目标对象为景物图片，若接收到的动画显示参数中显示时间为3s，显示动作为带旋转的出现和带缩放的消失，显示间隔为1s，则目标网页所在的终端可将该景物图片在3s内，先调用具有带旋转的出现的显示效果的“出现的动画封装包”，间隔1s后，再调用具有带缩小的消失的显示效果的“消失的动画封装包”，并在后台生成相应的动画显示代码，形成目标动画显示样式。

在另一个实际例子中，优选的，动画操作信息包括移动手势信息；

相应地，根据检测到的针对目标网页中的目标对象的动画操作信息，获取与动画操作信息匹配的动画显示参数，包括：

若通过视频采集设备检测到针对选中的目标网页中的目标对象的操作手势，则采集操作手势对应的移动手势信息；

根据移动手势信息生成手势控制显示参数指令；

接收手势控制显示参数指令匹配得到的动画显示参数。

示例性的，当用户针对目标网页中的目标对象的动画操作为手势移动操作时，则可检测到根据该手势移动操作产生的移动手势信息。可选的，可通过终端上的摄像头采集用户手部位置的视频画面或连拍图像来获取用户的移动手势信息。具体的，根据该移动手势信息可生成相应的手势控制显示参数指令，例如，用户的手势操作为五指张开再聚拢的操作，检测到的移动手势信息可对应为五指张开再聚拢过程的图像帧组，则可根据该图像帧组生成携带有该图像帧组以及操作类别(即手势类)的手势控制显示参数指令。可选的，若对图像帧组内容的识别过程是在远端服务器中执行的，则将该手势控制显示参数指令发送至远端服务器进行图像识别，并根据识别结果匹配相应的动画显示参数，进而发送给目标网页所在的显示终端，如上例所说的五指张开再聚拢过程对应的手势控制显示参数指令匹配得到的动画显示参数，可以是放大出现和缩小消失。

优选的，动画显示参数包括显示动作；

相应地，根据与动画显示参数匹配的至少两个封装动画以及与动画显示参数匹配的封装动画组合方式，生成目标动画显示样式，包括：

在预设显示时间范围内，按照预设显示间隔，调用与显示动作匹配的至少两个封装动画，生成目标动画显示样式。

示例性的，当动画操作信息为移动手势信息时，对应获取的动画显示参数可包括显示动作。例如，目标网页中的目标对象为人物图片，若接收到的动画显示参数中显示动作为放大出现和缩小消失，则目标网页所在的终端可将该人物图片先调用具有带放大出现的显示效果的“出现的动画封装包”，间隔默认时间(即预设显示间隔)后，再调用具有带缩小消失的显示效果的“消失的动画封装包”，并在后台生成相应的动画显示代码，形成目标动画显示样式。

S230、按照目标动画显示样式在目标网页上对目标对象进行动画显示。

本实施例的技术方案，通过根据检测到的针对目标网页中的目标对象的动画操作信息，获取与动画操作信息匹配的动画显示参数，并根据与该动画显示参数匹配的至少两个封装动画以及动画显示参数匹配的封装动画组合方式，生成目标动画显示样式，按照该样式在目标网页上对目标对象进行动画显示。通过根据用户的选择对封装动画之间的任意搭配，突出了web界面的多样化和个性化动画显示，更好地实现了用户与web界面之间的互动，提升了用户体验，同时，封装动画的使用使得更换动画显示时，仅需用户做出其他操作即可，无需开发者重新编写代码，从而也减少了开发代码量。

在以上各实施例的基础上，优选的，封装动画的调用方式包括：在与目标网页关联的CSS文件或JS文件中引用封装动画对应的名称；

其中，在与目标网页关联的React项目文件中，预先引入封装动画集。

可选的，可使用React开发web界面，具体的，可将网页代码编写在CSS文件或JS文件中，对应的，可通过在与目标网页关联的已有(或新建)的CSS文件或JS文件中引用封装动画对应的名称来调用相应的封装动画。示例性的，在调用各封装动画之前，需要将整个封装动画集预先引入到与目标网页关联的React项目文件中，具体的引用方式例如可以是在新建的React文件中，使用import‘./animation’引入animation.css文件，其中，封装动画可通过animation.css文件建立并封装在一个动画集里。

实施例三

图3为本发明实施例三提供的一种基于网页的动画显示装置的结构示意图。参考图3，基于网页的动画显示装置包括：参数获取模块310、样式生成模块320以及动画显示模块330，下面对各模块进行具体说明。

参数获取模块310，用于根据在检测到的针对目标网页中的目标对象的动画操作信息，获取与动画操作信息匹配的动画显示参数；

样式生成模块320，用于根据与动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，目标网页匹配有预设的封装动画集，封装动画集中的不同封装动画对应目标对象不同的显示方式；

动画显示模块330，用于按照目标动画显示样式在目标网页上对目标对象进行动画显示。

本实施例提供的基于网页的动画显示装置，通过获取与检测到的针对目标网页中的目标对象的动画操作信息相匹配的动画显示参数，并根据与该参数匹配的至少一个封装动画生成目标动画显示样式，进而按照该目标动画显示样式对目标网页上的目标对象进行动画显示，利用了封装动画易于构建、调用和重新组合的优点，解决了现有技术中使用固定的网页动画显示而导致的用户体验差，且重复的动画效果导致的增加开发代码量的问题，实现了用户与web界面之间的互动，提高用户体验，并减少开发代码量的效果。

可选的，样式生成模块320包括：

生成子模块，用于根据与动画显示参数匹配的至少两个封装动画以及与动画显示参数匹配的封装动画组合方式，生成目标动画显示样式。

可选的，动画操作信息包括文本输入信息；

相应地，参数获取模块310具体用于：

根据在目标网页中检测到的针对目标对象输入的文本输入信息，生成文本控制显示参数指令；

接收文本控制显示参数指令匹配得到的动画显示参数。

可选的，动画显示参数包括显示时间、显示动作以及显示间隔；

相应地，生成子模块具体用于：

在显示时间范围内，按照显示间隔，调用与显示动作匹配的至少两个封装动画，生成目标动画显示样式。

可选的，动画操作信息包括移动手势信息；

相应地，参数获取模块310具体用于：

若通过视频采集设备检测到针对选中的目标网页中的目标对象的操作手势，则采集操作手势对应的移动手势信息；

根据移动手势信息生成手势控制显示参数指令；

接收手势控制显示参数指令匹配得到的动画显示参数。

可选的，动画显示参数包括显示动作；

相应地，生成子模块具体用于：

在预设显示时间范围内，按照预设显示间隔，调用与显示动作匹配的至少两个封装动画，生成目标动画显示样式。

可选的，动画操作信息包括滑屏轨迹信息；动画显示参数包括滑屏轨迹坐标；

相应地，样式生成模块320具体用于：

根据滑屏轨迹坐标的位置走向，依次调用与位置走向对应的至少一个封装动画，生成目标动画显示样式。

可选的，封装动画的调用方式包括：在与目标网页关联的CSS文件或JS文件中引用封装动画对应的名称；

其中，在与目标网页关联的React项目文件中，预先引入封装动画集。

可选的，封装动画对应的显示方式包括：颜色的显示方式、缩放的显示方式、位移的显示方式、旋转的显示方式、出现的显示方式、消失的显示方式以及闪烁的显示方式中的至少一种。

上述产品可执行本发明任意实施例所提供的方法，具备执行方法相应的功能模块和有益效果。

实施例四

图4为本发明实施例四提供的一种计算机设备的结构示意图，如图4所示，本实施例提供的一种计算机设备，包括：处理器41和存储器42。该计算机设备中的处理器可以是一个或多个，图4中以一个处理器41为例，所述计算机设备中的处理器41和存储器42可以通过总线或其他方式连接，图4中以通过总线连接为例。

本实施例中计算机设备的处理器41中集成了上述实施例提供的基于网页的动画显示装置。此外，该计算机设备中的存储器42作为一种计算机可读存储介质，可用于存储一个或多个程序，所述程序可以是软件程序、计算机可执行程序以及模块，如本发明实施例中基于网页的动画显示方法对应的程序指令/模块(例如，附图3所示的基于网页的动画显示装置中的模块，包括：参数获取模块310、样式生成模块320以及动画显示模块330)。处理器41通过运行存储在存储器42中的软件程序、指令以及模块，从而执行设备的各种功能应用以及数据处理，即实现上述方法实施例中基于网页的动画显示方法。

存储器42可包括存储程序区和存储数据区，其中，存储程序区可存储操作***、至少一个功能所需的应用程序；存储数据区可存储根据设备的使用所创建的数据等。此外，存储器42可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储器42可进一步包括相对于处理器41远程设置的存储器，这些远程存储器可以通过网络连接至设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

并且，当上述计算机设备所包括一个或者多个程序被所述一个或者多个处理器41执行时，程序进行如下操作：

根据检测到的针对目标网页中的目标对象的动画操作信息，获取与动画操作信息匹配的动画显示参数；根据与动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，目标网页匹配有预设的封装动画集，封装动画集中的不同封装动画对应目标对象不同的显示方式；按照目标动画显示样式在目标网页上对目标对象进行动画显示。

实施例五

本发明实施例五还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被基于网页的动画显示装置执行时实现如本发明实施例一提供的基于网页的动画显示方法，该方法包括：根据检测到的针对目标网页中的目标对象的动画操作信息，获取与动画操作信息匹配的动画显示参数；根据与动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，目标网页匹配有预设的封装动画集，封装动画集中的不同封装动画对应目标对象不同的显示方式；按照目标动画显示样式在目标网页上对目标对象进行动画显示。

当然,本发明实施例所提供的一种计算机可读存储介质,其上存储的计算机程序被执行时不限于实现如上所述的方法操作,还可以实现本发明任意实施例所提供的基于网页的动画显示方法中的相关操作。

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

值得注意的是，上述基于网页的动画显示装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (19)

1.一种基于网页的动画显示方法，其特征在于，包括：

根据检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数；

根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，所述目标网页匹配有预设的封装动画集，所述封装动画集中的不同封装动画对应所述目标对象不同的显示方式；

按照所述目标动画显示样式在所述目标网页上对所述目标对象进行动画显示。

2.根据权利要求1所述的方法，其特征在于，所述根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，包括：

根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式。

3.根据权利要求2所述的方法，其特征在于，所述动画操作信息包括文本输入信息；

相应地，所述根据检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数，包括：

根据在目标网页中检测到的针对目标对象输入的文本输入信息，生成文本控制显示参数指令；

接收所述文本控制显示参数指令匹配得到的动画显示参数。

4.根据权利要求3所述的方法，其特征在于，所述动画显示参数包括显示时间、显示动作以及显示间隔；

相应地，所述根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式，包括：

在所述显示时间范围内，按照所述显示间隔，调用与所述显示动作匹配的至少两个封装动画，生成目标动画显示样式。

5.根据权利要求2所述的方法，其特征在于，所述动画操作信息包括移动手势信息；

相应地，所述根据检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数，包括：

若通过视频采集设备检测到针对选中的目标网页中的目标对象的操作手势，则采集所述操作手势对应的移动手势信息；

根据所述移动手势信息生成手势控制显示参数指令；

接收所述手势控制显示参数指令匹配得到的动画显示参数。

6.根据权利要求5所述的方法，其特征在于，所述动画显示参数包括显示动作；

相应地，所述根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式，包括：

在预设显示时间范围内，按照预设显示间隔，调用与所述显示动作匹配的至少两个封装动画，生成目标动画显示样式。

7.根据权利要求1所述的方法，其特征在于，所述动画操作信息包括滑屏轨迹信息；所述动画显示参数包括滑屏轨迹坐标；

相应地，所述根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，包括：

根据所述滑屏轨迹坐标的位置走向，依次调用与所述位置走向对应的至少一个封装动画，生成目标动画显示样式。

8.根据权利要求4、6或7所述的方法，其特征在于，所述封装动画的调用方式包括：在与所述目标网页关联的CSS文件或JS文件中引用所述封装动画对应的名称；

其中，在与所述目标网页关联的React项目文件中，预先引入所述封装动画集。

9.根据权利要求1-7中任一项所述的方法，其特征在于，所述封装动画对应的显示方式包括：颜色的显示方式、缩放的显示方式、位移的显示方式、旋转的显示方式、出现的显示方式、消失的显示方式以及闪烁的显示方式中的至少一种。

10.一种基于网页的动画显示装置，其特征在于，包括：

参数获取模块，用于根据在检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数；

样式生成模块，用于根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，所述目标网页匹配有预设的封装动画集，所述封装动画集中的不同封装动画对应所述目标对象不同的显示方式；

动画显示模块，用于按照所述目标动画显示样式在所述目标网页上对所述目标对象进行动画显示。

11.根据权利要求10所述的装置，其特征在于，所述样式生成模块包括：

生成子模块，用于根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式。

12.根据权利要求11所述的装置，其特征在于，所述动画操作信息包括文本输入信息；

相应地，所述参数获取模块具体用于：

根据在目标网页中检测到的针对目标对象输入的文本输入信息，生成文本控制显示参数指令；

接收所述文本控制显示参数指令匹配得到的动画显示参数。

13.根据权利要求12所述的装置，其特征在于，所述动画显示参数包括显示时间、显示动作以及显示间隔；

相应地，所述生成子模块具体用于：

在所述显示时间范围内，按照所述显示间隔，调用与所述显示动作匹配的至少两个封装动画，生成目标动画显示样式。

14.根据权利要求11所述的装置，其特征在于，所述动画操作信息包括移动手势信息；

相应地，所述参数获取模块具体用于：

若通过视频采集设备检测到针对选中的目标网页中的目标对象的操作手势，则采集所述操作手势对应的移动手势信息；

根据所述移动手势信息生成手势控制显示参数指令；

接收所述手势控制显示参数指令匹配得到的动画显示参数。

15.根据权利要求14所述的装置，其特征在于，所述动画显示参数包括显示动作；

相应地，所述生成子模块具体用于：

在预设显示时间范围内，按照预设显示间隔，调用与所述显示动作匹配的至少两个封装动画，生成目标动画显示样式。

16.根据权利要求10所述的装置，其特征在于，所述动画操作信息包括滑屏轨迹信息；所述动画显示参数包括滑屏轨迹坐标；

相应地，所述样式生成模块具体用于：

根据所述滑屏轨迹坐标的位置走向，依次调用与所述位置走向对应的至少一个封装动画，生成目标动画显示样式。

17.根据权利要求13、15或16所述的方法，其特征在于，所述封装动画的调用方式包括：在与所述目标网页关联的CSS文件或JS文件中引用所述封装动画对应的名称；

其中，在与所述目标网页关联的React项目文件中，预先引入所述封装动画集。

18.一种计算机设备，其特征在于，所述设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-9中任一所述的基于网页的动画显示方法。

19.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-9中任一所述的基于网页的动画显示方法。