Animation loading implementation method, hybrid development application and storage medium

Abstract

A loading animation implementation method, a hybrid development application and a storage medium, the method comprising: when an instruction for opening a page input by a user is received, selecting a type of loading animation from preset loading animation types as a current loading animation, and starting the current loading animation; and after an instruction that loading of the native page in the current page and the web sub-page nested in the native page is completed is received, closing the currently loaded animation. According to the animation loading implementation method of the scheme, only one loading animation is displayed in the page loading process of the mixed development application, and compared with a traditional animation loading implementation mode of the mixed development application, the animation loading implementation method of the scheme has the advantages that the animation loading process is greatly simplified, and the animation loading efficiency is improved. And the problems of double loading animations, white screen, slow playing of loading animations, disordered calling of various animations and the like in a traditional animation loading mode are also avoided.

Description

Technical Field

[0001] The embodiments of the present application relate to but are not limited to the field of computer software, and in particular to a method for implementing a loading animation, a hybrid development application, and a storage medium. Background Art

[0002] In order to save development resources and maintenance costs, hybrid development mode has gradually become a trend. Hybrid development mode is an application development method that combines native development and web development technologies. It combines Web technology and native APIs to achieve one-time development and multi-platform compatibility. This model usually consists of two parts: "HTML5 cloud website + APP application client". The native code part uses WebView plug-ins or other frameworks to provide containers for H5, and the main business implementation and interface display of the program rely on H5-related Web technologies. The advantages of the hybrid development model are its high development efficiency, relatively low cost, and rapid iteration and update. Due to the use of Web technology, developers can write a set of code and run it on multiple platforms, saving a lot of time and resources. In addition, the hybrid development model also supports cross-platform, low maintenance costs, and has the experience and performance advantages of native apps.

[0003] However, due to the characteristics of the hybrid development mode, the loading animation (i.e. loading animation, also referred to as loading) in the hybrid development application often has problems such as double loading animation, white screen, slow loading animation start, confusion of multiple animation calls, etc. Therefore, we need to improve the loading animation of hybrid development applications. Summary of the invention

[0004] The following is a summary of the subject matter described in detail herein. This summary is not intended to limit the scope of the claims.

[0005] The present application provides a loading animation implementation method, a hybrid development application and a storage medium, which implement an advanced animation loading method and can solve many problems existing in the prior art when hybrid development applications are loading animations, such as double loading animations, white screen, slow loading animation start, confusion in calling multiple loading animations, and user complaints about application freezing.

[0006] An embodiment of the present application provides a loading animation implementation method, which is applied to a hybrid development application, wherein the page in the hybrid development application is implemented based on a native page nested in a web sub-page, and the method comprises: upon receiving an instruction input by a user to open a page, selecting a type of loading animation from preset loading animation types as the current loading animation, and starting the current loading animation; upon receiving an instruction that the loading of the native page in the current page and the web sub-page nested in the native page is complete, closing the current loading animation.

[0007] In an exemplary embodiment of the present application, the instruction to open a page includes at least: an instruction to open a hybrid development application, and an instruction to open a page in the hybrid development application.

[0008] In an exemplary embodiment of the present application, the preset loading animation types include at least: animation type, progress bar type, text type and startup background image type; selecting a loading animation from the preset loading animation types includes: selecting a type of loading animation from the preset loading animation types as the current loading animation according to the type of the current page and the preset matching strategy.

[0009] In an exemplary embodiment of the present application, after starting the current loading animation, the method further includes: loading a native page in the current page, and a web sub-page nested in the native page.

[0010] In an exemplary embodiment of the present application, the loading of the native page in the current page and the web sub-page nested in the native page includes: instantiating the native page and rendering the native page according to a preset first layout; obtaining first data by calling a first data interface related to the native page; and loading the web sub-page according to the first data.

[0011] In an exemplary embodiment of the present application, loading the web sub-page according to the first data includes: instantiating the web sub-page; obtaining second data by calling a second data interface related to the web sub-page; and rendering the web sub-page according to the second data and a preset second layout.

[0012] In an exemplary embodiment of the present application, the loading animation is implemented based on an animation manager, and the animation manager is used to manage the loading animation, including: starting, shutting down, and instantiating.

[0013] In an exemplary embodiment of the present application, after receiving an instruction that the native page in the current page and the web sub-page nested in the native page have completed loading, the current loading animation is closed, including: monitoring whether the native page and the web sub-page in the current page have completed loading, and after the native page and the web sub-page are loaded, sending an animation closing instruction; after the animation manager receives the animation closing instruction, it closes the current loading animation.

[0014] In an exemplary embodiment of the present application, the monitoring of whether the native page and web sub-page in the current page are loaded is implemented by notifying the management center; after loading the native page in the current page and the web sub-page nested in the native page, the method also includes: sending the animation closing instruction through the notification management center.

