CN115270031A - 一种基于页面的视觉特效创建方法、系统、设备及介质 - Google Patents

Abstract

本申请提供了一种基于页面的视觉特效创建方法、系统、设备及介质，属于互联网技术领域。该方法包括：获取用户配置的待创建视觉特效的特效属性值；获取待创建视觉特效对应网页页面的运行环境；根据运行环境确定目标图像识别接口；根据目标图像识别接口对待创建视觉特效的特效属性值进行解析，生成渲染指令；调用目标图像识别接口对渲染指令进行处理，以将待创建视觉特效渲染和绘制在网页页面上。本申请解决了创建视觉特效的过程复杂，视觉特效占用的文件大小较大，开发成本高的问题。

Description

一种基于页面的视觉特效创建方法、系统、设备及介质

技术领域

本申请涉及互联网技术领域，尤其涉及一种基于页面的视觉特效创建方法、系统、设备及介质。

背景技术

目前常见的H5(HTML5)页面营销活动视觉特效的创建方案，可以采用基于动态图片(Graphics Interchange Format，GIF)的实现方案，依赖于UI(界面)设计师对视觉特效进行逐帧设计，如果视觉特效的过程比较复杂，会导致最终的GIF动态图片文件大小较大，不利于在手机上下载展示。

也可以采用基于CSS(Cascading Style Sheet)动画和JavaScript DOM动画的实现方案，但只能实现比较简单和单一的视觉特效，比如针对坐标位置和自身大小的旋转、位移和缩放，以及颜色的变化。

还可以采用基于图像识别接口的渲染，但开发成本较高，在使用不同图像识别接口的设备上需要开发不同的代码，针对同一视觉特效，需要有多份代码开发。

发明内容

本申请实施例的主要目的在于提出一种基于页面的视觉特效创建方法、系统、设备及介质，解决了创建视觉特效的过程复杂，视觉特效占用的文件大小较大，开发成本高的问题。

为实现上述目的，本申请实施例的第一方面提出了一种基于页面的视觉特效创建方法，所述方法包括：

获取用户配置的待创建视觉特效的特效属性值；

获取所述待创建视觉特效对应网页页面的运行环境；

根据所述运行环境确定目标图像识别接口；

根据所述目标图像识别接口对所述待创建视觉特效的特效属性值进行解析，生成渲染指令；

调用所述目标图像识别接口对所述渲染指令进行处理，以将所述待创建视觉特效渲染和绘制在所述网页页面上。

在一些实施例中，所述获取用户配置的待创建视觉特效的特效属性值，包括以下之一：

根据用户在视觉特效属性配置页面中对新建的视觉特效的特效属性值的设置操作，得到用户配置的待创建视觉特效的特效属性值；

根据用户在视觉特效属性配置页面中对已保存的视觉特效的特效属性值的修改操作，得到用户配置的待创建视觉特效的特效属性值。

在一些实施例中，在获取用户配置的待创建视觉特效的特效属性值之后，还包括：

响应于所述用户的保存指令，保存所述待创建视觉特效的特效属性值。

在一些实施例中，所述特效属性值包括显示属性值、动作属性值、时间属性值，所述显示属性值表征颜色变化，所述动作属性值表征动态变化方式，所述时间属性值表征动态变化时长。

在一些实施例中，所述待创建视觉特效的特效属性值为文本格式；所述根据所述目标图像识别接口对所述待创建视觉特效的特效属性值进行解析，生成渲染指令，包括：

从所述待创建视觉特效的特效属性值的文本中获取预设关键词的键值；

根据所述预设关键词的键值生成渲染指令；

所述预设关键词包括：显示属性关键词、动作属性关键词和时间属性关键词。

在一些实施例中，图像识别接口包括：现代式图像识别接口和兼容式图像识别接口；所述根据所述运行环境确定目标图像识别接口，包括：

若所述运行环境支持调用所述现代式图像识别接口，将所述现代式图像识别接口确定为目标图像识别接口；

若所述运行环境不支持调用所述现代式图像识别接口，将所述兼容式图像识别接口确定为目标图像识别接口。

在一些实施例中，所述获取所述待创建视觉特效对应网页页面的运行环境，包括：

确定所述网页页面对应的网页浏览器类型和操作系统类型；

根据所述网页页面对应的网页浏览器类型和操作系统类型得到所述运行环境。

为实现上述目的，本申请实施例的第二方面提出了一种基于页面的视觉特效创建系统，所述系统包括：

特效属性值获取模块，用于获取用户配置的待创建视觉特效的特效属性值；

运行环境获取模块，用于获取所述待创建视觉特效对应网页页面的运行环境；

图像识别接口确定模块，用于根据所述运行环境确定目标图像识别接口；

渲染指令生成模块，用于根据所述目标图像识别接口对所述待创建视觉特效的特效属性值进行解析，生成渲染指令；

渲染和绘制模块，用于调用所述目标图像识别接口对所述渲染指令进行处理，以将所述待创建视觉特效渲染和绘制在所述网页页面上。

为实现上述目的，本申请实施例的第三方面提出了一种电子设备，包括：

至少一个存储器；

至少一个处理器；

至少一个计算机程序；

所述至少一个计算机程序被存储在所述至少一个存储器中，所述至少一个处理器执行所述至少一个计算机程序以实现上述第一方面所述的一种基于页面的视觉特效创建方法。

为实现上述目的，本申请实施例的第四方面提出了一种存储介质，所述存储介质为计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序用于使计算机执行上述第一方面所述的一种基于页面的视觉特效创建方法。

本申请提出的一种基于页面的视觉特效创建方法、系统、设备及介质，为了减小视觉特效占用的文件大小，获取用户配置的待创建视觉特效的特效属性值，基于特效属性值来创建待创建视觉特效。为了成功将待创建视觉特效渲染和绘制在网页页面上，获取待创建视觉特效对应网页页面的运行环境，根据运行环境确定目标图像识别接口，目标图像识别接口为待创建视觉特效对应网页页面的运行环境支持调用的图像识别接口类型，从而可以根据目标图像识别接口对待创建视觉特效的特效属性值进行解析，生成渲染指令，调用目标图像识别接口对渲染指令进行处理，以将待创建视觉特效渲染和绘制在网页页面上。本申请通过调用与待创建视觉特效对应网页页面的运行环境对应的目标图像识别接口，解析待创建视觉特效的特效属性值，从而快速创建待创建视觉特效，避免直接基于图像识别接口开发视觉特效的高成本，解决了创建视觉特效的过程复杂，视觉特效占用的文件大小较大，开发成本高的问题。

附图说明

图1是本申请实施例提供的一种基于页面的视觉特效创建方法的流程图；

图2是图1中的步骤S100的流程图；

图3是图1中的步骤S400的流程图；

图4是图1中的步骤S300的流程图；

图5是图1中的步骤S200的流程图；

图6是本申请实施例提供的基于页面的视觉特效创建系统的结构示意图；

图7是本申请实施例提供的电子设备的硬件结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。

需要说明的是，虽然在装置示意图中进行了功能模块划分，在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于装置中的模块划分，或流程图中的顺序执行所示出或描述的步骤。说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

目前常见的H5(HTML5)页面营销活动视觉特效的创建方案，可以采用基于动态图片(Graphics Interchange Format，GIF)的实现方案，依赖于UI(界面)设计师对视觉特效进行逐帧设计，如果视觉特效的过程比较复杂，会导致最终的GIF动态图片文件大小较大，不利于在手机上下载展示。也可以采用基于CSS(Cascading Style Sheet)动画和JavaScript DOM动画的实现方案，但只能实现比较简单和单一的视觉特效，比如针对坐标位置和自身大小的旋转、位移和缩放，以及颜色的变化。还可以采用基于图像识别接口的渲染，但开发成本较高，在使用不同图像识别接口的设备上需要开发不同的代码，针对同一视觉特效，需要有多份代码开发。

基于此，本申请实施例提供了一种基于页面的视觉特效创建方法、系统、设备及介质，能够使创建视觉特效的过程简单，且视觉特效占用的文件大小较小，还能降低开发成本。

本申请实施例提供的基于页面的视觉特效创建方法、系统、设备及介质，具体通过如下实施例进行说明，首先描述本申请实施例中的一种基于页面的视觉特效创建方法。

本申请实施例提供的一种基于页面的视觉特效创建方法，涉及互联网技术领域。本申请实施例提供的一种基于页面的视觉特效创建方法可应用于终端中，也可应用于服务器端中，还可以是运行于终端或服务器端中的软件。在一些实施例中，终端可以是智能手机、平板电脑、笔记本电脑、台式计算机等；服务器端可以配置成独立的物理服务器，也可以配置成多个物理服务器构成的服务器集群或者分布式系统，还可以配置成提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN以及大数据和人工智能平台等基础云计算服务的云服务器；软件可以是实现基于页面的视觉特效创建方法的应用等，但并不局限于以上形式。

本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

请参阅图1，图1是本申请实施例提供的一种基于页面的视觉特效创建方法的一个可选的流程图，图1中的方法可以具体包括但不限于步骤S100至步骤S500。

步骤S100，获取用户配置的待创建视觉特效的特效属性值；

步骤S200，获取待创建视觉特效对应网页页面的运行环境；

步骤S300，根据运行环境确定目标图像识别接口；

步骤S400，根据目标图像识别接口对待创建视觉特效的特效属性值进行解析，生成渲染指令；

步骤S500，调用目标图像识别接口对渲染指令进行处理，以将待创建视觉特效渲染和绘制在网页页面上。

在一些实施例的步骤S100至步骤S500中，为了减小视觉特效占用的文件大小，获取用户配置的待创建视觉特效的特效属性值，基于特效属性值来创建待创建视觉特效。为了成功将待创建视觉特效渲染和绘制在网页页面上，获取待创建视觉特效对应网页页面的运行环境，根据运行环境确定目标图像识别接口，目标图像识别接口为待创建视觉特效对应网页页面的运行环境支持调用的图像识别接口类型，从而可以根据目标图像识别接口对待创建视觉特效的特效属性值进行解析，生成渲染指令，调用目标图像识别接口对渲染指令进行处理，以将待创建视觉特效渲染和绘制在网页页面上。本申请通过调用与待创建视觉特效对应网页页面的运行环境对应的目标图像识别接口，解析待创建视觉特效的特效属性值，从而快速创建待创建视觉特效，避免直接基于图像识别接口开发视觉特效的高成本，解决了创建视觉特效的过程复杂，视觉特效占用的文件大小较大，开发成本高的问题。

在一些实施例的步骤S100中，为了减小视觉特效占用的文件大小，获取用户配置的待创建视觉特效的特效属性值，具体地，可以通过用户对新建的视觉特效的特效属性值的设置操作，得到用户配置的待创建视觉特效的特效属性值。也可以通过用户对已保存的视觉特效的特效属性值的修改操作，得到用户配置的待创建视觉特效的特效属性值。特效属性值包括但不限于显示属性值、动作属性值、时间属性值，通过对显示属性值、动作属性值、时间属性值的设置，可以实现表现力丰富且贴近现实场景的烟雾视觉特效、火焰视觉特效和光点视觉特效等。传统的采用CSS动画和JavaScript DOM动画创建视觉特效的方式，只能实现比较简单和单一的视觉特效，比如针对坐标位置和自身大小的旋转、位移和缩放，以及颜色的变化等创建的视觉特效，而本申请是基于特效属性值创建视觉特效，不仅占用文件大小较小，还能实现表现力丰富且贴近现实场景的视觉特效，创建过程也比较简单。

在一些实施例的步骤S200中，运行环境主要包括网页浏览器类型和操作系统类型，网页浏览器类型具体可以为IE浏览器、Edge浏览器、Chrome浏览器、Safari浏览器、Opera浏览器等。操作系统类型具体可以为Android操作系统、ios操作系统等。

在一些实施例的步骤S300中，不同的运行环境(即网页浏览器类型和操作系统类型)支持调用的图像识别接口不同，为了避免直接基于图像识别接口开发视觉特效的高成本，提前封装好不同的图像识别接口，只需对应运行环境对不同图像识别接口的支持情况，调用可以支持调用的目标图像识别接口，将待创建视觉特效渲染和绘制在网页页面上。图像识别接口包括：现代式图像识别接口和兼容式图像识别接口，现代式图像识别接口和兼容式图像识别接口皆提前封装好，根据不同运行环境对现代式图像识别接口的支持情况，从现代式图像识别接口和兼容式图像识别接口中确定目标图像识别接口。若运行环境支持调用现代式图像识别接口，将现代式图像识别接口确定为目标图像识别接口，若运行环境不支持调用现代式图像识别接口，将兼容式图像识别接口确定为目标图像识别接口。大部分运行环境都支持现代式图像识别接口，只有少部分运行环境只支持兼容式图像识别接口，若网页页面的运行环境支持现代式图像识别接口，则将现代式图像识别接口确定为目标图像识别接口，从而将待创建视觉特效渲染和绘制在网页页面上。

需要说明的是，现代式图像识别接口和兼容式图像识别接口皆为本领域技术人员可知的现有技术，在此不再对其用途做具体介绍。确定运行环境是否支持调用现代式图像识别接口的方式可以为预先制定对应表，再通过对应表确定网页页面的运行环境是否支持调用现代式图像识别接口，但确定运行环境是否支持调用现代式图像识别接口的具体方式并不能看作是对本申请的限定。

在一些实施例的步骤S400和步骤S500中，根据目标图像识别接口对待创建视觉特效的特效属性值进行解析，即可得到需要创建的待创建视觉特效的效果，从而生成渲染指令，该渲染指令可在调用图像识别接口后被处理，以将待创建视觉特效成功渲染和绘制在网页页面上，以完成网页页面视觉特效的创建。

请参阅图2，图2是本申请一些实施例的步骤S100的具体方法的流程图。在本申请的一些实施例中，步骤S100具体包括但不限于步骤S110或步骤S120，下面结合图2对这两个步骤进行详细介绍。

步骤S110，根据用户在视觉特效属性配置页面中对新建的视觉特效的特效属性值的设置操作，得到用户配置的待创建视觉特效的特效属性值；

步骤S120，根据用户在视觉特效属性配置页面中对已保存的视觉特效的特效属性值的修改操作，得到用户配置的待创建视觉特效的特效属性值。

在一些实施例的步骤S110中，首先进入视觉特效属性配置页面，新建一个创建任务，通过用户的设置操作，得到用户配置的待创建视觉特效的特效属性值。具体为设置特效属性值中预设关键词的键值。

在一些实施例的步骤S120中，首先进入视觉特效属性配置页面，若待创建视觉特效已保存在视觉特效属性配置页面中，直接打开已保存的视觉特效，通过用户在该已保存的视觉特效上的修改操作，得到用户配置的待创建视觉特效的特效属性值，避免重复创建视觉特效，节省创建时间。具体为修改特效属性值中预设关键词的键值。

需要说明的是，视觉特效属性配置页面可以为一个具体的后台管理系统或一个H5网页页面，不能看作是对本申请的限定。后台管理系统亦采用H5网页开发，可以实现对H5网页页面的视觉特效的特效属性值进行解析。

在本申请的一些实施例中，在步骤S100后，本申请的一种基于页面的视觉特效创建方法还包括：响应于用户的保存指令，保存待创建视觉特效的特效属性值。在一些实施例中，可以保存待创建视觉特效的特效属性值，以备后续直接使用，或在该已保存的待创建视觉特效的基础上进行修改，避免重复创建视觉特效，可以缩短创建视觉特效的时间。

需要说明的是，也可以不保存待创建视觉特效的特效属性值，一次性使用该待创建视觉特效，具体根据用户的实际需要选择，不能看作是对本申请的限定。

在本申请的一些实施例中，特效属性值包括显示属性值、动作属性值、时间属性值，显示属性值表征颜色变化，动作属性值表征动态变化方式，时间属性值表征动态变化时长。

在一些实施例中，为了减小视觉特效占用的文件大小，获取用户配置的待创建视觉特效的特效属性值，特效属性值包括显示属性值、动作属性值、时间属性值，显示属性值表征颜色变化，动作属性值表征动态变化方式，时间属性值表征动态变化时长。具体地，显示属性值包括但不限于：初始颜色color、红色值可变范围redRange、绿色值可变范围greenRange、蓝色值可变范围blueR-ange、透明值可变范围alphaRange、红色值变化速度redSpeed、绿色值变化速度greenSpeed、蓝色值变化速度blueSpeed、透明值变化速度alphaSpeed、缩放因子scale、缩放因子可变范围scaleRange、尺寸放大时变化方式magnif-icationFilter(线性，先快后慢等)、尺寸缩小时变化方式minificationFi-lter(线性，先快后慢等)。

动作属性值包括但不限于：旋转速度spin、旋转速度可变范围spinRange、发射的纬度emissionLatitude、发射的经度emissionLongitude、发射的纬经度可变范围emissionRange、红色值变化速度redSpeed、绿色值变化速度gree-nSpeed、蓝色值变化速度blueSpeed、透明值变化速度alphaSpeed、缩放因子scale、缩放因子可变范围scaleRange、尺寸放大时变化方式magnificationFi-lter(线性，先快后慢等)。

时间属性值包括但不限于：生命时长lifetime、生命时长可变范围lifeti-meRange、生成频率birthRate、缩放因子变化速度scaleSpeed、移动速度ve-locity、移动速度可变范围velocityRange、X轴的移动加速度xAcceleratio-n、Y轴的移动加速度yAcceleration、Z轴的移动加速度zAcceleration。

在一些实施例中，通过对显示属性值、动作属性值、时间属性值的设置，可以实现表现力丰富且贴近现实场景的烟雾视觉特效、火焰视觉特效和光点视觉特效等。传统的采用CSS动画和JavaScript DOM动画创建视觉特效的方式，只能实现比较简单和单一的视觉特效，比如针对坐标位置和自身大小的旋转、位移和缩放，以及颜色的变化等创建的视觉特效，而本申请是基于特效属性值创建视觉特效，不仅占用文件大小较小，还能实现表现力丰富且贴近现实场景的视觉特效，创建过程也比较简单。

请参阅图3，图3是本申请一些实施例的步骤S400的具体方法的流程图。在本申请的一些实施例中，待创建视觉特效的特效属性值为文本格式，步骤S400具体包括但不限于步骤S410和步骤S420，下面结合图3对这两个步骤进行详细介绍。

步骤S410，从待创建视觉特效的特效属性值的文本中获取预设关键词的键值；

步骤S420，根据预设关键词的键值生成渲染指令；预设关键词包括：显示属性关键词、动作属性关键词和时间属性关键词。

在一些实施例的步骤S410和步骤S420中，待创建视觉特效的特效属性值为文本格式，文本格式占用的文件大小相比GIF动态图片要小，直接通过设置待创建视觉特效的特效属性值的文本中预设关键词的键值，通过解析各预设关键词的键值，生成渲染指令，从而将所需的待创建视觉特效渲染和绘制在网页页面上，待创建视觉特效的创建过程简单，占用文件大小较小。

具体地，显示属性关键词包括但不限于：初始颜色color、红色值可变范围redRange、绿色值可变范围greenRange、蓝色值可变范围blueR-ange、透明值可变范围alphaRange、红色值变化速度redSpeed、绿色值变化速度greenSpeed、蓝色值变化速度blueSpeed、透明值变化速度alphaSpeed、缩放因子scale、缩放因子可变范围scaleRange、尺寸放大时变化方式magnif-icationFilter(线性，先快后慢等)、尺寸缩小时变化方式minificationFi-lter(线性，先快后慢等)。

动作属性关键词包括但不限于：旋转速度spin、旋转速度可变范围spinRange、发射的纬度emissionLatitude、发射的经度emissionLongitude、发射的纬经度可变范围emissionRange、红色值变化速度redSpeed、绿色值变化速度gree-nSpeed、蓝色值变化速度blueSpeed、透明值变化速度alphaSpeed、缩放因子scale、缩放因子可变范围scaleRange、尺寸放大时变化方式magnificationFi-lter(线性，先快后慢等)。

时间属性关键词包括但不限于：生命时长lifetime、生命时长可变范围lifeti-meRange、生成频率birthRate、缩放因子变化速度scaleSpeed、移动速度ve-locity、移动速度可变范围velocityRange、X轴的移动加速度xAcceleratio-n、Y轴的移动加速度yAcceleration、Z轴的移动加速度zAcceleration。

请参阅图4，图4是本申请一些实施例的步骤S300的具体方法的流程图。在本申请的一些实施例中，图像识别接口包括：现代式图像识别接口和兼容式图像识别接口，步骤S300具体包括但不限于步骤S310和步骤S320，下面结合图4对这两个步骤进行详细介绍。

步骤S310，若运行环境支持调用现代式图像识别接口，将现代式图像识别接口确定为目标图像识别接口；

步骤S320，若运行环境不支持调用现代式图像识别接口，将兼容式图像识别接口确定为目标图像识别接口。

在一些实施例的步骤S310和步骤S320中，现代式图像识别接口和兼容式图像识别接口皆提前封装好，根据不同运行环境对现代式图像识别接口的支持情况，从现代式图像识别接口和兼容式图像识别接口中确定目标图像识别接口。若运行环境支持调用现代式图像识别接口，将现代式图像识别接口确定为目标图像识别接口，若运行环境不支持调用现代式图像识别接口，将兼容式图像识别接口确定为目标图像识别接口。大部分运行环境都支持现代式图像识别接口，只有少部分运行环境只支持兼容式图像识别接口，若网页页面的运行环境支持现代式图像识别接口，则将现代式图像识别接口确定为目标图像识别接口，从而将待创建视觉特效渲染和绘制在网页页面上。

需要说明的是，现代式图像识别接口和兼容式图像识别接口皆为本领域技术人员可知的现有技术，在此不再对其用途做具体介绍。确定运行环境是否支持调用现代式图像识别接口的方式可以为预先制定对应表，再通过对应表确定网页页面的运行环境是否支持调用现代式图像识别接口，但确定运行环境是否支持调用现代式图像识别接口的具体方式并不能看作是对本申请的限定。

请参阅图5，图5是本申请一些实施例的步骤S200的具体方法的流程图。在本申请的一些实施例中，步骤S200具体包括但不限于步骤S210和步骤S220，下面结合图5对这两个步骤进行详细介绍。

步骤S210，确定网页页面对应的网页浏览器类型和操作系统类型；

步骤S220，根据网页页面对应的网页浏览器类型和操作系统类型得到运行环境。

在一些实施例的步骤S210和步骤S220中，网页浏览器类型具体可以为IE浏览器、Edge浏览器、Chrome浏览器、Safari浏览器、Opera浏览器等。操作系统类型具体可以为Android操作系统、ios操作系统等。需要操作系统类型和网页浏览器类型皆支持调用现代式图像识别接口，才能将现代式图像识别接口确认为目标图像识别接口，从而将待创建视觉特效渲染和绘制在网页页面上。

经过以上叙述，为了更好地体现本申请实施例的基于页面的视觉特效创建方法的优势，下面通过一个具体示例进行说明，本申请实施例的一种基于页面的视觉特效创建方法具体包括但不限于以下步骤：

