Method and device for realizing hierarchical stack linkage animation for batch icon dragging

Abstract

This invention discloses a method and apparatus for implementing hierarchical stacking linkage animation for batch icon dragging, belonging to the field of graphical user interface and human-computer interaction technology. The method includes: assigning a hierarchical index to each selected icon, and calculating a static offset and motion following coefficient based on the index to construct an initial stacked state with staggered arrangement; during the dragging process, the target position of the top-level icon is calculated based on the finger displacement, and the target position of non-top-level icons is directly set to the real-time position of the previous icon to achieve linkage following; smooth animation is executed through frame synchronization and distance threshold triggering mechanism; this invention achieves batch icon dragging animation with deep visual hierarchy and physical realism through a "leader-follower" model and dual parameter control, improving the naturalness of interaction and the clarity of user feedback.

Description

Technical Field

[0001] This invention relates to the field of graphical user interface (GUI) animation and human-computer interaction technology, and in particular to a method and apparatus for creating a deep visual hierarchy, staggered arrangement, and interactive animation effects when dragging selected application icons on the desktop or application management interface of electronic devices (such as smartphones, tablets, smart TVs, etc.). Background Technology

[0002] With the widespread adoption of touchscreen technology, users' demands for interactive experiences on electronic devices are increasing. In daily use, users often need to organize application icons on their desktops, such as simply overlapping multiple icons in the same position for dragging, or making multiple icons move synchronously and rigidly with the finger; or moving multiple icons to a folder or adjusting the page layout. Currently, mainstream operating systems generally use two relatively simple methods to handle batch icon dragging: 1. Fully Overlapping Mode: When a user selects multiple icons and starts dragging, all selected icons will instantly converge and completely overlap under the finger touch point. Although this method is simple to implement, it has significant drawbacks: users cannot intuitively perceive how many icons they are dragging, nor can they distinguish what each icon is, which can easily lead to misoperation or confusion.

[0003] 2. Synchronous Follow Mode: All selected icons move in the same direction, speed and direction as a rigid body during dragging. While this mode displays the number of icons, it lacks visual hierarchy and physical realism, making the interactive experience stiff and rigid, and failing to provide users with smooth and natural operation feedback.

[0004] Therefore, existing technologies urgently need a drag-and-drop animation scheme that can clearly display the quantity and individual characteristics of a batch of dragged objects, and provide smooth, natural, visually guiding and fun drag-and-drop animations to improve user efficiency and satisfaction. Summary of the Invention

[0005] The present invention aims to solve the problems existing in the prior art and provides a method and apparatus for implementing hierarchical stacking linkage animation for batch icon dragging.

[0006] To achieve the above objectives, this invention provides a method for implementing hierarchical stacking linkage animation for batch icon dragging. The core idea is to assign a unique hierarchical index to each dragged icon instance and calculate a fixed two-dimensional position offset and a differentiated motion following coefficient based on this index. During dragging, higher-level icons (smaller index) move close to the finger, while lower-level icons (larger index) follow the movement of the icon in the previous level with a certain delay and reduced displacement. This visually forms a fan-shaped or stepped icon stack that dynamically links and has a sense of depth and order, unfolding from the fingertip. The method includes: Step 1: Constructing the initial state of the hierarchical stack; Step 2: Calculating the linkage animation based on the "leader-follower" model; Step 3: Smoothing animation execution and performance optimization.

[0007] Further, step one includes: Sub-step 1.1, Hierarchical Index Allocation: When a batch selection operation is detected, the system assigns a unique integer index i to each selected icon according to predefined rules, where i=0 represents the top-level icon that is closest to the user, and the larger the value of i, the lower the level and the further back in the stack.

[0008] Sub-step 1.2, Static Offset Calculation: Define a base offset BaseOffset; for the icon with index i, its static initial offset relative to the drag start point is OffsetX_i = BaseOffset_X. i and OffsetY_i = BaseOffset_Y i causes the icons to initially appear in a stepped or diagonally misaligned arrangement.

[0009] Sub-step 1.3, Motion Parameter Pre-calculation: Define a damping factor, DampingFactor, and calculate the motion following coefficient for each icon: Ratio_i = clamp(1.0 - DampingFactor) i, MinRatio, 1.0), where MinRatio is the minimum following coefficient, and Ratio_i is used to control the response strength of the icon to the overall drag displacement.

[0010] Furthermore, step two includes: Sub-step 2.1: Input the reference displacement: The system continuously monitors the finger touch coordinates and calculates the cumulative displacement (ΔX, ΔY) of the finger since the start of dragging.

[0011] Sub-step 2.2, Target Calculation of Top-Level Icon: For the top-level icon i=0, its target position is directly determined by the finger displacement and its own following coefficient: TargetPos_0 = OriginalPos_0 + (ΔX Ratio_0, ΔY Ratio_0).

[0012] Sub-step 2.3, Calculation of target for non-top-level icons: For icons with index i>0, their target position does not directly depend on finger displacement, but is directly set to the current position of the previous icon (i-1): TargetPos_i = CurrentPos_(i-1).

[0013] Sub-step 2.4, Position calibration and constraint: Set a distance threshold FollowThreshold, and trigger a smooth movement animation to the target position only when the distance between the current position of icon i and TargetPos_i exceeds the threshold.

[0014] Furthermore, step three includes: Sub-step 3.1, Animation Interpolator Selection: Select an appropriate interpolator for the movement animation of each icon.

[0015] Sub-step 3.2, Frame Synchronization and Scheduling: Synchronize the movement animation of all icons with the device's display refresh rate.

[0016] Sub-step 3.3, Distance-driven animation triggering: A new movement animation is triggered only when the distance between the icon and its target position exceeds FollowThreshold.

[0017] Sub-step 3.4, Animation Cancellation and Completion: When the user stops dragging, stop all ongoing movement animations and execute the return or placement animation based on the final placement result.

[0018] The present invention also provides a device for implementing hierarchical stacking linkage animation for batch icon dragging, the device comprising: The initial state building module is used to calculate and set the initial visual position of each selected icon in the stack before dragging begins, forming a staggered static effect. The linkage animation calculation module is used to calculate the target position of each icon in the stack in real time during the user's dragging process; The animation execution and optimization module is used to present the calculated target position through smooth animation and optimize performance.

[0019] Compared with the prior art, the present invention has the following beneficial effects: 1. Enhanced visual feedback: Innovatively, it is proposed that in hierarchical stacking, the target position of the next icon is directly equal to the real-time position of the previous icon. This "position transfer" model automatically generates complex, wave-like following animations with extremely simple rules, which is computationally efficient and produces natural results. Through hierarchical stacking and staggered arrangement, users can intuitively see the number and individual dragged icons, and also avoid accidental operation.

[0020] 2. Enhance the naturalness of interaction: Introduce FollowThreshold as the animation trigger valve. It only drives the icon to catch up when it "falls behind" to a certain extent. This simulates the elastic connection in reality and effectively reduces the over-drawing of the GPU and the redundant calculation of the CPU. The linkage following animation generated by this "leader-follower" model simulates the inertia and elasticity of the physical world, making the interactive experience smoother, more natural and more fun.

[0021] 3. Performance-friendly: The visual stacking shape is controlled by a static offset (Offset_i), while the motion response difference is controlled by a dynamic following coefficient (Ratio_i). The combination of the two ensures recognizability in static situations and creates a sense of hierarchy and physics in dynamic situations. This lazy animation scheduling mechanism based on distance thresholds effectively reduces unnecessary calculations and rendering, ensuring smooth operation on various performance devices. Attached Figure Description

[0022] Figure 1 This is a preview diagram of an embodiment of the present invention; Figure 2 This is a schematic diagram of the operation sequence of an embodiment of the present invention; Figure 3 This is a flowchart illustrating the core method implementation of an embodiment of the present invention; Figure 4 This is a flowchart of step one of the embodiments of the present invention; Figure 5 This is a flowchart of step two of an embodiment of the present invention; Figure 6 This is a flowchart of step three in an embodiment of the present invention. Detailed Implementation

[0023] To make the objectives, technical solutions, and advantages of the present invention clearer, the present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments; it should be understood that the specific embodiments described herein are merely illustrative of the present invention and are not intended to limit the present invention.

