Cross-terminal declarative animation adaptive arrangement method, system, device and storage medium

Abstract

This invention provides a cross-platform declarative animation adaptive orchestration method, system, device, and storage medium. The method includes: receiving animation configuration through the application layer's declarative orchestration layer and managing the existence state of components based on a context mechanism; parsing the configuration through the underlying rendering engine and implementing independent orchestration of on-screen and off-screen animations using a three-stage animation state model; automatically performing size measurement for layout attribute animations during the animation initialization phase to obtain the actual size of child nodes as the animation target value; and driving the interpolation calculation and rendering update of all attribute animations through a unique animation controller. This invention decouples animation logic from business logic, supports independent timing configuration for on-screen / off-screen animations, and automatically completes size detection for layout attribute animations, significantly improving the declarativeness, flexibility, and layout adaptability of animation orchestration in cross-platform frameworks.

Description

Technical Field

[0001] This invention relates to the field of cross-platform application development, and more specifically, to a cross-platform declarative animation adaptive orchestration method, system, device, and storage medium. Background Technology

[0002] With the rapid development of mobile internet technology, cross-platform application development frameworks (such as React Native, Flutter, and Weex) have become the mainstream technology choice for mobile development. These frameworks allow developers to use a single codebase to generate applications for both iOS and Android platforms, significantly reducing development and maintenance costs. In mobile applications, component on-screen animations (i.e., the entrance animation when a component appears) and off-screen animations (i.e., the exit animation when a component disappears) are key interaction requirements for improving user experience and the quality of interaction. Good animation effects can not only guide user attention but also provide smooth visual feedback, enhancing the professionalism and attractiveness of the application.

[0003] However, within the existing cross-platform framework technology system, implementing complex, flexible, and layout-adaptive on-screen / off-screen animations faces numerous technical challenges. Existing technologies have significant shortcomings in the following dimensions when implementing such animations: First, the implementation method is imperative, which is inconsistent with the declarative programming paradigm, resulting in high code coupling, heavy mental burden, and susceptibility to errors.

[0004] Second, Transform animations do not involve layout changes and cannot achieve the animation effects of layout properties, resulting in a discrepancy between visual footprint and layout footprint.

[0005] Third, existing web animation library solutions lack an automatic layout size detection mechanism, forcing developers to adopt fixed sizes or introduce additional backup components, resulting in a loss of layout flexibility or increased overhead.

[0006] Fourth, the existing solution lacks the ability to independently arrange on-screen / off-screen animations, and cannot configure different timing parameters for the entry and exit of the same component, which limits the expressiveness of the animation.

[0007] In view of this, the present invention provides a cross-platform declarative animation adaptive orchestration method, system, device and storage medium. Summary of the Invention

[0008] To address the problems in existing technologies, the present invention aims to provide a cross-platform declarative animation adaptive orchestration method, system, device, and storage medium, which overcomes the shortcomings of existing technologies, enables the decoupling of animation logic and business logic, supports independent timing configuration of on-screen / off-screen animations, and automatically completes the size detection of layout attribute animations, significantly improving the declarativeness, flexibility, and layout adaptability of animation orchestration in cross-platform frameworks.

[0009] Embodiments of the present invention provide a cross-platform declarative adaptive animation orchestration method, comprising the following steps: S110. Receive the declarative animation configuration for the target component through the declarative orchestration layer of the application layer. The declarative animation configuration includes the initial state, the on-screen target state, and the off-screen target state. S120. Based on the context mechanism, the top-level container component detects changes in child nodes, maintains the keep-alive state of the exiting component, and sends the existence state to the animation execution component through the state wrapper component. S130. The declarative animation configuration is parsed by the animation configuration parsing module of the underlying rendering engine to generate structured animation parameters, wherein the timing parameters of the on-screen animation and the off-screen animation are configured independently. S140. During the animation initialization phase, the size measurement module of the underlying rendering engine performs automatic size detection on the layout attributes configured as automatic values, and obtains the actual size of the child nodes after layout calculation as the animation target value. S150: Creates a unique animation controller through the animation execution management module of the underlying rendering engine, constructs corresponding easing animations based on the timing parameters of each animation attribute, drives the synchronous interpolation calculation and frame-by-frame rendering update of all animation attributes, and automatically triggers off-screen animations when the existence state changes from existence to non-existence.

[0010] Preferably, the declarative animation configuration in step S110 is declared through component properties. The initial state defines the starting value when the component is first mounted, the on-screen target state defines the target value after the component is displayed, and the off-screen target state defines the target value when the component is hidden. The configuration of the on-screen animation and the configuration of the off-screen animation are set independently through different configuration property groups. The on-screen animation configuration group includes a list of properties participating in the on-screen animation, the on-screen animation duration, the on-screen easing function, and the on-screen delay time. The off-screen animation configuration group includes a list of properties participating in the off-screen animation, the off-screen animation duration, the off-screen easing function, and the off-screen delay time.

[0011] Preferably, the context value passed by the context mechanism in step S120 includes: a boolean value indicating whether the component should exist in the rendering tree; and a callback function used to notify the upper layer of the exit completion signal after the child node exits the animation; the top-level container component detects the addition, deletion, and update of child nodes by comparing the key attribute of the child nodes, maintains two sets of states: the currently expected child node and the actually rendered child node, and maintains an exit state mapping table to record the completion state of each component during exit; the state wrapping component wraps each child node, passes the existence state downwards, and notifies the upper layer after the child node exits the animation.

[0012] Preferably, in step S130, the animation configuration parsing module receives the animation configuration parameters sent by the application layer through the bridging channel, parses them according to the mapping relationship between attribute identifiers and timing parameters, and constructs a structured list of configuration animation parameters for state transitions. Each configuration record for state transitions includes four dimensions: attribute type, animation duration, animation curve, and animation delay. The independent configuration of timing parameters includes: on-screen animation and off-screen animation can be configured with different sets of participating animation attributes, different attribute execution order, different animation duration, different easing functions, and different delay times.

[0013] Preferably, the automatic size detection mechanism in step S140 includes: when the width or height attribute is configured as an automatic value, the underlying rendering engine intervenes in the layout measurement process during the animation initialization stage, directly obtains the actual width and actual height values ​​determined by the component after solving the layout constraints, and replaces the automatic value identifier in the configuration with the measured value as the deterministic target value of the layout attribute animation; the automatic size detection mechanism follows the timing constraint of measuring first and then starting, and completes the parsing and binding of the target value before the animation starts.

[0014] Preferably, the animation execution management module in step S150 includes: a unique animation controller, which serves as a global clock source to uniformly manage the total duration and playback status of the animation, with all attributes participating in the animation sharing the same timeline of the controller; an easing animation construction unit, which creates corresponding mappers according to the animation curves specified in the configuration when each attribute switches states, mapping the linear progress of the controller to the independent non-linear progress of each attribute; a frame-by-frame interpolation driving unit, which calculates the interpolation result of the current frame based on the current progress, starting value, and target value of the mapper for each attribute in each frame callback of the controller and drives the rendering update; and a stage switching interface, which provides an interface to initiate stage switching from the initial state to the on-screen target or from the on-screen target to the off-screen target, resetting the controller and rebuilding the mapper sequence during switching.

[0015] Preferably, the animation attributes supported by the method include transparency, horizontal displacement, vertical displacement, horizontal scaling, vertical scaling, width, and height; the duration, easing function, and delay of each animation attribute are configured independently by the configuration center according to component type and business scenario; when multiple animation attributes participate in the animation at the same time, each attribute is executed independently according to its configured timing parameters, realizing the staggered timing arrangement in multi-attribute combined animation.

