CN113920234A - Method and related device for converting SVG animation into GIF - Google Patents

Method and related device for converting SVG animation into GIF Download PDF

Info

Publication number
CN113920234A
CN113920234A CN202111514161.9A CN202111514161A CN113920234A CN 113920234 A CN113920234 A CN 113920234A CN 202111514161 A CN202111514161 A CN 202111514161A CN 113920234 A CN113920234 A CN 113920234A
Authority
CN
China
Prior art keywords
svg
gif
animation
sequence
converting
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202111514161.9A
Other languages
Chinese (zh)
Other versions
CN113920234B (en
Inventor
潘力杨
范渊
刘博�
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
DBAPPSecurity Co Ltd
Original Assignee
DBAPPSecurity Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by DBAPPSecurity Co Ltd filed Critical DBAPPSecurity Co Ltd
Priority to CN202111514161.9A priority Critical patent/CN113920234B/en
Publication of CN113920234A publication Critical patent/CN113920234A/en
Application granted granted Critical
Publication of CN113920234B publication Critical patent/CN113920234B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00Animation
    • G06T13/802D [Two Dimensional] animation, e.g. using sprites
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/455Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45504Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
    • G06F9/45529Embedded in an application, e.g. JavaScript in a Web browser
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2210/00Indexing scheme for image generation or computer graphics
    • G06T2210/32Image data format
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2213/00Indexing scheme for animation
    • G06T2213/12Rule based animation

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)

Abstract

The invention discloses a method for converting SVG animation into GIF, which comprises the following steps: obtaining SVG elements with animation effects and interpolation functions corresponding to the SVG elements; determining the time point of each key frame in the GIF playing process according to the preset playing time; transmitting the time points as parameters into an interpolation function for evaluation to obtain SVG elements corresponding to each key frame so as to form an SVG sequence; converting each SVG element in the SVG sequence into a corresponding Canvas element to form a Canvas sequence; the conversion of the SVG animation to the GIF can be achieved by passing the Canvas sequence to the GIF converter to generate the GIF animation. The invention also provides a device, equipment and a storage medium, which also have the beneficial effects.

Description

