CN115439579A - 网页动画的开发方法、装置和电子设备 - Google Patents

Abstract

本申请实施例提供了一种网页动画的开发方法、装置和电子设备，在进行网页动画开发时，先分别获取网页资源，以及动画引擎资源；并基于网页资源和动画引擎资源，合并构建网页动画对应的页面资源包；再根据页面资源包，生成页面资源包对应的逻辑调用关系；并基于逻辑调用关系，调用网页资源和/或动画引擎资源，生成网页动画。这样在动画引擎资源的基础上，结合网页资源合并构建网页动画对应的页面资源包，并根据页面资源包对应的逻辑调用关系调用网页资源和/或动画引擎资源，生成网页动画，与单纯基于动画引擎资源生成网页动画相比，无需开发人员学习网页动画中每一个页面涉及的UI控件知识，降低了时间消耗，从而在提高了网页游戏的开发效率。

Description

网页动画的开发方法、装置和电子设备

技术领域

本申请涉及计算机技术领域，尤其涉及一种网页动画的开发方法、装置和电子设备。

背景技术

随着前端开发技术的不断发展以及超文本标记语言(HyperText MarkupLanguage，HTML)Canvas技术的不断普及，网页动画的开发需求也日益增多。以网页游戏为例，网页游戏又称Web游戏，无端网游，简称页游，是一种基于Web浏览器的网络在线多人互动游戏，无需下载客户端，只需要打开网页，即可进入游戏。

现有技术中，在进行网页游戏开发时，主要是通过游戏引擎Cocos Creator，对网页游戏中所有游戏页面的模块进行逐一开发，即使是简单的游戏页面，也会通过游戏引擎Cocos Creator对该游戏页面中的模块进行一一开发，从而完成网页游戏的开发。

然而，游戏页面中涉及的界面(User Interface，UI)控件，开发人员需要先学习游戏页面中涉及的UI控件知识，之后，才能对网页游戏中的所有游戏页面进行逐一开发，但是，这样会导致网页游戏的开发效率较低。

发明内容

本申请实施例提供了一种网页动画的开发方法、装置和电子设备，在进行网页动画开发时，提高了网页动画的开发效率。

第一方面，本申请实施例提供了一种网页动画的开发方法，该网页动画的开发方法可以包括：

分别获取网页资源，以及动画引擎资源。

基于所述网页资源和所述动画引擎资源，合并构建所述网页动画对应的页面资源包。

根据所述页面资源包，生成所述页面资源包对应的逻辑调用关系。

基于所述逻辑调用关系，调用所述网页资源和/或所述动画引擎资源，生成所述网页动画。

在一种可能的实现方式中，所述基于所述逻辑调用关系，调用所述网页资源和/或所述动画引擎资源，生成所述网页动画，包括：

预先定义全局共用对象；其中，所述全局共用对象中包括互相调用的网页资源和动画引擎资源之间的映射关系。

基于所述逻辑调用关系，通过所述全局共用对象调用待调用的所述网页资源和/或待调用的所述动画引擎资源，生成所述网页动画。

在一种可能的实现方式中，所述基于所述网页资源和所述动画引擎资源，合并构建所述网页动画对应的页面资源包，包括：

获取脚本配置；所述脚本配置中包括所述网页资源和所述动画引擎资源各自的存储位置的标识。

根据所述网页资源和所述动画引擎资源各自的存储位置，分别提取所述网页资源和所述动画引擎资源。

基于所述网页资源和所述动画引擎资源，合并构建所述网页动画对应的页面资源包。

在一种可能的实现方式中，所述动画引擎资源存储在网页存储空间中，所述方法还包括：

在所述网页存储空间中创建目标缓存区域；将所述动画引擎资源存储至所述目标缓存区域。

在一种可能的实现方式中，所述将所述动画引擎资源存储至所述目标缓存区域，包括：

基于所述目标缓存区域的静态资源地址，修改所述动画引擎资源的存储路径配置。

根据所述存储路径配置，将所述动画引擎资源存储至所述目标缓存区域。

在一种可能的实现方式中，所述分别获取网页资源，以及动画引擎资源，包括：

使用网页创建工具创建网页任务，并生成所述网页资源，以及使用动画创建工具创建网页动画任务，并生成所述动画引擎资源。

第二方面，本申请实施例还提供了一种网页动画的开发装置，该网页动画的开发装置可以包括：

获取单元，用于分别获取网页资源，以及动画引擎资源。

构建单元，用于基于所述网页资源和所述动画引擎资源，合并构建所述网页动画对应的页面资源包。

处理单元，用于根据所述页面资源包，生成所述页面资源包对应的逻辑调用关系；并基于所述逻辑调用关系，调用所述网页资源和/或所述动画引擎资源，生成所述网页动画。

在一种可能的实现方式中，所述处理单元，具体用于预先定义全局共用对象；其中，所述全局共用对象中包括互相调用的网页资源和动画引擎资源之间的映射关系；并基于所述逻辑调用关系，通过所述全局共用对象调用待调用的所述网页资源和/或待调用的所述动画引擎资源，生成所述网页动画。

在一种可能的实现方式中，所述处理单元，具体用于获取脚本配置；所述脚本配置中包括所述网页资源和所述动画引擎资源各自的存储位置的标识；根据所述网页资源和所述动画引擎资源各自的存储位置，分别提取所述网页资源和所述动画引擎资源；并基于所述网页资源和所述动画引擎资源，合并构建所述网页动画对应的页面资源包。

在一种可能的实现方式中，所述动画引擎资源存储在网页存储空间中。

所述处理单元，还用于在所述网页存储空间中创建目标缓存区域；并将所述动画引擎资源存储至所述目标缓存区域。

在一种可能的实现方式中，所述处理单元，具体用于基于所述目标缓存区域的静态资源地址，修改所述动画引擎资源的存储路径配置；并根据所述存储路径配置，将所述动画引擎资源存储至所述目标缓存区域。

在一种可能的实现方式中，所述获取单元，具体用于使用网页创建工具创建网页任务，并生成所述网页资源，以及使用动画创建工具创建网页动画任务，并生成所述动画引擎资源。

第三方面，本申请实施例还提供了一种电子设备，该电子设备可以包括处理器和存储器；其中，

所述存储器，用于存储计算机程序。

所述处理器，用于读取所述存储器存储的计算机程序，并根据所述存储器中的计算机程序执行上述第一方面任一种可能的实现方式中所述的网页动画的开发方法。

第四方面，本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现上述第一方面任一种可能的实现方式中所述的网页动画的开发方法。

第五方面，本申请实施例还提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时，实现上述第一方面任一种可能的实现方式中所述的网页动画的开发方法。

由此可见，本申请实施例提供的网页动画的开发方法、装置和电子设备，在进行网页动画开发时，先分别获取网页资源，以及动画引擎资源；并基于网页资源和动画引擎资源，合并构建网页动画对应的页面资源包；再根据页面资源包，生成页面资源包对应的逻辑调用关系；并基于逻辑调用关系，调用网页资源和/或动画引擎资源，生成网页动画。这样在动画引擎资源的基础上，结合网页资源合并构建网页动画对应的页面资源包，并根据页面资源包对应的逻辑调用关系调用网页资源和/或动画引擎资源，生成网页动画，与单纯基于动画引擎资源生成网页动画相比，无需开发人员学习网页动画中每一个页面涉及的UI控件知识，降低了时间消耗，从而在提高了网页游戏的开发效率。

附图说明

图1为本申请实施例提供的一种网页动画的开发方法的流程示意图；

图2为本申请实施例提供的一种网页游戏开发的框架示意图；

图3为本申请实施例提供的一种网页游戏的开发方法的流程示意图；

图4为本申请实施例提供的一种基于vue框架资源管理模块与游戏引擎资源管理模块之间的调用示意图；

图5为本申请实施例提供的一种网页动画的开发装置的结构示意图；

图6为本申请实施例提供的一种电子设备的结构示意图。

通过上述附图，已示出本公开明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本公开的概念。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

在本发明的实施例中，“至少一个”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况，其中A，B可以是单数或者复数。在本发明的文字描述中，字符“/”一般表示前后关联对象是一种“或”的关系。

本申请实施例提供的技术方案可以应用于页面动画开发的场景中，例如，网页游戏开发的场景中。以应用至网页游戏开发的场景中为例，现有技术中，在进行网页游戏开发时，主要是通过游戏引擎Cocos Creator，对网页游戏中所有游戏页面的模块进行逐一开发，即使是简单的游戏页面，也会通过游戏引擎Cocos Creator对该游戏页面中的模块进行一一开发，从而完成网页游戏的开发。

然而，游戏页面中涉及的UI控件，开发人员需要先学习游戏页面中涉及的UI控件知识，之后，才能对网页游戏中的所有游戏页面进行逐一开发，但是，这样会导致网页游戏的开发效率较低。

其中，Cocos Creator是以内容创作为核心，实现了脚本化、组件化和数据驱动的游戏开发工具。Cocos Creator具备了易于上手的内容生产工作流，以及功能强大的开发者工具套件，可用于实现游戏逻辑和高性能游戏效果。

Cocos Creator UI是通过组合不同UI组件，来生产能够适配多种分辨率屏幕的、通过数据动态生成和更新显示内容、支持多种排版布局方式的UI界面。

为了提高网页游戏的开发效率，考虑到通常情况下，网页游戏的页面是由强动效模块和普通动效模块构成的交互页面，在开发网页游戏时，为了实现在不影响网页游戏性能的情况下，有效地提高网页游戏的开发效率，针对网页游戏中的强动效的复杂页面，仍通过游戏引擎Cocos Creator，对强动效的复杂页面进行开发；针对网页游戏中的普通动效的静态页面，可通过html技术，对普通动效的静态页面进行开发，与单纯基于游戏引擎CocosCreator生成网页游戏相比，无需开发人员学习游戏页面中每一个页面涉及的UI控件知识，降低了时间消耗，从而在提高了网页游戏的开发效率。

其中，HTML是一种用于在Internet上显示Web页面的主要标记语言。网页由HTML组成，用于通过Web浏览器显示文本，图像或其他资源。HTML文件的文件扩展名为.htm或.html。

基于上述技术构思，本申请实施例提供了一种网页动画的开发方法，在进行网页动画开发时，可以先分别获取网页资源，以及动画引擎资源；并基于网页资源和动画引擎资源，合并构建网页动画对应的页面资源包；再根据页面资源包，生成页面资源包对应的逻辑调用关系；并基于逻辑调用关系，调用网页资源和/或动画引擎资源，生成网页动画。

示例的，在本申请实施例中，网页资源可以为vue框架资源、react框架资源、或者angular框架资源等，具体可以根据实际需要进行设置。以网页资源为vue框架资源为例，该网页资源可以包括html文件、js文件以及vue文件、public文件等资源，具体可以根据实际需要进行设置，在此，对于网页资源中包括的内容，本申请实施例不做进一步地限制。

示例的，在本申请实施例中，动画引擎资源可以为lottie动画引擎框架、Cocos动画引擎框架、three.js动画引擎框架、或者egret动画引擎框架等，具体可以根据实际需要进行设置。以动画引擎资源为Cocos动画引擎框架为例，该动画引擎资源可以包括html文件、js文件以及json文件等资源，具体可以根据实际需要进行设置。

需要说明的是，本申请实施例中，基于网页资源和动画引擎资源共同生成的网页动画为可广泛应用的网页动画框架，并不是最终在网页上显示的网页动画，不同的网页动画商可以在该网页动画框架的基础上，开发各自的网页动画。

可以看出，本申请实施例中，在进行网页动画开发时，先分别获取网页资源，以及动画引擎资源；并基于网页资源和动画引擎资源，合并构建网页动画对应的页面资源包；再根据页面资源包，生成页面资源包对应的逻辑调用关系；并基于逻辑调用关系，调用网页资源和/或动画引擎资源，生成网页动画。这样在动画引擎资源的基础上，结合网页资源合并构建网页动画对应的页面资源包，并根据页面资源包对应的逻辑调用关系调用网页资源和/或动画引擎资源，生成网页动画，与单纯基于动画引擎资源生成网页动画相比，无需开发人员学习网页动画中每一个页面涉及的UI控件知识，降低了时间消耗，从而在提高了网页游戏的开发效率。

可以理解的是，本申请实施例提供的网页动画的开发方法，可跨平台支持，例如，可以内嵌到h5、应用程序(Application，app)、小程序等不同平台，具体可以根据实际需要进行设置。

下面，将通过具体的实施例对本申请提供的网页动画的开发方法进行详细地说明。可以理解的是，下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。

图1为本申请实施例提供的一种网页动画的开发方法的流程示意图，该网页动画的开发方法可以由软件和/或硬件装置执行，例如，该硬件装置可以为网页动画的开发装置，该网页动画的开发装置可以为电子设备。示例的，请参见图1所示，该网页动画的开发方法可以包括：

S101、分别获取网页资源，以及动画引擎资源。

示例的，网页资源可以为vue框架资源、react框架资源、或者angular框架资源等，具体可以根据实际需要进行设置。以网页资源为vue框架资源为例，该网页资源可以包括html文件、js文件以及vue文件、public文件等资源，具体可以根据实际需要进行设置，在此，对于网页资源中包括的内容，本申请实施例不做进一步地限制。

示例的，在本申请实施例中，动画引擎资源可以为lottie动画引擎框架、Cocos动画引擎框架、three.js动画引擎框架、或者egret动画引擎框架等，具体可以根据实际需要进行设置。以动画引擎资源为Cocos动画引擎框架为例，该动画引擎资源可以包括html文件、js文件以及json文件等资源，具体可以根据实际需要进行设置。

示例的，在获取网页资源时，可以使用网页创建工具创建网页任务，并生成网页资源。例如，可以使用VueCli脚手架自动创建网页任务，并在网页任务创建过程中，生成网页资源，从而获取到网页资源。

示例的，在获取动画引擎资源时，可以使用动画创建工具创建网页动画任务，并生成动画引擎资源。例如，可以使用Cocos Creator工具自动创建网页动画任务，并在网页动画任务创建过程中，生成动画引擎资源，从而获取到动画引擎资源。

在分别获取网页资源和动画引擎资源后，就可以基于网页资源和动画引擎资源生成网页动画，即执行下述S102：

S102、基于网页资源和动画引擎资源，合并构建网页动画对应的页面资源包。

示例的，在本申请实施例中，页面资源包可以包括网页资源和动画引擎资源；其中，网页资源和动画引擎资源的相关解释，可参见上述所示，在此，本申请实施例不再进行赘述。

示例的，在基于网页资源和动画引擎资源，合并构建网页动画对应的页面资源包时，可以先获取脚本配置；脚本配置中包括网页资源和动画引擎资源各自的存储位置的标识；并根据网页资源和动画引擎资源各自的存储位置，分别提取网页资源和动画引擎资源；再基于网页资源和动画引擎资源，合并构建网页动画对应的页面资源包。

示例的，本申请实施例中，在获取脚本配置时，可以使用WebPack工具修改原始默认的脚本配置，以生成新的脚本配置，该新的脚本配置即为最终获取的脚本配置。

可以理解的是，在根据网页资源和动画引擎资源各自的存储位置，分别提取网页资源和动画引擎资源时，在一种可能的实现方式中，网页资源可以存储在网页存储空间中，动画引擎资源可以存储在动画引擎存储空间中；在另一种可能的实现方式中，网页资源可以存储在动画引擎存储空间中，动画引擎资源也存储在动画引擎存储空间中，例如，可以在动画引擎存储空间中创建一个缓存区域，并将网页资源存储至该缓存区域中；在又一种可能的实现方式中，网页资源可以存储在网页存储空间中，动画引擎资源也存储在网页存储空间中，例如，可以在网页存储空间中创建一个目标缓存区域，并将动画引擎资源存储至该目标缓存区域中，这样可以便于将网页资源和动画引擎资源混合运行，从而实现基于网页资源和动画引擎资源的混合开发，具体可以根据实际需要进行设置，只要可以根据网页资源和动画引擎资源各自的存储位置，分别提取网页资源和动画引擎资源；再基于网页资源和动画引擎资源，合并构建网页动画对应的页面资源包即可，在此，本申请实施例只是以这三种可能的实现方式为例进行说明，但并不代表本申请实施例仅局限于此。

本申请实施例中，以在网页存储空间中创建目标缓存区域；将动画引擎资源存储至目标缓存区域为例，示例的，在将动画引擎资源存储至目标缓存区域时，可以先基于目标缓存区域的静态资源地址，修改动画引擎资源的存储路径配置，将动画引擎资源的存储路径配置为目标缓存区域的存储路径配置，并根据目标缓存区域的存储路径配置，将动画引擎资源存储至目标缓存区域。通过将动画引擎资源和网页资源均存储至网页存储空间中，可以将网页资源和动画引擎资源混合运行，从而实现基于网页资源和动画引擎资源的混合开发。

在生成页面资源包后，可以基于页面资源包生成该页面资源包对应的逻辑调用关系，即执行下述S103：

S103、根据页面资源包，生成页面资源包对应的逻辑调用关系。

示例的，逻辑调用关系可以为多对多模式交叉调用关系，例如，A页面点击某个按钮执行动作成功后，通知B页面做相应的执行，A也可以通知C，形成多对多模式交叉调用；也可以为一对一调用关系，具体可以根据实际需要进行设置。

在生成页面资源包对应的逻辑调用关系后，就可以基于逻辑调用关系，调用网页资源和/或动画引擎资源，生成网页动画，即执行下述S104：

S104、基于逻辑调用关系，调用网页资源和/或动画引擎资源，生成网页动画。

示例的，在基于逻辑调用关系，调用网页资源和/或动画引擎资源，生成网页动画时，可以预先定义全局共用对象；其中，全局共用对象中包括互相调用的网页资源和动画引擎资源之间的映射关系；基于逻辑调用关系，通过全局共用对象调用待调用的网页资源和/或待调用的动画引擎资源，生成网页动画。

示例的，在本申请实施例中，基于逻辑调用关系，通过全局共用对象调用待调用的网页资源和/或待调用的动画引擎资源时，可以预先构建用于管理网页资源的网页资源管理模块，以及用于管理动画引擎资源的动画引擎资源管理模块，并通过全局共用对象，控制网页资源管理模块管理调用待调用的网页资源，和/或控制动画引擎资源管理模块调用待调用的动画引擎资源，从而生成网页动画。

需要说明的是，在本申请实施例中，预先定义的全局共用对象可以为一个所有浏览器都支持的window共用对象，它代表浏览器的窗口。由于网页动画的开发系统中可能会包括多组互相调用的网页资源和动画引擎资源，为了便于管理，因此，可以设置全局共用对象，该全局共用对象中维护有互相调用的网页资源和动画引擎资源之间的映射关系，因此，通过全局共用对象可以准确地调用待调用的网页资源和/或待调用的动画引擎资源。

可以看出，本申请实施例中，在进行网页动画开发时，先分别获取网页资源，以及动画引擎资源；并基于网页资源和动画引擎资源，合并构建网页动画对应的页面资源包；再根据页面资源包，生成页面资源包对应的逻辑调用关系；并基于逻辑调用关系，调用网页资源和/或动画引擎资源，生成网页动画。这样在动画引擎资源的基础上，结合网页资源合并构建网页动画对应的页面资源包，并根据页面资源包对应的逻辑调用关系调用网页资源和/或动画引擎资源，生成网页动画，与单纯基于动画引擎资源生成网页动画相比，无需开发人员学习网页动画中每一个页面涉及的UI控件知识，降低了时间消耗，从而在提高了网页游戏的开发效率。

为了便于理解本申请实施例提供的网页动画的开发方法，下面，将以网页动画为网页游戏，网页资源为vue框架资源、且动画引擎资源为Cocos Creator创建的游戏引擎资源为例，可参见图2所示，图2为本申请实施例提供的一种网页游戏开发的框架示意图，其中包括创建vue任务，并获取vue框架资源，以及创建Cocos Creator任务，并获取游戏引擎资源，从而基于vue框架资源和游戏引擎资源生成网页游戏，具体可参见下述图3所示的实施例中的相关描述。

图3为本申请实施例提供的一种网页游戏的开发方法的流程示意图，该网页游戏的开发方法同样可以由软件和/或硬件装置执行，例如，该硬件装置可以为网页动画的开发装置。示例的，请参见图3所示，该网页游戏的开发方法可以包括：

S301、使用网页创建工具创建vue任务，并生成vue框架资源。

在创建vue任务时，可以使用VueCli工具创建vue任务，并接收用户输入的任务名称，VueCli工具会自动生成包括html文件、js文件以及vue文件、public文件等资源的vue框架资源，并且自动安装任务所需依赖包。

