Method and device for realizing dynamic interaction of user interface and medium

Abstract

The invention belongs to the technical field of computers, and particularly relates to a method and device for achieving dynamic interaction of a user interface and a medium. (2) a differentiated animation rendering method; (3) an interactive animation adjustment method; and (4) a design method of a declarative animation definition language. By adopting the method and the device, the jamming of the animation on performance low-end equipment is reduced through a resource awareness scheduling algorithm; different hardware characteristics can be self-adapted through a differential rendering technology, and the fluency of the animation is improved; the immersion and satisfaction of the user are improved through an interactive animation adjustment mechanism; through the declarative animation definition language, development of complex animations is simplified, complexity of front-end dynamic effect realization is reduced, and maintainability and reusability of codes are facilitated.

Description

Technical Field

[0001] The present invention belongs to the field of computer technology, and in particular, relates to a method, device and medium for realizing dynamic interaction of user interfaces. Background Art

[0002] With the development of Internet technology, users have higher expectations for the smoothness and interactivity of Web applications. Although existing animation technologies can achieve various visual effects, they are often accompanied by high CPU or GPU usage, resulting in poor performance on resource-constrained devices or performance bottlenecks in complex interactive scenarios. In addition, existing animation libraries or frameworks are difficult to flexibly adapt to the performance differences of different devices and cannot provide a sufficiently personalized interactive experience. Summary of the invention

[0003] The purpose of the present invention is to provide a method for realizing dynamic interaction of user interfaces, so as to solve the technical problems existing in the prior art.

[0004] In order to achieve the above object, the technical solution adopted by the present invention is as follows: A method for realizing dynamic interaction of a user interface, comprising: (1) Resource-aware animation scheduling method (11) Animation performance score: Each animation element is assigned a performance score based on its complexity. The scoring dimensions include: geometric complexity of the animation, rendering effect complexity, animation frame rate requirements, number of animation elements, animation transformation and keyframe complexity, animation duration and timeline management. Based on the above dimensions, a weighted calculation is performed using the following formula: P i =w1·G+w2·R+w3·F+w4·N+w5·T Among them, G is the animation geometry complexity score, R is the animation rendering complexity score, F is the animation frame rate score, N is the animation element number score, T is the animation transformation and timeline complexity score, w1, w2, w3, w4, w5 are weight coefficients; (12) Performance baseline detection: When the page is loaded, the performance indicators of the current device are detected, including CPU and GPU load, memory usage, and battery capacity; (13) Animation priority decision: Determine the priority of each animation and whether it needs to be downgraded based on the performance score and performance baseline; (2) Differentiated animation rendering method (21) Rendering capability detection: Detect the rendering technology supported by the user's device; (22) Adaptive rendering decision: Dynamically select the most appropriate rendering engine based on the animation performance score and rendering capability test results; (23) Animation implementation layer selection: If the user device supports WebGL and the animation contains 3D transformations, select the WebGL rendering path; if the animation is a 2D animation, select the CSS3 or Canvas rendering path; (24) Fallback mechanism: During the animation execution, the user device detects the performance indicators of the user device in real time. If the performance indicators drop, it automatically switches to the next best option. (3) Interactive animation adjustment method (31) Monitor user input: monitor user interaction actions; (32) Interaction data analysis: analyzing the type, speed and direction of interaction actions; (33) Animation adjustment: Based on the interaction data, the animation parameters are adjusted in real time to match the user's operation; (4) Design method of declarative animation definition language (41) Language design: Design a declarative syntax for JSON format: (42) Animation parser construction: (421) Parse JSON and find the target element; (422) Generate CSS animation; (423) Support keyframe animation: convert declarative animation description into actual browser executable animation code.

[0005] As a preferred implementation, the complexity in (11) includes the number of key frames and the duration of the animation.

[0006] As a preferred implementation scheme, in (13), the decision method of animation priority is as follows: (131) Set resource thresholds. According to the performance baseline test results of the device, set the following thresholds: CPU load threshold, GPU load threshold, memory usage threshold, and battery power threshold; (132) Priority algorithm Calculate resource consumption margin: Based on the current CPU, GPU, memory, and battery status, calculate the corresponding margin of each resource of the system: Margin = 1-current resource occupancy rate; Resource weighting: According to the resources that the animation depends on, a weight is assigned to the margin value of each resource to obtain the weighted system margin; Animation priority decision: score each animation element based on its performance i , compared with the system margin: Priority = System Margin - P i If the priority of the animation is higher than the threshold in (131), the animation can run at full effect; if the priority is lower than a certain threshold, the animation needs to be downgraded, and the methods of animation downgrading include: reducing the frame rate, reducing animation details, dynamically adjusting the number of particles or fineness in the animation, dynamically adjusting the animation path or interpolation method, and animation scheduling execution.

[0007] As a preferred implementation, the method for dynamically selecting a rendering engine is as follows: the most suitable rendering engine is selected in real time according to the rendering capability and animation performance score of the device.

[0008] As a preferred implementation scheme, the specific implementation method of the suboptimal rendering path switching is as follows: (241) Rendering path classification: Rendering paths are classified according to performance levels; (242) Dynamic detection and switching logic: By monitoring the device's CPU usage, GPU occupancy, memory usage, and frame rate, decide whether to switch to the suboptimal path.