[0024] like Figure 1The image shown is a preview effect diagram of an embodiment of the present invention. The image shows a layered stacking animation effect with a deep visual hierarchy formed by the group of icons when the user long-presses and drags a batch of selected application icons on the mobile terminal desktop. From the finger touch point, the icons are arranged in a staggered staggered manner in a step or fan shape, with high-level icons close to the finger and low-level icons unfolding backward in sequence, forming a visually stacked body with a sense of order and dynamism, allowing the user to intuitively perceive the number and relative position of the dragged icons.

[0025] Combination Figure 2 The diagram shown is a schematic representation of the operation scenarios in an embodiment of the present invention. It details several typical operation scenarios that a user may experience during the process of dragging and dropping icons in batches, and the corresponding interface changes: 1. Before operation: The desktop is in normal editing mode, and the user has selected multiple icons by long press or selection box, and the icons are in a highlighted or shaking state; 2. Drop into empty space: The user drags the stacked icons to an empty area of ​​the desktop and releases them. All icons smoothly unfold from the stacked state and are neatly arranged in a grid to the new position. 3. Drag to icon: Users drag stacked icons on top of another existing application icon, and the system automatically creates a folder, with all icons shrinking and "sucking" into the folder; 4. One-click exit from folder: Users can drag stacked icons to the "Exit Folder" area at the edge of the screen, and the icons will pop out of the folder and return to individual icons.

[0026] These scenarios demonstrate the adaptive animated feedback of the method of the present invention under different interaction results, which enhances the user experience.

[0027] ( Example 1 Method Examples This embodiment provides a method for implementing hierarchical stacking linkage animation for batch icon dragging. This method can be applied to any electronic device with a touch screen, such as smartphones, tablets, smartwatches, in-vehicle infotainment systems, etc.; and can be implemented in the desktop launcher or file manager of the device's operating system (such as Android, iOS, HarmonyOS, etc.).

[0028] like Figure 3 As shown, this method mainly includes three core steps: constructing the initial state of hierarchical stacking, calculating the linkage animation based on the "leader-follower" model, and executing smooth animation and optimizing performance.

[0029] Step 1: Constructing the initial state of the hierarchical stack; The core objective of this step is to calculate and set the initial visual position of each selected icon within the stack before the user's finger touches the screen and begins dragging, creating an ordered, staggered static visual array for all selected icon instances, forming a staggered static effect; This provides the user with immediate visual feedback on "how many icons are selected" and "what they roughly represent"; such as Figure 3 and combined Figure 4 As shown, the specific implementation of this step includes the following sub-steps: Sub-step 1.1, Hierarchical Index Assignment: When the system detects that the user has completed a batch selection operation (for example, long-pressing an icon to enter edit mode and then clicking other icons in sequence; or selecting multiple icons at once using a box selection gesture), it immediately triggers a drag event; at this time, the system will obtain a list of all selected icons; the system assigns a unique integer hierarchical index i to each icon in the list according to a predefined, consistent rule (such as selection order, screen position); the setting of the following rules directly affects the final visual stacking effect.

[0030] A. Optimal selection rule: The icons are assigned according to the order in which they are selected by the user; the first selected icon is assigned an index i=0, the second selected icon is assigned an index i=1, and so on; this rule best matches the user's psychological expectation of operation - the first selected icon is placed on the top layer of the stack, and the last selected icon is placed on the bottom layer.

[0031] B. Alternative rule: The icons can also be sorted according to their original position on the screen; for example, the index can be assigned in order from left to right and from top to bottom; this rule is suitable for situations such as selecting a large number of icons at once, and can ensure the visual order of the stacking.

[0032] In this embodiment, the default "selection order" rule is adopted: index i=0 represents the topmost icon that is closest to the user's visual perception (i.e., the "leader"), while the larger the index i value, the lower and further back the icon is in the stack (i.e., the "follower").

[0033] Sub-step 1.2, Static offset calculation: In order to create a visually appealing staggered stacking effect, rather than complete overlap, a static initial offset needs to be calculated for each icon relative to the drag start point (usually the initial position of the top icon i=0).

[0034] 1) Define a base offset, BaseOffset, which is a two-dimensional vector containing X-axis and Y-axis components, for example, BaseOffset = (10px, 10px); this value can be adjusted according to factors such as icon size and screen density to achieve the best visual effect: 2) For the icon with index i, the formula for calculating its static initial offset is: OffsetX_i = BaseOffset_X i; (Formula 1) OffsetY_i = BaseOffset_Y i; (Formula 2) For example: 1) For the icon with index i=0, its offset is (0, 0), which means it is located at the starting point of the drag. 2) For the icon with index i=1, its offset is (10px, 10px), which means it is located 10 pixels off to the right from the starting point. 3) For the icon with index i=2, its offset is (20px, 20px); 4) And so on.

[0035] Using this simple linear formula, all selected icons will immediately jump from their original positions to a stepped position arranged diagonally around the top icon when the drag begins. This results in the icons being arranged in a stepped or diagonal staggered manner from the very beginning, which clearly shows the number and relative order of the icons.

[0036] Sub-step 1.3, Motion Parameter Pre-calculation; To make the animation during dragging more layered and physically realistic, a "motion following coefficient" needs to be pre-calculated for each icon. This coefficient determines the icon's responsiveness to finger displacement. First, define a damping factor, such as 0.05. The larger this value, the more obvious the differences in motion delay and amplitude between icons at different levels. Then, define a minimum following coefficient, such as 0.7. This value ensures that even the bottommost icon will have noticeable movement during dragging, rather than remaining completely still. For the icon at index i, the formula for calculating the motion following coefficient Ratio_i, which controls the icon's response intensity to the overall drag displacement, is as follows: Ratio_i = clamp(1.0 - DampingFactor i, MinRatio, 1.0); (Formula 3) The `clamp()` function restricts the calculation results to the interval [MinRatio, 1.0].

[0037] For example: 1) For the icon with index i=0: Ratio_0 = clamp(1.0 - 0.05) (0, 0.7, 1.0) = 1.0; This means the top-level icon will follow the finger movement perfectly. 2) For the icon with index i=1: Ratio_1 = clamp(1.0 - 0.05) (1, 0.7, 1.0) = 0.95; 3) For the icon with index i=2: Ratio_2 = clamp(1.0 - 0.05) (2, 0.7, 1.0) = 0.90; 4) For the icon with index i=6: Ratio_6 = clamp(1.0 - 0.05) (6, 0.7, 1.0) = 0.70; At this point, the coefficient has reached the lower limit MinRatio; thus, step one is complete; the system has prepared the initial visual position and key motion parameters for each icon.

[0038] Step Two: Calculation of Linked Animation Based on the "Leader-Follower" Model; this step is the core innovation of this invention; its core objective is to calculate, in real-time and dynamically, the target position that each icon in the stack should reach in the next frame during the user's continuous dragging process; and its core rule is an extremely sophisticated "leader-follower" model, that is, each icon attempts to follow its immediately adjacent higher-level icon; such as Figure 3 and combined Figure 5 As shown, the specific implementation of this step includes the following sub-steps: Sub-step 2.1: Input the reference displacement; The system continuously obtains the real-time coordinates of the user's finger touch on the screen through the touch event listening interface; Each time the finger position changes (i.e., ACTION_MOVE event), the system calculates the total cumulative displacement (ΔX, ΔY) of the finger since the start of this drag; This cumulative displacement is relative to the drag starting point.

[0039] Sub-step 2.2, Target Calculation of Top-Level Icon (Leader); As the "leader" of the stack, the target position of the top-level icon (i=0) is directly determined by its own position and the cumulative displacement of the user's finger under the motion tracking coefficient. The calculation formula is as follows: TargetPos_0 = OriginalPos_0 + (ΔX Ratio_0, ΔY Ratio_0); (Formula 4) in: 1) OriginalPos_0 is the initial position of the top-level icon (i.e., the position after offsetting in step one before dragging begins). 2) Ratio_0 is the motion tracking coefficient of the top-level icon, with a value of 1.0; 3) (ΔX) Ratio_0, ΔY Ratio_0) is the displacement that the top-level icon needs to be moved.

[0040] Since Ratio_0 ≈ 1.0, the top-level icon follows the finger movement almost completely and without delay, becoming the "tractor" of the entire stack.

[0041] Sub-step 2.3: Calculation of target position for non-top-level icons (followers); This is a key innovation in achieving the "linked following" effect; For all non-top-level icons with index i>0, the calculation method for their target position is completely different from that of the top-level icons; They no longer directly refer to the finger's displacement, but instead use the real-time current position of their previous-level icon (i.e., the icon with index i-1) as their target position, and the calculation formula is extremely simple: TargetPos_i = CurrentPos_(i-1); (Formula 5) For example: 1) The target position of the icon with index i=1 is the current position of the icon with index i=0; 2) The target position of the icon with index i=2 is the current position of the icon with index i=1; and so on.

