SVG path animation playback method, device and storage medium

Abstract

The embodiment of the present application provides a method, device and storage medium for playing SVG path animation. In the embodiment of the present application, by obtaining the animation effect information and JS code corresponding to the SVG path animation to be played; according to the number of animation loops in the animation effect information, it is determined whether there is a target JS code fragment in the JS code that needs to be converted into CSS code; if it is determined that there is a target JS code fragment in the JS code, the path data corresponding to the SVG path animation to be played is obtained, and the target JS code fragment is converted into CSS code in combination with the path data, and the CSS code is run using GPU resources to play the SVG path animation. Thus, the GPU resources are used to play the animation part that needs to be played multiple times in the SVG path animation. By sharing the GPU resources, the frequent occupation of CPU resources when playing the SVG path animation is reduced, and the occurrence of freezes when playing the SVG path animation is greatly reduced. Even SVG path animations with complex paths and complex animation effects can achieve good playback effects.

Description

Technical Field

[0001] The present application relates to the field of audio and video technology, and in particular to a method, device and storage medium for playing an SVG path animation. Background Art

[0002] SVG (Scalable Vector Graphics) path animation is an animation that is drawn along an SVG path. At present, SVG path animations with complex SVG paths and complex animation effects are often produced by writing JS (JavaScript) code. Based on JS code, a variety of even irregular SVG paths can be achieved, and a variety of animation effects can also be achieved. However, running JS code requires CPU (central processing unit) resources, especially when the number of loops of SVG path animation is relatively large, it frequently occupies more CPU resources and is also prone to causing SVG path animation to freeze. Summary of the invention

[0003] Multiple aspects of the present application provide an SVG path animation playback method, device and storage medium to reduce the CPU resource occupation of the SVG path animation and reduce the probability of freeze.

[0004] The present application embodiment provides an SVG path animation playback method, including:

[0005] Get the animation effect information and JS code corresponding to the SVG path animation to be played;

[0006] According to the number of animation cycles in the animation effect information, determining whether there is a target JS code fragment in the JS code that needs to be converted into CSS code;

[0007] If it is determined that the target JS code fragment exists in the JS code, the path data corresponding to the SVG path animation to be played is obtained, the target JS code fragment is converted into CSS code in combination with the path data, and the CSS code is run using GPU resources to play the SVG path animation.

[0008] The embodiment of the present application also provides an SVG path animation playback device, including: a memory and a processor;

[0009] The memory is used to store computer programs;

[0010] The processor, coupled to the memory, is configured to execute the computer program to:

[0011] Get the animation effect information and JS code corresponding to the SVG path animation to be played;

[0012] According to the number of animation cycles in the animation effect information, determining whether there is a target JS code fragment in the JS code that needs to be converted into CSS code;

[0013] If it is determined that the target JS code fragment exists in the JS code, the path data corresponding to the SVG path animation to be played is obtained, the target JS code fragment is converted into CSS code in combination with the path data, and the CSS code is run using GPU resources to play the SVG path animation.

[0014] The embodiment of the present application also provides a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, the processor implements the steps in the above-mentioned SVG path animation playback method.

[0015] The SVG path animation playback method, device and storage medium provided in the embodiment of the present application obtain the animation effect information and JS code corresponding to the SVG path animation to be played; according to the number of animation loops in the animation effect information, determine whether there is a target JS code fragment in the JS code that needs to be converted into CSS code; if it is determined that there is a target JS code fragment in the JS code, then obtain the path data corresponding to the SVG path animation to be played, convert the target JS code fragment into CSS code in combination with the path data, and use GPU resources to run the CSS code to play the SVG path animation. Thus, the GPU resources are used to play the animation part that needs to be played in a loop for multiple times in the SVG path animation. By sharing the GPU resources, the frequent occupation of CPU resources when playing the SVG path animation is reduced, and the occurrence of freezes when playing the SVG path animation is greatly reduced. Even SVG path animations with complex paths and complex animation effects can achieve good playback effects. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0017] Figure 1 A flowchart of an SVG path animation playback method provided by an exemplary embodiment of the present application;