[0009] As a preferred implementation scheme, the specific implementation method of (33) is as follows: (331) Key steps for dynamically adjusting animation parameters: (3311) Monitoring user interaction data: real-time monitoring of various user interaction behaviors; (3312) Dynamically adjusting animation parameters: real-time adjustment of animation parameters based on user interaction behaviors; (332) Implement an adjustment mechanism to match user operations: capture user operations and process animation properties in real time; (333) Dynamically adjust the matching logic of animation parameters.

[0010] As a preferred embodiment, the (3) interactive animation adjustment method further includes: (34) feedback loop: the animation effect will be fed back to the user immediately, and if the user changes the interaction method, the animation will be refreshed accordingly.

[0011] In order to achieve the purpose of the present invention, the present invention also provides a computer-readable storage medium on which a computer program is stored. The computer program is executed by a processor to implement the method for realizing dynamic interaction of a user interface as described above.

[0012] In order to achieve the purpose of the present invention, the present invention also provides a device for realizing dynamic interaction of user interface, comprising: a processor and a memory; the memory is used to store computer programs; the processor is connected to the memory, and is used to execute the computer program stored in the memory, so that the device for realizing dynamic interaction of user interface executes the method for realizing dynamic interaction of user interface as described above.

[0013] Compared with the prior art, the present invention has the following beneficial effects: (1) According to the present invention, a resource-aware scheduling algorithm is used to reduce animation freezes on low-performance devices.

[0014] (2) According to the present invention, the differentiated rendering technology can adapt to different hardware characteristics and improve the smoothness of the animation.

[0015] (3) According to the present invention, the interactive animation adjustment mechanism enhances the user's immersion and satisfaction.

[0016] (4) According to the present invention, the declarative animation definition language simplifies the development of complex animations, reduces the complexity of implementing front-end dynamic effects, and is beneficial to the maintainability and reusability of the code. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 This is a principle block diagram of Example 3 of the present invention. DETAILED DESCRIPTION

[0018] In order to enable those skilled in the art to have a clearer understanding and knowledge of the present invention, the present invention is further described in detail below in conjunction with the embodiments. It should be understood that the specific embodiments described below are only used to explain the present invention, and are convenient for understanding. The technical solutions provided by the present invention are not limited to the technical solutions provided by the following embodiments, and the technical solutions provided by the embodiments should not limit the protection scope of the present invention.

[0019] It should be noted that the illustrations provided in the following embodiments are only used to illustrate the basic concept of the present invention in a schematic manner. Therefore, the drawings only show components related to the present invention rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the form, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.

[0020] Example 1 This embodiment provides a method for implementing dynamic interaction of a user interface, which can provide smooth and low-resource-consuming animation effects on devices with different hardware performance levels, and includes the following contents: 1. Resource-aware animation scheduling method The purpose of this method is to combine the device hardware capabilities and the performance indicators of the page to intelligently adjust the playback order and speed of the animation and reduce the jamming phenomenon of the page. The specific methods include the following: (11) Animation performance score: Each animation element is assigned a performance score based on its complexity. The scoring dimensions include: geometric complexity of the animation, rendering effect complexity, animation frame rate requirements, number of animation elements, animation transformation and keyframe complexity, animation duration and timeline management. Based on the above dimensions, a weighted calculation is performed using the following formula: P i =w1·G+w2·R+w3·F+w4·N+w5·T Among them, G is the animation geometry complexity score (1-5), R is the animation rendering complexity score (1-5), F is the animation frame rate score (1-3), N is the animation element number score (1-5), T is the animation transformation and timeline complexity score (1-5); w1, w2, w3, w4, w5 are weight coefficients (determined according to the actual system resource usage); The specific details of each scoring dimension are as follows: Animation geometry complexity score (G): Describes the complexity of the geometry used in the animation, usually related to the number of vertices, faces, and overall complexity of the geometry.

[0021] Scoring criteria: 1 point: Uses simple basic geometric shapes (e.g., rectangles, circles). 3 points: Uses geometric shapes of moderate complexity, which may include curves or multiple edges. 5 points: Includes complex geometric shapes or polyhedra, such as detailed 3D models or complex SVG graphics.

[0022] 2. Rendering complexity score (R): Describes the effects and complexity used in the animation rendering process, such as shadows, lighting, texture mapping, etc.

[0023] Scoring criteria: 1 point: No complex rendering effects, simple color fills or borders. 3 points: Use of medium-complexity rendering effects, such as basic shadows or simple gradients. 5 points: High-complexity rendering effects, such as advanced lighting, dynamic textures, reflections or refractions, etc.

[0024] 3. Animation frame rate requirement score (F): The frame rate directly affects system performance. The higher the frame rate, the higher the resource requirements.

[0025] Scoring criteria: 1 point: The frame rate is below 30fps, which has little impact on performance. 2 points: The frame rate is between 30-60fps, which is a medium requirement. 3 points: The frame rate is over 60fps, and high frame rate animation has high performance requirements.

[0026] 4. Score of number of animation elements (N): A measure of the number of elements that exist simultaneously in the animation. The more elements there are, the greater the impact on performance.

[0027] Scoring criteria: 1 point: The animation involves a small number of elements (less than 5 elements). 3 points: A medium number of elements (5 to 20 elements). 5 points: A large number of elements (more than 20 elements).

