CN112288837A

CN112288837A - SVG path animation playing method, device and storage medium

Info

Publication number: CN112288837A
Application number: CN202011003662.6A
Authority: CN
Inventors: 薛松佑
Original assignee: Changsha Youheng Network Technology Co Ltd
Current assignee: Changsha Youheng Network Technology Co Ltd
Priority date: 2020-09-22
Filing date: 2020-09-22
Publication date: 2021-01-29

Abstract

The embodiment of the application provides a SVG path animation playing method, a device and a storage medium. In the embodiment of the application, the animation effect information and the JS code corresponding to the SVG path animation to be played are obtained; judging whether a target JS code segment which needs to be converted into a CSS code exists in the JS code according to the animation cycle times in the animation effect information; if the target JS code segment exists in the JS code, the path data corresponding to the SVG path animation to be played is obtained, the target JS code segment is converted into the CSS code by combining the path data, and the CSS code is operated by utilizing GPU resources to play the SVG path animation. Therefore, the method has the advantages that the GPU resources are utilized to play the animation part needing to be played repeatedly in the SVG path animation in a circulating mode, the frequent occupation of CPU resources when the SVG path animation is played is reduced through the sharing of the GPU resources, the blocking phenomenon when the SVG path animation is played is greatly reduced, and even the SVG path animation with a complex path and a complex animation effect can achieve a good playing effect.

Description

SVG path animation playing method, device and storage medium

Technical Field

The application relates to the technical field of audio and video, in particular to a SVG path animation playing method, a SVG path animation playing device and a storage medium.

Background

SVG (Scalable Vector Graphics) path animation is an animation that draws along the SVG path side by side. At present, aiming at SVG path animations with complex SVG paths and complex animation effects, JS (JavaScript) codes are written to produce and complete the SVG path animations. Based on the JS codes, various even irregular SVG paths can be realized, and various animation effects can also be realized. However, the JS code needs to occupy a CPU (central processing unit) resource when running, and particularly when the number of cycles of the SVG path animation is large, the SVG path animation frequently occupies a large number of CPU resources, and a pause phenomenon is easily caused.

Disclosure of Invention

Aspects of the application provide a method, a device and a storage medium for playing SVG path animation, so as to reduce occupation of SVG path animation on CPU resource and reduce probability of occurrence of jamming.

The embodiment of the application provides a SVG path animation playing method, which comprises the following steps:

acquiring animation effect information and JS codes corresponding to the SVG path animation to be played;

judging whether a target JS code segment which needs to be converted into a CSS code exists in the JS code according to the animation cycle times in the animation effect information;

if judge have target JS code fragment in the JS code, then acquire the path data that treat to play SVG path animation corresponds, combine the path data will target JS code fragment converts the CSS code into to utilize GPU resource operation the CSS code is in order to play SVG path animation.

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

the memory for storing a computer program;

the processor, coupled with the memory, to execute the computer program to:

Embodiments of the present application also provide a computer-readable storage medium storing a computer program, which, when executed by a processor, causes the processor to implement the steps in the SVG path animation playback method.

According to the SVG path animation playing method, the SVG path animation playing device and the storage medium, the animation effect information and the JS code corresponding to the SVG path animation to be played are obtained; judging whether a target JS code segment which needs to be converted into a CSS code exists in the JS code according to the animation cycle times in the animation effect information; if the target JS code segment exists in the JS code, the path data corresponding to the SVG path animation to be played is obtained, the target JS code segment is converted into the CSS code by combining the path data, and the CSS code is operated by utilizing GPU resources to play the SVG path animation. Therefore, the method has the advantages that the GPU resources are utilized to play the animation part needing to be played repeatedly in the SVG path animation in a circulating mode, the frequent occupation of CPU resources when the SVG path animation is played is reduced through the sharing of the GPU resources, the blocking phenomenon when the SVG path animation is played is greatly reduced, and even the SVG path animation with a complex path and a complex animation effect can achieve a good playing effect.

Drawings

The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:

fig. 1 is a schematic flowchart of an SVG path animation playing method according to an exemplary embodiment of the present application;

FIG. 2 is a flowchart illustrating a method for playing an SVG path animation according to an exemplary embodiment of the present application;

FIG. 3 is a flowchart illustrating a method for playing an SVG path animation according to an exemplary embodiment of the present application;

FIG. 4 is a flowchart illustrating a method for playing an SVG path animation according to an exemplary embodiment of the present application;

fig. 5 is a schematic structural diagram of an SVG path animation playback device according to an exemplary embodiment of the present application.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be described in detail and completely with reference to the following specific embodiments of the present application and the accompanying drawings. It should be apparent that the described embodiments are only some of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

At present, SVG path animation can be made through JS codes, and SVG path animation can also be made through CSS codes. However, SVG path animation with a complicated path and a complicated animation effect is difficult to realize by CSS code, but easy to realize by JS code. Therefore, in the SVG path animation with a complex production path and a complex animation effect, the SVG path animation is often realized by writing JS code. However, the JS code runs and occupies CPU resources, and particularly when SVG path animation needs to be played circularly, CPU resources are frequently occupied, which easily causes the SVG animation to have a pause phenomenon.

In order to solve the technical problem, in some embodiments of the present application, a GPU (Graphics Processing Unit) resource is used to play a part of an SVG path animation that needs to be played repeatedly in a cyclic manner, and by sharing the GPU resource, frequent occupation of CPU resources is reduced when playing the SVG path animation, thereby greatly reducing the occurrence of a pause phenomenon when playing the SVG path animation, and achieving a good playing effect even for an SVG path animation with a complex path and a complex animation effect.

The technical solutions provided by the embodiments of the present application are described in detail below with reference to the accompanying drawings.

Fig. 1 is a flowchart illustrating an SVG path animation playing method according to an exemplary embodiment of the present application. As shown in fig. 1, the method comprises the steps of:

101, obtaining animation effect information and JS codes corresponding to the SVG path animation to be played.

102, judging whether a target JS code segment which needs to be converted into a CSS code exists in the JS code according to the animation circulation times in the animation effect information, and if so, executing a step 103.

103, obtaining path data corresponding to the SVG path animation to be played, converting the target JS code segment into CSS codes by combining the path data, and running the CSS codes by using GPU resources to play the SVG path animation.

In this embodiment, before writing the JS code of the SVG path animation to be played, a programmer may 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. The method comprises the steps that SVG path animation to be played is configured in a configuration file, wherein path data and animation effect information of the SVG path animation to be played are determined according to user requirements. The path data is used for indicating the motion path of the SVG path animation to be played. And the animation effect information is used for indicating the playing effect of the SVG path animation to be played. The animation effect information includes, but is not limited to, the following information: the animation speed rhythm, the animation playing time length, the animation delay time, the animation execution direction, whether the animation is circulated or not and the circulation times.

In this embodiment, if an SVG path animation is to be played, a JS code corresponding to the SVG path animation to be played needs to be acquired, and besides, animation effect information corresponding to the SVG path animation to be played, which is configured in advance, needs to be acquired, so that whether the SVG path animation to be played frequently occupies CPU resources is identified based on the number of animation cycles in the animation effect information. It can be appreciated that when the SVG path animation to be played needs to be played circularly for multiple times, running the JS code to play the SVG path animation frequently occupies CPU resources.

Therefore, in this embodiment, when it is recognized that the SVG path animation to be played needs to be played circularly for multiple times, a target JS code segment in the JS code is found, an animation portion corresponding to the target JS code segment needs to be played circularly for multiple times, the target JS code segment is converted into a CSS code in combination with the path data of the SVG path animation to be played, and the GPU resources are utilized to run the CSS code to play the SVG path animation. Because the JS code mainly depends on CPU resources and the CSS code mainly depends on GPU resources, the load borne by the CPU is transferred to be borne by the GPU, the load of the CPU is reduced through the sharing of the GPU resources, and the frequent occupation of the CPU resources when SVG path animation is played is reduced.

According to the SVG path animation playing method provided by the embodiment of the application, the animation effect information and the JS code corresponding to the SVG path animation to be played are obtained; judging whether a target JS code segment which needs to be converted into a CSS code exists in the JS code according to the animation cycle times in the animation effect information; if the target JS code segment exists in the JS code, the path data corresponding to the SVG path animation to be played is obtained, the target JS code segment is converted into the CSS code by combining the path data, and the CSS code is operated by utilizing GPU resources to play the SVG path animation. Therefore, the method has the advantages that the GPU resources are utilized to play the animation part needing to be played repeatedly in the SVG path animation in a circulating mode, the frequent occupation of CPU resources when the SVG path animation is played is reduced through the sharing of the GPU resources, the blocking phenomenon when the SVG path animation is played is greatly reduced, and even the SVG path animation with a complex path and a complex animation effect can achieve a good playing effect.