[0018] Figure 2 A flowchart of another SVG path animation playback method provided as an exemplary embodiment of the present application;

[0019] Figure 3 A flowchart of another SVG path animation playback method provided as an exemplary embodiment of the present application;

[0020] Figure 4 A flowchart of another SVG path animation playback method provided as an exemplary embodiment of the present application;

[0021] Figure 5 A schematic structural diagram of an SVG path animation playback device provided as an exemplary embodiment of the present application. DETAILED DESCRIPTION

[0022] In order to make the purpose, technical solution and advantages of the present application clearer, the technical solution of the present application will be clearly and completely described below in combination with the specific embodiments of the present application and the corresponding drawings. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present application.

[0023] Currently, SVG path animation can be made through JS code or CSS code. However, SVG path animation with complex paths and complex animation effects is difficult to achieve through CSS code, but easy to achieve through JS code. Therefore, when making SVG path animation with complex paths and complex animation effects, it is often achieved by writing JS code. However, JS code operation occupies CPU resources, especially when SVG path animation needs to be played in a loop, it will frequently occupy CPU resources, which can easily cause SVG animation to freeze.

[0024] To solve the above technical problems, in some embodiments of the present application, GPU (Graphics Processing Unit) resources are used to play the animation part of the SVG path animation that needs to be played multiple times in a loop. By sharing the GPU resources, the frequent occupation of CPU resources when playing the SVG path animation is reduced, and the occurrence of stuttering when playing the SVG path animation is greatly reduced. Even SVG path animations with complex paths and complex animation effects can achieve good playback effects.

[0025] The technical solutions provided by various embodiments of the present application are described in detail below in conjunction with the accompanying drawings.

[0026] Figure 1 The following is a flow chart of a method for playing an SVG path animation provided by an exemplary embodiment of the present application. Figure 1 As shown, the method comprises the following steps:

[0027] 101. Obtain animation effect information and JS code corresponding to the SVG path animation to be played.

[0028] 102. According to the number of animation loops in the animation effect information, determine whether there is a target JS code fragment in the JS code that needs to be converted into CSS code. If so, execute step 103.

[0029] 103 , obtaining path data corresponding to the SVG path animation to be played, converting the target JS code fragment into CSS code in combination with the path data, and running the CSS code using GPU resources to play the SVG path animation.

[0030] In this embodiment, before writing the JS code of the SVG path animation to be played, the programmer can obtain the path data and animation effect information of the SVG path animation to be played from the configuration file, and then write the JS code of the SVG path animation to be played according to the path data and animation effect information of the SVG path animation to be played. Among them, the path data and animation effect information of the SVG path animation to be played configured in the configuration file are determined according to user needs. The path data is used to indicate the motion path of the SVG path animation to be played. The animation effect information is used to indicate the playback effect of the SVG path animation to be played. The animation effect information includes but is not limited to the following information: animation rate rhythm, animation playback duration, animation delay time, animation execution direction, whether the animation is looped, and the number of loops.

[0031] In this embodiment, if you want to play the SVG path animation, you need to obtain the JS code corresponding to the SVG path animation to be played, and in addition, you need to obtain the pre-configured animation effect information corresponding to the SVG path animation to be played, so as to identify whether the SVG path animation to be played will frequently occupy CPU resources based on the number of animation loops in the animation effect information. It is understandable that when the SVG path animation to be played needs to be played in a loop for multiple times, running the JS code to play the SVG path animation will frequently occupy CPU resources.

[0032] Therefore, in this embodiment, when it is identified that the SVG path animation to be played needs to be played in a loop for multiple times, the target JS code snippet in the JS code is found, and the animation part corresponding to the target JS code snippet needs to be played in a loop for multiple times. The target JS code snippet is converted into CSS code in combination with the path data of the SVG path animation to be played, and the CSS code is run using GPU resources to play the SVG path animation. Since the operation of JS code mainly depends on CPU resources, and the operation of CSS code mainly depends on GPU resources, the load borne by the CPU is transferred to the GPU. By sharing the GPU resources, the load of the CPU is reduced, and the frequent occupation of CPU resources when playing the SVG path animation is reduced.