[0028] 5. Animation Transformation and Timeline Complexity Score (T): Describes the complexity of the transformations (such as rotation, scaling, translation) and keyframe timelines in the animation.

[0029] Scoring criteria: 1 point: Simple single transition or linear timeline. 3 points: Moderately complex multiple transitions or non-linear timeline. 5 points: Complex multi-stage transitions and timeline management, such as multi-stage animation or multiple staggered keyframes.

[0030] (12) Performance baseline detection: When the page is loaded, the performance indicators of the current device are detected, including CPU and GPU load, memory usage, and battery capacity; (13) Animation priority decision: Determine the priority of each animation and whether it needs to be downgraded based on the performance score and performance baseline; Among them, the animation priority decision process: (131) Set resource thresholds. According to the performance baseline test results of the device, set the following thresholds: CPU load threshold, GPU load threshold, memory usage threshold, and battery power threshold; In system performance and resource management, threshold setting and performance baseline detection are two related but different concepts that can usually be used in conjunction with each other. The following is an explanation of the logical connection between the two: 1. Logical connection between threshold setting and performance baseline detection (1) Threshold setting based on performance baseline detection In practical applications, the connection between threshold setting and performance baseline detection can be shown as follows: performance baseline detection can provide a basis for threshold setting. Specifically: The performance bottlenecks or resource usage limits shown by the system in the baseline test can help system designers determine the rationality of the threshold. For example, if the baseline test shows that when the CPU usage reaches 70%, the response time increases significantly, and at 90%, the system is close to crashing, then based on these data, 70% can be set as the warning threshold and 90% as the emergency threshold.

[0031] Based on historical data and actual performance measurements, thresholds can be set more scientifically to adapt to the actual operation of the system.

[0032] If you find through performance baseline testing that the system works most efficiently at 60% CPU utilization and performance starts to degrade at 80%, you can adjust the thresholds to 60% and 80% based on these results to better manage resources.

[0033] (2) Setting thresholds independently of performance baselines If performance baseline detection is not performed, the threshold can be set based on empirical values ​​or industry standards. For example, the general practice in the industry is that when the CPU utilization reaches 80%, the system begins to become unstable, or when the memory usage exceeds 75%, insufficient memory may occur. Therefore, setting a threshold of 80% or 75% is a common empirical practice.

[0034] This method can quickly set the threshold, but it may not be accurate enough, especially in specific application scenarios, where the empirical value may not fully match the actual operating conditions.

[0035] (3) Advantages of using both together By combining baseline detection and experience setting, more accurate and dynamic threshold setting can be achieved. Specifically: Early stage: When there is no performance baseline test data, you can use empirical values ​​(such as 60%, 80%) to quickly set thresholds to ensure that the system has a basic monitoring and early warning mechanism.

[0036] Optimization stage: When the system has accumulated operating data for a period of time and has a deeper understanding of system performance through baseline detection, the threshold can be adjusted according to the actual detection data. For example, if the detection finds that the response time increases rapidly when the CPU usage is 70%, 70% will be used as the warning threshold instead of the empirically set 80%.

[0037] Baseline testing can also reveal how the system performs under extreme conditions. For example, if some services can maintain good performance even when the load is as high as 90%, then the threshold can be safely set to 90%.

[0038] Dynamic adjustment: In scenarios where system loads vary greatly, thresholds can be dynamically adjusted based on real-time performance data. For example, adaptive thresholds can be set based on performance baseline graphs, allowing higher resource utilization when loads are high and keeping lower utilization when loads are low.

[0039] 2. Summarize the connection between the two Performance baseline detection provides the actual performance of the system under various load conditions. It can help set more scientific thresholds and ensure that the system has reasonable resource utilization warning and protection mechanisms under different working conditions.

[0040] Threshold setting can be based on experience or baseline detection results. The former is fast but may not be accurate enough, while the latter can provide more dynamic and adaptive threshold setting.

[0041] The logical connection between the two is that the baseline detection data provides a basis for the reasonable setting of thresholds, and the threshold setting in turn helps optimize the performance of the system.

[0042] (132) Priority algorithm Calculate resource consumption margin: Based on the current CPU, GPU, memory, and battery status, calculate the corresponding margin of each resource (CPU, GPU, memory, battery) of the system: Margin = 1-current resource occupancy rate; For example, if the CPU usage is 70%, the CPU margin is 0.30; Resource weighting: According to the resources that the animation depends on, a weight is assigned to the residual value of each resource to obtain the weighted system residual; (wcpu, wgpu, wmem, wbattery): System Residual = wcpu xCPU residual + wgpu xGPU residual + wmem xmemory residual + wbattery xbattery residual.

[0043] The purpose of weight allocation is to reflect the relative importance of different factors in the final decision. Generally speaking, weight allocation is based on the following principles: 1. Resource dependency: If a resource is critical to a system or business, then the usage of this resource has a greater impact on the health of the system and should be assigned a higher weight.

[0044] 2. Criticality / Priority: Certain resources or tasks may be critical to the stability of the entire system, so their overall impact on the system and business should be considered when assigning weights.

[0045] 3. Historical data: Through historical performance and resource usage, it is possible to analyze which resources or dimensions are more likely to become bottlenecks or affect system performance in actual system operation.

[0046] 4. Business requirements: Different business scenarios have different requirements. For example, real-time applications require higher response speeds, while data processing applications may be more dependent on storage and bandwidth.

[0047] Animation priority decision: score each animation element based on its performance i , compared with the system margin: Priority = System Margin - P i If the priority of the animation is higher than the threshold in (131), the animation can run at full effect (i.e., no downgrade is required); if the priority is lower than a certain threshold (such as set to 0), the animation needs to be downgraded. The methods of animation downgrading include: reducing the frame rate, and reducing high frame rate animation (such as 60 FPS) to 30 FPS or even lower. This is the most commonly used downgrading method, because the reduction in frame rate directly reduces the load on the CPU and GPU. Implementation method: Slow down the rendering frequency of the animation through requestAnimationFrame or other animation control APIs, reduce animation details: simplify the geometric complexity or rendering effects of animation elements. For example: reduce polygon details or turn off complex rendering effects (such as shadows, blur, transparency), dynamically adjust the number of particles or fineness in the animation; pause or delay certain animations: for low-priority animation elements, directly pause or postpone their execution, give priority to ensuring the smoothness of key animations (such as user interaction), implementation method: you can mark secondary animations as "delayed loading", wait for system resources to recover and then restart, dynamically adjust the animation path or interpolation method: choose a simpler interpolation function (such as linear interpolation), instead of complex easing effects, animation scheduling execution. When a user event triggers an animation, the system will execute the animation in order of priority, and monitor performance indicators in real time to adjust the execution strategy of subsequent animations (that is, whether the animation is downgraded) in a timely manner.

[0048] Here is the detailed application process and how to dynamically adjust and degrade during animation execution: 1. Determine animation priority When a user event triggers an animation, the system will compare the performance score of each animation element (such as CPU, memory, and battery consumption) with the system margin to comprehensively calculate the priority of the animation. The determination of animation priority mainly involves the following factors: Performance requirements of animation elements: Each animation consumes different system resources (such as CPU, memory, I / O, etc.), and the system will evaluate its burden on the system based on these requirements.

[0049] Current system remaining capacity: The current resource availability of the system, such as CPU usage, battery remaining capacity, etc.

[0050] Resource weighted result: The comprehensive margin calculated by weighting multiple resources is used to determine whether there are enough resources to execute the animation.

[0051] Based on this information, the system assigns a priority to each animation element, determining which animations can be executed normally and which need to be degraded or postponed.

[0052] 2. Scheduling strategy for animation execution During execution, the system schedules the animation as follows: 2.1 Execute animations according to priority order High-priority animations are executed first, and the priority of these animations is dynamically calculated based on their performance score and system headroom.

[0053] High-priority animations: Animations that have less reliance on system resources and less performance burden, or animations when current system resources are sufficient, will execute normally as expected.

[0054] Low-priority animations: If system resources are tight, animations that consume more resources will be prioritized and their execution order will be postponed or lowered.

[0055] 2.2 Monitoring animation execution performance As animations execute, their resource usage is monitored in real time to ensure that the animations do not overload the system. For example, the system may monitor the following metrics: CPU usage: monitors changes in CPU load during animation execution to ensure that it does not overload. Memory usage: observes whether the animations take up too much memory resources, causing increased memory pressure. Battery consumption: On mobile devices, battery consumption is continuously monitored while animations are executing to determine whether the complexity of the animations needs to be reduced to save power. Through these performance monitoring, the system can always understand the running status of the current animations.

[0056] 2.3 Dynamic Adjustment and Degradation Processing If the system detects that the load of certain resources (such as CPU or battery) is too high and exceeds the set resource threshold, the system will trigger animation degradation processing. The triggering and application of degradation processing can be divided into several steps: Animation degradation trigger: When the system monitors in real time that the load of certain key resources exceeds the threshold (for example, the CPU usage reaches 90%, or the battery power drops below 20%), the system will decide to downgrade some low-priority or high-resource-consuming animations.

[0057] Degradation method: Simplify animation effects: reduce the frame rate of animation, reduce the complexity of animation, remove some transition effects, etc. For example, simplify complex 3D animations into 2D effects, or reduce graphic effects such as shadows and blurs. Reduce the number of animations: If multiple animations are running at the same time, the system may pause or postpone lower priority animations to free up resources. For example, reduce background animations when sliding pages, or pause unimportant decorative animations. Adjust the order of animation execution: The system may reschedule the order of animation execution, giving priority to ensuring the normal execution of important animations (such as animations related to core user operations), while postponing or skipping some minor animations.

[0058] 2. Differentiated animation rendering method: (21) Rendering capability detection: Detect the rendering technology supported by the user's device; (22) Adaptive rendering decision: Dynamically select the most appropriate rendering engine based on the animation performance score and rendering capability test results; Among them, the process of dynamically selecting the rendering engine: (221) Basis for dynamic selection: Dynamic selection of the rendering engine is based on the rendering capability detection results of the current device and the performance score of each animation. The selection of the animation rendering engine is adjusted in real time based on the rendering capability detection results of the current device and the performance score of each animation, ensuring a balance between performance and visual effects.

[0059] Common rendering engines include: Canvas 2D: suitable for simple 2D animations that do not require complex graphics processing and are suitable for low-performance devices. WebGL: suitable for complex 3D graphics and high-performance animations that require hardware acceleration. SVG: suitable for vector graphics-based animations, especially in scenes that need to maintain high resolution. CSS Animation: lightweight animation effects, suitable for simple transitions and interactive effects.

[0060] (222) Dynamic selection process Animation performance scoring: Score each animation element (1-10 points) based on the complexity and resource requirements of the animation: Each animation element can be scored based on the following aspects, and finally the scores of different resource consumption are summarized to give a comprehensive performance score (1-10 points). Including: (1) Static feature scoring: Static features are based on factors that have been determined in the animation design phase. The system can statically score each animation based on predefined rules and indicators. Mainly including the following factors: Animation frame rate (FPS): Higher frame rates usually mean more complex animations, which put a greater burden on the CPU and GPU. For example: Animation at 30 FPS may get 3 points, while animation at 60 FPS may get 7 points. Animation resolution or screen size: Animation with higher resolution or full-screen animation has higher requirements on system resources, especially GPU and memory. For example: Animation at 720p may get 4 points, while animation at 1080p may get 8 points. Animation duration: Longer animations may require more memory and I / O operations, especially when the animation is dynamically loaded or updated frame by frame. For example, a 1-second animation may get 2 points, while a 10-second complex animation may get 6 points. Graphics complexity: Complex graphics effects (such as blur, shadow, and 3D effects) increase the GPU burden. For example, a simple 2D animation may get 3 points, while an animation with complex 3D rotation and light and shadow effects may get 9 points. Resource loading method: If the animation involves dynamic resource loading (such as reading resources from the network or disk), it will affect I / O performance, and the system will score based on the amount loaded. For example, loading animation resources locally will get 3 points, while loading large images through network requests will get 7 points. (2) Dynamic feature scoring: Dynamic features are evaluated based on the performance of the animation at runtime. The system will monitor its resource usage in real time during the animation execution and adjust the score. These dynamic features include: Real-time CPU usage: During the animation, the system will monitor the CPU usage. For example, if the animation occupies more than 10% of the CPU resources, it will be scored higher. For example, if it occupies 5% of the CPU, it will get 4 points, and if it exceeds 15%, it may get 9 points. Real-time memory usage: The memory usage of the animation at runtime will also affect the score. For example, an animation that requires loading multiple high-resolution images will significantly increase memory consumption. For example: occupying 50MB of memory may get 3 points, and occupying 200MB of memory may get 8 points. GPU load: The system can monitor the rendering load of the animation on the graphics processor, and if the animation involves complex real-time rendering (such as 3D effects), the score will be higher. For example: occupying 30% of the GPU load may get 5 points, while occupying 60% may get 9 points. Battery consumption: On mobile devices, the system will measure the battery consumption during the execution of animations, especially GPU-intensive animations, which usually accelerate battery consumption. For example: a 2% increase in battery consumption may get 4 points, while consumption exceeding 5% may get 8 points.

[0061] Rendering capability detection: The system detects the rendering capability of the current device when the page is loaded or based on the status of the user's device, including CPU, GPU, memory, display resolution and refresh rate, etc.

[0062] Engine selection criteria: The most suitable rendering engine is selected in real time based on the device's rendering capabilities and animation performance scores. The selection criteria are as follows: If the device has low rendering capabilities (such as mobile devices or older hardware), choose a low-overhead rendering engine such as Canvas 2D or CSS Animation.

[0063] If the device has high rendering capabilities (such as a high-performance GPU and multi-core CPU) and the animation performance score is high, choose a hardware-accelerated rendering engine such as WebGL.

[0064] The most suitable rendering engine is determined by the following criteria: 1. Equipment performance indicators CPU and GPU performance: High-performance GPUs support complex 3D graphics and real-time rendering, so they perform better in WebGL scenarios. For low-end devices, Canvas 2D and CSS animations may be more suitable. Memory capacity: When the animation complexity is high, the memory usage of the rendering engine is also a consideration. High-usage WebGL may not be suitable for devices with tight memory. Screen resolution and refresh rate: Devices with high resolution can better support vector rendering (SVG), while lower screen resolutions may give priority to lighter performance engines.

[0065] 2. Animation Performance Scoring Animation complexity: If the animation needs to process a large amount of geometry, particles, light and shadow effects, etc., an engine like WebGL may be necessary. Animation interactivity and responsiveness: For animations that require frequent user interaction and fast response, lightweight CSS animations may be more suitable. Real-time animation scenes: For complex scenes that need to be updated in real time, such as 3D games or data visualization, WebGL's hardware accelerated rendering has obvious advantages.

[0066] 3. User device status Battery level: When the device is in a low battery state, the system should give priority to low-power rendering engines such as Canvas or CSS animations.

[0067] Complexity, interactivity, and real-time jointly determine the resource requirements of animation: The higher the complexity (geometry, particles, light and shadow effects), the greater the resource consumption and the higher the performance score. The stronger the interactivity requirement (fast response required), if lightweight technology (such as CSS animation) is used, the resource consumption is low and the performance score is low; if heavy rendering technology (such as WebGL) is used, the resource consumption is high and the performance score is high. The higher the real-time requirement (such as 3D games, real-time data visualization), the more resources are required for hardware accelerated rendering, and the performance score is usually higher.