Method and related device for converting SVG animation into GIF
Technical Field
The present invention relates to the field of web page technology, and more particularly, to a method of converting SVG animation into GIF, a device of converting SVG animation into GIF, an apparatus of converting SVG animation into GIF, and a computer-readable storage medium.
Background
SVG (Scalable Vector Graphics) is a Scalable Vector graphic, which is a graphic format based on XML (extensible markup language) for describing two-dimensional Vector Graphics. SVG includes a plurality of elements for describing different categories of graphics, presentation effects, and gradations, such as < line >, < rect >, < circle >, < regen >, < path >, < linear gradient >, < pattern >, < filter >, < mask >, etc., which are used as open standards established by W3C, become web standards in the very early days, and are gradually and widely used due to their compatibility and support of good animation effect expression. Compared with common image formats such as JPG, PNG and GIF, SVG is based on vectors rather than lattices, so that no blurring or jagging is generated during zooming, and the details of the image are completely maintained. SVG has 5 animation elements defined under the SMIL (Synchronized Multimedia Integration Language) specification, which are: < set >, < animal-motion >, < animal-color >, < animal-transform >, to declaratively set their respective attributes to change over time to create an animation effect. SVG has a disadvantage in that if it is used to represent graphics with very complicated details, its size is much larger than that of a dot-matrix diagram.
Gif (graphics exchange format) is a bitmap graphic file format that reproduces true color images in 8-bit colors. The image file is actually a compressed document, and is encoded by adopting an LZW (string Table compression Algorithm) compression algorithm, so that the time for transmitting the image file on the network is effectively reduced. Since the GIF supports storing a plurality of bitmaps in one file, a coherent animation effect can be displayed if an image is read frame by frame and displayed on a screen.
The Canvas element (meaning Canvas) is part of the HTML5 standard, and provides a series of APIs for a scripting language (JavaScript) to dynamically draw graphics on the element, or to draw existing picture elements directly on Canvas. The element API also comprises a method for inquiring the color value of each pixel grid point according to the coordinates.
The method is characterized in that a GIF encoder is operated under a browser environment and is generally realized by class libraries such as gif.js and GIFter.js, and the core principle of the GIF encoder is that an LZW algorithm is realized at a browser end, the color value of each pixel lattice point in a Canvas element is extracted, the color value is converted into the closest color value in an 8-bit color range, and then the color value is encoded to generate a binary object conforming to the GIF image data format. The disadvantage is that only translations to Canvas elements are supported. How to provide a method for converting SVG animation into GIF is a problem that needs to be solved urgently by those skilled in the art.
Disclosure of Invention
The invention aims to provide a method for converting SVG animation into GIF, which can convert SVG animation into GIF; it is another object of the present invention to provide an apparatus for converting SVG animation into GIF, a device for converting SVG animation into GIF, and a computer-readable storage medium, which can convert SVG animation into GIF.
In order to solve the above technical problem, the present invention provides a method for converting an SVG animation into a GIF, comprising:
obtaining SVG elements with animation effects and interpolation functions corresponding to the SVG elements;
determining the time point of each key frame in the GIF playing process according to the preset playing time;
transmitting the time points as parameters into the interpolation function for evaluation to obtain SVG elements corresponding to the key frames so as to form an SVG sequence;
converting each SVG element in the SVG sequence into a corresponding Canvas element to form a Canvas sequence;
passing the Canvas sequence to a GIF transformer to generate a GIF animation.
Optionally, the converting each SVG element in the SVG sequence into a corresponding Canvas element to form a Canvas sequence includes:
converting each SVG element in the SVG sequence into a corresponding Image object;
and converting the Image object into a corresponding Canvas element to form a Canvas sequence.
Optionally, the determining, according to the preset playing duration, a time point at which each key frame is located in the GIF playing process includes:
calculating millisecond delay between every two frames according to the preset playing frame number per second;
calculating the total frame number according to the preset playing time and the millisecond delay;
and determining the time point of each key frame in the GIF playing process according to the total frame number.
Optionally, the obtaining of the SVG element with the animation effect, and the interpolation function corresponding to the SVG element include:
and when the animation effect of the SVG elements is the complementary animation generated based on the script, adding a preset return value to the interpolation function corresponding to the SVG elements.
Optionally, the obtaining of the SVG element with the animation effect, and the interpolation function corresponding to the SVG element include:
and when the animation effect of the SVG element is the effect generated based on the animation element, generating an interpolation function corresponding to the SVG element.
Optionally, after the passing the Canvas sequence to the GIF converter to generate the GIF animation, the method further includes:
creating a data object link for a Blob object corresponding to the GIF animation;
and assigning the data object link as a preset element in the page.
The invention also provides a device for converting the SVG animation into the GIF, which comprises the following steps:
the system comprises an acquisition module, a processing module and a display module, wherein the acquisition module is used for acquiring SVG elements with animation effects and interpolation functions corresponding to the SVG elements;
the time point determining module is used for determining the time point of each key frame in the GIF playing process according to the preset playing time;
the evaluation module is used for transmitting the time point as a parameter into the interpolation function for evaluation to obtain SVG elements corresponding to the key frames so as to form an SVG sequence;
the sequence conversion module is used for converting each SVG element in the SVG sequence into a corresponding Canvas element so as to form a Canvas sequence;
and the generation module is used for transmitting the Canvas sequence to the GIF converter to generate the GIF animation.
Optionally, the sequence conversion module includes:
the first conversion unit is used for converting each SVG element in the SVG sequence into a corresponding Image object;
and the second conversion unit is used for converting the Image object into a corresponding Canvas element so as to form a Canvas sequence.
The present invention also provides an apparatus for converting SVG animation into GIF, the apparatus comprising:
a memory: for storing a computer program;
a processor: for implementing the steps of the method of converting SVG animation to GIF as described in any one of the above when said computer program is executed.
The present invention also provides a computer readable storage medium having stored thereon a computer program which, when executed by a processor, carries out the steps of the method of converting SVG animation to GIF as claimed in any one of the preceding claims.
The invention provides a method for converting SVG animation into GIF, which comprises the following steps: obtaining SVG elements with animation effects and interpolation functions corresponding to the SVG elements; determining the time point of each key frame in the GIF playing process according to the preset playing time; transmitting the time points as parameters into an interpolation function for evaluation to obtain SVG elements corresponding to each key frame so as to form an SVG sequence; converting each SVG element in the SVG sequence into a corresponding Canvas element to form a Canvas sequence; the Canvas sequence is passed to the GIF transformer to generate the GIF animation.
The SVG animation conversion method has the advantages that SVG elements with animation effects are converted into SVG sequences through interpolation functions according to the point of each key frame in the GIF animation, the SVG sequences are converted into the GIF animation finally through the conversion of the SVG sequences into Canvas sequences, and the SVG animation can be converted into the GIF animation.
The invention also provides a device for converting the SVG animation into the GIF, a device for converting the SVG animation into the GIF and a computer readable storage medium, which also have the beneficial effects and are not repeated herein.
Drawings
In order to more clearly illustrate the embodiments or technical solutions of the present invention, the drawings used in the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art that other drawings can be obtained based on these drawings without creative efforts.
FIG. 1 is a flowchart of a method for converting SVG animation into GIF according to an embodiment of the present invention;
FIG. 2 is a flowchart of a specific method for converting SVG animation into GIF according to an embodiment of the present invention;
fig. 3 is a block diagram illustrating a structure of an apparatus for converting SVG animation into GIF according to an embodiment of the present invention;
fig. 4 is a block diagram illustrating a structure of an apparatus for converting SVG animation into GIF according to an embodiment of the present invention.
Detailed Description
The core of the invention is to provide a method for converting SVG animation into GIF. In the prior art, the Canvas element can only be converted into the GIF animation generally, and the SVG cannot be converted into the GIF animation.
The method for converting the SVG animation into the GIF provided by the invention comprises the following steps: obtaining SVG elements with animation effects and interpolation functions corresponding to the SVG elements; determining the time point of each key frame in the GIF playing process according to the preset playing time; transmitting the time points as parameters into an interpolation function for evaluation to obtain SVG elements corresponding to each key frame so as to form an SVG sequence; converting each SVG element in the SVG sequence into a corresponding Canvas element to form a Canvas sequence; the Canvas sequence is passed to the GIF transformer to generate the GIF animation.
The SVG animation conversion method has the advantages that SVG elements with animation effects are converted into SVG sequences through interpolation functions according to the point of each key frame in the GIF animation, the SVG sequences are converted into the GIF animation finally through the conversion of the SVG sequences into Canvas sequences, and the SVG animation can be converted into the GIF animation.
In order that those skilled in the art will better understand the disclosure, the invention will be described in further detail with reference to the accompanying drawings and specific embodiments. It is to be understood that the described embodiments are merely exemplary of the invention, and not restrictive of the full scope of the invention. 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 invention.
Referring to fig. 1, fig. 1 is a flowchart illustrating a method for converting SVG animation into GIF according to an embodiment of the present invention.
Referring to fig. 1, in an embodiment of the present invention, a method of converting SVG animation into GIF includes:
s101: and obtaining SVG elements with animation effects and interpolation functions corresponding to the SVG elements.
The specific obtaining manner is not specifically limited in the embodiment of the present invention, and the SVG elements with animation effects belong to an SVG format, and each element of an SVG animation capable of generating animation effects. In this step, normalization processing is specifically performed according to a definition mode of the SVG animation, so as to obtain an acceptance time interpolation t, and an interpolation function of the SVG element at the time point is returned, that is, an interpolation function corresponding to the SVG element is obtained. The definition of the SVG animation will be described in detail in the following embodiments of the present invention, and will not be described herein again.
S102: and determining the time point of each key frame in the GIF playing process according to the preset playing time length.
In this step, it is first necessary to determine the duration of the GIF animation that needs to be converted finally, i.e., the preset playing duration. In this step, the time point of each key frame in the GIF playing process is determined according to the playing time length. It should be noted that there is no explicit order between S102 and S101, and any step may be executed first, or both steps may be executed simultaneously, as the case may be.
S103: and transmitting the time points as parameters into an interpolation function for evaluation to obtain SVG elements corresponding to each key frame so as to form an SVG sequence.
In this step, the time points obtained by the calculation in S102 are transmitted as parameters to an interpolation function for evaluation, so as to obtain SVG elements corresponding to each time point, that is, SVG elements corresponding to each key frame, and then the SVG elements can be combined into an SVG sequence according to the sequence of the time points.
S104: and converting each SVG element in the SVG sequence into a corresponding Canvas element to form the Canvas sequence.
The details of the conversion of the SVG element into the Canvas element will be described in detail in the following embodiments of the present invention, and will not be described herein again. And after the SVG elements are converted into Canvas elements, based on the sequence embodied in the SVG sequence, the Canvas sequence can be formed through the Canvas elements.
S105: the Canvas sequence is passed to the GIF transformer to generate the GIF animation.
In this step, a GIF converter in the prior art is called, and a GIF animation is generated based on each Canvas element in the Canvas sequence. For details of generating the GIF animation based on the Canvas element, reference may be made to the prior art, and details thereof are not repeated herein.
The method for converting the SVG animation into the GIF provided by the embodiment of the invention comprises the following steps: obtaining SVG elements with animation effects and interpolation functions corresponding to the SVG elements; determining the time point of each key frame in the GIF playing process according to the preset playing time; transmitting the time points as parameters into an interpolation function for evaluation to obtain SVG elements corresponding to each key frame so as to form an SVG sequence; converting each SVG element in the SVG sequence into a corresponding Canvas element to form a Canvas sequence; the Canvas sequence is passed to the GIF transformer to generate the GIF animation.
The SVG animation conversion method has the advantages that SVG elements with animation effects are converted into SVG sequences through interpolation functions according to the point of each key frame in the GIF animation, the SVG sequences are converted into the GIF animation finally through the conversion of the SVG sequences into Canvas sequences, and the SVG animation can be converted into the GIF animation.
The details of the method for converting SVG animation into GIF according to the present invention will be described in detail in the following embodiments of the present invention.
Referring to fig. 2, fig. 2 is a flowchart of a specific method for converting SVG animation into GIF according to an embodiment of the present invention.
Referring to fig. 2, in an embodiment of the present invention, a method of converting SVG animation into GIF includes:
s201: and when the animation effect of the SVG elements is the complementary animation generated based on the script, adding preset return values for the interpolation functions corresponding to the SVG elements.
In the embodiment of the invention, the SVG supports two ways to define the animation effect at the browser end. The method comprises the following steps: controlling related attributes such as positions, filling colors and the like of SVG elements to change along with the change of the time interpolation t by utilizing an interpolation function written by a scripting language, wherein the animation is also called as complementary animation; the second is as follows: with animation elements in SVG, such as < set >, < animal-motion >, < animal-color >, < animal-transform >, etc., their associated attributes are written to declaratively define the animation effects of SVG. Since animation elements are developed under the specification of SMIL (synchronized multimedia language), such animations are also referred to as SMIL animations.
In this step, when the obtained SVG animation is specifically a complementary animation, since the complementary animation is specifically controlled by the interpolation function, the interpolation function can be synchronously obtained. In this case, only the interpolation function corresponding to the interpolation function needs to be rewritten in this step. Since normally the function will not have a return value, the corresponding attribute of the SVG element is dynamically changed at the execution process value. Therefore, a return value is added to the function in the step, and the SVG element object is returned as the return value at the end of execution.
S202: and when the animation effect of the SVG element is the effect generated based on the animation element, generating an interpolation function corresponding to the SVG element.
In this step, when the obtained SVG animation is specifically an SMIL animation, that is, the animation effect of the SVG is generated based on animation elements, in this step, an interpolation function matching the effect of the SVG animation element needs to be written according to different attributes of the animation element, and finally, the SVG element itself needs to be returned.
Specifically, the SVG animation elements have the following core attributes:
the first attribute name is corresponding to the attribute value of the SVG element needing to be changed in the animation process, and refers to which attributes need to be dynamically calculated and assigned back to the SVG element in the execution process of the interpolation function.
Second, From to, the value of the attribute of the element in the attribute name at the start and end of the animation can be mapped to the variation range of the element value in the programming of the interpolation function.
And thirdly, begin, end and duration, corresponding to the start time and the end time of the animation and the duration of the animation, and mapping the start time and the end time to be boundary conditions of the function in the writing of the interpolation function.
Fourth, accumulate: after the animation is set, whether the animation is started from the head or continued from the end is set, and the value of the attribute to be calculated is set after the corresponding interpolation function triggers the boundary condition.
Fifth, repeat count: and setting the animation execution times, and when t is larger than a certain value in the process of writing the interpolation function, the value of the calculated attribute does not change any more.
S203: and calculating the millisecond delay between every two frames according to the preset playing frame number per second.
In this step, firstly, according to the number of frames per second, i.e. FPS, of the GIF animation that is finally generated, the millisecond Delay between every two frames is calculated, i.e.:
Delay = 1000 / FPS。
s204: and calculating the total frame number according to the preset playing time and the millisecond delay.
In this step, the preset GIF playing Duration is divided by the Delay and rounded, and the total frame number Steps of the GIF can be converted, that is:
Steps = Duration / Daly。
s205: and determining the time point of each key frame in the GIF playing process according to the total frame number.
In this step, a time point sequence where each key frame of the GIF is located can be constructed, for example:
(1 / Steps)* Duration 、(2 / Steps) * Duration 、 ... (Steps / Steps) * Durtaion。
s206: and transmitting the time points as parameters into an interpolation function for evaluation to obtain SVG elements corresponding to each key frame so as to form an SVG sequence.
In this step, the time point sequences obtained in S205 are transmitted to the interpolation function obtained in S201 or S202 one by one to be evaluated, so as to obtain SVG elements corresponding to the time points of the key frames of the GIF, thereby forming an SVG sequence.
S207: and converting each SVG element in the SVG sequence into a corresponding Image object.
S208: the Image objects are converted to corresponding Canvas elements to form a Canvas sequence.
In the embodiment of the invention, the SVG element is converted into the corresponding Image object, and then the Image object is converted into the corresponding Canvas element. Specifically, in the embodiment of the present invention, the SVG element is rendered in an empty Canvas element to form a required Canvas element. The method comprises the following steps:
in the first step, the instantiated browser environment provides an XML sequencer object XMLSerializer, calls the seriarizeToString method of this object to convert the SVG element into an XML string.
And step two, calling a blob (binary large object) construction function provided by a browser environment, wrapping the XML character strings obtained in the step one in an array, and transmitting the XML character strings together with a configuration object { type: 'image/svg + XML' } as a parameter to obtain the blob object.
And thirdly, calling a URL (uniform resource locator) method provided by the browser environment to create an object data address, namely url, for the blob object obtained in the second step.
And fourthly, obtaining the width and height of the SVG elements in the browser environment according to the width and height attributes of the SVG elements.
And fifthly, calling an Image construction function provided by a browser environment to obtain a picture object, namely img, and respectively assigning the width and height values obtained in the fourth step and the object data address obtained in the third step to the width, height and src attributes of the picture object.
And sixthly, calling the decode method of the picture object obtained in the fifth step, and waiting for the completion of picture decoding.
The seventh step:
create element ('Canvas') method provided by the browser environment is called to obtain a Canvas element object, and the getContext ('2 d') method is called to obtain the corresponding context object context.
And eighthly, respectively assigning the width and height values obtained in the third step to the width and height attributes of the Canvas element object obtained in the seventh step. And calling a drawImage method of the context object obtained in the seventh step, and transmitting the picture object obtained in the fifth step together with the X-axis value 0 of the initial drawing coordinate and the Y-axis value 0 of the initial drawing coordinate as parameters. This step draws the graphical object into a Canvas element.
By this point, the required Canvas element is available. And after each SVG element in the SVG sequence is converted, a Canvas sequence can be obtained.
S209: the Canvas sequence is passed to the GIF transformer to generate the GIF animation.
This step is substantially the same as S105 in the above embodiment of the present invention, and for details, reference is made to the above embodiment of the present invention, which is not repeated herein. In this step, a Blob object storing binary data in GIF format is obtained.
S210: and creating a data object link for the Blob object corresponding to the GIF animation.
Createobjecturl method provided by the browser environment may be called in this step to create url, i.e., a data object link, for the Blob object obtained in S209 described above, so as to perform the following steps.
S211: and assigning the data object link as a preset element in the page.
In this step, the url is assigned as a preset element in the page, for example: A. creating an anchor object by calling a document element ('a') method provided by a browser environment, transferring url obtained in the step to the src attribute of the object, and inserting the anchor object into a page for a user to click and download; and B, calling an Image construction function provided by a browser environment to create a picture object, transferring the url obtained in the step to the src attribute of the object, and inserting the picture object into a page to generate the GIF for direct preview.
Of course, the generated GIF animation may be presented in other manners in the embodiment of the present invention, and is not limited herein.
According to the method for converting the SVG animation into the GIF, provided by the embodiment of the invention, the SVG elements with animation effect are converted into the SVG sequence through the interpolation function according to the time point of each key frame in the GIF animation, and the SVG sequence is converted into the Canvas sequence to be finally converted into the GIF animation, so that the SVG animation can be converted into the GIF.
The following describes a device for converting SVG animation into GIF according to an embodiment of the present invention, and the device for converting SVG animation into GIF described below and the method for converting SVG animation into GIF described above may be referred to in correspondence with each other.
Referring to fig. 3, fig. 3 is a block diagram illustrating a structure of a device for converting SVG animation into GIF according to an embodiment of the present invention. Referring to fig. 3, the apparatus for converting SVG animation into GIF may include:
the obtaining module 100 is configured to obtain an SVG element with an animation effect and an interpolation function corresponding to the SVG element.
The time point determining module 200 is configured to determine a time point of each key frame in the GIF playing process according to a preset playing duration.
And an evaluation module 300, configured to transmit the time point as a parameter into the interpolation function for evaluation, so as to obtain SVG elements corresponding to each of the key frames, so as to form an SVG sequence.
A sequence conversion module 400, configured to convert each SVG element in the SVG sequence into a corresponding Canvas element, so as to form a Canvas sequence.
A generating module 500, configured to deliver the Canvas sequence to the GIF converter to generate the GIF animation.
Preferably, in the embodiment of the present invention, the sequence conversion module 400 includes:
and the first conversion unit is used for converting each SVG element in the SVG sequence into a corresponding Image object.
And the second conversion unit is used for converting the Image object into a corresponding Canvas element so as to form a Canvas sequence.
Preferably, in an embodiment of the present invention, the time point determining module 200 includes:
and the millisecond delay unit is used for calculating the millisecond delay between every two frames according to the preset playing frame number per second.
And the total frame number unit is used for calculating the total frame number according to the preset playing time and the millisecond delay.
And the time point unit is used for determining the time point of each key frame in the GIF playing process according to the total frame number.
Preferably, in the embodiment of the present invention, the obtaining module 100 is configured to:
and when the animation effect of the SVG elements is the complementary animation generated based on the script, adding a preset return value to the interpolation function corresponding to the SVG elements.
Preferably, in the embodiment of the present invention, the obtaining module 100 is configured to:
and when the animation effect of the SVG element is the effect generated based on the animation element, generating an interpolation function corresponding to the SVG element.
Preferably, in the embodiment of the present invention, the method further includes:
and the data object linking module is used for creating a data object link for the Blob object corresponding to the GIF animation.
And the assignment module is used for assigning the data object link as a preset element in the page.
The device for converting an SVG animation into a GIF according to this embodiment is used to implement the aforementioned method for converting an SVG animation into a GIF, and therefore specific embodiments of the device for converting an SVG animation into a GIF may be found in the foregoing embodiments of the method for converting an SVG animation into a GIF, for example, the obtaining module 100, the time point determining module 200, the evaluating module 300, the sequence converting module 400, and the generating module 500 are respectively used to implement the steps S101 to S105 of the aforementioned method for converting an SVG animation into a GIF, so that specific embodiments thereof may refer to descriptions of corresponding embodiments of each part, and are not described herein again.
The following describes an apparatus for converting an SVG animation into a GIF according to an embodiment of the present invention, and the apparatus for converting an SVG animation into a GIF described below, the method for converting an SVG animation into a GIF described above, and the device for converting an SVG animation into a GIF may be referred to in correspondence with each other.
Referring to fig. 4, fig. 4 is a block diagram illustrating a structure of a device for converting SVG animation into GIF according to an embodiment of the present invention.
Referring to fig. 4, the apparatus for converting SVG animation into GIF may include a processor 11 and a memory 12.
The memory 12 is used for storing a computer program; the processor 11 is configured to implement the specific content of the method for converting SVG animation into GIF described in the above embodiment of the invention when the computer program is executed.
The processor 11 in the apparatus for converting SVG animation into GIF of the present embodiment is used to install the device for converting SVG animation into GIF described in the above embodiment of the present invention, and at the same time, the processor 11 and the memory 12 are combined to implement the method for converting SVG animation into GIF described in any embodiment of the present invention. Therefore, the specific implementation manner of the device for converting an SVG animation into a GIF can be found in the foregoing embodiment section of the method for converting an SVG animation into a GIF, and the specific implementation manner thereof may refer to the description of the corresponding embodiments of each section, and is not described herein again.
The present invention also provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements a method of converting SVG animation into GIF as described in any of the above embodiments of the invention. The rest can be referred to the prior art and will not be described in an expanded manner.
The embodiments are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same or similar parts among the embodiments are referred to each other. The device disclosed by the embodiment corresponds to the method disclosed by the embodiment, so that the description is simple, and the relevant points can be referred to the method part for description.
Those of skill would further appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, computer software, or combinations of both, and that the various illustrative components and steps have been described above generally in terms of their functionality in order to clearly illustrate this interchangeability of hardware and software. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.
The steps of a method or algorithm described in connection with the embodiments disclosed herein may be embodied directly in hardware, in a software module executed by a processor, or in a combination of the two. A software module may reside in Random Access Memory (RAM), memory, Read Only Memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.
Finally, it should also be noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, 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 identical elements in a process, method, article, or apparatus that comprises the element.
The method of converting SVG animation into GIF, the apparatus for converting SVG animation into GIF, the device for converting SVG animation into GIF, and the computer-readable storage medium according to the present invention have been described in detail above. The principles and embodiments of the present invention are explained herein using specific examples, which are presented only to assist in understanding the method and its core concepts. It should be noted that, for those skilled in the art, it is possible to make various improvements and modifications to the present invention without departing from the principle of the present invention, and those improvements and modifications also fall within the scope of the claims of the present invention.

Claims (10)

1. A method of converting SVG animation to GIF, comprising:
obtaining SVG elements with animation effects and interpolation functions corresponding to the SVG elements;
determining the time point of each key frame in the GIF playing process according to the preset playing time;
transmitting the time points as parameters into the interpolation function for evaluation to obtain SVG elements corresponding to the key frames so as to form an SVG sequence;
converting each SVG element in the SVG sequence into a corresponding Canvas element to form a Canvas sequence;
passing the Canvas sequence to a GIF transformer to generate a GIF animation.
2. The method of claim 1, wherein converting each SVG element in the SVG sequence to a corresponding Canvas element to form a Canvas sequence comprises:
converting each SVG element in the SVG sequence into a corresponding Image object;
and converting the Image object into a corresponding Canvas element to form a Canvas sequence.
3. The method of claim 2, wherein the determining the time point of each key frame during the GIF playing process according to the preset playing duration comprises:
calculating millisecond delay between every two frames according to the preset playing frame number per second;
calculating the total frame number according to the preset playing time and the millisecond delay;
and determining the time point of each key frame in the GIF playing process according to the total frame number.
4. The method of any one of claims 1 to 3, wherein said obtaining SVG elements having an animated effect, and the interpolation function corresponding to said SVG elements comprises:
and when the animation effect of the SVG elements is the complementary animation generated based on the script, adding a preset return value to the interpolation function corresponding to the SVG elements.
5. The method of any one of claims 1 to 3, wherein said obtaining SVG elements having an animated effect, and the interpolation function corresponding to said SVG elements comprises:
and when the animation effect of the SVG element is the effect generated based on the animation element, generating an interpolation function corresponding to the SVG element.
6. The method of claim 1, after said passing the Canvas sequence to a GIF converter to generate a GIF animation, further comprising:
creating a data object link for a Blob object corresponding to the GIF animation;
and assigning the data object link as a preset element in the page.
7. An apparatus for converting SVG animation into GIF, comprising:
the system comprises an acquisition module, a processing module and a display module, wherein the acquisition module is used for acquiring SVG elements with animation effects and interpolation functions corresponding to the SVG elements;
the time point determining module is used for determining the time point of each key frame in the GIF playing process according to the preset playing time;
the evaluation module is used for transmitting the time point as a parameter into the interpolation function for evaluation to obtain SVG elements corresponding to the key frames so as to form an SVG sequence;
the sequence conversion module is used for converting each SVG element in the SVG sequence into a corresponding Canvas element so as to form a Canvas sequence;
and the generation module is used for transmitting the Canvas sequence to the GIF converter to generate the GIF animation.
8. The apparatus of claim 7, wherein the sequence conversion module comprises:
the first conversion unit is used for converting each SVG element in the SVG sequence into a corresponding Image object;
and the second conversion unit is used for converting the Image object into a corresponding Canvas element so as to form a Canvas sequence.
9. An apparatus for converting SVG animation into GIF, the apparatus comprising:
a memory: for storing a computer program;
a processor: steps for implementing a method of converting SVG animation to GIF according to any one of claims 1 to 6 when said computer program is executed.
10. A computer-readable storage medium, characterized in that a computer program is stored thereon, which computer program, when being executed by a processor, carries out the steps of the method of converting SVG animation to GIF according to any one of claims 1 to 6.
CN202111514161.9A 2021-12-13 2021-12-13 Method and related device for converting SVG animation into GIF Active CN113920234B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111514161.9A CN113920234B (en) 2021-12-13 2021-12-13 Method and related device for converting SVG animation into GIF

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111514161.9A CN113920234B (en) 2021-12-13 2021-12-13 Method and related device for converting SVG animation into GIF

Publications (2)

Publication Number Publication Date
CN113920234A true CN113920234A (en) 2022-01-11
CN113920234B CN113920234B (en) 2022-03-25

Family

ID=79248624

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111514161.9A Active CN113920234B (en) 2021-12-13 2021-12-13 Method and related device for converting SVG animation into GIF

Country Status (1)

Country Link
CN (1) CN113920234B (en)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103177419A (en) * 2011-12-23 2013-06-26 上海为舟网络科技有限公司 Caching method for vector diagram converted bitmap and special image processing device
CN103176986A (en) * 2011-12-20 2013-06-26 上海博泰悦臻电子设备制造有限公司 Method for converting flash animation data into hypertext markup language (HTML) 5 data
CN104240245A (en) * 2014-09-10 2014-12-24 中国科学院光电技术研究所 Method for transforming vectorgraph into bitmap and carrying out self-adaption segmentation
CN104268917A (en) * 2014-09-28 2015-01-07 厦门幻世网络科技有限公司 Method and device for converting 3D animation into GIF dynamic graph
CN104933747A (en) * 2015-06-10 2015-09-23 北京奇虎科技有限公司 Method and device for converting vector animation into bitmap animation
CN106920270A (en) * 2015-12-24 2017-07-04 博雅网络游戏开发(深圳)有限公司 Animation processing method and device

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103176986A (en) * 2011-12-20 2013-06-26 上海博泰悦臻电子设备制造有限公司 Method for converting flash animation data into hypertext markup language (HTML) 5 data
CN103177419A (en) * 2011-12-23 2013-06-26 上海为舟网络科技有限公司 Caching method for vector diagram converted bitmap and special image processing device
CN104240245A (en) * 2014-09-10 2014-12-24 中国科学院光电技术研究所 Method for transforming vectorgraph into bitmap and carrying out self-adaption segmentation
CN104268917A (en) * 2014-09-28 2015-01-07 厦门幻世网络科技有限公司 Method and device for converting 3D animation into GIF dynamic graph
CN104933747A (en) * 2015-06-10 2015-09-23 北京奇虎科技有限公司 Method and device for converting vector animation into bitmap animation
CN106920270A (en) * 2015-12-24 2017-07-04 博雅网络游戏开发(深圳)有限公司 Animation processing method and device