[0033] The SVG path animation playback method provided in the embodiment of the present application obtains the animation effect information and JS code corresponding to the SVG path animation to be played; according to the number of animation loops in the animation effect information, it is judged whether there is a target JS code fragment in the JS code that needs to be converted into CSS code; if it is judged that there is a target JS code fragment in the JS code, the path data corresponding to the SVG path animation to be played is obtained, the target JS code fragment is converted into CSS code in combination with the path data, and the CSS code is run using GPU resources to play the SVG path animation. Thus, the GPU resources are used to play the animation part that needs to be played in a loop for multiple times in the SVG path animation. By sharing the GPU resources, the frequent occupation of CPU resources when playing the SVG path animation is reduced, and the occurrence of freezes when playing the SVG path animation is greatly reduced. Even SVG path animations with complex paths and complex animation effects can achieve good playback effects.

[0034] Figure 2 The following is a flowchart of another SVG path animation playback method provided by an exemplary embodiment of the present application. Figure 2 As shown, the method comprises the following steps:

[0035] 201, obtaining animation effect information and JS code corresponding to the SVG path animation to be played.

[0036] The implementation method of step 201 in this embodiment is the same as the implementation method of step 101 in the above embodiment, and will not be repeated here.

[0037] 202, according to the number of animation loops in the animation effect information, determine whether there is a target JS code fragment in the JS code that needs to be converted into CSS code, if so, execute step 203, if not, execute step 204.

[0038] The implementation of step 202 in this embodiment is the same as the implementation of step 102 in the above embodiment, and will not be repeated here.

[0039] 203 , obtaining path data corresponding to the SVG path animation to be played, converting the target JS code fragment into CSS code in combination with the path data, and running the CSS code using GPU resources to play the SVG path animation.

[0040] The implementation of step 203 in this embodiment is the same as the implementation of step 103 in the above embodiment, and will not be repeated here.

[0041] 204 , using CPU resources to run JS code to play the SVG path animation.

[0042] In step 204, when it is identified that the SVG path animation to be played is played only once, or although it is played in a loop but the number of times is not large, running the JS code to play the SVG path animation will not frequently occupy CPU resources. At this time, the JS code can also be directly run to play the SVG path animation.

[0043] The SVG path animation playback method provided in this embodiment performs code conversion between JS code and CSS code when the SVG path animation to be played needs to be played in a loop for multiple times, and uses GPU resources to play the animation part of the SVG path animation that needs to be played in a loop for multiple times. By sharing GPU resources, the frequent occupation of CPU resources when playing the SVG path animation is reduced, and the occurrence of the jamming phenomenon when playing the SVG path animation is greatly reduced. Even the SVG path animation with complex paths and complex animation effects can achieve a good playback effect. At the same time, when the SVG path animation to be played is played only once, or although it is played in a loop but the number of times is not large, running the JS code to play the SVG path animation will not frequently occupy CPU resources. At this time, the JS code can also be directly run to play the SVG path animation, thereby ensuring the reliability of playing the SVG path animation based on the JS code.

[0044] Figure 3 The following is a flowchart of another SVG path animation playback method provided by an exemplary embodiment of the present application. Figure 3 As shown, the method comprises the following steps:

[0045] 301, obtain animation effect information and JS code corresponding to the SVG path animation to be played.

[0046] The implementation method of step 301 in this embodiment is the same as the implementation method of step 101 in the above embodiment, and will not be repeated here.

[0047] 302, judging whether there is a target JS code fragment in the JS code that needs to be converted into CSS code according to the number of animation loops in the animation effect information, if so, executing step 303, if not, executing step 304.

[0048] The implementation of step 302 in this embodiment is the same as the implementation of step 102 in the above embodiment, and will not be repeated here.

[0049] 303, obtaining path data corresponding to the SVG path animation to be played, converting the target JS code fragment into CSS code in combination with the path data, and running the CSS code using GPU resources to play the SVG path animation.

[0050] The implementation method of step 303 in this embodiment is the same as the implementation method of step 103 in the above embodiment, and will not be repeated here.

[0051] 304: Utilize CPU resources to run JS code to play SVG path animation.

[0052] The implementation of step 304 in this embodiment is the same as the implementation of step 204 in the above embodiment, and will not be repeated here.

[0053] 305, during the running of the JS code, the actual playing time of the SVG path animation is detected.

[0054] 306. If the actual playback time of the SVG path animation is greater than the expected playback time of the SVG path animation, it is determined that a freeze phenomenon occurs during the playback of the SVG path animation.

[0055] 307, terminate the running of the JS code, and convert the JS code into CSS code in combination with the path data.

[0056] 308, utilizing GPU resources to run CSS code to replay the SVG path animation.

[0057] In actual situations, after running JS code directly to play SVG path animation, the SVG path animation may still freeze. This may be because the JS code of the SVG path animation is large and occupies a lot of CPU resources when running, or because the current CPU load is large and there are not enough CPU resources to run the JS code. Of course, the reasons for the above situation are not limited to the above examples.

[0058] Therefore, after directly running the JS code to play the SVG path animation, it is necessary to detect whether the played SVG path animation still has lag. When it is determined that lag occurs, the JS code can be converted into CSS code and the CSS code can be run using GPU resources to replay the SVG path animation.

[0059] In this embodiment, the method of identifying whether the SVG path animation has a jamming phenomenon is not limited. For example, the jamming phenomenon can be identified through human-computer interaction, such as identifying the jamming phenomenon through notification information submitted by the user. For another example, a JS code can be written to detect the actual playback time of the SVG path animation, and compare the actual playback time of the SVG path animation with the expected playback time to automatically determine whether the jamming phenomenon occurs. Among them, the expected playback time of the SVG path animation can be understood as the animation playback time in the pre-configured animation effect information.

[0060] The SVG path animation playback method provided in this embodiment needs to detect whether the played SVG path animation still has a stuck phenomenon after directly running the JS code to play the SVG path animation. When it is determined that the stuck phenomenon occurs, the JS code can be converted into CSS code, and the CSS code can be run using GPU resources to replay the SVG path animation. Thus, the SVG path animation is replayed using GPU resources to solve the stuck phenomenon that occurs when the SVG path animation played by running the JS code as much as possible. At the same time, by sharing the GPU resources, the CPU resource occupation can be reduced and the CPU load can be reduced.

[0061] Figure 4 The following is a flowchart of another SVG path animation playback method provided by an exemplary embodiment of the present application. Figure 4 As shown, the method comprises the following steps:

[0062] 401, obtain animation effect information and JS code corresponding to the SVG path animation to be played.

[0063] The implementation of step 401 in this embodiment is the same as the implementation of step 101 in the above embodiment, and will not be repeated here.

[0064] 402, according to the number of animation loops in the animation effect information, determine whether there is a target JS code fragment in the JS code that needs to be converted into CSS code, if so, execute step 403, if not, execute step 404.

[0065] The implementation of step 402 in this embodiment is the same as the implementation of step 102 in the above embodiment, and will not be repeated here.

[0066] 403, obtaining path data corresponding to the SVG path animation to be played, converting the target JS code fragment into CSS code in combination with the path data, and running the CSS code using GPU resources to play the SVG path animation.

[0067] The implementation of step 403 in this embodiment is the same as the implementation of step 103 in the above embodiment, and will not be repeated here.

[0068] 404, using CPU resources to run JS code to play SVG path animation.

[0069] The implementation of step 404 in this embodiment is the same as the implementation of step 204 in the above embodiment, and will not be repeated here.

[0070] 405, tracking the actual animation playback effect of SVG path animation during the running of CSS code;

[0071] 406, judging whether the SVG path animation fails to play during the playing process according to the actual animation playing effect and the expected animation playing effect of the SVG path animation;

[0072] 407: If the playback fails, the execution of the CSS code is terminated, and the CPU resources are used to run the JS code to replay the SVG path animation.

[0073] Generally speaking, the animation playback effect of SVG path animation played by running CSS code using GPU resources is better than that of SVG path animation played by running JS code using CPU resources. However, in actual applications, it is inevitable that the animation playback effect of SVG path animation played by running CSS code using GPU resources may occasionally fail to achieve the expected effect. For example, the GPU load is relatively large, and the GPU resources are insufficient to run the CSS code of the SVG path animation to be played.