[0068] (23) Animation implementation layer selection: If the user device supports WebGL and the animation contains 3D transformations, select the WebGL rendering path; if the animation is a 2D animation, select the CSS3 or Canvas rendering path; (24) Fallback mechanism: During the animation execution, the user device detects the performance indicators of the user device in real time. If the performance indicators drop, it will automatically switch to the suboptimal path. The suboptimal judgment criteria: The suboptimal rendering path usually reduces the occupation of device resources while maintaining the animation effect. When selecting the suboptimal path, the following criteria will be considered: 1.1 Resource Consumption Priority GPU priority: When GPU resources are overloaded (such as high CPU / GPU usage), switch to a rendering path with low GPU consumption (for example, switching from WebGL to Canvas 2D or CSS animation).

[0069] CPU Priority: When the CPU load is too high, choose a path to reduce CPU usage, such as using animations with lower frame rates or simplifying animation effects.

[0070] Memory Priority: If the system detects that memory usage is approaching the device limit, it will choose a rendering method with lower memory consumption, such as turning off unnecessary animation details (such as particle effects) or reducing image resolution.

[0071] 1.2 The Importance of Animation Effects Key animation vs. auxiliary animation: Key animation usually has a greater impact on the user experience (such as button click feedback). Therefore, when resources are tight, the suboptimal path will prioritize the smoothness of key animations, while simplifying or even pausing auxiliary animations (such as background decorative animations).

[0072] Real-time requirements for animation: Animations with lower real-time requirements (such as slowly changing backgrounds) can be downgraded to lower frame rates or resolutions, while animations with higher real-time requirements (such as user interaction feedback) need to ensure a relatively high response speed.

[0073] 1.3 Complexity of rendering effects According to the complexity of the animation, the suboptimal paths can be divided into: Lowering the frame rate: If the animation is complex and the system is running low on resources, lowering the frame rate (for example, from 60 FPS to 30 FPS or 15 FPS) is a common suboptimal option. This approach may slightly compromise the visual quality, but can significantly reduce resource usage.

[0074] Reduce animation details: The suboptimal path can reduce the load by removing unimportant details, such as reducing lighting and shadow effects in 3D animations, or reducing gradients and particle effects in 2D animations.

[0075] Switching rendering engines: For example, when switching from WebGL to Canvas 2D, a simplified 2D rendering version can be used instead of complex 3D animations.

[0076] 2. Division method To achieve the switch of suboptimal rendering paths, the system predefines rendering paths of different performance levels and dynamically adjusts them according to device performance indicators. The following is the division method: 2.1 Rendering Path Classification Rendering paths can be divided into performance levels, usually the following levels: Highest performance rendering path (e.g. WebGL + full effects): Targets high-performance devices, with all animation effects and high frame rates enabled.

[0077] Medium-performance rendering path (such as Canvas 2D + medium frame rate): suitable for medium-performance devices, turning off some advanced effects such as shadows and particle effects, and reducing the frame rate.

[0078] Low-performance rendering path (such as CSS animation or low-frame-rate Canvas): Suitable for low-performance devices, only retains basic animation effects and turns off all additional effects.

[0079] The lowest performance rendering path (such as static image replacement or low frame rate SVG): When system resources are very tight, only the simplest transition effects are retained or even replaced with static content.

[0080] 2.2 Dynamic Detection and Switching Logic By monitoring the device's CPU usage, GPU usage, memory usage, frame rate and other key indicators, decide whether to switch to the suboptimal path: When **CPU usage exceeds 80% or GPU usage exceeds 90%**, the system determines that the device is overloaded and enters a suboptimal path.

[0081] When the animation frame rate continues to be lower than a threshold (such as 20 FPS), the system will consider that the current rendering path cannot meet the smoothness requirements and will trigger the suboptimal path.

[0082] When the memory usage is close to the maximum limit of the device (for example, more than 90%), the system will also choose a suboptimal path with low memory consumption.

[0083] 3. Interactive animation adjustment method (31) Monitor user input: monitor user interaction actions; (32) Interaction data analysis: analyzing the type, speed and direction of interaction actions; (33) Animation adjustment: Based on the interaction data, adjust the animation parameters (such as speed, amplitude, delay, etc.) in real time to match the user's operation. The specific methods are as follows: (331) Key steps to dynamically adjust animation parameters (3311) Monitoring user interaction data: Real-time monitoring of various user interaction behaviors, which can include: Mouse movement: Capture the speed and position changes of the mouse. Click behavior: Track the frequency, location and object of user clicks. Touch operation: On mobile devices, user gestures such as sliding and pinching can be captured. Scrolling behavior: Capture the speed and direction of page scrolling. Keyboard input: The user's typing speed, frequency and input mode can be monitored.

[0084] (3312) Dynamically adjust animation parameters: adjust animation parameters in real time based on user interaction behavior; animation speed: adjust the speed of the animation based on the rhythm of the user's operation. For example, when the mouse moves quickly, the animation can be accelerated, and when it moves slowly, it can be decelerated. Animation amplitude: adjust the response amplitude of the animation based on the strength or amplitude of the user's interaction. For example, when touching, the farther the finger slides, the greater the amplitude of the animation change. Animation delay: adjust the delay time of the animation based on the frequency of the user's operation. For example, when the user clicks frequently, reduce the delay time of the animation so that the animation responds to the operation more quickly. Animation trigger: dynamically trigger certain animation effects based on the user's clicks, scrolling or other operations.

[0085] (332) Implement an adjustment mechanism to match user operations: Capture user operations and process animation properties in real time; common adjustment methods include: (3321) Animation Speed By monitoring the user's operation speed, the speed of the animation can be adjusted accordingly. For example, the mouse movement speed: if the user moves the mouse quickly, the animation can be accelerated synchronously; when the mouse movement slows down, the animation playback speed will also slow down accordingly.

[0086] (3322) Animation Amplitude: Adjusts the response of an animation based on the force or amplitude of a user's operation. For example, a swipe gesture: On a touchscreen device, the longer the user swipes, the greater the animation's displacement.

[0087] (3323) Animation Delay When users operate frequently, you can reduce the animation delay to improve responsiveness. For example: Frequent clicks: When users click in rapid succession, animations can reduce or eliminate delays, making the effect more immediate.

[0088] (3324) Dynamically adjust trigger conditions (Animation Trigger) Dynamically trigger different animations based on the rhythm or pattern of user operations. For example: Scroll speed: Dynamically trigger more noticeable or faster animation effects when users scroll the page quickly.

[0089] (333) Dynamically adjust the matching logic of animation parameters The key to implementing these adjusted matching logic is: Frequency of user behavior monitoring: Ensure that the user operation data captured is real-time and accurate. Throttling or debouncing techniques can be used to optimize performance.

[0090] Mapping of behaviors to animation parameters: Quantify user actions into specific animation parameters. Convert input data into animation effects through mathematical mapping or interpolation methods. For example, when converting mouse speed to animation speed, linear mapping or nonlinear functions can be used.

[0091] Response priority: Based on the type and frequency of user operations, you can define the priority of animation to ensure that more critical interactions (such as clicks and drags) receive animation feedback first.

[0092] The interactive animation adjustment method also includes: (34) Feedback loop: the animation effect will be instantly fed back to the user, and if the user changes the interaction method, the animation will be refreshed accordingly.

[0093] 4. Design method of declarative animation definition language (41) Language design: Develop a declarative syntax for JSON: The JSON object will need to contain the following common animation properties: start: The starting state of the animation. Usually the initial value of the CSS property.

[0094] end: The end state of the animation. Indicates the target value after the animation is executed.

[0095] duration: animation duration (in milliseconds).

[0096] delay: The delay before the animation starts (in milliseconds).

[0097] iterations: The number of iterations of the animation. If set to infinite, the animation will loop infinitely.

[0098] easing: The easing function of the animation, used to control the time curve of the animation. For example: ease-in, ease-out, linear, ease-in-out, etc.

[0099] direction: The playback direction of the animation. The values ​​can be normal (forward playback), reverse (reverse playback), alternate (alternate forward and reverse playback).

[0100] keyframes: Animation keyframes, which can define intermediate states.

[0101] Allows developers to describe the animation's start state, end state, duration, delay, number of iterations, and easing function; (42) Animation parser construction, wherein the parser can use an existing parser; (421) Parse JSON and find the target element The parser first needs to find the animation target element specified by JSON through methods such as document.querySelectorAll.

[0102] (422) Generate CSS animation; The parser converts the start and end states into @keyframes and performs CSS animations using the animation property.

[0103] Perform JavaScript animations: If more complex animations or fine-grained control are required, the parser can use requestAnimationFrame or the Web Animations API to perform animations.

[0104] (423) Support keyframe animation: convert declarative animation description into actual browser executable animation code; The parser should support multi-keyframe animation. By defining keyframes, multi-step animation can be generated, and the declarative animation description can be converted into actual browser executable animation code.

[0105] Example 2 This embodiment provides a computer-readable storage medium, on which a computer program is stored, and the computer program is executed by a processor to implement the method for implementing dynamic interaction of a user interface provided in Embodiment 1. A person skilled in the art can understand that all or part of the steps of implementing the method provided in Embodiment 1 can be completed by hardware related to the computer program, and the above-mentioned computer program can be stored in a computer-readable storage medium, and when the program is executed, the steps of the method provided in Embodiment 1 are executed; and the above-mentioned storage medium includes: ROM, RAM, magnetic disk or optical disk, etc., various media that can store program codes.

[0106] Example 3 like Figure 1 As shown, this embodiment provides a device for realizing dynamic interaction of user interface, comprising: a processor and a memory; the memory is used to store computer programs; the processor is connected to the memory, and is used to execute the computer program stored in the memory, so that the device for realizing dynamic interaction of user interface executes the method for realizing dynamic interaction of user interface provided by Example 1.

[0107] Specifically, the memory includes: ROM, RAM, disk, USB flash drive, memory card or CD and other media that can store program codes.

[0108] Preferably, the processor can be a general-purpose processor, including a central processing unit, a network processor, etc.; it can also be a digital signal processor, an application-specific integrated circuit, a field programmable gate array or other programmable logic device, a discrete gate or transistor logic device, or a discrete hardware component.

[0109] The above embodiments are merely illustrative of the principles and effects of the present invention, and are not intended to limit the present invention. Anyone familiar with the art may modify or alter the above embodiments without departing from the spirit and scope of the present invention. Therefore, all equivalent modifications or alterations made by a person of ordinary skill in the art without departing from the spirit and technical concept disclosed by the present invention shall still be covered by the claims of the present invention.

Claims

1. A method for realizing dynamic interaction of a user interface, characterized in that: include: (1) Resource-aware animation scheduling method (11) Animation performance score: Each animation element is assigned a performance score based on its complexity. The scoring dimensions include: geometric complexity of the animation, rendering effect complexity, animation frame rate requirements, number of animation elements, animation transformation and keyframe complexity, animation duration and timeline management. Based on the above dimensions, a weighted calculation is performed using the following formula: P i =w1·G+w2·R+w3·F+w4·N+w5·T Among them, G is the animation geometry complexity score, R is the animation rendering complexity score, F is the animation frame rate score, N is the animation element number score, T is the animation transformation and timeline complexity score, w1, w2, w3, w4, w5 are weight coefficients; (12) Performance baseline detection: When the page is loaded, the performance indicators of the current device are detected, including CPU and GPU load, memory usage, and battery capacity; (13) Animation priority decision: Determine the priority of each animation and whether it needs to be downgraded based on the performance score and performance baseline; (2) Differentiated animation rendering method (21) Rendering capability detection: detect the rendering technology supported by the user's device; (22) Adaptive rendering decision: Dynamically select the most appropriate rendering engine based on the animation performance score and rendering capability test results; (23) Animation implementation layer selection: If the user device supports WebGL and the animation contains 3D transformations, select the WebGL rendering path; if the animation is a 2D animation, select the CSS3 or Canvas rendering path; (24) Fallback mechanism: During the animation execution, the user device detects the performance indicators of the user device in real time. If the performance indicators drop, it automatically switches to the next best option. (3) Interactive animation adjustment method (31) Monitor user input: monitor user interaction actions; (32) Interaction data analysis: analyzing the type, speed and direction of interaction actions; (33) Animation adjustment: Based on the interaction data, the animation parameters are adjusted in real time to match the user's operation; (4) Design method of declarative animation definition language (41) Language design: Design a declarative syntax for JSON format: (42) Animation parser construction: (421) Parse JSON and find the target element; (422) Generate CSS animation; (423) Support keyframe animation: convert declarative animation description into actual browser executable animation code.

2. The method for realizing dynamic interaction of user interface according to claim 1, characterized in that: The complexity mentioned in (11) includes the number of key frames and the duration of the animation.

3. The method for realizing dynamic interaction of user interface according to claim 2, characterized in that: In (13), the decision method of animation priority is as follows: (131) Set resource thresholds. According to the performance baseline test results of the device, set the following thresholds: CPU load threshold, GPU load threshold, memory usage threshold, and battery power threshold; (132) Priority algorithm Calculate resource consumption margin: Based on the current CPU, GPU, memory, and battery status, calculate the corresponding margin of each resource of the system: Margin = 1-current resource occupancy rate; Resource weighting: According to the resources that the animation depends on, a weight is assigned to the margin value of each resource to obtain the weighted system margin; Animation priority decision: score each animation element based on its performance i , compared with the system margin: Priority = System Margin - P i If the priority of the animation is higher than the threshold in (131), the animation can run at full effect; If the priority is lower than a certain threshold, the animation needs to be downgraded. The methods of animation downgrading include: lowering the frame rate, reducing animation details, dynamically adjusting the number of particles or fineness in the animation, dynamically adjusting the animation path or interpolation method, and scheduling animation execution.

4. The method for realizing dynamic interaction of user interface according to claim 3, characterized in that: The method for dynamically selecting a rendering engine is as follows: selecting the most suitable rendering engine in real time according to the rendering capability and animation performance score of the device.

5. The method for realizing dynamic interaction of user interface according to claim 4, characterized in that: The specific implementation method of the suboptimal rendering path switching is as follows: (241) Rendering path classification: Rendering paths are classified according to performance levels; (242) Dynamic detection and switching logic: By monitoring the device's CPU usage, GPU occupancy, memory usage, and frame rate, decide whether to switch to the suboptimal path.

6. The method for realizing dynamic interaction of user interface according to claim 5, characterized in that: The specific implementation method of (33) is as follows: (331) Key steps for dynamically adjusting animation parameters: (3311) Monitoring user interaction data: real-time monitoring of various user interaction behaviors; (3312) Dynamically adjusting animation parameters: real-time adjustment of animation parameters based on user interaction behaviors; (332) Implement an adjustment mechanism to match user operations: capture user operations and process animation properties in real time; (333) Dynamically adjust the matching logic of animation parameters.

7. The method for realizing dynamic interaction of user interface according to claim 6, characterized in that: The (3) interactive animation adjustment method also includes: (34) feedback loop: the animation effect will be fed back to the user in real time, and if the user changes the interaction method, the animation will be refreshed accordingly.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that: The computer program is executed by a processor to implement the method for realizing dynamic interaction of a user interface as described in any one of claims 1 to 7.

9. A device for realizing dynamic interaction of user interface, characterized in that: include: Processor and memory; The memory is used to store computer programs; The processor is connected to the memory and is used to execute the computer program stored in the memory, so that the device for realizing dynamic interaction of the user interface executes the method for realizing dynamic interaction of the user interface as described in any one of claims 1 to 7.

Images