CN106709070B

Movatterモバイル変換

Info

Publication number: CN106709070B
Application number: CN201710060615.7A
Authority: CN
Inventors: 梁宇轩
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2017-01-25
Filing date: 2017-01-25
Publication date: 2020-06-23
Anticipated expiration: 2037-01-25
Also published as: CN106709070A

Abstract

The application discloses an animation generating method and device and an animation playing method and device, for simple animation effects which can be achieved by cs 3, element original documents obtained by dividing a design prototype diagram can be integrated and transformed through a cs 3 technology to obtain key states, for animation effects which cannot be achieved by cs 3, image frames can be generated through other modes, for example, the image frames are extracted from FLASH animation, and then the image frames are inserted into a key state queue, and the key state queue after the image frames are inserted is used as an animation data packet. Because the generated FLASH animation is not FLASH animation, a playing plug-in is not required to be installed in a browser, the memory occupation is reduced, and the problem that the complex animation effect cannot be realized by a simple cs 3 is solved.

Description

Animation generation method and device and animation playing method and device

Technical Field

The present application relates to the field of animation processing technologies, and in particular, to an animation generation method and apparatus, and an animation playing method and apparatus.

Background

With the improvement of the market share of the high-level browser and the development of the mobile terminal, the interactive animation becomes an important product highlight, and the purposes of brand propaganda and brand awareness improvement can be achieved.

Existing animations typically include FLASH animations and CSS3 animations. FLASH animations are composed of video frames. When playing FLASH animation, the browser needs to install a corresponding playing plug-in, thereby causing the problems of high system memory occupation and influence on access speed. With the popularization of the CSS3 technology, the mainstream browsers in the market support the playing of CSS3 animation, and a playing plug-in is not required to be additionally installed, so that the problem of high memory occupation of the FLASH animation is effectively solved. However, CSS3 animation can only achieve simple animation effects, and cannot achieve some complex animation effects, such as LOGO deductions.

Therefore, how to provide an animation generation scheme capable of achieving a complex animation effect and reducing the memory occupancy rate of a browser becomes a problem to be solved urgently by those skilled in the art.

Disclosure of Invention

In view of this, the present application provides an animation generating method and apparatus, and an animation playing method and apparatus, so as to achieve the display of a complex animation effect under the condition of reducing the memory occupancy rate of a browser.

In order to achieve the above object, the following solutions are proposed:

an animation generation method, comprising:

obtaining a design prototype diagram;

element division is carried out on the design prototype drawing to obtain a plurality of divided element originals;

responding to the processing operation of calling a cascading style sheet css3 method by a user on the element original, and performing integration transformation by using the element original to obtain a key state queue consisting of a plurality of key states;

responding to the operation of inserting image frames into the key state queue by a user, inserting the pre-acquired image frames into the position appointed by the user in the key state queue to obtain an inserted key state queue, and forming an animation data packet by the inserted key state queue.

An animation playing method, comprising:

acquiring an animation data packet, wherein the animation data packet comprises a key state queue consisting of key states and image frames, and the key states are obtained by performing integration transformation on element originals forming a design prototype diagram by a css3 method;

and playing the key states and the image frames in the animation data packet in sequence.

An animation generation apparatus comprising:

a design prototype diagram acquisition unit for acquiring a design prototype diagram;

the element dividing unit is used for carrying out element division on the design prototype drawing to obtain a plurality of divided element originals;

the key state acquisition unit is used for responding to the processing operation of calling a cascading style sheet css3 method by a user on the element original, and performing integration transformation by using the element original to obtain a key state queue consisting of a plurality of key states;

and the image frame inserting unit is used for responding the operation of inserting the image frames into the key state queue by the user, inserting the pre-acquired image frames into the position appointed by the user in the key state queue to obtain an inserted key state queue, and the inserted key state queue forms an animation data packet.

An animation playback apparatus comprising:

the animation data packet acquisition unit is used for acquiring an animation data packet, wherein the animation data packet comprises a key state queue consisting of key states and image frames, and the key states are obtained by performing integration transformation on element original files forming a design prototype diagram by a css3 method;

and the animation playing unit is used for playing the key states and the image frames in the animation data packet in sequence.