[0016] Embodiments of the present invention also provide a cross-platform declarative animation adaptive orchestration system for implementing the above-described cross-platform declarative animation adaptive orchestration method, wherein the cross-platform declarative animation adaptive orchestration system includes: The configuration receiving module receives the declarative animation configuration for the target component through the declarative orchestration layer of the application layer. The declarative animation configuration includes the initial state, the on-screen target state, and the off-screen target state. The state delivery module, based on the context mechanism, detects changes in child nodes through the top-level container component, maintains the keep-alive state of exiting components, and delivers the existence state to the animation execution component through the state wrapper component; The parameter configuration module parses the declarative animation configuration through the animation configuration parsing module of the underlying rendering engine to generate structured animation parameters, wherein the timing parameters of on-screen animation and off-screen animation are configured independently. During the animation initialization phase, the underlying rendering module performs automatic size detection on the layout attributes configured as automatic values ​​through the underlying rendering engine's size measurement module, and obtains the actual size of the child nodes after layout calculation as the animation target value. The frame-by-frame rendering module creates a unique animation controller through the animation execution management module of the underlying rendering engine. It constructs corresponding easing animations based on the timing parameters of each animation attribute, drives the synchronous interpolation calculation and frame-by-frame rendering update of all animation attributes, and automatically triggers off-screen animations when it detects that the existence state changes from existence to non-existence.

[0017] Embodiments of the present invention also provide a cross-platform declarative animation adaptive orchestration device, comprising: processor; A memory in which executable instructions of the processor are stored; The processor is configured to perform the steps of the cross-end declarative animation adaptive orchestration method by executing the executable instructions.

[0018] Embodiments of the present invention also provide a computer-readable storage medium for storing a program that, when executed, implements the steps of the above-described cross-platform declarative animation adaptive orchestration method.

[0019] The purpose of this invention is to provide a cross-platform declarative animation adaptive orchestration method, system, device, and storage medium that can decouple animation logic from business logic, support independent timing configuration of on-screen / off-screen animations, and automatically complete the size detection of layout attribute animations, significantly improving the declarativeness, flexibility, and layout adaptability of animation orchestration in cross-platform frameworks. Attached Figure Description

[0020] Other features, objects, and advantages of the invention will become more apparent from the following detailed description of non-limiting embodiments with reference to the accompanying drawings.

[0021] Figure 1 This is a flowchart of the cross-platform declarative animation adaptive arrangement method of the present invention.

[0022] Figure 2 This is a schematic diagram of the process steps for implementing the cross-platform declarative animation adaptive arrangement method of the present invention.

[0023] Figure 3 This is a flowchart of the declarative animation arrangement in the cross-end declarative animation adaptive arrangement method of the present invention.

[0024] Figure 4 This is a flowchart of the automatic layout size detection in the cross-platform declarative animation adaptive choreography method of the present invention.

[0025] Figure 5 This is a system architecture diagram of the cross-platform declarative animation adaptive orchestration system of the present invention.

[0026] Figure 6 This is a schematic diagram of the cross-end declarative animation adaptive orchestration device of the present invention.

[0027] Figure 7 This is a schematic diagram of the structure of a computer-readable storage medium according to an embodiment of the present invention. Detailed Implementation

[0028] The following specific examples illustrate the implementation of this application. Those skilled in the art can easily understand other advantages and effects of this application from the content disclosed herein. This application can also be implemented or applied through other different specific embodiments, and various details in this application can be modified or changed according to different viewpoints and application systems without departing from the spirit of this application. It should be noted that, unless otherwise specified, the embodiments and features in the embodiments of this application can be combined with each other.

[0029] The embodiments of this application will now be described in detail with reference to the accompanying drawings, so that those skilled in the art can easily implement the application. This application may be embodied in many different forms and is not limited to the embodiments described herein.

[0030] In this application, the terms "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., refer to specific features, structures, materials, or characteristics represented in connection with that embodiment or example, which are included in at least one embodiment or example of this application. Furthermore, the specific features, structures, materials, or characteristics represented may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate different embodiments or examples represented in this application, as well as features of different embodiments or examples.

[0031] Furthermore, the terms "first" and "second" are used for illustrative purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the representation of this application, "multiple" means two or more, unless otherwise explicitly specified.

[0032] For the purpose of clearly describing this application, devices that are not relevant to the description are omitted, and the same or similar components throughout the specification are given the same reference numerals.

[0033] Throughout this specification, when it is said that a device is "connected" to another device, this includes not only "direct connection" but also "indirect connection" by placing other components in between. Furthermore, when it is said that a device "comprises" a certain constituent element, unless otherwise stated otherwise, this does not exclude other constituent elements, but rather implies that other constituent elements may be included.

[0034] When we say that a device is "above" another device, this can mean that it is directly above the other device, or it can mean that other devices are present in between. Conversely, when we say that a device is "directly" "above" another device, there are no other devices present in between.

[0035] Although the terms first, second, etc., are used in some instances herein to refer to various elements, these elements should not be limited by these terms. These terms are used only to distinguish one element from another. For example, first interface and second interface, etc., are used. Furthermore, as used herein, the singular forms “a,” “an,” and “the” are intended to also include the plural forms unless the context indicates otherwise. It should be further understood that the terms “comprising,” “including,” indicate the presence of features, steps, operations, elements, components, items, kinds, and / or groups, but do not exclude the presence, occurrence, or addition of one or more other features, steps, operations, elements, components, items, kinds, and / or groups. The terms “or” and “and / or” as used herein are interpreted as inclusive, or mean any one or any combination thereof. Thus, “A, B, or C” or “A, B, and / or C” means “any one of: A; B; C; A and B; A and C; B and C; A, B, and C.” Exceptions to this definition will only occur if the combination of elements, functions, steps, or operations is inherently mutually exclusive in some way.

[0036] The technical terms used herein are for reference only to specific embodiments and are not intended to limit the scope of this application. The singular form used herein includes the plural form unless the statement explicitly indicates otherwise. The word "comprising" as used in the specification means to specify a particular characteristic, region, integer, step, operation, element, and / or component, and does not exclude the presence or addition of other characteristics, regions, integers, steps, operations, elements, and / or components.

[0037] Although not explicitly defined, all terms, including technical and scientific terms used herein, shall have the same meaning as commonly understood by one of ordinary skill in the art to which this application pertains. Terms defined in commonly used dictionaries shall be further interpreted as having a meaning consistent with the relevant technical literature and the content of this present application, and shall not be over-interpreted as having an ideal or overly formulaic meaning unless otherwise defined.

[0038] Figure 1 This is a flowchart of the cross-platform declarative animation adaptive orchestration method of the present invention. For example... Figure 1 As shown, the cross-platform declarative animation adaptive orchestration method of the present invention includes the following steps: S110. Receive the declarative animation configuration for the target component through the declarative orchestration layer of the application layer (JS side, JavaScript, a scripting language). The declarative animation configuration includes the initial state, the on-screen target state, and the off-screen target state.

[0039] S120. Based on the PresenceContext mechanism, the top-level container component detects changes in child nodes, maintains the keep-alive state of components in the exit process, and sends the existence state to the animation execution component through the state wrapper component.

[0040] S130: The declarative animation configuration is parsed through the animation configuration parsing module of the underlying rendering engine to generate structured animation parameters, in which the timing parameters of on-screen animation and off-screen animation are configured independently.

[0041] S140. During the animation initialization phase, the size measurement module of the underlying rendering engine performs automatic size detection on the layout attributes configured as automatic values, and obtains the actual size of the child nodes after layout calculation as the animation target value.

