Animation generation method, device and medium

Abstract

The present invention discloses an animation generation method, device and medium. The method comprises: in response to an animation editing instruction, obtaining at least two animation clips to be edited, each of which includes at least one page element; using a cascading style sheet to configure at least one style attribute group for each page element corresponding to each animation clip to be edited; using a cascading style sheet to create a corresponding play time axis for each animation clip to be edited, the play time axis is used to describe the play time attributes of each page element corresponding to different style attribute groups in the animation clip to be edited; obtaining a target animation clip according to the play time axis of each animation clip to be edited, the page element corresponding to each animation clip to be edited and the style attribute group corresponding thereto; using a cascading style sheet to set a corresponding play time sequence identifier for each target animation clip; generating a target animation according to each target animation clip and the play time sequence identifier of each target animation clip.

Description

Technical Field

[0001] The present invention relates to the field of Internet communication technology, and in particular to an animation generation method, device and medium. Background Art

[0002] With the development of Internet communication technology, in addition to static forms of expression such as text, dynamic forms of expression such as animation have also emerged in web pages. Displaying with animation can greatly improve the user experience of obtaining relevant content.

[0003] In the prior art, animations are often encapsulated into js functions (event response functions; js: JavaScript, a literal scripting language), and the animation display is achieved by frequently obtaining and changing the styles of related elements within the functions, and manually setting the delays of these functions. For example, every 16ms (milliseconds), the left displacement of element A is increased by 1px (pixel, a relative length unit), and moved from 100px (corresponding position) to 200px (corresponding position). The efficiency of animation development using js functions is low, and corresponding references are required when modifying the style of elements. Therefore, it is necessary to provide a more effective development solution for animation. Summary of the invention

[0004] In order to solve the problems of low development efficiency when the existing technology is applied to animation development, the present invention provides an animation generation method, device and medium:

[0005] In one aspect, the present invention provides an animation generation method, the method comprising:

[0006] In response to the animation editing instruction, obtaining at least two animation clips to be edited, wherein the page element set of each of the animation clips to be edited includes at least one page element;

[0007] Using a cascading style sheet, respectively configure at least one style attribute group for each page element corresponding to each animation clip to be edited, each of the style attribute groups including at least one style attribute value;

[0008] Using the cascading style sheet, create a corresponding play time axis for each of the animation clips to be edited, wherein the play time axis is used to describe the play time attributes of each of the page elements corresponding to different style attribute groups in the animation clips to be edited;

[0009] Obtaining a target animation clip according to the play time axis of each animation clip to be edited, the page element set of each animation clip to be edited, and the style attribute group corresponding to each page element in the corresponding page element set;

[0010] Using the cascading style sheet to set a corresponding play time sequence identifier for each target animation clip;

[0011] The target animation is generated according to each of the target animation clips and the play time sequence identifier of each of the target animation clips.

[0012] Another aspect provides an animation generation device, the device comprising:

[0013] The module for acquiring the animation clip to be edited is used to acquire at least two animation clips to be edited in response to the animation editing instruction, wherein the page element set of each animation clip to be edited includes at least one page element;

[0014] A page element configuration module: configured to configure at least one style attribute group for each page element corresponding to each animation clip to be edited by using a cascading style sheet, wherein each style attribute group includes at least one style attribute value;

[0015] A play time axis creation module: used to create a corresponding play time axis for each of the animation clips to be edited by using the cascading style sheet, wherein the play time axis is used to describe the play time attributes of each of the page elements corresponding to different style attribute groups in the animation clips to be edited;

[0016] A target animation clip generating module is used to obtain a target animation clip according to the play time axis of each animation clip to be edited, the page element set of each animation clip to be edited, and the style attribute group corresponding to each page element in the corresponding page element set;

[0017] A play time sequence identifier setting module: used to set a corresponding play time sequence identifier for each target animation clip using the cascading style sheet;

[0018] Target animation generation module: used for generating target animation according to each target animation segment and the play time sequence identifier of each target animation segment.

[0019] On the other hand, an electronic device is provided, which includes a processor and a memory, wherein the memory stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement the animation generation method as described above.

[0020] On the other hand, a computer-readable storage medium is provided, in which at least one instruction, at least one program, a code set or an instruction set is stored, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by a processor to implement the animation generation method as described above.

[0021] The present invention provides an animation generation method, device and medium, which have the following technical effects:

[0022] In the process of animation generation, the present invention uses a cascading style sheet to set the style attributes of the page elements in the animation clip to be edited and the play time of the page elements inside the clip to obtain the target animation clip, and then uses the cascading style sheet to set the corresponding play time sequence identifier for each target animation clip, thereby obtaining the target animation. The cascading style sheet is used for animation development, and the cascading style sheet processes the style attributes of the page elements and the timeline inside and outside the animation clip, which can improve the development efficiency. When it is necessary to make adjustments based on the display effect, the modification efficiency and modification accuracy are also high. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] In order to more clearly illustrate the technical solutions and advantages in the embodiments of the present invention or the prior art, the drawings required for use in the embodiments or the prior art descriptions are briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0024] Figure 1 is a schematic diagram of an application environment provided by an embodiment of the present invention;

[0025] Figure 2 is a flowchart of an animation generation method provided by an embodiment of the present invention;

