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

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

【技术实现步骤摘要】
基于网页的动画显示方法、装置、设备及存储介质
本专利技术涉及人机交互技术，尤其涉及一种基于网页的动画显示方法、装置、设备及存储介质。
技术介绍
随着人机交互技术的不断发展，人们对web界面的要求越来越高，不仅希望页面能够动起来，而且甚至能和人们进行互动。目前，传统技术中主要采用在网页中使用固定的动画显示样式，且在不同界面甚至同一界面上，会重复使用一些常见的动画效果，例如变大、缩小、出现、消失、左移、右移等。因此，现有技术不仅无法实现用户与web界面进行互动，用户体验差，还会导致开发者在做web界面开发时代码量增大。
技术实现思路
本专利技术实施例提供一种基于网页的动画显示方法、装置、设备及存储介质，以实现用户与web界面之间的互动，提高用户体验，并减少开发代码量。第一方面，本专利技术实施例提供了一种基于网页的动画显示方法，包括：根据检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数；根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，所述目标网页匹配有预设的封装动画集，所述封装动画集中的不同封装动画对应所述目标对象不同的显示方式；按照所述目标动画显示样式在所述目标网页上对所述目标对象进行动画显示。进一步的，所述根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，包括：根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式。进一步的，所述动画操作信息包括文本输入信息；相应地，所述获取与所述动画操作信息匹配的动画显示参数，包括：根据在目标网页中检测到的针对目标对象输入的文本输入信息，生成文本控制显示参数指令；接收所述文本控制显示参数指令匹配得到的动画显示参数。进一步的，所述动画显示参数包括显示时间、显示动作以及显示间隔；相应地，所述根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式，包括：在所述显示时间范围内，按照所述显示间隔，调用与所述显示动作匹配的至少两个封装动画，生成目标动画显示样式。进一步的，所述动画操作信息包括移动手势信息；相应地，所述根据检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数，包括：若通过视频采集设备检测到针对选中的目标网页中的目标对象的操作手势，则采集所述操作手势对应的移动手势信息；根据所述移动手势信息生成手势控制显示参数指令；接收所述手势控制显示参数指令匹配得到的动画显示参数。进一步的，所述动画显示参数包括显示动作；相应地，所述根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式，包括：在预设显示时间范围内，按照预设显示间隔，调用与所述显示动作匹配的至少两个封装动画，生成目标动画显示样式。进一步的，所述动画操作信息包括滑屏轨迹信息；所述动画显示参数包括滑屏轨迹坐标；相应地，所述根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，包括：根据所述滑屏轨迹坐标的位置走向，依次调用与所述位置走向对应的至少一个封装动画，生成目标动画显示样式。进一步的，所述封装动画的调用方式包括：在与所述目标网页关联的CSS文件或JS文件中引用所述封装动画对应的名称；其中，在与所述目标网页关联的React项目文件中，预先引入所述封装动画集。进一步的，所述封装动画对应的显示方式包括：颜色的显示方式、缩放的显示方式、位移的显示方式、旋转的显示方式、出现的显示方式、消失的显示方式以及闪烁的显示方式中的至少一种。第二方面，本专利技术实施例还提供了一种基于网页的动画显示装置，该装置包括：参数获取模块，用于根据在检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数；样式生成模块，用于根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，所述目标网页匹配有预设的封装动画集，所述封装动画集中的不同封装动画对应所述目标对象不同的显示方式；动画显示模块，用于按照所述目标动画显示样式在所述目标网页上对所述目标对象进行动画显示。进一步的，所述样式生成模块包括：生成子模块，用于根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式。进一步的，所述动画操作信息包括文本输入信息；相应地，所述参数获取模块具体用于：根据在目标网页中检测到的针对目标对象输入的文本输入信息，生成文本控制显示参数指令；接收所述文本控制显示参数指令匹配得到的动画显示参数。进一步的，所述动画显示参数包括显示时间、显示动作以及显示间隔；相应地，所述生成子模块具体用于：在所述显示时间范围内，按照所述显示间隔，调用与所述显示动作匹配的至少两个封装动画，生成目标动画显示样式。进一步的，所述动画操作信息包括移动手势信息；相应地，所述参数获取模块具体用于：若通过视频采集设备检测到针对选中的目标网页中的目标对象的操作手势，则采集所述操作手势对应的移动手势信息；根据所述移动手势信息生成手势控制显示参数指令；接收所述手势控制显示参数指令匹配得到的动画显示参数。进一步的，所述动画显示参数包括显示动作；相应地，所述生成子模块具体用于：在预设显示时间范围内，按照预设显示间隔，调用与所述显示动作匹配的至少两个封装动画，生成目标动画显示样式。进一步的，所述动画操作信息包括滑屏轨迹信息；所述动画显示参数包括滑屏轨迹坐标；相应地，所述样式生成模块具体用于：根据所述滑屏轨迹坐标的位置走向，依次调用与所述位置走向对应的至少一个封装动画，生成目标动画显示样式。进一步的，所述封装动画的调用方式包括：在与所述目标网页关联的CSS文件或JS文件中引用所述封装动画对应的名称；其中，在与所述目标网页关联的React项目文件中，预先引入所述封装动画集。第三方面，本专利技术实施例还提供了一种计算机设备，该设备包括：一个或多个处理器；存储器，用于存储一个或多个程序；当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本专利技术实施例中任一所述的基于网页的动画显示方法。第四方面，本专利技术实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本专利技术实施例中任一所述的基于网页的动画显示方法。本专利技术实施例通过获取与检测到的针对目标网页中的目标对象的动画操作信息相匹配的动画显示参数，并根据与该参数匹配的至少一个封装动画生成目标动画显示样式，进而按照该目标动画显示样式对目标网页上的目标对象进行动画显示，利用了封装动画易于构建、调用和重新组合的优点，解决了现有技术中使用固定的网页动画显示而导致的用户体验差，且重复的动画效果导致的增加开发代码量的问题，实现了用户与web界面之间的互动，提高用户体验，并减少开发代码量的效果。附图说明图1是本专利技术实施例一提供的一种基于网页的动画显示方法的流程示意图；图2是本专利技术实施例二提供的一种基于网页的动画显示方法的流程示意图；图3是本专利技术实施例三提供的一种基于网页的动画显示装置的结构示意图；图4是本专利技术实施例四提供的一种计算机设备的结构示意图。具体实施方式下面结本文档来自技高网...