[0042] S150. A unique animation controller is created through the animation execution management module of the underlying rendering engine. Based on the timing parameters of each animation attribute, corresponding easing animations are constructed, driving the synchronous interpolation calculation and frame-by-frame rendering updates of all animation attributes. When the presence state changes from present to non-present, an off-screen animation is automatically triggered. This invention's cross-platform declarative animation adaptive orchestration method receives declarative animation configurations containing initial state, on-screen target state, and off-screen target state through the JS-side (application layer) declarative orchestration layer. This allows developers to complete the full description of the animation without writing any imperative animation control code, achieving complete decoupling between animation logic and business logic. It is entirely consistent with the declarative programming paradigm advocated by modern frameworks such as React and Vue, significantly reducing the mental burden on developers and the cost of code maintenance. By leveraging the PresenceContext (a context mechanism in React) mechanism, the top-level container component detects changes in child nodes and maintains the keep-alive state of components exiting the animation. This solves the problem of manually managing component lifecycles and animation timing when components exit, a problem inherent in existing technologies. It achieves automatic keep-alive and unified cleanup of components during exit animations, avoiding memory leaks and visual flickering. The underlying rendering engine's animation configuration parsing module generates structured animation parameters and enables independent configuration of on-screen and off-screen animation timing parameters. This overcomes the technical deficiency in existing technologies where on-screen and off-screen animations cannot be independently arranged, allowing the same component's entry and exit animations to have completely different rhythms and effects. By performing automatic size detection on layout properties configured as automatic values ​​during animation initialization, the actual size of child nodes after layout calculation is directly obtained as the animation target value. This solves the technical problem in existing technologies where layout property animations cannot automatically obtain target sizes, requiring developers to manually specify fixed values ​​or introduce additional backup components, achieving true layout-adaptive animation. By creating a unique animation controller to drive the synchronous interpolation calculation of all animation attributes, the frame rate alignment deviation and state competition issues that may occur when multiple attribute animations are executed in parallel are resolved, ensuring the smoothness and consistency of the animation. Simultaneously, by automatically triggering off-screen animations upon listening for state changes, the automatic triggering and execution of animations when components exit is achieved, further enhancing the declarative nature of animation orchestration. Therefore, the method of claim 1 of this invention achieves full-process declarative automation from animation configuration, state management, size detection, and animation execution, representing a significant advancement.

[0043] In a preferred embodiment, the declarative animation configuration in step S110 is declared through component properties. The initial state defines the starting value when the component is first mounted, the on-screen target state defines the target value after the component is displayed, and the off-screen target state defines the target value when the component is hidden. The configuration of on-screen animation and off-screen animation are set independently through different configuration property groups. The on-screen animation configuration group includes a list of properties participating in the on-screen animation, the on-screen animation duration, the on-screen easing function, and the on-screen delay time. The off-screen animation configuration group includes a list of properties participating in the off-screen animation, the off-screen animation duration, the off-screen easing function, and the off-screen delay time. By declaring the declarative animation configuration as a component property and clearly dividing the configuration into three independent parts—initial state, on-screen target state, and off-screen target state—this invention makes the animation lifecycle description clearer and more structured. Developers can intuitively understand what visual state the component should present before mounting, when displayed, and when hidden, reducing the understanding cost and error probability of the configuration. By setting different configuration attribute groups for on-screen and off-screen animations, with each group independently containing a list of attributes involved in the animation, animation duration, easing function, and delay time, completely independent configuration of on-screen and off-screen animations is achieved. This technical solution solves the problem of limited expressive power caused by existing web animation libraries (such as Motion) simply treating off-screen animations as reverse playback of on-screen animations. In practical applications, developers can easily implement differentiated interactive effects such as "quick pop-in when on-screen (short duration, elastic easing) and slow fade-out when off-screen (long duration, linear easing)," and also achieve differences in the attribute execution order such as "transparency and height change simultaneously when on-screen, and transparency changes first and height changes later when off-screen." This greatly enriches the interactive animation expressiveness of mobile applications, meets the product design pursuit of refined and differentiated animation effects, and improves the user experience.

[0044] In a preferred embodiment, the context values ​​passed by the PresenceContext mechanism in step S120 include: an isPresent boolean value, indicating whether the component should exist in the rendering tree; and an onExitComplete callback function, used to notify the upper layer of the exit completion signal after the child node exits its animation. The top-level container component is AnimatePresence (an animation presence container component used to manage exit animations), which detects the addition, deletion, and update of child nodes by comparing the key attribute of the child nodes, maintains two sets of states: the currently expected child nodes and the actually rendered child nodes, and maintains an exit state mapping table to record the completion state of each component during exit. The state wrapping component is PresenceChild (a presence state wrapping child component), which wraps each child node, passes the presence state downwards through PresenceContext, and notifies the upper layer through onExitComplete (exit completion callback function) after the child node exits its animation. This invention constructs a complete, cross-level component presence state management communication protocol by passing the isPresent boolean value and the onExitComplete callback function through the PresenceContext mechanism. The `isPresent` boolean value serves as the sole signal source for determining whether a component should exist in the render tree. This allows all animation-executing components to determine whether to trigger on-screen or off-screen animations based on a unified state, avoiding animation anomalies caused by inconsistent states from multiple sources. The `onExitComplete` callback function provides a bottom-up bubbling channel for the exit animation completion signal, solving the technical challenge in existing technologies where parent components cannot perceive when multiple child components' exit animations have all completed, thus making it impossible to determine when to perform final cleanup. By comparing the `key` attribute of child nodes with the top-level container component `AnimatePresence` to detect changes in child nodes and maintaining two sets of states—the currently expected child nodes and the actually rendered child nodes—along with an exit state mapping table to record the completion state of each component during exit, a fine-grained keep-alive and unified cleanup mechanism for components during exit animations is achieved. This mechanism ensures that even if multiple components execute exit animations simultaneously, the parent container can accurately track the completion progress of each component and perform a unified cleanup operation after all exit animations are completed. This avoids the performance overhead caused by frequent DOM operations and ensures the integrity of the component's state during the exit animation process, solving the industry problem in existing technologies where premature removal of components causes off-screen animations to fail to play.

[0045] In a preferred embodiment, the animation configuration parsing module in step S130 receives the animation configuration parameters sent from the JS side (application layer) through the bridging channel. Based on the mapping relationship between attribute identifiers and timing parameters, it parses and constructs a structured TransitionConfig (transition animation configuration object) animation parameter list. Each TransitionConfig record contains four dimensions: attribute type, animation duration, animation curve, and animation delay. Independent configuration of timing parameters includes: different sets of participating animation attributes, different attribute execution orders, different animation durations, different easing functions, and different delay times can be configured for on-screen and off-screen animations respectively. This invention, by receiving the animation configuration parameters sent from the JS side through the bridging channel through the animation configuration parsing module and parsing and constructing a structured TransitionConfig animation parameter list according to the mapping relationship between attribute identifiers and timing parameters, achieves efficient and accurate conversion from JS-side declarative configuration to executable instructions of the underlying rendering engine. Each TransitionConfig record contains four dimensions: attribute type, animation duration, animation curve, and animation delay. This structured parameter representation makes the transmission and storage of animation parameters more standardized, facilitating batch processing and optimization by the underlying engine. By supporting the configuration of different sets of animation attributes, different execution orders of attributes, different animation durations, different easing functions, and different delay times for on-screen and off-screen animations, this invention solves the core defect in existing technologies where animation timing parameters cannot be independently configured. Specifically, developers can configure on-screen animations to execute transparency, height, and displacement simultaneously, and off-screen animations to execute transparency and displacement first, followed by a delay before height contraction, achieving a graceful exit effect of "fading out and translating first, then contracting and disappearing." This multi-dimensional and multi-layered independent configuration capability enables this invention to adapt to various application scenarios, from simple components to complex interactive animations, significantly improving the flexibility and expressiveness of animation systems.