[0026] Figure 3 A schematic diagram of a flow chart of using a cascading style sheet to set at least one style attribute group for each page element corresponding to the animation clip to be edited, provided by an embodiment of the present invention;

[0027] Figure 4 It is also a flow chart of using cascading style sheets to respectively set at least one style attribute group for each page element corresponding to the animation clip to be edited, provided by an embodiment of the present invention;

[0028] Figure 5 is a flow chart of using a cascading style sheet to set at least one style attribute group for each page element corresponding to the animation clip to be edited, provided by an embodiment of the present invention;

[0029] Figure 6 A schematic diagram of a process of using the cascading style sheet to create a corresponding play time axis for each animation clip to be edited provided by an embodiment of the present invention;

[0030] Figure 7 It is also a flowchart of an animation generation method provided by an embodiment of the present invention;

[0031] Figure 8 It is a block diagram of a composition of an animation generating device provided by an embodiment of the present invention;

[0032] Fig. 9 It is a structural schematic diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0033] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0034] It should be noted that the terms "including" and "having" and any variations thereof in the specification and claims of the present invention and the above-mentioned drawings are intended to cover non-exclusive inclusions. For example, a process, method, system, product or server that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0035] See also Figure 1 , Figure 1 is a schematic diagram of an application environment provided by an embodiment of the present invention, such as Figure 1 As shown, in this application environment, the animation in the page is obtained based on the rendering of the corresponding data, so that users can obtain relevant content through the dynamic form of animation, and users can obtain relevant content more intuitively, and the user's experience of obtaining relevant content is also better. It should be noted that Figure 1 Just an example.

[0036] In an embodiment of the present invention, a user can obtain the display content carried in the target page in animation form through a display terminal, and the display terminal includes but is not limited to a mobile smart phone, a tablet electronic device, a portable computer (such as a laptop computer, etc.), a personal digital assistant (PDA), a desktop computer, and a smart wearable device.

[0037] Specifically, an application client can be run in the display terminal, and the target page can be a page opened based on an internal link (a page link provided by the background server of the application, and the page resources corresponding to the internal link are provided by the background server), or a page opened based on an external link (a page link provided by a third-party server connected to the application, and the page resources corresponding to the external link are provided by the third-party server). Applications include but are not limited to social applications (such as WeChat applications), applications with entertainment functions (such as video applications, audio applications, game applications, and reading software), and applications with service functions (such as map navigation applications, group buying applications). There is no limitation on the display content of the target page.

[0038] The following describes a specific embodiment of an animation generation method of the present invention. Figure 2 It is a flowchart of an animation generation method provided by an embodiment of the present invention. This specification provides method operation steps as described in the embodiment or flowchart, but may include more or fewer operation steps based on conventional or non-creative labor. The order of steps listed in the embodiment is only one way of executing the steps among many orders, and does not represent the only order of execution. When the actual system or server product is executed, it can be executed in sequence or in parallel (for example, in a parallel processor or multi-threaded processing environment) according to the method shown in the embodiment or the accompanying drawings. Specifically, Figure 2 As shown, the method may include:

[0039] S201: In response to an animation editing instruction, obtaining at least two animation clips to be edited, wherein a page element set of each of the animation clips to be edited includes at least one page element;

[0040] In an embodiment of the present invention, the animation to be generated may be composed of at least two animation clips, a certain playback order is set between the animation clips, each animation clip may correspond to at least one frame, and each frame may be presented based on at least one corresponding page element.

[0041] Accordingly, in response to the animation editing instruction, at least two animation clips to be edited are obtained. The at least two animation clips to be edited may be currently created, or the at least two animation clips to be edited may be previously created (such as the case of adjusting the display effect of the generated animation). The page element set of each animation clip to be edited includes at least one page element. For example, when the animation clip to be edited may correspond to multiple frames, and each frame may be displayed based on the corresponding multiple page elements, then the page element set of the animation clip to be edited includes page elements for displaying all frames. Page elements may include text boxes, drop-down boxes, floating windows, buttons, images, videos, etc.

[0042] In a specific embodiment, after obtaining at least two animation clips to be edited, the method further includes:

[0043] Determine the time sequence identifier to be played corresponding to each of the animation clips to be edited. The time sequence identifier to be played is used to indicate the play position of the animation clip to be edited in the expected play sequence.

[0044] S202: using a cascading style sheet to configure at least one style attribute group for each page element corresponding to the animation clip to be edited, each of the style attribute groups including at least one style attribute value;

[0045] In the embodiment of the present invention, Cascading Style Sheets (CSS) is a computer language used to express the style of files such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standard Generalized Markup Language), and is a language for controlling the style of web page elements. CSS can accurately control the layout of the position of elements in a web page at the pixel level, supports almost all fonts and font sizes, and has the ability to edit web page objects and model styles. The static appearance attributes of page elements, such as positioning, fonts, font sizes, borders, colors, background colors, spacing and margins, can be controlled by Cascading Style Sheets. The dynamic effects of page elements can be achieved by setting key frames and transitions.

[0046] The animation clip to be edited may correspond to multiple frames, each frame may be displayed based on the corresponding multiple page elements, and the multiple page elements corresponding to each frame may be referred to as a page element group. The union of multiple page element groups corresponding to the same animation clip to be edited constitutes the page element set of the animation clip to be edited.