[0015] An embodiment of the present application also provides a hybrid development application, including: a memory and a processor; the memory is used to store a program for loading animation implementation; the processor is used to read the program for loading animation implementation and execute the loading animation implementation method as described in any embodiment of the present application.

[0016] An embodiment of the present application also provides an electronic device, comprising: a memory and a processor; the memory is used to store a program for implementing a loading animation; the processor is used to read the program for implementing a loading animation and execute a method for implementing a loading animation as described in any embodiment of the present application.

[0017] An embodiment of the present application further provides a non-transitory computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, wherein the computer program, when executed by a processor, can implement the loading animation implementation method as described in any embodiment of the present application.

[0018] Compared with the related art, the embodiment of the present application provides a method for implementing a loading animation, a hybrid development application, and a storage medium. The technical solution of the solution is as follows: when receiving an instruction to open a page input by a user, a type of loading animation is selected from the preset loading animation types as the current loading animation, and the current loading animation is started; after receiving an instruction that the native page in the current page and the web sub-page nested in the native page have been loaded, the current loading animation is closed. Through this solution, the loading of the loading animation in the hybrid development application can be greatly simplified, and the problems of double loading animation, white screen, slow loading animation start, confusion of multiple animation calls, etc. in the traditional loading animation of the hybrid development application can be avoided, which significantly improves the psychological experience of users when waiting for the page to load, and effectively reduces the customer complaint rate of the hybrid development application.

[0019] Other features and advantages of the embodiments of the present application will be described in the subsequent description, and partly become apparent from the description, or can be understood by implementing the embodiments of the present application. The purpose and other advantages of the embodiments of the present application can be achieved and obtained by the structures specifically pointed out in the description, claims and drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] The accompanying drawings are used to provide an understanding of the technical solution of the present application and constitute a part of the specification. Together with the embodiments of the present application, they are used to explain the technical solution of the present application and do not constitute a limitation on the technical solution of the present application.

[0021] Figure 1 A flowchart of a method for implementing a loading animation according to an embodiment of the present application;

[0022] Figure 2 A specific flow chart of a method for implementing a loading animation according to an embodiment of the present application;

[0023] Figure 3 This is a schematic diagram of a hybrid development application according to an embodiment of the present application. DETAILED DESCRIPTION

[0024] The present application describes multiple embodiments, but the description is exemplary rather than restrictive, and it is obvious to those skilled in the art that there may be more embodiments and implementations within the scope of the embodiments described in the present application. Although many possible feature combinations are shown in the drawings and discussed in the specific embodiments, many other combinations of the disclosed features are also possible. Unless specifically limited, any feature or element of any embodiment may be used in combination with any other feature or element in any other embodiment, or may replace any other feature or element in any other embodiment.

[0025] The present application includes and contemplates combinations of features and elements known to those of ordinary skill in the art. The embodiments, features and elements disclosed in the present application may also be combined with any conventional features or elements to form a unique invention scheme defined by the claims. Any features or elements of any embodiment may also be combined with features or elements from other invention schemes to form another unique invention scheme defined by the claims. Therefore, it should be understood that any feature shown and / or discussed in the present application may be implemented individually or in any appropriate combination. Therefore, except for the limitations made according to the attached claims and their equivalents, the embodiments are not subject to other restrictions. In addition, various modifications and changes may be made within the scope of protection of the attached claims.

[0026] First, some terms mentioned in this application are explained:

[0027] Learning machine application: software installed on the learning machine system.

[0028] Dual-end: In this application, it refers to the client and the web.

[0029] Hybrid development mode: an application development method that combines native development and web development technologies.

[0030] Hybrid development application: an application developed using a hybrid development model.

[0031] Web page: A web page is an information display interface accessed through the Internet that contains multiple elements such as text, images, audio, video, etc. It is an important carrier for information display and interaction on the Internet.

[0032] Loading: It means "loading" or "loading in progress". It indicates that the system, software, web page, etc. is acquiring data, resources, or performing specific tasks from a storage device or network in order to fully present content or provide services. Loading in this application refers to the loading animation during the data loading process, which can include startup background images, spinning circles, progress bars, animations / sound effects, etc.

[0033] The pages in traditional hybrid development applications (i.e., applications developed in hybrid mode) are implemented based on native pages nested with web subpages. When these applications are loading pages, they usually display loading animations in the following ways: (1) Display a loading page on the native page and a web subpage respectively. This may easily lead to problems such as double loading, slow loading animation start, and confusion in calling multiple animations. (2) Do not display loading on the native interface, but display loading on the web subpage (or display loading on the native interface but not on the web subpage, or do not display loading on both the native interface and the web subpage). In this way, when the page that does not display loading fails to load or loads slowly, a white screen problem may easily occur, which greatly affects the user experience. (3) Loading fails or a certain loading page cannot be closed or some loading pages cannot be loaded normally due to multiple loading solutions. These problems will affect the user experience and lead to user complaints.

[0034] The present application provides a method for implementing a loading animation, which is applied to a hybrid development application, wherein a page in the hybrid development application is implemented based on a native page nested with a web sub-page, and the method comprises:

[0035] When receiving a page opening instruction input by a user, selecting a type of loading animation from preset loading animation types as a current loading animation, and starting the current loading animation;

[0036] After receiving an instruction that the native page in the current page and the web sub-page nested in the native page have completed loading, the current loading animation is closed.

[0037] like Figure 1 As shown, a method for implementing a loading animation provided by the present application may include the following steps:

[0038] Step S110: upon receiving a user input instruction to open a page, selecting a type of loading animation from preset loading animation types as a current loading animation (i.e., a loading animation), and starting the current loading animation;

[0039] Step S120: after receiving an instruction indicating that the loading of the native page in the current page and the web sub-page nested in the native page is complete, closing the current loading animation.

[0040] Exemplarily, the hybrid development application may be a learning machine application.

[0041] The method for implementing the loading animation of this embodiment only displays one loading animation during the entire process of page loading in the hybrid development application, and the loading animation is not closed until the native page in the current page and the web sub-pages nested in the native page are loaded. Compared with the traditional loading display scheme in the hybrid development application, which displays one loading on the native page and the web sub-page respectively (hereinafter referred to as the multi-loading display scheme for the convenience of description), the loading display scheme applied to the hybrid development application of this embodiment only displays one loading animation during the entire process from page loading to loading completion (hereinafter referred to as the single loading display scheme for the convenience of description), which makes the single loading display scheme of this embodiment have the following advantages: (1) Since only one loading animation is displayed during the entire process from page loading to loading completion, the traditional multi-loading display scheme applied to the hybrid development application is completely avoided. The problems of easy occurrence of double loading animations, slow loading animation start, and confusion of multiple animation calls are completely avoided; (2) Compared with the traditional multi-loading display scheme that displays multiple loading animations during the hybrid development page loading process, the single loading display scheme of this embodiment only displays one loading animation during the entire page loading process, and the number of loading animations that need to be rendered is smaller, thereby improving the loading efficiency. (3) The traditional multi-loading display scheme used in hybrid development applications is prone to problems such as a certain loading animation cannot be closed or some loading animations cannot be loaded normally due to the presence of multiple loading animations. The single loading display scheme of this embodiment only displays one loading animation during the entire page loading process, thereby greatly reducing the probability of the above problems. In summary, the single loading display scheme of this embodiment greatly simplifies the loading of loading animations in hybrid development applications, avoids the problems of double loading animations, white screen, slow loading animation start, confusion of multiple animation calls, etc. in the traditional loading animation loading of hybrid development applications, can significantly improve the psychological experience of users when waiting for the page to load, and effectively reduce the customer complaint rate of hybrid development applications.

[0042] Exemplarily, the web subpage refers to a control for displaying web content, which implements a browser engine based on WebKit and supports web front-end technologies such as HTML, CSS and JavaScript. For example, in Android, a WebView control can be created through the WebView class and added to the layout; in iOS, WKWebView can be used to implement similar functions.

[0043] In an exemplary embodiment of the present application, in step S110, the instruction to open the page includes at least: an instruction to open a hybrid development application, and an instruction to open a page in the hybrid development application.

[0044] Exemplarily, when the instruction to open the page is an instruction to open a hybrid development application, through the loading animation implementation method of this embodiment, when the application starts, a loading animation will be displayed, prompting the user to inform the user that they need to wait for a while, thereby managing the user's psychological expectations, waiting for the program to complete initialization and rendering before closing the loading animation, and then displaying the content required by the user in a friendly manner, which can greatly improve the user experience of the hybrid development application.

[0045] In an exemplary embodiment of the present application, in step S110, the preset loading animation types include at least: animation type, progress bar type, text type and startup background image type; the selecting a loading animation from the preset loading animation types may include:

[0046] According to the type of the current page and the preset matching strategy, a type of loading animation is selected from the preset loading animation types as the current loading animation.

[0047] The method for implementing the loading animation of this embodiment uses a loading animation (such as a startup background image, background color, a few seconds of interesting animation, a progress bar with progress, interesting text, and other types of loading animation) to inform the user in advance that they need to wait for a period of time, thereby managing the user's psychological expectations. After the page is completely loaded, the loading animation is turned off, and then the content required by the user is displayed in a friendly manner, which greatly improves the user experience. In addition, this embodiment includes a variety of loading animation types, which can display different loading animations on different types of pages regardless of the type of page, avoiding user aesthetic fatigue, and can also increase the aesthetics and improve the user experience.

[0048] It should be noted that the present application can not only select a type of loading animation from the preset loading animation types as the current loading animation according to the type of the current page and the preset matching strategy, but also select a type of loading animation from the preset loading animation types as the current loading animation according to the type of user operation and the preset matching strategy.

[0049] In an exemplary embodiment of the present application, after starting the current loading animation, the method may further include:

[0050] Load the native page in the current page and the web sub-pages nested in the native page.

[0051] In an example of this embodiment, the loading of the native page in the current page and the web sub-page nested in the native page may include:

[0052] Instantiating the native page, and rendering the native page according to a preset first layout;

[0053] Obtaining first data by calling a first data interface related to the native page;

[0054] The web sub-page is loaded according to the first data.

[0055] Exemplarily, the preset first layout may include: size and background color of the native page.

[0056] Exemplarily, loading the web sub-page according to the first data may include: acquiring a first URL for loading the web sub-page according to the first data, and then loading the web sub-page through the first URL. Of course, the first data is not limited to the first URL, and may also include other data, such as field information required for calling a data interface (i.e., the second data interface described in the next embodiment) in the web sub-page.

[0057] It should be noted that when loading a native page in the current page, it is not necessary to call the first data interface related to the native page to obtain the first data, and then load the web sub-page based on the first data. The web sub-page can also be loaded through a fixed preset first web sub-page URL. Exemplarily, the loading of the native page in the current page and the web sub-page nested in the native page can include: instantiating the native page, rendering the native page according to a preset first layout; and loading the web sub-page according to the preset first web sub-page URL.

[0058] In an example of this embodiment, loading the web sub-page according to the first data includes:

[0059] Instantiating the web subpage;

[0060] Obtaining second data by calling a second data interface related to the web subpage;

[0061] The web sub-page is rendered according to the second data and a preset second layout.

[0062] Exemplarily, the preset second layout may include the size of the web sub-page, the background color, various sub-elements in the web sub-page, and the positions and sizes of the sub-elements.

[0063] The loading animation implementation method of this embodiment first loads the native page, then loads the web sub-page based on the native page, and finally loads the entire page and displays the entire page to the user.

[0064] In an exemplary embodiment of the present application, the loading animation is implemented based on an animation manager, and the animation manager is used to manage the loading animation, which may include: starting, shutting down, and instantiating.

[0065] Exemplarily, the animation manager is an animation management object instantiated in a hybrid development application, through which the loading animation can be instantiated and managed, thereby simplifying the code structure, reducing the coupling of the code, and facilitating the later maintenance of the code.

[0066] In an example of this embodiment, after receiving an instruction that the native page in the current page and the web sub-page nested in the native page have finished loading, closing the current loading animation may include:

[0067] Monitor whether the native page and the web sub-page in the current page have been loaded, and send a closing animation instruction after the native page and the web sub-page have been loaded;

[0068] After receiving the animation closing instruction, the animation manager closes the current loading animation.

[0069] The animation loading implementation method of the present embodiment monitors whether the native page and the web sub-page in the current page have been loaded through a monitoring mechanism, and sends a closing animation instruction after monitoring that the native page and the web sub-page have been loaded, and then closes the current loading animation when the closing animation instruction is received, thereby realizing that only one loading animation is displayed during the loading process of the hybrid development application page, without the need to display multiple loading animations when the page is loaded like traditional hybrid development applications, thus avoiding the problems of double loading animations, white screen, slow loading animation start, confusion of multiple animation calls, etc. in the traditional hybrid development application loading animation loading, which can significantly improve the user's psychological experience when waiting for the page to load, and effectively reduce the customer complaint rate of hybrid development applications.

[0070] In an example of this embodiment, the starting of the current loading animation may include: instantiating a container object for displaying the loading animation through the animation manager; and displaying the container object of the loading animation. In order to increase the loading speed of the loading animation, after a certain loading animation is loaded, when the loading animation is closed, only the container object of the loading animation is hidden, so that when the loading animation is displayed again next time, the container object of the loading animation can be directly displayed to display the loading animation, thereby avoiding instantiating the container of the loading animation again, so as to increase the loading speed of the loading animation.

[0071] In an example of this embodiment, the monitoring of whether the native page and the web sub-page in the current page are loaded is implemented by notifying the management center;

[0072] After loading the native page in the current page and the web sub-page nested in the native page, the method may further include: sending the animation closing instruction through the notification management center.

[0073] In this example, the page loading completion monitoring is achieved by notifying the management center, and then the closing of the loading animation can be controlled.

[0074] Exemplarily, the notification management center can be implemented in the following ways: for example, system-level notifications can be used. In native applications, notification services provided by the operating system (such as Android's Notification Manager or iOS's UNUserNotificationCenter) can be used to send and receive notifications. For another example, a customized notification manager can be created. A customized notification manager module can be created, which is responsible for handling the creation, display, and clearing of notifications, and interacts with native code through JavaScript to achieve cross-platform notification management.

[0075] It should be noted that this application does not restrict how to monitor whether the native page and web sub-page in the current page have been loaded. For example, it can also be achieved through other means such as closures and proxies, as long as the monitoring can be achieved.

[0076] In an exemplary embodiment of the present application, the method may further include: if information about page loading failure is received, closing the current loading animation, and prompting the user according to the error cause in the page loading failure information.