[0074] Therefore, it is necessary to monitor the animation playback effect of the SVG path animation played by running the CSS code using GPU resources. Specifically, when the actual animation playback effect is consistent with the expected animation playback effect of the SVG path animation, it means that the CSS code is run to play the SVG path animation successfully during the playback process. Conversely, when the actual animation playback effect is inconsistent with the expected animation playback effect of the SVG path animation, it means that the CSS code is run to play the SVG path animation failed during the playback process.

[0075] The actual animation playback effect includes, but is not limited to: the actual animation rate rhythm of the SVG path animation, the actual animation playback duration, the actual animation delay time, the actual animation execution direction, whether the animation actually loops, and the actual number of loops. The expected animation playback effect may be an animation effect message in a configuration file corresponding to the SVG path animation.

[0076] The SVG path animation playback method provided in this embodiment, after utilizing GPU resources to run the SVG path animation played by the CSS code, will also monitor the animation playback effect of the SVG path animation played by the CSS code using GPU resources. When a playback failure event is monitored, the execution of the CSS code can be terminated, and the JS code can be run using CPU resources to replay the SVG path animation, thereby effectively coping with the occurrence of the above situation and ensuring the safety redundancy of the SVG path animation playback.

[0077] It should be pointed out that it is also possible to Figure 3After step 308 of the illustrated embodiment, the animation playback effect of the SVG path animation played by running the CSS code using GPU resources is monitored. When a playback failure event is monitored, an alarm message can be output to remind the developer that the playback of the SVG path animation with either JS code or CSS code has failed, so that the developer can improve the corresponding JS code according to the alarm message.

[0078] On the basis of the above embodiment, in order to objectively and accurately identify the number of animation loops of the SVG path animation, a number threshold can be set according to a large amount of test data. When the number of animation loops of the SVG path animation is greater than the number threshold, it means that the number of animation loops of the SVG path animation is relatively large. At this time, the SVG path animation may frequently occupy CPU resources when it is played. When the number of animation loops of the SVG path animation is not greater than the number threshold, it means that the number of animation loops of the SVG path animation is relatively small. At this time, the SVG path animation may not frequently occupy CPU resources when it is played.

[0079] Based on the above embodiment, the target JS code fragment may be the entire JS code, or may be a partial JS code fragment in the JS code.

[0080] In actual situations, the SVG path animation to be played may be an independent SVG path animation, in which case the JS code corresponding to the SVG path animation is an independent JS code. Alternatively, the SVG path animation to be played may also include multiple independent animation parts, in which case the JS code corresponding to the SVG path animation includes multiple independent JS code snippets, each of which is used to play an independent animation part.

[0081] It should be pointed out that when the SVG path animation to be played is an independent SVG path animation, when it is identified that the number of animation loops in the SVG path animation is relatively large, the JS code corresponding to the SVG path animation is converted into CSS code as a whole, and the CSS code is run using GPU resources to play the entire SVG path animation.

[0082] It should be pointed out that the SVG path animation to be played includes multiple independent animation parts, and the number of animation loops of each animation part can be identified. If the number of animation loops of the animation part is relatively large, the JS code fragment of the animation part should be determined as the target JS code fragment that needs to be converted into CSS code. Therefore, a possible implementation method of "judging whether there is a target JS code fragment that needs to be converted into CSS code in the JS code according to the number of animation loops in the animation effect information" is: judging whether the number of animation loops corresponding to each JS code fragment is greater than a set number threshold; and taking the JS code fragment whose number of animation loops is greater than the number threshold as the target JS code fragment.

[0083] It is necessary to refer to that when judging whether the target JS code snippet exists in the JS code, it can be that when each JS code snippet is loaded into the JS code, it is judged whether the JS code snippet is the target JS code snippet that meets the conditions; or it can be that before loading the JS code, it is identified in advance whether the target JS code snippet exists in the JS code.

[0084] It is understandable that when the SVG path animation to be played includes multiple independent animation parts, only the target JS code snippet is converted, and the GPU resources are used to run the CSS code converted from the target JS code snippet. As for the remaining JS code snippets in the entire JS code, the CPU resources are still used to run. It should be pointed out that the target JS code snippet is a part of the JS code snippet in the JS code, and the remaining JS code snippets refer to the JS code snippets in the JS code except the target JS code snippet. The animation part corresponding to the remaining JS code snippets is played less or not looped during playback, and is played once.

[0085] It can be understood that when the SVG path animation to be played includes multiple independent animation parts, the animation parts with fewer loops or no loops are played by running the corresponding JS code snippets through CPU resources, and the animation parts with more loops can be played by running the corresponding CSS code through GPU resources, thereby achieving the sharing of GPU resources as much as possible, reducing the frequent occupation of CPU resources when playing SVG path animations, and greatly reducing the occurrence of lag when playing SVG path animations.

[0086] Based on the above embodiment, optionally, when converting the target JS code snippet into CSS code, the SVG path identifier and operation logic in the target JS code snippet can be parsed; the path data of the corresponding SVG path animation can be obtained according to the SVG path identifier; the path data and operation logic of the SVG path animation are encoded according to CSS code rules to obtain the CSS code.

[0087] Specifically, the SVG path identifier in the JS code is added during the JS code development phase, so that the SVG path identifier can be traced back during parsing to find the path data of the pre-configured SVG path animation. The running logic of the JS code implements the playback of the SVG path animation along the motion path corresponding to the configured path data with the configured animation effect information. After parsing the SVG path identifier and running logic in the target JS code fragment, the path data of the pre-configured SVG path animation is obtained based on the SVG path identifier, and the CSS code is encoded according to the CSS code rules based on the acquired path data of the SVG path animation and the running logic of the parsed JS code to obtain the CSS code to complete the conversion of the JS code to the CSS code. The converted CSS code can be saved to the global CSS style file, so that when playing the SVG path animation, the CSS code can be obtained from the global CSS style file and run.

[0088] In practical applications, webpack can be used to parse JS code and convert JS code into CCS code. webpack is a static module bundler for JavaScript applications. It has the functions of parsing and converting codes, and can package and integrate various resources such as JS code, referenced CSS resources, image resources, font resources, etc.

[0089] It should be noted that the execution subject of each step of the method provided in the above embodiment can be the same device, or the method can be executed by different devices. For example, the execution subject of steps 101 to 103 can be device A; for another example, the execution subject of steps 101 and 102 can be device A, and the execution subject of step 103 can be device B; and so on.

[0090] In addition, in some of the processes described in the above embodiments and the accompanying drawings, multiple operations that appear in a specific order are included, but it should be clearly understood that these operations may not be executed in the order in which they appear in this article or executed in parallel, and the sequence numbers of the operations, such as 101, 102, etc., are only used to distinguish between different operations, and the sequence numbers themselves do not represent any execution order. In addition, these processes may include more or fewer operations, and these operations may be executed in sequence or in parallel. It should be noted that the descriptions of "first", "second", etc. in this article are used to distinguish different messages, devices, modules, etc., do not represent the order of precedence, and do not limit the "first" and "second" to be different types.

[0091] Figure 5 The following is a schematic diagram of the structure of an SVG path animation playback device provided by an exemplary embodiment of the present application. Figure 5As shown, the device includes: a memory 11 and a processor 12.

[0092] The memory 11 is used to store computer programs and can be configured to store various other data to support operations on the processor. Examples of such data include instructions for any application or method operating on the processor, contact data, phone book data, messages, pictures, videos, etc.

[0093] The memory 11 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 memory, flash memory, magnetic disk or optical disk.

[0094] The processor 12 is coupled to the memory 11 and is configured to execute the computer program in the memory 11 to:

[0095] Get the animation effect information and JS code corresponding to the SVG path animation to be played;

[0096] According to the number of animation loops in the animation effect information, determine whether there is a target JS code fragment in the JS code that needs to be converted into CSS code;

[0097] If it is determined that the target JS code fragment exists in the JS code, the path data corresponding to the SVG path animation to be played is obtained, the target JS code fragment is converted into CSS code in combination with the path data, and the CSS code is run using GPU resources to play the SVG path animation.

