CN1858728A - Method for inserting SVG cartoon data in SVG - Google Patents
Method for inserting SVG cartoon data in SVG Download PDFInfo
- Publication number
- CN1858728A CN1858728A CN 200610033862 CN200610033862A CN1858728A CN 1858728 A CN1858728 A CN 1858728A CN 200610033862 CN200610033862 CN 200610033862 CN 200610033862 A CN200610033862 A CN 200610033862A CN 1858728 A CN1858728 A CN 1858728A
- Authority
- CN
- China
- Prior art keywords
- animation
- svg
- dom
- function
- data
- 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
Links
Images
Landscapes
- Processing Or Creating Images (AREA)
Abstract
This invention relates to a method for adding SVG animation data in SVG including: a, carrying out logic process to logic animation data by a logic process part to pick up animation information from the data, B, matching corresponding DOM animation functions in a DOM function database based on its kind to send the information processed in step a to the DOM animation function to form SVG animation data, c, the DOM animaion function feeds back an animation object to the SVG file.
Description
Technical field
The present invention relates to computer application field, relate in particular to a kind of method that in SVG, adds the SVG animation data.
Background technology
Along with SVG (Scalable Vector Graphics saleable vector graphics) standard in the use in figure field more and more widely, favored by people as the expression aspect of the animation effect of its important component part.The several different methods that provides SVG realizes various complicated animations, the attribute animation of SVG self definition is the basis, the DOM that SVG supports is means, adds the script dynamic operation, and so no matter how gorgeous animation effect can add script by the basic attribute animation of SVG and finish.Animation is generally realized by change object properties value.The definition standard of SVG animated element has been released in SYMM (Synchronized MultiMediaWorkingGroup, the synchronized multimedia working group) cooperation of SVG working group and W3C tissue.The unit that is used to define animation among the SVG have 5＜animate 〉,＜set 〉,＜animate-Motion〉and,＜animateColor 〉,＜animateTransform 〉.Wherein＜and animate〉element permission quantitative attribute or pattern parameter time to time change,＜set〉element can set non-quantitative attribute or pattern parameter time to time change,＜animate-Motion〉element can be along the path movement element of appointment to produce animation effect;＜animateColor〉element is used for setting some attribute relevant with color or the pattern parameter time to time change of element;＜animateTransform〉animation effect when element can be controlled visualized elements carried out coordinate transform.Therefore the SVG document can be visited each element by script according to the DOM interface, can dynamically change the various attributes of SVG element, comprises animation attributes, thereby can realize relying on animation attributes merely and the more complicated animation that can't finish.The SVG document is also supported a large amount of alternative events of DOM normalized definition, as onmouseover, onclick etc., and can be assigned to any one SVG element, thereby realizes finishing the interactive animation of SVG to self or to the control of other object, image.
Summary of the invention
The present invention has overcome deficiency of the prior art, and a kind of convenient method that adds the SVG animation data in SVG is provided.
In order to solve the problems of the technologies described above, be achieved through the following technical solutions: a kind of method that in SVG, adds the SVG animation data, it is characterized in that, the main process of this method is: a. partly carries out logical process, the animation information in the extraction logic animation data with the logic animation data through logical process; B. mate DOM animation function corresponding in the DOM animation function storehouse according to animation types, give the DOM animation function, form the SVG animation data animation information described in the process a that handled; The c.DOM animation function is returned animate object and is given the SVG document.In the above-mentioned SVG demonstration projection method, described data object storage unit is deposited the Slide object set of having play in proper order according to the projection of Slide in the custom show tabulation in the SVG presentation file; Described broadcast object-storage unit is used to store the array of the projection page data object set that original Slide set of data objects or projection page data preparation module generate.
The invention has the beneficial effects as follows: the method that adds the SVG animation data among the SVG of the present invention mainly is that to adopt DOM animation library technology to come the conversion logic animation data be the SVG animation data, wherein the logic animation data can adopt make the user more intuitively method required animation is described, make to give SVG element interpolation animation convenient.Because all animations are all described the data division of animation attributes at this, therefore the element animation in the whole SVG document is safeguarded and become convenient, only need to safeguard a tables of data (DOM animation function storehouse), and do not need to utilize five kinds of basic animated elements that SVG provides to the element that needs animation, go to write an animation by hand, the animation that this craft is write is inconvenient to reuse.DOM animation function of the present invention storehouse has extremely strong extendability, can add required animation effect at any time, makes that like this animation effect is more rich and varied.
Description of drawings
Fig. 1 concerns synoptic diagram between the related each several part in the method for the invention;
Fig. 2 is a logic animation data flow diagram in the method for the invention;
Fig. 3 is the synoptic diagram that a kind of XML of use in the method for the invention expresses the logic animation data;
Fig. 4 is the animation data agreement graph of a relation in the method for the invention;
Fig. 5 is the partial parameters table of the DOM animation function in the method for the invention;
Fig. 6 is a kind of allocation plan figure in the method for the invention.
Embodiment
A kind of method that in SVG, adds the SVG animation data, the main process of this method is:
A. the logic animation data is partly carried out logical process, the animation information in the extraction logic animation data through logical process; B. mate DOM animation function corresponding in the DOM animation function storehouse according to animation types, give the DOM animation function, form the SVG animation data and write the dom tree of SVG document in internal memory animation information described in the process a that handled; The c.DOM animation function is returned animate object and is given the SVG document.
This method core is that to adopt DOM animation library technology to come the conversion logic animation data be the SVG animation data.The animation effect that defines is packaged into a corresponding DOM animation function, the animation effect that the DOM animation function realizes comprises initiatively draws and the blanking animation, initiatively draw the only process performance of responsible animation effect, the blanking animation be responsible for the animation carrier when animation begins or finish whether as seen.These functions are formed the set of a function, this set just is called DOM function animation library, is DOM animation library technology of the present invention by this technology that all the DOM animation function in this DOM function animation library is adopted unified Naming conventions and unified method of calling.By adopting this DOM animation library technology to make, realized the expansion with animation types of reusing of SVG animation data to greatest extent to SVG element interpolation animation becomes very simple.
It is that the method for SVG animation data comprises logical process part and DOM animation function storehouse that employing of the present invention DOM animation library technology is come the conversion logic animation data.The logic animation data is deposited the attribute information about required animation, the logical process part is translated the logic animation data, and the DOM animation function of the type in the corresponding DOM animation function storehouse is so that the DOM animation function dynamically adds the SVG animation data of required animation effect for the animation carrier.
The logic animation data, this part can also can be independent of the SVG document and exist outward in SVG document inside, and its effect is the animation information that the storage user provides.This animation information is in order to satisfy the desired animation effect of user, the description of necessity of customer-furnished relevant animation attributes, such as, animation types, animation carrier, animated, animation direction, animation speed, multiplicity, dependence object, trigger condition, time delay, or the like.Wherein animation types refers to the form of expression of animation, as window shutter, box-like, fly into etc.; The animation carrier refers to the carrier that this animation adheres to, as one section text, and one or set of diagrams shape etc.; Animated refers to the expression-form of this animation, as enters, emphasizes, withdraws from, path etc.; The animation direction refers to the different direction that the type according to different animations has, and level is arranged with vertical as the direction of window shutter animation, and box-like animation inwardly has and be outside etc.; Animation speed refers to the time that animation is continued from start to end; Multiplicity refers to the animation number of times that this process repeated from start to end; Rely on the beginning condition that object refers to animation, as relying on time conditions, the official hour division relies on certain animation and begins or finish, and relies on certain figure or literal and is clicked etc.; Refer to time delay relying under the situation of objects trigger, the required delay triggered time, triggered in 2 seconds after beginning as certain animation, these 2 seconds is exactly a time delay.
The logical process part, this part is finished by the SVG script, can be used as an independent script file for the SVG document reference, its effect is the instruction that receives the SVG document, remove to read the logic animation data of appointment each attribute about animation, the animation information that the processing logic animation data returns, mate DOM animation function corresponding in the DOM animation function storehouse according to animation types, give the DOM animation function with the animation information of handling, wait for the animation value that the DOM animation function is returned then, so that this rreturn value is returned to the SVG document reference.
DOM animation function storehouse part, this part is a core of the present invention, it is a DOM function animation library that predefine is good, calls for the animation designator for each animation provides one " DOM animation function ".This class function utilizes the DOM interface dynamically to increase animated element for appointed object, realizes various animation effects.Such as ksvg addAnimateFly is exactly to realize flying into, to fly out the function of effect.As long as providing of this class function is provided, constantly the extended function animation library then can satisfy the constantly demand of expansion of animation.Because DOM animation function storehouse provides a series of DOM animation function that can realize specific animation effect, the animation information that it can partly provide according to logical process, realize adding the logic animation data that can satisfy required animation effect, and this animation is returned to the logical process part to the animation carrier.
The DOM animation function is according to the animation types difference, other element of five kinds of basic animated elements that utilize that SVG provides and SVG, and as clipPath, the combination in any of mask etc. is carried out dynamic creation, to realize required animation effect.Call the dom tree that this function just can join required animation SVG document correspondence in internal memory at this animation carrier place dynamically, so that play.One type of corresponding DOM animation function of animation, the concrete form of animation can be according to different parameter decisions, such as entering, emphasize or withdraw from according to whether as seen being divided into, each animation is also having different patterns with a kind of state, such as, fly into animation be divided into from the bottom again, from the left side, from the right side, from the top, from lower left quarter, from right lower quadrant, from upper left quarter with from eight kinds of upper right quarters; Box-like animation inwardly is divided into again and outside two kinds.The triggering mode of animation comprises that independence relies on two kinds with having, and relies on to comprise certain animation of dependence or certain object again, and the trigger condition that relies on animation is divided into beginning again, finishes or clicks, and can also add time delay after trigger condition.Each DOM animation function can be created the element that is used to define animation among the SVG by the DOM function dynamically according to the parameter that provides, and then the node of dynamic creation is joined in the dom tree that the SVG document shines upon in internal memory, and the control that this animation begins is returned.The control that animation begins is meant by this control can trigger animation.
In projection process mutual,, only adopt the whether visible demand of animation carrier of initiatively drawing in the time of to satisfy animation repeat playing and animation rollback because the demand and the SVG animated element of projector itself come with some shortcomings." animation blanking " of the present invention by having adopted method, realized a ring important in the projection process, when repeat playing and animation rollback, as seen whether the animation carrier determine automatically, the DOM animation function create initiatively draw in, created an animation that allows the automatic blanking of element simultaneously according to the attribute of initiatively drawing.As, one flies into animation, and original state should be sightless, and it then is visible flying into that animation finishes; And the animation that flies out, original state should be visible, it then is sightless that the animation that flies out finishes.Initiatively draw the only process of responsible animation effect, and about the animation carrier the initial of animation or when finishing whether as seen, then finish automatically by the blanking animation, this blanking animation is encapsulated in the DOM animation function, is unknowable for the user.
Below in conjunction with accompanying drawing the inventive method is elaborated:
As shown in Figure 1, involved in the present invention have logic animation data, logical process, DOM animation function storehouse and four parts of SVG dom tree.The logic animation data, this part can also can be independent of the SVG document and exist outward in SVG document inside, and its effect is the animation information that the storage user provides, this animation information is in order to satisfy the desired animation effect of user, and the description of necessity of customer-furnished relevant animation attributes.This part data can store classifiedly according to user's needs, such as, when making lantern slide, the animation of each page can be classified by page or leaf, be convenient to batch processing like this, more convenient operation.The logical process part, this part is finished by the SVG script, can be used as an independent script file for the SVG document reference, also can write the Script section of SVG document, its effect is to carry out data read and data are handled accordingly, and this part mainly plays whole dispatch control effect.DOM animation function storehouse part, this part provides a series of DOM animation function that can realize specific animation effect, and its effect is the final SVG animation data that can show that generates.In the practical operation of SVG document as long as the animation carrier element title of specified data block title or required animation can reading by logical process part completion logic animation data, return the data of relevant animation to translator unit by the logic animation data then, translator unit is through handling, give DOM animation function corresponding in the DOM animation function storehouse data message after handling, by the DOM animation function logic animation data of required animation effect is write the dom tree of SVG document in internal memory dynamically, the DOM animation function returns to the logical process part with this animation again, partly return to the SVG document by logical process, so that obtain the control of this animation.
As shown in Figure 2, the clearer data stream of having described in the example enforcement of the present invention.Send an information of adding animation by the user, remove to read the interrelated logic animation data according to the information that the user gives from the logic animation data, giving the processing logic animation data with the logic animation data of reading then handles, this processing is converted to the data that the DOM animation function can be used with the logic animation data, give then and write the logic animation data and finish dealing with and write work, write the logic animation data handle receive data after, according to the corresponding DOM animation function of the coupling of the animation types in the data, finish the work of writing by the DOM animation function, and the control of returning this animation gives the user, and whether the user just can control this animation and began this moment.
As shown in Figure 3, example of the present invention a kind of method of expressing the logic animation data with XML in implementing is described.How to express the method for logic animation data and do not limit, as long as data can be employed program and read, this enforcement example adopts the XML language to express the logic animation data.Article one, animation information generally comprises, animation types, animation carrier, animated, animation direction, animation speed, multiplicity, dependence object, trigger condition, time delay, or the like.Information how much depend on the needed degree of user, a simple animation effect only needs several required attributes just can express.Example of the present invention adopts a self-defined element ani to express an animation information, this element can have a series of attributes such as type attribute representation animation types, objectId attribute representation animation carrier, style attribute representation animated, from attribute representation animation direction, dur attribute representation animation speed, repeat attribute representation multiplicity, depend attribute representation and rely on object, condition attribute representation trigger condition, delay attribute representation time delay, can also expand as required.
As shown in Figure 4, example of the present invention logic animation data agreement relation table in implementing is described.The logic animation data must be able to partly be discerned by logical process, therefore, the title of logic animation data all properties and span must be followed the rule of appointing in advance and organize, as figure, the type attribute can be arranged animation types other Property Names and spans such as Fly, Jalousie, Fade, Box, and the meaning of these signs must be that user and logical process part can both be discerned.Each function parameters in the corresponding DOM animation function, specifically as shown in Figure 5.
As shown in Figure 6, example of the present invention a kind of allocation plan in implementing is described.During implementing, this example utilize the javascript script to realize, the user introduces the translate.js file of completion logic processing capacity respectively and finishes DOM animation function library file animatefunctions.js file at the SVG document, the logic animation data can independently become an XML file, also it can be embedded in the SVG document, this example adopts the latter.In the script of SVG document, just can required animation control be returned like this by calling a method that loads the function of animation, very easy to use.
Above step is the unrestricted technical scheme of the present invention in order to explanation only.Any modification or partial replacement that does not break away from spirit and scope of the invention all should be encompassed in the middle of the claim scope of the present invention.
Claims (7)
1, a kind of method that in SVG, adds the SVG animation data, it is characterized in that the main process of this method is: a. partly carries out logical process, the animation information in the extraction logic animation data with the logic animation data through logical process; B. mate DOM animation function corresponding in the DOM animation function storehouse according to animation types, give the DOM animation function, form the SVG animation data and write the dom tree of SVG document in internal memory animation information described in the process a that handled; The c.DOM animation function is returned animate object and is given the SVG document.
2, the method for making SVG animation data according to claim 1 is characterized in that described logic animation data can also can be independent of the SVG document and exist in SVG document inside outward, and it can store the animation information that the user provides.
3, the method for making SVG animation data according to claim 1, it is characterized in that, described logical process partly is the SVG script file, it can be used as an independent script file for the SVG document reference, receive the instruction of SVG document, read in the above-mentioned logic animation data of appointment each attribute about animation.
4, the method for making SVG animation data according to claim 1 is characterized in that described DOM animation function storehouse comprises a series of DOM animation function that can realize specific animation effect.
5, the method for making according to claim 4 SVG animation data is characterized in that, described DOM animation function is according to the animation types difference, utilizes other element of basic animated element that SVG provides and SVG, carries out dynamic creation, forms the SVG animation data.
6, the method for making SVG animation data according to claim 4 is characterized in that described DOM animation function adopts unified Naming conventions and unified method of calling.
7, the method for making SVG animation data according to claim 1, it is characterized in that, the detailed process of described process c is that the DOM animation function returns to the logical process part with this animate object, partly return to the SVG document by logical process again, so that make the user obtain the control of this animation.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CNB200610033862XA CN100422985C (en) | 2006-02-23 | 2006-02-23 | Method for inserting SVG cartoon data in SVG |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CNB200610033862XA CN100422985C (en) | 2006-02-23 | 2006-02-23 | Method for inserting SVG cartoon data in SVG |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN1858728A true CN1858728A (en) | 2006-11-08 |
| CN100422985C CN100422985C (en) | 2008-10-01 |
Family
ID=37297637
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CNB200610033862XA Active CN100422985C (en) | 2006-02-23 | 2006-02-23 | Method for inserting SVG cartoon data in SVG |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN100422985C (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102289834A (en) * | 2011-08-30 | 2011-12-21 | 北京瑞信在线系统技术有限公司 | Micro-animation editer and edition method thereof |
| CN102340698A (en) * | 2011-10-12 | 2012-02-01 | 福建新大陆通信科技股份有限公司 | Scalable vector graphics (SVG)-based set-top box interface representation method |
| CN107180443A (en) * | 2017-04-28 | 2017-09-19 | 深圳市前海手绘科技文化有限公司 | A kind of Freehandhand-drawing animation producing method and its device |
| CN108734755A (en) * | 2018-05-23 | 2018-11-02 | 北京五八信息技术有限公司 | Update method, apparatus, storage medium and the computer equipment of animation rendering effect |
| CN111310085A (en) * | 2020-01-20 | 2020-06-19 | 深圳点猫科技有限公司 | Method and device for inserting DOM element into SVG building block working area |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1256070A2 (en) * | 2000-02-04 | 2002-11-13 | America Online, Inc. | System and process for delivering and rendering scalable web pages |
| US6901585B2 (en) * | 2001-04-12 | 2005-05-31 | International Business Machines Corporation | Active ALT tag in HTML documents to increase the accessibility to users with visual, audio impairment |
| CN1445691A (en) * | 2003-04-29 | 2003-10-01 | 吴晶 | Method for drawing on or sending to bulletins containing graphics bulletin boards |
-
2006
- 2006-02-23 CN CNB200610033862XA patent/CN100422985C/en active Active
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102289834A (en) * | 2011-08-30 | 2011-12-21 | 北京瑞信在线系统技术有限公司 | Micro-animation editer and edition method thereof |
| CN102340698A (en) * | 2011-10-12 | 2012-02-01 | 福建新大陆通信科技股份有限公司 | Scalable vector graphics (SVG)-based set-top box interface representation method |
| CN102340698B (en) * | 2011-10-12 | 2013-12-11 | 福建新大陆通信科技股份有限公司 | Scalable vector graphics (SVG)-based set-top box interface representation method |
| CN107180443A (en) * | 2017-04-28 | 2017-09-19 | 深圳市前海手绘科技文化有限公司 | A kind of Freehandhand-drawing animation producing method and its device |
| CN108734755A (en) * | 2018-05-23 | 2018-11-02 | 北京五八信息技术有限公司 | Update method, apparatus, storage medium and the computer equipment of animation rendering effect |
| CN111310085A (en) * | 2020-01-20 | 2020-06-19 | 深圳点猫科技有限公司 | Method and device for inserting DOM element into SVG building block working area |
| CN111310085B (en) * | 2020-01-20 | 2023-01-10 | 深圳点猫科技有限公司 | Method and device for inserting DOM element into SVG building block working area |
Also Published As
| Publication number | Publication date |
|---|---|
| CN100422985C (en) | 2008-10-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| KR101143095B1 (en) | Coordinating animations and media in computer display output | |
| RU2420806C2 (en) | Smooth transitions between animations | |
| EP0826173B1 (en) | Hierarchical encapsulation of instantiated objects | |
| CN103197929B (en) | A kind of graphic programming system and method for children-oriented | |
| US7173623B2 (en) | System supporting animation of graphical display elements through animation object instances | |
| CN104835187A (en) | Animation editor and editing method thereof | |
| CN102289834B (en) | Micro-animation editer and edition method thereof | |
| CN105302578A (en) | Comprehensive portal management system of dragging type layout configuration | |
| IL155881A (en) | Markup language and object model for vector graphics | |
| CN100422985C (en) | Method for inserting SVG cartoon data in SVG | |
| WO2022183519A1 (en) | Three-dimensional graphics image player capable of real-time interaction | |
| CN101650959B (en) | Layering framework for multimedia synchronous broadcast and control relationship | |
| Dessart et al. | Animated transitions between user interface views | |
| CN202736109U (en) | High-concurrency enterprise concentrated application system | |
| Dörner et al. | Building 3D applications with 3D components and 3D frameworks | |
| CN110992452A (en) | Skill trisection method human body dynamic structure drawing system software | |
| Grahn | The media9 Package, v1. 25 | |
| CN113687815B (en) | Method and device for processing dynamic effects of multiple components in container, electronic equipment and storage medium | |
| Shroff et al. | Instant multi-tier web applications without tears | |
| Cai et al. | Design and implementation of OGRE-based game scene editor software | |
| Kvesić et al. | Using SCT Generator and Unity in Automatic Generation of 3D Scenes and Applications | |
| US20050151744A1 (en) | Method and apparatus for automated authoring and hyperlinking of VRML documents | |
| CN116796101A (en) | Method, equipment and storage medium for constructing digital management platform | |
| CN115690270A (en) | Dynamic editing animation production method based on unity | |
| CN112241261A (en) | Method for dynamically adding content to popup window based on template engine rendering |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant | ||
| C56 | Change in the name or address of the patentee | ||
| CP01 | Change in the name or title of a patent holder |
Address after: Jinshan computer Building No. 8 Jingshan Hill Road, Lane 519015 Zhuhai Jida Lianshan Guangdong city of Zhuhai Province Patentee after: Zhuhai Kingsoft Software Co., Ltd. Address before: Jinshan computer Building No. 8 Jingshan Hill Road, Lane 519015 Zhuhai Jida Lianshan Guangdong city of Zhuhai Province Patentee before: Zhuhai Jinshan Software Co., Ltd. |
|
| C41 | Transfer of patent application or patent right or utility model | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20151221 Address after: Kingsoft No. 33 building, 100085 Beijing city Haidian District Xiaoying Road Patentee after: Beijing Kingsoft WPS Office Co., Ltd. Patentee after: GUANGZHOU JINSHAN JINSHAN MOBILE TECHNOLOGY CO., LTD. Address before: Jinshan computer Building No. 8 Jingshan Hill Road, Lane 519015 Zhuhai Jida Lianshan Guangdong city of Zhuhai Province Patentee before: Zhuhai Kingsoft Software Co., Ltd. |
|
| C56 | Change in the name or address of the patentee | ||
| CP01 | Change in the name or title of a patent holder |
Address after: Kingsoft No. 33 building, 100085 Beijing city Haidian District Xiaoying Road Patentee after: Beijing Kingsoft office software Limited by Share Ltd Patentee after: GUANGZHOU JINSHAN JINSHAN MOBILE TECHNOLOGY CO., LTD. Address before: Kingsoft No. 33 building, 100085 Beijing city Haidian District Xiaoying Road Patentee before: Beijing Kingsoft WPS Office Co., Ltd. Patentee before: GUANGZHOU JINSHAN JINSHAN MOBILE TECHNOLOGY CO., LTD. |