[0077] For example, if the error cause in the loading failure information is "server error", the user can be prompted "the server cannot be connected temporarily, please try again later"; if it is detected that the user has not turned on the network, the user can be prompted "loading failed, please check whether your network is turned on" etc.; if the error cause in the page loading failure information is empty, the user can be directly prompted "loading failed, please try again later".

[0078] The method for implementing the loading animation of this embodiment will close the current loading animation upon receiving information about a page loading failure, and prompt the user according to the error reason in the page loading failure information. This can avoid the situation where "the loading animation is always displayed and cannot be closed when the page loading fails" which brings a bad experience to the user; on the other hand, the error reason will also be displayed to the user, which can not only prompt the user that the loading failed, so that the user does not have to wait all the time, but also take corresponding measures when the loading failure is caused by the user himself (for example, if the user does not open the network, after prompting the user, the user can open the network and try again).

[0079] In an exemplary embodiment of the present application, the method may further include: if the preset maximum time is reached and no instruction is received indicating that the loading of the native page in the current page and the web sub-page nested in the native page is complete, the current loading animation can be directly closed, and the user can be prompted with the cause of the error based on the returned error code.

[0080] The loading animation implementation method of this embodiment will also close the current loading animation when the preset maximum duration is reached and no instruction to complete loading is received, further ensuring that the loading animation can be closed normally under abnormal circumstances and will not be displayed continuously, affecting the user experience.

[0081] In summary, this application provides a simplified loading animation implementation method for applications developed under a hybrid development mode. This method effectively solves many problems existing in traditional hybrid development application loading solutions, such as double loading animations, white screen, slow loading animation start, confusion in calling multiple loading animations, and user complaints about application freezing, and significantly improves the user's psychological experience while waiting.

[0082] The following is an example of an implementation method for the loading animation of the present application. Figure 2 As shown, the following steps may be included:

[0083] Step S210: upon receiving a user input instruction to open a hybrid development application, a type of loading animation (ie, the loading animation described above) is selected from preset loading animation types as a current loading animation, and the loading animation is started.

[0084] Exemplarily, the instruction input by the user to open the hybrid development application may be generated when the user opens the application.

[0085] Step S220: According to the type of the current page and the preset matching strategy, a type of loading animation is selected from the preset loading animation types as the current loading animation. Exemplarily, different types of loading animations can be displayed according to the type of user operation in combination with the preset matching strategy.

[0086] Step S230: Load the native page in the current page and the web sub-pages nested in the native page.

[0087] Exemplarily, this step may include: instantiating the native page, and rendering the native page according to a preset first layout; obtaining first data by calling a first data interface related to the native page; instantiating the web sub-page according to the first data; obtaining second data by calling a second data interface related to the web sub-page (information in the first data may be required as a parameter when calling the second data interface); rendering the web sub-page according to the second data and a preset second layout.

[0088] Exemplarily, this step may also include: instantiating the native page and rendering the native page according to a preset first layout; instantiating the web sub-page; obtaining second data by calling a second data interface related to the web sub-page; and rendering the web sub-page according to the second data and a preset second layout.

[0089] Step S240: After the native page and the web sub-page are loaded, a closing animation instruction is sent.

[0090] Step S250: After receiving the animation closing instruction, close the current loading animation.

[0091] Exemplarily, after the native page and the web sub-page are loaded, the sending and receiving of the animation closing instruction can be implemented through a notification mechanism.

[0092] It can be seen from the above steps of this embodiment that the loading animation implementation method of this embodiment only displays a loading animation during the page loading process of the hybrid development application. Compared with the traditional loading animation implementation method of the hybrid development application, the loading animation implementation method of this embodiment not only greatly simplifies the loading animation process, but also avoids many problems existing in the traditional loading animation method.

[0093] For example, if the loading animation implementation method of this embodiment is applied to a learning machine application, the loading process can be as follows: when the user opens the learning machine application, a loading animation will be displayed first; then, during the loading animation process, the program performs a series of preparations in the background, such as requesting data, opening a web subpage, requesting data from the web subpage, and rendering the web page. After all the preparations are completed, the loading is closed to display the content the user wants. This loading scheme has the following advantages: (1) Since only one loading animation is loaded during the loading process of the native page and the web subpage of the hybrid development application, multiple loading animations can be avoided. (2) If there is no loading animation during the data loading process, and the screen is white for a long time, the user will feel that there is a problem with the application or it is stuck, thereby affecting the user experience. However, if the loading animation of this example is displayed during the data loading process, the user will know that the learning machine application is loading data at this time, thereby avoiding the problem of long white screen time, improving the user experience, and reducing user complaints. (3) Compared with the traditional loading animation, the scheme of this example simplifies the loading process and gives the expected effect, which can effectively improve the user experience and reduce software customer complaints.

[0094] Exemplarily, the description of the dual-end linkage algorithm can be as follows: (1) When the application is started, a loading animation is displayed; (2) According to the category of user operation, different types of loading animations are displayed through a preset matching strategy. (3) The following process is executed: the native page requests the data interface, opens the web subpage, the web subpage requests data, the web subpage renders the page, and all the content is displayed. (4) After the current page is loaded (the native page in the current page and the web subpage nested in the native page are rendered), a close animation instruction is issued (for example, it can be a notification of closing the animation; usually, when loading the current page, the web subpage is the last link, which means that the completion of the web subpage rendering represents the completion of the current page loading, so usually the close animation instruction can be issued after the web subpage rendering is completed; currently, this application does not limit this, for example, a first close instruction can be issued after the native page is loaded, and a second close instruction can be issued after the web subpage is loaded, and these two instructions are combined as the close animation instruction). (5) After receiving the close animation instruction, the loading animation is closed and the algorithm ends.

[0095] In an example of this embodiment, the web subpage refers to a control for displaying web content, which implements a browser engine based on WebKit and supports web front-end technologies such as HTML, CSS and JavaScript. For example, in Android, a WebView control can be created through the WebView class and added to a layout; in iOS, WKWebView can be used to implement similar functions.

[0096] In an example of this embodiment, the preset loading animation types include at least: animation type, progress bar type, text type and startup background image type; wherein the animation type may include rotation animation, zoom animation and fade-in and fade-out animation, the progress bar type may include current progress bar and circular progress bar, the text type may include static text and dynamic text, and the startup background image type may include static picture, dynamic picture and video background.

[0097] In an example of this embodiment, in order to select a type of loading animation from the preset loading animation types as the current loading animation according to the type of the current page and the preset matching strategy, the loading animation method of this embodiment may also include the following steps: (1) Define page type: First, it is necessary to define the types of all pages in the application. These types can be based on the functions of the page (such as login page, home page, setting page, etc.). (2) Define Loading animation type: Preset multiple loading animation types (such as the animation type, progress bar type, text type and startup background image type mentioned above), each type corresponds to different visual effects and user experience. (3) Formulate a preset matching strategy: Formulate a preset matching strategy, which defines which type of loading animation should be displayed for different page types; the strategy can be based on the best practices of user experience or on specific business needs. (4) Create decision logic: Implement a decision logic, which selects the loading animation according to the type of the current page and the preset matching strategy; this logic can be a simple if-else statement or a more complex decision tree or algorithm. (5) Implement dynamic selection: Implement the above decision logic in the code so that when the page needs to display the loading animation, the corresponding animation type can be dynamically selected according to the type of the current page. (6) User configuration and customization: Provide a configuration interface to allow users or developers to customize the preset matching strategy as needed to adapt to different usage scenarios.

[0098] In an example of this embodiment, the animation settings can be adjusted to improve the smoothness of the animation. For example, the rendering burden of the system can be reduced by reducing the frame rate or complexity of the animation; or the animation effect can be made smoother and more natural by adjusting parameters such as the duration and delay time of the animation.

[0099] In an example of this embodiment, resource files such as images and videos required for the animation can be compressed and optimized to reduce resource loading time and memory usage, thereby making the animation effect smoother and more natural. For example, using image resources of appropriate sizes can avoid excessive memory usage and reduced rendering performance due to large images.

[0100] In an example of this embodiment, the loading animation is implemented based on an animation manager, and the animation manager is used to manage the loading animation, which may include: starting, shutting down, and instantiating. The animation manager is an animation management object instantiated in a hybrid development application, through which the loading animation can be instantiated and managed, thereby simplifying the structure of the code, reducing the coupling of the code, and facilitating the later maintenance of the code.

[0101] Exemplarily, the animation manager sets the following to ensure the smoothness of animation effects and the responsiveness of the application: (1) Roles and responsibilities of the animation manager: The animation manager is mainly responsible for controlling and managing animation effects in the application, including loading animations. It needs to be able to display or hide animations according to the state of the application, and provide functions such as starting, pausing, resuming, and stopping animations. (2) Triggering and controlling animations: The animation manager needs to be able to respond to events in the application, such as data loading, page jumps, etc., to trigger the display of animations; at the same time, it should be able to automatically or manually control the hiding of animations according to the end of these events. (3) Management of animation resources: The animation manager needs to manage the loading, unloading, and caching of animation resources to ensure that the animation can be loaded and played efficiently. This involves the role of the resource manager, which is responsible for the storage and retrieval of animation resources. (4) Synchronization and state management of animations: In multi-person or multi-device applications, the animation manager needs to synchronize the animation states of different clients to ensure the consistency of animations. (5) Performance optimization: The animation manager needs to consider performance optimization, especially on mobile devices with limited resources, using animation preloading, lazy loading, and using more efficient animation rendering technology to optimize animation performance. (6) Animation life cycle management: The animation manager needs to manage the animation life cycle, including animation creation, updating, starting, closing, displaying, hiding, and destroying.

[0102] In an example of this embodiment, the monitoring of whether the native page and web subpage in the current page have been loaded is implemented through the notification management center. Exemplarily, a notification management center can be customized based on the following scheme: (1) Define the communication protocol: define a set of URL Scheme rules for communication between native and web pages. These rules can be customized protocol headers, such as xxcommand: / / or xxapp: / / , which represent different operations and parameters. (2) Intercept network requests: In WebView, hybrid development applications can monitor and capture issued network requests; intercept these requests through the API, and when it is detected that the request URL conforms to the customized protocol, no resource request is initiated, but the parameters are parsed and the corresponding function or method is called. (3) Event monitoring and callback: In WebView, different events, such as page start loading (onPageStarted), page loading end (onPageFinished), etc., can be monitored by setting WebViewClient and WebChromeClient, and callbacks are performed when these events occur. (4) Message notification: In Android, you can use NotificationManager to manage and publish notifications; create a NotificationChannel to group and manage notifications, then use NotificationCompat.Builder to build notifications, and finally send notifications through NotificationManagerCompat. (5) Event distribution center: Design an event distribution center that allows different components to register listeners and respond to events; this center can be a global singleton object that is responsible for maintaining the mapping relationship between events and listeners, and distributes events to all registered listeners when events occur. (6) Error handling and retry mechanism: In the notification management mechanism, error handling and retry mechanisms need to be considered to ensure that users can be given appropriate feedback when network requests fail or operations are abnormal, and attempts to recover or retry operations are made.

[0103] In summary, this embodiment implements a solution for simplifying the loading process in a hybrid development mode based on a dual-end linkage algorithm, which solves the problems of double loading animations, white screen, slow loading animation start, confusion of multiple animation calls, etc. in the loading animation loading of applications developed under the traditional hybrid development mode. It can significantly improve the user's psychological experience when waiting for the page to load and effectively reduce the customer complaint rate of hybrid development applications.

[0104] An embodiment of the present application also provides a hybrid development application, see Figure 3 , including: memory and processor;

[0105] The memory is used to store a program for loading animation implementation;

[0106] The processor is used to read the program for implementing the loading animation and execute the loading animation implementation method as described in any embodiment of the present application.

[0107] Exemplarily, the hybrid development application can be various applications that adopt a hybrid development model on a learning machine, but is not limited to this. For example, it can also be an application that adopts a hybrid development model in various educational products such as mobile phones and smart AI.

[0108] The hybrid development application of this embodiment simplifies the loading animation process, gives users clear expectations, and thus calms the user's waiting mood. This optimization effectively solves many problems such as double loading animations, white screens, slow loading animations, confusion in calling multiple loading animations, and user complaints about application freezing, significantly improving the user's psychological experience while waiting. This not only improves user satisfaction, but also effectively reduces the customer complaint rate, greatly improving the user experience of hybrid development applications.

[0109] An embodiment of the present application further provides an electronic device, including: a memory and a processor;

[0110] The memory is used to store a program for loading animation implementation;

[0111] The processor is used to read the program for implementing the loading animation and execute the loading animation implementation method as described in any embodiment of the present application.

[0112] The processor of the above-mentioned embodiment of the present application can be a general-purpose processor, including a central processing unit (CPU), a network processor (Network Processor, NP for short), a microprocessor, etc., or other conventional processors, etc.; the processor can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a readily available programmable gate array (FPGA), a discrete logic or other programmable logic device, a discrete gate or transistor logic device, a discrete hardware component, or other equivalent integrated or discrete logic circuits, or a combination of the above devices. That is, the processor of the above-mentioned embodiment can be any processing device or device combination that implements the various methods, steps and logic block diagrams disclosed in the embodiments of the present application. If the embodiments of the present application are partially implemented in software, the instructions for the software can be stored in a suitable non-volatile computer-readable storage medium, and one or more processors can be used to execute the instructions in hardware to implement the method of the embodiments of the present application. The term "processor" used herein may refer to the above structure or any other structure suitable for implementing the technology described herein.

[0113] An embodiment of the present application further provides a non-transitory computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, wherein the computer program, when executed by a processor, can implement the loading animation implementation method as described in any embodiment of the present application.

[0114] In summary, this application implements a solution to simplify the loading process of applications developed under a hybrid development mode based on a dual-end linkage algorithm. This solution simplifies the loading process and gives users clear expectations, thereby calming users' waiting emotions. This optimization effectively solves many problems such as double loading animations, white screens, slow loading animations, confusion in calling multiple loading animations, and user complaints about application freezes, significantly improving the user's psychological experience while waiting. This not only improves user satisfaction, but also effectively reduces customer complaint rates, making the application more stable and smooth.

[0115] It should be noted that the technical solution of this application can be applied to scenarios where a hybrid development model is adopted on various learning machines, but it is not limited to this. For example, it can also be applied to scenarios where a hybrid development model is adopted in various educational products such as mobile phones and smart AI. Of course, the loading animation loading solution of this application is not limited to use when loading pages, but can also be applied to the implementation of pre-loading resources such as learning machines, pencil cases, and smart learning tables, and is also suitable for the implementation of a dual-end linkage algorithm to simplify the loading process.