步骤S110，根据用户在视觉特效属性配置页面中对新建的视觉特效的特效属性值的设置操作，得到用户配置的待创建视觉特效的特效属性值；或步骤S120，根据用户在视觉特效属性配置页面中对已保存的视觉特效的特效属性值的修改操作，得到用户配置的待创建视觉特效的特效属性值；

步骤S101，响应于用户的保存指令，保存待创建视觉特效的特效属性值；

步骤S210，确定网页页面对应的网页浏览器类型和操作系统类型；

步骤S220，根据网页页面对应的网页浏览器类型和操作系统类型得到运行环境；

步骤S310，若运行环境支持调用现代式图像识别接口，将现代式图像识别接口确定为目标图像识别接口；

步骤S320，若运行环境不支持调用现代式图像识别接口，将兼容式图像识别接口确定为目标图像识别接口；

步骤S410，从待创建视觉特效的特效属性值的文本中获取预设关键词的键值；

步骤S420，根据预设关键词的键值生成渲染指令；预设关键词包括：显示属性关键词、动作属性关键词和时间属性关键词；

步骤S500，调用目标图像识别接口对渲染指令进行处理，以将待创建视觉特效渲染和绘制在网页页面上。

本申请实施例提供的一种基于页面的视觉特效创建方法，为了减小视觉特效占用的文件大小，获取用户配置的待创建视觉特效的特效属性值，基于特效属性值来创建待创建视觉特效。为了成功将待创建视觉特效渲染和绘制在网页页面上，获取待创建视觉特效对应网页页面的运行环境，根据运行环境确定目标图像识别接口，目标图像识别接口为待创建视觉特效对应网页页面的运行环境支持调用的图像识别接口类型，从而可以根据目标图像识别接口对待创建视觉特效的特效属性值进行解析，生成渲染指令，调用目标图像识别接口对渲染指令进行处理，以将待创建视觉特效渲染和绘制在网页页面上。本申请通过调用与待创建视觉特效对应网页页面的运行环境对应的目标图像识别接口，解析待创建视觉特效的特效属性值，从而快速创建待创建视觉特效，避免直接基于图像识别接口开发视觉特效的高成本，解决了创建视觉特效的过程复杂，视觉特效占用的文件大小较大，开发成本高的问题。

请参阅图6，本申请实施例还提供了一种基于页面的视觉特效创建系统，可以实现上述一种基于页面的视觉特效创建方法，该系统包括特效属性值获取模块610、运行环境获取模块620、图像识别接口确定模块630、渲染指令生成模块640和渲染和绘制模块650。

特效属性值获取模块，用于获取用户配置的待创建视觉特效的特效属性值；

运行环境获取模块，用于获取待创建视觉特效对应网页页面的运行环境；

图像识别接口确定模块，用于根据运行环境确定目标图像识别接口；

渲染指令生成模块，用于根据目标图像识别接口对待创建视觉特效的特效属性值进行解析，生成渲染指令；

渲染和绘制模块，用于调用目标图像识别接口对渲染指令进行处理，以将待创建视觉特效渲染和绘制在网页页面上。

在一些实施例中，为了减小视觉特效占用的文件大小，获取用户配置的待创建视觉特效的特效属性值，具体地，可以通过用户对新建的视觉特效的特效属性值的设置操作，得到用户配置的待创建视觉特效的特效属性值。也可以通过用户对已保存的视觉特效的特效属性值的修改操作，得到用户配置的待创建视觉特效的特效属性值。特效属性值包括但不限于显示属性值、动作属性值、时间属性值，通过对显示属性值、动作属性值、时间属性值的设置，可以实现表现力丰富且贴近现实场景的烟雾视觉特效、火焰视觉特效和光点视觉特效等。传统的采用CSS动画和JavaScript DOM动画创建视觉特效的方式，只能实现比较简单和单一的视觉特效，比如针对坐标位置和自身大小的旋转、位移和缩放，以及颜色的变化等创建的视觉特效，而本申请是基于特效属性值创建视觉特效，不仅占用文件大小较小，还能实现表现力丰富且贴近现实场景的视觉特效，创建过程也比较简单。

运行环境主要包括网页浏览器类型和操作系统类型，网页浏览器类型具体可以为IE浏览器、Edge浏览器、Chrome浏览器、Safari浏览器、Opera浏览器等。操作系统类型具体可以为Android操作系统、ios操作系统等。需要说明的是，运行环境的获取方式在本申请中不作限定。