[0098] Furthermore, the processor 12 is further configured to: if it is determined that the target JS code fragment does not exist in the JS code, use CPU resources to run the JS code to play the SVG path animation.

[0099] Furthermore, the processor 12 is further configured to:

[0100] Track the actual animation playback effect of SVG path animation while running CSS code;

[0101] According to the actual animation playback effect and the expected animation playback effect of the SVG path animation, determine whether the SVG path animation fails to play during the playback process;

[0102] If playback fails, the execution of the CSS code is terminated, and the CPU resources are used to run the JS code to replay the SVG path animation.

[0103] Furthermore, the processor 12 is further configured to:

[0104] While running the JS code, detect the actual playback time of the SVG path animation;

[0105] If the actual playback time of the SVG path animation is greater than the expected playback time of the SVG path animation, it is determined that a jamming phenomenon occurs during the playback of the SVG path animation;

[0106] Terminate the running of JS code and convert the JS code into CSS code in combination with the path data;

[0107] Leverage GPU resources to run CSS code to replay SVG path animations.

[0108] Furthermore, the processor 12, when performing code conversion, is specifically configured to:

[0109] Parse the SVG path identifier and operation logic in the target JS code snippet;

[0110] Obtain the path data of the corresponding SVG path animation according to the SVG path identifier;

[0111] According to the path data and operation logic of the SVG path animation, encoding is performed according to CSS code rules to obtain CSS code.

[0112] Furthermore, the target JS code snippet is the entire JS code.

[0113] Furthermore, the JS code includes multiple independent JS code fragments, and the target JS code fragment is a part of the JS code fragment in the JS code, and the processor 12 is further used to:

[0114] Utilize CPU resources to run other JS code snippets in JS code.

[0115] Furthermore, when the processor 12 identifies the target JS code snippet, it is specifically used to:

[0116] According to the animation loop times corresponding to each JS code snippet, determine whether it is greater than the set times threshold;

[0117] The JS code snippet in which the animation loop times is greater than the times threshold is used as the target JS code snippet.

[0118] Figure 5 The device shown can execute the method of the above embodiment. For the part not described in detail in this embodiment, reference can be made to the relevant description of the above embodiment. The execution process and technical effect of the technical solution refer to the description in the above embodiment, which will not be repeated here.

[0119] Further, if Figure 5As shown, the device also includes: a communication component 13, a display 14, a power component 15, an audio component 16 and other components. Figure 5 Only some components are shown schematically, which does not mean that the processor only includes Figure 5 In addition, Figure 5 The components shown in the dashed box are optional components, not mandatory components, and may depend on the specific implementation form of the SVG path animation playback device. If the SVG path animation playback device is implemented as a terminal device such as a laptop, tablet, or mobile phone, it may include Figure 5 The components shown in the dashed box; if the SVG path animation playback device is implemented as a server device such as a conventional server, cloud server or server array, it does not include Figure 5 The components are shown in the dashed box.

[0120] Accordingly, an embodiment of the present application further provides a computer-readable storage medium storing a computer program, which, when executed, can implement each step that can be executed by a processor in the above method embodiment.

[0121] Above Figure 5 The communication component in is configured to facilitate wired or wireless communication between the device where the communication component is located and other devices. The device where the communication component is located can access a wireless network based on a communication standard, such as WiFi, 2G, 3G, 4G / LTE, 5G and other mobile communication networks, or a combination thereof. In an exemplary embodiment, the communication component receives a broadcast signal or broadcast-related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component also includes a near field communication (NFC) module to facilitate short-range communication. For example, the NFC module can be implemented based on radio frequency identification (RFID) technology, infrared data association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology and other technologies.

[0122] Above Figure 5 The display in the embodiment includes a screen, which may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from a user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundary of a touch or slide action, but also detect the duration and pressure associated with the touch or slide operation.

[0123] Above Figure 5 The power supply component in the device provides power to various components of the device where the power supply component is located. The power supply component may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to the device where the power supply component is located.

[0124] Above Figure 5 The audio component in can be configured to output and / or input audio signals. For example, the audio component includes a microphone (MIC), and when the device where the audio component is located is in an operating mode, such as a call mode, a recording mode, and a speech recognition mode, the microphone is configured to receive an external audio signal. The received audio signal can be further stored in a memory or sent via a communication component. In some embodiments, the audio component also includes a speaker for outputting an audio signal.

[0125] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.

[0126] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0127] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0128] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1A step that specifies a function in one or more boxes.

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

[0130] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0131] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules 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 technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0132] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0133] The above is only an embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A method for playing an SVG path animation, characterized in that: include: Get the animation effect information and JS code corresponding to the SVG path animation to be played; According to the number of animation cycles in the animation effect information, determining whether there is a target JS code fragment in the JS code that needs to be converted into CSS code; If it is determined that the target JS code fragment exists in the JS code, the path data corresponding to the SVG path animation to be played is obtained, the target JS code fragment is converted into CSS code in combination with the path data, and the CSS code is run by using GPU resources to play the SVG path animation; During the running of the CSS code, tracking the actual animation playing effect of the SVG path animation; According to the actual animation playback effect and the expected animation playback effect of the SVG path animation, determining whether the SVG path animation fails to play during the playback process; If the playback fails, the execution of the CSS code is terminated, and the CPU resources are used to execute the JS code to replay the SVG path animation.

2. The method according to claim 1, characterized in that: Also includes: If it is determined that the target JS code fragment does not exist in the JS code, the JS code is run using CPU resources to play the SVG path animation.

3. The method according to claim 1 or 2, characterized in that: Also includes: During the running of the JS code, detecting the actual playing time of the SVG path animation; If the actual playback time of the SVG path animation is greater than the expected playback time of the SVG path animation, it is determined that a freeze phenomenon occurs during the playback of the SVG path animation; terminating the running of the JS code, and converting the JS code into CSS code in combination with the path data; The CSS code is run using GPU resources to replay the SVG path animation.

4. The method according to claim 1, characterized in that: The converting the target JS code snippet into CSS code in combination with the path data comprises: Parsing the SVG path identifier and operation logic in the target JS code snippet; Acquire path data of the corresponding SVG path animation according to the SVG path identifier; Encoding is performed according to the path data of the SVG path animation and the operation logic according to CSS code rules to obtain CSS code.

5. The method according to any one of claims 1 to 2 and 4, characterized in that: The target JS code snippet is the entire JS code.

6. The method according to any one of claims 1-2 and 4, characterized in that: The JS code includes multiple independent JS code fragments, and the target JS code fragment is a part of the JS code fragments in the JS code, and the method further includes: The remaining JS code fragments in the JS code are run using CPU resources.

7. The method according to claim 6, characterized in that According to the animation cycle number in the animation effect information, it is determined whether there is a target JS code fragment in the JS code that needs to be converted into a CSS code, including: According to the animation loop times corresponding to each JS code snippet, determine whether it is greater than the set times threshold; The JS code snippet in which the animation loop times is greater than the times threshold is used as the target JS code snippet.

8. An SVG path animation playback device, characterized in that: include: Memory and processor; The memory is used to store computer programs; The processor, coupled to the memory, is configured to execute the computer program to: Get the animation effect information and JS code corresponding to the SVG path animation to be played; According to the number of animation cycles in the animation effect information, determining whether there is a target JS code fragment in the JS code that needs to be converted into CSS code; If it is determined that the target JS code fragment exists in the JS code, the path data corresponding to the SVG path animation to be played is obtained, the target JS code fragment is converted into CSS code in combination with the path data, and the CSS code is run by using GPU resources to play the SVG path animation; During the running of the CSS code, tracking the actual animation playing effect of the SVG path animation; According to the actual animation playback effect and the expected animation playback effect of the SVG path animation, determining whether the SVG path animation fails to play during the playback process; If the playback fails, the execution of the CSS code is terminated, and the CPU resources are used to execute the JS code to replay the SVG path animation.

9. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the processor is caused to implement the steps in the SVG path animation playback method according to any one of claims 1 to 7.

Images