[0046] In a preferred embodiment, the automatic size detection mechanism in step S140 includes: when the width or height attribute is configured as an automatic value, the underlying rendering engine intervenes in the layout measurement process during the animation initialization phase, directly obtaining the actual width and height values ​​determined by the component after solving the layout constraints, and replacing the automatic value identifier in the configuration with the measured value as the deterministic target value of the layout attribute animation. The automatic size detection mechanism follows the timing constraint of measurement first, then startup, completing the parsing and binding of the target value before the animation starts. This invention, through the automatic size detection mechanism, allows the underlying rendering engine to actively intervene in the layout measurement process during the animation initialization phase when the width or height attribute is configured as an automatic value, directly obtaining the actual width and height values ​​determined by the component after solving the layout constraints, and replacing the automatic value identifier in the configuration with the measured value as the deterministic target value of the animation. This technical solution fundamentally solves the industry technical problem of difficulty in obtaining the target value of layout attribute animation in cross-platform frameworks. In existing technologies, to implement an animation where the height expands from 0 to adaptively expand the content, developers either need to know the precise height of the content in advance (which is almost impossible in dynamic content scenarios) or use an indirect solution of rendering an invisible backup component for measurement (introducing additional rendering overhead and code complexity). This invention directly reads the layout calculation results at the underlying rendering engine level, completing the size acquisition without rendering any additional components. This ensures the accuracy of size measurement while avoiding additional performance overhead. Simultaneously, by adhering to the "measure first, start later" timing constraint, it ensures that the target values ​​of all layout properties have been resolved to deterministic values ​​before the animation starts, avoiding visual jumps caused by changes in target values ​​during animation execution. This mechanism allows developers to easily set `height: auto` as they would with ordinary CSS animations to achieve smooth adaptive height expansion / collapse animations, significantly improving development efficiency and animation quality. It has a particularly significant technical advantage when handling scenarios such as list item insertion and deletion, accordion-style collapsible panels, and dynamic content pop-ups.

[0047] In a preferred embodiment, the animation execution management module in step S150 includes: a unique animation controller, which acts as a global clock source to uniformly manage the total duration and playback status of the animation, with all attributes participating in the animation sharing the same controller's timeline; an easing animation construction unit, which creates corresponding CurvedAnimation (curved animation, animation with easing curves) based on the animation curve specified in the TransitionConfig of each attribute, mapping the linear progress of the controller to the independent non-linear progress of each attribute; a frame-by-frame interpolation driving unit, which calculates the interpolation result of the current frame based on the current progress, starting value, and target value of the CurvedAnimation of each attribute in the controller's frame callback and drives the rendering update; and a stage switching interface, which provides an interface to initiate stage switching from the initial state to the on-screen target or from the on-screen target to the off-screen target, resetting the controller and rebuilding the CurvedAnimation sequence during switching. This invention, by using a unique animation controller as a global clock source to uniformly manage the total duration and playback status of the animation, and with all attributes participating in the animation sharing the same controller's timeline, fundamentally avoids frame rate alignment deviations and state competition problems that may occur when using multiple independent controllers in parallel multi-attribute animations. This design ensures that even when dozens of attributes participate in the animation simultaneously, the time base of each attribute remains completely consistent, thus guaranteeing the timing accuracy and visual consistency of multi-attribute combined animations. Through the easing animation building unit, corresponding CurvedAnimations are created based on the animation curves specified in the TransitionConfig of each attribute, mapping the linear progress of the controller to the independent non-linear progress of each attribute, achieving differentiated easing effects under a unified timeline. For example, within the same time period, transparency can use linear easing to achieve a uniform fade-in, while displacement can use elastic easing to achieve a bounce-in effect. Both are executed in coordination under the same clock drive, ensuring both overall timing synchronization and personalized movement rhythms for each attribute. The frame-by-frame interpolation driving unit calculates the interpolation results and drives rendering updates in the controller's frame callbacks, ensuring animation smoothness. The stage switching interface provides the ability to switch from the initial state to the on-screen target or from the on-screen target to the off-screen target. During switching, the controller is reset and the CurvedAnimation sequence is rebuilt, ensuring a smooth transition between stages and avoiding visual jumps during state transitions. Therefore, the technical solution of this claim has significant progress compared with the prior art in terms of the accuracy, smoothness and coordination of animation execution.

[0048] In a preferred embodiment, the method supports animation attributes including transparency, horizontal displacement, vertical displacement, horizontal scaling, vertical scaling, width, and height. The duration, easing function, and delay of each animation attribute are independently configured by component type and business scenario through a configuration center. When multiple animation attributes participate in the animation simultaneously, each attribute executes independently according to its configured timing parameters, achieving staggered timing arrangement in multi-attribute combined animations. This invention, by supporting seven animation attributes (transparency, horizontal displacement, vertical displacement, horizontal scaling, vertical scaling, width, and height), covers the vast majority of visual interaction animation needs in mobile application development, providing developers with rich animation expression methods. By independently configuring the duration, easing function, and delay of each animation attribute by component type and business scenario through a configuration center, complete decoupling of animation parameters from code is achieved. In practical applications, this means that product managers or operations personnel can adjust the animation rhythm of a page element through dynamic configuration in the configuration center without modifying code or redeploying the application version, greatly improving the flexibility and efficiency of animation strategy iteration. By supporting the independent execution of multiple animation attributes according to their respective configured timing parameters, the staggered timing arrangement in multi-attribute combined animations is achieved. For example, a developer can configure the on-screen animation of a pop-up component: the scaling attribute uses elastic easing with a duration of 500ms, the transparency attribute uses linear easing with a duration of 300ms and a delay of 100ms, and the displacement attribute uses easing in and easing out with a duration of 400ms. The three attributes are automatically arranged and executed according to their independently configured durations, easing, and delays, ultimately forming a composite animation effect of scaling pop-in, fading in slightly later, and synchronous displacement. This is something that existing technologies that only support a single animation curve or a uniform duration cannot achieve. The technical solution of this claim, through the ability to configure and stagger multiple attributes independently, enables developers to create complex combined animations with rich layers and varied rhythms, significantly improving the visual quality and user experience of mobile applications.

[0049] Figure 2 This is a schematic diagram illustrating the process steps of implementing the cross-platform declarative animation adaptive orchestration method of the present invention. For example... Figure 1 and 2As shown, this invention proposes a layered animation orchestration architecture in a cross-platform framework. This architecture adopts a two-tier design: a JS-side declarative orchestration layer and a low-level rendering engine animation execution layer. Through configuration transfer and state coordination between layers, a complete closed loop from declarative animation description to low-level animation driving is achieved. Specifically, the JS-side declarative orchestration layer is located at the top level of the architecture, responsible for providing declarative animation configuration interfaces and component orchestration logic. This layer includes three core components: AnimatePresence (top-level container component), responsible for detecting changes in child nodes and managing the persistence and cleanup of components during exit; PresenceChild (state wrapper component), as an intermediate layer, responsible for managing the existence state of individual components and collecting exit signals from child nodes; and Animated.View (animation execution component), as the bottom layer, responsible for listening to changes in existence state and triggering animation execution. These three layers of components communicate across layers through the PresenceContext context mechanism for state transfer and signal communication.

[0050] The underlying rendering engine animation execution layer, located at the lower layer of the architecture, is responsible for parsing animation configurations, performing animation calculations, and driving rendering updates. This layer includes: an animation configuration parsing module, used to parse animation configurations passed from the JS side and generate structured animation parameters; an animation execution management module, used to manage animation controllers, calculate animation interpolations, and drive rendering updates for each frame; and a size measurement module, used during the animation initialization phase to automatically detect the target values ​​of layout attribute animations and directly replace the automatic value identifiers in the configuration with the actual sizes of child nodes determined after layout calculations by the rendering engine. The method of this invention includes the following core steps: Step S110: Receive the declarative animation configuration for the target component through the declarative orchestration layer on the JS side. This declarative animation configuration includes three parts: initial state, which defines the initial visual state when the component is first mounted; animate state, which defines the target visual state that the component should achieve while it exists in the render tree; and exit state, which defines the target visual state that the component should achieve during its removal from the render tree.

[0051] Step S120 involves managing the presence state based on the PresenceContext mechanism. The top-level container component, AnimatePresence, detects the addition, deletion, and updating of child nodes by comparing their key attributes. When a child node is detected to be removed, AnimatePresence does not immediately remove it from the rendering tree but keeps it in the list of actually rendered child nodes. Simultaneously, it marks the presence state (isPresent) as false using PresenceContext to trigger an exit animation. PresenceChild, as an intermediate wrapper component, is responsible for receiving the presence state from the upper layer and passing it down to the Animated.View component.

[0052] Step S130 involves parsing the declarative animation configuration through the animation configuration parsing module of the underlying rendering engine. The JS side sends the declarative animation configuration parameters to the underlying rendering engine via a bridge channel. Upon receiving these parameters, the animation configuration parsing module parses them according to the mapping relationship between attribute identifiers and timing parameters, constructing a structured TransitionConfig animation parameter list. Each TransitionConfig record contains four dimensions: attribute type (AnimationType), animation duration (Duration), animation curve (Curve), and animation delay (Delay). In this step, the timing parameters for on-screen and off-screen animations are processed and stored independently, laying the foundation for subsequent independent execution.

[0053] In step S140, during the animation initialization phase, automatic size detection is performed through the size measurement module of the underlying rendering engine. When it detects that the width or height attribute is configured as auto, the size measurement module intervenes in the layout measurement process before the animation starts. Specifically, the rendering engine first performs an off-screen layout measurement with the complete content. In this measurement, the child component calculates the actual required width and height based on its content and the constraints of its parent container. The size measurement module directly reads the actual size values ​​of the child nodes determined after this layout calculation, and then replaces the auto value flag in the configuration with the deterministic value obtained from this measurement, using it as the target value for the layout attribute animation. The entire process is completely transparent to the developer.

[0054] Step S150: The animation execution is driven by the animation execution management module of the underlying rendering engine. The animation execution management module creates a unique AnimationController as a global clock source. For each property participating in the animation, a corresponding CurvedAnimation is created based on the animation curve specified in its TransitionConfig, mapping the linear progress of the controller to an independent non-linear progress for that property. In the controller's callback for each frame, the interpolation result for the current frame is calculated based on the current progress, starting value, and target value of each property's CurvedAnimation, driving the rendering engine to update the interface. Simultaneously, the animation execution management module provides a stage switching interface, supporting stage switching from the initial state to the on-screen target (initial→animate) or from the on-screen target to the off-screen target (animate→exit). When the Animated.View component detects a change in its presence state from true to false through the PresenceContext, it automatically calls the stage switching interface, triggering the execution of the off-screen animation.

[0055] Figure 3 This is a flowchart of the declarative animation orchestration in the cross-platform declarative animation adaptive orchestration method of the present invention. For example... Figure 3 As shown in the figure, the React cross-platform framework is used as an example in this embodiment, but the technical solution of the present invention is also applicable to other declarative frameworks such as Vue.

[0056] As the top-level container, the AnimatePresence component's core logic includes: First, child node change detection. AnimatePresence iterates through its props.children (property child nodes / child components) using React.Children.map, using child.key as a unique identifier. In each rendering cycle, it compares the set of keys in the current props.children with the set of keys from the previous rendering. Newly added keys indicate child node insertion, and missing keys indicate child node deletion. Second, dual-state maintenance. AnimatePresence internally maintains two states: _desiredChildren (the child nodes the user expects to render, i.e., the content of props.children) and _renderingChildren (the child nodes actually rendered). When a child node deletion is detected, AnimatePresence does not immediately remove the child node from _renderingChildren, but retains it, but marks the corresponding existence state of the child node as "exiting". Third, exit state tracking. AnimatePresence maintains an exitStates map, recording the key of each exiting component and whether its exit animation is complete. Fourth, unified cleanup. When all entries in the exitStates map are marked as complete, AnimatePresence triggers an update, removing all exited components from _renderingChildren at once, completing the cleanup.

[0057] The PresenceChild component, acting as a state wrapper component, has the following responsibilities: First, state delivery. PresenceChild receives the isPresent property from its parent AnimatePresence and passes this value, along with the onExitComplete callback function, down to all child components via PresenceContext.Provider. Second, upward notification. PresenceChild itself is also responsible for collecting exit completion signals from its direct child nodes. When all its child nodes have notified the parent AnimatePresence of the exit completion via the onExitComplete callback, PresenceChild calls the onExitComplete callback passed from its parent AnimatePresence, notifying the parent component and all its child components that the exit animation has ended.

[0058] The Animated.View component, acting as the animation execution component, is responsible for consuming the PresenceContext. Specifically, Animated.View obtains the isPresent value provided by the PresenceContext through the React.useContext hook (a React hook for consuming the context). It uses the React.useEffect hook (a React hook for handling side effects) to listen for changes in isPresent. When isPresent changes from false to true (i.e., the component goes from non-existent to present), Animated.View triggers the on-screen animation. When isPresent changes from true to false (i.e., the component goes from present to exiting), Animated.View triggers the off-screen animation. After the off-screen animation completes, Animated.View calls the onExitComplete callback in the context to notify the parent component that the exit animation has completed.

[0059] Figure 4 This is a flowchart of the automatic layout size detection in the cross-platform declarative animation adaptive orchestration method of the present invention. For example... Figure 4 As shown, the AnimatePresence container component creates a PresenceChild component for each child node in its render function, passing in the isPresent property (whose value is true / false depending on whether the child node is added / persistent or deleted) and an onExitComplete callback (used to update the exitStates map). After receiving these props, the PresenceChild component creates a new Context object containing isPresent (directly passed through) and onExitComplete (a wrapped callback used to aggregate child node completion signals). The Animated.View component consumes this Context and triggers animations based on changes in isPresent. When the Animated.View's exit animation completes, it calls onExitComplete in the Context. Upon receiving this call, PresenceChild checks if all child nodes have exited; if so, it calls the onExitComplete passed from the parent AnimatePresence component. Through this layered propagation and aggregation mechanism, the exit completion signal can reliably bubble up from the lowest-level animation component to the highest-level container component.

[0060] One of the core innovations of this invention lies in the way the underlying rendering engine handles and executes animation configurations. The animation configuration parsing module receives animation configuration parameters from the JS side via a bridge channel, for example, through JSI (JavaScript Interface, React Native communication mechanism) or Native Modules (modules in cross-platform frameworks that call native functions). The animation configuration parsing module iterates through each property in the configuration, generating two TransitionConfig records for each property: one for on-screen (from initial to animate) and one for off-screen (from animate to exit). Each record contains the property type (e.g., AnimationType.kOpacity, AnimationType.kHeight, AnimationType.kTranslateX), animation duration, animation curve type (e.g., Curve.easeIn, Curve.easeOut), and delay time. These structured records are stored in the configuration table of the animation execution management module.

[0061] The animation execution management module uses a single AnimationController to uniformly drive the interpolation calculation of all animation properties. Its core mechanism is as follows: A single animation controller: An `AnimationController` instance is created, which internally maintains an `AnimationClock` to generate linear progress values ​​from 0 to 1. All properties involved in the animation share the same `AnimationController`'s timeline. This design ensures strict synchronization of multi-property animations across time, avoiding frame rate alignment discrepancies and state race issues that can occur when using multiple independent controllers. For example, when an animation has a total duration of 400ms, the `AnimationController` will linearly increase from 0 to 1 within 400ms.

[0062] Easing Animation Construction: For each property involved in the animation, a CurvedAnimation instance is created based on the Curve type in its TransitionConfig. A CurvedAnimation is a wrapper that maps the linear progress of an AnimationController to a non-linear progress. For example, for an easeIn curve, an input of 0.5 linear progress might output an actual progress of approximately 0.25; for an easeOut curve, an input of 0.5 might output an actual progress of approximately 0.75. Each CurvedAnimation holds a reference to a shared AnimationController, so all CurvedAnimations have a consistent timeline baseline, but their output progress is independent.

[0063] Frame-by-frame interpolation driven: During each frame of rendering, the AnimationController triggers a callback, broadcasting the current linear progress value, for example, driven by CADisplayLink (screen refresh synchronization timer) or Choreographer (frame animation synchronizer). Each attribute's CurvedAnimation receives this linear progress and calculates a non-linear progress value using its internal curve function. Then, the interpolation calculation unit of the animation execution management module performs linear interpolation based on the attribute's initial value, target value, and current non-linear progress: Current value = Initial value + (Target value - Initial value) × Progress. For non-numeric attributes (such as color), the corresponding interpolation algorithm (such as interpolating RGB components separately) is used. The calculated current value is passed to the rendering engine, driving the UI update.

[0064] Phase Transition Interface: The animation execution management module provides the `startPhase` interface (start phase transition interface, `phase`), where `phase` can be `Phase.initialToAnimate` (on-screen) or `Phase.animateToExit` (off-screen). When this interface is called, the module performs the following operations: First, it stops the current `AnimationController` (if it is running). Second, it resets the current progress of the `AnimationController` to 0. Third, based on the new phase, it rebuilds the `CurvedAnimation` sequence, with each property using the `TransitionConfig` of the corresponding phase. Fourth, it resets the starting value (the actual value in the current layout) and target value (the new state value in the configuration) of each property. Fifth, it starts the `AnimationController`, beginning the new animation.

[0065] When an Animated.View component receives a signal to trigger an on-screen animation, and its animate configuration has a height value of auto, the automatic size detection process begins. This process follows a "measure first, then start" timing constraint and includes the following sub-steps: In step S141, the animation system detects that an on-screen animation needs to be executed and that there is a layout attribute configured as auto.

[0066] In step S142, the animation system calls the underlying rendering engine's `performLayoutPass` method (execute layout measurement process) to perform an off-screen layout measurement. During this measurement, the `Animated.View` component is laid out with its complete child content. The rendering engine, based on the layout constraints passed from the parent container (e.g., a fixed width constraint and unlimited or adaptive height constraints), allows the child components to calculate their required dimensions. Ultimately, the child components calculate the actual required width and height based on their content (such as text, images, or nested views).

[0067] In step S143, the size measurement module reads the actual width and height values ​​of the sub-component from the layout results of the rendering engine. These values ​​are deterministic values ​​obtained after solving the layout constraints.

[0068] In step S144, the size measurement module replaces the "auto" placeholder in the animation configuration with the actual size value measured in step S143. For example, it replaces "height: auto" with "height: 150" (assuming the measurement result is 150 logical pixels). At this point, the target value for the animation is completely determined.

[0069] In step S145, the dimension measurement module returns the modified animation configuration, which includes deterministic target values, to the animation execution management module.

[0070] In step S146, the animation execution management module starts the animation using a deterministic target value. During the subsequent animation, the height property will smoothly change from its initial value (e.g., 0) to the target value (e.g., 150), driving the rendering engine to update the layout size of the component frame by frame. The parent node and sibling nodes will respond to each size change and rearrange themselves, thus achieving a true layout animation effect.

[0071] This mechanism eliminates the need for developers to manually calculate or specify component dimensions. They can simply set the layout property to `auto`, and the framework will automatically handle all the tedious measurement and binding work. This not only simplifies the code but also allows the animation system to perfectly adapt to dynamic content and different screen sizes.

[0072] This embodiment uses a dynamic list, a common feature in mobile applications, as an example to illustrate in detail the application and superior effects of the technical solution of the present invention in a real-world scenario.

[0073] Screen loading process (inserting animation): When a user action causes a new list item to be inserted into the list, the AnimatePresence component detects the addition of a child node by comparing the key (a unique identifier used in React to identify list items). The Animated.View component of this new list item is rendered for the first time, with its initial state set to: opacity of 0, height of 0, and translateX of -300 logical pixels. At this point, the list item is visually invisible, and because its height is 0, it does not occupy any space in the layout.

[0074] The animation framework detects that the component needs to perform an on-screen animation and begins processing the `animate` target state. In the `animate` configuration, the opacity target is 1, the horizontal displacement target is 0, and the height target is `auto`. The animation framework detects that the `height` value is `auto` and immediately triggers the aforementioned automatic size measurement mechanism. It performs an off-screen layout, allowing the list item to be laid out with its full content (including internal text, icons, etc.), and measures its actual height, for example, 150 logical pixels. Then, the framework replaces `auto` with this measured value as the termination value for the height animation.

[0075] Subsequently, the animation execution management module drives the on-screen animation according to the transition configuration. In this embodiment, the transition is configured as follows: transparency animation duration 300ms, easing function ease-in (easing function: slow at first, then fast); height animation duration 400ms, easing function ease-in; horizontal displacement animation duration 400ms, easing function ease-in. The animations of the three attributes start simultaneously without delay.

[0076] Within the 400ms animation duration, the visual effects are as follows: the opacity smoothly changes from 0 to 1, gradually revealing the list items; the horizontal displacement smoothly changes from -300 to 0, with the list items sliding in from the left; the height smoothly increases from 0 to 150 logical pixels, visually appearing as the list items gradually expand downwards from zero height. Since the change in the height attribute represents a real change in layout size, the parent container (the list container) responds in real-time to each height change, gradually pushing the other list items below downwards, creating a smooth "push-out" effect. When the animation completes, the new list items are fully revealed, and the list items below them have also smoothly moved to their new positions.

[0077] Off-screen process (deleting animation): When a user action causes an existing list item to be deleted, the AnimatePresence component detects the reduction in child nodes through key comparison. Instead of immediately removing the component from the render tree, it sets its isPresent state to false via the PresenceContext, triggering an off-screen animation.

[0078] The configuration for off-screen animations is completely different from that for on-screen animations. In this embodiment, transitionExit is configured as follows: transparency animation duration 200ms, easing function ease-out (easing function: fast at first, slow later); horizontal displacement animation duration 200ms, easing function ease-out; height animation duration 200ms, easing function ease-out, with a delay of 100ms.

[0079] The animation execution management module drives the off-screen animation according to this configuration. The timing is as follows: At 0ms, the transparency and horizontal displacement animations start immediately, while the height animation is not started due to a 100ms delay. During 0-200ms, the transparency smoothly decreases from 1 to 0, and the list items gradually fade out; simultaneously, the horizontal displacement smoothly changes from 0 to 0 (the target value is also 0, so there is no displacement change, or it changes to other values ​​according to the configuration). At 100ms, the height animation starts. At this time, the transparency and horizontal displacement animations have been half executed. During 100-300ms, the height smoothly shrinks from the current 150 logical pixels to 0. Due to the height shrinkage animation, the parent container responds to the height change, gradually pushing the list items below upwards. When 200ms, the transparency and horizontal displacement animations end, and the list items are completely transparent. When 300ms, the height animation ends, the height of the list items becomes 0, and they no longer occupy space in the layout. At this time, Animated.View calls the onExitComplete callback to notify the parent layer that the exit is complete. Once AnimatePresence receives completion signals from all exiting components, it finally removes the list item from the actual render tree.