【技术保护点】
一种基于网页的动画显示方法，其特征在于，包括：根据检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数；根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，所述目标网页匹配有预设的封装动画集，所述封装动画集中的不同封装动画对应所述目标对象不同的显示方式；按照所述目标动画显示样式在所述目标网页上对所述目标对象进行动画显示。

【技术特征摘要】
1.一种基于网页的动画显示方法，其特征在于，包括：根据检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数；根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，所述目标网页匹配有预设的封装动画集，所述封装动画集中的不同封装动画对应所述目标对象不同的显示方式；按照所述目标动画显示样式在所述目标网页上对所述目标对象进行动画显示。2.根据权利要求1所述的方法，其特征在于，所述根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，包括：根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式。3.根据权利要求2所述的方法，其特征在于，所述动画操作信息包括文本输入信息；相应地，所述根据检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数，包括：根据在目标网页中检测到的针对目标对象输入的文本输入信息，生成文本控制显示参数指令；接收所述文本控制显示参数指令匹配得到的动画显示参数。4.根据权利要求3所述的方法，其特征在于，所述动画显示参数包括显示时间、显示动作以及显示间隔；相应地，所述根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式，包括：在所述显示时间范围内，按照所述显示间隔，调用与所述显示动作匹配的至少两个封装动画，生成目标动画显示样式。5.根据权利要求2所述的方法，其特征在于，所述动画操作信息包括移动手势信息；相应地，所述根据检测到的针对目标网页中的目标对象的动画操作信息，获取与所述动画操作信息匹配的动画显示参数，包括：若通过视频采集设备检测到针对选中的目标网页中的目标对象的操作手势，则采集所述操作手势对应的移动手势信息；根据所述移动手势信息生成手势控制显示参数指令；接收所述手势控制显示参数指令匹配得到的动画显示参数。6.根据权利要求5所述的方法，其特征在于，所述动画显示参数包括显示动作；相应地，所述根据与所述动画显示参数匹配的至少两个封装动画以及与所述动画显示参数匹配的封装动画组合方式，生成目标动画显示样式，包括：在预设显示时间范围内，按照预设显示间隔，调用与所述显示动作匹配的至少两个封装动画，生成目标动画显示样式。7.根据权利要求1所述的方法，其特征在于，所述动画操作信息包括滑屏轨迹信息；所述动画显示参数包括滑屏轨迹坐标；相应地，所述根据与所述动画显示参数匹配的至少一个封装动画，生成目标动画显示样式，包括：根据所述滑屏轨迹坐标的位置走向，依次调用与所述位置走向对应的至少一个封装动画，生成目标动画显示样式。8.根据权利要求4、6或7所述的方法，其特征在于，所述封装动画的调用方式包括：在与所述目标网页关联的CSS文件或JS文件中引用所述封装动画对应的名称；其中，在与所述目标网页关联的React项目文件中，预先引入所述封装动画集。9.根据权利要求1-7中任一项所述的方法，其特征在于，所述封装动画对应的显示方式包括：颜色的显示方式、缩放的显示...

【专利技术属性】
技术研发人员：侯丽丽，刘鸣，
申请(专利权)人：上海器魂智能科技有限公司，
类型：发明
国别省市：上海,31