[0042] This is the key innovation for achieving the "linkage and following" effect, which makes the movement trajectory of lower-level icons completely "pulled" by the adjacent higher-level icons. The beauty of this "position transfer" model is that it automatically generates extremely complex wave-transfer following animations with a very simple logical rule. When the user moves their finger quickly, the top-level icon quickly follows, while the second-level icon behind it tries to catch up with the "old position" of the top-level icon, and the third-level icon chases the "old position" of the second-level icon, thus forming a dynamic effect similar to a chain or spring, with delay and decay effects, which looks very natural.

[0043] Sub-step 2.4, Position calibration and constraint; Although the target position of each icon has been calculated, if all icons are forced to move to their target positions in every frame, not only will the amount of calculation be large, but the animation will also appear too "stiff" and lose the charm of "chasing". Therefore, an important optimization and constraint mechanism needs to be introduced to check the distance between the current position of icon i and TargetPos_i.

[0044] A distance threshold, FollowThreshold, can be defined. This value can be associated with BaseOffset in step one, for example, set to 1.5 times the size of BaseOffset. The system will calculate the distance Distance_i between the current position CurrentPos_i and the target position TargetPos_i of each icon i in real time. If Distance_i <= FollowThreshold, the icon is considered to be "close enough" and no movement operation is required, maintaining its current state. Only when Distance_i > FollowThreshold is the icon considered to have "fallen behind" and a smooth movement animation to the target position needs to be triggered.

[0045] This mechanism simulates elastic connections in the real world: the rebound force is only generated when the connection is stretched to a certain extent; this greatly reduces unnecessary animation calculations and rendering calls, and is also the key to ensuring high performance.

[0046] Step 3: Smooth Animation Execution and Performance Optimization; The core objective of this step is to present the target position calculated in Step 2 to the user through a smooth and elegant animation, ensuring that the entire process runs stably and efficiently on devices of any performance level; such as Figure 3 and combined Figure 6 As shown, the specific implementation of this step includes the following sub-steps: Sub-step 3.1, Animation Interpolator Selection; Select a suitable Interpolator for the movement animation of each icon; Once it is determined that an icon needs to move, a suitable animation interpolator needs to be selected for it to control the movement rate curve from its current position to the target position.

[0047] A. Recommended solution: Use DecelerateInterpolator; it will make the icon move faster at the beginning and then gradually slow down as it approaches the target position, simulating the physical inertia of an object slowing down and stopping due to friction, which looks very natural. B. Alternative: You can also use the OvershootInterpolator, which makes the icon briefly "rush" past the target position before bouncing back, creating a more bouncy feel; the specific choice depends on the design requirements.

[0048] Sub-step 3.2, Frame Synchronization and Scheduling; To ensure smooth animation and avoid stuttering or frame skipping, the animation updates of all icons must be synchronized with the device's display refresh rate (VSYNC, vertical sync signal); the specific steps are as follows: Create a global, reusable animation update task (e.g., a Runnable object named mCheckDragsFrame). This task is registered with the system's Choreographer or a similar frame callback mechanism. Whenever a new VSYNC signal arrives, the system will call back the mCheckDragsFrame task. In the run() method of this task, perform the following operations uniformly: 1) Read the latest finger displacement data; 2) Call the linkage calculation logic in step two to update the target positions of all icons; 3) Iterate through all icons and check if a new animation needs to be triggered (based on FollowThreshold). 4) If necessary, start or update the corresponding property animation (such as ObjectAnimator).

[0049] This centralized frame synchronization scheduling checks the animation status of all icons after each VSYNC cycle and triggers a new round of position calculation and animation update. This avoids triggering animation updates in multiple places and at different times, ensuring that the animation status of all icons is synchronized and consistent in every frame. It also avoids frequent and uncontrollable redrawing, ensuring the smoothness of the animation.

[0050] Sub-step 3.3, Distance-Driven Animation Triggering: Not all icons are forced to move in every frame; a new movement animation is triggered only when the distance between an icon and its target position exceeds the FollowThreshold. As mentioned earlier, the animation triggering is not based on every frame, but rather on whether the distance between the icon's current position and the target position exceeds the threshold. This is an important performance optimization point, meaning: 1) When the user drags slowly, the stacked volume may move smoothly as a whole, and the relative distance between the internal icons changes very little. Therefore, internal animations are rarely triggered, reducing unnecessary calculation and rendering overhead and saving a lot of computing power. 2) Only when the user moves quickly or stops abruptly will the "followers" inside the stack be triggered one by one to catch up because they have "fallen behind", thus presenting a dynamic wave effect.

[0051] Sub-step 3.4, Animation Cancellation and Completion; When the user lifts their finger (ACTION_UP event), the drag ends; At this point, the system needs to immediately stop all ongoing movement animations, and depending on the final placement result, all icons may need to execute a return-to-position animation or a placement animation: 1. Stop all animations: Immediately cancel all ongoing icon movement animations to prevent them from continuing to move around after the drag is finished; 2. Determine the placement result: Based on the position of the finger, the system determines the final result of this drag operation; for example, whether to place it in an empty area, on an existing folder, or to put it back in its original position; 3. Execution end animation: 1) If it is Place in blank area Therefore, all icons need to perform a "return" animation, smoothly moving from their current stacked state to their new positions and restoring them to their normal grid arrangement; 2) If it is Put it in a folder Therefore, all icons need to perform an animation of "sucking" the folder; 3) If it is Cancel operation Therefore, all icons need to perform a "return" animation to smoothly return from the stacked state to their original positions.

[0052] ( Example 2 Device Examples Corresponding to the above method embodiments, this embodiment provides a device for implementing hierarchical stacking linkage animation for batch icon dragging. This device can be integrated into the operating system of an electronic device or as part of a standalone application (such as a third-party desktop launcher). The device includes the following modules: 1. Initial State Construction Module; This module is responsible for executing step one in the method embodiment, and its main functions are specifically completed by the following units: 1) Index allocation unit: After detecting a batch selection operation, a unique hierarchical index is assigned to each selected icon according to a predetermined rule (such as the selection order); 2) Offset Calculation Unit: Based on the preset base offset and icon index, calculate the static initial offset of each icon and set its initial display position to form a staggered stacking effect; 3) Parameter pre-calculation unit: Based on the preset damping coefficient and minimum following coefficient, calculate the motion following coefficient for each icon and bind the coefficient to the icon.

[0053] 2. Linked Animation Calculation Module; This module is responsible for executing step two in the method embodiment and is the core of the device. Its main functions are specifically completed by the following units: 1) Displacement monitoring unit: continuously monitors and records the coordinates of finger touch events, calculates and outputs the cumulative displacement since the start of dragging; 2) Leader Calculation Unit: Receives the cumulative displacement and the following coefficient of the top-level icon, and calculates the target position of the top-level icon; 3) Follower calculation unit: Receives the real-time current position of the previous level icon and uses it as the unique target position of the current icon; 4) Constraint Judgment Unit: Compares the distance between the current position of each icon and its target position, and compares it with the preset following threshold to determine whether the animation needs to be triggered.

[0054] 3. Animation Execution and Optimization Module; This module is responsible for executing step three in the method embodiment, and its main functions are specifically completed by the following units: 1) Animation Engine Unit: Responsible for creating, managing, and playing icon movement animations; this unit integrates multiple interpolators and can select the appropriate interpolator according to needs; 2) Frame synchronization scheduling unit: synchronized with the system's display refresh rate, coordinating the animation updates and rendering of all icons in a unified frame callback; 3) Lazy triggering unit: Based on the result of the constraint judgment unit, it decides whether to start or update the animation for a specific icon, thereby achieving performance optimization; 4) Lifecycle Management Unit: Responsible for canceling all ongoing animations when the drag ends, and triggering the corresponding end animation based on the drag result (successful placement, cancellation, etc.).

[0055] It should be noted that the above modules and units can be implemented through software, hardware, or a combination thereof; for example, they can be implemented using programming languages ​​such as Java, Kotlin, and C++, combined with animation APIs provided by frameworks such as the Android SDK or iOS UIKit.