According to the animation generation method provided by the embodiment of the application, a design prototype diagram is obtained; element division is carried out on the design prototype drawing to obtain a plurality of divided element originals; responding to the processing operation of calling a cascading style sheet css3 method by a user on the element original, and performing integration transformation by using the element original to obtain a key state queue consisting of a plurality of key states; responding to the operation of inserting image frames into the key state queue by a user, inserting the pre-acquired image frames into the position appointed by the user in the key state queue to obtain an inserted key state queue, and forming an animation data packet by the inserted key state queue. Therefore, for the simple animation effect which can be realized by the cs 3, the element original can be integrated and transformed through the cs 3 technology to obtain the key state, and for the animation effect which cannot be realized by the cs 3, the image frame can be generated in other ways, such as extracting the image frame from the FLASH animation, and then inserting the image frame into the key state queue, wherein the key state queue after the image frame is inserted is used as the animation data packet. Because the generated FLASH animation is not FLASH animation, a playing plug-in is not required to be installed in a browser, the memory occupation is reduced, and the problem that the complex animation effect cannot be realized by a simple cs 3 is solved.

Drawings

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, it is obvious that the drawings in the following description are only embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to the provided drawings without creative efforts.

Fig. 1 is an architecture diagram of an animation playback system disclosed in an embodiment of the present application;

FIG. 2 is a flowchart of an animation generation method disclosed in an embodiment of the present application;

FIG. 3 is a flow chart of another animation generation method disclosed in the embodiments of the present application;

FIG. 4 is a diagram illustrating an editing operation on a target element original set according to an example of the present application;

FIG. 5 is a flowchart of an animation playing method disclosed in the embodiments of the present application;

FIG. 6 is a flowchart of another animation playing method disclosed in the embodiments of the present application;

FIG. 7 is a schematic structural diagram of an animation generation apparatus according to an embodiment of the present disclosure;

fig. 8 is a schematic structural diagram of an animation playback device disclosed in an embodiment of the present application;

fig. 9 is a schematic diagram of a client hardware structure according to an embodiment of the present application.

Detailed Description

The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

The embodiment of the application discloses an animation generation and playing scheme. The generated animation data packet can be stored in the server, and when the browser of the client determines that the animation needs to be played, the browser requests the server for the animation data packet and then plays the animation data packet. Referring to fig. 1, there is shown an architecture diagram illustrating an animation playback system according to the present application, the system comprising:

aclient 11 and aserver 12;

theclient 11 is a user-side device, such as a mobile phone, a tablet computer, a PC, and the like;

in the embodiment of the present application, theclient 11 may perform data communication with the server through a browser, and theclient 11 may perform playing of animation through the browser.

Next, the present application separately introduces the animation generation process and the animation playback process.

First, an animation generation process is introduced, referring to fig. 2, and fig. 2 is a flowchart of an animation generation method disclosed in an embodiment of the present application. As shown in fig. 2, the method includes:

s100, obtaining a design prototype drawing;

in particular, the creation of animation requires the animator to provide a prototype of the design, such as a cartoon character or the like. An animation is generated based on the design prototype.

It will be appreciated that the design prototypes may differ depending on the animation to be generated.

Step S110, element division is carried out on the design prototype drawing to obtain a plurality of element originals after division;

specifically, the design prototype diagram is composed of a plurality of element modules, and the component forms of the element modules of different types of design prototype diagrams are also necessarily the same. Explaining the cartoon character by the design prototype diagram, the element modules forming the cartoon character can comprise: head, trunk, limbs. And then, explaining the design prototype diagram as an automobile, the element modules forming the automobile may include: automobile shell, automobile wheel.

Of course, the constituent elements of the design prototype may be set by the animator, and generally, the elements are required to be an element module for the subsequent part of the design prototype required to be processed by the css 3. If the animator wants to produce an animation effect: the vehicle is driven forward. It is clear that the vehicle wheel needs to be turned continuously in the process, and therefore needs to be used as an element module.

The design prototype graph is subjected to element division to obtain a plurality of element originals.

Step S120, responding to the processing operation of calling a cascading style sheet css3 method by a user on the element original, and performing integration transformation by using the element original to obtain a key state queue consisting of a plurality of key states;

the css3(Cascading style sheet) is a processing method for generating animation, and a key state (key action state) meeting the expectation of an animation designer can be obtained by performing integration transformation on element originals obtained by dividing a design prototype diagram.

The animator can determine the element originals to be integrated according to the needs of the animator, and edit the integrated element originals in various editing modes provided by the css3, such as transition processing and deformation processing, so as to obtain key states meeting expectations after processing.

