Web page animation development method, device and electronic equipment

Abstract

The embodiment of the application provides a webpage animation development method and device and electronic equipment, when webpage animation development is carried out, webpage resources and animation engine resources are acquired respectively; and based on the webpage resources and the animation engine resources, webpage animation corresponding page resource packages are combined and constructed; then, according to the page resource packages, page resource package corresponding logical calling relations are generated; and based on the logical calling relations, webpage resources and / or animation engine resources are called to generate webpage animation. In this way, on the basis of the animation engine resources, webpage animation corresponding page resource packages are combined and constructed in combination with webpage resources, webpage resources and / or animation engine resources are called according to page resource package corresponding logical calling relations to generate webpage animation, compared with webpage animation generated based on animation engine resources only, developers do not need to learn UI control knowledge related to each page in webpage animation, time consumption is reduced, and therefore, webpage game development efficiency is improved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and more particularly to a method, apparatus, and electronic device for developing web page animations. Background Technology

[0002] With the continuous development of front-end development technologies and the increasing popularity of HyperText Markup Language (HTML) Canvas technology, the demand for web animation development is also growing. Taking web games as an example, also known as web games, clientless online games, or simply page games, they are a type of online multiplayer interactive game based on a web browser. No client download is required; players only need to open a webpage to enter the game.

[0003] In existing technologies, web game development mainly involves using the game engine Cocos Creator to develop each module of the game page one by one. Even for simple game pages, the game engine Cocos Creator is used to develop each module of the game page to complete the development of the web game.

[0004] However, for the user interface (UI) controls involved in the game pages, developers need to first learn about the UI controls involved in the game pages before they can develop all the game pages in the web game one by one. However, this will result in low development efficiency for web games. Summary of the Invention

[0005] This application provides a method, apparatus, and electronic device for developing web page animations, which improves the efficiency of web page animation development.

[0006] In a first aspect, embodiments of this application provide a method for developing web page animations, which may include:

[0007] Obtain web page resources and animation engine resources respectively.

[0008] Based on the web page resources and the animation engine resources, a page resource package corresponding to the web page animation is constructed by merging them.

[0009] Based on the page resource package, generate the logical call relationship corresponding to the page resource package.

[0010] Based on the aforementioned logical call relationship, the web page resources and / or the animation engine resources are invoked to generate the web page animation.

[0011] In one possible implementation, the step of invoking the webpage resources and / or the animation engine resources based on the logical invocation relationship to generate the webpage animation includes:

[0012] A global shared object is predefined; wherein, the global shared object includes the mapping relationship between mutually called web page resources and animation engine resources.

[0013] Based on the aforementioned logical call relationship, the web page resources to be called and / or the animation engine resources to be called are invoked through the global shared object to generate the web page animation.

[0014] In one possible implementation, the step of merging and constructing the page resource package corresponding to the webpage animation based on the webpage resources and the animation engine resources includes:

[0015] Obtain the script configuration; the script configuration includes the identifiers of the storage locations of the web page resources and the animation engine resources.

[0016] Based on their respective storage locations, the web page resources and the animation engine resources are extracted.

[0017] Based on the web page resources and the animation engine resources, the page resource package corresponding to the web page animation is constructed by merging them.

[0018] In one possible implementation, the animation engine resources are stored in web page storage space, and the method further includes:

[0019] Create a target cache area in the webpage storage space; store the animation engine resources in the target cache area.

[0020] In one possible implementation, storing the animation engine resources to the target cache area includes:

[0021] Based on the static resource address of the target cache region, modify the storage path configuration of the animation engine resources.

[0022] According to the storage path configuration, the animation engine resources are stored in the target cache area.

[0023] In one possible implementation, the acquisition of webpage resources and animation engine resources respectively includes:

[0024] Use a web page creation tool to create a web page task and generate the web page resources; use an animation creation tool to create a web page animation task and generate the animation engine resources.

[0025] Secondly, embodiments of this application also provide a web page animation development apparatus, which may include:

[0026] The acquisition unit is used to acquire web page resources and animation engine resources respectively.

[0027] A construction unit is used to merge and construct the page resource package corresponding to the web page animation based on the web page resources and the animation engine resources.