[0047] Style is the appearance of a page element. A page element (or a display object constructed by at least one page element) can correspond to a static style or an animation style. An animation style actually corresponds to the transition from one static style to another static style. The static style can be set by the style attribute value of the page element (which can correspond to the aforementioned static appearance attribute). Animation styles can include gradual changes in transparency, displacement, scaling, rotation, etc. The successful configuration of animation styles requires not only the configuration of static styles but also the connection and adaptation between static styles. Cascading style sheets are used to configure at least one style attribute group for each page element corresponding to the animation clip to be edited. For example, the Nth (N is a positive integer) frame of the animation clip A to be edited is displayed based on page elements a and page elements b. A cascading style sheet can be used to configure a style attribute group a1 for page element a and a style attribute group b1 for page element b. The style attribute values ​​included in the style attribute group a1 may include style attribute values ​​pointing to the position of page element a, style attributes pointing to the transparency of page element a, etc. The N+2th frame of the animation clip A to be edited is displayed based on the page element a and the page element c. The cascading style sheet can be used to configure a style attribute group a2 for the page element a and a style attribute group c1 for the page element c. The style attribute values ​​included in the style attribute group a2 may include a style attribute value pointing to the position of the page element a, a style attribute pointing to the color of the page element a, and the like.

[0048] In a specific embodiment, Figure 3 As shown, the method of using the cascading style sheet to respectively set at least one style attribute group for each page element corresponding to the animation clip to be edited includes:

[0049] S301: In response to an element configuration instruction, determining at least one display object used to construct each of the animation clips to be edited and at least one of the page elements corresponding to the display object;

[0050] For example, in response to the element configuration instruction, it is determined that the animation segment B to be edited includes display object B1, display object B2, display object B3 and display object B4. Figure 1As shown, display object B1 may correspond to a button element (page element), which needs to rotate continuously in the upper right corner of the corresponding frame screen. Display object B2 may correspond to an arrow element (page element), which needs to jump and shift left and right continuously in the corresponding frame screen. Display object B3 may correspond to a character object, which corresponds to multiple page elements, which needs to gradually appear from top to bottom in the corresponding frame screen, and which needs to change posture in the corresponding frame screen (for example, from open hands to clenched hands). Display object B4 may correspond to a dialog element (page element), which needs to appear in the corresponding frame screen.

[0051] S302: Using the cascading style sheet, set the style attribute group for the page element corresponding to each display object.

[0052] Based on the above requirements such as "the button element needs to rotate continuously in the upper right corner of the corresponding frame image", "the arrow element needs to jump and move left and right continuously in the corresponding frame image", the style attribute group can be set for the page element corresponding to each display object. The use of cascading style sheets can achieve precise pixel-level control of page elements, ensuring the realization of the display effect in the subsequent vivid target animation.

[0053] In another specific embodiment, Figure 4 As shown, the method of using the cascading style sheet to respectively set at least one style attribute group for each page element corresponding to the animation clip to be edited includes:

[0054] S401: when the page element sets of the at least two animation clips to be edited include the same associated element, using the cascading style sheet to set style attribute initial values ​​and style attribute increment values ​​for the associated element;

[0055] The associated element is included in the page element set of the at least two animation clips to be edited. Further, the associated element may be included in the page element group corresponding to each frame of each animation clip to be edited. Figure 1 As shown, for example, there are 8 animation clips to be edited, each of which describes a corresponding scene, and these 8 scenes form an animation display content showing a character object walking forward. The character object walking forward can correspond to the road moving backward, and correspondingly, it can be the displacement of the road surface element (or the road surface object constructed by at least one road surface element) in a specific direction. The road surface element is an associated element.

[0056] Combined with the "time sequence identifier to be played" recorded in step S201, the initial value of the style attribute indicates the style attribute of the associated element in the earliest expected animation segment to be played, the earliest expected animation segment to be played is the animation segment to be edited corresponding to the time sequence identifier to be played that represents the earliest playback, and the style attribute increment indicates the style attribute difference between the associated elements between the expected adjacent animation segments to be played, the expected adjacent animation segments to be played are the two animation segments to be edited corresponding to the time sequence identifier to be played that represent adjacent playback. Taking the pavement element as an example, the initial value of the style attribute can be set to -1110 pixels (px), represented by r0; the style attribute increment can be set to -1280 pixels (px), represented by r1. r0 represents the displacement attribute value of the pavement element in the first scene, and r1 represents the offset of the displacement attribute value of the pavement element each time the adjacent scenes are switched.

[0057] S402: Obtaining the style attribute value of the associated element corresponding to the animation clip to be edited according to the style attribute initial value, the style attribute increment value and the to-be-played time sequence identifier of the animation clip to be edited;

[0058] The above 8 scenes constitute the animation display content showing the character object walking forward, and the 8 scenes correspond to the time sequence identifier to be played of the animation clip to be edited. The time sequence identifier to be played of the animation clip to be edited can be taken as 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 third scene is 3. In this way, the style attribute value of the associated element corresponding to the animation clip to be edited = r0+N*r1.

[0059] According to the common properties of the associated elements in the continuous scenes that make up the animation display content, the style attribute increment can be used as a fixed value to configure the style attributes of the associated elements. There is no need to configure the style attributes of the associated elements in each scene separately, which can save style attribute configuration steps and reduce the complexity and workload of modification when relevant adjustments are required to the associated elements based on the display effect.

[0060] In another specific embodiment, Figure 5 As shown, after using the cascading style sheet to set at least one style attribute group for each page element corresponding to the animation clip to be edited, the method further includes:

[0061] S501: When the page element set of the animation clip to be edited includes an interactive element, determining a target style attribute group including a transparency attribute value of zero from the at least one style attribute group of the interactive element;

[0062] The triggering condition of the interactive element refers to user interaction and other non-time factors. The interactive element is bound to a corresponding response event, and the interactive element is triggered to obtain a response result: a response event.

[0063] The style attribute value of the interactive element may include a situation where the transparency attribute value is zero (for example, the transparency of the element changes, the element was not there before and then suddenly appears, which actually corresponds to a process where the transparency changes from 0 to 1). The at least one style attribute group of the interactive element determines to include a target style attribute group with a transparency attribute value of zero.

[0064] S502: Using the cascading style sheet, setting the event response attribute value in the target style attribute group to null;

[0065] In the target style attribute group of the interactive element, the event response attribute value (which may correspond to the pointer-events attribute) is set to null (none). In this way, when the interactive element does not appear in a certain frame (the transparency is 0), the interactive element will not respond based on the triggering condition (such as user click), and accordingly, the response event will not be triggered, ensuring that the response event is triggered under reasonable circumstances. Of course, when the transparency attribute value is other values, the response of the interactive element can also be set.

[0066] In actual applications, when the pointer-events attribute cannot be changed in the keyframes (@keyframes), the event response function can be used to achieve "when the interactive element does not appear in a certain frame (the transparency is 0), the interactive element will not respond based on the trigger condition (such as user click)". First, the response event bound to the interactive element and the event object registered for the response event can be determined. Then, the event response function is used to update the binding relationship between the event object and the interactive element: unbind the event object and the interactive element based on the transparency threshold. The event response function can be an animation hook (animatedhook, a callback executed by the animation when a specific event occurs).

[0067] S203: using the cascading style sheet to create a corresponding play time axis for each of the animation clips to be edited, the play time axis being used to describe the play time attributes of each of the page elements corresponding to different style attribute groups in the animation clips to be edited;

[0068] In the embodiment of the present invention, a cascading style sheet may be used to create a corresponding play time axis for each animation clip to be edited, and set the play time line (timeline) of the page elements inside the animation clip to be edited.

[0069] In a specific embodiment, in combination with the above steps S301-S302, as Figure 6 As shown, the use of the cascading style sheet to create a corresponding play time axis for each animation clip to be edited includes:

[0070] S601: using the cascading style sheet to set the display time attribute of at least one display object in the animation clip to be edited;

[0071] like Figure 1 As shown, display object B3 may correspond to a character object, which corresponds to multiple page elements. The character object needs to gradually appear from top to bottom in the corresponding frame, and the character object needs to change its posture in the corresponding frame (for example, from open hands to clenched hands). Display object B4 may correspond to a dialog element (page element), which needs to appear in the corresponding frame. Of course, display object B5 may also be included. Display object B5 may correspond to a QR code element (of course, it may also be other), which needs to appear in the corresponding frame.

[0072] Display object B3, display object B4 and display object B5 may have a sequence of appearance time. The display time attribute of at least one of the display objects in the animation segment to be edited may be set using the cascading style sheet, and the display time attribute includes the appearance time point and appearance duration of the display object. For example, the character object needs to appear first (for example, appear at 0 seconds), and the appearance of the character object requires 1 second. If the dialog element appears after the character object, then the dialog element needs to be delayed for 1 second, and the appearance of the dialog requires 0.5 seconds. If the QR code element appears after the dialog element, then the QR code element needs to be delayed for 1.5 seconds. In this way, the appearance time point of display object B3 is 0, and the appearance duration is 1 second; the appearance time point of display object B4 is 1 second, and the appearance duration is 0.5 seconds; the appearance time point of display object B5 is 1.5 seconds. CSS can be used to set the relevant style attribute values ​​of each display object corresponding to the page element, such as the animation-delay attribute value (corresponding to offset time, appearance time point), animation-duration attribute value (corresponding to duration, appearance duration; can be used for more complex animation styles, such as rotation), transition attribute value (corresponding to duration, appearance duration; can be used for simple animation styles, such as displacement change, transparency change), animation-iteration-count attribute value (corresponding to the number of times the animation is played), etc.

[0073] S602: Obtaining the play time axis of the animation clip to be edited according to the display time attribute of the at least one display object;

[0074] The obtained playback timeline can characterize the operation status of each display object in the animation clip to be edited at each moment. The timeline logic in the animation clip to be edited is processed by the cascading style sheet, in which the delay related to a display object depends on the display object in front of it, so that there is a certain coupling between the display objects. Here, the relevant parameters (such as animation-delay attribute, animation-duration attribute, etc.) are extracted to minimize the bugs (vulnerabilities) in the animation connection (the coupling of each display object on the timeline) caused by the relevant changes when making subsequent adjustments based on needs.

[0075] S204: Obtain a target animation clip according to the play time axis of each animation clip to be edited, the page element set of each animation clip to be edited, and the style attribute group corresponding to each page element in the corresponding page element set;

[0076] In an embodiment of the present invention, based on the records of the aforementioned steps S201-S203, a set of page elements of the animation clip to be edited is obtained, and a style attribute group corresponding to each page element within the clip in each frame is configured for the animation clip to be edited using CSS. A playback timeline of each page element within the clip corresponding to a different style attribute group is created for the animation clip to be edited using CSS. This is equivalent to completing the relevant settings within each animation clip to be edited, and accordingly, a target animation clip corresponding to the animation clip to be edited can be obtained.

[0077] S205: using the cascading style sheet to set a corresponding play time sequence identifier for each target animation clip;

[0078] In an embodiment of the present invention, a cascading style sheet can be used to set a corresponding play time sequence identifier for each target animation clip, which is equivalent to creating a corresponding play sequence and list. The play time sequence identifier is used to characterize the play position of the target animation clip in the play sequence. Based on the target animation obtained subsequently, each target animation clip can be played according to the play sequence.

[0079] In a specific embodiment, after using the cascading style sheet to set a corresponding playback time sequence identifier for each target animation segment, it also includes: using the cascading style sheet to set a class identifier corresponding to the playback time sequence identifier for the target animation segment, and the class identifier corresponding to each target animation segment corresponds to the same container identifier.

[0080] In practical applications, such as Figure 1As shown, for example, there are 8 animation clips to be edited, each of which describes a corresponding scene. These 8 scenes form an animation display content showing the character object walking forward. The user needs to click the right arrow before the character object can move forward to the screen corresponding to the next scene. The container identifier can point to the target animation obtained later or the target page that displays the target animation. When the user clicks the right arrow, a class (class, a CSS selector with a small dot (.) used to select multiple page elements) can be added to the entire outer container, and each frame of the next scene can be processed by this outer class.

[0081] S206: Generate a target animation according to each of the target animation clips and the play time sequence identifier of each of the target animation clips.

[0082] In the embodiment of the present invention, based on the records of the aforementioned steps S204-S205, the target animation clips are obtained, and the external playback sequence of the target animation clips is created for the target animation clips using CSS, which is equivalent to completing the relevant settings of the external clips of each target animation clip, and accordingly, the target animation composed of these target animation clips can be obtained. The playback form of the target animation can be a carousel.

[0083] In a specific embodiment, the target animation is generated according to each of the target animation segments and the play time sequence identifier of each of the target animation segments, including: first, when the page element set corresponding to the target animation segment contains an interactive element, the interactive element is bound to the associated class identifier corresponding to the associated animation segment using the cascading style sheet, and the associated animation segment is the response result obtained by triggering the interactive element. Then, the segment switching configuration information corresponding to the target animation segment is generated according to the binding relationship between the interactive element and the associated class identifier. The target animation is then generated according to each of the target animation segments, the play time sequence identifier of each of the target animation segments, and the segment switching configuration information corresponding to the target animation segment.

[0084] The triggering condition of the interactive element refers to user interaction and other non-time factors. The interactive element is bound to the associated class identifier corresponding to the associated animation clip by using the cascading style sheet, so that the interactive element responds based on the triggering condition (such as user click), and the associated animation clip as the response result can be jumped and displayed. For example, the page element set corresponding to the target animation clip 1 includes interactive element 1, and the target animation clip 1 corresponds to the playback time sequence identifier 1. The associated animation clip can be the target animation clip 2 (corresponding to the playback time sequence identifier 2), that is, the animation clip after the target animation clip 1 in the playback sequence. Of course, the associated animation clip can be the target animation clip 5 (corresponding to the playback time sequence identifier 5), that is, the animation clip that is not played adjacent to the target animation clip 1 in the playback sequence.

[0085] like Figure 7 As shown, the method also includes:

[0086] S701: When the page element set of the animation clip to be edited includes an event callback element, determining an event callback time point and a callback event corresponding to the event callback element;

[0087] When the target screen obtained later is displayed, it is necessary to add a certain page element to the target animation clip corresponding to the animation clip to be edited at a certain stage (such as the end time point) during the display process. The page element is an event callback element, and the trigger condition of the event callback element points to the time factor. The callback event points to the event of "adding the event callback element". The event callback time point points to the time point when the callback event is called back.

[0088] S702: Register the callback event in the event object using an event response function;

[0089] The event response function can be an animated hook (animated hook, a callback executed by the animation when a specific event occurs). After the event callback element is created, the animation hook can be used to register the callback event in the event object (document). The bottom layer of the animation hook is the animationend event, which can be encapsulated in the observer mode.

[0090] S703: Using the event response function to bind the event object and the animation clip to be edited before the event callback time point.

[0091] The event object and the animation clip to be edited can be bound based on the event callback time point. In this way, the target animation clip corresponding to the animation clip to be edited will trigger the event callback time point (corresponding trigger animation execution completion event) at a certain stage (such as the end time point) during the display process, bubble up to the event object, execute the subscribed callback event ("add event callback element"), and then the target animation clip corresponding to the animation clip to be edited will end display.

[0092] The animationend event can be triggered after the CSS animation (css animation, animation generated based on the web css language) is completed. Of course, it does not include the situation where the CSS animation is terminated before completion, such as when the page element becomes invisible.

[0093] It can be seen from the technical solution provided by the above embodiments of this specification that in the animation generation process, the embodiments of this specification use cascading style sheets to set the style attributes of the page elements in the animation segment to be edited and the play time of the page elements inside the segment to obtain the target animation segment, and then use the cascading style sheets to set the corresponding play time sequence identifier for each target animation segment, thereby obtaining the target animation. Using cascading style sheets for animation development, the cascading style sheets process the style attributes of the page elements and the timelines inside and outside the animation segment, which can improve the development efficiency. The hierarchical nature of the animation logic is reflected in the code corresponding to the target animation. The styles and timelines involved in the animation are mainly implemented using cascading style sheets, and the related supplements are implemented using event response functions. The code corresponding to the cascading style sheets is weakly coupled with the code corresponding to the event response function. When adjustments need to be made based on the display effect, only the offset in the code corresponding to the cascading style sheets needs to be paid attention to, and the modification efficiency and modification accuracy are also high.

[0094] The embodiment of the present invention also provides an animation generating device, such as Figure 8 As shown, the device comprises:

[0095] The animation clip acquisition module 810 to be edited is used to acquire at least two animation clips to be edited in response to the animation editing instruction, and the page element set of each animation clip to be edited includes at least one page element;

[0096] Page element configuration module 820: configured to configure at least one style attribute group for each page element corresponding to each animation clip to be edited by using a cascading style sheet, each style attribute group including at least one style attribute value;

[0097] A play time axis creation module 830 is used to create a corresponding play time axis for each of the animation clips to be edited by using the cascading style sheet, wherein the play time axis is used to describe the play time attributes of each of the page elements corresponding to different style attribute groups in the animation clips to be edited;

[0098] The target animation clip generating module 840 is used to obtain the target animation clip according to the play time axis of each animation clip to be edited, the page element set of each animation clip to be edited, and the style attribute group corresponding to each page element in the corresponding page element set;

[0099] The play time sequence identifier setting module 850 is used to set a corresponding play time sequence identifier for each target animation segment by using the cascading style sheet;

[0100] The target animation generation module 860 is used to generate the target animation according to each of the target animation segments and the play time sequence identifier of each of the target animation segments.

[0101] It should be noted that the device in the device embodiment and the method embodiment are based on the same inventive concept.

[0102] An embodiment of the present invention provides an electronic device, which includes a processor and a memory, wherein the memory stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement the animation generation method provided in the above method embodiment.

[0103] Further, Fig. 9 A schematic diagram of the hardware structure of an electronic device for implementing the animation generation method provided by an embodiment of the present invention is shown. The electronic device may participate in forming or include the animation generation device provided by an embodiment of the present invention. Fig. 9 As shown, the electronic device 90 may include one or more (902a, 902b, ..., 902n are used to illustrate) processors 902 (the processor 902 may include but is not limited to a processing device such as a microprocessor MCU or a programmable logic device FPGA), a memory 904 for storing data, and a transmission device 906 for communication functions. In addition, it may also include: 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. It can be understood by those skilled in the art that Fig. 9 The structure shown is only for illustration and does not limit the structure of the above electronic device. Fig. 9More or fewer components as shown, or with Fig. 9 Different configurations are shown.

[0104] It should be noted that the one or more processors 902 and / or other data processing circuits described above may generally be referred to herein as "data processing circuits". The data processing circuits may be embodied in whole or in part as software, hardware, firmware, or any other combination thereof. In addition, the data processing circuit may be a single independent processing module, or may be incorporated in whole or in part into any of the other components in the electronic device 90 (or mobile device). As described in the embodiments of the present application, the data processing circuit acts as a processor control (e.g., selection of a variable resistor terminal path connected to an interface).

[0105] The memory 904 can be used to store software programs and modules of application software, such as program instructions / data storage devices corresponding to the method in the embodiment of the present invention. The processor 902 executes various functional applications and data processing by running the software programs and modules stored in the memory 94, that is, to implement the above-mentioned animation generation method. The memory 904 may include a high-speed random access memory, and may also include a 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 a memory remotely arranged relative to the processor 902, and these remote memories may be connected to the electronic device 90 via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0106] The transmission device 906 is used to receive or send data via a network. The specific example of the above network may include a wireless network provided by a communication provider of the electronic device 90. In one example, the transmission device 906 includes a network adapter (Network Interface Controller, NIC), which can be connected to other network devices through a base station so as to communicate with the Internet. In one embodiment, the transmission device 906 can be a radio frequency (Radio Frequency, RF) module, which is used to communicate with the Internet wirelessly.

[0107] The display may be, for example, a touch screen liquid crystal display (LCD) that enables a user to interact with a user interface of the electronic device 90 (or mobile device).

[0108] An embodiment of the present invention also provides a storage medium, which can be set in an electronic device to store at least one instruction, at least one program, code set or instruction set related to an animation generation method in a method embodiment. The at least one instruction, the at least one program, the code set or instruction set is loaded and executed by the processor to implement the animation generation method provided by the above-mentioned method embodiment.

[0109] Optionally, in this embodiment, the storage medium may be located in at least one of the multiple network servers of the computer network. Optionally, in this embodiment, the storage medium may include, but is not limited to, various media that can store program codes, such as a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk, or an optical disk.

[0110] It should be noted that the sequence of the embodiments of the present invention described above is for description only and does not represent the advantages and disadvantages of the embodiments. The above describes specific embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the embodiments and still achieve the desired results. In addition, the processes depicted in the drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0111] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device and electronic device embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiments.

[0112] A person skilled in the art will understand that all or part of the steps to implement the above embodiments may be accomplished by hardware or by instructing related hardware through a program, and the program may be stored in a computer-readable storage medium, and the above-mentioned storage medium may be a read-only memory, a disk or an optical disk, etc.

[0113] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. An animation generation method, characterized in that: The method comprises: In response to the animation editing instruction, obtaining at least two animation clips to be edited, wherein the page element set of each of the animation clips to be edited includes at least one page element; Using a cascading style sheet, respectively configure at least one style attribute group for each page element corresponding to each animation clip to be edited, each of the style attribute groups including at least one style attribute value; Using the cascading style sheet, create a corresponding play time axis for each of the animation clips to be edited, wherein the play time axis is used to describe the play time attributes of each of the page elements corresponding to different style attribute groups in the animation clips to be edited; At least two target animation clips are obtained according to the play time axis of each animation clip to be edited, the page element set of each animation clip to be edited, and the style attribute group corresponding to each page element in the corresponding page element set, wherein the at least two target animation clips correspond to the at least two animation clips to be edited one by one, and each target animation clip corresponds to a scene; Using the cascading style sheet to set a corresponding play time sequence identifier for each target animation clip; Generate a target animation according to each of the target animation clips and the play time sequence identifier of each of the target animation clips; After using the cascading style sheet to set a corresponding play time sequence identifier for each target animation segment, the method further includes: using the cascading style sheet to set a class identifier corresponding to the play time sequence identifier for the target animation segment, wherein the class identifier of each target animation segment indicates a same container identifier; The method of generating a target animation according to each of the target animation clips and the play time sequence identifier of each of the target animation clips comprises: when the page element set corresponding to the sample animation clip includes an interactive element, using the cascading style sheet to bind the interactive element to an associated class identifier corresponding to an associated animation clip, wherein the associated animation clip is a response result obtained by triggering the interactive element, and the triggering condition of the interactive element is a user interaction factor; generating the segment switching configuration information corresponding to the sample animation clip according to the binding relationship between the interactive element and the associated class identifier; generating the target animation according to each of the target animation clips, the play time sequence identifier of each of the target animation clips, and the segment switching configuration information corresponding to the sample animation clip, wherein the sample animation clip is any animation clip of the at least two target animation clips, and the associated animation clip is any animation clip of the remaining animation clip set, and the remaining animation clip set indicates the animation clips of the at least two target animation clips other than the sample animation clip.

2. The method according to claim 1, characterized in that: After obtaining at least two animation clips to be edited, the method further includes: Determine the time sequence identifier to be played corresponding to each of the animation clips to be edited; The using of cascading style sheets to respectively set at least one style attribute group for each page element corresponding to the animation clip to be edited comprises: When the page element sets of the at least two animation clips to be edited include the same associated element, using the cascading style sheet to set style attribute initial values ​​and style attribute increment values ​​for the associated element; Obtaining the style attribute value of the associated element corresponding to the animation clip to be edited according to the style attribute initial value, the style attribute increment value and the to-be-played time sequence identifier of the animation clip to be edited; Among them, the initial value of the style attribute indicates the style attribute of the associated element in the expected earliest played animation clip, the expected earliest played animation clip is the to-be-edited animation clip corresponding to the to-be-played time sequence identifier representing the earliest playback, and the style attribute increment indicates the style attribute difference of the associated element between the expected adjacent played animation clips, the expected adjacent played animation clips are the two to-be-edited animation clips corresponding to the to-be-played time sequence identifier representing the adjacent playback.

3. The method according to claim 1, characterized in that The method further comprises: When the page element set of the animation clip to be edited includes an event callback element, determining an event callback time point and a callback event corresponding to the event callback element; Registering the callback event in the event object using the event response function; The event response function is used to bind the event object and the animation clip to be edited before the event callback time point.

4. The method according to claim 1, characterized in that: The using of cascading style sheets to respectively set at least one style attribute group for each page element corresponding to the animation clip to be edited comprises: In response to the element configuration instruction, determining at least one display object used to construct each of the animation clips to be edited and at least one of the page elements corresponding to the display object; The style attribute group is set for the page element corresponding to each display object by using the cascading style sheet.

5. The method according to claim 4, characterized in that The step of using the cascading style sheet to create a corresponding play time axis for each animation clip to be edited includes: Using the cascading style sheet to set the display time attribute of at least one of the display objects in the animation clip to be edited; Obtaining the play time axis of the animation clip to be edited according to the display time attribute of the at least one display object; The display time attribute includes the appearance time point and appearance duration of the display object.

6. The method according to claim 1, characterized in that After using the cascading style sheet to set at least one style attribute group for each page element corresponding to the animation clip to be edited, the method further includes: When the page element set of the animation clip to be edited includes an interactive element, determining a target style attribute group including a transparency attribute value of zero from the at least one style attribute group of the interactive element; Using the cascading style sheet, setting the event response attribute value in the target style attribute group to empty; Wherein, the interactive element is bound to the corresponding response event.

7. The method according to claim 1, characterized in that The method further comprises: When the page element set of the animation clip to be edited includes an interactive element, determining a response event bound to the interactive element and an event object registered for the response event; The binding relationship between the event object and the interactive element is updated by using an event response function: the event object and the interactive element are unbound based on a transparency threshold.

8. An animation generating device, characterized in that: The device comprises: The module for acquiring the animation clip to be edited is used to acquire at least two animation clips to be edited in response to the animation editing instruction, wherein the page element set of each animation clip to be edited includes at least one page element; A page element configuration module: configured to configure at least one style attribute group for each page element corresponding to each animation clip to be edited by using a cascading style sheet, wherein each style attribute group includes at least one style attribute value; A play time axis creation module: used to create a corresponding play time axis for each of the animation clips to be edited by using the cascading style sheet, wherein the play time axis is used to describe the play time attributes of each of the page elements corresponding to different style attribute groups in the animation clips to be edited; A target animation clip generating module: used for obtaining at least two target animation clips according to the play time axis of each animation clip to be edited, the page element set of each animation clip to be edited, and the style attribute group corresponding to each page element in the corresponding page element set, wherein the at least two target animation clips correspond to the at least two animation clips to be edited one by one, and each target animation clip corresponds to one scene; A play time sequence identifier setting module: used to set a corresponding play time sequence identifier for each target animation clip using the cascading style sheet; A target animation generation module: used for generating a target animation according to each of the target animation clips and the play time sequence identifier of each of the target animation clips; The device further comprises a class identifier setting module, the class identifier setting module being used to set a class identifier corresponding to the play time sequence identifier for the target animation segment by using the cascading style sheet, wherein the class identifier of each target animation segment indicates the same container identifier; Correspondingly, the target animation generation module is used for: when the page element set corresponding to the sample animation clip contains an interactive element, using the cascading style sheet to bind the interactive element to the associated class identifier corresponding to the associated animation clip, the associated animation clip is the response result obtained by triggering the interactive element, and the triggering condition of the interactive element is the user interaction factor; generating the fragment switching configuration information corresponding to the sample animation clip according to the binding relationship between the interactive element and the associated class identifier; generating the target animation according to each of the target animation clips, the playback time sequence identifier of each of the target animation clips and the fragment switching configuration information corresponding to the sample animation clip, the sample animation clip is any animation clip of the at least two target animation clips, the associated animation clip is any animation clip in the remaining animation clip set, and the remaining animation clip set indicates the animation clips of the at least two target animation clips other than the sample animation clip.

9. The device according to claim 8, characterized in that: The device further comprises a to-be-played time sequence identifier determination module, the to-be-played time sequence identifier determination module being used to determine the to-be-played time sequence identifier corresponding to each of the to-be-edited animation clips; Correspondingly, the page element configuration module is used for, when the page element sets of the at least two animation clips to be edited include the same associated element, using the cascading style sheet to set the style attribute initial value and the style attribute increment for the associated element; obtaining the style attribute value of the associated element corresponding to the animation clip to be edited according to the style attribute initial value, the style attribute increment and the to-be-played time sequence identifier of the animation clip to be edited; Among them, the initial value of the style attribute indicates the style attribute of the associated element in the expected earliest played animation clip, the expected earliest played animation clip is the to-be-edited animation clip corresponding to the to-be-played time sequence identifier representing the earliest playback, and the style attribute increment indicates the style attribute difference of the associated element between the expected adjacent played animation clips, the expected adjacent played animation clips are the two to-be-edited animation clips corresponding to the to-be-played time sequence identifier representing the adjacent playback.

10. The device according to claim 8, characterized in that The device is also used for determining the event callback time point and callback event corresponding to the event callback element when the page element set of the animation clip to be edited includes an event callback element; registering the callback event in the event object by using an event response function; The event response function is used to bind the event object and the animation clip to be edited before the event callback time point.

11. The device according to claim 8, characterized in that The page element configuration module is used to determine, in response to an element configuration instruction, at least one display object used to construct each animation segment to be edited and at least one page element corresponding to the display object; and to use the cascading style sheet to set the style attribute group for the page element corresponding to each display object.

12. The device according to claim 11, characterized in that The play time axis creation module is used to set the display time attribute of at least one display object in the animation clip to be edited by using the cascading style sheet; and obtain the play time axis of the animation clip to be edited according to the display time attribute of at least one display object; The display time attribute includes the appearance time point and appearance duration of the display object.

13. The device according to claim 8, characterized in that The device further comprises an event response attribute value setting module, wherein the event response attribute value setting module is used to: when the page element set of the animation clip to be edited includes an interactive element, determine a target style attribute group including a transparency attribute value of zero from the at least one style attribute group of the interactive element; and set the event response attribute value in the target style attribute group to be empty by using the cascading style sheet; Wherein, the interactive element is bound to the corresponding response event.

14. The device according to claim 8, characterized in that The device also includes a binding relationship updating module, which is used to: when the page element set of the animation segment to be edited includes an interactive element, determine the response event bound to the interactive element and the event object registered for the response event; use an event response function to update the binding relationship between the event object and the interactive element; and unbind the event object and the interactive element based on a transparency threshold.

15. An electronic device, characterized in that: The electronic device includes a processor and a memory, wherein the memory stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement the animation generation method as described in any one of claims 1-7.

16. A computer-readable storage medium, characterized in that: The storage medium stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement the animation generation method as described in any one of claims 1-7.

Images