Fig. 2 is a flowchart illustrating a SVG path animation playing method according to an exemplary embodiment of the present application. As shown in fig. 2, the method comprises the steps of:

and 201, acquiring animation effect information and JS codes corresponding to the SVG path animation to be played.

The implementation manner of step 201 in this embodiment is the same as that of step 101 in the above embodiment, and is not described herein again.

And 202, judging whether a target JS code segment which needs to be converted into a CSS code exists in the JS code according to the animation circulation times in the animation effect information, if so, executing the step 203, and if not, executing the step 204.

The implementation manner of step 202 in this embodiment is the same as that of step 102 in the above embodiment, and is not described herein again.

And 203, acquiring path data corresponding to the SVG path animation to be played, converting the target JS code segment into CSS codes by combining the path data, and running the CSS codes by utilizing GPU resources to play the SVG path animation.

The implementation manner of step 203 in this embodiment is the same as that of step 103 in the above embodiment, and is not described herein again.

And 204, running the JS code by utilizing the CPU resource to play the SVG path animation.

In step 204, when it is recognized that the SVG path animation to be played is played only once, or the number of times of playing is not large despite of loop playing, executing the JS code to play the SVG path animation does not occupy the CPU resource frequently, and at this time, executing the JS code directly to play the SVG path animation.

The SVG path animation playing method provided by this embodiment, when the SVG path animation to be played needs to be played circularly for multiple times, code conversion between JS codes and CSS codes is performed, the GPU resources are used for playing the animation part needing to be played circularly for multiple times in the SVG path animation, frequent occupation of CPU resources when the SVG path animation is played is reduced through sharing of GPU resources, the occurrence of pause phenomenon during playing of the SVG path animation is greatly reduced, and even the SVG path animation with a complex path and a complex animation effect can also achieve a good playing effect. Meanwhile, when the SVG path animation to be played is played only once, or the playing times are not many despite the circular playing, the operation of the JS code to play the SVG path animation does not frequently occupy the CPU resource, at this time, the JS code can be directly operated to play the SVG path animation, and the reliability of playing the SVG path animation based on the JS code is further ensured.

Fig. 3 is a flowchart illustrating a SVG path animation playing method according to an exemplary embodiment of the present application. As shown in fig. 3, the method comprises the steps of:

301, obtaining animation effect information and JS codes corresponding to the SVG path animation to be played.

The implementation manner of step 301 in this embodiment is the same as that of step 101 in the above embodiment, and is not described herein again.

And 302, judging whether a target JS code segment which needs to be converted into a CSS code exists in the JS code according to the animation circulation times in the animation effect information, if so, executing step 303, and if not, executing step 304.

The implementation manner of step 302 in this embodiment is the same as that of step 102 in the above embodiment, and is not described herein again.

303, obtaining path data corresponding to the SVG path animation to be played, converting the target JS code segment into a CSS code by combining the path data, and running the CSS code by using GPU resources to play the SVG path animation.

The implementation manner of step 303 in this embodiment is the same as that of step 103 in the above embodiment, and is not described herein again.

And 304, running the JS code by utilizing the CPU resource to play the SVG path animation.

The implementation manner of step 304 in this embodiment is the same as that of step 204 in the above embodiment, and is not described herein again.

During the execution of the JS code, the actual playback time of the SVG path animation is detected 305.

And 306, if the actual playing time of the SVG path animation is greater than the expected playing time of the SVG path animation, determining that the SVG path animation has a pause phenomenon in the playing process.

307, the execution of the JS code is terminated, and the JS code is converted into CSS code in conjunction with the path data.

And 308, executing CSS codes by utilizing GPU resources to replay the SVG path animation.

In a practical situation, it may happen that after the JS code is directly run to play the SVG path animation, the played SVG path animation still has a pause phenomenon. The reasons for such a situation may be that the JS code of the SVG path animation has a large code amount, occupies a large amount of CPU resources during running, or that the current CPU has a large load and there is not enough CPU resources to run the JS code.

Therefore, after the JS codes are directly operated to play the SVG path animation, whether the played SVG path animation still has the pause phenomenon needs to be detected, and when the pause phenomenon is determined to occur, the JS codes can be converted into the CSS codes, and the GPU resources are utilized to operate the CSS codes to play the SVG path animation again.

In this embodiment, the manner of identifying whether the SVG path animation has the stuck phenomenon is not limited. For example, the karton phenomenon may be recognized through a man-machine interaction manner, such as by a user submitting notification information of the occurrence of the karton phenomenon. For another example, a JS code may be written to detect the actual playout time of the SVG path animation, and compare the actual playout time of the SVG path animation to the expected playout time period to automatically determine whether a pause phenomenon has occurred. Wherein, the expected playing time of the SVG path animation can be understood as the animation playing time length in the preset animation effect information.

According to the SVG path animation playing method provided by the embodiment, after the JS code is directly operated to play the SVG path animation, whether the played SVG path animation still has a pause phenomenon needs to be detected, and when the pause phenomenon is determined to occur, the JS code can be converted into the CSS code, and the CSS code is operated by using GPU resources to play the SVG path animation again. Therefore, SVG path animation is played again by utilizing GPU resources so as to solve the problem of pause phenomenon when the SVG path animation played by JS codes is operated as much as possible, and meanwhile, occupation of CPU resources can be reduced and CPU load is reduced by sharing the GPU resources.

Fig. 4 is a flowchart illustrating a further SVG path animation playing method according to an exemplary embodiment of the present application. As shown in fig. 4, the method includes the steps of:

401, obtaining animation effect information and a JS code corresponding to the SVG path animation to be played.

The implementation manner of step 401 in this embodiment is the same as that of step 101 in the above embodiment, and is not described herein again.

402, judging whether a target JS code segment which needs to be converted into a CSS code exists in the JS code according to the number of animation cycles in the animation effect information, if so, executing step 403, and if not, executing step 404.

The implementation manner of step 402 in this embodiment is the same as that of step 102 in the above embodiment, and is not described herein again.

And 403, acquiring path data corresponding to the SVG path animation to be played, converting the target JS code segment into CSS codes by combining the path data, and running the CSS codes by using GPU resources to play the SVG path animation.

The implementation manner of step 403 in this embodiment is the same as that of step 103 in the above embodiment, and is not described herein again.

And 404, running JS codes by utilizing the CPU resource to play the SVG path animation.

The implementation manner of step 404 in this embodiment is the same as that of step 204 in the above embodiment, and is not described herein again.

405, tracking the actual animation playing effect of the SVG path animation in the CSS code running process;

406, judging whether playing failure occurs in the playing process of the SVG path animation according to the actual animation playing effect and the expected animation playing effect of the SVG path animation;

and 407, if the playing fails, terminating the operation of the CSS codes, and operating the JS codes by using the CPU resource to play the SVG path animation again.

Generally, the animation playing effect of the SVG path animation played by running the CSS code using the GPU resource is better than the animation playing effect of the SVG path animation played by running the JS code using the CPU resource, but in practical applications, it is inevitable that the animation playing effect of the SVG path animation played by running the CSS code using the GPU resource does not reach the expected effect occasionally, for example, the load of the GPU is relatively large, and the GPU resource is not enough to run the CSS code to be played.

Therefore, it is necessary to monitor the animation playing effect of the SVG path animation played by running the CSS code using the GPU resource. Specifically, when the actual animation playing effect is consistent with the expected animation playing effect of the SVG path animation, it is indicated that the running of the CSS code to play the SVG path animation is successful in playing. On the contrary, when the actual animation playing effect is not consistent with the expected animation playing effect of the SVG path animation, it is indicated that the playing of the SVG path animation by running the CSS code fails in the playing process.

Wherein, the actual animation playing effect includes but is not limited to: the method comprises the following steps of actual animation speed rhythm of the SVG path animation, actual animation playing time, actual animation delay time, actual animation execution direction, actual circulation of the animation and actual circulation times. The desired animation play effect may be an animation effect message in a configuration file corresponding to the SVG path animation.

According to the SVG path animation playing method provided by the embodiment, after the SVG path animation played by the CSS code is run by using the GPU resource, the animation playing effect of the SVG path animation played by the CSS code is also monitored, when a playing failure event is monitored, the operation of the CSS code can be stopped, the JS code is run by using the CPU resource to play the SVG path animation again, the situation is effectively responded, and the safety redundancy of the SVG path animation playing is ensured.

It should be noted that, after step 308 of the embodiment shown in fig. 3, the animation playing effect of the SVG path animation played by running the CSS code using the GPU resource may also be monitored, and when it is monitored that a playback failure event occurs, an alarm message may be output to remind the developer that the SVG path animation played with the JS code or the CSS code has failed, so that the developer improves the corresponding JS code according to the alarm message.

On the basis of the above embodiment, in order to objectively and accurately identify the number of animation loop times of the SVG path animation, a number threshold may be set according to a large amount of test data. When the number of times of animation circulation of the SVG path animation is larger than the threshold value of the number of times, the number of times of animation circulation of the SVG path animation is more, and at this time, the SVG path animation may frequently occupy CPU resources when playing. When the number of times of animation circulation of the SVG path animation is not more than the threshold value of the number of times, the number of times of animation circulation of the SVG path animation is less, and at the moment, the CPU resource may not be frequently occupied when the SVG path animation is played.

On the basis of the above embodiment, the target JS code segment may be the entire JS code, or may be a partial JS code segment in the JS code.

In an actual situation, the SVG path animation to be played may be an independent SVG path animation, and at this time, the JS code corresponding to the SVG path animation is an independent JS code. Or, the SVG path animation to be played may further include a plurality of independent animation portions, at this time, the JS code corresponding to the SVG path animation includes a plurality of independent JS code segments, and each independent JS code segment is used to play one independent animation portion.

It should be noted that when the SVG path animation to be played is an independent SVG path animation, when it is recognized that the number of times of animation cycles in the SVG path animation is large, the JS code corresponding to the SVG path animation is entirely converted into the CSS code, and the GPU resource is used to run the CSS code to play the entire SVG path animation.

It should be noted that, when the SVG path animation to be played includes a plurality of independent animation portions, the number of animation cycles of each animation portion may be identified, and if the number of animation cycles of the animation portion is large, the JS code segment of the animation portion should be determined as the target JS code segment that needs to be converted into CSS code. Therefore, one possible implementation manner of "determining whether there is a target JS code segment that needs to be converted into a CSS code in the JS code according to the number of animation cycles in the animation effect information" is: judging whether the number of times of the animation cycle corresponding to each JS code segment is larger than a set number threshold value or not; and taking the JS code segment with the animation cycle number larger than the time threshold value as a target JS code segment.

If yes, judging whether the JS code segment is the target JS code segment meeting the condition when judging whether the target JS code segment exists in the JS codes or not, namely when loading each JS code segment in the JS codes; before the JS code is loaded, whether the target JS code segment exists in the JS code may be recognized in advance.

It can be understood that when the SVG path animation to be played includes a plurality of independent animation portions, only the target JS code segment determined to be the target JS code segment is transcoded, and the CSS code obtained by transcoding the target JS code segment is executed using the GPU resources. And for the rest JS code segments in the whole JS code, the operation by utilizing CPU resources is still adopted. It should be noted that the target JS code segment is a part of JS code segments in the JS code, the rest of the JS code segments are JS code segments in the JS code except the target JS code segment, and the animation portions corresponding to the rest of the JS code segments are played for a single time with fewer or no cycles when played.

When the SVG path animation to be played comprises a plurality of independent animation parts, the JS code segments corresponding to the animation parts with less or no cycle times can be played by running through CPU resources, and the CSS codes corresponding to the animation parts with more cycle times can be played by running through GPU resources, so that sharing of GPU resources is realized as much as possible, frequent occupation of CPU resources when the SVG path animation is played is reduced, and the occurrence of pause phenomenon when the SVG path animation is played is greatly reduced.

On the basis of the above embodiment, optionally, when the target JS code segment is converted into the CSS code, the SVG path identifier and the running logic in the target JS code segment may be analyzed; acquiring path data of corresponding SVG path animation according to the SVG path identifier; and coding according to the path data and the running logic of the SVG path animation according to the CSS code rule to obtain CSS codes.

Specifically, an SVG path identifier in the JS code is added in the development phase of the JS code, so that tracing is performed through the SVG path identifier during parsing, and path data of a preconfigured SVG path animation is found. And the running logic of the JS codes realizes that the SVG path animation is played along the motion path corresponding to the configured path data by the configured animation effect information. After the SVG path identification and the operation logic in the target JS code segment are analyzed, the path data of the SVG path animation configured in advance are obtained based on the SVG path identification, and encoding is carried out according to the CSS code rule according to the obtained path data of the SVG path animation and the analyzed operation logic of the JS code, so that CSS codes are obtained, and the conversion from the JS codes to the CSS codes is completed. The converted CSS codes can be stored in a global CSS style file, so that when SVG path animation is played, the CSS codes can be obtained from the global CSS style file and run.

In practical application, analyzing the JS codes and converting the JS codes into CCS codes can be realized by utilizing webpack. The webpack is a module bundler of a JavaScript application program, has the functions of analyzing and converting codes, and can pack and integrate various resources such as JS codes, quoted CSS resources, picture resources, font resources and the like.

It should be noted that the execution subjects of the steps of the methods provided in the above embodiments may be the same device, or different devices may be used as the execution subjects of the methods. For example, the execution subjects of steps 101 to 103 may be device a; for another example, the execution subject of

steps

101 and 102 may be device a, and the execution subject of step 103 may be device B; and so on.

In addition, in some of the flows described in the above embodiments and the drawings, a plurality of operations are included in a specific order, but it should be clearly understood that the operations may be executed out of the order presented herein or in parallel, and the sequence numbers of the operations, such as 101, 102, etc., are merely used for distinguishing different operations, and the sequence numbers do not represent any execution order per se. Additionally, the flows may include more or fewer operations, and the operations may be performed sequentially or in parallel. It should be noted that, the descriptions of "first", "second", etc. in this document are used for distinguishing different messages, devices, modules, etc., and do not represent a sequential order, nor limit the types of "first" and "second" to be different.

Fig. 5 is a schematic structural diagram of an SVG path animation playback device according to an exemplary embodiment of the present application. As shown in fig. 5, the apparatus includes: the method comprises the following steps: a memory 11 and a processor 12.

The memory 11 is used for storing a computer program and may be configured to store other various data to support operations on the processor. Examples of such data include instructions for any application or method operating on the processor, contact data, phonebook data, messages, pictures, videos, and so forth.

The memory 11 may be implemented by any type or combination of volatile or non-volatile memory devices, 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 or optical disks.

A processor 12, coupled to the memory 11, for executing the computer program in the memory 11 for:

if the target JS code segment exists in the JS code, the path data corresponding to the SVG path animation to be played is obtained, the target JS code segment is converted into the CSS code by combining the path data, and the CSS code is operated by utilizing GPU resources to play the SVG path animation.

Further, the processor 12 is further configured to: and if the JS code is judged to have no target JS code segment, the JS code is operated by utilizing the CPU resource to play the SVG path animation.

Further, the processor 12 is further configured to:

tracking the actual animation playing effect of the SVG path animation in the CSS code running process;

judging whether playing failure occurs in the playing process of the SVG path animation according to the actual animation playing effect and the expected animation playing effect of the SVG path animation;

and if the playing fails, stopping running the CSS codes, and running the JS codes by utilizing the CPU resource to replay the SVG path animation.

Further, the processor 12 is further configured to:

in the process of operating the JS codes, detecting the actual playing time of the SVG path animation;

if the actual playing time of the SVG path animation is longer than the expected playing time of the SVG path animation, determining that the SVG path animation has a pause phenomenon in the playing process;

terminating the operation of the JS codes, and converting the JS codes into CSS codes by combining the path data;

and executing CSS codes by utilizing GPU resources to replay the SVG path animation.

Further, the processor 12, when performing transcoding, is specifically configured to:

analyzing an SVG path identifier and an operation logic in the target JS code segment;

acquiring path data of corresponding SVG path animation according to the SVG path identifier;

and coding according to the path data and the running logic of the SVG path animation according to the CSS code rule to obtain CSS codes.

Further, the target JS code segment is the entire JS code.

Further, the JS code includes a plurality of independent JS code segments, and the target JS code segment is a part of the JS code segment in the JS code, then the processor 12 is further configured to:

and running the rest JS code segments in the JS codes by utilizing the CPU resource.

Further, when identifying the target JS code segment, the processor 12 is specifically configured to:

judging whether the number of times of the animation cycle corresponding to each JS code segment is larger than a set number threshold value or not;

and taking the JS code segment with the animation cycle number larger than the time threshold value as a target JS code segment.

The apparatus shown in fig. 5 can perform the method of the above embodiment, and reference may be made to the related description of the above embodiment for a part of the embodiment that is not described in detail. The implementation process and technical effect of the technical solution refer to the description in the above embodiments, and are not described herein again.

Further, as shown in fig. 5, the apparatus further includes: communication components 13, display 14, power components 15, audio components 16, and the like. Only some of the components are schematically shown in fig. 5, and it is not meant that the processor includes only the components shown in fig. 5. In addition, the components shown by the dashed boxes in fig. 5 are optional components, but not necessarily optional components, and may be determined according to a 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 notebook computer, a tablet, a mobile phone, etc., the SVG path animation playback device may include a component shown by a dotted line box in fig. 5; if the SVG path animation playback device is implemented as a server device such as a conventional server, a cloud server, or a server array, the components shown by the dashed boxes in fig. 5 are not included.

Accordingly, the present application further provides a computer readable storage medium storing a computer program, where the computer program is capable of implementing the steps that can be executed by a processor in the foregoing method embodiments when executed.

The communication component of fig. 5 described above is configured to facilitate communication between the device in which the communication component is located and other devices in a wired or wireless manner. The device where the communication component is located can access a wireless network based on a communication standard, such as a WiFi, a 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 one exemplary embodiment, the communication component further includes a Near Field Communication (NFC) module to facilitate short-range communications. For example, the NFC module may be implemented based on Radio Frequency Identification (RFID) technology, infrared data association (IrDA) technology, Ultra Wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.

The display in fig. 5 described above 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 an input signal 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.

The power supply assembly of fig. 5 described above provides power to the various components of the device in which the power supply assembly is located. The power components may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power for the device in which the power component is located.

The audio component of fig. 5 described above may be configured to output and/or input an audio signal. For example, the audio component includes a Microphone (MIC) configured to receive an external audio signal when the device in which the audio component is located is in an operational mode, such as a call mode, a recording mode, and a voice recognition mode. The received audio signal may further be stored in a memory or transmitted via a communication component. In some embodiments, the audio assembly further comprises a speaker for outputting audio signals.

As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may 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, and the like) having computer-usable program code embodied therein.

The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may 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, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

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

The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.

Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, 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 disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

The above description is only an example of the present application and is not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. 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. An SVG path animation playing method is characterized by comprising the following steps:

2. The method of claim 1, further comprising:

and if the target JS code segment does not exist in the JS code, running the JS code by utilizing CPU resources to play the SVG path animation.

3. The method of claim 1, further comprising:

and if the playing fails, stopping the operation of the CSS codes, and operating the JS codes by utilizing CPU resources so as to play the SVG path animation again.

4. The method of claim 2 or 3, further comprising:

detecting the actual playing time of the SVG path animation in the process of operating the JS code;

terminating the operation of the JS codes, and converting the JS codes into CSS codes in combination with the path data;

and running the CSS codes by utilizing GPU resources to replay the SVG path animation.

5. The method of claim 1, wherein the converting the target JS code segment into CSS code in conjunction with the path data comprises:

analyzing the SVG path identification and the operation logic in the target JS code segment;

and coding according to the path data of the SVG path animation and the running logic according to a CSS code rule to obtain a CSS code.

6. The method of any of claims 1-3 and 5, wherein the target JS code segment is the entire JS code.

7. The method of any of claims 1-3 and 5, wherein the JS code comprises a plurality of independent JS code segments, the target JS code segment being a partial JS code segment in the JS code, then the method further comprises:

and running the rest JS code segments in the JS codes by utilizing CPU resources.

8. The method of claim 7, wherein determining whether the target JS code segment that needs to be converted into the CSS code exists in the JS code according to the number of animation cycles in the animation effect information includes:

9. An SVG path animation playback device, comprising: a memory and a processor;

the memory for storing a computer program;

the processor, coupled with the memory, to execute the computer program to:

10. A computer-readable storage medium storing a computer program, wherein the computer program, when executed by a processor, causes the processor to implement the steps in the SVG path animation rendering method of any one of claims 1 to 8.