[0028] The processing unit is configured to generate a logical call relationship corresponding to the page resource package based on the page resource package; and, based on the logical call relationship, call the web page resources and / or the animation engine resources to generate the web page animation.

[0029] In one possible implementation, the processing unit is specifically used to predefine a global shared object; wherein the global shared object includes a mapping relationship between mutually invoked web page resources and animation engine resources; and based on the logical invocation relationship, the processing unit invokes the web page resources to be invoked and / or the animation engine resources to be invoked through the global shared object to generate the web page animation.

[0030] In one possible implementation, the processing unit is specifically used to obtain script configuration; the script configuration includes identifiers of the storage locations of the web page resources and the animation engine resources respectively; extract the web page resources and the animation engine resources respectively according to their storage locations; and merge and construct the page resource package corresponding to the web page animation based on the web page resources and the animation engine resources.

[0031] In one possible implementation, the animation engine resources are stored in the web page storage space.

[0032] The processing unit is further configured to create a target cache area in the webpage storage space and store the animation engine resources in the target cache area.

[0033] In one possible implementation, the processing unit is specifically configured to modify the storage path configuration of the animation engine resource based on the static resource address of the target cache region; and store the animation engine resource in the target cache region according to the storage path configuration.

[0034] In one possible implementation, the acquisition unit is specifically used to create a web page task using a web page creation tool and generate the web page resources, and to create a web page animation task using an animation creation tool and generate the animation engine resources.

[0035] Thirdly, embodiments of this application also provide an electronic device, which may include a processor and a memory; wherein,

[0036] The memory is used to store computer programs.

[0037] The processor is configured to read the computer program stored in the memory and execute the web page animation development method described in any possible implementation of the first aspect above, based on the computer program in the memory.

[0038] Fourthly, embodiments of this application also provide a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, implement the web page animation development method described in any possible implementation of the first aspect.

[0039] Fifthly, embodiments of this application also provide a computer program product, including a computer program that, when executed by a processor, implements the web page animation development method described in any possible implementation of the first aspect.

[0040] Therefore, the web animation development method, apparatus, and electronic device provided in this application, when developing web animations, first acquire web resources and animation engine resources respectively; then, based on the web resources and animation engine resources, merge and construct the page resource package corresponding to the web animation; next, generate the logical call relationship corresponding to the page resource package according to the page resource package; and finally, based on the logical call relationship, call the web resources and / or animation engine resources to generate the web animation. In this way, by combining the animation engine resources with the web resources to construct the page resource package corresponding to the web animation, and calling the web resources and / or animation engine resources according to the logical call relationship corresponding to the page resource package to generate the web animation, compared with simply generating web animations based on animation engine resources, developers do not need to learn the UI control knowledge involved in each page of the web animation, reducing time consumption and thus improving the development efficiency of web games. Attached Figure Description

[0041] Figure 1 A flowchart illustrating a webpage animation development method provided in this application embodiment;

[0042] Figure 2 A schematic diagram of a framework for web game development provided in this application embodiment;

[0043] Figure 3 A flowchart illustrating a web game development method provided in this application embodiment;

[0044] Figure 4This application provides a schematic diagram illustrating the call between a resource management module based on the Vue framework and a game engine resource management module.

[0045] Figure 5 A schematic diagram of the structure of a web page animation development device provided in an embodiment of this application;

[0046] Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.

[0047] The accompanying drawings have illustrated specific embodiments of this disclosure, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concepts of this disclosure to those skilled in the art through reference to particular embodiments. Detailed Implementation

[0048] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this disclosure. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this disclosure as detailed in the appended claims.

[0049] In embodiments of the present invention, "at least one" refers to one or more, and "more than one" refers to two or more. "And / or" describes the relationship between associated objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone, where A and B can be singular or plural. In the textual description of the present invention, the character " / " generally indicates that the preceding and following associated objects have an "or" relationship.

[0050] The technical solutions provided in this application can be applied to scenarios such as page animation development, for example, web game development. Taking web game development as an example, in the prior art, when developing a web game, the game engine Cocos Creator is mainly used to develop each module of the game page one by one. Even for simple game pages, the game engine Cocos Creator is used to develop each module of the game page one by one to complete the development of the web game.