[0080] Through the timing design of the off-screen animations described above (especially the 100ms delay in the height animation), a "fade out first, then shrink" visual effect was achieved. This avoids the visual abruptness problem caused by premature height collapse leading to compression and deformation of content during the fade-out process, making the deletion animation more elegant and natural. Simultaneously, the height increase of the on-screen animation is synchronized with the fade-in and slide-in, showcasing the smoothness of the element "expanding and appearing." This embodiment fully demonstrates the powerful capabilities of this invention in independently arranging the timing of on-screen / off-screen animations and achieving complex combined animation effects.

[0081] By adopting the above technical solution, the present invention has the following advantages over the prior art: First, it implements fully declarative animation orchestration. Developers only need to declare the initial state, on-screen target, and off-screen target on the component, and the framework automatically handles the triggering, execution, and cleanup of the animation, which fully conforms to the declarative programming paradigm and greatly reduces complexity.

[0082] Secondly, it enables independent arrangement of on-screen and off-screen animations. The entrance and exit animations of the same component can have completely different combinations of attributes, durations, easing, and delays, providing endless possibilities for achieving refined interaction design.

[0083] Third, it implements automatic size detection for layout property animations. The animation target values ​​for width / height can be set to auto, and the system automatically completes the measurement and executes the animation, perfectly supporting adaptive layouts without requiring developers to write any additional measurement code.

[0084] Fourth, through the architecture of a single animation controller and independent easing animation, strict synchronization of multi-attribute animation and unified differentiated easing are achieved, ensuring the smoothness of animation performance and the consistency of visual effects.

[0085] Figure 5 This is a system architecture diagram of the browser connector service in the cross-platform declarative animation adaptive orchestration system of the present invention. Figure 5 As shown, the cross-platform declarative animation adaptive orchestration system 5 of the present invention includes: The configuration receiving module 51 receives the declarative animation configuration for the target component through the application layer's declarative orchestration layer. The declarative animation configuration includes the initial state, the on-screen target state, and the off-screen target state.

[0086] The status delivery module 52, based on the context mechanism, detects changes in child nodes through the top-level container component, maintains the keep-alive state of the exiting component, and delivers the existence state to the animation execution component through the status wrapper component.

[0087] The parameter configuration module 53 parses the declarative animation configuration through the animation configuration parsing module of the underlying rendering engine and generates structured animation parameters, in which the timing parameters of on-screen animation and off-screen animation are configured independently.

[0088] In the animation initialization phase, the underlying rendering module 54 performs automatic size detection on the layout attributes configured as automatic values ​​through the size measurement module of the underlying rendering engine, and obtains the actual size of the child nodes after layout calculation as the animation target value.

[0089] The frame-by-frame rendering module 55 creates a unique animation controller through the animation execution management module of the underlying rendering engine. It constructs corresponding easing animations based on the timing parameters of each animation attribute, drives the synchronous interpolation calculation and frame-by-frame rendering update of all animation attributes, and automatically triggers off-screen animations when it detects that the existence state changes from existence to non-existence.

[0090] In summary, the cross-platform declarative animation adaptive orchestration system of the present invention can decouple animation logic from business logic, support independent timing configuration of on-screen / off-screen animations, and automatically complete the size detection of layout attribute animations, significantly improving the declarativeness, flexibility and layout adaptability of animation orchestration in cross-platform frameworks.

[0091] This invention also provides a cross-platform declarative adaptive animation orchestration apparatus, including a processor and a memory storing executable instructions for the processor. The processor is configured to execute steps of a cross-platform declarative adaptive animation orchestration method via executing the executable instructions.

[0092] As shown above, the cross-platform declarative animation adaptive orchestration device of the present invention in this embodiment can decouple animation logic from business logic, support independent timing configuration of on-screen / off-screen animations, and automatically complete the size detection of layout attribute animations, significantly improving the declarativeness, flexibility and layout adaptability of animation orchestration in cross-platform frameworks.

[0093] Those skilled in the art will understand that various aspects of the present invention can be implemented as systems, methods, or program products. Therefore, various aspects of the present invention can be specifically implemented in the following forms: a completely hardware implementation, a completely software implementation (including firmware, microcode, etc.), or a combination of hardware and software aspects, collectively referred to herein as a "circuit," "module," or "platform."

[0094] Figure 6 This is a schematic diagram of the cross-platform declarative animation adaptive orchestration device of the present invention. See below for reference. Figure 6 To describe an electronic device 600 according to this embodiment of the present invention. Figure 6 The electronic device 600 shown is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of the present invention.

[0095] like Figure 6 As shown, the electronic device 600 is presented in the form of a general-purpose computing device. The components of the electronic device 600 may include, but are not limited to: at least one processing unit 610, at least one storage unit 620, a bus 630 connecting different platform components (including storage unit 620 and processing unit 610), a display unit 640, etc.

[0096] The storage unit stores program code, which can be executed by the processing unit 610 to perform the steps described in the method section of this specification according to various exemplary embodiments of the present invention. For example, the processing unit 610 can perform actions such as... Figure 1 The steps are shown in the figure.

[0097] Storage unit 620 may include readable media in the form of volatile storage units, such as random access memory (RAM) 6201 and / or cache memory 6202, and may further include read-only memory (ROM) 6203.

[0098] Storage unit 620 may also include a program / utility 6204 having a set (at least one) program module 6205, such program module 6205 including but not limited to: operating system, one or more application programs, other program modules and program data, each or some combination of these examples may include an implementation of a network environment.

[0099] Bus 630 can represent one or more of several types of bus structures, including a memory cell bus or memory cell controller, a peripheral bus, a graphics acceleration port, a processing unit, or a local bus using any of the multiple bus structures.

[0100] Electronic device 600 can also communicate with one or more external devices 700 (e.g., keyboard, pointing device, Bluetooth device, etc.), and with one or more devices that enable a user to interact with electronic device 600, and / or with any device that enables electronic device 600 to communicate with one or more other computing devices (e.g., router, modem, etc.). This communication can be performed via input / output (I / O) interface 650. Furthermore, electronic device 600 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via network adapter 660. Network adapter 660 can communicate with other modules of electronic device 600 via bus 630. It should be understood that, although not shown in the figures, other hardware and / or software modules can be used in conjunction with electronic device 600, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage platforms.

[0101] This invention also provides a computer-readable storage medium for storing a program, which, when executed, implements the steps of a cross-platform declarative animation adaptive orchestration method. In some possible implementations, various aspects of the invention can also be implemented as a program product comprising program code that, when run on a terminal device, causes the terminal device to perform the steps described in the above-described method section of this specification according to various exemplary embodiments of the invention.

[0102] As shown above, the cross-platform declarative animation adaptive orchestration system of the present invention in this embodiment can decouple animation logic from business logic, support independent timing configuration of on-screen / off-screen animations, and automatically complete the size detection of layout attribute animations, significantly improving the declarativeness, flexibility and layout adaptability of animation orchestration in cross-platform frameworks.

[0103] Figure 7 This is a schematic diagram of the structure of the computer-readable storage medium of the present invention. (Reference) Figure 7 As shown, a program product 800 for implementing the above-described method according to an embodiment of the present invention is described. It may employ a portable compact disc read-only memory (CD-ROM) and include program code, and may run on a terminal device, such as a personal computer. However, the program product of the present invention is not limited thereto. In this document, the readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system, apparatus, or device.

[0104] The program product may employ any combination of one or more readable media. A readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of readable storage media (a non-exhaustive list) include: electrical connections having one or more wires, portable 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.

[0105] Computer-readable storage media may include data signals propagated in baseband or as part of a carrier wave, carrying readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A readable storage medium may also be any readable medium other than a readable storage medium that can transmit, propagate, or transfer a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the readable storage medium may be transmitted using any suitable medium, including but not limited to wireless, wired, optical fiber, RF, etc., or any suitable combination thereof.