在生成vue框架资源后，可以将vue框架资源存储在网页存储空间中。此外，为了便于将vue框架资源和游戏引擎资源混合运行，从而实现基于vue框架资源和游戏引擎资源的混合开发，可以在网页存储空间中创建一个目标缓存区域，即执行下述S302，这样在创建好目标缓存区域后，就可以将游戏引擎资源存储至该目标缓存区域中。

S302、在网页存储空间中创建目标缓存区域，该目标缓存区域用于存储游戏引擎资源。

S303、使用游戏创建工具创建Cocos Creator任务，生成游戏引擎资源，并将游戏引擎资源存储至目标缓存区域中。

示例的，在创建Cocos Creator任务时，可以使用Cocos Creator工具进行创建Cocos Creator任务，并接收用户输入的任务名称，Cocos Creator工具会自动生成游戏引擎资源，并且自动安装任务所需依赖包。

在生成游戏引擎资源后，可以将游戏引擎资源存储在游戏引擎存储空间中。此外，由于在本申请实施例中，运行资源代码时，需要将vue框架资源和游戏引擎资源混合运行，从而实现基于vue框架资源和游戏引擎资源的混合开发，因此，可以基于上述S302中创建的目标缓存区域的静态资源地址，修改游戏引擎资源的存储路径配置；根据存储路径配置，依次对游戏引擎资源进行自动化复制，以将游戏引擎资源存储至目标缓存区域中。

S304、基于vue框架资源和游戏引擎资源，合并构建网页游戏对应的页面资源包。

示例的，在基于vue框架资源和游戏引擎资源，合并构建网页游戏对应的页面资源包时，可以先使用WebPack工具修改原始默认的脚本配置，以生成新的脚本配置；脚本配置中包括vue框架资源和游戏引擎资源各自的存储位置的标识；并根据vue框架资源和游戏引擎资源各自的存储位置，分别提取vue框架资源和游戏引擎资源；再基于vue框架资源和游戏引擎资源，合并构建网页游戏对应的页面资源包。

S305、根据页面资源包，生成页面资源包对应的逻辑调用关系。

S306、基于逻辑调用关系，调用vue框架资源和/或游戏引擎资源，生成网页游戏。

示例的，在本申请实施例中，基于逻辑调用关系，通过全局共用对象调用待调用的vue框架资源和/或待调用的游戏引擎资源时，可以预先构建用于管理vue框架资源的vue框架资源管理模块，以及用于管理游戏引擎资源的游戏引擎资源管理模块。示例的，可参见图4所示，图4为本申请实施例提供的一种基于vue框架资源管理模块与游戏引擎资源管理模块之间的调用示意图，在构建用于管理vue框架资源的vue框架资源管理模块时，可以先创建Web事件管理器文件夹，并在该Web事件管理器文件夹中创建多个指令js，每个指令js分别存放事件类型、传递参数、传递消息、执行函数，该Webevents事件管理器即为用于管理vue框架资源的vue框架资源管理模块。作为用于管理vue框架资源的vue框架资源管理模块，在接收到全局共用对象触发的逻辑调用操作时，通知自身的vue任务执行相应的逻辑处理操作。示例的，在本申请实施例中，事件类型可以为注册事件、触发事件以及取消事件等，具体可以根据实际需要进行设置。

示例的，在构建用于管理游戏引擎资源的游戏引擎资源管理模块时，与上述构建vue框架资源管理模块的方法类似，可以先创建Cocos事件管理器文件夹，并在该Cocos事件管理器文件夹中创建多个指令js，每个指令js分别存放事件类型、传递参数、传递消息、执行函数，该Cocos事件管理器即为用于管理游戏引擎资源的游戏引擎资源管理模块。作为用于管理管理游戏引擎资源的游戏引擎资源管理模块，在接收到全局共用对象触发的逻辑调用操作时，通知自身的Cocos Creator任务执行相应的逻辑处理操作。示例的，在本申请实施例中，事件类型同样可以为注册事件、触发事件以及取消事件等，具体可以根据实际需要进行设置。

在分别构建得到用于管理vue框架资源的vue框架资源管理模块，以及用于管理游戏引擎资源的游戏引擎资源管理模块之后，就可以通过全局共用对象，控制vue框架资源管理模块管理调用待调用的vue框架资源，和/或控制游戏引擎资源管理模块调用待调用的游戏引擎资源，从而生成最终的网页游戏。