[0051] However, developers need to learn about the UI controls involved in the game pages before they can develop each game page in the web game one by one. This results in low development efficiency for web games.

[0052] Cocos Creator is a game development tool centered on content creation, implementing scripting, componentization, and data-driven approaches. It features an easy-to-use content production workflow and a powerful suite of developer tools for implementing game logic and achieving high-performance game effects.

[0053] Cocos Creator UI is a UI interface that combines different UI components to create interfaces that can adapt to screens of various resolutions, dynamically generate and update display content based on data, and support various layout methods.

[0054] To improve the development efficiency of web games, considering that web game pages are typically interactive pages composed of highly animated modules and ordinary animated modules, in order to effectively improve development efficiency without affecting the performance of web games, complex pages with highly animated effects are still developed using the Cocos Creator game engine; while static pages with ordinary animated effects are developed using HTML technology. Compared with simply generating web games based on the Cocos Creator game engine, developers do not need to learn the UI controls involved in every page of the game, reducing time consumption and thus improving the development efficiency of web games.

[0055] HTML is a primary markup language used to display web pages on the Internet. Web pages are composed of HTML and are used to display text, images, or other resources through a web browser. HTML files have the file extension .htm or .html.

[0056] Based on the above technical concept, this application provides a method for developing web page animations. When developing a web page animation, web page resources and animation engine resources can be obtained separately. Then, based on the web page resources and animation engine resources, a page resource package corresponding to the web page animation is constructed by merging them. Next, according to the page resource package, a logical calling relationship corresponding to the page resource package is generated. Based on the logical calling relationship, the web page resources and / or animation engine resources are called to generate the web page animation.

[0057] For example, in this embodiment of the application, the web page resources can be Vue framework resources, React framework resources, or Angular framework resources, etc., and can be set according to actual needs. Taking Vue framework resources as an example, the web page resources can include HTML files, JS files, Vue files, public files, etc., and can be set according to actual needs. Here, this embodiment of the application does not further limit the content included in the web page resources.

[0058] For example, in this embodiment of the application, the animation engine resource can be the Lotte animation engine framework, the Cocos animation engine framework, the Three.js animation engine framework, or the Egret animation engine framework, etc., and can be set according to actual needs. Taking the Cocos animation engine framework as an example, the animation engine resource can include HTML files, JS files, and JSON files, etc., and can be set according to actual needs.

[0059] It should be noted that, in this embodiment of the application, the web animation generated based on web page resources and animation engine resources is a widely applicable web animation framework, not the final web animation displayed on the web page. Different web animation vendors can develop their own web animations based on this web animation framework.

[0060] As can be seen from the embodiments of this application, when developing web page animations, web page resources and animation engine resources are first acquired separately; then, based on the web page resources and animation engine resources, a page resource package corresponding to the web page animation is constructed by merging them; next, a logical call relationship corresponding to the page resource package is generated according to the page resource package; and based on the logical call relationship, the web page resources and / or animation engine resources are called to generate the web page animation. In this way, by combining the animation engine resources with the web page resources to construct the page resource package corresponding to the web page animation, and then calling the web page resources and / or animation engine resources according to the logical call relationship corresponding to the page resource package to generate the web page animation, compared to simply generating web page animations based on animation engine resources, developers do not need to learn the UI control knowledge involved in each page of the web page animation, reducing time consumption and thus improving the development efficiency of web games.

[0061] It is understood that the web animation development method provided in this application embodiment can support cross-platform development. For example, it can be embedded in different platforms such as h5, application (app), and mini-program, and can be set according to actual needs.

[0062] The development method for web page animations provided in this application will be described in detail below through specific embodiments. It is understood that the following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments.

[0063] Figure 1 This is a flowchart illustrating a method for developing web page animations according to an embodiment of this application. This method can be executed by software and / or hardware devices. For example, the hardware device can be a web page animation development apparatus, which can be an electronic device. For example, please refer to [link to example]. Figure 1 As shown, the development method for this webpage animation may include:

[0064] S101. Obtain web page resources and animation engine resources respectively.