In this step, only simple animation effects that can be achieved by css3 are edited, and complicated animation effects that animators want to create cannot be achieved by css 3.

Step S130, responding to the operation of inserting image frames into the key state queue by a user, inserting the pre-acquired image frames into the position appointed by the user in the key state queue to obtain an inserted key state queue, and forming an animation data packet by the inserted key state queue.

Specifically, as already described in the previous step, the css3 can only process simple animation effects, and for complex animation effects to be achieved by an animator, in the present application, image frames may be generated in advance by the animator through other means, such as extracting frame images from FLASH animation or obtaining image frames of complex animation effects to be achieved through other means.

In this step, in response to an operation of inserting an image frame into the key state queue by a user (animator), inserting the image frame acquired in advance into a position specified by the user in the key state queue to obtain an inserted key state queue, and forming an animation data packet by the inserted key state queue.

The number of the image frames inserted into the key state queue may be one or more. The insertion position of each image frame may be specified by a user, the insertion position of an image frame being the middle position of an adjacent keyframe in the keyframe queue. And finally, in the inserted key state queue, the sequencing sequence of the key states and the image frames is the playing sequence of the animation playing.

In another embodiment of the present application, a description is given of the acquisition process of key frames inserted into a key state queue.

It will be appreciated that for the part of the animation that the animator wants to achieve, which is a simple animation effect, the key states can be derived from the css3 integral transformations. For complex animation effects which cannot be realized by the css3, the complex animation effects can be inserted into the key state queue in a mode of making image frames.

The image frame acquisition mode may include the following cases:

a first kind,

And manufacturing FLASH animation based on the design prototype diagram. And extracting key frames with required complex animation effects from the key frames of the FLASH animation.

And further, performing differentiation processing according to the extracted key frames to obtain transition frames.

Of course, the key frames and transition frames of the required complex animation effect can be directly extracted from the key frames and transition frames of the FLASH animation.

A second kind,

Responding to the editing operation of a user on a design prototype drawing, and performing image editing on the design prototype drawing to obtain a key frame; and carrying out differentiation processing according to the obtained key frame to obtain a transition frame.

Specifically, when the design prototype diagram is subjected to image editing, image processing software such as Photoshop and the like can be selected for the image editing, and an image obtained by editing is used as a key frame. And carrying out differentiation processing on a plurality of key frames obtained by editing to obtain transition frames among the key frames.

By the way of the example of the embodiment, for a complex animation effect which cannot be achieved by the css3, the image frames can be generated by the way of the example, and then the image frames are inserted into the key state queue to form an animation data packet.

In yet another embodiment of the present application, another animation generation method is presented, as shown in FIG. 3, the method comprising:

s200, obtaining a design prototype drawing;

Step S210, element division is carried out on the design prototype drawing to obtain a plurality of element originals after division;

step S220, responding to the selection operation of a user on the target element original, and integrating the target element original to obtain a target element original set;

specifically, the user selects a part of the target element originals from the element originals divided from the design prototype drawing according to the animation effect intended to be produced. In this step, target element originals selected by the user are integrated to obtain a target element original set.

For example:

the design prototype includes two rabbits and a tree, and the animator wants to achieve the animation effect that the two rabbits run forward and the tree remains motionless. When the element division is performed on the design prototype drawing, each rabbit is divided into an element original, and the tree is divided into an element original. In order to realize the expected animation effect, the user can select the element originals corresponding to the two rabbits and integrate the two element originals.

The target element original set is used for editing processing in the following steps.

Step S230, responding to the editing operation of the user calling the css3 method on the target element original set, editing the target element original set according to the editing mode selected by the user to obtain processed key states, and organizing a plurality of key states into a key state queue according to the generation sequence;

specifically, for the original set of target elements obtained in the previous step, the user may call the css3 method to perform an editing operation on the original set of target elements. css3 provides several editing modes from which a user can select any one or more editing modes to edit the original combination of target elements to obtain the key state that meets the design expectations.

Different key states can be obtained by executing different editing operations on the original of the target element, and the different key states can be organized into a key state queue according to the animation playing sequence.

Step S240, responding to an operation of inserting an image frame into the key state queue by a user, inserting a pre-acquired image frame into a position specified by the user in the key state queue to obtain an inserted key state queue, where the inserted key state queue forms an animation data packet.

