CN112667942B - Animation generation method, device and medium - Google Patents
Animation generation method, device and medium Download PDFInfo
- Publication number
- CN112667942B CN112667942B CN201910983051.3A CN201910983051A CN112667942B CN 112667942 B CN112667942 B CN 112667942B CN 201910983051 A CN201910983051 A CN 201910983051A CN 112667942 B CN112667942 B CN 112667942B
- Authority
- CN
- China
- Prior art keywords
- animation
- edited
- clip
- target
- event
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 60
- 239000012634 fragment Substances 0.000 claims abstract description 42
- 230000002452 interceptive effect Effects 0.000 claims description 41
- 230000004044 response Effects 0.000 claims description 31
- 238000005316 response function Methods 0.000 claims description 15
- 230000003993 interaction Effects 0.000 claims description 11
- 238000012545 processing Methods 0.000 description 10
- 238000011161 development Methods 0.000 description 8
- 230000008569 process Effects 0.000 description 8
- 230000003068 static effect Effects 0.000 description 8
- 230000000694 effects Effects 0.000 description 7
- 238000010586 diagram Methods 0.000 description 5
- 230000006870 function Effects 0.000 description 5
- 230000004048 modification Effects 0.000 description 5
- 238000012986 modification Methods 0.000 description 5
- 230000005540 biological transmission Effects 0.000 description 4
- 230000008859 change Effects 0.000 description 4
- 238000004891 communication Methods 0.000 description 4
- 238000006073 displacement reaction Methods 0.000 description 4
- 230000001960 triggered effect Effects 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000007704 transition Effects 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 239000003086 colorant Substances 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000009191 jumping Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 230000006978 adaptation Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000001934 delay Effects 0.000 description 1
- 238000007667 floating Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 239000000047 product Substances 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 239000013589 supplement Substances 0.000 description 1
Landscapes
- Processing Or Creating Images (AREA)
Abstract
The invention discloses an animation generation method, an animation generation device and a medium. The method comprises the steps of responding to animation editing instructions, obtaining at least two animation fragments to be edited, wherein each animation fragment to be edited comprises at least one page element, configuring at least one style attribute group for the page element corresponding to each animation fragment to be edited by means of a cascading style sheet, creating a corresponding playing time shaft for each animation fragment to be edited by means of the cascading style sheet, wherein the playing time shaft is used for describing playing time attributes of the page elements corresponding to different style attribute groups in the animation fragments to be edited, obtaining target animation fragments according to the playing time shaft of each animation fragment to be edited, the page element corresponding to each animation fragment to be edited and the style attribute group corresponding to the animation fragment to be edited, setting corresponding playing time sequence identifiers for each target animation fragment by means of the cascading style sheet, and generating target animation according to the playing time sequence identifiers of each target animation fragment and each target animation fragment.
Description
Technical Field
The present invention relates to the field of internet communications technologies, and in particular, to an animation generating method, device, and medium.
Background
With the development of internet communication technology, dynamic expression forms such as animation are presented besides static expression forms such as text, and the user experience of acquiring related content can be greatly improved when the dynamic expression forms are presented in the page.
In the prior art, animation is often packaged into js functions (event response functions; js: javaScript, an transliterated script language), and the animation is displayed by frequently acquiring and changing patterns of related elements inside the functions and manually setting time delays of the functions. For example, the left shift of element a is increased by 1px (pixel, a unit of relative length) every 16ms (milliseconds), moving from 100px (corresponding position) to 200px (corresponding position). The efficiency of animation development by using js function is low, and corresponding reference is needed when the style of the element is modified. Accordingly, there is a need to provide more efficient development schemes for animations.
Disclosure of Invention
In order to solve the problems of low development efficiency and the like when the prior art is applied to developing the animation, the invention provides an animation generation method, an animation generation device and a medium:
in one aspect, the present invention provides an animation generation method, the method comprising:
Responding to an animation editing instruction, and acquiring at least two animation fragments to be edited, wherein a page element set of each animation fragment to be edited comprises at least one page element;
respectively configuring at least one style attribute group for the page element corresponding to each animation fragment to be edited by using a cascading style sheet, wherein each style attribute group comprises at least one style attribute value;
creating a corresponding playing time shaft for each animation segment to be edited by using the cascading style sheet, wherein the playing time shaft is used for describing the playing time attribute of each page element corresponding to different style attribute groups in the animation segment to be edited;
Obtaining a target animation fragment according to the playing time axis of each animation fragment to be edited, the page element set of each animation fragment to be edited and the style attribute group corresponding to each page element in the corresponding page element set;
Setting a corresponding playing time sequence identifier for each target animation segment by using the cascading style sheet;
And generating a target animation according to each target animation segment and the playing time sequence identification of each target animation segment.
Another aspect provides an animation generation apparatus, the apparatus comprising:
The animation segment to be edited obtaining module is used for responding to animation editing instructions to obtain at least two animation segments to be edited, and a page element set of each animation segment to be edited comprises at least one page element;
The page element configuration module is used for configuring at least one style attribute group for the page element corresponding to each animation fragment to be edited by using a cascading style sheet, wherein each style attribute group comprises at least one style attribute value;
The play time shaft creation module is used for creating a corresponding play time shaft for each animation segment to be edited by utilizing the cascading style sheet, and the play time shaft is used for describing play time attributes of the page elements corresponding to different style attribute groups in the animation segment to be edited;
The target animation segment generation module is used for obtaining target animation segments according to the playing time axis of each animation segment to be edited, the page element set of each animation segment to be edited and the style attribute set corresponding to each page element in the corresponding page element set;
A play time sequence identifier setting module, configured to set a corresponding play time sequence identifier for each target animation segment by using the cascading style sheet;
And the target animation generation module is used for generating target animation according to each target animation segment and the playing time sequence identification of each target animation segment.
In another aspect, an electronic device is provided that includes a processor and a memory having at least one instruction, at least one program, a set of codes, or a set of instructions stored therein, the at least one instruction, the at least one program, the set of codes, or the set of instructions being loaded and executed by the processor to implement an animation generation method as described above.
Another aspect provides a computer readable storage medium having stored therein at least one instruction, at least one program, code set, or instruction set loaded and executed by a processor to implement an animation generation method as described above.
The animation generation method, the animation generation device and the animation generation medium provided by the invention have the following technical effects:
In the animation generation process, style attributes of page elements in animation fragments to be edited and playing time of page elements in the fragments are set by using a cascading style sheet to obtain target animation fragments, and corresponding playing time sequence identifiers are set for each target animation fragment by using the cascading style sheet to obtain target animation. And utilizing the cascading style sheets to carry out animation development, and processing the style attribute of the page element and the time lines inside and outside the animation fragments by the cascading style sheets, so that the development efficiency can be improved. When adjustment based on the display effect is required, the modification efficiency and the modification accuracy are also high.
Drawings
In order to more clearly illustrate the embodiments of the invention or the technical solutions and advantages of the prior art, the following description will briefly explain the drawings used in the embodiments or the description of the prior art, and it is obvious that the drawings in the following description are only some embodiments of the invention, and other drawings can be obtained according to the drawings without inventive effort for a person skilled in the art.
FIG. 1 is a schematic diagram of an application environment provided by an embodiment of the present invention;
FIG. 2 is a flow chart of an animation generation method according to an embodiment of the present invention;
FIG. 3 is a schematic flow chart of setting at least one style attribute group for the page element corresponding to each animation segment to be edited by using a cascading style sheet according to an embodiment of the present invention;
FIG. 4 is a schematic flow chart of setting at least one style attribute group for the page element corresponding to each animation segment to be edited by using a cascading style sheet according to an embodiment of the present invention;
FIG. 5 is a schematic flow chart after setting at least one style attribute group for the page element corresponding to each animation segment to be edited by using a cascading style sheet according to an embodiment of the present invention;
FIG. 6 is a schematic flow chart of creating a corresponding playing time axis for each animation segment to be edited using the cascading style sheet according to an embodiment of the present invention;
FIG. 7 is a flowchart of an animation generation method according to an embodiment of the present invention;
FIG. 8 is a block diagram showing the constitution of an animation generating apparatus according to an embodiment of the present invention;
fig. 9 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
It is noted that the terms "comprises" and "comprising," and any variations thereof, in the description and claims of the present invention and in the foregoing figures, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or server comprising a list of steps or elements is not necessarily limited to those steps or elements expressly listed or inherent to such process, method, article, or apparatus.
Referring to fig. 1, fig. 1 is a schematic diagram of an application environment provided by an embodiment of the present invention, as shown in fig. 1, in the application environment, an animation in a page is obtained based on rendering corresponding data, so that a user can obtain relevant content through a dynamic representation form of the animation, the user can obtain relevant content more intuitively, and the user experience of obtaining relevant content is better. It should be noted that fig. 1 is only an example.
In the embodiment of the invention, a user can acquire the display content carried in the target page in the form of animation through a display terminal, wherein the display terminal comprises, but is not limited to, a mobile intelligent telephone, a tablet electronic device, a portable computer (such as a notebook computer and the like), a Personal Digital Assistant (PDA), a desktop computer and an intelligent wearable device.
Specifically, the display terminal may run an application client, and the target page may be a page opened based on an internal link (a page link provided by a background server of the application program, where a page resource corresponding to the internal link is provided by the background server), or may be a page opened based on an external link (a page link provided by a third party server interfacing with the application program, where a page resource corresponding to the external link is provided by the third party server). Applications include, but are not limited to, social applications (e.g., weChat applications), entertainment-enabled applications (e.g., video applications, audio applications, gaming applications, and reading software), and service-enabled applications (e.g., map navigation applications, group purchase applications). The display content of the target page is not limited.
In the following, a specific embodiment of an animation generation method according to the present invention is described, and fig. 2 is a schematic flow chart of an animation generation method according to an embodiment of the present invention, and the present specification provides the steps of the method according to the embodiment or the flowchart, but may include more or less steps based on conventional or non-inventive labor. The order of steps recited in the embodiments is merely one way of performing the order of steps and does not represent a unique order of execution. When implemented in a real system or server product, the methods illustrated in the embodiments or figures may be performed sequentially or in parallel (e.g., in a parallel processor or multithreaded environment). As shown in fig. 2, the method may include:
S201, responding to an animation editing instruction, and acquiring at least two animation fragments to be edited, wherein a page element set of each animation fragment to be edited comprises at least one page element;
In the embodiment of the invention, the animation to be generated can be composed of at least two animation segments, a certain play sequence is arranged between the animation segments, each animation segment can correspond to at least one frame of picture, and each frame of picture can be presented based on at least one corresponding page element.
Accordingly, at least two animation clips to be edited, which may be currently created, or may be created previously (such as in the case of adjusting the display effect of the generated animation), are obtained in response to the animation editing instruction. The page element set of each animation segment to be edited comprises at least one page element. For example, when an animation segment to be edited can correspond to multiple frames of pictures, each frame of picture can be displayed based on a corresponding plurality of page elements, then the page element set of the animation segment to be edited includes page elements for all frame pictures to be displayed. The page elements may include text boxes, drop-down boxes, floating windows, buttons, images, videos, and the like.
In a specific embodiment, after the obtaining at least two animation segments to be edited, the method further includes:
and determining a time sequence identifier to be played corresponding to each animation fragment to be edited. The time sequence to be played identifies the play position in the expected play sequence used to characterize the animation segment to be edited.
S202, configuring at least one style attribute group for the page element corresponding to each animation fragment to be edited by using a cascading style sheet, wherein each style attribute group comprises at least one style attribute value;
In an embodiment of the present invention, a cascading style sheet (CSS, cascading Style Sheets,) is a computer language used to represent file styles such as HTML (an application of standard universal markup language) or XML (a subset of standard universal markup language), which is a language that controls the style of a web page element style. The CSS can accurately control the typesetting of element positions in the webpage at a pixel level, supports almost all font size styles, and has the capability of editing webpage objects and model styles. The static appearance attributes of the page elements, such as positioning, fonts, word sizes, frames, colors, background colors, spacing, margin and the like, can be controlled by using the cascading style sheet, and the dynamic effect of the page elements can be realized by using the cascading style sheet through setting key frames, transition modes and the like.
The animation segment to be edited may correspond to a plurality of frames of pictures, each frame of picture may be displayed based on a corresponding plurality of page elements, and the plurality of page elements corresponding to each frame of picture may be referred to as a page element group. The union of the multiple page element groups corresponding to the same animation segment to be edited constitutes the page element set of the animation segment to be edited.
Style is the appearance of a page element. The page elements (or display objects constructed from at least one page element) may correspond to static styles or may correspond to animated styles. The animation style actually corresponds to the transition from one static style to another. The static style may be set by style attribute values of the page elements (which may correspond to the static appearance attributes described previously). The animation style may include a fade of transparency, a fade of displacement, a fade of zoom, a fade of rotation, etc. The successful configuration of the animation style requires not only the configuration of the static style but also the linking and adaptation between the static styles. And respectively configuring at least one style attribute group for the page element corresponding to each animation fragment to be edited by using a cascading style sheet. For example, the nth (N is a positive integer) frame of the animation segment a to be edited is displayed based on the page element a and the page element b, and one style property group a1 may be configured for the page element a and one style property group b1 may be configured for the page element b by using the cascading style sheet. The style attribute values included in the style property group a1 may include a style attribute value pointing to the position of the page element a, a style attribute pointing to the transparency of the page element a, and the like. The n+2th frame of the animation segment A to be edited is displayed based on the page element a and the page element c, and one style attribute group a2 can be configured for the page element a and one style attribute group c1 can be configured for the page element c by using the cascading style sheet. The style attribute values included in the style property group a2 may include a style attribute value pointing to the page element a position, a style attribute pointing to the page element a color, and the like.
In a specific embodiment, as shown in fig. 3, the setting, by using a cascading style sheet, at least one style attribute group for the page element corresponding to each animation segment to be edited includes:
S301, responding to an element configuration instruction, and determining at least one display object for constructing each animation segment to be edited and at least one page element corresponding to the display object;
For example, in response to the element configuration instruction, it is determined that the animation segment B to be edited includes a display object B1, a display object B2, a display object B3, and a display object B4. As shown in fig. 1, the display object B1 may correspond to a button element (page element) that needs to be continuously rotated in the upper right corner of the corresponding frame. The display object B2 may correspond to an arrow element (page element) that needs to be jumped and continuously displaced left and right in the corresponding frame. The display object B3 may correspond to a person object corresponding to a plurality of page elements, the person object being required to appear gradually from top to bottom of the corresponding frame, and the person object being required to make a posture change (such as being opened by both hands to being gripped by both hands) in the corresponding frame. The display object B4 may correspond to a dialog box element (page element) that needs to appear in the corresponding frame.
S302, setting the style attribute groups for the page elements corresponding to each display object by using the cascading style sheet.
The style property group may be set for the page element corresponding to each display object based on the above-mentioned requirements of "the button element needs to be continuously rotated at the upper right corner of the corresponding frame picture", "the arrow element needs to be continuously shifted left and right in the jumping of the corresponding frame picture", and the like. The cascading style sheet can be used for realizing the accurate control of the pixel level of the page element, and ensuring the realization of the display effect in the subsequent vivid target animation.
In another specific embodiment, as shown in fig. 4, the setting, by using a cascading style sheet, at least one style attribute group for the page element corresponding to each animation segment to be edited includes:
S401, when the page element sets of the at least two animation fragments to be edited contain the same associated element, setting a style attribute initial value and a style attribute increment for the associated element by utilizing the cascading style sheet;
The association element is included in the page element set of the at least two animation clips to be edited, and further, the association element may be included in a page element group corresponding to each frame of picture of each animation clip to be edited. As shown in fig. 1, for example, there are 8 animation segments to be edited, where the 8 animation segments to be edited respectively describe a corresponding scene, and the 8 scenes form an animation display content for representing forward walking of a character object. The person object moves backward, and accordingly, may be an offset of a road surface element (or a road surface object constructed by at least one road surface element) in a specific direction. The pavement element is a correlation element.
In combination with the "to-be-played time sequence identifier" recorded in step S201, the style attribute initial value indicates a style attribute of the associated element in an expected earliest playing animation segment, the expected earliest playing animation segment is the to-be-edited animation segment corresponding to the to-be-played time sequence identifier representing earliest playing, the style attribute increment indicates a style attribute difference between expected adjacent playing animation segments of the associated element, and the expected adjacent playing animation segment is the two to-be-edited animation segments corresponding to the to-be-played time sequence identifier representing adjacent playing. Taking pavement elements as an example, the initial value of the style attribute can be set to be-1110 pixels (px) and expressed by r0, and the increment value of the style attribute can be set to be-1280 pixels (px) and expressed by r 1. r0 represents a displacement attribute value of the road surface element in the 1 st scene, and r1 represents an offset of the displacement attribute value of the road surface element each time in adjacent scene switching.
S402, obtaining a style attribute value of the associated element corresponding to the animation segment to be edited according to the style attribute initial value, the style attribute increment and the time sequence identifier to be played of the animation segment to be edited;
and the 8 scenes form animation display contents for representing forward walking of the character object, and the 8 scenes correspond to the to-be-played time sequence identification of the animation fragment to be edited. The time sequence identifier to be played of the animation segment to be edited may be taken to be N (N is a positive integer, N is less than or equal to 8), for example, the time sequence identifier to be played corresponding to the 3 rd scene is 3. And in this way, the style attribute value=r0+n×r1 of the associated element corresponding to the animation segment to be edited.
According to the common attribute of the associated elements in the continuous scenes forming the animation display content, the style attribute of the associated elements can be configured by adding the style attribute value as a fixed value, the style attribute configuration of the associated elements in each scene is not needed, the style attribute configuration step can be saved, and the complexity and the workload of modification can be reduced when the associated elements are required to be subjected to related adjustment based on the display effect.
In another specific embodiment, as shown in fig. 5, after the setting at least one style attribute group for the page element corresponding to each animation segment to be edited by using a cascading style sheet, the method further includes:
S501, when the page element set of the animation segment to be edited contains interactive elements, determining a target style attribute group with a transparency attribute value of zero from at least one style attribute group of the interactive elements;
The triggering condition of the interaction element points to user interaction and other non-time factors, the interaction element is bound with the corresponding response event, and the interaction element is triggered to obtain a response result, namely a response event.
The style attribute value of the interactive element may include a case where the transparency attribute value is zero (for example, the transparency of the element changes, the element does not appear before and then suddenly appears, and in fact, may correspond to a process of transparency from 0 to 1). A target style property group including a transparency property value of zero is determined from the at least one style property group of the interactive element.
S502, setting event response attribute values in the target style attribute group to be null by using the cascading style sheet;
The event response attribute value (which may correspond to the pointer-events attribute) is set to null (none) in the target style attribute group of the interactive element. Thus, when the interactive element does not appear in a certain frame of picture (the transparency is 0), the interactive element does not respond based on a triggering condition (such as clicking by a user), and correspondingly, a response event is not triggered, so that the response event is triggered under a reasonable condition. Of course, when the transparency attribute value is other value, the response of the interactive element may be set.
In practical applications, when the pointer-events attribute cannot be changed in a key frame (@ keyframes), an event response function can be used to implement "when an interactive element does not appear in a frame picture (transparency is 0), the interactive element does not respond based on a trigger condition (such as a user click). First, a response event to which the interactive element is bound and an event object to which the response event is registered may be determined. And then updating the binding relation between the event object and the interaction element by using an event response function, namely unbinding the event object and the interaction element based on a transparency threshold. The event response function may be an animation hook (animatedhook), a callback that the animation executes when a particular event occurs.
S203, creating a corresponding playing time shaft for each animation segment to be edited by using the cascading style sheet, wherein the playing time shaft is used for describing the playing time attributes of the page elements corresponding to different style attribute groups in the animation segment to be edited;
In the embodiment of the invention, a cascading style sheet can be utilized to create a corresponding playing time axis for each animation segment to be edited, and a playing time line (timeline) of the page element inside the animation segment to be edited is set.
In a specific embodiment, in combination with the foregoing steps S301 to S302, as shown in fig. 6, the creating, by using the cascading style sheet, a corresponding play timeline for each animation segment to be edited includes:
S601, setting a display time attribute of at least one display object in the animation segment to be edited by using the cascading style sheet;
As shown in fig. 1, the display object B3 may correspond to a person object that corresponds to a plurality of page elements, that needs to appear gradually from top to bottom on the corresponding frame, and that needs to undergo a posture change on the corresponding frame (for example, open hands to grip hands). The display object B4 may correspond to a dialog box element (page element) that needs to appear in the corresponding frame. Of course, a display object B5 may be further included, and the display object B5 may correspond to a two-dimensional code element (of course, may also be other), where the two-dimensional code element needs to appear in a corresponding frame.
The display object B3, the display object B4, and the display object B5 may have a chronological order. And setting a display time attribute of the at least one display object in the animation fragment to be edited by using the cascading style sheet, wherein the display time attribute comprises an appearance time point and an appearance duration of the display object. For example, it is required that the person object appears first (for example, appears at 0 seconds), and the appearance of the person object requires 1s (second). The dialog element appears after the person object, and then the dialog element needs to appear after a delay of 1s, and the dialog element needs to appear for 0.5s. The two-dimensional code element appears after the dialog box element, and then the two-dimensional code element needs to appear after a delay of 1.5s. Thus, the appearance time point of the display object B3 is 0, the appearance time period is 1s (second), the appearance time point of the display object B4 is 1s, the appearance time period is 0.5s, and the appearance time point of the display object B5 is 1.5s. The CSS may be used to set related style attribute values of page elements corresponding to each display object, such as an animation-delay attribute value (corresponding to offset time, appearance time point), an animation-duration attribute value (corresponding to duration, appearance time period; available for a complex animation style such as rotation), a transition attribute value (corresponding to duration, appearance time period; available for a simple animation style such as displacement change, transparency change), an animation-duration-count attribute value (corresponding to the number of times of animation play), and so on.
S602, obtaining the play time axis of the animation segment to be edited according to the display time attribute of the at least one display object;
The obtained play time axis can represent the running condition of each display object in the animation segment to be edited at each moment. The timeline logic inside the animation segment to be edited is handled by a cascading style sheet where the delay associated with a display object depends on the display object in front of it, so that there is some coupling between the display objects. Relevant parameters (such as an animation-delay attribute, an animation-duration attribute and the like) are extracted, so that bug caused by relevant changes in subsequent adjustment based on requirements (coupling condition of various display objects on a time line) can be reduced as much as possible.
S204, obtaining a target animation segment according to the play time axis of each animation segment to be edited, the page element set of each animation segment to be edited and the style attribute group corresponding to each page element in the corresponding page element set;
In the embodiment of the present invention, based on the descriptions in the foregoing steps S201 to S203, a set of page elements of an animation segment to be edited is obtained, a style attribute group corresponding to each page element in the segment in each frame of picture is configured for the animation segment to be edited by using the CSS, and a play time axis corresponding to each page element of attribute groups in different styles in the segment is created for the animation segment to be edited by using the CSS, so that the relevant setting in the segment of each animation segment to be edited is completed, and accordingly, a target animation segment corresponding to the animation segment to be edited can be obtained.
S205, setting a corresponding playing time sequence identifier for each target animation segment by using the cascading style sheet;
in the embodiment of the invention, a cascading style sheet can be utilized to set a corresponding playing time sequence identifier for each target animation segment, which is equivalent to creating a corresponding playing sequence and list. The play time sequence identifies a play position in the play sequence that characterizes the target animation segment. Based on the target animation obtained later, each target animation fragment can be played according to the playing sequence.
In a specific embodiment, after the step of setting the corresponding playing time sequence identifier for each target animation segment by using the cascading style sheet, the method further includes setting class identifiers corresponding to the playing time sequence identifiers for the target animation segments by using the cascading style sheet, wherein the class identifiers corresponding to each target animation segment correspond to the same container identifier.
In practical application, as shown in fig. 1, for example, there are 8 animation segments to be edited, where the 8 animation segments to be edited respectively describe a corresponding scene, and the 8 scenes form an animation display content for representing forward walking of a character object. The user is required to click on the right arrow before the character object can advance to the screen corresponding to the next scene. The container identifier may point to a subsequently obtained target animation or a target page displaying the target animation. When the user clicks on the right arrow, a class (css selector, in the form of dots (), is added to the whole outer container, so as to select multiple page elements), and each frame of picture in the next scene can be processed by this outer class.
S206, generating a target animation according to each target animation segment and the playing time sequence identification of each target animation segment.
In the embodiment of the present invention, based on the descriptions in the foregoing steps S204 to S205, the target animation segments are obtained, and the play sequence outside the segments is created for the target animation segments by using the CSS, so that the relevant settings outside the segments of each target animation segment are equivalent to the completed settings, and accordingly, the target animation formed by the target animation segments can be obtained. The playing form of the target animation can be a carousel.
In a specific embodiment, the generating the target animation according to the target animation segments and the playing time sequence identifier of each target animation segment includes that firstly, when the page element set corresponding to the target animation segment includes an interactive element, binding the interactive element with an associated class identifier corresponding to an associated animation segment by using the cascading style sheet, where the associated animation segment is a response result obtained by triggering the interactive element. And then, generating segment switching configuration information corresponding to the target animation segment according to the binding relation between the interaction element and the association type identifier. And generating the target animation according to each target animation fragment, the playing time sequence identifier of each target animation fragment and fragment switching configuration information corresponding to the target animation fragment.
The triggering condition of the interaction element points to user interaction and other non-time factors. And binding the interactive element with the associated class identifier corresponding to the associated animation segment by using the cascading style sheet, so that the interactive element responds based on a trigger condition (such as clicking by a user), and the associated animation segment serving as a response result is displayed in a jumping manner. For example, the page element set corresponding to the target animation segment 1 includes an interactive element 1, and the target animation segment 1 corresponds to a playing time sequence identifier 1. The associated animation segment may be the target animation segment 2 (corresponding to the playing time sequence identifier 2), that is, the animation segment following the target animation segment 1 in the playing sequence. Of course, the associated animation segment may be the target animation segment 5 (corresponding to the playing time sequence identifier 5), that is, the animation segment in the playing sequence that is not played adjacent to the target animation segment 1.
As shown in fig. 7, the method further includes:
S701, when the page element set of the animation fragment to be edited contains an event callback element, determining an event callback time point and a callback event corresponding to the event callback element;
When the target picture obtained later is displayed, a certain page element is added at a certain stage (such as an ending time point) in the display process of the target animation segment corresponding to the animation segment to be edited. The page element is an event callback element, and the triggering condition of the event callback element points to a time factor. The callback event points to an event of "add event callback element". And the event callback time point points to the time point when the callback event is callback.
S702, registering the callback event in an event object by utilizing an event response function;
The event response function may be an animation hook (animated hook), a callback that the animation executes when a particular event occurs. After the event callback element is created, the callback event may be registered in an event object (document) using an animation hook. The bottom layer of the animated hook is animationend events, which can be encapsulated for observer mode.
S703, binding the event object and the animation fragment to be edited before the event callback time point by utilizing the event response function.
The event object and the animation segment to be edited can be bound based on the event callback time point. In this way, the target animation segment corresponding to the animation segment to be edited triggers the event callback time point (corresponding to the event triggering the animation executing completion event) at a certain stage (such as the ending time point) in the display process, bubbles to the event object, executes the subscribed callback event (adding the event callback element), and then the display of the target animation segment corresponding to the animation segment to be edited is ended.
The animationend event may be triggered after the CSS animation (animation generated based on the web CSS language) is completed. Of course, the case where the CSS animation is terminated before completion is not included, for example, the page element becomes invisible.
As can be seen from the technical solutions provided in the embodiments of the present disclosure, in the process of generating an animation, the embodiments of the present disclosure set style attributes of page elements in a segment of the animation to be edited and play times of page elements inside the segment by using a cascading style sheet to obtain a target animation segment, and then set corresponding play time sequence identifiers for each target animation segment by using the cascading style sheet, thereby obtaining a target animation. And utilizing the cascading style sheets to carry out animation development, and processing the style attribute of the page element and the time lines inside and outside the animation fragments by the cascading style sheets, so that the development efficiency can be improved. The animation logic is hierarchically embodied in the codes corresponding to the target animation, the style and the time line related to the animation are mainly realized by using the cascading style sheet, the related supplement is realized by using the event response function, the code corresponding to the cascading style sheet has weak coupling with the code corresponding to the event response function, and when the adjustment based on the display effect is needed, only the offset in the code corresponding to the cascading style sheet is needed to be focused, so that the efficiency and the accuracy of modification can be higher.
The embodiment of the invention also provides an animation generation device, as shown in fig. 8, which comprises:
the animation segment to be edited obtaining module 810 is configured to obtain at least two animation segments to be edited in response to an animation editing instruction, where a page element set of each animation segment to be edited includes at least one page element;
A page element configuration module 820, configured to configure at least one style attribute group for the page element corresponding to each animation segment to be edited by using a cascading style sheet, where each style attribute group includes at least one style attribute value;
A play time axis creation module 830, configured to create a corresponding play time axis for each animation segment to be edited using the cascading style sheet, where the play time axis is used to describe play time attributes of the page elements corresponding to different style attribute groups in the animation segment to be edited;
The target animation segment generation module 840 is configured to obtain a target animation segment according to the play time axis of each animation segment to be edited, the page element set of each animation segment to be edited, and the style attribute set corresponding to each page element in the corresponding page element set;
A play time sequence identifier setting module 850, configured to set a corresponding play time sequence identifier for each of the target animation clips using the cascading style sheet;
And the target animation generation module 860 is configured to generate a target animation according to each target animation segment and the playing time sequence identifier of each target animation segment.
It should be noted that the apparatus and method embodiments in the apparatus embodiments are based on the same inventive concept.
The embodiment of the invention provides an electronic device, which comprises a processor and a memory, wherein at least one instruction, at least one section of program, a code set or an instruction set is stored in the memory, and the at least one instruction, the at least one section of program, the code set or the instruction set is loaded and executed by the processor to realize the animation generation method provided by the embodiment of the method.
Further, fig. 9 shows a schematic diagram of a hardware structure of an electronic device for implementing the animation generation method provided by the embodiment of the invention, where the electronic device may participate in forming or including the animation generation device provided by the embodiment of the invention. As shown in fig. 9, the electronic device 90 may include one or more processors 902 (shown in the figures as 902a, 902b, 902 n), a memory 904 for storing data, and a transmission means 906 for communication functions (the processor 902 may include, but is not limited to, a microprocessor MCU or a programmable logic device FPGA or the like). Among other things, a display, an input/output interface (I/O interface), a Universal Serial Bus (USB) port (which may be included as one of the ports of the I/O interface), a network interface, a power supply, and/or a camera may be included. It will be appreciated by those skilled in the art that the configuration shown in fig. 9 is merely illustrative and is not intended to limit the configuration of the electronic device. For example, the electronic device 90 may also include more or fewer components than shown in FIG. 9, or have a different configuration than shown in FIG. 9.
It should be noted that the one or more processors 902 and/or other data processing circuitry described above may be referred to herein generally as "data processing circuitry. The data processing circuit may be embodied in whole or in part in software, hardware, firmware, or any other combination. Further, the data processing circuitry may be a single stand-alone processing module, or incorporated, in whole or in part, into any of the other elements in the electronic device 90 (or mobile device). As referred to in embodiments of the application, the data processing circuit acts as a processor control (e.g., selection of the path of the variable resistor termination connected to the interface).
The memory 904 may be used to store software programs and modules of application software, such as program instructions/data storage devices corresponding to the methods described in embodiments of the present invention, and the processor 902 executes the software programs and modules stored in the memory 94 to perform various functional applications and data processing, i.e., to implement an animation generation method as described above. The memory 904 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, the memory 904 may further include memory remotely located relative to the processor 902, which may be connected to the electronic device 90 via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
The transmission means 906 is used for receiving or transmitting data via a network. Specific examples of the network described above may include a wireless network provided by a communications provider of the electronic device 90. In one example, the transmission means 906 includes a network adapter (NetworkInterfaceController, NIC) that can be connected to other network devices through a base station to communicate with the internet. In one embodiment, the transmission device 906 may be a radio frequency (RadioFrequency, RF) module for communicating wirelessly with the internet.
The display may be, for example, a touch screen type Liquid Crystal Display (LCD) that may enable a user to interact with a user interface of the electronic device 90 (or mobile device).
Embodiments of the present invention also provide a storage medium that may be disposed in an electronic device to store at least one instruction, at least one program, a code set, or a set of instructions related to implementing an animation generation method in a method embodiment, where the at least one instruction, the at least one program, the code set, or the set of instructions are loaded and executed by the processor to implement the animation generation method provided in the method embodiment.
Alternatively, in this embodiment, the storage medium may be located in at least one network server among a plurality of network servers of the computer network. Alternatively, in the present embodiment, the storage medium may include, but is not limited to, a U disk, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), a removable hard disk, a magnetic disk, or an optical disk, etc. various media that can store program codes.
It should be noted that the sequence of the embodiments of the present invention is only for description, and does not represent the advantages and disadvantages of the embodiments. And the foregoing description has been directed to specific embodiments of this specification. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims can be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.
In this specification, each embodiment is described in a progressive manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for the apparatus and electronic device embodiments, since they are substantially similar to the method embodiments, the description is relatively simple, and references to the parts of the description of the method embodiments are only required.
It will be understood by those skilled in the art that all or part of the steps for implementing the above embodiments may be implemented by hardware, or may be implemented by a program for instructing relevant hardware, where the program may be stored in a computer readable storage medium, and the storage medium may be a read-only memory, a magnetic disk or an optical disk, etc.
The foregoing description of the preferred embodiments of the invention is not intended to limit the invention to the precise form disclosed, and any such modifications, equivalents, and alternatives falling within the spirit and scope of the invention are intended to be included within the scope of the invention.
Claims (16)
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910983051.3A CN112667942B (en) | 2019-10-16 | 2019-10-16 | Animation generation method, device and medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910983051.3A CN112667942B (en) | 2019-10-16 | 2019-10-16 | Animation generation method, device and medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112667942A CN112667942A (en) | 2021-04-16 |
| CN112667942B true CN112667942B (en) | 2024-12-10 |
Family
ID=75400298
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910983051.3A Active CN112667942B (en) | 2019-10-16 | 2019-10-16 | Animation generation method, device and medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112667942B (en) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113808237B (en) * | 2021-09-18 | 2024-12-27 | 珠海金山数字网络科技有限公司 | Animation generation method and device |
| CN113849164B (en) * | 2021-09-26 | 2025-08-19 | 北京百度网讯科技有限公司 | Data processing method, device, electronic equipment and memory |
| CN114332310A (en) * | 2021-11-26 | 2022-04-12 | 杭州炽橙数字科技有限公司 | A method and system for editing three-dimensional model animation |
| CN114491363A (en) * | 2022-01-13 | 2022-05-13 | 海南车智易通信息技术有限公司 | Browser page display method and browser |
| CN115512008A (en) * | 2022-10-17 | 2022-12-23 | 中国工商银行股份有限公司 | Animation generation method, device, computer equipment and storage medium |
| CN115618155B (en) * | 2022-12-20 | 2023-03-10 | 成都泰盟软件有限公司 | Method and device for generating animation, computer equipment and storage medium |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| AU1671701A (en) * | 2000-02-28 | 2001-08-30 | Canon Kabushiki Kaisha | Object based animations with timelines |
| CN106168978A (en) * | 2016-07-25 | 2016-11-30 | 腾讯科技（深圳）有限公司 | The treating method and apparatus of pop-up in a kind of webpage |
Family Cites Families (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7173623B2 (en) * | 2003-05-09 | 2007-02-06 | Microsoft Corporation | System supporting animation of graphical display elements through animation object instances |
| US8164596B1 (en) * | 2011-10-06 | 2012-04-24 | Sencha, Inc. | Style sheet animation creation tool with timeline interface |
| US9619913B2 (en) * | 2013-06-03 | 2017-04-11 | Microsoft Technology Licensing, Llc. | Animation editing |
| CN105657518A (en) * | 2016-02-04 | 2016-06-08 | 厦门幻世网络科技有限公司 | Method and device for playing cartoons |
| US10503803B2 (en) * | 2016-11-23 | 2019-12-10 | Google Llc | Animated snippets for search results |
| CN106709070B (en) * | 2017-01-25 | 2020-06-23 | 腾讯科技（深圳）有限公司 | Animation generation method and device and animation playing method and device |
| CN109359262B (en) * | 2018-10-11 | 2020-09-04 | 广州酷狗计算机科技有限公司 | Animation playing method, device, terminal and storage medium |
| CN109636887B (en) * | 2018-11-29 | 2023-06-06 | 北京宇航系统工程研究所 | A two-dimensional electronic technical drawing format conversion and vectorization interactive system |
-
2019
- 2019-10-16 CN CN201910983051.3A patent/CN112667942B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| AU1671701A (en) * | 2000-02-28 | 2001-08-30 | Canon Kabushiki Kaisha | Object based animations with timelines |
| CN106168978A (en) * | 2016-07-25 | 2016-11-30 | 腾讯科技（深圳）有限公司 | The treating method and apparatus of pop-up in a kind of webpage |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112667942A (en) | 2021-04-16 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112667942B (en) | Animation generation method, device and medium | |
| US11620784B2 (en) | Virtual scene display method and apparatus, and storage medium | |
| US11481948B2 (en) | Method, device and storage medium for generating animation group by synthesizing animation layers based on tree structure relation between behavior information and sub-behavior information | |
| US9135228B2 (en) | Presentation of document history in a web browsing application | |
| JP7587063B2 (en) | Application page display method, device and equipment | |
| US12175576B2 (en) | Method, apparatus, device and media for publishing video | |
| US20100088624A1 (en) | Animation tool | |
| CN107992246A (en) | Video editing method and device and intelligent terminal | |
| US20150248722A1 (en) | Web based interactive multimedia system | |
| JP2014524623A (en) | Template file processing method and apparatus | |
| CN113326043A (en) | Webpage rendering method, webpage manufacturing method and webpage rendering system | |
| US9851874B2 (en) | Personalized webpage feature touring system | |
| AU2015376591A1 (en) | Desktop sharing method and mobile terminal | |
| CN103858137A (en) | Remotely preconfiguring a computing device | |
| KR102184162B1 (en) | System and method for producing reactive webtoons | |
| CN116437153A (en) | Previewing method and device of virtual model, electronic equipment and storage medium | |
| CN112799552A (en) | Method and device for sharing promotion pictures and storage medium | |
| CN117255219A (en) | Comment processing method and device, electronic equipment and storage medium | |
| CN114489404A (en) | A page interaction method, apparatus, device and storage medium | |
| CN114500731A (en) | Advertisement display method and electronic equipment | |
| CN118447173B (en) | 3D digital twin display method, system, device and readable storage medium | |
| CN115618155B (en) | Method and device for generating animation, computer equipment and storage medium | |
| CN118625972B (en) | Page display method and device, electronic device, storage medium, computer program | |
| Georgiev | Tools for presenting 3D objects and virtual collections online | |
| CN113033142B (en) | Information flow display method, device, equipment and medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TG01 | Patent term adjustment | ||
| TG01 | Patent term adjustment |