CN106709070A - Animation generating method and device, and animation playing method and device - Google Patents
Animation generating method and device, and animation playing method and device Download PDFInfo
- Publication number
- CN106709070A CN106709070A CN201710060615.7A CN201710060615A CN106709070A CN 106709070 A CN106709070 A CN 106709070A CN 201710060615 A CN201710060615 A CN 201710060615A CN 106709070 A CN106709070 A CN 106709070A
- Authority
- CN
- China
- Prior art keywords
- animation
- crucial
- crucial state
- original paper
- data bag
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
Abstract
The invention discloses an animation generating method and device, and an animation playing method and device. Simple animation effects can be achieved by css3. The css3 technique can integrate and transform original elements of the original design pattern by css3 technology to obtain a key state. Image frames can be generated in other modes for animation effects which cannot be achieved by the css3. For example, the image frames are extracted from FLASH animation and then inserted into a key state queue, and the key state queue with the inserted image frames serves as an animation data packet. Since non-FLASH animation is generated by the method, play plug-in installed in a browser is omitted, memory occupation is reduced, and the method solves the problem that the simple css3 cannot achieve complicated animation effects.
Description
Technical field
The application is related to animation process technical field, more specifically to a kind of animation producing method, device and animation
Player method, device.
Background technology
With the raising and the development of mobile terminal of senior browser occupation rate of market, interactive animation turn into one it is important
Product bright spot, can realize publicizing brand, improve the purpose of brand recognition.
Existing animation generally comprises FLASH animations and CSS3 animations.FLASH animations are made up of frame of video.Browser is being broadcast
Need that corresponding player plug-in is installed when putting FLASH animations, it is high so as to cause Installed System Memory to take, influence asking for access speed
Topic.With the popularization of CSS3 technologies, the browser of main flow all supports the broadcasting of CSS3 animations on the market, and it need not additionally be installed
Player plug-in, efficiently solves the problems, such as that FLASH animation EMS memory occupations are high.But, CSS3 animations are merely able to realize simple animation
Effect, cannot realize for some complicated animation effects, and such as LOGO deduces.
Therefore, how providing one kind can either realize Complex Animation effect, and browser memory usage can be reduced again
Animation producing scheme, as those skilled in the art's problem demanding prompt solution.
The content of the invention
In view of this, this application provides a kind of animation producing method, device and animation playing method, device, with drop
In the case of low browser memory usage, the displaying to Complex Animation effect is realized.
To achieve these goals, it is proposed that scheme it is as follows：
A kind of animation producing method, including：
Obtain prototype figure；
Enter row element division, some element original papers after being divided to the prototype figure；
Response user calls treatment of the CSS css3 methods to the element original paper to operate, using the pantogen
Part carries out integration conversion, obtains the crucial state queue of some crucial state compositions；
, to the operation that picture frame is inserted in the crucial state queue, by the picture frame of pre-acquiring, insertion is described for response user
The position that user specifies in crucial state queue, the crucial state queue after being inserted, the crucial state queue composition after the insertion
Animation data bag.
A kind of animation playing method, including：
Animation data bag is obtained, the animation data bag includes the crucial state queue being made up of crucial state and picture frame, its
In, the crucial state is resulting pass after css3 methods carry out integration conversion to the element original paper for constituting prototype figure
Key state；
Sequentially the crucial state and picture frame in the animation data bag are played out.
A kind of animation producing device, including：
Prototype figure acquiring unit, for obtaining prototype figure；
Element division unit, divides, some pantogens after being divided for entering row element to the prototype figure
Part；
Crucial state acquiring unit, treatment of the CSS css3 methods to the element original paper is called for responding user
Operation, integration conversion is carried out using the element original paper, obtains the crucial state queue of some crucial state compositions；
Picture frame inserts unit, for responding user to the operation that picture frame is inserted in the crucial state queue, will obtain in advance
The picture frame for taking, the position that user specifies in the insertion crucial state queue, the crucial state queue after being inserted, the insertion
Crucial state queue composition animation data bag afterwards.
A kind of moving-image playback device, including：
Animation data bag acquiring unit, for obtaining animation data bag, the animation data bag is included by crucial state and figure
As the crucial state queue of frame composition, wherein, the crucial state is the element original paper to composition prototype figure by css3 methods
Carry out resulting crucial state after integration conversion；
Animation broadcast unit, for sequentially being played out to the crucial state and picture frame in the animation data bag.
The animation producing method that the embodiment of the present application is provided, obtains prototype figure；Unit is carried out to the prototype figure
Element is divided, some element original papers after being divided；Response user calls CSS css3 methods to the element original paper
Treatment operation, carry out integration conversion using the element original paper, obtain the crucial state queue of some crucial states compositions；Response is used
, by the picture frame of pre-acquiring, used in the insertion crucial state queue to the operation that picture frame is inserted in the crucial state queue at family
The position that family is specified, the crucial state queue after being inserted, the crucial state queue composition animation data bag after the insertion.Thus
It can be seen that, the application can be carried out whole by css3 technologies for the simple animation effect achieved by css3 to element original paper
Conversion is closed, crucial state is obtained, and for the animation effect that css3 cannot be realized, can otherwise generate picture frame, such as
Extract picture frame etc. from FLASH animations, and then picture frame inserted into crucial state queue, by the crucial state after insertion picture frame
Queue is used as animation data bag.Due to the not FLASH animations of the application generation, therefore broadcasting need not be in a browser installed
Plug-in unit, reduces EMS memory occupation, while solving the problems, such as that simple css3 cannot realize Complex Animation effect.
Brief description of the drawings
In order to illustrate more clearly of the embodiment of the present application or technical scheme of the prior art, below will be to embodiment or existing
The accompanying drawing to be used needed for having technology description is briefly described, it should be apparent that, drawings in the following description are only this
The embodiment of application, for those of ordinary skill in the art, on the premise of not paying creative work, can also basis
The accompanying drawing of offer obtains other accompanying drawings.
Fig. 1 is a kind of Organization Chart of system of animation play disclosed in the embodiment of the present application；
Fig. 2 is a kind of animation producing method flow chart disclosed in the embodiment of the present application；
Fig. 3 is another animation producing method flow chart disclosed in the embodiment of the present application；
Fig. 4 is the edit operation schematic diagram to object element original paper set of the application example；
Fig. 5 is a kind of animation playing method flow chart disclosed in the embodiment of the present application；
Fig. 6 is another animation playing method flow chart disclosed in the embodiment of the present application；
Fig. 7 is a kind of animation producing apparatus structure schematic diagram disclosed in the embodiment of the present application；
Fig. 8 is a kind of moving-image playback device structural representation disclosed in the embodiment of the present application；
A kind of client hardware structural representation that Fig. 9 is provided for the embodiment of the present application.
Specific embodiment
Below in conjunction with the accompanying drawing in the embodiment of the present application, the technical scheme in the embodiment of the present application is carried out clear, complete
Site preparation is described, it is clear that described embodiment is only some embodiments of the present application, rather than whole embodiments.It is based on
Embodiment in the application, it is every other that those of ordinary skill in the art are obtained under the premise of creative work is not made
Embodiment, belongs to the scope of the application protection.
The embodiment of the present application discloses a kind of animation producing and broadcasting scheme.The animation data bag of the generation can be stored
In server, the browser of client when it is determined that needing playing animation, to the server request animation data bag, and then to it
Play out.Shown in Figure 1, its Organization Chart for illustrating the application system of animation play, the system includes：
Client 11 and server 12；
Wherein, client 11 is user side equipment, such as mobile phone, panel computer, PC；
In the embodiment of the present application, client 11 can enter row data communication, client 11 by browser and server
The broadcasting of animation can be carried out by browser.
Server 12 is network side equipment, and be stored with animation data bag, is asked in the animation data for receiving client 11
When, the animation data bag of storage is sent to client 11.Certainly, animation data bag can also be stored and caned in server 12
In the miscellaneous equipment having access to, server 12 accesses storage animation data bag when the animation data for receiving client 11 is asked
Equipment, obtain animation data bag, and then be sent to client 11.Or, server 12 is by the storage of animation data bag
Location feeds back to client 11, and the storage address is accessed by client 11, to obtain animation data bag.
Next, the application is introduced to the generating process of animation, and animation playing process respectively.
First, animation producing process is introduced, referring to Fig. 2, Fig. 2 is a kind of animation producing method disclosed in the embodiment of the present application
Flow chart.As shown in Fig. 2 the method includes：
Step S100, acquisition prototype figure；
Specifically, animator is needed to provide prototype figure, such as one cartoon figure in generation animation process.It is dynamic
Picture is generated based on the prototype figure.
It is understood that according to the difference to be generated animation, prototype figure is likely to difference.
Step S110, the prototype figure is entered row element division, some element original papers after being divided；
Specifically, prototype figure passes through multiple element modules and constitutes, different types of prototype figure its element module
Composition form it is also certain identical.It is that cartoon figure illustrates with prototype figure, then constitutes the element mould of the cartoon figure
Block can include：Head, trunk, four limbs.It is again that automobile is illustrated with prototype figure, then the element module for constituting the automobile can
To include：Car crust, wheel of the bus.
Certainly, the component of prototype figure can be set by animator, general, for prototype figure
In subsequently need to carry out the part of css3 treatment, it is necessary to as an element module.Want making one such as animator to move
Draw effect：Automobile moves forward.Then obviously, should during wheel of the bus need not stall it is dynamic, it is therefore desirable to wheel of the bus is made
It is an element module.
Divided by entering row element to prototype figure, division obtains some element original papers.
Step S120, response user call treatment of the CSS css3 methods to the element original paper to operate, and utilize
The element original paper carries out integration conversion, obtains the crucial state queue of some crucial state compositions；
Wherein, css3 (Cascading Stylesheet, CSS) is a kind of processing method for generating animation, is led to
Crossing the element original paper obtained after being divided to prototype figure carries out integration conversion, can obtain meeting the expected pass of animation person
Key state (key operations state).
Animator it is determined that needing the element original paper integrated, and can be carried according to the need for oneself by css3
The various edit modes for supplying, the element original paper to integrating carries out editing and processing, such as transition processing, deformation process, after treatment
To meeting expected key state.
It should be noted that only carrying out editing and processing to the simple animation effect that css3 can be realized in this step, move
Drawing producer's complicated animation effect to be made cannot be realized by css3 in this step.
Step S130, response user in the crucial state queue insert picture frame operation, by the picture frame of pre-acquiring,
Insert the position that user in the crucial state queue specifies, the crucial state queue after being inserted, the crucial state after the insertion
Queue constitutes animation data bag.
Specifically, by the agency of in previous step, css3 can be only processed simple animation effect, for animation
The complicated animation effect to be realized of producer, figure can be otherwise previously generated in the application by animator
As frame, as extracted two field picture from FLASH animations or the image of the Complex Animation effect to be realized being obtained by other means
Frame.
In this step, response user (animator), will be pre- to the operation that picture frame is inserted in the crucial state queue
The picture frame for first obtaining is inserted at the position that user in the crucial state queue specifies, the crucial state queue after being inserted,
Animation data bag is constituted by the crucial state queue after the insertion.
Wherein, can be one or more to the number of the picture frame inserted in crucial state queue.Each picture frame insert
Entering position can be specified by user, and the insertion position of picture frame is the centre position of adjacent crucial state in crucial state queue.Finally
In crucial state queue after the insertion for obtaining, the playing sequence when clooating sequence of crucial state and picture frame, as animation are played.
The animation producing method that the embodiment of the present application is provided, obtains prototype figure；Unit is carried out to the prototype figure
Element is divided, some element original papers after being divided；Response user calls CSS css3 methods to the element original paper
Treatment operation, carry out integration conversion using the element original paper, obtain the crucial state queue of some crucial states compositions；Response is used
, by the picture frame of pre-acquiring, used in the insertion crucial state queue to the operation that picture frame is inserted in the crucial state queue at family
The position that family is specified, the crucial state queue after being inserted, the crucial state queue composition animation data bag after the insertion.Thus
It can be seen that, the application can be carried out whole by css3 technologies for the simple animation effect achieved by css3 to element original paper
Conversion is closed, crucial state is obtained, and for the animation effect that css3 cannot be realized, can otherwise generate picture frame, such as
Extract picture frame etc. from FLASH animations, and then picture frame inserted into crucial state queue, by the crucial state after insertion picture frame
Queue is used as animation data bag.Due to the not FLASH animations of the application generation, therefore broadcasting need not be in a browser installed
Plug-in unit, reduces EMS memory occupation, while solving the problems, such as that simple css3 cannot realize Complex Animation effect.
In another embodiment of the application, the acquisition process to the key frame inserted in crucial state queue is situated between
Continue.
It is understood that in the animation to be realized of animator, the part of simple animation effect, Ke Yitong
Cross css3 integration conversion and obtain crucial state.For the Complex Animation effect that css3 cannot be realized, can be by being fabricated to picture frame
Mode, be inserted into crucial state queue.
The acquisition modes of the picture frame can include following several situations：
The first,
FLASH animations are made based on the prototype figure.It is multiple needed for being extracted in each key frame of the FLASH animations
The key frame of miscellaneous animation effect.
Further, differentiation treatment is carried out according to the key frame for extracting, obtains transition frames.
It is, of course, also possible to directly in the key frame and transition frames of the FLASH animations, Complex Animation effect needed for extracting
Key frame and transition frames.
Secondth,
Edit operation of the response user to prototype figure, key is obtained after carrying out picture editting to the prototype figure
Frame；And, differentiation treatment is carried out according to the key frame for obtaining and obtains transition frames.
Specifically, when picture editting is carried out to prototype figure, can be entered from image processing softwares such as Photoshop
Row picture editting, the image that editor obtains is used as key frame.The some key frames obtained by editor carry out differentiation treatment, obtain
Transition frames between key frame.
By way of above-described embodiment example, the Complex Animation effect that cannot be realized to css3 can be shown by above-mentioned
The mode of example generates picture frame, and then picture frame is inserted into crucial state queue, constitutes animation data bag.
In another embodiment of the application, another animation producing method is described, as shown in figure 3, the method bag
Include：
Step S200, acquisition prototype figure；
It is understood that according to the difference to be generated animation, prototype figure is likely to difference.
Step S210, the prototype figure is entered row element division, some element original papers after being divided；
Step S220, response user choose operation to object element original paper, and the object element original paper is integrated,
Obtain object element original paper set；
Specifically, user is according to the animation effect of desired making, from each element original paper after the division of prototype figure
Choose partial target element original paper.In this step, the object element original paper that user is chosen is integrated, and obtains object element former
Part set.
Citing is such as：
Prototype figure includes two rabbits and one tree, and the animation effect to be realized of animator is two rabbits
Run forward, tree remains stationary as.When then entering row element division to prototype figure, every rabbit is respectively divided into a pantogen
Part, an element original paper is divided into by tree.In order to realize expected animation effect, user can be by the corresponding element of two kinds of rabbits
Original paper is chosen, and two element original papers are integrated.
The set of object element original paper is used for for carrying out editing and processing in following step.
Step S230, response user call edit operation of the css3 methods to the object element original paper set, according to
The edit mode of family selection carries out editing and processing to object element original paper set, the crucial state after being processed, Duo Geguan
Key state is organized into crucial state queue according to genesis sequence；
Specifically, for the object element original paper set obtained in previous step, user can call css3 methods to it
Carry out edit operation.Css3 provides several edit mode, and user can therefrom select any one or more edit mode
Object element original paper is combined into edlin, to obtain meeting the crucial state of expected design.
Different edit operations are performed by object element original paper, different crucial states, different key states can be obtained
Crucial state queue can be organized into according to animation playing sequence.
Step S240, response user in the crucial state queue insert picture frame operation, by the picture frame of pre-acquiring,
Insert the position that user in the crucial state queue specifies, the crucial state queue after being inserted, the crucial state after the insertion
Queue constitutes animation data bag.
Describe css3 methods in detail compared to above-described embodiment, in the present embodiment carries out integration conversion to element original paper,
The process of crucial state is obtained, the process mainly includes that the object element original paper chosen by user is integrated, and obtains object element
Original paper set, and then call css3 methods to enter edlin to object element original paper set, the crucial state after being edited.
Further, for calling edit operation of the css3 methods to object element original paper set in above-mentioned steps S230,
Its specific implementation process reference picture 4.
As shown in Figure 4：
Css3 methods include to the object element original paper set edit operation to be carried out：Transition transition, change
Shape translate, tri- kinds of dynamic mapping operations of animation animation, and by reducing Clip and split after dynamic mapping
Sprites obtains the crucial state after editing and processing.
Wherein, what transition transition, deformation translate, tri- kinds of dynamic mappings of animation animation were operated is specific
The form of expression can include：
Shake is shaken, blink, spring bounce is flashed, is overturn flip, rotation rotateln, fades in and fade out fadeln/
fadeout。
As can be seen here, the only fairly simple animation effect achieved by css3.
In ensuing embodiment, animation playing process is introduced, referring to Fig. 5, Fig. 5 is a kind of disclosed in the embodiment of the present application
Animation playing method flow chart.As shown in figure 5, the method includes：
Step S300, acquisition animation data bag, the animation data bag include the key being made up of crucial state and picture frame
State queue；
Wherein, the crucial state is after css3 methods carry out integration conversion to the element original paper for constituting prototype figure
Resulting crucial state.Picture frame is the image that the Complex Animation effect that cannot be realized for css3 is generated.
Obtain the process of crucial state for integrating conversion, and picture frame acquisition process, be referred to above-mentioned animation life
Into the introduction of the embodiment of process, here is omitted.
Step S310, sequentially the crucial state and picture frame in the animation data bag played out.
Crucial state and picture frame sequentially sort in animation data bag, and then can sequentially enter according to clooating sequence when playing
Row is played.
The animation playing method that the present embodiment is provided, its animation data bag is made up of crucial state and picture frame, due to animation
Data are made up of the crucial state and picture frame of css editing and processing, therefore browser need not install flash plug-in units and be capable of achieving to move
Draw and play, reduce browser EMS memory occupation.Meanwhile, realized by css3 for simple animation effect in the present embodiment, for
Complex Animation effect solves the problems, such as that css3 cannot realize Complex Animation by picture frame realization.
Further, referring to Fig. 6, Fig. 6 is another animation playing method flow chart disclosed in the embodiment of the present application.Such as Fig. 6
Shown, the method includes：
Step S400, by the way of Asynchronous loading, from server obtain animation data bag, the animation data bag bag
Include the crucial state queue being made up of crucial state and picture frame；
Specifically, the equipment that the application carries out animation broadcasting can be client, and client is it is determined that need playing animation
When, animation data bag can be obtained from server by the way of Asynchronous loading.
By way of using Asynchronous loading, data loading thread and animation are played thread and can be independently executed, and add first
Front portion data in animation data bag are carried, play thread by animation carries out animation broadcasting according to the data for having loaded, without etc.
Treat just to perform animation broadcasting after animation data bag whole loaded, accelerate animation reproduction time, reduce user's wait
Anxiety.
Step S410, control is played out to crucial state and picture frame in the animation data bag by javascript scripts
System.
Specifically, crucial state and image in being realized to animation data bag by the javascript scripts of client
The broadcasting control of frame.
In the present embodiment, animation data bag is obtained from server by way of Asynchronous loading, when accelerating animation broadcasting
Between, also, because the crucial state and picture frame of css3 making support that the broadcasting of javascript scripts is controlled, therefore can lead to
Cross the broadcasting of the perfect control animation of javascript scripts.
Below to the embodiment of the present application provide animation producing device be described, animation producing device described below with
Above-described animation producing method can be mutually to should refer to.
Referring to Fig. 7, Fig. 7 is a kind of animation producing apparatus structure schematic diagram disclosed in the embodiment of the present application, as shown in fig. 7,
The device includes：
Prototype figure acquiring unit 11, for obtaining prototype figure；
Element division unit 12, divides, some elements after being divided for entering row element to the prototype figure
Original paper；
Crucial state acquiring unit 13, CSS css3 methods are called to the place of the element original paper for responding user
Reason operation, integration conversion is carried out using the element original paper, obtains the crucial state queue of some crucial state compositions；
Picture frame inserts unit 14, for responding user to the operation that picture frame is inserted in the crucial state queue, will be pre-
The picture frame of acquisition, the position that user specifies in the insertion crucial state queue, the crucial state queue after being inserted is described to insert
Crucial state queue composition animation data bag after entering.
The application can be carried out by css3 technologies for the simple animation effect achieved by css3 to element original paper
Conversion is integrated, crucial state is obtained, and for the animation effect that css3 cannot be realized, can otherwise generate picture frame,
Extract picture frame such as from FLASH animations, and then picture frame inserted into crucial state queue, by the key after insertion picture frame
State queue is used as animation data bag.Due to the not FLASH animations of the application generation, therefore need not in a browser install and broadcast
Plug-in unit is put, EMS memory occupation is reduced, while solving the problems, such as that simple css3 cannot realize Complex Animation effect.
Optionally, the crucial state acquiring unit can include：
Element original paper integral unit, chooses operation, by the object element for responding user to object element original paper
Original paper is integrated, and obtains object element original paper set；
Element original paper edit cell, response user calls css3 methods to grasp the editor of the object element original paper set
Make, the edit mode selected according to user carries out editing and processing to object element original paper set, the key after being processed
State, multiple key states are organized into crucial state queue according to genesis sequence.
Optionally, the edit mode can include：Transition transition, deformation translate, animation
animation。
Further, the moving-image playback device that the embodiment of the present application is provided is described, animation described below plays dress
Putting can be mutually to should refer to above-described animation playing method.
Referring to Fig. 8, Fig. 8 is a kind of moving-image playback device structural representation disclosed in the embodiment of the present application, as shown in figure 8,
The device includes：
Animation data bag acquiring unit 21, for obtaining animation data bag, the animation data bag include by crucial state and
The crucial state queue of picture frame composition, wherein, the crucial state is the pantogen to composition prototype figure by css3 methods
Part carries out resulting crucial state after integration conversion；
Animation broadcast unit 22, for sequentially being played out to the crucial state and picture frame in the animation data bag.
The moving-image playback device that the present embodiment is provided, its animation data bag played is made up of crucial state and picture frame, by
It is made up of the crucial state and picture frame of css editing and processing in animation data, therefore browser need not install flash plug-in units
Realize that animation is played, reduce browser EMS memory occupation.Meanwhile, for simple animation effect by css3 realities in the present embodiment
It is existing, realized by picture frame for Complex Animation effect, solve the problems, such as that css3 cannot realize Complex Animation.
Optionally, the animation broadcast unit can include：
First animation plays subelement, for by javascript scripts to crucial state and figure in the animation data bag
As frame plays out control.
Optionally, the moving-image playback device can apply to client, and the animation data bag acquiring unit can be wrapped
Include：
Asynchronous loading unit, for by the way of Asynchronous loading, obtaining the animation data bag from server.
The embodiment of the present application further provides a kind of system of animation play, including client and server, wherein：
The server is used for, and stores animation data bag, and the animation data bag includes being made up of crucial state and picture frame
Crucial state queue, wherein, the crucial state be by css3 methods to constitute prototype figure element original paper integrate
Resulting crucial state after conversion；
The client is used for, when it is determined that needing playing animation, using Asynchronous loading mode, to described in server request
Animation data bag, and control is played out to crucial state and picture frame in the animation data bag by javascript scripts.
In ensuing embodiment, the hardware configuration to client is introduced, and referring to Fig. 9, Fig. 9 is the embodiment of the present application
A kind of client hardware structural representation for providing.
As shown in figure 9, client can include：
Processor 1, communication interface 2, memory 3, communication bus 4, and display screen 5；
Wherein processor 1, communication interface 2, memory 3 and display screen 5 complete mutual communication by communication bus 4；
Optionally, communication interface 2 can be the interface of communication module, such as interface of gsm module；
Processor 1, for configuration processor；
Memory 3, for depositing program；
Program can include program code, and described program code includes the operational order of processor.
Processor 1 is probably a central processor CPU, or specific integrated circuit ASIC (Application
Specific Integrated Circuit), or it is arranged to implement one or more integrated electricity of the embodiment of the present application
Road.
Memory 3 may include high-speed RAM memory, it is also possible to also including nonvolatile memory (non-volatile
Memory), for example, at least one magnetic disk storage.
Wherein, program specifically for：
Animation data bag is obtained, the animation data bag includes the crucial state queue being made up of crucial state and picture frame, its
In, the crucial state is resulting pass after css3 methods carry out integration conversion to the element original paper for constituting prototype figure
Key state；
Sequentially the crucial state and picture frame in the animation data bag are played out.
Finally, in addition it is also necessary to explanation, herein, such as first and second or the like relational terms be used merely to by
One entity or operation make a distinction with another entity or operation, and not necessarily require or imply these entities or operation
Between there is any this actual relation or order.And, term " including ", "comprising" or its any other variant meaning
Covering including for nonexcludability, so that process, method, article or equipment including a series of key elements not only include that
A little key elements, but also other key elements including being not expressly set out, or also include for this process, method, article or
The intrinsic key element of equipment.In the absence of more restrictions, the key element limited by sentence "including a ...", does not arrange
Except also there is other identical element in the process including the key element, method, article or equipment.
Each embodiment is described by the way of progressive in this specification, and what each embodiment was stressed is and other
The difference of embodiment, between each embodiment identical similar portion mutually referring to.
The foregoing description of the disclosed embodiments, enables professional and technical personnel in the field to realize or uses the application.
Various modifications to these embodiments will be apparent for those skilled in the art, as defined herein
General Principle can in other embodiments be realized in the case where spirit herein or scope is not departed from.Therefore, the application
The embodiments shown herein is not intended to be limited to, and is to fit to and principles disclosed herein and features of novelty phase one
The scope most wide for causing.
Claims (13)
1. a kind of animation producing method, it is characterised in that including：
Obtain prototype figure；
Enter row element division, some element original papers after being divided to the prototype figure；
Response user calls treatment of the CSS css3 methods to the element original paper to operate, and is entered using the element original paper
Row integrates conversion, obtains the crucial state queue of some crucial state compositions；
Response user, by the picture frame of pre-acquiring, inserts the key to the operation that picture frame is inserted in the crucial state queue
The position that user specifies in state queue, the crucial state queue after being inserted, the crucial state queue composition animation after the insertion
Packet.
2. method according to claim 1, it is characterised in that the picture frame of pre-acquiring includes：
The key frame extracted in each key frame of the FLASH animations generated based on the prototype figure；And, according to extraction
Key frame carry out the differentiation transition frames that obtain for the treatment of；
Or,
The key frame extracted in the key frame and transition frames of the FLASH animations generated based on the prototype figure and transition
Frame.
3. method according to claim 1, it is characterised in that the picture frame of pre-acquiring includes：
Edit operation of the response user to prototype figure, the key for the prototype figure obtained after picture editting
Frame；And,
The transition frames that differentiation treatment is obtained are carried out according to the key frame for obtaining.
4. the method according to claim any one of 1-3, it is characterised in that the response user calls CSS
Treatment of the css3 methods to the element original paper is operated, and integration conversion is carried out using the element original paper, obtains some crucial states
The crucial state queue of composition, including：
Response user chooses operation to object element original paper, and the object element original paper is integrated, and obtains object element
Original paper set；
Response user calls edit operation of the css3 methods to the object element original paper set, according to the editing side that user selects
Formula carries out editing and processing to object element original paper set, the crucial state after being processed, and multiple key states are suitable according to generating
Sequence is organized into crucial state queue.
5. method according to claim 4, it is characterised in that the edit mode includes：Transition transition, deformation
Translate, animation animation.
6. a kind of animation playing method, it is characterised in that including：
Animation data bag is obtained, the animation data bag includes the crucial state queue being made up of crucial state and picture frame, wherein, institute
It is resulting crucial state after css3 methods carry out integration conversion to the element original paper for constituting prototype figure to state crucial state；
Sequentially the crucial state and picture frame in the animation data bag are played out.
7. method according to claim 6, it is characterised in that it is described sequentially to the crucial state in the animation data bag and
Picture frame is played out, including：
Control is played out to crucial state and picture frame in the animation data bag by javascript scripts.
8. the method according to claim 6 or 7, it is characterised in that the animation playing method is applied to client, described
Obtaining animation data bag includes：
By the way of Asynchronous loading, the animation data bag is obtained from server.
9. a kind of animation producing device, it is characterised in that including：
Prototype figure acquiring unit, for obtaining prototype figure；
Element division unit, divides, some element original papers after being divided for entering row element to the prototype figure；
Crucial state acquiring unit, calls treatment of the CSS css3 methods to the element original paper to grasp for responding user
Make, integration conversion is carried out using the element original paper, obtain the crucial state queue of some crucial state compositions；
Picture frame inserts unit, for responding user to the operation that picture frame is inserted in the crucial state queue, by pre-acquiring
Picture frame, the position that user specifies in the insertion crucial state queue, the crucial state queue after being inserted, after the insertion
Crucial state queue constitutes animation data bag.
10. device according to claim 9, it is characterised in that the crucial state acquiring unit includes：
Element original paper integral unit, operation is chosen for responding user to object element original paper, by the object element original paper
Integrated, obtained object element original paper set；
Element original paper edit cell, response user calls edit operation of the css3 methods to the object element original paper set, presses
Edit mode according to user's selection carries out editing and processing to object element original paper set, and the crucial state after being processed is more
Individual crucial state is organized into crucial state queue according to genesis sequence.
A kind of 11. moving-image playback devices, it is characterised in that including：
Animation data bag acquiring unit, for obtaining animation data bag, the animation data bag is included by crucial state and picture frame
The crucial state queue of composition, wherein, the crucial state is that the element original paper for constituting prototype figure is carried out by css3 methods
Integrate crucial state resulting after converting；
Animation broadcast unit, for sequentially being played out to the crucial state and picture frame in the animation data bag.
12. devices according to claim 11, it is characterised in that the animation broadcast unit includes：
First animation plays subelement, for by javascript scripts to crucial state and picture frame in the animation data bag
Play out control.
13. device according to claim 11 or 12, it is characterised in that the moving-image playback device is applied to client,
The animation data bag acquiring unit includes：
Asynchronous loading unit, for by the way of Asynchronous loading, obtaining the animation data bag from server.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710060615.7A CN106709070B (en) | 2017-01-25 | 2017-01-25 | Animation generation method and device and animation playing method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710060615.7A CN106709070B (en) | 2017-01-25 | 2017-01-25 | Animation generation method and device and animation playing method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106709070A true CN106709070A (en) | 2017-05-24 |
| CN106709070B CN106709070B (en) | 2020-06-23 |
Family
ID=58909831
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710060615.7A Active CN106709070B (en) | 2017-01-25 | 2017-01-25 | Animation generation method and device and animation playing method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106709070B (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107403460A (en) * | 2017-07-11 | 2017-11-28 | 北京潘达互娱科技有限公司 | Animation producing method and device |
| CN108022280A (en) * | 2017-12-05 | 2018-05-11 | 大陆汽车车身电子系统（芜湖）有限公司 | Combination instrument cartoon display method and combination instrument animation data processing method |
| CN109064530A (en) * | 2018-08-01 | 2018-12-21 | 吉林盘古网络科技股份有限公司 | Character animation synthetic method, device and terminal |
| CN110750743A (en) * | 2019-09-25 | 2020-02-04 | 腾讯科技（深圳）有限公司 | Animation playing method, device, equipment and storage medium |
| CN112579225A (en) * | 2019-09-30 | 2021-03-30 | 北京国双科技有限公司 | Processing method and device for delayed element display |
| CN112667942A (en) * | 2019-10-16 | 2021-04-16 | 腾讯科技（深圳）有限公司 | Animation generation method, device and medium |
| US11829581B2 (en) | 2018-05-21 | 2023-11-28 | Huawei Technologies Co., Ltd. | Display control method and terminal |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120256928A1 (en) * | 2011-04-07 | 2012-10-11 | Adobe Systems Incorporated | Methods and Systems for Representing Complex Animation Using Scripting Capabilities of Rendering Applications |
| CN103176986A (en) * | 2011-12-20 | 2013-06-26 | 上海博泰悦臻电子设备制造有限公司 | Method for converting flash animation data into hypertext markup language (HTML) 5 data |
| US20140244407A1 (en) * | 2006-07-21 | 2014-08-28 | Say Media, Inc. | Non-expanding interactive advertisement |
| CN104933142A (en) * | 2015-06-18 | 2015-09-23 | 北京奇虎科技有限公司 | Animation display method and device |
| US20150287403A1 (en) * | 2014-04-07 | 2015-10-08 | Neta Holzer Zaslansky | Device, system, and method of automatically generating an animated content-item |
| CN105027110A (en) * | 2013-02-04 | 2015-11-04 | 谷歌公司 | Systems and methods of creating an animated content item |
| CN105139436A (en) * | 2015-09-15 | 2015-12-09 | 北京北纬通信科技股份有限公司 | Novel picture content display method and system |
| CN105556569A (en) * | 2013-06-03 | 2016-05-04 | 微软技术许可有限责任公司 | Animation editing |
| CN105630787A (en) * | 2014-10-28 | 2016-06-01 | 腾讯科技（深圳）有限公司 | Animation implementation method and device based on dynamic portable network graphics |
-
2017
- 2017-01-25 CN CN201710060615.7A patent/CN106709070B/en active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140244407A1 (en) * | 2006-07-21 | 2014-08-28 | Say Media, Inc. | Non-expanding interactive advertisement |
| US20120256928A1 (en) * | 2011-04-07 | 2012-10-11 | Adobe Systems Incorporated | Methods and Systems for Representing Complex Animation Using Scripting Capabilities of Rendering Applications |
| CN103176986A (en) * | 2011-12-20 | 2013-06-26 | 上海博泰悦臻电子设备制造有限公司 | Method for converting flash animation data into hypertext markup language (HTML) 5 data |
| CN105027110A (en) * | 2013-02-04 | 2015-11-04 | 谷歌公司 | Systems and methods of creating an animated content item |
| CN105556569A (en) * | 2013-06-03 | 2016-05-04 | 微软技术许可有限责任公司 | Animation editing |
| US20150287403A1 (en) * | 2014-04-07 | 2015-10-08 | Neta Holzer Zaslansky | Device, system, and method of automatically generating an animated content-item |
| CN105630787A (en) * | 2014-10-28 | 2016-06-01 | 腾讯科技（深圳）有限公司 | Animation implementation method and device based on dynamic portable network graphics |
| CN104933142A (en) * | 2015-06-18 | 2015-09-23 | 北京奇虎科技有限公司 | Animation display method and device |
| CN105139436A (en) * | 2015-09-15 | 2015-12-09 | 北京北纬通信科技股份有限公司 | Novel picture content display method and system |
Non-Patent Citations (3)
| Title |
|---|
| 李天盟，等: "TML局部动画与CSS3动画转换研究", 《软件导刊》 * |
| 王冲: "《现代信息检索技术基本原理教程》", 30 November 2013 * |
| 莫治雄，等: "《闪客家园——Flash5网上动画制作指南》", 31 January 2002 * |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107403460A (en) * | 2017-07-11 | 2017-11-28 | 北京潘达互娱科技有限公司 | Animation producing method and device |
| CN108022280A (en) * | 2017-12-05 | 2018-05-11 | 大陆汽车车身电子系统（芜湖）有限公司 | Combination instrument cartoon display method and combination instrument animation data processing method |
| US11829581B2 (en) | 2018-05-21 | 2023-11-28 | Huawei Technologies Co., Ltd. | Display control method and terminal |
| CN109064530A (en) * | 2018-08-01 | 2018-12-21 | 吉林盘古网络科技股份有限公司 | Character animation synthetic method, device and terminal |
| CN110750743A (en) * | 2019-09-25 | 2020-02-04 | 腾讯科技（深圳）有限公司 | Animation playing method, device, equipment and storage medium |
| CN112579225A (en) * | 2019-09-30 | 2021-03-30 | 北京国双科技有限公司 | Processing method and device for delayed element display |
| CN112667942A (en) * | 2019-10-16 | 2021-04-16 | 腾讯科技（深圳）有限公司 | Animation generation method, device and medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106709070B (en) | 2020-06-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106709070A (en) | Animation generating method and device, and animation playing method and device | |
| US11257523B2 (en) | Video production method, computer device, and storage medium | |
| CN112184856B (en) | Multimedia processing device supporting multi-layer special effect and animation mixing | |
| DE602005003149T2 (en) | User interface for previewing digital content on mobile devices | |
| CN108647313A (en) | A kind of real-time method and system for generating performance video | |
| CN112073649A (en) | Multimedia data processing method, multimedia data generating method and related equipment | |
| CN112291484A (en) | Video synthesis method and device, electronic equipment and storage medium | |
| CN106339226A (en) | Webpage page display method and page display plug-in | |
| CN113613066B (en) | Rendering method, system and device for real-time video special effect and storage medium | |
| CN104978413B (en) | GIS line numbers are according in browser end visible apparatus and method | |
| CN104504447A (en) | Method and device for distributing virtual seat images | |
| CN105205844A (en) | Manufacturing method and apparatus of interactive electronic animation book, and mobile terminal | |
| CN102193806A (en) | Method and device for updating animation | |
| CN101313363A (en) | Method and apparatus for video playing | |
| CN108268499A (en) | A kind of Webpage display process and device | |
| CN114466232A (en) | Video processing method, video processing device, electronic equipment and medium | |
| CN113630557A (en) | Image processing method, apparatus, device, storage medium, and computer program product | |
| CN109660852A (en) | Video previewing method, storage medium, equipment and system before recorded video publication | |
| US20110239147A1 (en) | Digital apparatus and method for providing a user interface to produce contents | |
| CN107230244A (en) | The generation method and rendering system of a kind of animation file | |
| CN108416830B (en) | Animation display control method, device, equipment and storage medium | |
| CN110366026A (en) | The virtual auditorium of 3D goes out field method, system and storage medium | |
| CN107040826A (en) | Video loading method and device, computer installation and computer-readable recording medium | |
| CN115243107B (en) | Method, device, system, electronic equipment and medium for playing short video | |
| KR100795358B1 (en) | Music video service method and system and terminal |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |