Animation orchestration methods, devices, and storage media based on exportable configuration objects
By integrating and encapsulating the stage node attributes of animation elements into singly linked list nodes, an animation choreography object structure is constructed, and the animation renderer is used to handle state transitions. This solves the problem of low rendering efficiency caused by scattered animation state management, and achieves more efficient animation choreography and rendering.
Patent Information
- Application Number
- CN202511950511.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2025-12-23
- Publication Date
- 2026-03-06
- Estimated Expiration
- 2045-12-23
AI Technical Summary
In existing technologies, Cascading Style Sheets (CSS) animation and web animation programming interface solutions require manually writing a large amount of style code and timing control logic, resulting in fragmented animation state management and low rendering efficiency.
By responding to orchestration operations, the stage requirements of animation elements are parsed, and a set of stage node attributes for animation elements is generated and encapsulated as a singly linked list node. An array containing canvas information is defined, an animation orchestration object structure is constructed, element stage node attributes are modified, a stage linked list is constructed, the configuration file is initialized using the animation renderer, an animation container is generated, and state transition processing is performed.
It improves the efficiency of animation choreography, the synchronization accuracy of element stages, and the reusability of configuration files, thus solving the problem of low animation rendering efficiency.
Smart Images

Figure CN121388321B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of animation rendering technology, and in particular to an animation arrangement method, device and storage medium based on an exportable configuration object. Background Technology
[0002] In modern web application development, staged animations have become a key technology for enhancing user experience, widely used in scenarios such as function guidance, operation step demonstrations, form flow guidance, and decorative animations. Among related technologies, Cascading Style Sheets (CSS) animation and web animation programming interface (API) solutions require manually writing a large amount of style code and timing control logic. When the number of animation elements increases or the logic becomes more complex, the animation state management of each solution is scattered across different code modules, easily leading to inconsistencies in state and consequently, low animation rendering efficiency.
[0003] The above content is only used to help understand the technical solution of this application and does not represent an admission that the above content is prior art. Summary of the Invention
[0004] The main purpose of this application is to provide an animation orchestration method, device, and storage medium based on an exportable configuration object, aiming to solve the technical problem of low animation rendering efficiency.
[0005] To achieve the above objectives, this application proposes an animation arrangement method based on an exportable configuration object, the method comprising:
[0006] In response to the arrangement operation, the stage requirements of the animation element corresponding to the arrangement operation are parsed, and the stage node attribute set of the animation element is generated.
[0007] The animation element stage node attribute set is encapsulated as a singly linked list node, and an array containing canvas information and the singly linked list node is defined according to the preset arrangement specification to obtain the animation arrangement object structure.
[0008] Based on the animation arrangement object structure and the new element addition operation, the attributes of each element stage node are modified, a stage linked list is constructed, and the configuration file is obtained.
[0009] The animation renderer initializes the carrier unit corresponding to the configuration file, obtains the animation container, and constructs the document object model element corresponding to the animation container.
[0010] The control interface of the animation renderer is invoked, and the document object model elements are processed in the animation container according to the configured stage rules to obtain the target choreographed animation.
[0011] In one embodiment, in response to the arrangement operation in the visual editor, the full-dimensional configuration elements of the animation element corresponding to the arrangement operation at each stage are parsed out;
[0012] Each requirement dimension in the full-dimensional configuration elements is mapped to the attribute item corresponding to the stage node of the animation element, so as to obtain the mapping relationship between each requirement dimension and the corresponding attribute item.
[0013] In accordance with the specifications for the structure of animation choreography objects, and combining the mapping relationship between each requirement dimension and its corresponding attribute item, the attribute values corresponding to each mapping are integrated and encapsulated to generate the attribute set of the animation element stage node.
[0014] In one embodiment, the configuration information in the animation element stage node attribute set is integrated and encapsulated into an independent data unit with singly linked list node characteristics, and an association identifier pointing to the next stage is added to each animation element stage node attribute set for stage connection, so as to obtain a singly linked list node of a single animation element stage.
[0015] According to the preset execution order of the animation stages, the singly linked list nodes of the individual animation element stages are sequentially placed into a preset data container to obtain a node array;
[0016] Extract the canvas information from the animation configuration requirements, define a unified data object framework for the canvas information and the node array, and integrate and encapsulate the defined canvas information and node array according to a preset structure to obtain the animation choreography object structure.
[0017] In one embodiment, in response to the addition operation of the new element, the stage requirements corresponding to the new element are parsed to obtain a new set of animation element stage node attributes;
[0018] Based on the addition operation of the new element and the new animation element stage node attribute set, modify the attribute information of the existing element stage nodes, and output the updated animation element stage node set.
[0019] Based on the updated set of animation element stage nodes, the relationship between nodes is determined according to the connection logic of each element stage to complete the construction of the stage linked list and obtain the animation arrangement update object.
[0020] The animation arrangement update object is serialized, and its data format is organized according to the preset configuration file specification. The configuration file is then output.
[0021] In one embodiment, the animation renderer parses the canvas information and the stage node attribute information of each element in the configuration file to form the basic canvas information and the element attribute details.
[0022] Based on the canvas basic information, create the animation container that meets the rendering requirements, establish the association between the animation container and the element attribute details, and generate the animation container with bound element attribute details;
[0023] Based on the attribute details of each element associated with the animation container, document object model elements with corresponding configurations are constructed one by one.
[0024] In one embodiment, the control interface of the animation renderer is called to read the stage delay duration, duration, connection logic, transition rhythm rules, and initial attributes of the document object model elements corresponding to the configuration file, and to generate the timing execution plan and state transition rule set for each element.
[0025] According to the time-series execution plan, the attribute changes of each of the document object model elements are triggered sequentially, and the smooth transition between stages is performed according to the state transition rule set to generate animation instances;
[0026] Verify the timing synchronization and transition effect consistency of the animation instance until all elements complete the state transition of all stages according to the rules, and output the target choreography animation.
[0027] In one embodiment, the change parameters corresponding to the document object model elements in the time-series execution plan and the state transition rule set are parsed to generate an element-specific execution and transition configuration list;
[0028] According to the timing of the trigger, attribute change items and transition parameters in the element-specific execution and transition configuration list, the attribute update and stage transition of each document object model element are started in sequence, and the dynamic state of each element during the transition process is recorded and integrated to obtain the element state set.
[0029] Verify the transition progress and attribute change effects of each element in the element state set. After all elements have completed the attribute update and smooth transition of the current stage according to the state transition rule set, integrate them to form a coherent dynamic presentation effect and output the animation instance of the initial playback state.
[0030] In one embodiment, based on the element state change log and timing execution record recorded during the target animation arrangement and playback process, the actual effect information of each document object model element is collected;
[0031] The actual effect information is compared with the preset timing parameters and transition effect standards in the stage rules. The consistency of the state changes of each element, whether the deviation of timing synchronization is within the allowable threshold, and whether the transition effect meets expectations are analyzed. Abnormal feedback items are marked and corresponding difference descriptions are added. An animation feedback analysis report is output.
[0032] The normal execution results, abnormal feedback items, and difference descriptions in the animation feedback analysis report are encapsulated according to the feedback information structure that the animation arrangement system can recognize, and target feedback information is generated to optimize the animation arrangement configuration quality.
[0033] In addition, to achieve the above objectives, this application also proposes an animation choreography device, the device comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, the computer program being configured to implement the steps of the animation choreography method based on a derivative configuration object as described above.
[0034] In addition, to achieve the above objectives, this application also proposes a storage medium, which is a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, it implements the steps of the animation arrangement method based on an exportable configuration object as described above.
[0035] This application provides an animation orchestration method based on an exportable configuration object. The method includes parsing the stage requirements of corresponding animation elements in response to orchestration operations to generate a set of animation element stage node attributes. This attribute set is then encapsulated as a singly linked list node, and an array containing canvas information and the singly linked list node is defined to obtain an animation orchestration object structure. Based on this animation orchestration object structure and new element addition operations, the attributes of each element's stage node are modified, and the stage linked list is constructed to obtain a configuration file. An animation renderer initializes the corresponding carrier unit of the configuration file to obtain an animation container and constructs its corresponding document object model element. Finally, the animation renderer's control interface is called to perform state transition processing on the document object model element in the animation container according to the configured stage rules to obtain the target orchestration animation. This method solves the technical problems of scattered element stage configurations, lack of stage linked list management, cumbersome orchestration processes, insufficient element stage synchronization, and low configuration reusability caused by traditional animation orchestration. It improves the process efficiency of animation orchestration, the synchronization accuracy of element stages, and the reusability of configuration files.
[0036] In summary, this application generates a set of animation element stage node attributes by responding to the requirements of the orchestration operation parsing, encapsulates it as a singly linked list node, and combines it with canvas information to form an animation orchestration object structure. Based on this structure, the element attributes are modified, a stage linked list is constructed to obtain the configuration file, the animation container and document object model elements are obtained after the animation renderer is initialized, and the renderer interface is called to process the elements according to the stage rules to generate the target animation. This solves the technical problem of low animation rendering efficiency, improves the smoothness of the animation orchestration process, the synchronization accuracy of element stages, and the reusability of the configuration file. Attached Figure Description
[0037] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.
[0038] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0039] Figure 1 This is a flowchart illustrating the first embodiment of the animation arrangement method based on an exportable configuration object according to this application;
[0040] Figure 2 This is a flowchart illustrating the eighth embodiment of the animation arrangement method based on an exportable configuration object in this application;
[0041] Figure 3 This is a flowchart of the animation playback process for this application;
[0042] Figure 4 This is a visual interface diagram of this application;
[0043] Figure 5 This is a schematic diagram of the animation editing equipment used in this application.
[0044] The purpose, features, and advantages of this application will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation
[0045] It should be understood that the specific embodiments described herein are merely illustrative of the technical solutions of this application and are not intended to limit this application.
[0046] In related technologies, Cascading Style Sheets (CSS) animation and web animation programming interface solutions require manually writing a large amount of style code and timing control logic. When the number of animation elements increases or the logic becomes more complex, the animation state management of each solution is scattered in different code modules, which can easily lead to inconsistent states and thus low animation rendering efficiency.
[0047] This application provides a solution: First, in response to an orchestration operation, the phased requirements of the animation elements corresponding to the orchestration operation are parsed, and an attribute set of animation element phase nodes is generated. Then, the attribute set of animation element phase nodes is encapsulated as a singly linked list node, and an array containing canvas information and the singly linked list node is defined according to a preset orchestration specification to obtain the animation orchestration object structure. Next, based on the animation orchestration object structure and the new element addition operation, the attributes of each element phase node are modified, and a phase linked list is constructed to obtain a configuration file. Then, the carrier unit corresponding to the configuration file is initialized through the animation renderer to obtain an animation container, and the document object model element corresponding to the animation container is constructed. Finally, the control interface of the animation renderer is called, and the document object model element is processed in the animation container according to the configured phase rules to obtain the target orchestration animation.
[0048] It should be noted that the executing entity in this embodiment can be a computing service device with data processing, network communication, and program execution functions, such as a tablet computer, personal computer, or mobile phone, or an electronic device or animation editing device capable of performing the above functions. The following description uses an animation editing device as an example to illustrate this embodiment and the subsequent embodiments.
[0049] To better understand the technical solution of this application, a detailed description will be provided below in conjunction with the accompanying drawings and specific implementation methods.
[0050] This application provides an animation arrangement method based on an exportable configuration object, referring to... Figure 1 , Figure 1 This is a flowchart illustrating the first embodiment of the animation arrangement method based on an exportable configuration object according to this application.
[0051] In this embodiment, the animation arrangement method based on an exportable configuration object includes steps S10 to S50:
[0052] Step S10: In response to the arrangement operation, parse the stage requirements of the animation element corresponding to the arrangement operation, and integrate to generate the stage node attribute set of the animation element.
[0053] In this embodiment, the choreography operation refers to operations such as configuring stages, adjusting the order, and setting attributes for animation elements. Animation elements refer to various visual presentation units participating in animation choreography. Stage-based requirements refer to the attribute configurations, presentation rules, and connection requirements corresponding to different display stages of animation elements. The animation element stage node attribute set refers to a set of attributes that integrates the requirements of each stage of the animation element, including core configuration information such as identifiers, content, styles, and timing.
[0054] As an optional implementation, in response to the orchestration operation, the system first comprehensively collects the unique identifier requirements, content presentation format, style parameters, spatial state, timing rules, transition rhythm, and stage connection logic of the animation elements corresponding to the operation at all stages. The collected stage requirements are then deduplicated, filtered, and categorized to determine the relationships and priorities between different stage requirements. Next, according to a preset attribute set structure specification, each categorized dimension requirement is mapped to its corresponding attribute item, missing default configuration parameters for each attribute item are supplemented, and the logical consistency and compatibility between attribute items are verified. This process integrates these into a complete set of animation element stage node attributes. This method can cover all stage requirements at once, ensuring the completeness of the attribute set and the coherence of configurations across stages, and can quickly generate comprehensive attribute configurations.
[0055] As an alternative implementation, upon responding to an orchestration operation, an authorization verification process is initiated to generate the stage node attribute set. This requires the operating entity to submit authorization credentials corresponding to the orchestration requirements and a compliance statement. The validity of the credentials and whether the requirements fall within the authorized scope are verified. Only after successful verification is the parsing of the requirement dimensions and mapping of attribute items permitted. When generating the animation element stage node attribute set, an authorization credential summary and generation timestamp are embedded. All subsequent operations based on this attribute set must be associated with this authorization information. Parsing operations initiated by unauthorized entities will be directly intercepted and an authorization deficiency warning will be returned. This method, by binding pre-parsing authorization for requirement analysis with attribute set authorization, is suitable for scenarios with strict compliance requirements regarding the source of orchestration requirements.
[0056] Step S20: Encapsulate the animation element stage node attribute set into a singly linked list node, and define an array containing canvas information and the singly linked list node according to the preset arrangement specification to obtain the animation arrangement object structure.
[0057] In this embodiment, a singly linked list node is an independent data unit that carries the attribute set and contains stage connection identifiers. Canvas information includes basic configuration information such as size, background, and layer required for animation display. The array of singly linked list nodes is an ordered data container that stores all singly linked list nodes in a preset order. The animation choreography object structure is a unified data framework that integrates canvas information and the singly linked list node array to support subsequent animation choreography and rendering. The preset choreography specification refers to the standardized rules that constrain node encapsulation, array construction, and object structure integration.
[0058] As an optional implementation, all configuration parameters in the attribute sets of animation element stage nodes are extracted. A unique identifier and a field connecting each attribute set to the next stage are assigned, and the entire set is encapsulated into a singly linked list node according to the requirements of a singly linked list structure. Based on the stage execution order specified in the preset orchestration specifications, all nodes are sequentially sorted into an ordered array according to the animation's stage flow from beginning to end, extracting complete canvas basic configuration data. The canvas information is precisely mapped and integrated with the ordered node array according to the field format defined in the preset specifications, ensuring no data omissions and accurate field matching, resulting in the animation orchestration object structure. This method ensures that the node order of the object structure is highly consistent with the animation execution logic, and that the attribute configuration is complete and without omissions, making it suitable for scenarios with stringent requirements for animation orchestration precision.
[0059] As an alternative implementation, core configuration parameters are filtered from the attribute sets of animation element stage nodes, and simplified connection fields are configured for each filtered attribute set. These are lightweightly encapsulated into singly linked list nodes according to a singly linked list structure. Based on the element priority rules in the preset choreography specifications, all nodes are sorted from high to low according to the importance of the elements in the animation, forming a priority-ordered array. Core basic configuration data is extracted from the canvas information, and the core canvas information and the priority-ordered node array are quickly integrated according to the simplified field format defined in the preset specifications to obtain the animation choreography object structure. This method can significantly reduce the amount of object structure data, reduce storage usage, and improve the response speed of subsequent processing, making it suitable for scenarios with high requirements for animation choreography efficiency.
[0060] As an alternative implementation, before encapsulating a singly linked list node, a node encapsulation authorization verification is triggered. This verifies the node construction authorization level of the operating entity. Level 1 authorization allows encapsulating nodes containing core parameters, while level 2 authorization only allows encapsulating nodes with basic parameters. After verification, encapsulating parameters are extracted from the attribute set according to the authorization level. During the encapsulation process, a digital signature is added to the node, and the authorization entity information and authorization validity period are associated. The generated singly linked list node can only be recognized by animation orchestration systems with corresponding decryption permissions. Unauthorized systems cannot parse the attribute configuration within the node. Simultaneously, a node encapsulation authorization log is recorded, including information such as the authorization entity, encapsulation time, and node identifier. This method, through hierarchical authorization levels and encrypted node signatures, achieves precise permission control for the encapsulation and use of singly linked list nodes, and is suitable for animation orchestration scenarios with multi-level permission collaboration.
[0061] Step S30: Based on the animation arrangement object structure and the new element addition operation, modify the attributes of each element stage node, construct a stage linked list, and organize the configuration file.
[0062] In this embodiment, the "adding a new element" operation refers to the operation of adding a new visual unit in the animation choreography. Modifying the attribute of an element stage node involves adjusting and improving the configuration information such as the stage identifier, content, and style of each stage of the animation element. Constructing the stage linked list is the process of establishing relationships between nodes according to the element stage connection logic. The configuration file is a standardized data file that records complete configuration information for the animation choreography and can be used for storage, transmission, or rendering.
[0063] As an optional implementation, the phased requirements corresponding to the addition of new elements are first analyzed to generate a set of phase node attributes for the new elements. Then, the phase node attributes of all existing elements in the animation choreography object structure are extracted and merged with the new element attribute set. The compatibility and logical consistency of each element's phase node attributes are then verified one by one. Conflicting attribute items are modified and missing attribute values are supplemented based on the verification results. Subsequently, according to the timing rules and phase connection logic of each element, association identifiers pointing to the preceding and following phases are added to each node, constructing a complete global phase linked list. Finally, the canvas information, all modified element phase node attributes, and the global phase linked list are serialized in a unified data format and organized into a configuration file. This method can complete the unified verification of all element attributes and linked list construction in one go, ensuring the overall consistency of the configuration file.
[0064] As an alternative implementation, canvas information and the original stage linked list structure are first extracted from the animation choreography object structure. The stage requirements corresponding to the new element addition operation are parsed, and a new element stage node attribute set is generated. This new element stage node attribute set is then encapsulated into a new singly linked list node. The insertion position of the new element in the original stage linked list is determined according to the timing rules. The association identifiers of nodes before and after the insertion position are modified, and the new node is added to the original linked list to complete the incremental construction of the stage linked list. Simultaneously, the compatibility of the new node attributes with those of adjacent nodes is verified, and conflicting attribute items of the new node or adjacent nodes are modified accordingly. After the new element node is added, the updated stage linked list, all element stage node attributes, and canvas information are gradually integrated according to preset specifications. The required format identifiers and verification information for the configuration file are supplemented, ultimately forming a standardized configuration file. This method uses incremental processing logic, enabling rapid addition of new elements and updating of the configuration file, and is suitable for scenarios involving frequent and small-scale addition of new elements.
[0065] Step S40: Initialize the carrier unit corresponding to the configuration file through the animation renderer to obtain the animation container, and construct the document object model element corresponding to the animation container.
[0066] In this embodiment, the animation renderer is the core component used to parse the configuration file and perform animation carrier unit initialization, element construction, and rendering. The carrier unit is the basic container used to display animations. The animation container, after initialization, is a dedicated container used to hold and display Document Object Model (DOM) elements. DOM elements are visual units that can be rendered and displayed, constructed based on element attributes in the configuration file.
[0067] As an optional implementation, the animation renderer is invoked to read the configuration file. First, the canvas information, including canvas size, background parameters, and layer rules, is fully parsed, along with the stage node attributes of all elements, such as identifiers, content, styles, position angles, and timing parameters. Based on the canvas information, dedicated resources are allocated to the carrier unit, basic operating parameters are configured, and compatibility checks are performed. The carrier unit is then initialized to generate a standard animation container. Subsequently, according to the attribute classification order of the elements in the configuration file, the core configuration information of each element is extracted in batches. Corresponding document object model elements are uniformly constructed, and an association identifier matching the animation container is added to each element. These elements are then batch-mounted to the animation container, and the mounting stability is verified to ensure that the configuration logic of all elements and the container is consistent. This method can complete container initialization and batch element construction in one go, ensuring the configuration matching degree between the container and elements. It is suitable for scenarios with complete configuration files and a large number of elements.
[0068] As an alternative implementation, the animation renderer is invoked to parse the core canvas basic information in the configuration file, minimize the basic configuration of the carrier unit, and quickly complete the initialization to generate the basic animation container. Then, according to the stage trigger priority of the elements, the stage node attributes of each element in the configuration file are parsed one by one. Based on this attribute information, the corresponding document object model element is constructed separately, and the compatibility between the element and the basic container is verified. If compatibility discrepancies exist, the element attributes are adjusted or the container extension parameters are supplemented, and the adapted element is mounted to the animation container. This process is repeated until all elements are constructed and mounted, while simultaneously improving the complete configuration of the animation container. This method can quickly generate the basic animation container and gradually improve its configuration, reducing the resource consumption of a single initialization.
[0069] Step S50: Call the control interface of the animation renderer, and process the document object model elements in the animation container according to the configured stage rules to obtain the target choreography animation.
[0070] In this embodiment, the control interface of the animation renderer is used to call the animation renderer's functions and execute element state transitions and animation control. The configured stage rules are the timing parameters, transition logic, attribute change rules, and other configurations for each stage of the animation element. State transition processing is the process of adjusting the document object model element attributes according to the stage rules to achieve smooth switching between stages. Target choreography is the final, coherent animation effect formed after all element stage transitions are completed.
[0071] As an optional implementation, the control interface of the animation renderer is invoked to fully parse the timing parameters, transition logic, attribute change items, and easing requirements of each element in the configured stage rules. This process integrates and generates a globally unified timing execution plan, determining the stage triggering time, transition duration, and connection order of each element. Within the animation container, the state transitions of all document object model elements are triggered synchronously according to this plan. The transition progress and attribute change effects of each element are monitored in real time, and the execution rhythm of elements with deviations is dynamically adjusted to ensure that all elements complete stage transitions in a unified timing sequence. Finally, this is integrated to form a coherent and synchronized target animation. This method ensures a high degree of synchronization in the stage transitions of all elements, resulting in a more harmonious overall animation presentation.
[0072] As an alternative implementation, the control interface of the animation renderer is invoked to parse the configured stage rules sequentially according to the stage trigger priority of each element, generating a unique timing execution plan for each element. Within the animation container, the state transitions of each document object model element are triggered one by one. The runtime environment parameters of the animation container and element transition feedback are collected in real time, and the transition duration and easing intensity of each element are dynamically adjusted to adapt to the container environment. Simultaneously, the rationality of the connections between elements is verified. After an element completes its current stage transition, the transition process of the next priority element is triggered until all elements have completed all stage transitions, integrating them to form a target choreography animation adapted to the container environment. This method can flexibly adapt to the runtime state of the animation container and reduce the impact of environmental fluctuations on the transition effects of individual elements.
[0073] For example, in the scenario of animation choreography, a highly general object structure can be designed. This structure supports JSON formatting, and the object information includes animation elements, element positions, element angles, element styles, element easing functions, easing durations, and the state of the next stage. By simply combining this object structure into a linked list, stage-based state nodes are formed, with each object representing a state / stage. This object structure cannot be manually configured; it serves only as a storage medium. Therefore, a simple editing tool needs to be designed to generate and export configuration objects in JSON format. This editing tool relies entirely on the above object structure; its core function is simply to ensure the accurate collection of animation element information, saving it to the above object, and storing it in the correct location within the object. Adding new elements and stages: An element is an object, and an animation stage of that element is an item in the linked list. Adding a new element is equivalent to initializing an object and adding it to the object array. Similarly, adding a stage involves copying the information from the previous stage and adding it to the `next` field, forming an item in the linked list. Only the unique ID of the animation element remains unchanged during this process. Modifying Element Information: Each stage of each element is bound to an object in the linked list. Elements are bound by their unique IDs, and stages are bound by the linked list hierarchy (i.e., the number of `next` elements). When element information is modified using tools (modification methods can include inputting values, dragging and dropping, etc., with varying implementations), it is synchronized to the object in real time. Exporting JSON Files: Data is formatted using `JSON.parse(JSON.stringify(animationOptions))` and then exported as a JSON file generated by `new Blob([dataStr], {type: 'application / json'})`. The configuration object serves as the storage medium for animation information, and the editor acts as the tool for configuring this object. Now, a renderer is needed to render the information stored in the configuration object onto the page. The renderer reads the configuration information from the JSON file, instantiates the element, sets the initial style, and renders the element into the container. Then, the animation is controlled using the renderer's APIs. Core APIs include: `reset`, `play`, `playOnce`, `jumpToGlobalStage`, `pause`, and `stop`. `reset`: Resets to the initial state. `play`: Plays one stage of the animation. `playOnce`: Plays the entire animation. jumpToGlobalStage: Jumps to the specified stage. pause: Pauses the animation. stop: Stops the animation.
[0074] By linking structured arrangement with rendering, the problems of scattered animation element configuration, cumbersome linked list construction, and poor rendering connection are solved, thereby improving the efficiency of animation arrangement and the accuracy of presentation.
[0075] Based on any of the above embodiments, in Embodiment 2 of this application, step S10 includes steps A11 to A13:
[0076] Step A11: In response to the arrangement operation in the visual editor, parse out the full-dimensional configuration elements of the animation elements corresponding to the arrangement operation at each stage.
[0077] In this embodiment, the visual editor is a tool that supports the arrangement of animation elements and provides interactive editing functions. Each stage refers to a different time segment in the process of displaying animation elements. The full-dimensional configuration elements are all the core configuration information required for each stage of the animation element, such as identifiers, content, styles, timing, transitions, and spatial states.
[0078] As an optional implementation, in response to the arrangement operation in the visual editor, the system captures all display stages corresponding to the animation element pointed to by the operation, determines the sequence and relationship of each stage, and then extracts configuration requirements for each stage across all dimensions, including unique identifier requirements, content presentation format, style parameters, spatial position and hierarchy, timing trigger rules, transition rhythm type, and stage connection logic. The extracted information is categorized and organized according to preset classification standards, verifying the consistency and rationality of the same dimension configuration across different stages, eliminating redundant configuration information, and supplementing missing basic configuration items for each dimension. This ensures that no configuration elements are omitted or conflicting for each stage, integrating them into a complete set of full-dimensional configuration elements corresponding to each stage. This method can cover all configuration dimensions of all stages at once, avoiding adjustments due to missing or conflicting configurations during subsequent arrangement.
[0079] Step A12: Map each requirement dimension in the full-dimensional configuration elements to the attribute items corresponding to the animation element stage nodes, thereby obtaining the mapping relationship between each requirement dimension and the corresponding attribute item.
[0080] In this embodiment, the requirement dimension is a single configuration direction categorized within the full-dimensional configuration elements. An animation element stage node is an independent data unit carrying the configuration for a specific stage of an animation element. Attribute items are fields within the animation element stage node used to store specific configuration information. The mapping relationship is the precise correspondence established between the requirement dimension and the attribute items.
[0081] As an optional implementation, a pre-defined fixed mapping rule set determines the standard correspondence between various requirement dimensions (identifier, content, style, and timing) and animation element stage node attribute items. Then, it iterates through all requirement dimensions in the full-dimensional configuration elements, identifying the category and core configuration content of each requirement dimension. Based on the category, it accurately matches the corresponding target attribute item from the mapping rule set, verifying the uniqueness and data type compatibility of the matching results, eliminating conflicting matches, and supplementing default mapping items according to the rules. All requirement dimensions and successfully matched attribute items are recorded in an orderly manner according to the format of dimension name, attribute item identifier, and matching basis, resulting in a standardized mapping relationship. This method enables rapid batch mapping, ensuring the uniformity and accuracy of the mapping relationship.
[0082] Step A13: In accordance with the specifications of the animation choreography object structure, and combining the mapping relationship between each requirement dimension and the corresponding attribute item, integrate and encapsulate the attribute values corresponding to each mapping to generate the animation element stage node attribute set.
[0083] In this embodiment, the specification requirements for the animation choreography object structure are the constraints such as attribute set format, field rules, and data validation standards set when defining the animation choreography object structure. Attribute values are the specific configuration data corresponding to each requirement dimension. The animation element stage node attribute set is a set of attributes that integrates the core configurations such as the stage identifiers, content, and styles of each animation element.
[0084] As an optional implementation method, the standard requirements for the animation choreography object structure are extracted, and the field order, data format, mandatory field rules, and validation standards of the attribute set are determined. Then, the mapping relationship between each requirement dimension and attribute item is traversed, and the corresponding attribute values are extracted according to the mapping association. Each attribute value undergoes format conversion and validity validation, eliminating non-compliant attribute values and supplementing with default values. All validated attribute values are sequentially filled into the corresponding fields according to the field order required by the standard, resulting in an initial attribute set. The initial attribute set undergoes overall structural validation to ensure field integrity and data consistency, generating a standardized attribute set for animation element stage nodes. This method strictly adheres to the standard requirements, ensuring the uniformity and compliance of the attribute set.
[0085] For example, in the scenario of choreographing animations, in response to the choreographing operation of the webpage pop-up component in the visual editor, the full-dimensional configuration elements of the animation element's initial, display, and hidden stages are parsed out (timing dimension: initial delay 0ms, duration 300ms, display delay 100ms, duration 500ms, hidden duration 400ms; style dimension: initial width 0px, height 0px, background #fff, opacity 0, display width 300px, height 200px, opacity 1, hidden width 0px, height 0px, opacity 0; transition dimension: all are ease-in easing models). The timing dimension is mapped to the stage delay and duration attributes, the style dimension is mapped to the width, height, background color, and opacity attributes, and the transition dimension is mapped to the easing type attribute, obtaining the mapping relationship between each required dimension and its corresponding attribute. According to the animation choreographing object structure specification, the attribute values corresponding to each mapping are integrated to generate the animation element stage node attribute set.
[0086] By using full-dimensional analysis and precise attribute mapping encapsulation, the problem of scattered animation configurations and chaotic mappings in component construction is solved, improving the efficiency and standardization of component animation attribute set generation.
[0087] Based on any of the above embodiments, in Embodiment 3 of this application, step S20 includes steps B11 to B13:
[0088] Step B11: Integrate and encapsulate the configuration information in the attribute set of the animation element stage node into an independent data unit with the characteristics of a singly linked list node, and add an association identifier pointing to the next stage for stage connection to each attribute set of the animation element stage node, so as to obtain a singly linked list node of a single animation element stage.
[0089] In this embodiment, the configuration information refers to the specific configuration data recorded in the attribute set. The singly linked list node characteristic refers to its ability to be independently stored and linked to the next node via an association identifier. An independent data unit is an independent data carrier that carries configuration information and does not depend on other units. The association identifier is a unique identifier used to point to the next stage node and achieve stage connection. A singly linked list node of a single animation element stage is an independent data unit that possesses the singly linked list characteristic, carries the configuration of a single stage, and contains a connection identifier.
[0090] As an optional implementation, all configuration information of the animation element stage node attribute set is parsed and formatted according to the preset data structure specification of the singly linked list node to ensure that the configuration information storage format is fully compatible with the node structure. The formatted configuration information is then encapsulated into an independent data unit, assigned a unique node identifier, and automatically generated with an association identifier pointing to the next stage node based on the preset execution order of each animation element stage. The matching of the association identifier and the next stage node identifier is verified to ensure correct connection logic, resulting in a standardized singly linked list node for each animation element stage. This method ensures the uniformity of the node structure and the accuracy of stage connections, improving the efficiency of subsequent linked list construction.
[0091] Step B12: According to the preset execution order of the animation stages, the singly linked list nodes of the individual animation element stages are sequentially placed into a preset data container to obtain a node array.
[0092] In this embodiment, the preset execution order of animation stages refers to the sequential progression of each stage of the animation element according to preset logic. The preset data container is a predefined, ordered data storage medium used to store singly linked list nodes. The node array is an ordered array that stores all singly linked list nodes of each individual animation element stage in the order of stage execution.
[0093] As an optional implementation, the preset execution order of the animation stages is extracted to determine the logical order of each singly linked list node. The storage specifications and fixed capacity of the preset data container are analyzed, and starting from the first node in the stage execution order, the integrity and stage identifier of each singly linked list node are verified one by one. After confirming that there are no missing or conflicting nodes, they are stored sequentially into the preset data container, with each node occupying a fixed position in the container. After storage, the consistency between the node order in the container and the preset execution order is verified to ensure no order disorder, resulting in a node array with a fixed order and regular structure. This method ensures the accuracy of the node array's order and the stability of its structure, eliminating the need for additional sorting when reading nodes subsequently.
[0094] Step B13: Extract the canvas information from the animation configuration requirements, define a unified data object framework for the canvas information and the node array, and integrate and encapsulate the defined canvas information and node array according to the preset structure to obtain the animation arrangement object structure.
[0095] In this embodiment, canvas information is a fundamental configuration related to the animation display medium in the animation configuration requirements. The unified data object framework is a predefined, standardized data storage structure that can simultaneously accommodate canvas information and node arrays. The preset structure refers to the explicit field distribution, order, and data format rules within the unified data object framework.
[0096] As an optional implementation, a pre-defined unified data object framework is retrieved. This framework has fixed the storage fields, arrangement order, and data validation rules for canvas information and node arrays. Then, all canvas-related configuration information is extracted from the animation configuration requirements and standardized according to the framework field requirements, ensuring that the data type of each configuration item perfectly matches the corresponding field. Subsequently, the standardized canvas information and existing node arrays are filled into the corresponding fields of the framework one by one in a pre-defined order. Field integrity checks and cross-field logical conflict detection are performed on the overall data, correcting data format deviations or field misalignments. Finally, a well-structured animation choreography object structure with strong data consistency is obtained. This method can significantly improve integration and encapsulation efficiency and ensure the uniformity of the object structure.
[0097] As an alternative implementation, after integrating and encapsulating canvas information and node arrays to generate the animation choreography object structure, an access authorization verification is initiated for the object structure. An access authorization password and permission level are set for this structure. Administrator authorization grants full access, while ordinary authorization only grants access to the basic framework. Authorized entities must enter the correct password and match the permission level to access information such as node attributes and canvas parameters within the object structure. Unauthorized access will be blocked and a security alert will be triggered. Simultaneously, an access authorization log is recorded, including the accessing entity, access time, and access scope. Access authorization analysis reports are generated periodically. This method, through password verification and hierarchical permission settings, ensures access security to the animation choreography object structure and is suitable for scenarios with confidentiality requirements for core choreography data.
[0098] For example, in the scenario of choreographing animation, the set of stage node attributes of the scrolling animation of the web page announcement bar (initial stage: width 375px, height 50px, text x=0px, delay 0ms; scrolling stage: text x=-300px, duration 2000ms, easing linear; pause stage: text x=-300px, duration 1000ms) is integrated and encapsulated into a data unit with singly linked list node characteristics. The initial node is given an association identifier next: "scroll-node", the scrolling node is given next: "pause-node", and the pause node is given next: null, resulting in a singly linked list node for three individual animation element stages. According to the preset execution order of initial → scroll → pause, the three nodes are sequentially placed into an array container to obtain the node array [initial-node, scroll-node, pause-node]. Extract the canvas information (size 375x50px, background #f5f5f5, layer 2) from the animation configuration requirements, define a unified data object framework containing "canvasInfo" and "nodeArray" fields, integrate and encapsulate the canvas information and node array, and obtain the animation choreography object structure.
[0099] By encapsulating stage nodes in a linked list and unifying and integrating data, the problems of scattered stage configurations and chaotic connection logic in component construction are solved, thereby improving the data regularity and configuration efficiency of component animation orchestration.
[0100] Based on any of the above embodiments, in Embodiment 4 of this application, step S30 includes steps C11 to C14:
[0101] Step C11: In response to the addition operation of the new element, parse the stage requirements corresponding to the new element to obtain the new animation element stage node attribute set.
[0102] In this embodiment, the staged requirements are a set of requirements for the new element at different display stages, including attribute configurations, presentation rules, and transition requirements. The new animation element stage node attribute set is the core configuration set that integrates the requirements of each stage of the new element, including key information such as identifiers, styles, and timing.
[0103] As an optional implementation, in response to the addition of a new element, the method first captures the new element's type and purpose information contained in the operation command. Based on this information, it determines all display stages that the new element needs to be divided into and the order of each stage. Then, for each stage, it comprehensively extracts requirements across all dimensions, including unique identifier requirements, content presentation format, style parameters, spatial state, timing rules, transition rhythm, and stage connection logic. The extracted stage requirements are deduplicated, categorized, and analyzed. The consistency and rationality of requirements in the same dimension across different stages are verified. Missing basic configuration items are supplemented, and all requirements are mapped to corresponding attribute items according to a preset attribute set structure specification. Finally, these are integrated to form a complete attribute set for the new animation element's stage nodes. This method ensures the completeness of the attribute set and the consistency of configurations across each stage.
[0104] Step C12: Based on the addition operation of the new element and the new animation element stage node attribute set, modify the attribute information of the existing element stage nodes, and output the updated animation element stage node set.
[0105] In this embodiment, the attribute information of the existing element stage nodes consists of the identifiers, content, styles, timing, and other data already configured for each stage of the original animation element. The updated animation element stage node set is a complete set of node data formed by integrating the modified attributes of the original element nodes with the attributes of the new element nodes.
[0106] As an optional implementation, this method obtains the new attribute set corresponding to the addition of a new element and the existing animation element stage node set. First, it comprehensively analyzes the configuration dimensions of the new attribute set, including stage divisions, timing rules, style parameters, and spatial states. Then, it iterates through all existing element stage nodes, comparing the association dimensions of the new attribute set with those of existing nodes to identify issues such as timing conflicts, style overlaps, and spatial position conflicts. Following the rule of prioritizing the consistency of the overall arrangement logic, it batch modifies attribute items in existing nodes that conflict with the new element, supplements the timing connection parameters that need adjustment due to the addition of the new element, and simultaneously verifies the configuration compatibility and logical coherence of all nodes after modification. Finally, it integrates the modified existing nodes with the new element nodes to output the updated animation element stage node set. This method can completely eliminate configuration conflicts, ensure the overall consistency of the node set, and is suitable for scenarios where new elements and existing elements are closely related.
[0107] Step C13: Based on the updated set of animation element stage nodes, determine the relationship between nodes according to the connection logic of each element stage to complete the construction of the stage linked list and obtain the animation arrangement update object.
[0108] In this embodiment, the connection logic between each element stage refers to the associated logic such as the execution order, triggering conditions, and transition rules between different elements or different stages of the same element. The association relationship between nodes is the correspondence between nodes and their connections established by identifiers. The construction of the stage linked list is a chain-like data structure formed by linking nodes together according to the connection logic. The animation choreography update object is a unified data carrier containing the constructed stage linked list and related configurations, used for subsequent animation choreography.
[0109] As an optional implementation, this method iterates through the updated set of animation element stage nodes, extracting core information such as stage identifier, timing parameters, trigger conditions, and transition rules for each node. It then analyzes the execution order of all element stages within the overall animation flow, constructing a global connection logic graph. Based on this graph, it identifies the preceding and following related nodes for each node, generates a unique association identifier for each node, and binds it to the corresponding preceding and following node identifiers. The nodes are then linked together in execution order using these association identifiers to form a complete global stage linked list. Simultaneously, it verifies the logical consistency and timing rationality of the node connections within the linked list, corrects any association deviations, and finally integrates this stage linked list with canvas information and node attribute sets to obtain a structurally complete and logically rigorous animation arrangement update object. This method ensures the global coherence of the stage linked list and the accuracy of the execution logic.
[0110] As an alternative implementation, upon receiving a request to add a new element, a dedicated authorization verification is initiated to check whether the entity performing the operation has the authorization to add the new element and the corresponding element type. Only after passing the verification is the parsing of the phased requirements of the new element allowed. When modifying the attributes of existing element phase nodes, a secondary verification of attribute modification authorization is required. When constructing the phase linked list, an authorization identifier for the addition operation is embedded, limiting subsequent adjustments to the linked list node relationships corresponding to the new element to only authorized entities. Unauthorized addition operations will be rejected and recorded in the abnormal operation log. This method solves the problem of chaotic permissions for adding new elements and modifying attributes through precise authorization by operation type and secondary verification, and is suitable for high-security animation arrangement collaboration scenarios.
[0111] Step C14: Serialize the animation arrangement update object, organize the data format of the animation arrangement update object according to the preset configuration file specification, and output the configuration file.
[0112] In this embodiment, serialization refers to the process of converting the structured data of the animation arrangement update object into a linear data format that can be stored and transmitted.
[0113] As an optional implementation method, this approach parses a pre-defined configuration file specification, determines the data encoding method, field order, required field rules, and validation standards, and performs full serialization of the animation arrangement update object, converting all structured data, such as stage linked lists, node attributes, and canvas information, into a linear format. Subsequently, it validates the serialized data format, data type, and field integrity field by field according to the specification requirements, adjusts the field order to match the specification, corrects encoding deviations and format errors, supplements the metadata identifiers and validation information required by the specification, and finally integrates all data in a unified format to output a configuration file with a complete structure that fully conforms to the pre-defined specification. This method ensures a high degree of standardization and compatibility of the configuration file, with no adaptation obstacles in subsequent calls, and is suitable for scenarios with complex animation arrangement logic and large amounts of configuration data.
[0114] For example, in response to the addition of a new element, "Input Prompt Icon," in a web registration form, the system parses the initial (hidden), focused (shown), and completed (highlighted) phases of the new element, resulting in a new set of animation element phase node attributes (Initial: opacity 0, delay 0ms; Focus: opacity 1, duration 300ms; Complete: color #52c41a, duration 200ms, ease-in easing model). Based on the addition operation, the system modifies the phase attributes of existing input box elements (focus stage trigger delay 100ms, associated prompt icon display), outputting an updated set of animation element phase nodes (including 3 phases for the input box and 3 phases for the prompt icon). Based on this set, the system determines the node relationships according to the connection logic of "Input Box Initialization, Input Box Focus, Prompt Icon Focus, Input Box Complete, Prompt Icon Complete," completing the phase linked list construction and obtaining the animation arrangement update object. This object is serialized, and the data format is organized according to the JSON preset specification, outputting a configuration file containing canvas information (375x40px), the node linked list, and attribute configurations.
[0115] By parsing new element requirements and dynamically reconstructing linked lists, the problems of configuration conflicts and chaotic linked list connections after adding new elements are solved, thus improving the update efficiency and configuration compatibility of animation arrangement.
[0116] Based on any of the above embodiments, in Embodiment 5 of this application, step S40 includes steps D11 to D13:
[0117] Step D11: The animation renderer parses the canvas information and the stage node attribute information of each element in the configuration file to form the basic canvas information and the element attribute details.
[0118] In this embodiment, the canvas basic information refers to the organized core canvas configuration data, which is convenient for subsequent initialization. The element attribute details refer to the set of attribute information categorized by element and stage, clearly presenting the configuration of each element at each stage.
[0119] As an optional implementation, the animation renderer is invoked to fully read the configuration file. Following preset information classification rules, all basic configuration items such as canvas size, background, layer, and transparency are extracted one by one. Each configuration item undergoes format standardization and integrity verification. Then, all animation elements in the configuration file are traversed, and according to the hierarchical classification logic of element unique identifier and stage number, all attribute information for each element at each stage, including identifiers, style parameters, spatial states, timing rules, and transition types, is extracted, eliminating duplicate and redundant data. The logical consistency of attributes across different stages of the same element is verified, and all information is organized in an orderly manner according to a unified data structure. Finally, complete and intact basic canvas information and clearly categorized element attribute details are formed. This method comprehensively covers all configuration information, ensuring the accuracy of subsequent rendering.
[0120] Step D12: Create the animation container that meets the rendering requirements based on the canvas basic information, and establish the association between the animation container and the element attribute details to generate the animation container with bound element attribute details.
[0121] In this embodiment, rendering requirements refer to the technical standards that the animation container must meet, such as display adaptation, resource compatibility, and performance support. Association relationships are mapping relationships that enable the animation container to accurately call element attribute details. An animation container that has bound element attribute details refers to a complete carrier that integrates canvas configuration and element attribute associations, and can directly support rendering.
[0122] As an optional implementation, the rendering requirements are analyzed to determine the resource allocation standards, adaptation range, and performance parameters of the container. Based on the full configuration of the canvas's basic information, a structurally complete animation container is created according to the rendering requirements. Dedicated resources are allocated to the container, and compatibility initialization is completed. Then, the element attribute details are traversed, and a mapping relationship between each element's attributes at each stage and the container is established according to the fixed rules of element unique identifiers and container association fields. The compatibility of attribute data with the container is verified one by one, field association deviations are corrected, and all element attribute details are completely bound to the container. Association logs are recorded synchronously, ultimately generating a fully configured and accurately associated animation container with bound element attribute details. This method ensures full compatibility between the container and attributes and is suitable for scenarios with many element attribute dimensions and stringent rendering requirements.
[0123] As an alternative implementation, before invoking the animation renderer to initialize the carrier unit, a container initialization authorization verification is initiated. The rendering authorization token and container usage permission application of the operating entity are submitted. The token validity, permission matching, and authorized usage count are verified. A single authorization can only initialize one container, while batch authorization can initialize multiple containers. Only after successful verification does the renderer read the canvas information from the configuration file. When creating the animation container, an authorization identifier and usage validity period are bound to the container. Initialization requests that have expired or are unauthorized will be terminated directly. Simultaneously, a container initialization authorization report is generated, recording information such as the authorizing entity, container identifier, and validity period. This method, through authorization token verification and usage restrictions, achieves secure control over animation container initialization and is suitable for scenarios requiring control over animation rendering resource usage permissions.
[0124] Step D13: Construct document object model elements with corresponding configurations one by one according to the attribute details of each element associated with the animation container.
[0125] As an optional implementation, the detailed attribute information of all elements associated with the animation container is extracted, and the full configuration of each element is determined according to its unique identifier. Then, the complete attribute configuration of each individual element is read one by one in the sorted order. Based on the configuration, a basic document object model element framework is constructed, and detailed configurations such as styles, spatial positions, and timing trigger conditions are gradually filled in. The adaptability of each configuration item to the element framework is verified in real time, and configuration deviations are corrected to ensure that the element configuration is completely consistent with the attribute details. After all elements are constructed, the format compatibility of each element is uniformly verified, ultimately resulting in a complete set of document object model elements with accurate matching of attribute details. This method can guarantee the integrity and consistency of the configuration of each element and is suitable for scenarios with many element attribute dimensions and complex configuration logic.
[0126] For example, in an animation choreography scenario, the configuration file of the hover animation of a product card on a webpage is parsed by the animation renderer. Canvas information (size 300x400px, background #ffffff, layer 4) is extracted to form the basic canvas information. Element attribute details are extracted (card: initial stage width 280px, height 380px, shadow 02px 8px #eeeeee; hover stage width 290px, height 390px, shadow 04px 16px #dddddd, duration 300ms, ease-out model; label: initial stage opacity 0, position y=10px; hover stage opacity 1, position y=0px, delay 100ms, duration 250ms). Based on the basic canvas information, an animation container that meets the rendering requirements is created. A mapping relationship is established between the container and the element attribute details, generating an animation container with bound element attribute details. Based on the attribute details of each associated element, construct the document object model element (binding size, shadow, and timing configuration) corresponding to the card and the document object model element (binding transparency, position, and timing configuration) corresponding to the label one by one.
[0127] By using configuration parsing, container binding, and element construction linkage, the problems of disconnected rendering configuration and deviation in element construction during animation arrangement are solved, thereby improving the accuracy of animation rendering and process efficiency.
[0128] Based on any of the above embodiments, in Embodiment Six of this application, step S50 includes steps E11 to E13:
[0129] Step E11: Call the control interface of the animation renderer, read the stage delay duration, duration, connection logic, transition rhythm rules, and initial attributes of the document object model elements corresponding to the configuration file, and generate the timing execution plan and state transition rule set for each element.
[0130] In this embodiment, the stage delay duration refers to the waiting time before an element enters a certain stage. The duration refers to the display or transition time of an element in a certain stage. The connection logic refers to the sequential execution relationship between the various stages of an element and between elements. The transition rhythm rule refers to the easing type and speed change logic when switching element stages. The initial properties of a Document Object Model (DOM) element refer to the basic configuration of a DOM element before animation is executed. The timing execution plan refers to the execution scheme that clarifies the triggering time and duration of each element stage. The state transition rule set refers to the collection that integrates all element stage switching rules.
[0131] As an optional implementation, the control interface of the animation renderer is invoked to fully read the stage delay duration, duration, connection logic, transition rhythm rules, and initial attributes of all elements in the configuration file. These are then categorized and organized according to the hierarchical structure of element unique identifiers and stage numbers to construct a global temporal relationship graph. Based on this graph, a temporal execution plan containing trigger time, duration, and preceding dependent stages is generated for each element. Simultaneously, transition rhythm rules are categorized by type and integrated to form a unified set of state transition rules. The logical consistency between the plan and the rule set is verified in real time, correcting temporal conflicts and contradictions in transition rules. Finally, a globally coordinated temporal execution plan and a standardized set of state transition rules are output. This method ensures the coordination of all elements and is suitable for scenarios with closely related elements and complex temporal logic.
[0132] Step E12: According to the time-series execution plan, the attribute changes of each of the document object model elements are triggered sequentially, and the smooth transition between stages is performed according to the state transition rule set to generate an animation instance.
[0133] In this embodiment, smooth transition between stages refers to the process of smoothly switching an element from the current stage attribute to the next stage attribute according to rules. An animation instance refers to an executable dynamic effect unit formed after the attribute change and stage transition are completed.
[0134] As an optional implementation, a unified timeline for executing the time-series plan sequentially triggers attribute changes for each document object model element, acquiring the current attribute state and the target attribute for the next stage for each element in real time. The corresponding easing type and speed change logic are matched against a set of state transition rules, and smooth transitions between stages are achieved by adjusting element attribute parameters frame by frame. The transition progress and attribute change accuracy of all elements are monitored synchronously, and the transition rhythm of elements with deviations is dynamically calibrated to ensure that all elements complete attribute changes and stage switching synchronously according to the time-series plan. After all elements have transitioned, they are integrated to form a coherent and coordinated animation instance. This method ensures a high degree of coordination between element transitions and is suitable for scenarios with high requirements for element synchronization.
[0135] Step E13: Verify the timing synchronization and transition effect consistency of the animation instance until all elements complete the state transition of all stages according to the rules, and output the target choreography animation.
[0136] In this embodiment, temporal synchronization refers to the coordinated consistency of each element according to the preset execution plan in the time dimension. Transition effect consistency refers to the unified presentation effect of each element's stage switching in accordance with the state transition rule set. State switching of all stages refers to the complete attribute change process of an element from the initial stage to the final stage.
[0137] As an optional implementation, the complete transition process is broken down into multiple key verification nodes according to the stage progression sequence of the animation instance. At each node, high-priority elements and some ordinary elements are sampled to verify their timing synchronization and transition effect consistency. If the sampled elements meet the rules, the process continues to the next stage; if deviations are found, the root cause of the deviation is deduced based on the overall state of the node, and the execution parameters of the affected elements are adjusted in batches. After the sampled elements pass the verification, the verification process of the next node begins, and this loop continues until all elements have completed the state transition of all stages. Finally, the target choreography animation that meets the core rule requirements is output. This method can reduce verification overhead and improve the overall process efficiency.
[0138] By using regularized timing generation and verification, the problems of timing disorder and abrupt transitions in animation arrangement are solved, improving the smoothness and execution accuracy of animation.
[0139] Based on any of the above embodiments, in Embodiment Seven of this application, step E12 includes steps F11 to F13:
[0140] Step F11: parse the change parameters corresponding to the document object model elements in the time-series execution plan and the state transition rule set, and generate an element-specific execution and transition configuration list.
[0141] In this embodiment, the element-specific execution and transition configuration list refers to a set of exclusive configurations organized by individual element, containing all its execution parameters and transition rules.
[0142] As an optional implementation method, this approach parses the time-series execution plan and state transition rule set, establishes a classification framework based on the unique identifier of each element, and extracts the execution parameters of each element at each stage, such as trigger timing, duration, and pre-dependencies, as well as the corresponding attribute change values, easing types, transition rhythms, and connection logic, and other transition rules. All parameters and rules of the same element are sequentially categorized into their respective classification frameworks according to the stage order. The correlation between parameters and rules and the logical coherence between stages are verified, duplicate and redundant information is removed, and missing basic configuration items are supplemented. Finally, a complete and parameter-rich element-specific execution and transition configuration list is generated. This method ensures the completeness and logical consistency of each element's configuration list.
[0143] Step F12: According to the timing of the trigger, attribute change items and transition parameters in the element-specific execution and transition configuration list, start the attribute update and stage transition of each document object model element in sequence, record the dynamic state of each element during the transition process, and integrate them to obtain the element state set.
[0144] In this embodiment, the timing trigger refers to the specific point in time when an element initiates an attribute update or phase transition. Attribute changes refer to specific configuration items such as style, position, and transparency that need to be adjusted for the element. Transition parameters refer to data such as easing type and speed changes that support smooth phase transitions. The element state set refers to a complete data set that integrates the dynamic states of all elements during the transition process.
[0145] As an optional implementation, a unified global timeline is used to schedule the execution and transition configuration list for each element. The timing of each element's trigger is confirmed one by one, and the attribute update of the corresponding element is initiated immediately upon reaching the trigger point. Easing and stage switching are performed according to the transition parameters in the list. Dynamic information such as the attribute values, transition progress, and status indicators of each element in real time is captured and synchronously stored in a global status record container. The consistency between the current status and the list requirements is verified to ensure no omissions or deviations. After all elements have completed the transition, the dynamic states in the container are organized according to element identifiers and time order, and integrated to obtain a complete and accurate set of element states. This method can guarantee the comprehensiveness and accuracy of state recording.
[0146] Step F13: Verify the transition progress and attribute change effect of each element in the element state set. After all elements have completed the attribute update and smooth transition of the current stage according to the state transition rule set, integrate them to form a coherent dynamic presentation effect and output the animation instance of the initial playback state.
[0147] In this embodiment, transition progress refers to the degree to which an element progresses from its current initial state to its target state. Attribute change effect refers to the actual style, position, and other effects of the element after configuration adjustments. The state transition rule set refers to a set of rules that integrates the easing type, speed changes, and smooth transition logic when switching element stages.
[0148] As an optional implementation method, the transition progress data and attribute change details of each element in the element state set are extracted one by one. This comprehensively verifies whether the progress meets the timing execution requirements and whether the attribute changes accurately match the state transition rule set, including details such as easing rhythm, attribute value accuracy, and smooth transitions between stages. For elements with lagging progress or attribute deviations, execution parameters are calibrated in real time. Once all elements have fully completed the current stage transition without any deviations, all dynamic changes are integrated according to the preset collaborative logic between elements. This eliminates transition gaps and effect conflicts, forming a unified and coherent dynamic presentation effect, and outputting a precise and compliant initial playback state animation instance. This method ensures a high standard of animation effect presentation.
[0149] By using a dedicated configuration list and full-process status recording and verification, the problems of asynchronous element transitions and difficulty in status tracing in animation arrangement are solved, thereby improving the accuracy of animation execution and the continuity of presentation.
[0150] Based on any of the above embodiments, in Embodiment Eight of this application, referring to Figure 2 , Figure 2 This is a flowchart illustrating the eighth embodiment of the animation arrangement method based on an exportable configuration object according to this application. After step S50, steps G11-G13 are also included:
[0151] Step G11: Based on the target animation arrangement and the element state change log and timing execution record recorded during the playback process, the actual effect information of each document object model element is collected.
[0152] In this embodiment, the element state change log refers to a complete record of the dynamic changes in attribute values, state identifiers, etc., of each document object model element during animation playback. The timing execution record refers to the time-dimensional data recording the trigger time, duration, and connection nodes of each element stage during animation playback. The actual effect information refers to the core data such as the actual attribute state, transition smoothness, and timing fit of each document object model element during animation playback.
[0153] As an optional implementation method, the entire playback process of the target animation is first retrieved, including element state change logs and timing execution records. The record data is then split according to the unique identifier of the element and the timeline dimension. The actual attribute values, transition rhythm changes, and state switching nodes of each document object model element are extracted frame by frame. At the same time, the deviation between the trigger time and duration in the timing execution records and the actual playback time is compared. Data such as the completeness of attribute presentation, smoothness of transition, and timing fit of each element are integrated. The collected information is deduplicated, verified, and classified, ultimately obtaining detailed actual effect information covering the entire playback process of the elements. This method can comprehensively restore the actual performance of the elements and has strong data integrity.
[0154] Step G12: Compare the actual effect information with the preset timing parameters and transition effect standards in the stage rules, analyze the consistency of the state changes of each element, whether the deviation of timing synchronization is within the allowable threshold, and whether the transition effect meets expectations, mark abnormal feedback items and supplement the corresponding difference descriptions, and output an animation feedback analysis report.
[0155] In this embodiment, "stage rules" refers to a set of preset requirements, such as timing parameters and transition effect standards, used to constrain animation execution. Preset timing parameters refer to time-related standards specified in the stage rules, such as element trigger time, duration, and transition intervals. Transition effect standards refer to effect requirements specified in the stage rules, such as element easing type, smoothness, and attribute change precision. Allowable thresholds refer to the acceptable range of timing deviations and effect differences set in the stage rules. Abnormal feedback items refer to records of problems where the actual effect does not conform to the preset rules. Difference descriptions refer to explanations of the specific differences between the actual and preset abnormal feedback items. An animation feedback analysis report is a standardized analysis document that integrates comparison results, abnormal feedback items, and difference descriptions.
[0156] As an optional implementation method, this approach first extracts all dimensional data from the actual effect information, including attribute change records of each element, timing execution data, and transition smoothness performance. Then, it retrieves the preset timing parameters and transition effect standards from the stage rules one by one, performing a full comparison according to the hierarchical structure of element unique identifier, stage number, and verification dimension. It analyzes the consistency of state changes, timing deviation values, and transition effect compliance, accurately marking items exceeding allowable thresholds or failing to meet expectations as abnormal feedback items, detailing the differences, their location, and timing nodes. Simultaneously, it statistically analyzes the proportion of abnormal items and their core impact range, ultimately outputting an animation feedback analysis report containing full verification results and detailed abnormal information. This method offers comprehensive verification and accurate anomaly localization, making it suitable for scenarios with stringent animation quality review requirements.
[0157] Step G13: The normal execution results, abnormal feedback items and difference descriptions in the animation feedback analysis report are encapsulated according to the feedback information structure that the animation arrangement system can recognize, and target feedback information is generated to optimize the animation arrangement configuration quality.
[0158] In this embodiment, normal execution result refers to the element performance data that conforms to the stage rules during animation execution. Abnormal feedback item refers to a record of a problem where the actual effect does not match the preset rules. Difference description refers to a detailed explanation of the differences between the actual and preset results in the abnormal feedback item. Target feedback information refers to feedback data that, after being encapsulated according to system specifications, can be used for optimization.
[0159] As an optional implementation method, this approach extracts all normal execution results, abnormal feedback items, and difference descriptions from the animation feedback analysis report. Following the feedback information structure requirements identifiable by the animation scheduling system, the data hierarchy is organized. Normal execution results are categorized and organized by element identifier and stage number. Abnormal feedback items are supplemented with associated rule numbers, scope of impact, and other attributes. Difference descriptions are standardized according to actual performance, preset standards, and deviation types. After comprehensively integrating all information, the compatibility of each data item with the system structure is verified, and field format deviations and logical conflicts are corrected to ensure no information omissions or format errors. Finally, target feedback information containing all feedback data is encapsulated and generated. This method provides the system with complete optimization basis, ensuring the comprehensiveness and accuracy of optimization actions, and is suitable for scenarios with high requirements for configuration optimization precision.
[0160] For example, refer to Figure 3 , Figure 3This is a flowchart of the animation playback process for this application. In the scenario of choreographed animation, an animation is choreographed based on the target "Product Center" in the top navigation bar of the webpage (including the main navigation item and three dropdown menu items, using the ease-out easing model). During playback, an element state change log is recorded: The main navigation item (element identifier: nav-item-01) triggers at 0ms, lasts for 250ms, and its actual attributes change from font color gradient from #333 to #1891ff and width expansion from 100px to 111px. The dropdown menu items (element identifiers: dropdown-item-01 to 03) are pre-set to start 150ms after the main navigation item triggers, each lasting 300ms, and their actual attributes change from height expansion from 0px to 40px and opacity gradient from 0 to 1. Simultaneously, the timing execution record is recorded: the actual start time of the main navigation item is 0ms, and the completion time is 258ms. The actual start time of the dropdown menu items is 162ms, and the completion time is 465ms (taking dropdown-item-01 as an example). The actual effect information obtained is as follows: main navigation item duration 258ms, font color #1891ff, width 111px. Drop-down menu item trigger delay 162ms, duration 303ms, height 40px, opacity 1. Comparing this actual effect information with the preset timing parameters in the stage rules (main navigation item trigger delay 0ms±3ms, duration 250ms±5ms; drop-down menu item trigger delay 150ms±5ms, duration 300ms±5ms) and transition effect standards (main navigation item font color #1890ff±1, width 110px±1px; drop-down menu item height 40px±0px, opacity 1, ease-out model), the analysis shows that: the main navigation item duration deviates by 8ms (exceeding the allowable threshold), while the font color and width deviations are within the threshold. The drop-down menu item trigger delay deviates by 12ms (exceeding the allowable threshold), while the duration, height, and opacity meet expectations. Mark the abnormal feedback items as "Main navigation item duration exceeds threshold" and "Drop-down menu item trigger delay exceeds threshold", and add the difference description: "The actual duration of the main navigation item is 258ms, which exceeds the preset by 8ms and exceeds the threshold by 3ms" and "The actual trigger delay of the drop-down menu item is 162ms, which exceeds the preset by 12ms and exceeds the threshold by 7ms". Output an animation feedback analysis report that includes the normal execution results (the font color and width of the main navigation item meet the standards; the duration of the drop-down menu item meets the standards).The report content is then encapsulated according to the structure of "element identifier, feedback type, preset parameters, actual parameters, deviation value, allowable threshold, and difference description" that the animation orchestration system can recognize, generating target feedback information, such as "element identifier: nav-item-01; feedback type: timing deviation; preset parameters: duration 250ms; actual parameters: 258ms; deviation value: +8ms; allowable threshold: ±5ms; difference description: duration exceeds threshold 3ms". This is used to adjust the orchestration configuration of the duration of the main navigation item and the trigger delay of the drop-down menu item, thereby optimizing the animation configuration quality.
[0161] Furthermore, referring to Figure 4 , Figure 4This is a schematic diagram of the visualization interface for this application. Responding to the arrangement operations on the "elem-2ji4lson" element in the visualization interface, the system parses the element's phased requirements in the overall stage, stage 1, and stage 2: the overall stage level is "down one level" with a corresponding level parameter of 10; stage 1 has x = 180, y = 240, and deg = 5; stage 2 has an opacity of 0, a duration of 500ms, an easing type of "ease," and no special transition configuration. These parameters are integrated to generate the animation element stage node attribute set for this element. This animation element stage node attribute set is encapsulated as a singly linked list node. An association identifier is added to the overall stage node pointing to the stage 1 node, the stage 1 node's association identifier points to the stage 2 node, and the stage 2 node's association identifier is set to null. According to the preset orchestration specifications, the linked list nodes of this node and other elements in the interface (such as elem-eva3jy, elem-k6d9jy, etc.) are organized into a node array according to the overall stage execution order. At the same time, the basic information of the interface canvas (such as canvas size and background attributes) is extracted, and a unified data framework containing canvas information and node arrays is defined. The canvas information and node arrays are integrated and encapsulated to obtain the animation orchestration object structure. If the duration of stage 2 of this element is modified to 800ms in the interface, the system will re-parse the stage requirement, update the corresponding animation element stage node attribute set, synchronously modify the duration parameter in the linked list node, and thus update the node array and animation orchestration object structure to ensure that the object definition is consistent with the interface operation. This visual interface serves as the operational platform for animation choreography, encompassing an element list, a canvas display area, an element attribute configuration area, and a stage control area. The element list manages all animation elements to be choreographic; the canvas display area visually presents the current layout of each element; the attribute configuration area on the right allows adjustment of stage parameters such as the selected element's layer, position, angle, and opacity; and the stage control area at the bottom allows switching between the overall stage and sub-stages to configure attributes for different stages. When any attribute of an element is modified in the interface (e.g., adjusting the opacity of elem-2ji4lson from 0 to 0.5), the system will analyze this choreography operation in real time, synchronously updating the corresponding element's animation element stage node attribute set, and subsequently modifying the singly linked list nodes, node arrays, and animation choreography object structure, achieving instant linkage between interface operations and element object definitions.
[0162] By using closed-loop verification feedback between actual results and preset rules, the problems of timing deviations and inconsistent effects in animation arrangement are solved, improving the accuracy and iteration efficiency of animation arrangement.
[0163] This application provides an animation orchestration device comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform the animation orchestration method based on a derivative configuration object as described in Embodiment 1 above.
[0164] The following is for reference. Figure 5 The diagram illustrates a structural schematic of an animation editing device suitable for implementing embodiments of this application. The animation editing device in the embodiments of this application may include, but is not limited to, mobile terminals such as mobile phones, laptops, professional graphics workstations, personal digital assistants (PDAs), tablet computers (PADs), portable media players (PMPs), input and authoring devices, and fixed terminals such as digital painting systems and desktop computers. Figure 5 The animation arrangement device shown is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of this application.
[0165] like Figure 5 As shown, the animation editing device may include a processing unit 1001 (e.g., a central processing unit, a graphics processing unit, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 1002 or a program loaded from a storage device 1003 into a random access memory (RAM) 1004. The RAM 1004 also stores various programs and data required for the operation of the animation editing device. The processing unit 1001, the read-only memory 1002, and the RAM 1004 are interconnected via a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Typically, the following systems can be connected to I / O interface 1006: input devices 1007 including, for example, touchscreens, touchpads, keyboards, mice, image sensors, microphones, accelerometers, gyroscopes, etc.; output devices 1008 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 1003 including, for example, magnetic tapes, hard disks, etc.; and communication devices 1009. Communication device 1009 allows the animation editing equipment to communicate wirelessly or wiredly with other devices to exchange data. Although animation editing equipment with various systems is shown in the figure, it should be understood that it is not required to implement or possess all the systems shown. More or fewer systems can be implemented alternatively.
[0166] Specifically, according to the embodiments disclosed in this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments disclosed in this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device, or installed from storage device 1003, or installed from read-only memory 1002. When the computer program is executed by processing device 1001, it performs the functions defined in the methods of the embodiments disclosed in this application.
[0167] The animation orchestration device provided in this application, employing the animation orchestration method based on exportable configuration objects as described in the above embodiments, can solve the technical problem of low animation rendering efficiency. Compared with the prior art, the beneficial effects of the animation orchestration device provided in this application are the same as those of the animation orchestration method based on exportable configuration objects provided in the above embodiments, and other technical features of this animation orchestration device are the same as those disclosed in the previous embodiment method, and will not be repeated here.
[0168] It should be understood that the various parts disclosed in this application can be implemented using hardware, software, firmware, or a combination thereof. In the description of the above embodiments, specific features, structures, materials, or characteristics can be combined in any suitable manner in one or more embodiments or examples.
[0169] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.
[0170] This application provides a computer-readable storage medium having computer-readable program instructions (i.e., a computer program) stored thereon, the computer-readable program instructions being used to execute the animation arrangement method based on a exportable configuration object in the above embodiments.
[0171] The computer-readable storage medium provided in this application may be, for example, a USB flash drive, but is not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to: electrical connections having one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, system, or device. The program code contained on the computer-readable storage medium may be transmitted using any suitable medium, including but not limited to: wires, optical cables, radio frequency (RF), etc., or any suitable combination thereof.
[0172] The aforementioned computer-readable storage medium may be included in the animation editing device; or it may exist independently and not be assembled into the animation editing device.
[0173] The aforementioned computer-readable storage medium carries one or more programs. When these programs are executed by an animation orchestration device, the animation orchestration device: responds to an orchestration operation by parsing the stage requirements of the animation elements corresponding to the orchestration operation and integrating them to generate a set of animation element stage node attributes; encapsulates the set of animation element stage node attributes into a singly linked list of nodes, and defines an array containing canvas information and the singly linked list nodes according to a preset orchestration specification to obtain an animation orchestration object structure; based on the animation orchestration object structure and the new element addition operation, modifies the attributes of each element stage node, constructs a stage linked list, and organizes it to obtain a configuration file; initializes the carrying unit corresponding to the configuration file through an animation renderer to obtain an animation container, and constructs the document object model element corresponding to the animation container; calls the control interface of the animation renderer, and processes the document object model element in the animation container according to the configured stage rules, and obtains the target orchestration animation.
[0174] Computer program code for performing the operations of this application can be written in one or more programming languages or a combination thereof, including object-oriented programming languages such as Java, Smalltalk, and C++, as well as conventional procedural programming languages such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).
[0175] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.
[0176] The modules described in the embodiments of this application can be implemented in software or hardware. The names of the modules do not necessarily limit the functionality of the unit itself.
[0177] The readable storage medium provided in this application is a computer-readable storage medium that stores computer-readable program instructions (i.e., a computer program) for executing the above-described animation choreography method based on an exportable configuration object, thereby solving the technical problem of low animation rendering efficiency. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided in this application are the same as those of the animation choreography method based on an exportable configuration object provided in the above embodiments, and will not be repeated here.
[0178] The above description is only a part of the embodiments of this application and does not limit the patent scope of this application. All equivalent structural transformations made under the technical concept of this application and using the contents of the specification and drawings of this application, or direct / indirect applications in other related technical fields, are included in the patent protection scope of this application.
Claims
1. An animation arrangement method based on a derivable configuration object, characterized by, The method comprises: in response to the arrangement operation, analyzing the staged requirements of the animation element corresponding to the arrangement operation, and integrating the generated animation element stage node attribute set; configuration information in the animation element stage node attribute set is integrated and packaged as an independent data unit with single linked list node characteristics, and a next stage pointing association identifier for stage connection is added to each animation element stage node attribute set, obtaining a single animation element stage single linked list node; According to the stage execution order of the animation preset, the single animation element stage single linked list node is sequentially classified into a preset data container, and a node array is obtained; extract the canvas information in the animation configuration requirement, and define the uniform data object framework of the canvas information and the node array, and integrate and package the defined canvas information and node array according to the preset structure, and obtain the animation arrangement object structure; Based on the animation arrangement object structure, in response to the adding operation of the new element, the stage requirement corresponding to the new element is analyzed, and a new animation element stage node attribute set is obtained; According to the adding operation of the new element and the new animation element stage node attribute set, the attribute information of the existing element stage node is modified, and the updated animation element stage node set is output; Based on the updated animation element stage node set, the association relationship between nodes is determined according to the connection logic of each element stage, so as to complete the construction of the stage linked list, and obtain the animation arrangement update object; Serializing the animation arrangement update object, and arranging the data format of the animation arrangement update object according to the preset configuration file specification, and outputting the configuration file; Through the animation renderer, the carrying unit corresponding to the configuration file is initialized, an animation container is obtained, and a document object model element corresponding to the animation container is constructed; Call the control interface of the animation renderer, and process the document object model element in the animation container according to the configured stage rule and state transition, and obtain the target arrangement animation.
2. The animation authoring method based on the derivable configuration object according to claim 1, wherein, The step of responding to the arrangement operation, analyzing the staged requirements of the animation element corresponding to the arrangement operation, and integrating the generated animation element stage node attribute set comprises: In response to the arrangement operation in the visual editor, the full-dimensional configuration elements of the animation element corresponding to the arrangement operation in each stage are analyzed; Each requirement dimension in the full-dimensional configuration element is respectively mapped to the attribute item corresponding to the animation element stage node, and the mapping relationship between each requirement dimension and the corresponding attribute item is obtained; According to the specification requirements of the animation arrangement object structure, combined with the mapping relationship between each requirement dimension and the corresponding attribute item, the attribute values corresponding to each mapping are integrated and packaged to generate the animation element stage node attribute set.
3. The animation authoring method based on the derivable configuration object according to claim 1, wherein, The step of completing the initialization of the carrying unit corresponding to the configuration file through the animation renderer, obtaining an animation container, and constructing a document object model element corresponding to the animation container comprises: The animation renderer parses the canvas information and the stage node attribute information of each element in the configuration file to form the canvas basic information and the element attribute details; According to the canvas basis information, the animation container meeting the rendering requirement is created, and the association between the animation container and the element attribute details is established, so as to generate the animation container with bound element attribute details; According to each element attribute detail associated with the animation container, the document object model element with corresponding configuration is constructed one by one.
4. The method of claim 1, wherein the animation of the configuration object is performed based on a user input. The step of calling the control interface of the animation renderer, state transition processing the document object model element in the animation container according to the configured stage rule, and obtaining the target arranged animation includes: Calling the control interface of the animation renderer, reading the stage delay duration, duration, transition logic, transition rhythm rule corresponding to the configuration file, and the initial attribute of the document object model element, generating the time sequence execution plan and state transition rule set of each element; According to the time sequence execution plan, the attribute change of each document object model element is triggered in turn, and the smooth transition processing between stages is performed according to the state transition rule set, so as to generate an animation instance; The time sequence synchronization and transition effect consistency of the animation instance are checked, and until all elements complete the state switching of all stages according to the rule, the target arranged animation is output.
5. The animation authoring method based on the derivable configuration object according to claim 4, wherein, The step of calling the control interface of the animation renderer, state transition processing the document object model element in the animation container according to the configured stage rule, and obtaining the target arranged animation includes: Parsing the change parameters of the document object model element in the time sequence execution plan and the state transition rule set, generating an element-specific execution and transition configuration list; According to the time sequence trigger time, attribute change item and transition parameter in the element-specific execution and transition configuration list, the attribute update and stage transition of each document object model element are started in turn, and the dynamic state of each element in the transition process is recorded, and an element state set is integrated to obtain. The transition progress and attribute change effect of each element in the element state set are checked, and after all elements complete the attribute update and smooth transition of the current stage according to the state transition rule set, a coherent dynamic presentation effect is formed, and an animation instance with initial playing state is output.
6. The method of claim 1, wherein the animation of the configuration object is based on a user input. After the step of calling the control interface of the animation renderer, state transition processing the document object model element in the animation container according to the configured stage rule, and obtaining the target arranged animation, the animation arrangement method based on the exportable configuration object further includes: Based on the target arranged animation and the element state change log and time sequence execution record recorded in the playing process, the actual effect information of each document object model element is collected; The actual effect information is compared with the preset time sequence parameter and transition effect standard in the stage rule, the consistency of each element state change, whether the time sequence synchronization deviation is within the allowable threshold, and whether the transition effect meets the expectation are analyzed, the abnormal feedback items are marked and the corresponding difference description is supplemented, and an animation feedback analysis report is output. The normal execution result, the abnormal feedback item and the difference description in the animation feedback analysis report are encapsulated according to the feedback information structure identifiable by the animation arrangement system to generate target feedback information, so as to optimize the animation arrangement configuration quality. 7.An animation arrangement device, characterized by comprising: The animation arrangement device comprises a memory, a processor and a computer program stored on the memory and executable on the processor, and the computer program is configured to implement the steps of the animation arrangement method based on the derivable configuration object according to any one of claims 1 to 6.
8. A storage medium, characterized by The storage medium is a computer readable storage medium, and the storage medium stores a computer program, and the computer program is executed by the processor to implement the steps of the animation arrangement method based on the derivable configuration object according to any one of claims 1 to 6.
Citation Information
Patent Citations
Agile arrangement method for multi-node sub-animation
CN119941932A
Method for displaying an animation during the starting phase of an electronic device and associated electronic device
US20190087200A1