UI animation control system based on random tilt and color change algorithm
By implementing a UI animation control system based on random tilt and color change algorithms, the problem of monotonous UI animation effects in existing systems has been solved, resulting in rich and vivid animation effects and optimized system performance.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-11-10
- Publication Date
- 2026-03-13
Smart Images
Figure CN121661204A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of computer animation technology, specifically a UI animation control system based on random tilt and color change algorithms. Background Technology
[0002] As UI design becomes increasingly important in modern application and game development, users' expectations for interactive effects are also constantly rising. Traditional UI animations are mostly simple transition effects, which cannot meet users' needs for dynamism and interactivity.
[0003] Currently, many UI animation frameworks and tools mainly focus on basic animation effects such as translation, scaling, and rotation, lacking complex interactivity and dynamic changes. Some well-known international companies, such as Apple and Google, have introduced more advanced animation effects and interactive technologies into their UI frameworks, but these technologies are complex to implement and have limited application scenarios. Domestic research and application in this area are relatively limited, especially in games and multimedia applications, where there is still a significant technological gap in the implementation of dynamic interactions and complex animations. Summary of the Invention
[0004] The purpose of this invention is to provide a UI animation control system based on random tilt and color change algorithms to address the problem that existing UI animations have simple dynamic effects and limited interaction methods, failing to meet users' needs for dynamism and interactivity.
[0005] To achieve the above objectives, the present invention adopts the following technical solution: a UI animation control system based on random tilt and color change algorithms, comprising:
[0006] The animation execution module uses an animation tweening library to drive the target UI element to rotate and change its color attributes.
[0007] The random tilt calculation module generates a random rotation axis through vector cross product operation and instructs the animation execution module to drive the target UI element to rotate at a random angle along the random rotation axis in 3D space.
[0008] The dynamic triggering module includes a control parameter n calculated in real time. The dynamic triggering module is used to monitor at least one state parameter of the target UI element in real time and compare the state parameter with the control parameter n. When a preset condition is met, a triggering command is sent to the animation execution module and the random tilt calculation module to drive the rotation and color attribute change of the target UI element.
[0009] As a further description of the above technical solution:
[0010] The control parameter n is a variable that changes dynamically over time.
[0011] As a further description of the above technical solution:
[0012] The control parameter n decreases over time and is reset to its initial value when its value falls below a preset threshold.
[0013] As a further description of the above technical solution:
[0014] The state parameter is the coordinate value of the target UI element in space.
[0015] As a further description of the above technical solution:
[0016] The animation execution module binds the rotation and color attribute changes of the target UI element into a synchronously executed animation combination through the animation sequence module.
[0017] As a further description of the above technical solution:
[0018] The animation execution module dynamically adjusts the magnitude of the color attribute change through the intensity parameter.
[0019] As a further description of the above technical solution:
[0020] It also includes a performance optimization module, which dynamically marks one or more UI elements as not participating in animation calculations based on the current state of the application through an exclusion mechanism module, and controls the state monitoring frequency of the dynamic triggering module through a timer.
[0021] As a further description of the above technical solution:
[0022] The performance optimization module also includes a UI element management module, which is used to enable or disable the triggering and execution permissions of the target UI element's rotation and color attribute changes through state variables.
[0023] As a further description of the above technical solution:
[0024] The animation tween library is DOTween.
[0025] In summary, due to the adoption of the above technical solution, the present invention has the following beneficial effects compared with the prior art:
[0026] This invention utilizes the animation capabilities provided by the DOTween library for animation sequence management, controlling the rotation and synchronized color changes of target UI elements, and dynamically adjusting the intensity of color changes to achieve efficient animation control and dynamic adjustment. Based on a random tilt algorithm, a rotation axis in 3D space is randomly generated through a vector cross product algorithm, allowing UI elements to tilt and rotate in any direction. Compared to traditional UI element rotation animations that rotate along a fixed Z-axis and present a 2D effect, this produces a richer and more unpredictable visual expression. Compared to conventional animation trigger conditions that are preset and fixed, this UI animation is based on a dynamic trigger mechanism, automatically triggering according to spatial position and dynamic thresholds, enabling intelligent responses based on runtime state. Based on exclusion mechanisms, frequency control, and pause and resume mechanisms, the animation triggering of UI elements is dynamically adjusted to release redundant resources. Attached Figure Description
[0027] To more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of the present invention and should not be regarded as a limitation on the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.
[0028] Figure 1 This is a system module block diagram of a UI animation control system based on random tilt and color change algorithms. Detailed Implementation
[0029] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. The components of the embodiments of the present invention described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.
[0030] Therefore, the following detailed description of the embodiments of the invention provided in the accompanying drawings is not intended to limit the scope of the claimed invention, but merely to illustrate selected embodiments of the invention. All other embodiments obtained by those skilled in the art based on the embodiments of the invention without inventive effort are within the scope of protection of the invention.
[0031] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.
[0032] In the description of the embodiments of the present invention, it should be noted that the terms "upper" and "inner" indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings, or the orientation or positional relationship in which the product of the invention is usually placed when in use. They are only for the convenience of describing the present invention and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limiting the present invention.
[0033] In the description of this invention, it should also be noted that, unless otherwise explicitly specified and limited, the terms "set," "install," "connect," and "link" should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral connection; they can refer to a direct connection, an indirect connection through an intermediate medium, or a connection within two components. Those skilled in the art can understand the specific meaning of the above terms in this invention based on the specific circumstances.
[0034] Example 1:
[0035] Please see Figure 1 This invention provides a technical solution: a UI animation control system based on random tilt and color change algorithms, comprising:
[0036] The animation execution module uses an animation tweening library to drive the target UI element to rotate and change its color attributes.
[0037] The random tilt calculation module generates a random rotation axis through vector cross product and instructs the animation execution module to drive the target UI element to rotate at a random angle along the random rotation axis in 3D space. Specifically, the rotation axis is calculated using Vector3.Cross (vector cross product), and an animation tweening library is used to make the target object rotate along the axis, thereby realizing the random tilt and rotation animation effect of the UI element. This makes the rotation effect no longer a simple 2D rotation, but a rotation along any random axis in 3D space, making the dynamic effect of the UI element more vivid and increasing the diversity and fun of the animation.
[0038] A dynamic triggering module includes a real-time calculated control parameter n. This module monitors at least one state parameter of the target UI element in real time and compares it with the control parameter n. When preset conditions are met, it sends trigger commands to the animation execution module and the random tilt calculation module to drive the rotation and color attribute changes of the target UI element. The state parameter is the coordinate value of the target UI element in space. The triggering conditions of the animation are controlled by the real-time calculated parameter n. When the coordinates of the sub-object meet specific conditions, the Tilt and ChangeColor animations are triggered, allowing the UI animation to respond according to the actual coordinates or other real-time changes. This approach not only supports traditional interactive animations but also automatically triggers animations based on changes in the object's position in space, greatly improving the intelligence and adaptability of the animation.
[0039] The design of rotating and changing the color attributes of the target UI element based on a randomly generated rotation axis in 3D space when the animation is triggered, and dynamically changing the control parameter n based on the animation triggering condition, makes the dynamic effects richer and more vivid, increasing the diversity and fun of the animation.
[0040] The animation tween library is DOTween.
[0041] The animation execution module binds the rotation and color attribute changes of the target UI element into a synchronously executed animation combination through the animation sequence module. The rotation and color change are executed synchronously. Through the DOTween Sequence function, the animation can not only be executed synchronously, but also the rotation action and color change process can be organically combined through AppendCallback to achieve the effect of operating rotation and color change simultaneously.
[0042] The animation execution module dynamically adjusts the magnitude of the color attribute change through the intensity parameter, and dynamically adjusts the intensity of the color change through the colorChangeIntensity parameter, instead of using preset color values, which adds a sense of layering and fun to the UI animation.
[0043] This invention utilizes the animation capabilities provided by the DOTween library for animation sequence management, controlling the rotation and synchronized color changes of target UI elements, and dynamically adjusting the intensity of color changes to achieve efficient animation control and dynamic adjustment. Based on a random tilt algorithm, a rotation axis in 3D space is randomly generated through a vector cross product algorithm, allowing UI elements to tilt and rotate in any direction. Compared to traditional UI element rotation animations that rotate along a fixed Z-axis and present a 2D effect, this produces a richer and more unpredictable visual expression. Compared to conventional animation trigger conditions that are preset and fixed, this UI animation is based on a dynamic trigger mechanism, automatically triggering according to spatial position and dynamic thresholds, enabling intelligent responses based on runtime state.
[0044] Example 2:
[0045] Please see Figure 1 The figure illustrates a UI animation control system based on a random tilt and color change algorithm provided in Embodiment 2 of the present invention. This embodiment further improves upon the previous embodiment by implementing the following technical solution: the control parameter n is a variable that dynamically changes over time. The control parameter n decreases over time and is reset to its initial value when its value falls below a preset threshold. Compared to conventional animation triggering conditions that are preset and fixed, this UI animation is based on a dynamic triggering mechanism, automatically triggering according to spatial position and dynamic thresholds, enabling intelligent responses based on runtime states. For example, even if a UI element remains stationary, it may suddenly meet the triggering condition due to changes in the value of n, thus generating an animation. This abandons the conventional approach where animations are only triggered when the user makes a clear interaction, creating a dynamic environment that "occurs automatically." The one-dimensional "position judgment" is transformed into a two-dimensional "coordinated judgment of position and time," greatly increasing the complexity and unpredictability of the system's behavior, making the animation effect more natural and less mechanical.
[0046] Example 3:
[0047] Please see Figure 1 The figure illustrates a UI animation control system based on a random tilt and color change algorithm provided in Embodiment 3 of the present invention. This embodiment further improves upon the previous embodiments by including a performance optimization module. This module dynamically marks one or more UI elements as not participating in animation calculations based on the current state of the application through an exclusion mechanism module. The module controls the state monitoring and animation triggering frequency of the dynamic triggering module via a timer. The exclusion mechanism dynamically adjusts which objects need to participate in the animation in real time based on the state of the game or application (such as game state and UI hierarchy), optimizing the animation execution frequency and system performance through timers and state control variables.
[0048] The performance optimization module also includes a UI element management module, which controls the enabling or disabling of triggering and execution permissions for the rotation and color attribute changes of the target UI element through state variables. Furthermore, a mechanism for pausing and resuming animations (via the isPaused state) is introduced to further ensure animation smoothness and avoid over-rendering and unnecessary performance overhead.
[0049] The main technical or economic indicators that can be achieved by the technical solution based on the above embodiments are:
[0050] Animation smoothness: Maintain a frame rate of 60 FPS or higher to ensure smooth animation effects;
[0051] Resource consumption: Memory usage is reduced by 30%, reducing CPU and GPU load;
[0052] Color variation accuracy: The color variation accuracy reaches 16 million color levels, ensuring the visual quality of animation effects.
[0053] The above description is only a preferred embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any equivalent substitutions or modifications made by those skilled in the art within the scope of the technology disclosed in the present invention, based on the technical solution and inventive concept of the present invention, should be covered within the scope of protection of the present invention.
Claims
1. A UI animation control system based on random tilt and color change algorithms, characterized in that, include: The animation execution module uses an animation tweening library to drive the target UI element to rotate and change its color attributes. The random tilt calculation module generates a random rotation axis through vector cross product operation and instructs the animation execution module to drive the target UI element to rotate at a random angle along the random rotation axis in 3D space. The dynamic triggering module includes a control parameter n calculated in real time. The dynamic triggering module is used to monitor at least one state parameter of the target UI element in real time and compare the state parameter with the control parameter n. When a preset condition is met, a triggering command is sent to the animation execution module and the random tilt calculation module to drive the rotation and color attribute change of the target UI element.
2. The UI animation control system based on random tilt and color change algorithm according to claim 1, characterized in that, The control parameter n is a variable that changes dynamically over time.
3. The UI animation control system based on random tilt and color change algorithm according to claim 2, characterized in that, The control parameter n decreases over time and is reset to its initial value when its value falls below a preset threshold.
4. The UI animation control system based on random tilt and color change algorithm according to claim 1, characterized in that, The state parameter is the coordinate value of the target UI element in space.
5. A UI animation control system based on random tilt and color change algorithm according to claim 1, characterized in that, The animation execution module binds the rotation and color attribute changes of the target UI element into a synchronously executed animation combination through the animation sequence module.
6. A UI animation control system based on random tilt and color change algorithm according to claim 5, characterized in that, The animation execution module dynamically adjusts the magnitude of the color attribute change through the intensity parameter.
7. A UI animation control system based on random tilt and color change algorithm according to claim 1, characterized in that, It also includes a performance optimization module, which dynamically marks one or more UI elements as not participating in animation calculations based on the current state of the application through an exclusion mechanism module, and controls the state monitoring frequency of the dynamic triggering module through a timer.
8. A UI animation control system based on random tilt and color change algorithm according to claim 7, characterized in that, The performance optimization module also includes a UI element management module, which is used to enable or disable the triggering and execution permissions of the target UI element's rotation and color attribute changes through state variables.
9. A UI animation control system based on random tilt and color change algorithm according to claim 1, characterized in that, The animation tween library is DOTween.