可以看出，本申请实施例中，在进行网页游戏开发时，先使用网页创建工具创建vue任务，并生成vue框架资源；在网页存储空间中创建目标缓存区域，该目标缓存区域用于存储游戏引擎资源；使用游戏创建工具创建Cocos Creator任务，生成游戏引擎资源，并将游戏引擎资源存储至目标缓存区域中；再基于vue框架资源和游戏引擎资源，合并构建网页游戏对应的页面资源包；并根据页面资源包，生成页面资源包对应的逻辑调用关系，再基于逻辑调用关系，调用vue框架资源和/或游戏引擎资源，生成网页游戏。这样在游戏引擎资源的基础上，结合vue框架资源共同生成网页游戏，与单纯基于游戏引擎资源生成网页游戏相比，无需开发人员学习网页游戏中每一个页面涉及的UI控件知识，降低了时间消耗，从而在提高了网页游戏的开发效率。

图5为本申请实施例提供的一种网页动画的开发装置50的结构示意图，示例的，请参见图5所示，该网页动画的开发装置50可以包括：

获取单元501，用于分别获取网页资源，以及动画引擎资源。

构建单元502，用于基于网页资源和动画引擎资源，合并构建网页动画对应的页面资源包。

处理单元503，用于根据页面资源包，生成页面资源包对应的逻辑调用关系；并基于逻辑调用关系，调用网页资源和/或动画引擎资源，生成网页动画。

可选的，处理单元503，具体用于预先定义全局共用对象；其中，全局共用对象中包括互相调用的网页资源和动画引擎资源之间的映射关系；并基于逻辑调用关系，通过全局共用对象调用待调用的网页资源和/或待调用的动画引擎资源，生成网页动画。

可选的，处理单元503，具体用于获取脚本配置；脚本配置中包括网页资源和动画引擎资源各自的存储位置的标识；根据网页资源和动画引擎资源各自的存储位置，分别提取网页资源和动画引擎资源；并基于网页资源和动画引擎资源，合并构建网页动画对应的页面资源包。

可选的，动画引擎资源存储在网页存储空间中；处理单元503，还用于在网页存储空间中创建目标缓存区域；并将动画引擎资源存储至目标缓存区域。

可选的，处理单元503，具体用于基于目标缓存区域的静态资源地址，修改动画引擎资源的存储路径配置；并根据存储路径配置，将动画引擎资源存储至目标缓存区域。

可选的，获取单元501，具体用于使用网页创建工具创建网页任务，并生成网页资源，以及使用动画创建工具创建网页动画任务，并生成动画引擎资源。

本申请实施例提供的网页动画的生成装置50，可以执行上述任一实施例中网页动画的生成方法的技术方案，其实现原理以及有益效果与网页动画的生成方法的实现原理及有益效果类似，可参见网页动画的生成方法的实现原理及有益效果，此处不再进行赘述。

图6为本申请实施例提供的一种电子设备60的结构示意图，示例的，请参见图6所示，该电子设备60可以包括处理器601和存储器602；其中，

所述存储器602，用于存储计算机程序。

所述处理器601，用于读取所述存储器602存储的计算机程序，并根据所述存储器602中的计算机程序执行上述任一实施例中的网页动画的生成方法的技术方案。

可选地，存储器602既可以是独立的，也可以跟处理器601集成在一起。当存储器602是独立于处理器601之外的器件时，电子设备60还可以包括：总线，用于连接存储器602和处理器601。

可选地，本实施例还包括：通信接口，该通信接口可以通过总线与处理器601连接。处理器601可以控制通信接口来实现上述电子设备60的获取和发送的功能。

本申请实施例所示的电子设备60，可以执行上述任一实施例中网页动画的生成方法的技术方案，其实现原理以及有益效果与网页动画的生成方法的实现原理及有益效果类似，可参见网页动画的生成方法的实现原理及有益效果，此处不再进行赘述。

本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现上述任一实施例中网页动画的生成方法的技术方案，其实现原理以及有益效果与网页动画的生成方法的实现原理及有益效果类似，可参见网页动画的生成方法的实现原理及有益效果，此处不再进行赘述。

本申请实施例还提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时，实现上述任一实施例中网页动画的生成方法的技术方案，其实现原理以及有益效果与网页动画的生成方法的实现原理及有益效果类似，可参见网页动画的生成方法的实现原理及有益效果，此处不再进行赘述。

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

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元展示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

上述以软件功能模块的形式实现的集成的模块，可以存储在一个计算机可读取存储介质中。上述软件功能模块存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(英文：processor)执行本申请各个实施例方法的部分步骤。

应理解的是，上述处理器可以是中央处理单元(英文：Central Processing Unit，简称：CPU)，还可以是其他通用处理器、数字信号处理器(英文：Digital SignalProcessor，简称：DSP)、专用集成电路(英文：Application Specific IntegratedCircuit，简称：ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合发明所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。

存储器可能包含高速RAM存储器，也可能还包括非易失性存储NVM，例如至少一个磁盘存储器，还可以为U盘、移动硬盘、只读存储器、磁盘或光盘等。

总线可以是工业标准体系结构(Industry Standard Architecture，ISA)总线、外部设备互连(Peripheral Component，PCI)总线或扩展工业标准体系结构(ExtendedIndustry Standard Architecture，EISA)总线等。总线可以分为地址总线、数据总线、控制总线等。为便于表示，本申请附图中的总线并不限定仅有一根总线或一种类型的总线。

上述计算机可读存储介质可以是由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。存储介质可以是通用或专用计算机能够存取的任何可用介质。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims (10)

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

分别获取网页资源，以及动画引擎资源；

基于所述网页资源和所述动画引擎资源，合并构建所述网页动画对应的页面资源包；

根据所述页面资源包，生成所述页面资源包对应的逻辑调用关系；

基于所述逻辑调用关系，调用所述网页资源和/或所述动画引擎资源，生成所述网页动画。

2.根据权利要求1所述的方法，其特征在于，所述基于所述逻辑调用关系，调用所述网页资源和/或所述动画引擎资源，生成所述网页动画，包括：

预先定义全局共用对象；其中，所述全局共用对象中包括互相调用的网页资源和动画引擎资源之间的映射关系；

基于所述逻辑调用关系，通过所述全局共用对象调用待调用的所述网页资源和/或待调用的所述动画引擎资源，生成所述网页动画。

3.根据权利要求1所述的方法，其特征在于，所述基于所述网页资源和所述动画引擎资源，合并构建所述网页动画对应的页面资源包，包括：

获取脚本配置；所述脚本配置中包括所述网页资源和所述动画引擎资源各自的存储位置的标识；

根据所述网页资源和所述动画引擎资源各自的存储位置，分别提取所述网页资源和所述动画引擎资源；

基于所述网页资源和所述动画引擎资源，合并构建所述网页动画对应的页面资源包。

4.根据权利要求3所述的方法，其特征在于，所述动画引擎资源存储在网页存储空间中，所述方法还包括：

在所述网页存储空间中创建目标缓存区域；

将所述动画引擎资源存储至所述目标缓存区域。

5.根据权利要求4所述的方法，其特征在于，所述将所述动画引擎资源存储至所述目标缓存区域，包括：

基于所述目标缓存区域的静态资源地址，修改所述动画引擎资源的存储路径配置；

根据所述存储路径配置，将所述动画引擎资源存储至所述目标缓存区域。

6.根据权利要求1-5任一项所述的方法，其特征在于，所述分别获取网页资源，以及动画引擎资源，包括：

使用网页创建工具创建网页任务，并生成所述网页资源，以及使用动画创建工具创建网页动画任务，并生成所述动画引擎资源。

7.一种网页动画的开发装置，其特征在于，包括：

获取单元，用于分别获取网页资源，以及动画引擎资源；

构建单元，用于基于所述网页资源和所述动画引擎资源，合并构建所述网页动画对应的页面资源包；

处理单元，用于根据所述页面资源包，生成所述页面资源包对应的逻辑调用关系；并基于所述逻辑调用关系，调用所述网页资源和/或所述动画引擎资源，生成所述网页动画。

8.一种电子设备，其特征在于，包括处理器和存储器；其中，

所述存储器，用于存储计算机程序；

所述处理器，用于读取所述存储器存储的计算机程序，并根据所述存储器中的计算机程序执行上述权利要求1-6任一项所述的网页动画的开发方法。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现上述权利要求1-6任一项所述的网页动画的开发方法。

10.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时，实现上述权利要求1-6任一项所述的网页动画的开发方法。

Images