[0065] For example, web page resources can be Vue framework resources, React framework resources, or Angular framework resources, etc., and can be set according to actual needs. Taking Vue framework resources as an example, the web page resources can include HTML files, JS files, Vue files, public files, etc., and can be set according to actual needs. Here, this application embodiment does not further limit the content included in the web page resources.

[0066] For example, in this embodiment of the application, the animation engine resource can be the Lotte animation engine framework, the Cocos animation engine framework, the Three.js animation engine framework, or the Egret animation engine framework, etc., and can be set according to actual needs. Taking the Cocos animation engine framework as an example, the animation engine resource can include HTML files, JS files, and JSON files, etc., and can be set according to actual needs.

[0067] For example, when acquiring web page resources, you can use a web page creation tool to create a web page task and generate web page resources. For instance, you can use the Vue CLI scaffolding to automatically create web page tasks and generate web page resources during the task creation process, thereby acquiring the web page resources.

[0068] For example, when acquiring animation engine resources, you can use animation creation tools to create web animation tasks and generate animation engine resources. For instance, you can use the Cocos Creator tool to automatically create web animation tasks and generate animation engine resources during the task creation process, thus obtaining the animation engine resources.

[0069] After obtaining the web page resources and animation engine resources respectively, the web page animation can be generated based on the web page resources and animation engine resources, that is, the following S102 is executed:

[0070] S102. Based on web page resources and animation engine resources, merge and construct the page resource package corresponding to the web page animation.

[0071] For example, in this embodiment of the application, the page resource package may include web page resources and animation engine resources; wherein, the relevant explanations of web page resources and animation engine resources can be found above, and will not be repeated here in this embodiment of the application.

[0072] For example, when merging and constructing the page resource package corresponding to the web animation based on web page resources and animation engine resources, you can first obtain the script configuration; the script configuration includes the identifiers of the storage locations of the web page resources and animation engine resources respectively; and extract the web page resources and animation engine resources respectively according to their storage locations; and then merge and construct the page resource package corresponding to the web animation based on the web page resources and animation engine resources.

[0073] For example, in this embodiment of the application, when obtaining the script configuration, the Webpack tool can be used to modify the original default script configuration to generate a new script configuration, which is the final obtained script configuration.

[0074] Understandably, when retrieving web page resources and animation engine resources separately based on their respective storage locations, in one possible implementation, web page resources can be stored in the web page storage space, and animation engine resources can be stored in the animation engine storage space. In another possible implementation, both web page resources and animation engine resources can be stored in the animation engine storage space; for example, a cache area can be created in the animation engine storage space, and web page resources can be stored in that cache area. In yet another possible implementation, both web page resources and animation engine resources can be stored in the web page storage space. In the storage space, for example, a target cache area can be created in the web page storage space, and the animation engine resources can be stored in the target cache area. This makes it easy to run web page resources and animation engine resources in a mixed manner, thereby realizing hybrid development based on web page resources and animation engine resources. The specific settings can be configured according to actual needs. As long as the web page resources and animation engine resources can be extracted separately according to their respective storage locations, and then the page resource package corresponding to the web page animation can be constructed by merging the web page resources and animation engine resources, this application embodiment is only used as an example to illustrate these three possible implementation methods, but it does not mean that the application embodiment is limited to these.

[0075] In this embodiment, taking the creation of a target cache region in the webpage storage space and the storage of animation engine resources in the target cache region as an example, when storing animation engine resources in the target cache region, the storage path configuration of the animation engine resources can be modified based on the static resource address of the target cache region, setting the storage path of the animation engine resources to the storage path configuration of the target cache region, and then storing the animation engine resources in the target cache region according to the storage path configuration of the target cache region. By storing both animation engine resources and webpage resources in the webpage storage space, webpage resources and animation engine resources can be run together, thereby realizing hybrid development based on webpage resources and animation engine resources.

[0076] After generating the page resource package, the logical call relationship corresponding to the page resource package can be generated based on the page resource package, that is, the following S103 is executed:

[0077] S103. Generate the logical call relationship corresponding to the page resource package based on the page resource package.

[0078] For example, the logical call relationship can be a many-to-many cross-call relationship. For instance, after clicking a button on page A and successfully executing an action, page B is notified to perform the corresponding action. A can also notify page C, forming a many-to-many cross-call relationship. Alternatively, it can be a one-to-one call relationship, which can be set according to actual needs.

[0079] After generating the logical call relationship corresponding to the page resource package, the web page resources and / or animation engine resources can be called based on the logical call relationship to generate web page animations, that is, to execute the following S104:

[0080] S104. Based on logical call relationships, call web page resources and / or animation engine resources to generate web page animations.

[0081] For example, when generating a webpage animation by calling webpage resources and / or animation engine resources based on logical call relationships, a global shared object can be predefined. The global shared object includes the mapping relationship between the webpage resources and animation engine resources that call each other. Based on the logical call relationships, the webpage resources and / or animation engine resources to be called are called through the global shared object to generate the webpage animation.

[0082] For example, in the embodiments of this application, when calling web page resources and / or animation engine resources to be called through a global shared object based on logical calling relationships, a web page resource management module for managing web page resources and an animation engine resource management module for managing animation engine resources can be pre-built. Through the global shared object, the web page resource management module can be controlled to manage the calling of web page resources to be called, and / or the animation engine resource management module can be controlled to call the calling of animation engine resources to be called, thereby generating web page animations.

[0083] It should be noted that, in this embodiment, the predefined global shared object can be a window shared object supported by all browsers, representing the browser window. Since a web animation development system may include multiple sets of mutually calling web resources and animation engine resources, a global shared object can be set up for easier management. This global shared object maintains the mapping relationship between mutually calling web resources and animation engine resources. Therefore, the web resources and / or animation engine resources to be called can be accurately invoked through the global shared object.

[0084] As can be seen from the embodiments of this application, when developing web page animations, web page resources and animation engine resources are first acquired separately; then, based on the web page resources and animation engine resources, a page resource package corresponding to the web page animation is constructed by merging them; next, a logical call relationship corresponding to the page resource package is generated according to the page resource package; and based on the logical call relationship, the web page resources and / or animation engine resources are called to generate the web page animation. In this way, by combining the animation engine resources with the web page resources to construct the page resource package corresponding to the web page animation, and then calling the web page resources and / or animation engine resources according to the logical call relationship corresponding to the page resource package to generate the web page animation, compared to simply generating web page animations based on animation engine resources, developers do not need to learn the UI control knowledge involved in each page of the web page animation, reducing time consumption and thus improving the development efficiency of web games.

[0085] To facilitate understanding of the webpage animation development method provided in this application's embodiments, the following example will be a webpage game, with webpage resources as Vue framework resources and animation engine resources as game engine resources created by Cocos Creator. (See also...) Figure 2 As shown, Figure 2 This application provides a schematic diagram of a web game development framework, including creating a Vue task and acquiring Vue framework resources, and creating a Cocos Creator task and acquiring game engine resources, thereby generating a web game based on the Vue framework resources and game engine resources. See below for details. Figure 3 The relevant descriptions in the illustrated embodiments.

[0086] Figure 3 This is a flowchart illustrating a web game development method provided in an embodiment of this application. This web game development method can also be executed by software and / or hardware devices; for example, the hardware device can be a web animation development device. For example, please refer to... Figure 3 As shown, the development method of this web game may include:

[0087] S301. Use a webpage creation tool to create a Vue task and generate Vue framework resources.

[0088] When creating a Vue task, you can use the VueCli tool to create the task and receive the task name entered by the user. The VueCli tool will automatically generate Vue framework resources, including HTML files, JS files, Vue files, public files, etc., and automatically install the dependency packages required for the task.

[0089] After generating Vue framework resources, these resources can be stored in the web storage space. Furthermore, to facilitate the mixed operation of Vue framework resources and game engine resources, thus enabling hybrid development based on these resources, a target cache area can be created in the web storage space. This is achieved by executing S302 below. After creating the target cache area, the game engine resources can then be stored there.

[0090] S302. Create a target cache area in the web page storage space. This target cache area is used to store game engine resources.

[0091] S303. Use the game creation tool to create a Cocos Creator task, generate game engine resources, and store the game engine resources in the target cache area.

[0092] For example, when creating a Cocos Creator task, you can use the Cocos Creator tool to create the task and receive the task name entered by the user. The Cocos Creator tool will automatically generate game engine resources and automatically install the dependency packages required for the task.

[0093] After generating the game engine resources, they can be stored in the game engine storage space. Furthermore, since in this embodiment, when running the resource code, it is necessary to run the Vue framework resources and game engine resources together to achieve hybrid development based on Vue framework resources and game engine resources, the storage path configuration of the game engine resources can be modified based on the static resource address of the target cache area created in S302 above. According to the storage path configuration, the game engine resources are automatically copied sequentially to store them in the target cache area.

[0094] S304. Based on Vue framework resources and game engine resources, merge and build the page resource package corresponding to the web game.

[0095] For example, when merging and building a web game's corresponding page resource package based on Vue framework resources and game engine resources, you can first use the Webpack tool to modify the original default script configuration to generate a new script configuration. The script configuration includes the identifiers of the storage locations of Vue framework resources and game engine resources. Then, based on the storage locations of Vue framework resources and game engine resources, you can extract Vue framework resources and game engine resources respectively. Finally, based on Vue framework resources and game engine resources, you can merge and build the web game's corresponding page resource package.

[0096] S305. Generate the logical call relationship corresponding to the page resource package based on the page resource package.

[0097] S306. Based on logical call relationships, call Vue framework resources and / or game engine resources to generate a web game.

[0098] For example, in this embodiment of the application, when calling Vue framework resources and / or game engine resources to be called through a globally shared object based on logical call relationships, a Vue framework resource management module for managing Vue framework resources and a game engine resource management module for managing game engine resources can be pre-built. For example, see [link to example]. Figure 4 As shown, Figure 4This application provides a schematic diagram illustrating the call between a Vue framework resource management module and a game engine resource management module. When constructing the Vue framework resource management module, a Web event manager folder can be created first. Within this folder, multiple directive JS files can be created, each storing the event type, passed parameters, passed messages, and executed functions. This Web event manager constitutes the Vue framework resource management module. As the Vue framework resource management module, upon receiving a logical call triggered by a globally shared object, it notifies its own Vue task to execute the corresponding logical processing operation. For example, in this embodiment, the event type can be a registration event, a trigger event, or a cancellation event, etc., which can be specifically set according to actual needs.

[0099] For example, when building a game engine resource management module for managing game engine resources, similar to the method described above for building a Vue framework resource management module, a Cocos event manager folder can be created first. Within this folder, multiple directive JS files can be created, each storing the event type, passed parameters, passed messages, and executed functions. This Cocos event manager then constitutes the game engine resource management module for managing game engine resources. As a game engine resource management module for managing game engine resources, upon receiving a logical call triggered by a globally shared object, it notifies its own Cocos Creator task to execute the corresponding logical processing operation. For example, in this embodiment, the event type can also be a registration event, a trigger event, or a cancellation event, etc., and can be set according to actual needs.

[0100] After building the Vue framework resource management module for managing Vue framework resources and the game engine resource management module for managing game engine resources, you can use a global shared object to control the Vue framework resource management module to manage and call the Vue framework resources to be called, and / or control the game engine resource management module to call the game engine resources to be called, thereby generating the final web game.

[0101] As can be seen from the embodiments of this application, when developing a web game, a Vue task is first created using a web page creation tool, and Vue framework resources are generated. A target cache area is created in the web page storage space, which is used to store game engine resources. A Cocos Creator task is created using a game creation tool, game engine resources are generated, and the game engine resources are stored in the target cache area. Then, based on the Vue framework resources and game engine resources, the page resource package corresponding to the web game is constructed by merging them. Based on the page resource package, the logical call relationship corresponding to the page resource package is generated, and then based on the logical call relationship, the Vue framework resources and / or game engine resources are called to generate the web game. In this way, the web game is generated by combining the game engine resources with the Vue framework resources. Compared with generating a web game solely based on the game engine resources, developers do not need to learn the UI control knowledge involved in every page of the web game, which reduces time consumption and thus improves the development efficiency of web games.

[0102] Figure 5 A schematic diagram of the structure of a web page animation development apparatus 50 provided in this application embodiment is shown below. For example, please refer to [link to example diagram]. Figure 5 As shown, the development apparatus 50 for this webpage animation may include:

[0103] Acquisition unit 501 is used to acquire web page resources and animation engine resources respectively.

[0104] Building unit 502 is used to merge and build the page resource package corresponding to the web animation based on web page resources and animation engine resources.

[0105] The processing unit 503 is used to generate the logical call relationship corresponding to the page resource package based on the page resource package; and to call the web page resources and / or animation engine resources based on the logical call relationship to generate the web page animation.

[0106] Optionally, the processing unit 503 is specifically used to predefine a global shared object; wherein the global shared object includes the mapping relationship between mutually called web page resources and animation engine resources; and based on the logical calling relationship, it calls the web page resources to be called and / or the animation engine resources to be called through the global shared object to generate web page animation.

[0107] Optionally, the processing unit 503 is specifically used to obtain the script configuration; the script configuration includes the identifiers of the storage locations of the web page resources and the animation engine resources; extract the web page resources and the animation engine resources respectively according to their respective storage locations; and merge and construct the page resource package corresponding to the web page animation based on the web page resources and the animation engine resources.

[0108] Optionally, the animation engine resources are stored in the web page storage space; the processing unit 503 is also used to create a target cache area in the web page storage space and store the animation engine resources in the target cache area.

[0109] Optionally, the processing unit 503 is specifically used to modify the storage path configuration of the animation engine resources based on the static resource address of the target cache area; and to store the animation engine resources to the target cache area according to the storage path configuration.

[0110] Optionally, the acquisition unit 501 is specifically used to create web page tasks using a web page creation tool and generate web page resources, and to create web page animation tasks using an animation creation tool and generate animation engine resources.

[0111] The web animation generation apparatus 50 provided in this application embodiment can execute the technical solution of the web animation generation method in any of the above embodiments. Its implementation principle and beneficial effects are similar to those of the web animation generation method. Please refer to the implementation principle and beneficial effects of the web animation generation method. It will not be repeated here.

[0112] Figure 6 This is a schematic diagram of the structure of an electronic device 60 provided in an embodiment of this application. For example, please refer to [link / reference]. Figure 6 As shown, the electronic device 60 may include a processor 601 and a memory 602; wherein,

[0113] The memory 602 is used to store computer programs.

[0114] The processor 601 is used to read the computer program stored in the memory 602 and execute the technical solution of the web page animation generation method in any of the above embodiments according to the computer program in the memory 602.

[0115] Optionally, the memory 602 can be either standalone or integrated with the processor 601. When the memory 602 is a device independent of the processor 601, the electronic device 60 may further include a bus for connecting the memory 602 and the processor 601.

[0116] Optionally, this embodiment further includes a communication interface, which can be connected to the processor 601 via a bus. The processor 601 can control the communication interface to realize the acquisition and transmission functions of the aforementioned electronic device 60.

[0117] The electronic device 60 shown in the embodiments of this application can execute the technical solution of the web page animation generation method in any of the above embodiments. Its implementation principle and beneficial effects are similar to those of the web page animation generation method. Please refer to the implementation principle and beneficial effects of the web page animation generation method. It will not be repeated here.

[0118] This application also provides a computer-readable storage medium storing computer-executable instructions. When a processor executes the computer-executable instructions, it implements the technical solution of the web page animation generation method in any of the above embodiments. The implementation principle and beneficial effects are similar to those of the web page animation generation method, and can be found in the implementation principle and beneficial effects of the web page animation generation method. They will not be repeated here.

[0119] This application also provides a computer program product, including a computer program. When the computer program is executed by a processor, it implements the technical solution of the web page animation generation method in any of the above embodiments. Its implementation principle and beneficial effects are similar to those of the web page animation generation method. Please refer to the implementation principle and beneficial effects of the web page animation generation method. It will not be repeated here.

[0120] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the mutual coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0121] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs. Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated units described above can be implemented in hardware or in a combination of hardware and software functional units.

[0122] The integrated modules described above, implemented as software functional modules, can be stored in a computer-readable storage medium. These software functional modules, stored in a storage medium, include several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) or processor to execute some steps of the methods of the various embodiments of this application.

[0123] It should be understood that the aforementioned processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), etc. A general-purpose processor can be a microprocessor or any conventional processor. The steps of the method disclosed in this invention can be directly manifested as being executed by a hardware processor, or executed by a combination of hardware and software modules within the processor.

[0124] The memory may include high-speed RAM, and may also include non-volatile storage (NVM), such as at least one disk storage device, and may also be a USB flash drive, external hard drive, read-only memory, disk or optical disc, etc.

[0125] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of illustration, the buses shown in the accompanying drawings are not limited to a single bus or a single type of bus.

[0126] The aforementioned computer-readable storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk. The storage medium can be any available medium accessible to general-purpose or special-purpose computers.

[0127] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features therein. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of this application.

Claims

1. A method for developing web page animations, characterized in that, include: Obtain web page resources and animation engine resources respectively; wherein, the web page resources are Vue framework resources, React framework resources, or Angular framework resources, and the animation engine resources are Lottie animation engine framework, Cocos animation engine framework, Three.js animation engine framework, or Egret animation engine framework. Obtain the script configuration; the script configuration includes identifiers of the storage locations of the web page resources and the animation engine resources respectively; Extract the web page resources and the animation engine resources respectively according to their respective storage locations; Based on the web page resources and the animation engine resources, a page resource package corresponding to the web page animation is constructed by merging them. Based on the page resource package, a logical call relationship corresponding to the page resource package is generated; wherein, the logical call relationship is a many-to-many cross-call relationship, or a one-to-one call relationship; A global shared object is predefined; wherein, the global shared object includes the mapping relationship between mutually called web page resources and animation engine resources; Based on the aforementioned logical call relationship, the web page resources to be called and / or the animation engine resources to be called are invoked through the global shared object to generate the web page animation; The animation engine resources are stored in the web page storage space, and the method further includes: Create a target cache region in the webpage storage space; Based on the static resource address of the target cache region, modify the storage path configuration of the animation engine resources; According to the storage path configuration, the animation engine resources are stored in the target cache area.

2. The method according to claim 1, characterized in that, The acquisition of webpage resources and animation engine resources respectively includes: Use a web page creation tool to create a web page task and generate the web page resources; use an animation creation tool to create a web page animation task and generate the animation engine resources.

3. A web page animation development device, characterized in that, include: The acquisition unit is used to acquire web page resources and animation engine resources respectively; wherein, the web page resources are Vue framework resources, React framework resources, or Angular framework resources, and the animation engine resources are Lottie animation engine framework, Cocos animation engine framework, Three.js animation engine framework, or Egret animation engine framework. A construction unit is used to merge and construct the page resource package corresponding to the web page animation based on the web page resources and the animation engine resources; The processing unit is configured to generate a logical calling relationship corresponding to the page resource package based on the page resource package; wherein the logical calling relationship is a many-to-many cross-call relationship or a one-to-one calling relationship; and based on the logical calling relationship, call the web page resources and / or the animation engine resources to generate the web page animation; The processing unit is specifically used to predefine a globally shared object; wherein, the globally shared object includes the mapping relationship between mutually called web page resources and animation engine resources; Based on the aforementioned logical call relationship, the web page resources to be called and / or the animation engine resources to be called are invoked through the global shared object to generate the web page animation; The construction unit is specifically used to obtain script configuration; the script configuration includes identifiers of the storage locations of the web page resources and the animation engine resources respectively; Extract the web page resources and the animation engine resources respectively according to their respective storage locations; Based on the web page resources and the animation engine resources, a page resource package corresponding to the web page animation is constructed by merging them. The animation engine resources are stored in the web page storage space, and the processing unit is also used to create a target cache area in the web page storage space; Based on the static resource address of the target cache region, modify the storage path configuration of the animation engine resources; According to the storage path configuration, the animation engine resources are stored in the target cache area.

4. An electronic device, characterized in that, Includes processor and memory; among which, The memory is used to store computer programs; The processor is configured to read the computer program stored in the memory and execute the web animation development method according to any one of claims 1-2 based on the computer program in the memory.

5. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, implement the web page animation development method according to any one of claims 1-2.

6. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the method for developing web page animations as described in any one of claims 1-2.

Images