不同的运行环境(即网页浏览器类型和操作系统类型)支持调用的图像识别接口不同，为了避免直接基于图像识别接口开发视觉特效的高成本，提前封装好不同的图像识别接口，只需对应运行环境对不同图像识别接口的支持情况，调用可以支持调用的目标图像识别接口，将待创建视觉特效渲染和绘制在网页页面上。图像识别接口包括：现代式图像识别接口和兼容式图像识别接口，现代式图像识别接口和兼容式图像识别接口皆提前封装好，根据不同运行环境对现代式图像识别接口的支持情况，从现代式图像识别接口和兼容式图像识别接口中确定目标图像识别接口。若运行环境支持调用现代式图像识别接口，将现代式图像识别接口确定为目标图像识别接口，若运行环境不支持调用现代式图像识别接口，将兼容式图像识别接口确定为目标图像识别接口。大部分运行环境都支持现代式图像识别接口，只有少部分运行环境只支持兼容式图像识别接口，若网页页面的运行环境支持现代式图像识别接口，则将现代式图像识别接口确定为目标图像识别接口，从而将待创建视觉特效渲染和绘制在网页页面上。

需要说明的是，现代式图像识别接口和兼容式图像识别接口皆为本领域技术人员可知的现有技术，在此不再对其用途做具体介绍。确定运行环境是否支持调用现代式图像识别接口的方式可以为预先制定对应表，再通过对应表确定网页页面的运行环境是否支持调用现代式图像识别接口，但确定运行环境是否支持调用现代式图像识别接口的具体方式并不能看作是对本申请的限定。

根据目标图像识别接口对待创建视觉特效的特效属性值进行解析，即可得到需要创建的待创建视觉特效的效果，从而生成渲染指令，该渲染指令可在调用图像识别接口后被处理，以将待创建视觉特效成功渲染和绘制在网页页面上，以完成网页页面视觉特效的创建。

本申请实施例提供的一种基于页面的视觉特效创建系统，可以实现上述一种基于页面的视觉特效创建方法，为了减小视觉特效占用的文件大小，获取用户配置的待创建视觉特效的特效属性值，基于特效属性值来创建待创建视觉特效。为了成功将待创建视觉特效渲染和绘制在网页页面上，获取待创建视觉特效对应网页页面的运行环境，根据运行环境确定目标图像识别接口，目标图像识别接口为待创建视觉特效对应网页页面的运行环境支持调用的图像识别接口类型，从而可以根据目标图像识别接口对待创建视觉特效的特效属性值进行解析，生成渲染指令，调用目标图像识别接口对渲染指令进行处理，以将待创建视觉特效渲染和绘制在网页页面上。本申请通过调用与待创建视觉特效对应网页页面的运行环境对应的目标图像识别接口，解析待创建视觉特效的特效属性值，从而快速创建待创建视觉特效，避免直接基于图像识别接口开发视觉特效的高成本，解决了创建视觉特效的过程复杂，视觉特效占用的文件大小较大，开发成本高的问题。

本申请实施例还提供了一种电子设备，该电子设备包括：至少一个存储器，至少一个处理器，至少一个计算机程序，至少一个计算机程序被存储在至少一个存储器中，至少一个处理器执行至少一个计算机程序以实现上述实施例中任一种的基于页面的视觉特效创建方法。该电子设备可以为包括平板电脑、车载电脑等任意智能终端。

请参阅图7，图7示意了另一实施例的一种电子设备的硬件结构，该电子设备包括：

处理器710，可以采用通用的CPU(CentralProcessingUnit，中央处理器)、微处理器、应用专用集成电路(ApplicationSpecificIntegratedCircuit，ASIC)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本申请实施例所提供的技术方案；

存储器720，可以采用只读存储器(ReadOnlyMemory，ROM)、静态存储设备、动态存储设备或者随机存取存储器(RandomAccessMemory，RAM)等形式实现。存储器720可以存储操作系统和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器720中，并由处理器710来调用执行本申请实施例的一种基于页面的视觉特效创建方法；

输入/输出接口730，用于实现信息输入及输出；

通信接口740，用于实现本设备与其他设备的通信交互，可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信；

总线750，在设备的各个组件(例如处理器710、存储器720、输入/输出接口730和通信接口740)之间传输信息；

其中处理器710、存储器720、输入/输出接口730和通信接口740通过总线750实现彼此之间在设备内部的通信连接。

本申请实施例还提供了一种存储介质，该存储介质为计算机可读存储介质，该计算机可读存储介质存储有计算机程序，计算机程序用于使计算机执行上述实施例中任一种的基于页面的视觉特效创建方法。

存储器作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序以及非暂态性计算机可执行程序。此外，存储器可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施方式中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至该处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

本申请实施例描述的实施例是为了更加清楚的说明本申请实施例的技术方案，并不构成对于本申请实施例提供的技术方案的限定，本领域技术人员可知，随着技术的演变和新应用场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