[0056] It should be understood that the above description is only a preferred embodiment of the present invention and is not sufficient to limit the technical solution of the present invention. For those skilled in the art, within the spirit and principles of the present invention, additions, subtractions, substitutions, transformations or improvements can be made based on the above description, and all such additions, subtractions, substitutions or improvements should fall within the protection scope of the appended claims of the present invention.

Claims

1. A method for implementing hierarchical stacking linkage animation for batch icon dragging, characterized in that, include: Step 1: Before dragging begins, assign a hierarchical index to each selected icon, and calculate the static offset and motion following coefficient based on the hierarchical index to construct an initial stacked state with staggered arrangement; Step 2: During the dragging process, the target position of each icon is calculated in real time based on the "leader-follower" model. The target position of the top-level icon is calculated based on the finger displacement and its own following coefficient, while the target position of non-top-level icons is directly set to the real-time current position of the icon in the previous level. Step 3: Based on the calculated target position, execute a smooth animation, and trigger or stop the animation when preset conditions are met.

2. The method for implementing hierarchical stacking linkage animation for batch icon dragging according to claim 1, characterized in that, In step one, the rule for assigning a hierarchical index to each selected icon is as follows: the first selected icon is indexed as 0, and the indexes of the subsequent selected icons are incremented sequentially.

3. The method for implementing hierarchical stacking linkage animation for batch icon dragging according to claim 1, characterized in that, In step one, the static offset Offset_i is calculated using the following formula: Offset_i = BaseOffset i, where BaseOffset is the preset base offset and i is the icon's level index.

4. The method for implementing hierarchical stacking linkage animation for batch icon dragging according to claim 1, characterized in that, In step one, the motion tracking coefficient Ratio_i is calculated using the following formula: Ratio_i = clamp(1.0 - DampingFactor) i, MinRatio, 1.0), where DampingFactor is the preset damping factor, MinRatio is the preset minimum following factor, and the clamp function is used to limit the result to the interval [MinRatio, 1.0].

5. The method for implementing hierarchical stacking linkage animation for batch icon dragging according to claim 1, characterized in that, In step two, the formula for calculating the target position TargetPos_0 of the top-level icon is: TargetPos_0 = OriginalPos_0 + (ΔX) Ratio_0, ΔY Ratio_0), where OriginalPos_0 is the initial position of the top-level icon, (ΔX, ΔY) is the cumulative displacement of the finger, and Ratio_0 is the motion following coefficient of the top-level icon.

6. The method for implementing hierarchical stacking linkage animation for batch icon dragging according to claim 1, characterized in that, In step two, for non-top-level icons with index i > 0, the formula for calculating the target position TargetPos_i is: TargetPos_i = CurrentPos_(i-1), where CurrentPos_(i-1) is the real-time current position of the icon with index i-1.

7. The method for implementing hierarchical stacking linkage animation for batch icon dragging according to claim 1, characterized in that, Step two also includes a position calibration step: setting a follow threshold, FollowThreshold, and triggering a movement animation to the target position only when the distance between the current position of the icon and its target position is greater than the follow threshold.

8. The method for implementing hierarchical stacking linkage animation for batch icon dragging according to claim 1, characterized in that, In step three, the execution of the smooth animation includes using a deceleration interpolator or an overshoot interpolator to control the rate curve of the icon movement.

9. The method for implementing hierarchical stacking linkage animation for batch icon dragging according to claim 1, characterized in that, Step three also includes a frame synchronization step: creating a unified animation update task, synchronizing the task with the device's display refresh rate, and uniformly performing target position calculations and animation trigger judgments for all icons in each refresh cycle.

10. A device for implementing hierarchical stacking linkage animation for batch icon dragging, characterized in that, include: The initial state construction module is used to assign a hierarchical index to each selected icon before dragging begins, and calculate the static offset and motion following coefficient based on the hierarchical index to construct an initial stacked state with staggered arrangement. The linkage animation calculation module is used to calculate the target position of each icon in real time during the dragging process based on the "leader-follower" model. The target position of the top-level icon is calculated based on the finger displacement and its own following coefficient, while the target position of non-top-level icons is directly set to the real-time current position of the icon in the previous level. The animation execution and optimization module is used to execute smooth animations based on the calculated target position, and to trigger or stop the animations when preset conditions are met.

Images