Also Published As

Publication number Publication date
CN113920234B (en) 2022-03-25

Similar Documents

Publication Publication Date Title
JP5290487B2 (en) System and method for digital document processing
CN108022212B (en) High-resolution picture generation method, generation device and storage medium
CN107766359B (en) Method and device for converting page content into picture and computing equipment
CN106095437B (en) The implementation method and device of the user interface layout type of RTL from right to left
JP2012022695A (en) Method for digital document processing
US10095670B2 (en) Systems and methods for efficient storage of content and animation
US20070118821A1 (en) Displaying consumer device graphics using scalable vector graphics
CN110533594B (en) Model training method, image reconstruction method, storage medium and related device
CN108959392B (en) Method, device and equipment for displaying rich text on 3D model
CN110968944A (en) Method for displaying and operating CAD drawing at Web front end
CN110675465B (en) Method and apparatus for generating image
CN112256990B (en) Image processing method and device and computer readable storage medium
CN113325979A (en) Video generation method and device, storage medium and electronic equipment
CN109815451B (en) PDF (Portable document Format) generation method, device and equipment
CN113920234B (en) Method and related device for converting SVG animation into GIF
CN111432142B (en) Video synthesis method, device, equipment and storage medium
CN112905944A (en) Page online dynamic generation method and device, electronic equipment and readable storage medium
US20100171750A1 (en) Method and device for generating a complexity vector for at leat one part of an svg scene, and method and testing device for testing a playback suitability of at least part of an svg scene on device
CN107248947A (en) Expression processing method and processing device, computer equipment and storage medium
CN117376660A (en) Subtitle element rendering method, device, equipment, medium and program product
CN110990104B (en) Texture rendering method and device based on Unity3D
CN113157275A (en) Rendering method and device of frame animation, electronic equipment and storage medium
CN107347082A (en) The implementation method and device of video effect
CN112306619A (en) Screenshot method and device
KR101179644B1 (en) 3D Renderer Engine for 2D Mobile Device

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant