Animation loading implementation method and device and electronic equipment

Abstract

The invention discloses an animation loading implementation method and device and electronic equipment. The method comprises the steps that the loading progress of data is obtained in real time; determining a corresponding loading stage according to the loading progress; loading animations are displayed according to the loading stages, and the loading animations corresponding to different loading stages are the same in form but different in color. According to the method, different loading stages of the data are distinguished through the color details of the loaded animation, the unified form of loading the animation is kept, the use experience of a user is enhanced, and the user can conveniently perceive the data acquisition progress and locate the loading problem.

Description

Technical Field

[0001] This application belongs to the field of software testing technology, and in particular relates to a method, apparatus and electronic device for implementing loading animation. Background Technology

[0002] During data loading, a dynamic loading indicator uses a rotating icon GIF (Graphics Interchange Format) animation to indicate the data loading status, such as... Figures 1-3 As shown. GIF animation is a form of animation that creates dynamic effects by playing static images frame by frame.

[0003] However, when using a single type of GIF animation, the above solutions cannot distinguish between different loading stages, making it difficult for users to perceive the data acquisition progress and making it inconvenient to locate loading problems; when using different types of GIF animation, there is a lack of uniformity, which affects the user experience. Summary of the Invention

[0004] The purpose of this application is to provide a method, apparatus, and electronic device for implementing loading animations, so as to solve the problems in related technologies that cannot distinguish different loading stages, make it difficult for users to perceive the progress of data acquisition, make it inconvenient to locate loading problems, or lack uniformity that affects the user experience.

[0005] To achieve the above objectives, the embodiments of this application adopt the following technical solutions: In a first aspect, embodiments of this application provide a method for implementing a loading animation, comprising: acquiring the loading progress of data in real time; determining the corresponding loading stage based on the loading progress; and displaying a loading animation according to the loading stage, wherein the loading animations corresponding to different loading stages have the same form but different colors.

[0006] Secondly, embodiments of this application provide a device for implementing a loading animation, comprising: an acquisition module for acquiring the loading progress of data in real time; a determination module for determining the corresponding loading stage based on the loading progress; and a display module for displaying a loading animation based on the loading stage, wherein the loading animations corresponding to different loading stages have the same form but different colors.

[0007] Thirdly, embodiments of this application provide an electronic device, including: a processor, a memory, and a program or instructions stored in the memory and executable on the processor, wherein the program or instructions, when executed by the processor, implement the steps of the method described in the first aspect.

[0008] The above-described technical solutions adopted in the embodiments of this application can achieve the following beneficial effects: In this embodiment, during the data loading process, the corresponding loading stage is determined based on the real-time data loading progress. A loading animation is displayed according to each stage; the loading animations for different stages have the same form but different colors. By distinguishing different data loading stages through color details in the loading animations, the consistency of the loading animation format is maintained, enhancing the user experience and making it easier for users to perceive the data acquisition progress and locate loading problems. Attached Figure Description

[0009] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings: Figure 1 This is an illustration of GIF animation in related technologies. Figure 1 ; Figure 2 This is an illustration of GIF animation in related technologies. Figure 2 ; Figure 3 This is an illustration of GIF animation in related technologies. Figure 3 ; Figure 4 A flowchart illustrating a method for implementing a loading animation, provided as an embodiment of this application; Figure 5 A schematic diagram illustrating a color scheme for different loading animations corresponding to different loading stages, as provided in one embodiment of this application; Figure 6 A schematic diagram illustrating the completion of a loading animation, provided as an embodiment of this application; Figure 7 A schematic diagram illustrating the export of a loading animation as a JSON file, as provided in one embodiment of this application; Figure 8 A schematic diagram of a device for implementing loading animation provided in one embodiment of this application; Figure 9 This is a schematic diagram of the structure of an electronic device provided in one embodiment of this application. Detailed Implementation

[0010] To make the objectives, technical solutions, and advantages of this application clearer, the technical solutions of this application will be clearly and completely described below in conjunction with specific embodiments and corresponding drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of them. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0011] The terms "first," "second," etc., used in this application are used to distinguish similar objects and not to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that embodiments of this application can be implemented in orders other than those illustrated or described herein. Furthermore, "and / or" in this application indicates at least one of the connected objects, and the character " / " generally indicates that the preceding and following objects are in an "or" relationship. It should be noted that all data involved in this application was obtained with the user's authorization.

[0012] The technical solutions provided in the embodiments of this application are described in detail below with reference to the accompanying drawings.

[0013] Figure 4 This is a flowchart illustrating a method for implementing a loading animation, as provided in one embodiment of this application. Figure 4 As shown, the method for implementing the loading animation in this application embodiment may specifically include the following steps: S401, real-time data loading progress is obtained.

[0014] In this embodiment, the execution entity of the loading animation implementation method is a loading animation implementation device, which can be located in an electronic device. This electronic device can be a terminal device or a server. The terminal device can be a mobile phone, tablet computer, desktop computer, laptop, in-vehicle device, etc.; the server can be a standalone server or a server cluster composed of multiple servers. For example, in the insurance business field, the loading animation implementation device can be located in an insurance business system.

[0015] Upon receiving a data loading request, the system begins loading the data. During the data loading process, the loading progress, such as N, is obtained in real time.

[0016] S402, determine the corresponding loading stage based on the loading progress.

[0017] In this embodiment of the application, the loading stage corresponding to the loading progress of the data obtained in step S401 is determined.

[0018] The loading phase can be divided as needed based on the application scenario. For example, when loading data from multiple systems, the entire loading process can be divided into multiple loading phases according to the system to which the data belongs, meaning that the data loaded in different loading phases corresponds to data from different systems. For instance, assuming the data to be loaded includes data from systems A, B, C, and D, the entire loading process can be divided into a system A loading phase, a system B loading phase, a system C loading phase, and a system D loading phase.

[0019] As a feasible implementation method, step S402, "determining the corresponding loading stage according to the loading progress", can be implemented through the following steps: determining the loading stage corresponding to the loading progress according to the loading progress and the preset first mapping relationship, wherein the first mapping relationship includes a one-to-one mapping relationship between multiple loading progress ranges and multiple loading stages.

[0020] Specifically, each loading stage corresponds to a different loading progress range. Based on the loading progress range corresponding to each loading stage, a first mapping relationship is generated. This first mapping relationship includes a one-to-one mapping relationship between multiple loading progress ranges and multiple loading stages. For example, the loading progress range corresponding to system A is (0%, 23%), the loading progress range corresponding to system B is (23%, 58%), the loading progress range corresponding to system C is (58%, 90%), and the loading progress range corresponding to system D is (90%, 100%). The generated first mapping relationship can be shown in Table 1 below. Table 1 Example of the first mapping relationship

[0021] For example, if the loading progress of the data obtained in step S401 is 30%, then based on the loading progress of 30% and the first mapping relationship shown in Table 1, the loading progress range corresponding to the loading progress of 30% is determined to be (23%, 58%). Then, the loading stage corresponding to the loading progress range (23%, 58%) is determined to be the loading stage of system B. That is, the loading stage corresponding to the loading progress of 30% is determined to be the loading stage of system B.

[0022] S403 displays loading animations based on the loading stage. The loading animations for different loading stages have the same form but different colors.

[0023] In this embodiment, different color schemes for loading animations can be pre-set for different loading stages, while the form of the loading animations for different loading stages remains the same. For example... Figure 5 As shown, the loading stages of system A, system B, system C, and system D have different color schemes for the dots in their loading animations, but the form of the loading animations is the same.

[0024] By using color details in the loading animation to distinguish different stages of data loading, the form of the loading animation is kept consistent, enhancing the user experience and making it easier for users to perceive the progress of data acquisition and locate loading problems.

[0025] The color of the loading animation is determined according to the loading stage determined in step S402, and the loading animation is displayed based on the determined color of the loading animation.

[0026] Furthermore, before step S403 "display loading animation according to loading stage" above, the loading animation implementation method of this application embodiment may also include the following steps: obtaining a Lottie-compatible JSON file corresponding to the loading animation; displaying the loading animation according to the loading stage and the JSON file.

[0027] Lottie is an animation technology for mobile application development that can convert complex animations created in Adobe After Effects into lightweight JSON files and enable smooth playback on platforms such as iOS, Android, and the web.

[0028] The loading animation file can be in Lottie-compatible JSON format, i.e., a Lottie animation. Lottie animation's vector data compression technology significantly optimizes the loading animation file size, reducing device memory usage.

[0029] Furthermore, prior to the above step "obtaining the Lottie-compatible JSON file corresponding to the loading animation", the loading animation implementation method of this application embodiment may further include the following steps: obtaining the completed loading animation, such as... Figure 6 As shown; export and save the loading animation as a Lottie-compatible JSON file, such as Figure 7 As shown.

[0030] Furthermore, since GIF animations have a fixed frame rate, it is difficult to achieve smooth transitions, resulting in poor animation smoothness. Therefore, this embodiment of the application also achieves stepless scaling and anti-aliasing effects by adjusting the loading parameters of the animation elements in real time, thereby improving animation smoothness.

[0031] Correspondingly, the method for implementing the loading animation in this application embodiment may further include the following steps: determining the loading parameters of the animation elements in the corresponding loading animation based on the loading progress. The loading parameters are linearly related to the loading progress, that is, the loading parameters change linearly with the loading progress, which can achieve a smooth transition effect. Correspondingly, the above step S403 "displaying the loading animation according to the loading stage" may specifically include the following steps: displaying the loading animation according to the loading stage and the loading parameters. Among them, the loading parameters may specifically include, but are not limited to, curvature and / or transparency.

[0032] Furthermore, the above step "determine the loading parameters of the animation elements in the corresponding loading animation according to the loading progress" may specifically include the following steps: determine the loading parameters corresponding to the loading progress according to the loading progress and the preset second mapping relationship, wherein the second mapping relationship includes a one-to-one mapping relationship between multiple loading progresses and multiple loading parameters.

[0033] Specifically, different loading parameters can be pre-set for each loading progress. Based on the loading parameters corresponding to each loading progress, a second mapping relationship is generated. This second mapping relationship includes a one-to-one mapping between multiple loading progresses and multiple loading parameters. The corresponding loading parameters are then searched in the second mapping relationship based on the loading progress obtained in step S401.

[0034] To achieve a more refined transition effect, a linear relationship between the loading progress and the loading parameters can be preset. Based on the loading progress obtained in step S401, the corresponding loading parameters can be calculated using the preset linear relationship.

[0035] In summary, the loading animation implementation method of this application distinguishes different data loading stages through color details in the loading animation, maintains the uniformity of the loading animation format, enhances the user experience, and facilitates users' perception of data acquisition progress and identification of loading problems. Lottie's vector data compression technology significantly optimizes the loading animation file space, reducing device memory usage. By adjusting the loading parameters of animation elements in real time, it achieves stepless scaling and anti-aliasing effects, resulting in smooth transitions and improved animation fluidity.

[0036] This application also provides an apparatus for loading animations. For example... Figure 8 As shown, the loading animation implementation device 800 of this application embodiment may specifically include: an acquisition module 801, a determination module 802, and a display module 803. Wherein: The acquisition module 801 is used to obtain the loading progress of data in real time.

[0037] The determination module 802 is used to determine the corresponding loading stage based on the loading progress.

[0038] Display module 803 is used to display loading animations according to the loading stage. The loading animations for different loading stages have the same form but different colors.

[0039] In the embodiments of this application, the specific process by which each module implements its function can be found in the relevant description of any of the above-mentioned implementation methods for loading animations, and will not be repeated here.

[0040] The loading animation implementation device in this application distinguishes different data loading stages through color details in the loading animation, maintaining a consistent form, enhancing the user experience, and facilitating user perception of data acquisition progress and identification of loading problems. Lottie's vector data compression technology significantly optimizes the loading animation file space, reducing device memory usage. By adjusting the loading parameters of animation elements in real time, it achieves stepless scaling and anti-aliasing effects, resulting in smooth transitions and improved animation fluidity.

[0041] This application also provides an electronic device. For example... Figure 9 As shown, the electronic device 900 can vary considerably due to differences in configuration or performance. It may include one or more processors 901 and memory 902, with memory 902 storing one or more programs or instructions. Memory 902 may be temporary or permanent storage. The program stored in memory 902 may include one or more modules (not shown), each module including a series of computer-executable instructions for the electronic device 900. Furthermore, processor 901 may be configured to communicate with memory 902, executing the series of programs or computer-executable instructions stored in memory 902 on the electronic device 900. The electronic device 900 may also include one or more power supplies 903, one or more wired or wireless network interfaces 904, one or more input / output interfaces 905, and one or more keyboards 906.

[0042] Specifically, in the embodiments of this application, the electronic device includes a processor, a memory, and a program or instructions stored in the memory and executable on the processor. When the program or instructions are executed by the processor, they implement the steps of any of the above-described methods for implementing loading animation.

[0043] The electronic device in this application distinguishes different data loading stages through color details in the loading animation, maintaining a consistent loading animation format, enhancing the user experience, and facilitating user awareness of data acquisition progress and identification of loading problems. Lottie's vector data compression technology significantly optimizes the loading animation file space, reducing device memory usage. By adjusting the loading parameters of animation elements in real time, it achieves seamless scaling and anti-aliasing effects, resulting in smooth transitions and improved animation fluidity.

[0044] This application also proposes a readable storage medium storing one or more computer programs or instructions that, when executed by a processor in an electronic device, enable the processor in the electronic device to perform the steps of any of the above-described implementation method embodiments of the loading animation.

[0045] The readable storage medium of this application distinguishes different loading stages of data through color details in the loading animation, maintaining the uniformity of the loading animation format, enhancing the user experience, and facilitating user perception of data acquisition progress and identification of loading problems. Lottie's vector data compression technology significantly optimizes the loading animation file space, reducing device memory usage. By adjusting the loading parameters of animation elements in real time, it achieves stepless scaling and anti-aliasing effects, resulting in smooth transitions and improved animation fluidity.

[0046] The systems, devices, modules, or units described in the above embodiments can be implemented by computer chips or entities, or by products with certain functions. A typical implementation device is a computer. Specifically, a computer can be, for example, a personal computer, laptop computer, cellular phone, camera phone, smartphone, personal digital assistant, media player, navigation device, email device, game console, tablet computer, wearable device, or any combination of these devices.

[0047] For ease of description, the above devices are described separately by function as various units. Of course, in implementing this application, the functions of each unit can be implemented in one or more software and / or hardware.

[0048] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0049] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0050] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0051] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0052] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0053] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0054] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0055] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0056] This application can be described in the general context of computer-executable instructions, such as program modules, that are executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform a specific task or implement a specific abstract data type. This application can also be practiced in distributed computing environments where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0057] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to interchangeably. Each embodiment focuses on describing the differences from other embodiments. In particular, the system embodiments are basically similar to the method embodiments, so the description is relatively simple; relevant parts can be referred to the descriptions in the method embodiments.

[0058] The above are merely embodiments of this application and are not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of the claims of this application.

Claims

1. A method for implementing a loading animation, characterized in that, include: Get the data loading progress in real time; The corresponding loading stage is determined based on the loading progress. The loading animation is displayed according to the loading stage. The loading animations corresponding to different loading stages have the same form but different colors.

2. The method according to claim 1, characterized in that, Determining the corresponding loading stage based on the loading progress includes: Based on the loading progress and a preset first mapping relationship, the loading stage corresponding to the loading progress is determined. The first mapping relationship includes a one-to-one mapping relationship between multiple loading progress ranges and multiple loading stages.

3. The method according to claim 1, characterized in that, The data is multi-system data, and the loading data corresponding to different loading stages are data from different systems.

4. The method according to claim 1, characterized in that, Before displaying the loading animation according to the loading stage, the method further includes: Obtain the Lottie-compatible JSON file corresponding to the loading animation; The loading animation is displayed based on the loading stage and the JSON file.

5. The method according to claim 1, characterized in that, Before obtaining the Lottie-compatible JSON file corresponding to the loading animation, the process also includes: Obtain the completed loading animation; The loading animation is stored as a Lottie-compatible JSON file.

6. The method according to claim 1, characterized in that, Also includes: The loading parameters of the corresponding animation elements in the loading animation are determined based on the loading progress, and the loading parameters are linearly related to the loading progress. The step of displaying the loading animation according to the loading stage includes: The loading animation is displayed according to the loading stage and the loading parameters.

7. The method according to claim 6, characterized in that, The loading parameters include curvature and / or transparency.

8. The method according to claim 6, characterized in that, The step of determining the loading parameters of the corresponding animation elements in the loading animation based on the loading progress includes: Based on the loading progress and the preset second mapping relationship, the loading parameters corresponding to the loading progress are determined. The second mapping relationship includes a one-to-one mapping relationship between multiple loading progresses and multiple loading parameters.

9. A device for loading animation, characterized in that, include: The acquisition module is used to obtain the data loading progress in real time; A determination module is used to determine the corresponding loading stage based on the loading progress. The display module is used to display loading animations according to the loading stage. The loading animations corresponding to different loading stages have the same form but different colors.

10. An electronic device, characterized in that, include: A processor, a memory, and a program or instructions stored in the memory and executable on the processor, wherein the program or instructions, when executed by the processor, implement the steps of the method as claimed in any one of claims 1-8.

Images