[0106] Program code for performing the operations of this invention can be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java and C++, and conventional procedural programming languages ​​such as C or similar languages. The program code can execute entirely on the user's computing device, partially on the user's device, as a standalone software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server. In cases involving remote computing devices, the remote computing device can be connected to the user's computing device via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computing device (e.g., via the Internet using an Internet service provider).

[0107] In summary, the purpose of this invention is to provide a cross-platform declarative animation adaptive orchestration method, system, device, and storage medium that can decouple animation logic from business logic, support independent timing configuration of on-screen / off-screen animations, and automatically complete the size detection of layout attribute animations, significantly improving the declarativeness, flexibility, and layout adaptability of animation orchestration in cross-platform frameworks.

[0108] The above description, in conjunction with specific preferred embodiments, provides a further detailed explanation of the present invention. It should not be construed that the specific implementation of the present invention is limited to these descriptions. For those skilled in the art, various simple deductions or substitutions can be made without departing from the concept of the present invention, and all such modifications and substitutions should be considered within the scope of protection of the present invention.

Claims

1. A cross-platform declarative animation adaptive orchestration method, characterized in that, Includes the following steps: S110. Receive the declarative animation configuration for the target component through the declarative orchestration layer of the application layer. The declarative animation configuration includes the initial state, the on-screen target state, and the off-screen target state. S120. Based on the context mechanism, the top-level container component detects changes in child nodes, maintains the keep-alive state of the exiting component, and sends the existence state to the animation execution component through the state wrapper component. S130. The declarative animation configuration is parsed by the animation configuration parsing module of the underlying rendering engine to generate structured animation parameters, wherein the timing parameters of the on-screen animation and the off-screen animation are configured independently. S140. During the animation initialization phase, the size measurement module of the underlying rendering engine performs automatic size detection on the layout attributes configured as automatic values, and obtains the actual size of the child nodes after layout calculation as the animation target value. S150: Creates a unique animation controller through the animation execution management module of the underlying rendering engine, constructs corresponding easing animations based on the timing parameters of each animation attribute, drives the synchronous interpolation calculation and frame-by-frame rendering update of all animation attributes, and automatically triggers off-screen animations when the existence state changes from existence to non-existence.

2. The cross-platform declarative animation adaptive orchestration method as described in claim 1, characterized in that, The declarative animation configuration in step S110 is declared through component properties. The initial state defines the starting value when the component is first mounted, the on-screen target state defines the target value after the component is displayed, and the off-screen target state defines the target value when the component is hidden. The configuration of on-screen animation and off-screen animation are set independently through different configuration property groups. The on-screen animation configuration group includes a list of properties participating in the on-screen animation, the on-screen animation duration, the on-screen easing function, and the on-screen delay time. The off-screen animation configuration group includes a list of properties participating in the off-screen animation, the off-screen animation duration, the off-screen easing function, and the off-screen delay time.

3. The cross-platform declarative animation adaptive orchestration method as described in claim 1, characterized in that, The context values ​​passed by the context mechanism in step S120 include: a boolean value indicating whether the component should exist in the rendering tree; and a callback function used to notify the upper layer of the exit completion signal after the child node exits the animation; the top-level container component detects the addition, deletion, and update of child nodes by comparing the key attribute of the child nodes, maintains two sets of states: the child nodes currently expected to be rendered and the child nodes actually rendered, and maintains an exit state mapping table to record the completion state of each component during exit; the state wrapping component wraps each child node, passes the existence state downwards, and notifies the upper layer after the child node exits the animation.

4. The cross-platform declarative animation adaptive orchestration method as described in claim 1, characterized in that, In step S130, the animation configuration parsing module receives the animation configuration parameters sent by the application layer through the bridging channel. According to the mapping relationship between attribute identifiers and timing parameters, it parses and constructs a structured list of configuration animation parameters for state transitions. Each configuration record for state transitions includes four dimensions: attribute type, animation duration, animation curve, and animation delay. The independent configuration of timing parameters includes: on-screen animation and off-screen animation can be configured with different sets of animation attributes, different execution order of attributes, different animation duration, different easing functions, and different delay times.

5. The cross-platform declarative animation adaptive orchestration method as described in claim 1, characterized in that, The automatic size detection mechanism in step S140 includes: when the width or height attribute is configured as an automatic value, the underlying rendering engine intervenes in the layout measurement process during the animation initialization stage, directly obtains the actual width and actual height values ​​determined by the component after solving the layout constraints, and replaces the automatic value identifier in the configuration with the measured value as the deterministic target value of the layout attribute animation; the automatic size detection mechanism follows the timing constraint of measuring first and then starting, and completes the parsing and binding of the target value before the animation starts.

6. The cross-platform declarative animation adaptive orchestration method as described in claim 1, characterized in that, The animation execution management module in step S150 includes: a unique animation controller, which acts as a global clock source to uniformly manage the total duration and playback status of the animation, with all attributes participating in the animation sharing the same timeline of the controller; an easing animation construction unit, which creates corresponding mappers according to the animation curve specified in the configuration when the state of each attribute changes, mapping the linear progress of the controller to the independent non-linear progress of each attribute; a frame-by-frame interpolation driving unit, which calculates the interpolation result of the current frame based on the current progress, starting value, and target value of the mapper of each attribute in the callback of each frame of the controller and drives the rendering update; and a stage switching interface, which provides an interface to start the stage switching from the initial state to the on-screen target or from the on-screen target to the off-screen target, and resets the controller and rebuilds the mapper sequence when switching.

7. The cross-platform declarative animation adaptive orchestration method as described in claim 1, characterized in that, The method supports animation attributes including transparency, horizontal displacement, vertical displacement, horizontal scaling, vertical scaling, width, and height. The duration, easing function, and delay of each animation attribute are configured independently by component type and business scenario through the configuration center. When multiple animation attributes participate in the animation at the same time, each attribute is executed independently according to its configured timing parameters, realizing the staggered timing arrangement in multi-attribute combined animations.

8. A cross-platform declarative animation adaptive orchestration system for implementing the method of any one of claims 1 to 7, characterized in that, include: The configuration receiving module receives the declarative animation configuration for the target component through the declarative orchestration layer of the application layer. The declarative animation configuration includes the initial state, the on-screen target state, and the off-screen target state. The state delivery module, based on the context mechanism, detects changes in child nodes through the top-level container component, maintains the keep-alive state of exiting components, and delivers the existence state to the animation execution component through the state wrapper component; The parameter configuration module parses the declarative animation configuration through the animation configuration parsing module of the underlying rendering engine to generate structured animation parameters, wherein the timing parameters of on-screen animation and off-screen animation are configured independently. During the animation initialization phase, the underlying rendering module performs automatic size detection on the layout attributes configured as automatic values ​​through the underlying rendering engine's size measurement module, and obtains the actual size of the child nodes after layout calculation as the animation target value. The frame-by-frame rendering module creates a unique animation controller through the animation execution management module of the underlying rendering engine. It constructs corresponding easing animations based on the timing parameters of each animation attribute, drives the synchronous interpolation calculation and frame-by-frame rendering update of all animation attributes, and automatically triggers off-screen animations when it detects that the existence state changes from existence to non-existence.

9. A cross-platform declarative animation adaptive orchestration device, characterized in that, include: processor; A memory in which executable instructions of the processor are stored; The processor is configured to perform the steps of the cross-end declarative animation adaptive orchestration method of any one of claims 1 to 7 by executing the executable instructions.

10. A computer-readable storage medium for storing a program, characterized in that, When the program is executed by the processor, it implements the steps of the cross-platform declarative animation adaptive orchestration method according to any one of claims 1 to 7.

Images