Compared with the above embodiment, the process of performing integration transformation on the element originals by the cs 3 method to obtain the key state is described in detail in this embodiment, and the process mainly includes integrating the target element originals selected by the user to obtain a target element original set, and then calling the cs 3 method to edit the target element original set to obtain the edited key state.

Further, with respect to the editing operation of calling the css3 method to the target element original set in step S230, a specific implementation process thereof refers to fig. 4.

As shown in fig. 4:

the editing operations that the css3 method can perform on the target element original set include: three dynamic transformation operations of transition, transformation and animation, and obtaining a key state after editing processing by cutting Clip and splicing Sprites after dynamic transformation.

The concrete expression forms of the three dynamic transformation operations of transition, deformation and animation may include:

shake, blink, bounce, flip, rotate rotaln, fade/fade.

It can be seen that the only animation effect that css3 can achieve is a relatively simple animation effect.

In the following embodiments, an animation playing process is introduced, referring to fig. 5, and fig. 5 is a flowchart of an animation playing method disclosed in the embodiments of the present application. As shown in fig. 5, the method includes:

step S300, obtaining an animation data packet, wherein the animation data packet comprises a key state queue consisting of key states and image frames;

the key state is obtained by performing integration transformation on element originals forming the design prototype diagram by a cs 3 method. The image frames are images generated for complex animation effects that cannot be achieved by css 3.

For the process of obtaining the key state by the integration transformation and the process of obtaining the image frame, reference may be made to the description of the embodiment of the animation generation process, and details are not described here.

And S310, playing the key states and the image frames in the animation data packet in sequence.

The key states and the image frames in the animation data packet are sequentially sequenced, and then the animation data packet can be played sequentially according to the sequencing sequence during playing.

According to the animation playing method provided by the embodiment, the animation data packet is composed of the key state and the image frame, and the animation data is composed of the key state and the image frame edited and processed by the css, so that animation playing can be realized without installing a flash plug-in the browser, and the memory occupation of the browser is reduced. Meanwhile, in the embodiment, the simple animation effect is realized by the css3, and the complex animation effect is realized by the image frame, so that the problem that the css3 cannot realize the complex animation is solved.

Further, referring to fig. 6, fig. 6 is a flowchart of another animation playing method disclosed in the embodiment of the present application. As shown in fig. 6, the method includes:

s400, acquiring an animation data packet from a server in an asynchronous loading mode, wherein the animation data packet comprises a key state queue consisting of key states and image frames;

specifically, the device for playing the animation can be a client, and the client can acquire the animation data packet from the server in an asynchronous loading mode when determining that the animation needs to be played.

By adopting the asynchronous loading mode, the data loading thread and the animation playing thread can be independently executed, the previous part of data in the animation data packet is loaded at first, the animation playing thread plays the animation according to the loaded data, the animation playing is executed without waiting for the animation data packet to be completely loaded, the animation playing time is shortened, and the anxiety feeling of waiting for a user is reduced.

And S410, playing and controlling the key state and the image frame in the animation data packet through a javascript script.

Specifically, the playing control of the key state and the image frame in the animation data packet can be realized through the javascript script of the client.

In the embodiment, the animation data packet is obtained from the server in an asynchronous loading mode, the animation playing time is shortened, and the key state and the image frame manufactured by the css3 support playing control of the javascript script, so that the animation playing can be perfectly controlled through the javascript script.

The following describes an animation generation device provided in an embodiment of the present application, and the animation generation device described below and the animation generation method described above may be referred to in correspondence with each other.

Referring to fig. 7, fig. 7 is a schematic structural diagram of an animation generating apparatus disclosed in an embodiment of the present application, and as shown in fig. 7, the apparatus includes:

a design prototypediagram acquisition unit 11 for acquiring a design prototype diagram;

anelement dividing unit 12, configured to perform element division on the design prototype drawing to obtain a plurality of divided element originals;

the keystate obtaining unit 13 is configured to respond to a processing operation of a user calling a cascading style sheet css3 method on the element original, and perform integration transformation by using the element original to obtain a key state queue composed of a plurality of key states;

and the imageframe inserting unit 14 is used for responding to the operation of inserting the image frames into the key state queue by the user, inserting the pre-acquired image frames into the position appointed by the user in the key state queue to obtain an inserted key state queue, and the inserted key state queue forms an animation data packet.

For simple animation effects which can be realized by cs 3, element original documents can be integrated and transformed through the cs 3 technology to obtain key states, and for animation effects which cannot be realized by cs 3, image frames can be generated through other modes, such as extracting the image frames from FLASH animation, and the like, and then the image frames are inserted into a key state queue, and the key state queue after the image frames are inserted is used as an animation data packet. Because the generated FLASH animation is not FLASH animation, a playing plug-in is not required to be installed in a browser, the memory occupation is reduced, and the problem that the complex animation effect cannot be realized by a simple cs 3 is solved.

Optionally, the key state obtaining unit may include:

the element original integration unit is used for responding to the selection operation of a user on the target element original, and integrating the target element original to obtain a target element original set;

and the element original edition unit responds to the edition operation of the user calling the css3 method on the target element original set, edits the target element original set according to the edition mode selected by the user to obtain processed key states, and a plurality of key states are organized into a key state queue according to the generation sequence.

Optionally, the editing manner may include: transition, deformation transition, animation.

Further, the animation playback device provided in the embodiment of the present application is described, and the animation playback device described below and the animation playback method described above may be referred to in a corresponding manner.

Referring to fig. 8, fig. 8 is a schematic structural diagram of an animation playback device disclosed in an embodiment of the present application, and as shown in fig. 8, the device includes:

an animation datapacket obtaining unit 21, configured to obtain an animation data packet, where the animation data packet includes a key state queue composed of key states and image frames, where the key states are key states obtained by performing integration transformation on element originals constituting a design prototype diagram by a css3 method;

and theanimation playing unit 22 is used for playing the key states and the image frames in the animation data packet in sequence.

According to the animation playing device provided by the embodiment, the played animation data packet is composed of the key state and the image frame, and the animation data is composed of the key state and the image frame edited and processed by the css, so that animation playing can be realized without installing a flash plug-in the browser, and the memory occupation of the browser is reduced. Meanwhile, in the embodiment, the simple animation effect is realized by the css3, and the complex animation effect is realized by the image frame, so that the problem that the css3 cannot realize the complex animation is solved.

Optionally, the animation playing unit may include:

and the first animation playing subunit is used for controlling the playing of the key state and the image frame in the animation data packet through the javascript script.

Optionally, the animation playing apparatus may be applied to a client, and the animation packet obtaining unit may include:

and the asynchronous loading unit is used for acquiring the animation data packet from the server in an asynchronous loading mode.

The embodiment of the present application further provides an animation playing system, including a client and a server, wherein:

the server is used for storing an animation data packet, wherein the animation data packet comprises a key state queue consisting of key states and image frames, and the key states are obtained by performing integration transformation on element original files forming the design prototype diagram by a css3 method;

and the client is used for requesting the animation data packet to a server in an asynchronous loading mode when the animation needs to be played, and playing and controlling the key state and the image frame in the animation data packet through the javascript.

In the following embodiments, a hardware structure of the client is introduced, referring to fig. 9, and fig. 9 is a schematic diagram of a hardware structure of the client according to an embodiment of the present disclosure.

As shown in fig. 9, the client may include:

a processor 1, acommunication interface 2, a memory 3, a communication bus 4, and a display screen 5;

the processor 1, thecommunication interface 2, the memory 3 and the display screen 5 are communicated with each other through a communication bus 4;

optionally, thecommunication interface 2 may be an interface of a communication module, such as an interface of a GSM module;

a processor 1 for executing a program;

a memory 3 for storing a program;

the program may include program code including operating instructions of the processor.

The processor 1 may be a central processing unit CPU or an application specific Integrated circuit asic or one or more Integrated circuits configured to implement embodiments of the present application.

The memory 3 may comprise a high-speed RAM memory, and may further comprise a non-volatile memory (non-volatile memory), such as at least one disk memory.

Wherein the program is specifically for:

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 embodiments in the present description are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same and similar parts among the embodiments are referred to each other.

The previous description of the disclosed embodiments is provided to enable any person skilled in the art to make or use the present application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the application. Thus, the present application is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. An animation generation method, comprising:

obtaining a design prototype diagram;

responding to the processing operation of a user calling a cascading style sheet cs 3 method on the element original, and performing integration transformation on the element original to obtain a key state queue consisting of a plurality of key states, wherein the key states are key action states obtained after the element original forming a design prototype diagram is subjected to integration transformation through a cs 3 method;