[0116] The loading animation loading solution of this application is the most advanced solution on the market for implementing loading animation loading. It is of great significance to simplify the loading process and improve the user experience. The solution has many advantages such as simple implementation, stability, and good user experience.

[0117] In one or more of the above exemplary embodiments, the functions described may be implemented in hardware, software, firmware, or any combination thereof. If implemented in software, the functions may be stored on a computer-readable medium or transmitted via a computer-readable medium as one or more instructions or codes, and executed by a hardware-based processing unit. A computer-readable medium may include a computer-readable storage medium corresponding to a tangible medium such as a data storage medium, or a communication medium that facilitates a computer program, such as any medium transmitted from one place to another according to a communication protocol. In this way, a computer-readable medium may generally correspond to a non-temporary tangible computer-readable storage medium or a communication medium such as a signal or carrier wave. A data storage medium may be any available medium that can be accessed by one or more computers or one or more processors to retrieve instructions, codes, and / or data structures for implementing the technology described in this application. A computer program product may include a computer-readable medium.

[0118] By way of example and not limitation, such computer-readable storage media may include RAM, ROM, EEPROM, CD-ROM or other optical disk storage, magnetic disk storage or other magnetic storage, flash memory, or any other medium that can be used to store the desired program code in the form of instructions or data structures and can be accessed by a computer. Moreover, any connection may also be referred to as a computer-readable medium. For example, if instructions are transmitted from a website, server or other remote source using coaxial cable, fiber optic cable, twisted pair, digital subscriber line (DSL), or wireless technologies such as infrared, radio and microwave, then coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies such as infrared, radio and microwave are included in the definition of medium. However, it should be understood that computer-readable storage media and data storage media do not include connections, carrier waves, signals, or other transient (transient) media, but are directed to non-transient tangible storage media. As used herein, disks and optical disks include compact disks (CDs), laser disks, optical disks, digital versatile disks (DVDs), floppy disks, or Blu-ray disks, etc., where disks typically reproduce data magnetically, while optical disks use lasers to reproduce data optically. Combinations of the above should also be included within the scope of computer-readable media.

Claims

1. A method for implementing a loading animation, applied to hybrid development applications, characterized in that: The page in the hybrid development application is implemented based on the native page nested web sub-page, and the method includes: When receiving a page opening instruction input by a user, selecting a type of loading animation from preset loading animation types as a current loading animation, and starting the current loading animation; After receiving an instruction that the native page in the current page and the web sub-page nested in the native page have completed loading, the current loading animation is closed.

2. The method according to claim 1, characterized in that: The instruction to open a page at least includes: an instruction to open a hybrid development application, and an instruction to open a page in the hybrid development application.

3. The method according to claim 1, characterized in that: The preset loading animation types include at least: animation type, progress bar type, text type and startup background image type; the selecting a loading animation from the preset loading animation types includes: According to the type of the current page and the preset matching strategy, a type of loading animation is selected from the preset loading animation types as the current loading animation.

4. The method according to claim 1, characterized in that: After starting the current loading animation, the method further includes: Load the native page in the current page and the web sub-pages nested in the native page.

5. The method according to claim 4, characterized in that The loading of the native page in the current page and the web sub-pages nested in the native page includes: Instantiating the native page, and rendering the native page according to a preset first layout; Obtaining first data by calling a first data interface related to the native page; The web sub-page is loaded according to the first data.

6. The method according to claim 5, characterized in that The loading of the web sub-page according to the first data includes: Instantiating the web subpage; Obtaining second data by calling a second data interface related to the web subpage; The web sub-page is rendered according to the second data and a preset second layout.

7. The method according to claim 4, characterized in that The loading animation is implemented based on an animation manager, and the animation manager is used to manage the loading animation, including: starting, shutting down and instantiating; After receiving an instruction indicating that the native page in the current page and the web sub-page nested in the native page have finished loading, closing the current loading animation includes: Monitor whether the native page and the web sub-page in the current page have been loaded, and send a closing animation instruction after the native page and the web sub-page have been loaded; After receiving the animation closing instruction, the animation manager closes the current loading animation.

8. The method according to claim 7, characterized in that The monitoring of whether the native page and the web sub-page in the current page are loaded is achieved by notifying the management center; After loading the native page in the current page and the web sub-page nested in the native page, the method further includes: sending the animation closing instruction through the notification management center.

9. A hybrid development application, comprising: A memory and a processor, characterized in that: The memory is used to store a program for loading animation implementation; The processor is used to read the program for implementing the loading animation and execute the loading animation implementation method as described in any one of claims 1 to 8.

10. A non-transitory computer-readable storage medium storing a computer program, wherein: When the computer program is executed by a processor, it can implement the loading animation implementation method as described in any one of claims 1 to 8.

Images