本领域技术人员可以理解的是，图1至5中示出的技术方案并不构成对本申请实施例的限定，可以包括比图示更多或更少的步骤，或者组合某些步骤，或者不同的步骤。

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

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、设备中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。

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

应当理解，在本申请中，“至少一个(项)”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：只存在A，只存在B以及同时存在A和B三种情况，其中A，B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，“a和b”，“a和c”，“b和c”，或“a和b和c”，其中a，b，c可以是单个，也可以是多个。

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

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

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

集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括多指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例的方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，简称ROM)、随机存取存储器(Random Access Memory，简称RAM)、磁碟或者光盘等各种可以存储程序的介质。

以上参阅附图说明了本申请实施例的优选实施例，并非因此局限本申请实施例的权利范围。本领域技术人员不脱离本申请实施例的范围和实质内所作的任何修改、等同替换和改进，均应在本申请实施例的权利范围之内。

Claims (10)

1.一种基于页面的视觉特效创建方法，其特征在于，所述方法包括：

获取用户配置的待创建视觉特效的特效属性值；

获取所述待创建视觉特效对应网页页面的运行环境；

根据所述运行环境确定目标图像识别接口；

根据所述目标图像识别接口对所述待创建视觉特效的特效属性值进行解析，生成渲染指令；

调用所述目标图像识别接口对所述渲染指令进行处理，以将所述待创建视觉特效渲染和绘制在所述网页页面上。

2.根据权利要求1所述的一种基于页面的视觉特效创建方法，其特征在于，所述获取用户配置的待创建视觉特效的特效属性值，包括以下之一：

根据用户在视觉特效属性配置页面中对新建的视觉特效的特效属性值的设置操作，得到用户配置的待创建视觉特效的特效属性值；

根据用户在视觉特效属性配置页面中对已保存的视觉特效的特效属性值的修改操作，得到用户配置的待创建视觉特效的特效属性值。

3.根据权利要求2所述的一种基于页面的视觉特效创建方法，其特征在于，在获取用户配置的待创建视觉特效的特效属性值之后，还包括：

响应于所述用户的保存指令，保存所述待创建视觉特效的特效属性值。

4.根据权利要求1至3任一所述的一种基于页面的视觉特效创建方法，其特征在于，所述特效属性值包括显示属性值、动作属性值、时间属性值，所述显示属性值表征颜色变化，所述动作属性值表征动态变化方式，所述时间属性值表征动态变化时长。

5.根据权利要求1所述的一种基于页面的视觉特效创建方法，其特征在于，所述待创建视觉特效的特效属性值为文本格式；所述根据所述目标图像识别接口对所述待创建视觉特效的特效属性值进行解析，生成渲染指令，包括：

从所述待创建视觉特效的特效属性值的文本中获取预设关键词的键值；

根据所述预设关键词的键值生成渲染指令；

所述预设关键词包括：显示属性关键词、动作属性关键词和时间属性关键词。

6.根据权利要求1所述的一种基于页面的视觉特效创建方法，其特征在于，图像识别接口包括：现代式图像识别接口和兼容式图像识别接口；所述根据所述运行环境确定目标图像识别接口，包括：

若所述运行环境支持调用所述现代式图像识别接口，将所述现代式图像识别接口确定为目标图像识别接口；

若所述运行环境不支持调用所述现代式图像识别接口，将所述兼容式图像识别接口确定为目标图像识别接口。

7.根据权利要求1所述的一种基于页面的视觉特效创建方法，其特征在于，所述获取所述待创建视觉特效对应网页页面的运行环境，包括：

确定所述网页页面对应的网页浏览器类型和操作系统类型；

根据所述网页页面对应的网页浏览器类型和操作系统类型得到所述运行环境。

8.一种基于页面的视觉特效创建系统，其特征在于，所述系统包括：

特效属性值获取模块，用于获取用户配置的待创建视觉特效的特效属性值；

运行环境获取模块，用于获取所述待创建视觉特效对应网页页面的运行环境；

图像识别接口确定模块，用于根据所述运行环境确定目标图像识别接口；

渲染指令生成模块，用于根据所述目标图像识别接口对所述待创建视觉特效的特效属性值进行解析，生成渲染指令；

渲染和绘制模块，用于调用所述目标图像识别接口对所述渲染指令进行处理，以将所述待创建视觉特效渲染和绘制在所述网页页面上。

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

至少一个存储器；

至少一个处理器；

至少一个计算机程序；

所述至少一个计算机程序被存储在所述至少一个存储器中，所述至少一个处理器执行所述至少一个计算机程序以实现：

如权利要求1至7任一项所述的一种基于页面的视觉特效创建方法。

10.一种存储介质，所述存储介质为计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序用于使计算机执行：

如权利要求1至7中任一项所述的一种基于页面的视觉特效创建方法。

Images