CN114385270A - 网页动画自动生成方法、装置、设备及存储介质 - Google Patents
网页动画自动生成方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN114385270A CN114385270A CN202210059408.0A CN202210059408A CN114385270A CN 114385270 A CN114385270 A CN 114385270A CN 202210059408 A CN202210059408 A CN 202210059408A CN 114385270 A CN114385270 A CN 114385270A
- Authority
- CN
- China
- Prior art keywords
- animation
- effect
- description set
- effect component
- set page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 62
- 230000000694 effects Effects 0.000 claims abstract description 234
- 238000004590 computer program Methods 0.000 claims description 25
- 238000012545 processing Methods 0.000 claims description 8
- 230000009471 action Effects 0.000 claims description 7
- 238000012544 monitoring process Methods 0.000 claims description 4
- 238000011161 development Methods 0.000 abstract description 16
- 238000009877 rendering Methods 0.000 abstract description 4
- 238000013473 artificial intelligence Methods 0.000 abstract description 2
- 230000000875 corresponding effect Effects 0.000 description 55
- 238000010586 diagram Methods 0.000 description 12
- 230000006870 function Effects 0.000 description 7
- 230000008569 process Effects 0.000 description 6
- 238000005516 engineering process Methods 0.000 description 3
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000003247 decreasing effect Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000005065 mining Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
Abstract
本申请适用于人工智能技术领域，提供一种网页动画自动生成方法、装置、设备及存储介质，其方法包括：调用动画描述集合页面，识别用户在动画描述集合页面上选取的效果组件，从外部动画库中获取与选取的效果组件对应关联的动画代码资源；调用动画生成插件，根据动画代码资源配置动画生成插件内置的配置文件，以在动画生成插件中生成对应的动画效果代码文件；将动画代码资源和动画效果代码文件加载至网页浏览器中，并运行动画效果代码文件，以在网页浏览器中展示动画效果代码文件对应的动画效果。基于该方法，可以减少对第三方库或者插件的依赖、实现定制化的动画效果或布局样式、提升页面加载和渲染速度，从而提高页面开发效率和开发速度。
Description
技术领域
本申请涉及人工智能技术领域，尤其涉及一种网页动画自动生成方法、装置、设备及存储介质。
背景技术
随着互联网技术的发展，网页成为人们获取信息的重要途径。丰富的网页内容和动态的网页效果更能吸引人们眼球，因而在网页开发过程中，为了丰富网页中展示的内容，通常会在网页中配置各种各样的动画效果来向用户展示内容。
现有的网页动画配置技术中，通常是利用Animate.css动画库把常用的动画效果封装起来，然后在网页开发时把动画库整个引入到网页中，通过由网页对动画库中的动态效果进行获取和调用来实现网页的动态效果。然而，这种直接把动画库整个引入到网页的方式，在网页只需要一两个动画效果时，也会将所有的动画效果都引入到网页里面，致使网页对第三方库的依赖性很强。当第三方库中的动画效果或布局样式与网页的ux规范存在差异时，还需要开发人员通过修改第三方库源码的方式去调整和二次开发该第三方库中的动画效果或布局样式，工作量大，针对网页中存在多个开发项目或多个开发人员时，容易出现重复开发的情况，影响网页开发效率。而且任何动画效果都需要依靠引入第三方库来实现，容易给网页增加大量的冗余代码，影响网页的渲染和加载速度。
发明内容
有鉴于此，本申请实施例提供了一种网页动画自动生成方法、装置、设备及存储介质，可以减少对第三方库或者插件的依赖、实现定制化的动画效果或布局样式、提升页面加载和渲染速度，从而提高页面开发效率和开发速度。
本申请实施例的第一方面提供了一种网页动画自动生成方法，包括：
调用动画描述集合页面，识别用户在所述动画描述集合页面上选取的效果组件，从外部动画库中获取与所述选取的效果组件对应关联的动画代码资源；
调用动画生成插件，根据所述动画代码资源配置所述动画生成插件内置的配置文件，以在所述动画生成插件中生成对应的动画效果代码文件；
将所述动画代码资源和所述动画效果代码文件加载至网页浏览器中，并运行所述动画效果代码文件，以在所述网页浏览器中展示所述动画效果代码文件对应的动画效果。
结合第一方面，在第一方面的第一种可能实现方式中，所述动画生成插件内置的配置文件中包含有插件描述属性和插件背景属性，所述调用动画生成插件，根据所述动画代码资源配置所述动画生成插件内置的配置文件，以在所述动画生成插件中生成对应的动画效果代码文件的步骤，包括：
基于所述插件描述属性，触发所述动画生成插件根据所述动画代码资源生成对应的动画效果代码文件；
基于所述插件背景属性，确定所述动画生成插件生成的动画效果代码文件对应在网页浏览器中的作用位置。
结合第一方面，在第一方面的第二种可能实现方式中，所述调用动画描述集合页面，识别用户在所述动画描述集合页面上选取的效果组件，从外部动画库中获取与所述选取的效果组件对应关联的动画代码资源的步骤，包括：
对所述动画描述集合页面中进行监听，识别用户是否在所述动画描述集合页面上执行点击操作；
若有，则获取所述点击操作在所述动画描述集合页面中的第一位置信息，并将所述第一位置信息与所述动画描述集合页面中各效果组件各自对应的位置范围信息进行比对，确定与所述点击操作对应匹配的目标效果组件；
根据所述目标效果组件，从所述外部动画库中获取与所述目标效果组件对应关联的动画代码资源。
结合第一方面的第二种可能实现方式，在第一方面的第三种可能实现方式中，所述获取所述点击操作在所述动画描述集合页面中的第一位置信息，并将所述第一位置信息与所述动画描述集合页面中各效果组件各自对应的位置范围信息进行比对，确定与所述点击操作对应匹配的目标效果组件的步骤之前，还包括：
在所述动画描述集合页面上建立平面坐标系，根据所述平面坐标系设置所述动画描述集合页面中各效果组件各自对应的位置范围信息，所述位置范围信息包括所述效果组件在所述动画描述集合页面中呈现的形状的边所对应的坐标点集合。
结合第一方面的第三种可能实现方式，在第一方面的第四种可能实现方式中，所述获取所述点击操作在所述动画描述集合页面中的第一位置信息，并将所述第一位置信息与所述动画描述集合页面中各效果组件各自对应的位置范围信息进行比对，确定与所述点击操作对应匹配的目标效果组件的步骤，包括：
基于所述平面坐标系，对所述点击操作进行坐标定位处理，获取所述点击操作在所述动画描述集合页面中的点击坐标点；
针对所述动画描述集合页面中的任一效果组件，从所述效果组件对应的坐标点集合中获取与所述点击坐标点横坐标相同的两个坐标点的纵坐标数值，其中，所述两个坐标点分别为与点击坐标点横坐标相同的坐标点中纵坐标数值最大的坐标点和纵坐标数值最小的坐标点；
将所述点击坐标点的纵坐标数值与所述两个坐标点的纵坐标数值进行比较，判断所述点击坐标点的纵坐标数值是否在所述两个坐标点的纵坐标数值之间，若在，则将所述效果组件确定为与所述点击操作对应匹配的目标效果组件。
结合第一方面的第四种可能实现方式，在第一方面的第五种可能实现方式中，所述基于所述平面坐标系，对所述点击操作进行坐标定位处理，获取所述点击操作在所述动画描述集合页面中的点击坐标点的步骤之后，还包括：
针对所述动画描述集合页面中的任一效果组件，从所述效果组件对应的坐标点集合中获取与所述点击坐标点纵坐标相同的两个坐标点的横坐标数值，其中，所述两个坐标点分别为与点击坐标点纵坐标相同的坐标点中横坐标数值最大的坐标点和横坐标数值最小的坐标点；
将所述点击坐标点的横坐标数值与所述两个坐标点的横坐标数值进行比较，判断所述点击坐标点的横坐标数值是否在所述两个坐标点的横坐标数值之间，若在，则将所述效果组件确定为与所述点击操作对应匹配的目标效果组件。结合第一方面或第一方面的第一或第二或第三或第四或第五种可能实现方式，在第一方面的第六种可能实现方式中，所述调用动画描述集合页面，识别用户在所述动画描述集合页面上选取的效果组件，从外部动画库中获取与所述选取的效果组件对应关联的动画代码资源的步骤之前，还包括：
基于vue.js框架搭建动画描述集合页面，其中，在所述动画描述集合页面设置一个或多个vue组件，一个vue组件对应表征一个效果组件。
本申请实施例的第二方面提供了一种网页动画自动生成装置，所述网页动画自动生成装置包括：
资源获取模块，用于调用动画描述集合页面，识别用户在所述动画描述集合页面上选取的效果组件，从外部动画库中获取与所述选取的效果组件对应关联的动画代码资源；
代码生成模块，用于调用动画生成插件，根据所述动画代码资源配置所述动画生成插件内置的配置文件，以在所述动画生成插件中生成对应的动画效果代码文件；
效果展示模块，用于将所述动画代码资源和所述动画效果代码文件加载至网页浏览器中，并运行所述动画效果代码文件，以在所述网页浏览器中展示所述动画效果代码文件对应的动画效果。
本申请实施例的第三方面提供了一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在电子设备上运行的计算机程序，所述处理器执行所述计算机程序时实现第一方面提供的网页动画自动生成方法的各步骤。
本申请实施例的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现第一方面提供的网页动画自动生成方法的各步骤。
本申请实施例提供的一种网页动画自动生成方法、装置、设备及存储介质，具有以下有益效果：
本申请实施例通过搭建一个动画生成插件用于自动生成动画效果代码文件，可以实现定制化动画效果或布局样式，而且只获取所需的单个动画样式的代码资源，无需引入整个第三方数据库的所有代码资源，减少代码量。另外，基于动画生成插件中内置的配置文件，只需要将获得的代码资源自动配置到预设的用于生成动画的配置文件中，即可自动生成动画效果代码文件，无需开发人员进行代码开发，减少了开发工作量，提高了页面开发效率。而且在生成动画效果代码文件后，网页可通过直接从动画生成插件中加载该动画效果代码文件来实现动画效果的展示，由于减少第三方数据库的引入和使用，大大提升了加载和渲染速度。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本申请实施例提供的一种网页动画自动生成方法的实现流程图；
图2为本申请实施例提供的网页动画自动生成方法中生成动画效果代码文件的一种方法流程图；
图3为本申请实施例提供的网页动画自动生成方法中获取动画代码资源的一种方法流程示意图；
图4为本申请实施例提供的网页动画自动生成方法中确定目标效果组件的一种方法流程示意图；
图5为本申请实施例提供的网页动画自动生成方法中确定目标效果组件的另一种方法流程示意图；
图6为本申请实施例提供的一种网页动画自动生成装置的基础结构框图；
图7为本申请实施例提供的网页动画自动生成装置中的第一种细化结构框图；
图8为本申请实施例提供的网页动画自动生成装置中的第二种细化结构框图；
图9为本申请实施例提供的网页动画自动生成装置中的第三种细化结构框图；
图10为本申请实施例提供的网页动画自动生成装置中的第四种细化结构框图；
图11为本申请实施例提供的一种电子设备的基本结构框图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
请参阅图1，图1为本申请实施例提供的一种网页动画自动生成方法的实现流程图。详述如下：
S11：调用动画描述集合页面，识别用户在所述动画描述集合页面上选取的效果组件，从外部动画库中获取与所述选取的效果组件对应关联的动画代码资源。
本实施例中，动画描述集合页面由多个效果组件合成，每个效果组件与一种存储于外部动画库中的动画代码资源相关联。动画代码资源包括但不限于图片文件、js(英文全称JavaScript，一种直译式脚本语言)文件、css(英文全称Cascading Style Shee，层叠样式表单)文件、html(英文全称HyperText Markup Language，超文本标记语言)文件等代码资源。示例性的，由网页开发后台调用动画描述集合页面并向用户展示该动画描述集合页面。在该动画描述集合页面中，用户可以通过点击的方式来选取相应的效果组件，基于用户点击的效果组件，动画描述集合页面展示该效果组件相对应的效果预览页面，直接预览外部动画库中与该效果组件相关联的动画代码资源所对应的动画效果。
可以理解的是，在动画描述集合页面中，可以通过弹窗的方式展示效果预览页面，也可以通过页面跳转的方式展示效果预览页面。经过用户预览确认该动画效果为用户所需的动画效果时，则由该用户点击动画描述集合页面中的效果生成按钮，即可按照效果组件与动画代码资源之间的关联关系，从外部动画库中将用户选取的效果组件对应关联的动画代码资源进行拷贝，从而获取得到用户选取的效果组件所对应关联的动画代码资源。在本实施例中，外部动画库为Animate.css库。
S12：调用动画生成插件，根据所述动画代码资源配置所述动画生成插件内置的配置文件，以在所述动画生成插件中生成对应的动画效果代码文件。
动画生成插件通过浏览器(Chrome)扩展插件搭建得到。在该动画生成插件中内置有一配置文件，该配置文件设置为manifest.json。通过将动画代码资源配置到该该配置文件中，从而基于该配置文件生成动画效果代码文件。其中，配置文件中包含有以下属性：插件名称属性(name)、插件版本号属性(version)、指定清单文件格式的版本(manifest_version，一般设置为2)、插件描述属性(description)、插件背景属性(background)。
示例性的，在本实施例中，请一并参阅图2，图2为本申请实施例提供的网页动画自动生成方法中生成动画效果代码文件的一种方法流程图。详细如下：
S21：基于所述插件描述属性，触发所述动画生成插件根据所述动画代码资源生成对应的动画效果代码文件；
S22：基于所述插件背景属性，确定所述动画生成插件生成的动画效果代码文件对应在网页浏览器中的作用位置。
在本实施例中，网页开发后台通过调用该动画生成插件，根据动画代码资源配置动画生成插件内置的配置文件时，一方面可以基于插件描述属性，触发动画生成插件根据动画代码资源配置该配置文件中的插件描述属性，使动画生成插件按照该动画代码资源中的内容生成对应的动画效果代码文件。另一方面可以基于插件背景属性，在配置文件中配置插件背景属性，以此确定该动画生成插件生成的动画效果代码文件对应在网页浏览器中的作用位置。具体地，在配置插件背景属性时，可以通过background-origin属性规定背景图像的定位区域、通过ackground-clip属性规定背景的绘制区域以及通过background-attachment属性规定背景图像是否固定或者随着页面的其余部分滚动，以由该三个背景属性共同确定动画效果代码文件所对应在网页浏览器中的作用位置。
S13：将所述动画代码资源和所述动画效果代码文件加载至网页浏览器中，并运行所述动画效果代码文件，以在所述网页浏览器中展示所述动画效果代码文件对应的动画效果。
本实施例中，网页开发后台在对网页浏览器执行网页动画自动生成操作时，具体可以通过新建一个文件夹，进而将通过调用动画描述集合页面获得的动画代码资源和通过调用动画生成插件生成的动画效果代码文件存放到该文件夹中。通过该文件夹加载至网页浏览器中，从而实现将动画代码资源和动画效果代码文件加载至网页浏览器中。进而，通过触发网页浏览器运行该文件夹中的动画效果代码文件，即可实现在网页浏览器中展示该动画效果代码文件对应的动画效果。需要说明的是，在运行该动画效果文件时，具体使用该文件夹中存放的动画代码资源，无需引入整个第三方数据库的所有代码资源，有效减少了网页浏览器的代码量，提升了网页浏览器的加载和渲染速度。
以上可以看出，本实施例提供的网页动画自动生成方法中，通过搭建一个动画生成插件用于自动生成动画效果代码文件，可以实现定制化动画效果或布局样式，而且只获取所需的单个动画样式的代码资源，无需引入整个第三方数据库的所有代码资源，减少代码量。另外，基于动画生成插件中内置的配置文件，只需要将获得的代码资源自动配置到预设的用于生成动画的配置文件中，即可自动生成动画效果代码文件，无需开发人员进行代码开发，减少了开发工作量，提高了页面开发效率。而且在生成动画效果代码文件后，网页可通过直接从动画生成插件中加载该动画效果代码文件来实现动画效果的展示，由于减少第三方数据库的引入和使用，大大提升了加载和渲染速度。
本申请的一些实施例中，请参阅图3，图3为本申请实施例提供的网页动画自动生成方法中获取动画代码资源的一种方法流程示意图。详细如下：
S31：对所述动画描述集合页面中进行监听，识别用户是否在所述动画描述集合页面上执行点击操作；
S32：若有，则获取所述点击操作在所述动画描述集合页面中的第一位置信息，并将所述第一位置信息与所述动画描述集合页面中各效果组件各自对应的位置范围信息进行比对，确定与所述点击操作对应匹配的目标效果组件；
S33：根据所述目标效果组件，从所述外部动画库中获取与所述目标效果组件对应关联的动画代码资源。
本实施例中，通过对动画描述集合页面中的点击事件进行监听，识别用户是否在该动画描述集合页面中执行了点击操作。在本实施例中，若判断用户在动画描述集合页面上执行了点击操作，则基于该点击操作，对该点击操作进行定位，确定该点击操作在动画描述集合页面上的具体坐标位置，获取对应的坐标信息作为该点击操作在动画描述集合页面中的第一位置信息。而在构建动画描述集合页面时，预先根据各效果组件在动画描述集合页面的位置确定各效果组件在该动画描述集合页面中各自对应匹配的位置范围信息。在获得点击操作在动画描述集合页面中的第一位置信息后，可以根据该第一位置信息遍历各效果组件的位置范围信息，判断该第一位置信息落入哪个效果组件对应的位置范围内，将该第一位置信息落入的位置范围所对应的效果组件确定为与点击操作对应匹配的目标效果组件，即用户选取的效果组件。进而，根据该目标效果组件，查询外部动画库中效果组件与代码资源之间的关联关系，即可从所述外部动画库中获取与所述目标效果组件对应关联的动画代码资源。
本申请的一些实施例中，在确定与点击操作对应匹配的目标效果组件时，具体可以通过在动画描述集合页面上建立一个平面坐标系，根据该平面坐标系设置动画描述集合页面中各效果组件各自对应的位置范围信息。示例性的，可以针对动画描述集合页面中的每一个效果组件，基于平面坐标系获取效果组件在动画描述集合页面中所呈现的形状的所有顶点坐标，将各顶点坐标两两进行连接形成效果组件自对应的位置范围，采用该位置范围中顶点与顶点之间连接的边的坐标点集合来表示该位置范围，即位置范围信息包括效果组件在动画描述集合页面中呈现的形状的边所对应的坐标点集合。
本申请的一些实施例中，请参阅图4，图4为本申请实施例提供的网页动画自动生成方法中确定目标效果组件的一种方法流程示意图。详细如下：
S41：基于所述平面坐标系，对所述点击操作进行坐标定位处理，获取所述点击操作在所述动画描述集合页面中的点击坐标点；
S42：针对所述动画描述集合页面中的任一效果组件，从所述效果组件对应的坐标点集合中获取与所述点击坐标点横坐标相同的两个坐标点的纵坐标数值，其中，所述两个坐标点分别为与点击坐标点横坐标相同的坐标点中纵坐标数值最大的坐标点和纵坐标数值最小的坐标点；
S43：将所述点击坐标点的纵坐标数值与所述两个坐标点的纵坐标数值进行比较，判断所述点击坐标点的纵坐标数值是否在所述两个坐标点的纵坐标数值之间，若在，则将所述效果组件确定为与所述点击操作对应匹配的目标效果组件。
本实施例中，可以根据在动画描述集合页面上建立的平面坐标系，对用户的点击操作进行定位处理，获得该点击操作作用在该动画描述集合页面上的作用点位置，获得点击操作在动画描述集合页面中的点击坐标点，获取该点击坐标点的纵、横两个维度的坐标数值。通过针对动画描述集合页面中的任一效果组件，获取该效果组件在动画描述集合页面中呈现的形状的边所对应的坐标点集合。然后，从该坐标点集合中获取与点击坐标点横坐标相同的两个坐标点的纵坐标数值，其中，所述两个坐标点分别为与点击坐标点横坐标相同的坐标点中纵坐标数值最大的坐标点和纵坐标数值最小的坐标点。将点击坐标点的纵坐标数值与两个坐标点的纵坐标数值进行比较，判断点击坐标点的纵坐标数值是否在两个坐标点的纵坐标数值之间。若点击坐标点的纵坐标数值在两个坐标点的纵坐标数值之间，则将该效果组件确定为与点击操作对应匹配的目标效果组件。可以理解的是，在本实施例中，在从坐标点集合中获取与点击坐标点横坐标相同的两个坐标点的纵坐标数值时，若该坐标点集合中没有与点击坐标点横坐标相同的坐标点，则直接确定该效果组件不是与点击操作对应匹配的目标效果组件。若坐标点集合中有且只有一个与点击坐标点横坐标相同的坐标点，则获取该坐标点的纵坐标数值，比较该坐标点的纵坐标数值是否与点击坐标点的纵坐标数值是否相同，若相同，则确定该效果组件为与点击操作对应匹配的目标效果组件，否则确定该效果组件不是与点击操作对应匹配的目标效果组件。
本申请的一些实施例中，请参阅图5，图5为本申请实施例提供的网页动画自动生成方法中确定目标效果组件的另一种方法流程示意图。详细如下：
S51：针对所述动画描述集合页面中的任一效果组件，从所述效果组件对应的坐标点集合中获取与所述点击坐标点纵坐标相同的两个坐标点的横坐标数值，其中，所述两个坐标点分别为与点击坐标点纵坐标相同的坐标点中横坐标数值最大的坐标点和横坐标数值最小的坐标点；
S52：将所述点击坐标点的横坐标数值与所述两个坐标点的横坐标数值进行比较，判断所述点击坐标点的横坐标数值是否在所述两个坐标点的横坐标数值之间，若在，则将所述效果组件确定为与所述点击操作对应匹配的目标效果组件。
本实施例中，在获得点击坐标点的纵、横两个维度的坐标数值后，还可以通过针对动画描述集合页面中的任一效果组件，获取该效果组件在动画描述集合页面中呈现的形状的边所对应的坐标点集合。然后，从该坐标点集合中获取与点击坐标点纵坐标相同的两个坐标点的横坐标数值，其中，所述两个坐标点分别为与点击坐标点纵坐标相同的坐标点中横坐标数值最大的坐标点和横坐标数值最小的坐标点。将点击坐标点的横坐标数值与两个坐标点的横坐标数值进行比较，判断点击坐标点的横坐标数值是否在两个坐标点的横坐标数值之间。若点击坐标点的横坐标数值在两个坐标点的横坐标数值之间，则将该效果组件确定为与点击操作对应匹配的目标效果组件。可以理解的是，在本实施例中，在从坐标点集合中获取与点击坐标点纵坐标相同的两个坐标点的横坐标数值时，若该坐标点集合中没有与点击坐标点纵坐标相同的坐标点，则直接确定该效果组件不是与点击操作对应匹配的目标效果组件。若坐标点集合中有且只有一个与点击坐标点纵坐标相同的坐标点，则获取该坐标点的横坐标数值，比较该坐标点的横坐标数值是否与点击坐标点的横坐标数值是否相同，若相同，则确定该效果组件为与点击操作对应匹配的目标效果组件，否则确定该效果组件不是与点击操作对应匹配的目标效果组件。
本申请的一些实施例中，具体可以通过基于vue.js框架搭建动画描述集合页面。在所述动画描述集合页面设置一个或多个vue组件，其中，一个vue组件对应表征一个效果组件。在本实施例中，vue.js是用于构建用户界面的渐进式框架，在使用vue.js框架构建动画描述集合页面时，可以采用vue.extend创建多个效果组件，并通过配置效果组件各自对应的template(实例)属性来指定各效果组件要展示的html结构。然后通过Vue.component对创建的多个效果组件分别进行注册，在js代码中定义各效果组件的名称、属性、数据、模板和组件触发时间等信息，以及基于定义的信息，将该各效果组件与外部动画库中与该定义的信息相匹配的动画代码资源进行关联，以此构建得到动画描述集合页面。
可以理解的是，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。
本申请的一些实施例中，请参阅图6，图6为本申请实施例提供的一种网页动画自动生成装置的基础结构框图。本实施例中该装置包括的各单元用于执行上述方法实施例中的各步骤。具体请参阅上述方法实施例中的相关描述。为了便于说明，仅示出了与本实施例相关的部分。如图6所示，网页动画自动生成装置包括：资源获取模块61、代码生成模块62以及客户挖掘模块63。其中：所述资源获取模块61用于调用动画描述集合页面，识别用户在所述动画描述集合页面上选取的效果组件，从外部动画库中获取与所述选取的效果组件对应关联的动画代码资源。所述代码生成模块62用于调用动画生成插件，根据所述动画代码资源配置所述动画生成插件内置的配置文件，以在所述动画生成插件中生成对应的动画效果代码文件。所述效果展示模块63用于将所述动画代码资源和所述动画效果代码文件加载至网页浏览器中，并运行所述动画效果代码文件，以在所述网页浏览器中展示所述动画效果代码文件对应的动画效果。
本申请的一些实施例中，请参阅图7，图7为本申请实施例提供的网页动画自动生成装置中的第一种细化结构框图。如图7所示，网页动画自动生成装置还包括：触发子模块71和第一确定子模块72。所述触发子模块71用于基于所述插件描述属性，触发所述动画生成插件根据所述动画代码资源生成对应的动画效果代码文件。所述第一确定子模块72用于基于所述插件背景属性，确定所述动画生成插件生成的动画效果代码文件对应在网页浏览器中的作用位置。
本申请的一些实施例中，请参阅图8，图8为本申请实施例提供的网页动画自动生成装置中的第二种细化结构框图。如图8所示，网页动画自动生成装置还包括：识别子模块81、比对子模块82和第一获取子模块83。其中，所述识别子模块81用于对所述动画描述集合页面中进行监听，识别用户是否在所述动画描述集合页面上执行点击操作。所述比对子模块82用于若有，则获取所述点击操作在所述动画描述集合页面中的第一位置信息，并将所述第一位置信息与所述动画描述集合页面中各效果组件各自对应的位置范围信息进行比对，确定与所述点击操作对应匹配的目标效果组件。所述第一获取子模块83用于根据所述目标效果组件，从所述外部动画库中获取与所述目标效果组件对应关联的动画代码资源。
本申请的一些实施例中，网页动画自动生成装置还包括：设置子模块，所述设置子模块用于在所述动画描述集合页面上建立平面坐标系，根据所述平面坐标系设置所述动画描述集合页面中各效果组件各自对应的位置范围信息，所述位置范围信息包括所述效果组件在所述动画描述集合页面中呈现的形状的边所对应的坐标点集合。
本申请的一些实施例中，请参阅图9，图9为本申请实施例提供的网页动画自动生成装置中的第三种细化结构框图。如图9所示，网页动画自动生成装置还包括：定位子模块91、第二获取子模块92以及第二确定子模块93。其中，所述定位子模块91用于基于所述平面坐标系，对所述点击操作进行坐标定位处理，获取所述点击操作在所述动画描述集合页面中的点击坐标点。所述第二获取子模块92用于针对所述动画描述集合页面中的任一效果组件，从所述效果组件对应的坐标点集合中获取与所述点击坐标点横坐标相同的两个坐标点的纵坐标数值，其中，所述两个坐标点分别为与点击坐标点横坐标相同的坐标点中纵坐标数值最大的坐标点和纵坐标数值最小的坐标点。所述第二确定子模块93用于将所述点击坐标点的纵坐标数值与所述两个坐标点的纵坐标数值进行比较，判断所述点击坐标点的纵坐标数值是否在所述两个坐标点的纵坐标数值之间，若在，则将所述效果组件确定为与所述点击操作对应匹配的目标效果组件。
本申请的一些实施例中，请参阅图10，图10为本申请实施例提供的网页动画自动生成装置中的第四种细化结构框图。如图10所示，网页动画自动生成装置还包括：第三获取比较子模块101和第三确定子模块102。其中，所述第三获取子模块101用于针对所述动画描述集合页面中的任一效果组件，从所述效果组件对应的坐标点集合中获取与所述点击坐标点纵坐标相同的两个坐标点的横坐标数值，其中，所述两个坐标点分别为与点击坐标点纵坐标相同的坐标点中横坐标数值最大的坐标点和横坐标数值最小的坐标点。所述第三确定子模块102用于将所述点击坐标点的横坐标数值与所述两个坐标点的横坐标数值进行比较，判断所述点击坐标点的横坐标数值是否在所述两个坐标点的横坐标数值之间，若在，则将所述效果组件确定为与所述点击操作对应匹配的目标效果组件。
本申请的一些实施例中，网页动画自动生成装置还包括：搭建子模块。所述搭建子模块用于基于vue.js框架搭建动画描述集合页面，其中，在所述动画描述集合页面设置一个或多个vue组件，一个vue组件对应表征一个效果组件。
本申请的一些实施例中，请参阅图11，图11为本申请实施例提供的一种电子设备的基本结构框图。如图11所示，该实施例的电子设备11包括：处理器111、存储器112以及存储在所述存储器112中并可在所述处理器111上运行的计算机程序113，例如网页动画自动生成方法的程序。处理器111执行所述计算机程序113时实现上述各个网页动画自动生成方法各实施例中的步骤。或者，所述处理器111执行所述计算机程序113时实现上述网页动画自动生成装置对应的实施例中各模块的功能。具体请参阅实施例中的相关描述，此处不赘述。
示例性的，所述计算机程序113可以被分割成一个或多个模块(单元)，所述一个或者多个模块被存储在所述存储器112中，并由所述处理器111执行，以完成本申请。所述一个或多个模块可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序113在所述电子设备11中的执行过程。例如，所述计算机程序113可以被分割成资源获取模块、代码生成模块以及效果展示模块，各模块具体功能如上所述。
所述电子设备可包括，但不仅限于，处理器111、存储器112。本领域技术人员可以理解，图11仅仅是电子设备11的示例，并不构成对电子设备11的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述电子设备还可以包括输入输出设备、网络接入设备、总线等。
所述处理器111可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
所述存储器112可以是所述电子设备11的内部存储单元，例如电子设备11的硬盘或内存。所述存储器112也可以是所述电子设备11的外部存储设备，例如所述电子设备11上配备的插接式硬盘，智能存储卡(Smart Media Card，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器112还可以既包括所述电子设备11的内部存储单元也包括外部存储设备。所述存储器112用于存储所述计算机程序以及所述电子设备所需的其他程序和数据。所述存储器112还可以用于暂时地存储已经输出或者将要输出的数据。
需要说明的是，上述装置/单元之间的信息交互、执行过程等内容，由于与本申请方法实施例基于同一构思，其具体功能及带来的技术效果，具体可参见方法实施例部分，此处不再赘述。
本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现可实现上述各个方法实施例中的步骤。在本实施例中，所述计算机可读存储介质可以是非易失性，也可以是易失性。
本申请实施例提供了一种计算机程序产品，当计算机程序产品在移动终端上运行时，使得移动终端执行时实现可实现上述各个方法实施例中的步骤。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括是电载波信号和电信信号。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。
以上所述实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。
Claims (10)
1.一种网页动画自动生成方法，其特征在于，包括：
调用动画描述集合页面，识别用户在所述动画描述集合页面上选取的效果组件，从外部动画库中获取与所述选取的效果组件对应关联的动画代码资源；
调用动画生成插件，根据所述动画代码资源配置所述动画生成插件内置的配置文件，以在所述动画生成插件中生成对应的动画效果代码文件；
将所述动画代码资源和所述动画效果代码文件加载至网页浏览器中，并运行所述动画效果代码文件，以在所述网页浏览器中展示所述动画效果代码文件对应的动画效果。
2.根据权利要求1所述的网页动画自动生成方法，其特征在于，所述动画生成插件内置的配置文件中包含有插件描述属性和插件背景属性，所述调用动画生成插件，根据所述动画代码资源配置所述动画生成插件内置的配置文件，以在所述动画生成插件中生成对应的动画效果代码文件的步骤，包括：
基于所述插件描述属性，触发所述动画生成插件根据所述动画代码资源生成对应的动画效果代码文件；
基于所述插件背景属性，确定所述动画生成插件生成的动画效果代码文件对应在网页浏览器中的作用位置。
3.根据权利要求1所述的网页动画自动生成方法，其特征在于，所述调用动画描述集合页面，识别用户在所述动画描述集合页面上选取的效果组件，从外部动画库中获取与所述选取的效果组件对应关联的动画代码资源的步骤，包括：
对所述动画描述集合页面中进行监听，识别用户是否在所述动画描述集合页面上执行点击操作；
若有，则获取所述点击操作在所述动画描述集合页面中的第一位置信息，并将所述第一位置信息与所述动画描述集合页面中各效果组件各自对应的位置范围信息进行比对，确定与所述点击操作对应匹配的目标效果组件；
根据所述目标效果组件，从所述外部动画库中获取与所述目标效果组件对应关联的动画代码资源。
4.根据权利要求3所述的网页动画自动生成方法，其特征在于，所述获取所述点击操作在所述动画描述集合页面中的第一位置信息，并将所述第一位置信息与所述动画描述集合页面中各效果组件各自对应的位置范围信息进行比对，确定与所述点击操作对应匹配的目标效果组件的步骤之前，还包括：
在所述动画描述集合页面上建立平面坐标系，根据所述平面坐标系设置所述动画描述集合页面中各效果组件各自对应的位置范围信息，所述位置范围信息包括所述效果组件在所述动画描述集合页面中呈现的形状的边所对应的坐标点集合。
5.根据权利要求4所述的网页动画自动生成方法，其特征在于，所述获取所述点击操作在所述动画描述集合页面中的第一位置信息，并将所述第一位置信息与所述动画描述集合页面中各效果组件各自对应的位置范围信息进行比对，确定与所述点击操作对应匹配的目标效果组件的步骤，包括：
基于所述平面坐标系，对所述点击操作进行坐标定位处理，获取所述点击操作在所述动画描述集合页面中的点击坐标点；
针对所述动画描述集合页面中的任一效果组件，从所述效果组件对应的坐标点集合中获取与所述点击坐标点横坐标相同的两个坐标点的纵坐标数值，其中，所述两个坐标点分别为与点击坐标点横坐标相同的坐标点中纵坐标数值最大的坐标点和纵坐标数值最小的坐标点；
将所述点击坐标点的纵坐标数值与所述两个坐标点的纵坐标数值进行比较，判断所述点击坐标点的纵坐标数值是否在所述两个坐标点的纵坐标数值之间，若在，则将所述效果组件确定为与所述点击操作对应匹配的目标效果组件。
6.根据权利要求5所述的网页动画自动生成方法，其特征在于，所述基于所述平面坐标系，对所述点击操作进行坐标定位处理，获取所述点击操作在所述动画描述集合页面中的点击坐标点的步骤之后，还包括：
针对所述动画描述集合页面中的任一效果组件，从所述效果组件对应的坐标点集合中获取与所述点击坐标点纵坐标相同的两个坐标点的横坐标数值，其中，所述两个坐标点分别为与点击坐标点纵坐标相同的坐标点中横坐标数值最大的坐标点和横坐标数值最小的坐标点；
将所述点击坐标点的横坐标数值与所述两个坐标点的横坐标数值进行比较，判断所述点击坐标点的横坐标数值是否在所述两个坐标点的横坐标数值之间，若在，则将所述效果组件确定为与所述点击操作对应匹配的目标效果组件。
7.根据权利要求1-6任意一项所述的网页动画自动生成方法，其特征在于，所述调用动画描述集合页面，识别用户在所述动画描述集合页面上选取的效果组件，从外部动画库中获取与所述选取的效果组件对应关联的动画代码资源的步骤之前，还包括：
基于vue.js框架搭建动画描述集合页面，其中，在所述动画描述集合页面设置一个或多个vue组件，一个vue组件对应表征一个效果组件。
8.一种网页动画自动生成装置，其特征在于，所述网页动画自动生成装置包括：
资源获取模块，用于调用动画描述集合页面，识别用户在所述动画描述集合页面上选取的效果组件，从外部动画库中获取与所述选取的效果组件对应关联的动画代码资源；
代码生成模块，用于调用动画生成插件，根据所述动画代码资源配置所述动画生成插件内置的配置文件，以在所述动画生成插件中生成对应的动画效果代码文件；
效果展示模块，用于将所述动画代码资源和所述动画效果代码文件加载至网页浏览器中，并运行所述动画效果代码文件，以在所述网页浏览器中展示所述动画效果代码文件对应的动画效果。
9.一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述方法的步骤。
10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210059408.0A CN114385270A (zh) | 2022-01-19 | 2022-01-19 | 网页动画自动生成方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210059408.0A CN114385270A (zh) | 2022-01-19 | 2022-01-19 | 网页动画自动生成方法、装置、设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114385270A true CN114385270A (zh) | 2022-04-22 |
Family
ID=81204607
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210059408.0A Pending CN114385270A (zh) | 2022-01-19 | 2022-01-19 | 网页动画自动生成方法、装置、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114385270A (zh) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050289458A1 (en) * | 2004-06-28 | 2005-12-29 | Nokia Corporation | Enhancing browsing in electronic device |
| CN105094804A (zh) * | 2015-06-18 | 2015-11-25 | 北京奇虎科技有限公司 | 在页面中添加动画的方法和装置 |
| CN108803973A (zh) * | 2018-06-01 | 2018-11-13 | 西安领讯卓越信息技术有限公司 | 一种用于移动终端的视频信息组件分组显示方法 |
| CN108804445A (zh) * | 2017-04-28 | 2018-11-13 | 北京京东尚科信息技术有限公司 | 热力图生成方法和装置 |
| CN110166842A (zh) * | 2018-11-19 | 2019-08-23 | 深圳市腾讯信息技术有限公司 | 一种视频文件操作方法、装置和存储介质 |
| CN112015482A (zh) * | 2020-07-20 | 2020-12-01 | 北京达佳互联信息技术有限公司 | 页面加载方法、装置及服务器 |
| CN113947650A (zh) * | 2021-09-30 | 2022-01-18 | 完美世界(北京)软件科技发展有限公司 | 动画处理方法、装置、电子设备及介质 |
-
2022
- 2022-01-19 CN CN202210059408.0A patent/CN114385270A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050289458A1 (en) * | 2004-06-28 | 2005-12-29 | Nokia Corporation | Enhancing browsing in electronic device |
| CN105094804A (zh) * | 2015-06-18 | 2015-11-25 | 北京奇虎科技有限公司 | 在页面中添加动画的方法和装置 |
| CN108804445A (zh) * | 2017-04-28 | 2018-11-13 | 北京京东尚科信息技术有限公司 | 热力图生成方法和装置 |
| CN108803973A (zh) * | 2018-06-01 | 2018-11-13 | 西安领讯卓越信息技术有限公司 | 一种用于移动终端的视频信息组件分组显示方法 |
| CN110166842A (zh) * | 2018-11-19 | 2019-08-23 | 深圳市腾讯信息技术有限公司 | 一种视频文件操作方法、装置和存储介质 |
| CN112015482A (zh) * | 2020-07-20 | 2020-12-01 | 北京达佳互联信息技术有限公司 | 页面加载方法、装置及服务器 |
| CN113947650A (zh) * | 2021-09-30 | 2022-01-18 | 完美世界(北京)软件科技发展有限公司 | 动画处理方法、装置、电子设备及介质 |
Non-Patent Citations (1)
| Title |
|---|
| 黄菊华: "《Vue.js入门与商城开发实战》", 30 September 2020, 机械工业出版社, pages: 116 - 117 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20200019583A1 (en) | Systems and methods for automated repair of webpages | |
| US9507480B1 (en) | Interface optimization application | |
| TW201732647A (zh) | 一種網頁腳本載入方法和裝置 | |
| CN111124906A (zh) | 基于动态埋点的跟踪方法、编译方法、装置和电子设备 | |
| CN107832052B (zh) | 展示预览页面的方法、装置和存储介质以及电子设备 | |
| CN106933887B (zh) | 一种数据可视化方法及装置 | |
| CN108197024B (zh) | 嵌入式浏览器调试方法、调试终端及计算机可读存储介质 | |
| CN108170430B (zh) | 一种界面展示的方法及系统 | |
| CN113018870A (zh) | 一种数据处理方法、装置及计算机可读存储介质 | |
| CN108664242B (zh) | 生成可视化界面的方法、装置、电子设备和可读存储介质 | |
| CN110968314A (zh) | 一种页面生成方法及装置 | |
| WO2018001041A1 (zh) | 接口实现方法、装置、机顶盒及存储介质 | |
| CN110633220A (zh) | 调试信息显示方法、装置、存储介质及电子设备 | |
| CN113778405A (zh) | 一种跨平台app构建方法、装置、系统及介质 | |
| CN113360385A (zh) | 一种测试方法、装置、设备及介质 | |
| CN113050921A (zh) | 一种网页转换方法、装置、存储介质和计算机设备 | |
| CN114385270A (zh) | 网页动画自动生成方法、装置、设备及存储介质 | |
| CN114297700B (zh) | 动静态结合的移动应用隐私协议提取方法及相关设备 | |
| US9811448B2 (en) | Event-driven software testing | |
| CN107357926B (zh) | 网页处理方法、装置及电子设备 | |
| CN112558940A (zh) | 基于表格的网站页面开发方法、装置、设备及存储介质 | |
| CN107341038B (zh) | 兼容性处理方法、装置及电子设备 | |
| CN113672837A (zh) | 一种网页水印添加方法及装置 | |
| CN114371986A (zh) | 用户界面测试用例更新方法、装置及存储介质 | |
| CN112632436A (zh) | 一种网页显示方法、装置、电子设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |