Animation processing method and device, computer equipment and program product

Abstract

The embodiment of the invention provides an animation processing method, and the method comprises the steps: first equipment responds to one or more first instructions for a first element, and the one or more first instructions are used for indicating the addition of one or more animation frames of the first element; the first device obtains an animation parameter corresponding to each animation frame in the one or more key frames; the first device generates a first animation code of the first element based on the animation parameters corresponding to the one or more animation frames of the first element, and the first animation code is used for achieving the animation effect that the first element changes on the animation line time based on the animation parameters corresponding to the one or more animation frames. The embodiment of the invention further provides an animation processing device, computer equipment and a computer program product.

Description

Technical Field

[0001] The present application relates to the field of communication technology, and in particular to an animation processing method, device, computer equipment and program product. Background Art

[0002] At present, all animation effects on Android need to be realized through code. In other words, the current animation effects require animation designers to write pure code by hand and realize the visual effects of animation by controlling the attribute parameters of objects. Summary of the invention

[0003] The embodiments of the present application provide an animation processing method, apparatus, computer equipment, and program product.

[0004] The technical solution of this application is implemented as follows:

[0005] In a first aspect, an embodiment of the present application provides an animation processing method, which is applied to a first device, and the method includes:

[0006] In response to one or more first instructions for a first element, the one or more first instructions are used to instruct adding one or more animation frames of the first element;

[0007] Obtaining animation parameters corresponding to each animation frame in the one or more animation frames;

[0008] Based on the animation parameters corresponding to one or more animation frames of the first element, a first animation code for the first element is generated, and the first animation code is used to achieve an animation effect in which the first element changes based on the animation parameters corresponding to the one or more animation frames in animation line time.

[0009] In a second aspect, an embodiment of the present application provides an animation processing method, which is applied to a second device, and the method includes:

[0010] Obtaining and parsing a first animation code of a first element; the first animation code is used to realize an animation effect in which the first element changes on an animation timeline based on animation parameters corresponding to the one or more animation frames;

[0011] When a triggering event corresponding to the first animation code is triggered, the first animation code is executed.

[0012] In a third aspect, an embodiment of the present application provides an animation processing device, applied to a first device, the device comprising:

[0013] An instruction response unit, configured to respond to one or more first instructions for a first element, wherein the one or more first instructions are used to instruct to add one or more animation frames of the first element;

[0014] A parameter acquisition unit, configured to acquire animation parameters corresponding to each of the one or more animation frames;

[0015] The code generation unit is configured to generate a first animation code for the first element based on animation parameters corresponding to one or more animation frames of the first element, wherein the first animation code is used to achieve an animation effect in which the first element changes based on the animation parameters corresponding to the one or more animation frames in animation line time.

[0016] In a fourth aspect, an embodiment of the present application provides an animation processing device, applied to a second device, the device comprising:

[0017] A parsing unit configured to obtain and parse a first animation code of a first element; the first animation code is used to realize an animation effect of the first element changing on an animation timeline based on animation parameters corresponding to the one or more animation frames;

[0018] The animation running unit is configured to run the first animation code when a triggering event corresponding to the first animation code is triggered.

[0019] In a fifth aspect, an embodiment of the present application provides a computer device, comprising: a processor and a memory, the memory being used to store a computer program, the processor being used to call and run the computer program stored in the memory, and executing the method described in the first aspect or the second aspect.

[0020] In a sixth aspect, an embodiment of the present application provides a computer program product, comprising computer program instructions, which, when executed by a processor, implement the method described in the first aspect or the second aspect.

[0021] The embodiment of the present application provides an animation processing method, wherein a user can trigger a first instruction to add one or more animation frames, and input or indicate the animation parameters of each animation frame, so that the first device can automatically generate a first animation code based on the animation parameters of each animation frame. In this way, the user can design animations in a visual way without editing the animation code, thus achieving zero-code and zero-bug animation design, greatly improving the animation development efficiency and animation delivery quality. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 A schematic diagram of the animation processing system architecture used in the embodiments of the present application;

[0023] Figure 2 A schematic diagram of a service usage process provided in an embodiment of the present application Figure 1 ;

[0024] Figure 3 A schematic diagram of an animation processing method provided in an embodiment of the present application Figure 1 ;

[0025] Figure 4 A schematic diagram of a visual editing interface provided in an embodiment of the present application Figure 1 ;

[0026] Figure 5 A schematic diagram of an animation timeline display interface provided in an embodiment of the present application;

[0027] Figure 6 A schematic diagram of a visual editing interface provided in an embodiment of the present application Figure 2 ;

[0028] Figure 7 A schematic diagram of an animation processing method provided in an embodiment of the present application Figure 2 ;

[0029] Figure 8 An animation operation diagram provided in an embodiment of the present application Figure 1 ;

[0030] Fig. 9 An animation operation diagram provided in an embodiment of the present application Figure 2 ;

[0031] Fig.10 A schematic diagram of an interactive scene of a dynamic wallpaper provided in an embodiment of the present application;

[0032] Fig.11 A schematic diagram of animation interaction data provided in an embodiment of the present application;

[0033] Fig.12 A schematic diagram of a service usage process provided in an embodiment of the present application Figure 2 ;

[0034] Fig.13 A schematic diagram of a client parsing principle provided in an embodiment of the present application;

[0035] Fig.14 A schematic diagram of the structure of an animation processing device 1400 provided in an embodiment of the present application;

[0036] Fig.15 A schematic diagram of the structure of an animation processing device 1500 provided in an embodiment of the present application;

[0037] Fig.16 A schematic diagram of the hardware structure of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0038] The following will describe the technical solutions in the embodiments of the present application in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0039] It should be understood that the term "and / or" in this article is only a description of the association relationship of the associated objects, indicating that there can be three relationships. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article generally indicates that the associated objects before and after are in an "or" relationship.

[0040] It should also be understood that in the description of the present application, “plurality” means two or more than two, unless otherwise clearly and specifically defined.

[0041] It should also be understood that the "correspondence" mentioned in the embodiments of the present application may indicate a direct or indirect correspondence between the two, or an association between the two, or a relationship of indication and being indicated, configuration and being configured, etc.

[0042] It should also be understood that the terms "first", "second", etc. in the specification and claims of this application and the above-mentioned drawings are used to distinguish different objects rather than to describe a specific order.

[0043] In the related technologies, AE animation editing and Unity animation editing both support frame animation editing. However, AE is a post-processing special effects animation editor, mainly used for film and television post-processing, and the edited special effects cannot be rendered in real time on mobile phones. Unity is a 3D rendering engine. The Unity editor can be used to perform animation editing of 3D objects, but the animation editing of the Unity editor needs to cooperate with code scripts for interactive processing of events, and animation designers need to participate in the implementation of animation interaction.

[0044] At present, all animation effects on Android need to be realized through code. In other words, the current animation effects require animation designers to write pure code by hand and realize the visual effects of animation by controlling the attribute parameters of objects.

[0045] The following is a code example of how to produce a visually coherent animation effect when the object's motion is blocked.

[0046] / / The following code indicates that the animation element view executes animation 1 (i.e. Animator1), where Animator1 executes the movement of the x coordinate value from 0, 100, the animation duration is 500 milliseconds (ms), and the movement curve is (0,0,1,1).

[0047] Animator1.duration(500).prop(x).ofInt(0,100).interpolation(0,0,1,1).start(view)

[0048] / / The following code indicates that when the animation element view executes animation 1 (ie Animator1), it is blocked from executing the new animation 2 (ie Animator2). Among them, when Animator1 executes to 400ms, the animation is blocked and animation Animator2 is executed. The motion curve of Animator2 is (0,0,1,1).

[0049] stopAnimator1()

[0050] var preValueX = view.x;

[0051] Animator2.duration(500).prop(x).ofInt(preValueX,300).interpolation(0,0,1,1).

[0052] start(view).

[0053] It can be seen that according to the animation logic of the entry, the corresponding animation effects need to be implemented one by one for the view attributes.

[0054] This will cause the following problems:

[0055] 1. The animation parameters and codes are severely coupled;

[0056] 2. When optimizing animation effects, a lot of code adjustments are required;

[0057] 3. It is difficult to restore the animation, and the animation details need to be constantly polished and optimized;

[0058] 4. There are many animation failures (bugs). When there are too many element parameters, the code is very large and animation jumps and flashes often occur.

[0059] In view of this, the embodiments of the present application provide an animation processing method, apparatus, device and computer program product, which design animation and generate animation code in a visual way, and the animation code output can be used directly. In this way, animation interaction and animation design are completely decoupled, which greatly improves animation development efficiency and animation delivery quality.

[0060] The system architecture of the embodiment of the present application is described in detail below.

[0061] See also Figure 1 , Figure 1 1 is an optional architecture diagram of an animation processing system 100 provided in an embodiment of the present application, the system includes electronic devices, for example, a first device 110 and a second device 120, wherein the first device 110 and the second device 120 are connected to a server 140 via a network 130. It should be noted that the network 130 may be a wide area network or a local area network, or a combination of the two, and the embodiment of the present application does not limit this.

[0062] It should be noted that the network 130 can also be understood as a server gateway, and the embodiments of the present application do not limit this.

[0063] In some embodiments, the first device 110 and the second device 120 can be various types of terminals such as smart phones, laptops, tablet computers, desktop computers, set-top boxes, smart TVs, portable music players, wearable devices, personal digital assistants, dedicated messaging devices, portable gaming devices, etc., but are not limited thereto.

[0064] In some embodiments, the server 140 may be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. The first device 110 may also be a mobile terminal device such as a smart phone, a laptop, a tablet computer, or a desktop computer.

[0065] For example, reference Figure 2 In the business usage process shown, the user can start the visual animation editing application on the first device 110. After starting the visual animation editing application, the user can perform visual animation design in the visual interface to obtain animation code assets. Then, the first device 110 outputs the animation code assets. For example, the first device 110 can upload the animation code assets to the server 140 and publish the animation code assets through the server 140. The second device 120 can be understood as a client. The second device 120 can obtain and parse the animation code assets from the server 140 (i.e., client access). The second device 120 can also add animation triggers to the animation code and trigger the animation playback in the specified scene.

[0066] It should be noted that the animation code resources mentioned in the embodiments of the present application may also be referred to as animation codes or animation code resources, which are equivalent or interchangeable.

[0067] The following will describe the animation processing method provided in the embodiment of the present application in combination with the system architecture provided in the embodiment of the present application.

[0068] It should be noted that the animation processing method provided in the embodiment of the present application includes an animation design process and an animation running process. The animation design process includes Figure 2 The visualization shown involves and outputs animation code assets. The animation process includes Figure 2 Client access and animation trigger adding process shown.

[0069] The animation design process is described in detail below. It should be noted that the animation design process can be executed by the first device. Figure 3 The flowchart of an animation processing method is shown in FIG. 1 . The animation processing method provided in the embodiment of the present application includes steps S310 to S330 .

[0070] S310. The first device responds to one or more first instructions for the first element, wherein the one or more first instructions are used to instruct adding one or more animation frames of the first element.

[0071] It should be noted that the first element may be displayed in the visual editing interface. The first device responds to one or more first instructions for the first element, which may be that the first device responds to one or more first instructions input by the user in the visual editing interface for the first element.

[0072] It should be understood that the visual editing interface can be the interface of a visual animation editing application. For example, the first device can respond to a startup instruction triggered by the user, start the animation editing application, and display the visual editing interface on the display screen of the first device, so that the user can design animations on the visual editing interface.

[0073] In some embodiments, the visual editing interface may include, but is not limited to, an animation preview interface, a parameter configuration interface, an animation timeline display interface, a property display interface, and the like.

[0074] For example, reference Figure 4 In the schematic diagram of the visual editing interface shown, the portion corresponding to box 41 is the animation preview interface, the portion corresponding to box 42 is the parameter configuration interface, the portion corresponding to box 43 is the timeline display interface, and the portion corresponding to box 44 is the property display interface.

[0075] It should be understood that the animation preview interface can preview the designed animation effects; the parameter configuration interface can be used to display and obtain the parameters input by the user; the animation timeline display interface can display the animation timeline (or become the animation timeline), for example, displaying the animation running time through one or more lines; the attribute display interface can be used to display multiple attributes corresponding to the element.

[0076] It should be noted that the first element may be a View element or a virtual object in an animation sequence, and this embodiment of the present application does not impose any limitation on this.

[0077] It should be understood that the View element is a user interface (UI) element in the Android system. For example, a button in the UI can be considered a Botton View, and an image in the UI can be considered an Image View.

[0078] It should be noted that the number of the first elements in the embodiment of the present application may include multiple ones, and the embodiment of the present application does not limit this.

[0079] It should also be noted that the first element may have a variety of attributes, which define the position, size, appearance, behavior, etc. of the first element on the animation display interface when the animation is running.

[0080] Exemplarily, the attributes of the first element may include coordinate position (including X, Y, Z), layout width (width), layout height (height), background color (backgroundColor), transparency (alpha), etc., which is not limited in this embodiment of the present application.

[0081] In an embodiment of the present application, a user enters one or more first instructions for a first element in a visual editing interface, where the first instruction may be an instruction for adding one or more animation frames of the first element. Accordingly, the first device may add one or more animation frames to the first element in response to the one or more first instructions entered by the user.

[0082] It should be noted that the animation frame is understood as a frame in the animation sequence that determines the change of the attribute of the first element.

[0083] It should also be noted that one animation frame can describe or mark an attribute of the first element, or in other words, one animation frame can be associated with an attribute of the first element. Different attributes of the first element can be described or marked using different animation frames.

[0084] Exemplarily, the first element has N attributes, and the user can trigger a first instruction on the first device to add N keyframes to the first element through the first instruction, wherein the N keyframes respectively describe or mark attribute parameters of the N attributes of the first element.

[0085] In some embodiments, the relationship between one or more first instructions and one or more animation frames may be a one-to-one correspondence, where one first instruction corresponds to one animation frame. That is, one first instruction may add one animation frame.

[0086] For example, the first instruction may be a click operation such as a single click or a double click on a certain moment (or a time point) of the animation timeline of the first element. The first device may respond to a click operation such as a single click or a double click on a certain moment (or a time point) of the animation timeline of the first element by the user, and add an animation frame of a certain attribute associated with the moment. Figure 5 In the animation timeline display interface shown, the user can click or double-click at 0.4ms on the animation timeline to add an animation frame at position coordinate X. The diamond “◇” represents an animation frame.

[0087] In some embodiments, the relationship between one or more first instructions and one or more animation frames may also be a one-to-many relationship, and one first instruction may correspond to multiple animation frames. In other words, one first instruction may add multiple animation frames.

[0088] Exemplarily, the first instruction may be a touch operation such as sliding or dragging the first element by the user on the animation preview interface. The first device may respond to the touch operation such as sliding or dragging the first element by the user, and based on the touch operation, add animation frames of a certain attribute at multiple moments (e.g., if the user only drags the first element in the X-axis direction of the animation preview interface, animation frames of the position coordinate X of the first element at multiple moments are added), or animation frames of multiple attributes corresponding to multiple moments (e.g., if the user drags the first element in the X-axis and Y-axis directions of the animation preview interface, animation frames of the position coordinate X of the first element at multiple moments and animation frames of the position coordinate Y at multiple moments are added).

[0089] S320. The first device obtains animation parameters corresponding to each animation frame in one or more animation frames.

[0090] It should be understood that after the first device receives one or more first instructions indicating adding one or more animation frames, it can obtain animation parameters of each of the one or more animation frames.

[0091] It should be noted that the animation parameters of each animation frame can be manually input by the user in the parameter configuration interface, or can be determined based on the user's touch operation in the animation preview interface. The embodiment of the present application does not limit the method of obtaining the animation parameters.

[0092] In some embodiments, the animation parameters include one or more of the following:

[0093] The time (time) at which the current animation frame is located on the animation timeline;

[0094] The target value of the attribute associated with the current animation frame (value);

[0095] The transformation curve (bezier) of the attribute associated with the current animation frame.

[0096] It should be understood that each animation frame can be associated with a certain moment in the animation timeline. The moment can be a moment in the animation timeline. Figure 5 As shown, the moment of the animation frame may be 0.4s in the animation timeline.

[0097] It should also be understood that each animation frame is associated with an attribute of the first element. Figure 5 As shown, the position coordinates X, Y, and Z correspond to an animation frame "◇" respectively.

[0098] It should be noted that the animation parameters of an animation frame may include the target value of the attribute associated with the animation frame, that is, the parameter value that the associated attribute should reach when the animation corresponding to the first element runs to the moment of the current animation frame. Figure 5 As shown, the target values ​​of the animation frames associated with the position coordinates X, Y, and Z of the first element are all 1. That is to say, in the process from the beginning of the animation to 0.4s, the position coordinates X, Y, and Z of the first element move from the initial value to the position of 1 respectively.

[0099] In addition, the transformation curve of the attribute associated with the current animation frame can mark the transformation rule in the process of transforming the parameter value of the attribute to the current target value, including straight line transformation, outer arc transformation, inner arc transformation, etc., which is not limited in the embodiment of the present application. Figure 6 As shown, Bezier can be (0.33, 0, 0.67, 1).

[0100] S330. The first device generates a first animation code for the first element based on animation parameters corresponding to one or more animation frames of the first element, wherein the first animation code is used to achieve an animation effect in which the first element changes in animation line time based on the animation parameters corresponding to the one or more animation frames.

[0101] It should be understood that after obtaining the animation parameters corresponding to each animation frame, the first device can automatically generate the first animation code of the first element based on the animation parameters corresponding to each animation frame. Specifically, the first device can be configured with a functional interface, which can be an interface edited and encapsulated in advance using the animation code to implement animation operation. After obtaining the animation parameters corresponding to each animation frame of the first element, the first device can automatically call the functional interface to generate the corresponding first animation code.

[0102] It should be noted that the first animation code may be a binary animation file. When the animation framework of the client (e.g., the second device) loads the first animation code, the animation effect of the first element may be restored, that is, the animation effect of the first element changing based on the animation parameters corresponding to one or more animation frames in the animation line time may be restored.

[0103] It should also be noted that after obtaining the first animation code, the first device can upload the first animation code to the server and publish it through the server so that the client (such as the second device) can obtain and parse the first animation code to achieve the animation effect of the first element.

[0104] It can be seen that in the animation processing method provided in the embodiment of the present application, the user can trigger the first instruction to add one or more animation frames, and input or indicate the animation parameters of each animation frame, so that the first device can automatically generate the first animation code based on the animation parameters of each animation frame. In this way, the user can design animations in a visual way without editing the animation code, realizing zero-code and zero-bug animation design, greatly improving the animation development efficiency and animation delivery quality.

[0105] In the embodiment of the present application, the first device may obtain the attribute parameters corresponding to each key frame in the one or more key frames in multiple ways in step S320. Two of them are introduced as way 1 and way 2 below.

[0106] Method 1: the animation parameters of each animation frame can be manually input by the user in the parameter configuration interface.

[0107] The visual editing interface includes a parameter configuration interface. In step S320, the first device obtains the animation parameters corresponding to each of the one or more animation frames, which can be implemented in the following manner:

[0108] The first device obtains animation parameters input for each of the one or more animation frames in the parameter configuration interface.

[0109] In mode 1, the first instruction may be an operation such as a single click or a double click at a certain moment (or time point) of the animation timeline of the first element.

[0110] In an embodiment of the present application, after the first device receives a click operation such as a single click or a double click by the user on a certain moment (or time point) of the animation timeline of the first element, a parameter configuration interface may be displayed or popped up.

[0111] For example, reference Figure 5As shown, after the first device receives a single click operation by the user at 0.4s of the animation timeline, it can display a parameter configuration interface on the left side of the animation timeline display interface to allow the user to manually input the attribute target value of the animation frame. Figure 6 As shown, after the first device receives a single click operation from the user at 0.4s on the animation timeline, a transformation curve setting interface may pop up to prompt the user to manually select a transformation curve.

[0112] Method 2: The animation parameters of each animation frame can be determined based on the touch operation of the user on the animation preview interface.

[0113] The visual editing interface includes an animation preview interface. In step S320, the first device obtains animation parameters corresponding to each of the one or more animation frames, which can also be implemented in the following manner:

[0114] Responding to a touch operation on the first element in the animation preview interface; the touch operation is used to control the movement of the first element in the animation preview interface;

[0115] Based on the movement track of the first element in the animation preview interface, an animation parameter corresponding to each animation frame in the one or more animation frames is determined.

[0116] It should be noted that the user's touch operations on the animation preview interface may include dragging, sliding, zooming in, zooming out, flipping, and other operations on the first element.

[0117] It is understandable that the user can control the movement of the first element in the animation preview interface according to the expected animation effect. The movement here includes position movement and posture movement (such as zooming in and out, flipping), etc., and the embodiment of the present application does not limit this.

[0118] In this way, the first device can respond to the user's touch operation on the first element and record the movement trajectory of the first element during the user's dragging or sliding operation on the first element. Further, the first device can automatically add one or more animation frames and animation parameters of each animation frame based on the movement trajectory of the first element in the animation preview interface.

[0119] Exemplarily, the user drags the first element from position a to position b in the animation preview interface, where the coordinates of position a are (Xa, Ya, Za), and the coordinates of position b are (Xb, Yb, Zb). In addition, it takes 0.4 seconds for the user to drag the first element from position a to position b. After the first device detects that the user drags the first element from position a to position b in the animation preview interface, six animation frames and parameters of each animation frame can be added. Specifically, the animation parameters of animation frame 1 include time 0 and position coordinates Xa; the animation parameters of animation frame 2 include time 0 and position coordinates Ya; the animation parameters of animation frame 3 include time 0 and position coordinates Za; the animation parameters of animation 4 include time 0.4 and position coordinates Xb; the animation parameters of animation 5 include time 0.4 and position coordinates Yb; and the animation parameters of animation 6 include time 0.4 and position coordinates Zb.

[0120] It should be noted that the above-mentioned method 1 and method 2 can be implemented in combination. For example, the user adds the target value of the attribute associated with the animation frame through method 2, and adds the moment of the animation frame on the animation timeline through method 1.

[0121] Through the animation processing method provided in the embodiment of the present application, the user can trigger the first instruction to add one or more animation frames, and manually input or add the animation parameters of each animation frame by touch, so that the first device can automatically generate the first animation code based on the animation parameters of each animation frame. In this way, the user can design animation in a visual way without editing the animation code, realizing zero-code and zero-bug animation design, greatly improving the animation development efficiency and animation delivery quality.

[0122] In an embodiment of the present application, the user can also add an event frame to the first element. It can be understood that an event frame refers to a custom event triggered on a specific frame of the animation. Custom events allow specific code to be executed or a function to be called at a specific time point during the animation playback, thereby achieving richer animation interaction effects. For example, a specific action (such as window jitter, pop-up dialog box, etc.) is triggered when the animation moves to the event frame position.

[0123] In the embodiment of the present application, before step S320 generates the first animation code of the first element, the following steps may also be performed:

[0124] The first device responds to a second instruction for the first element, where the second instruction is used to add an event frame of the first element;

[0125] The first device obtains event information corresponding to the event frame;

[0126] Correspondingly, step S320 in which the first device generates the first animation code of the first element can also be implemented in the following manner:

[0127] The first device generates a first animation code for the first element based on event information corresponding to event frames of the first element and animation parameters corresponding to one or more animation frames of the first element. The first animation code is also used to trigger an event associated with the event information when the first element runs to a moment corresponding to the event frame.

[0128] It should be understood that the event frame can be associated with a certain moment in the animation timeline, so as to trigger the associated event when the first element runs to this moment.

[0129] In the embodiment of the present application, the user can click at a certain moment in the animation timeline display interface of the first element to trigger the second instruction. Figure 5 As shown, the user can add event frames at 0s and 0.4s respectively, where Figure 5 The square “□” in the figure represents an event frame.

[0130] It should be noted that a second instruction can be associated with an event frame, that is, a second instruction can trigger the addition of an event frame.

[0131] It should also be noted that the number of the second instructions may include one or more, and accordingly, the event frames of the first element may also include one or more. The first device may generate a first animation code for the first element based on the event information corresponding to the one or more event frames, and the animation parameters corresponding to the one or more animation frames. The embodiment of the present application does not limit the number of the second instructions and the event frames of the first element.

[0132] In an embodiment of the present application, after the first device receives the second instruction, it can obtain event information corresponding to the event frame, and the event information can define the corresponding event. It should be noted that after the first device receives the second instruction to add an event frame, an event information configuration interface can be displayed or popped up. The user can enter or select the event information corresponding to the event frame in the event information configuration interface. In other words, the event information corresponding to the event frame can be manually entered by the user.

[0133] In some embodiments, the event information may include one or more of the following:

[0134] Event name (name);

[0135] Event type (type);

[0136] Event data (value).

[0137] It should be understood that the event name can be used to distinguish different event frames. Event types may include animation start events (used to notify the start of animation), animation end events (used to notify the end of animation), data broadcast events (user notification of animation status), function call events, etc., which are not limited in the embodiments of the present application. Among them, the event type can be used for behavioral decision-making of the first device, that is, the first device can perform corresponding business processing according to the event type when the event frame arrives at the animation timeline. Event data can carry the data content of the event. For example, if the event frame is an animation start event frame, the event data may be text information indicating the start of the animation.

[0138] Furthermore, after the first device obtains the event information corresponding to the event frame, it can generate a first animation code for the first element based on the event information corresponding to the event frames of the first element and the animation parameters corresponding to one or more animation frames of the first element.

[0139] It should be understood that the first device may be configured with a functional interface, which may be an interface edited and encapsulated in advance using animation code to implement animation operation. After obtaining the animation parameters corresponding to each animation frame of the first element and the event information corresponding to each event frame, the first device may automatically call the functional interface to generate the corresponding first animation code.

[0140] It should be noted that the first animation code may be a binary animation file. When the animation framework of the client (e.g., the second device) loads the first animation code, an animation effect can be achieved in which the first element changes in animation line time based on animation parameters corresponding to one or more animation frames, and an event associated with the event information is triggered when the first element runs to the moment corresponding to the event frame.

[0141] It should be noted that the number of first elements can include multiple, that is, there can be many first elements during the animation, and each first element can correspond to an animation timeline. The animation interaction corresponding to multiple first elements will be very complicated, but the essence is that each first element moves to the target value according to the motion curve of each element.

[0142] It should also be noted that after obtaining the first animation code, the first device can upload the first animation code to the server and publish it through the server so that the client (such as the second device) can obtain and parse the first animation code to achieve the animation effect of the first element.

[0143] In summary, in the animation processing method provided in the embodiment of the present application, the user can add one or more key frames (including animation frames and event frames) to the first element, and input or indicate the relevant information of each key frame, so that the first device can automatically generate the first animation code based on the relevant information of each key frame. In this way, the user can design the animation in a visual way without editing the animation code, thus achieving zero-code and zero-bug animation design. At the same time, the later animation interaction method is optimized and revised, and no development participation is required. The animation development efficiency and animation delivery quality are greatly improved.

[0144] The following is a detailed introduction to the animation running process. The animation running process includes Figure 2 The client access and animation trigger adding process shown. It should be noted that the animation design process can be executed by the second device, which can be understood as a client device.

[0145] refer to Figure 7 A schematic diagram of an animation processing method shown Figure 2 The animation processing method provided in the embodiment of the present application includes steps S710 and S720.

[0146] S710. The second device obtains and parses a first animation code of the first element; the first animation code is used to implement an animation effect in which the first element changes on an animation timeline based on animation parameters corresponding to one or more animation frames;

[0147] S720: When a triggering event corresponding to the first animation code is triggered, the second device runs the first animation code.

[0148] It should be understood that the second device can access the server and obtain the first animation code of the first element from the server (i.e., client access). The first animation code is generated by the first device in a visual manner and published on the server by the first device. It should be noted that the manner in which the first device generates the first animation code can refer to the relevant description in the above embodiment, and for the sake of brevity, it will not be repeated here.

[0149] It should be noted that the first animation code can realize the animation effect of the first element changing on the animation timeline based on the animation parameters corresponding to one or more animation frames. In addition, the first animation code can also trigger an event associated with the event information when the first element runs to the moment corresponding to the event frame.

[0150] It should also be noted that before step S720, the second device may also add a corresponding trigger event for the first animation code. The second device may automatically add a corresponding trigger event for the first animation code. For example, the first animation code may be an animation code for a dynamic wallpaper, and the first element corresponding to the first animation code may be a virtual object in the dynamic wallpaper; when the user sets the dynamic wallpaper corresponding to the first animation code, the second device may add a trigger to run the first animation code when entering the desktop or lock screen interface.

[0151] In an embodiment of the present application, the second device can run the first animation code when the trigger event corresponding to the first animation code is triggered, so as to achieve an animation effect in which the first element changes on the animation timeline based on animation parameters corresponding to one or more animation frames.

[0152] In some embodiments, S720, when the triggering event corresponding to the first animation code is triggered, the second device runs the first animation code, which can also be implemented in the following manner:

[0153] The second device determines whether the currently running second animation code has finished running;

[0154] If the currently running second animation code has not finished running, the second device obtains the running time of the current second animation code on the animation timeline;

[0155] The second device starts at the execution time of the first animation code on the animation timeline and executes the first animation code.

[0156] It should be noted that, when the triggering event corresponding to the first animation code is triggered, the second device runs the first animation code, which may block the currently running second animation code.

[0157] It should be noted that the second animation code can be used to achieve an animation effect in which the second element changes on the animation timeline based on the animation parameters corresponding to one or more animation frames. The second element can be the same as the first element associated with the first animation code, or different from the first element associated with the first animation code, and the embodiment of the present application does not limit this.

[0158] It should also be noted that the second animation code can be the same as the first animation code. Through the automatic generation of the visualization method in the above embodiment, the second animation code can also be a purely handwritten code by the animation designer. The embodiment of the present application does not limit this.

[0159] It should be understood that when the second device is running the first animation code, it can determine whether the second animation code currently running has finished running. Exemplarily, the second device can determine whether the event frame of the second animation code has reached the animation end (end) event frame. If it has reached the animation end (end) event frame, it can be considered that the second animation code has finished running. If it has not reached the animation end (end) event frame, it can be considered that the second animation code has not finished running.

[0160] In some embodiments, if the currently running second animation code has not finished running, the second device obtains the running time of the current second animation code on the animation timeline; the second device starts running the first animation code from the running time of the first animation code on the animation timeline.

[0161] It can be understood that if the currently running second animation code has not finished running, when the second device wants to switch to execute the first animation code, it can directly use the animation timeline of the current second animation code to start executing the first animation code at the moment of blocking. The second device may not execute the first animation code before the moment of blocking. In this way, a coherent animation visual effect can be produced visually.

[0162] For example, reference Figure 8 As shown, the animation timelines of the first animation code and the second animation code are both from time 0 to time A. When the currently running second animation code runs to time B, time B is before time A, and the triggering event of the first animation code is triggered. At this time, the running of the second animation code is blocked. The second device can start executing the first animation code at time A on the animation timeline of the first animation code until the end of time B.

[0163] In some embodiments, if the currently running second animation code has finished running, the first animation code is run starting from the start time on the animation timeline of the first animation code.

[0164] It is understandable that if the currently running second animation code has finished running, when the second device switches to execute the first animation code, it can start execution from the start time of the animation timeline of the first animation code.

[0165] For example, reference Fig. 9 As shown, the animation timelines of the first animation code and the second animation code both run from moment 0 to moment A. If the current moment is after moment A, the triggering event of the first animation code is triggered, and the second device can execute the first animation code starting from moment 0 on the animation timeline of the first animation code until moment B.

[0166] In summary, the animation processing method provided in the embodiment of the present application can realize the blocking process of the animation code at any time, and enter the animation timeline of another animation code to execute the animation, which can produce a visually coherent animation visual effect.

[0167] The following describes in detail the animation processing method provided in the embodiment of the present application in combination with the animation design scenario of the dynamic wallpaper.

[0168] refer to Fig.10 The interactive scene of the dynamic wallpaper shown in the figure, the animation effect of the dynamic wallpaper needs to interact in the three interfaces of the screen off interface (AOD), the lock screen interface (LOCK), and the desktop (Launher). Fig.10 As shown, there are five animation interaction modes. The first interaction mode is that when the screen off interface (AOD) switches to the lock screen interface (LOCK), the animation of the dynamic wallpaper starts to execute; the second interaction mode is that when the lock screen interface (LOCK) switches to the screen off interface (AOD), the animation of the animated wallpaper stops executing; the third interaction mode is that when the screen off interface (AOD) switches to the desktop (Launher), the animation of the dynamic wallpaper of the desktop starts to execute; the fourth interaction mode is that when the lock screen interface (LOCK) switches to the desktop (Launher), the animation of the dynamic wallpaper of the lock screen interface (LOCK) is blocked, and the animation of the dynamic wallpaper of the desktop (Launher) starts to execute. The fifth interaction mode is that when the desktop (Launher) switches to the lock screen interface (LOCK), the animation of the dynamic wallpaper of the desktop (Launher) is blocked, and the animation of the dynamic wallpaper of the lock screen interface (LOCK) starts to execute.

[0169] In the animation design scenario of dynamic wallpaper, in order to achieve the coherent animation visual effects of dynamic wallpaper in the three interfaces of the screen off interface (AOD), lock screen interface (LOCK), and desktop (Launher), refer to Fig.11 The animation interaction data diagram shown in the figure requires the animation designer to Fig.11 The animation interaction data in is written into the code to realize the animation interaction of View objects.

[0170] For example, an animator needs to write the following code:

[0171] starts=floatArrayOf(0.8f,deskMatrixParam!!.scale,0f,1f,1f,0f,deskMatrixParam!!.transX,deskMatrixParam!!.transY)

[0172] ends=floatArrayOf(1.0f,lockMatrixParam!!.scale,1f,1f,1f,1f,lockMatrixParam!!.transX,lockMatrixParam!!.transY)

[0173] durations=floatArrayOf(100f,100f,100f,1f,1f,100f,100f,100f)

[0174] springResponse=doubleArrayOf(0.6,0.6,0.5,0.0,0.0,0.2,0.6,0.6)

[0175] springBounce=doubleArrayOf(0.15,0.15,0.0,0.0,0.0,0.0,0.15,0.15)

[0176] Understandably, a lot of such animation codes need to be written during the entire demand development process to achieve the above interaction.

[0177] In the visual animation design solution provided in the embodiment of the present application, the user only needs to edit the corresponding keyframes in the visual editor (i.e., the visual editing application in the above embodiment) to complete the interactive design of the animation. Fig.12 As shown in the business process diagram, the business process of the embodiment of the present application may include visual design, output code resources, client access, adding animation triggers, and blocking the animation running process.

[0178] Specifically, in Figures 4 to 6 In the visual editing interface shown, the user can edit the key frames (including animation frames and event frames) of the View object (ie, the first element in the above embodiment) in the visual editing interface to complete the interactive design of the animation.

[0179] The configurable information of the animation frame may include:

[0180] value: target value

[0181] time: frame time

[0182] bezier: frame animation curve.

[0183] The configurable information of the event frame can include:

[0184] name: event frame name

[0185] type: event type (used to make behavioral decisions when events are distributed)

[0186] value: event data (carries the data content of the event when the event is distributed).

[0187] For example, reference Figure 4 As shown, an animation frame is played at 0.4s on the timeline of position x. The animation parameters of this animation frame include the target value, time, and animation motion curve. When the animation is played, the View object will move according to these data.

[0188] It should be noted that if there are many Views, there will be many timelines, and the final animation interaction will be very complicated, but the essence is that the animation moves to the target value according to a certain motion curve.

[0189] It should be understood that after the animation design is completed, the animation code assets can be output. Fig.12 As shown in the business process diagram, when using it, the client only needs to access the animation code file to trigger the animation playback in the specified scene.

[0190] refer to Fig.13 The client parsing principle diagram is shown. After the animation code asset is loaded and parsed by the client, it enters the ready state and waits for the animation to be triggered. After the animation is triggered, the animation frame starts to execute, making the view attribute move. Specifically, after the animation animator1 is triggered, the animation frame of animator1 starts to execute, and accordingly, the view attribute moves.

[0191] During the motion of animator1, it is blocked and needs to switch to animator2. At this time, it detects whether animator1 has ended (that is, whether the event frame has ended). If it has not ended, when switching to animator2, it directly uses the timeline of animator1 to move to the View property value of animator2 (that is, if each ends, it continues the current animation and moves to the target property value of animator2). If it has ended, it starts executing animator2 from the start time of animator2.

[0192] It should be noted that the embodiment of the present application can be combined with the state control of the visual animation editor + key frame to achieve more animation effects. For example, when the animation moves to the specified event frame position, an action (such as window jitter) is triggered. The whole process becomes a visual description language, and the relevant actions can be completed without code.

[0193] Through the embodiments of the present application, the movement of the entire animation can block the switching process. Through a visual way, after the designer designs it, it can be directly output and used, and a blockable animation interaction method can be implemented with 0 code and 0 bugs. The animation interaction and design are completely decoupled, and the subsequent animation interaction method can be optimized and revised without the participation of developers. The efficiency of animation development and the quality of animation delivery are greatly improved. It is estimated that the development cycle will be improved by more than 60%. For example, the animation development of the inspiration theme in the example above takes 100 days / man-hours, but using a visual animation interaction solution, it only takes 40 days to complete.

[0194] Through the visual animation editing solution, combined with the attribute status of the event frame, the visual blockable design of animation interaction is realized, and the binary animation file is output. The animation file is loaded in the animation framework of the client, the animation effect is restored, and finally the entire blockable interaction solution achieves 0 code output. Greatly improve the development efficiency of animation.

[0195] This solution is to realize the movement of objects by adding attribute keyframes on the animation timeline in the self-developed visual UI animation editor. During the movement of the object, it can be blocked at any time and enter the timeline of another animation to execute the animation, which can produce a coherent animation visual effect visually. At present, to achieve this effect, it is necessary to achieve such animation effects by controlling the attribute parameters of the object through pure handwritten code, and this solution can be implemented by the designer through the visual UI animation editor, without manual implementation through code. The existing AE animation editing and Unity animation editing both support the same frame animation editing. However, AE is a post-processing special effect animation editor, which is mainly used for film and television post-processing. The edited special effects cannot be rendered on mobile phones in real time. Unity is a 3D rendering engine. The Unity editor can be used to perform animation editing of 3D objects. Its animation editing needs to cooperate with code scripts for interactive processing of events, and it is necessary to develop and participate in the implementation of animation interaction. This application sets up a set of blockable animation design schemes, and the designer can design and complete the blockable animation behavior by himself, which greatly improves the work efficiency in animation design, animation restoration, animation detail polishing, and subsequent maintenance.

[0196] An embodiment of the present application further provides an animation processing device, which is applied to a first device, referring to Fig.14 As shown, the animation processing device 1400 includes:

[0197] The instruction response unit 1410 is configured to respond to one or more first instructions for a first element, wherein the one or more first instructions are used to instruct to add one or more animation frames of the first element;

[0198] The parameter acquisition unit 1420 is configured to acquire animation parameters corresponding to each animation frame in the one or more animation frames;

[0199] The code generation unit 1430 is configured to generate a first animation code for the first element based on animation parameters corresponding to one or more animation frames of the first element, wherein the first animation code is used to achieve an animation effect in which the first element changes based on the animation parameters corresponding to the one or more animation frames in animation line time.

[0200] In some embodiments, the animation parameters include one or more of the following:

[0201] The moment at which the animation frame is located on the animation timeline;

[0202] a target value of a property associated with the animation frame;

[0203] The transformation curve of the attribute associated with the animation frame.

[0204] In some embodiments, the visual editing interface includes a parameter configuration interface, and the parameter acquisition unit 1420 is further configured to acquire the animation parameters input in the parameter configuration interface for each animation frame in the one or more key frames.

[0205] In some embodiments, the visual editing interface includes an animation preview interface, and the parameter acquisition unit 1420 is further configured to respond to a touch operation on the first element in the animation preview interface; the touch operation is used to control the movement of the first element in the animation preview interface; based on the movement trajectory of the first element in the animation preview interface, determine the animation parameters corresponding to each animation frame in the one or more animation frames.

[0206] In some embodiments, the instruction response unit 1410 is further configured to respond to a second instruction for the first element, where the second instruction is used to add an event frame of the first element;

[0207] The parameter acquisition unit 1420 is further configured to acquire event information corresponding to the event frame;

[0208] The code generation unit 1430 is further configured to generate a first animation code for the first element based on event information corresponding to the event frames of the first element and animation parameters corresponding to one or more animation frames of the first element. The first animation code is also used to trigger an event associated with the event information when the first element runs to a moment corresponding to the event frame.

[0209] In some embodiments, the event information includes one or more of the following:

[0210] Event name;

[0211] Event type;

[0212] Event data.

[0213] An embodiment of the present application also provides an animation processing device, which is applied to a second device. Fig.15 As shown, the animation processing device 1500 includes:

[0214] The parsing unit 1510 is configured to obtain and parse a first animation code of a first element; the first animation code is used to realize an animation effect of the first element changing on an animation timeline based on animation parameters corresponding to the one or more animation frames;

[0215] The animation running unit 1510 is configured to run the first animation code when a triggering event corresponding to the first animation code is triggered.

[0216] In some embodiments, the animation running unit 1510 is further configured to determine whether the currently running second animation code has finished running; if the currently running second animation code has not finished running, obtain the current running time of the second animation code on the animation timeline; and run the first animation code starting from the running time of the first animation code on the animation timeline.

[0217] In some embodiments, the animation running unit 1510 is further configured to run the first animation code starting from the start time on the animation timeline of the first animation code if the currently running second animation code has finished running.

[0218] Those skilled in the art should understand that the relevant description of the above-mentioned animation processing device in the embodiment of the present application can be understood by referring to the relevant description of the animation processing method in the embodiment of the present application.

[0219] Fig.16 1 is a schematic structural diagram of a computer device provided in an embodiment of the present application. The computer device may be the first device or the second device in the above embodiment. Fig.16 The computer device 1600 shown includes a processor 1610, which can call and run a computer program from a memory to implement the method in the embodiment of the present application.

[0220] Alternatively, if Fig.16 As shown, the computer device 1600 may further include a memory 1620. The processor 1610 may call and run a computer program from the memory 1620 to implement the method in the embodiment of the present application.

[0221] The memory 1620 may be a separate device independent of the processor 1610 , or may be integrated into the processor 1610 .

[0222] Alternatively, if Fig.16 As shown, the computer device 1600 may further include a transceiver 1630 , and the processor 1610 may control the transceiver 1630 to communicate with other devices, specifically, to send information or data to other devices, or to receive information or data sent by other devices.

[0223] The transceiver 1630 may include a transmitter and a receiver. The transceiver 1630 may further include an antenna, and the number of antennas may be one or more.

[0224] The present application also provides a computer storage medium, specifically a computer-readable storage medium, on which computer instructions are stored. When the computer storage medium is located in a communication device, the computer instructions are executed by a processor to implement any step of the above animation processing method of the present application.

[0225] An embodiment of the present application also provides a computer program product, including computer program instructions.

[0226] The computer program product can be applied to the computer device in the embodiments of the present application, and the computer program instructions enable the computer to execute the corresponding processes implemented by the communication device in the various methods of the embodiments of the present application. For the sake of brevity, they are not repeated here.

[0227] In the several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. The device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as: multiple units or components can be combined, or can be integrated into another system, or some features can be ignored or not executed. In addition, the coupling, direct coupling, or communication connection between the components shown or discussed can be through some interfaces, and the indirect coupling or communication connection of the devices or units can be electrical, mechanical or other forms.

[0228] The units described above as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units; some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.

[0229] In addition, all functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may be separately configured as a unit, or at least two units may be integrated into one unit; the above-mentioned integrated units may be implemented in the form of hardware or in the form of hardware plus software functional units.

[0230] A person of ordinary skill in the art can understand that: all or part of the steps of implementing the above-mentioned method embodiment can be completed by hardware related to program instructions, and the aforementioned program can be stored in a computer-readable storage medium, which, when executed, executes the steps of the above-mentioned method embodiment; and the aforementioned storage medium includes: various media that can store program codes, such as mobile storage devices, ROM, RAM, disks or optical disks.

[0231] Alternatively, if the above-mentioned integrated unit of the present application is implemented in the form of a software function module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the embodiment of the present application can be essentially or partly embodied in the form of a software product that contributes to the prior art. The computer software product is stored in a storage medium, including several instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the methods described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as mobile storage devices, ROM, RAM, magnetic disks or optical disks.

[0232] It should be noted that the technical solutions described in the embodiments of the present application can be combined arbitrarily without conflict.

[0233] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. An animation processing method, characterized in that: Applied to a first device, the method includes: In response to one or more first instructions for a first element, the one or more first instructions are used to instruct adding one or more animation frames of the first element; Obtaining animation parameters corresponding to each animation frame in the one or more animation frames; Based on the animation parameters corresponding to one or more animation frames of the first element, a first animation code for the first element is generated, and the first animation code is used to achieve an animation effect in which the first element changes based on the animation parameters corresponding to the one or more animation frames in animation line time.

2. The method according to claim 1, characterized in that The animation parameters include one or more of the following: The moment at which the animation frame is located on the animation timeline; a target value of a property associated with the animation frame; The transformation curve of the attribute associated with the animation frame.

3. The method according to claim 1, characterized in that The obtaining of the animation parameters corresponding to each of the one or more animation frames includes: Animation parameters inputted in the parameter configuration interface for each of the one or more animation frames are obtained.

4. The method according to claim 1, characterized in that: The obtaining of the animation parameters corresponding to each of the one or more animation frames includes: Responding to a touch operation on the first element in the animation preview interface; the touch operation is used to control the first element to move in the animation preview interface; Based on the movement track of the first element in the animation preview interface, an animation parameter corresponding to each of the one or more animation frames is determined.

5. The method according to claim 1, characterized in that Before generating the first animation code of the first element, the method further includes: In response to a second instruction for the first element, the second instruction is used to add an event frame of the first element; Obtaining event information corresponding to the event frame; The generating of the first animation code of the first element further includes: Based on the event information corresponding to the event frames of the first element and the animation parameters corresponding to one or more animation frames of the first element, a first animation code for the first element is generated. The first animation code is also used to trigger an event associated with the event information when the first element runs to a moment corresponding to the event frame.

6. The method according to claim 5, characterized in that The event information includes one or more of the following: Event name; Event type; Event data.

7. An animation processing method, characterized in that: Applied to the second device, the method includes: Obtaining and parsing a first animation code of a first element; the first animation code is used to realize an animation effect in which the first element changes on an animation timeline based on animation parameters corresponding to one or more animation frames; When a triggering event corresponding to the first animation code is triggered, the first animation code is executed.

8. The method according to claim 7, characterized in that The step of running the first animation code when the triggering event corresponding to the first animation code is triggered includes: Determine whether the second animation code currently running has finished running; If the currently running second animation code has not finished running, then obtaining the current running time of the second animation code on the animation timeline; Starting from the running time of the first animation code on the animation timeline, the first animation code is run.

9. The method according to claim 8, characterized in that Also includes: If the currently running second animation code has finished running, then the first animation code is run starting from the start time on the animation timeline of the first animation code.

10. An animation processing device, characterized in that: The device comprises: An instruction response unit, configured to respond to one or more first instructions input for a first element, wherein the one or more first instructions are used to instruct to add one or more animation frames of the first element; A parameter acquisition unit, configured to acquire animation parameters corresponding to each of the one or more animation frames; The code generation unit is configured to generate a first animation code for the first element based on animation parameters corresponding to one or more animation frames of the first element, wherein the first animation code is used to achieve an animation effect in which the first element changes based on the animation parameters corresponding to the one or more animation frames in animation line time.

11. An animation processing device, characterized in that: The device comprises: A parsing unit configured to obtain and parse a first animation code of a first element; the first animation code is used to realize an animation effect in which the first element changes on an animation timeline based on animation parameters corresponding to one or more animation frames; The animation running unit is configured to run the first animation code when a triggering event corresponding to the first animation code is triggered.

12. A computer device, characterized in that: include: Memory for storing computer programs; A processor, connected to the memory, and configured to call and run the computer program from the memory to implement the method according to any one of claims 1 to 6, or the method according to any one of claims 7 to 9; A transceiver is used to send and receive information when sending and receiving information with other devices.

13. A computer program product, characterized in that The method comprises computer program instructions, which, when executed by a processor, implement the method according to any one of claims 1 to 6, or the method according to any one of claims 7 to 9.

Images