responding to the operation of inserting image frames into the key state queue by a user, inserting the image frames which are pre-acquired from the FLASH animation and are related to the animation effect which cannot be realized by the css3 into the middle position of the adjacent key state specified by the user in the key state queue to obtain the inserted key state queue, and forming an animation data packet by the inserted key state queue.

2. The method of claim 1, wherein pre-acquiring image frames comprises:

key frames extracted from all key frames of the FLASH animation generated based on the design prototype diagram; and performing differentiation processing according to the extracted key frames to obtain transition frames;

or,

and key frames and transition frames extracted from the key frames and the transition frames of the FLASH animation generated based on the design prototype diagram.

3. The method of claim 1, wherein pre-acquiring image frames comprises:

responding to the editing operation of a user on a design prototype drawing, and editing the design prototype drawing to obtain a key frame; and the number of the first and second groups,

and performing differentiation processing according to the obtained key frame to obtain a transition frame.

4. The method according to any one of claims 1 to 3, wherein the processing operation of the element original by using the cascading style sheet css3 method invoked by the response user to perform the integration transformation on the element original to obtain a key state queue composed of a plurality of key states includes:

responding to the selection operation of a user on the target element original, and integrating the target element original to obtain a target element original set;

and responding to the editing operation of the user calling the css3 method on the target element original set, editing the target element original set according to the editing mode selected by the user to obtain processed key states, and organizing the key states into a key state queue according to the generation sequence.

5. The method of claim 4, wherein the editing mode comprises: transition, deformation transition, animation.

6. An animation playing method, comprising:

acquiring an animation data packet, wherein the animation data packet comprises a key state queue consisting of key states and image frames, the key states are key states obtained by performing integration transformation on element originals forming a design prototype diagram by a cs 3 method, the key states are key action states obtained by performing integration transformation on the element originals forming the design prototype diagram by a cs 3 method, the image frames are image frames which are pre-acquired from FLASH animation and are related to animation effects which cannot be realized by cs 3, and the image frames are inserted into the middle positions of adjacent key states designated by a user in the key state queue;

7. The method of claim 6, wherein the playing key states and image frames in the animation data packet in sequence comprises:

and playing and controlling the key state and the image frame in the animation data packet through a javascript script.

8. The method according to claim 6 or 7, wherein the animation playing method is applied to a client, and the obtaining of the animation data packet comprises:

and acquiring the animation data packet from the server in an asynchronous loading mode.

9. An animation generation device, comprising:

the key state acquisition unit is used for responding to the processing operation of a user calling a cascading style sheet cs 3 method on the element original, performing integration transformation on the element original to obtain a key state queue consisting of a plurality of key states, wherein the key states are key action states obtained after the element original forming a design prototype diagram is subjected to integration transformation through a cs 3 method;

and the image frame inserting unit is used for responding the operation of inserting the image frames into the key state queue by a user, inserting the image frames which are pre-acquired from the FLASH animation and are related to the animation effect which cannot be realized by the css3 into the middle position of the adjacent key state specified by the user in the key state queue to obtain the inserted key state queue, and the inserted key state queue forms an animation data packet.

10. The apparatus of claim 9, wherein the key state obtaining unit comprises:

11. An animation playback apparatus, comprising:

the system comprises an animation data packet acquisition unit, a key state queue and a data packet processing unit, wherein the animation data packet comprises a key state queue consisting of key states and image frames, the key states are key states obtained after element originals forming a design prototype diagram are integrated and transformed by a cs 3 method, the key states are key action states obtained after element originals forming the design prototype diagram are integrated and transformed by a cs 3 method, the image frames are image frames which are pre-acquired from FLASH animation and are related to animation effects which cannot be realized by cs 3, and the image frames are inserted into the middle positions of adjacent key states designated by a user in the key state queue;

12. The apparatus of claim 11, wherein the animation playback unit comprises:

13. The apparatus according to claim 11 or 12, wherein the animation playback apparatus is applied to a client, and the animation packet obtaining unit includes:

14. A computer-readable storage medium having stored thereon computer-executable instructions which, when loaded and executed by a processor, implement the animation generation method as claimed in any one of claims 1 to 5, and/or the animation playback method as claimed in any one of claims 6 to 8.

15. A computer device, comprising:

a processor and a memory;

the processor is used for calling and executing the program stored in the memory;

the memory is configured to store the program, the program at least to: implementing the animation generation method of any of claims 1 to 5 above, and/or the animation playback method of any of claims 6 to 8.