A scrolling interaction method, system, device, and storage medium for an application interface.

Abstract

This application discloses a scrolling interaction method, system, device, and storage medium for an application interface, belonging to the technical field of mobile application development technology. The scrolling interaction method for the application interface includes: creating an instance of an inertial deceleration controller and inputting an initial scrolling speed into the inertial deceleration controller; calling the inertial deceleration controller's start animation method and passing a frame callback function and a completion callback function as parameters to the inertial deceleration controller; determining whether the animation start duration is less than the total animation duration; if so, passing the animation start duration to a trajectory calculation module, using the trajectory calculation module to determine the current position, and uploading the current position to the application layer by calling the frame callback function; if not, uploading the animation completion flag and endpoint position to the application layer by calling the completion callback function. This application enables inertial scrolling of interactive objects in the application interface when the system's native scrolling component cannot be used.

Description

Technical Field

[0001] This application relates to the field of mobile application development technology, and in particular to a scrolling interaction method, system, device, and storage medium for an application interface. Background Technology

[0002] In application usage, scrolling is the most fundamental and crucial element of the user experience. Users expect that after a rapid swipe, the content on the application interface will continue to move with inertia, just like in the real physical world, gradually decelerating until it stops. This physically intuitive interactive experience is called inertial scrolling or momentum scrolling.

[0003] In related technologies, the system's native scrolling component is usually used to achieve the inertial effect. However, the aforementioned inertial scrolling mechanism is deeply bound to the scrolling component, making it impossible to use the scrolling component independently in interactive objects such as data visualization charts and nested structures.

[0004] Therefore, how to enable inertial scrolling of interactive objects in the application interface when the system's native scrolling component cannot be used is a technical problem that needs to be solved by those skilled in the art. Summary of the Invention

[0005] The purpose of this application is to provide a scrolling interaction method, system, device, and storage medium for an application interface, which enables interactive objects in the application interface to achieve inertial scrolling when the system's native scrolling component cannot be used.

[0006] To address the aforementioned technical problems, this application provides a scrolling interaction method for an application interface, which includes: Determine the initial scrolling speed of interactive objects in the application interface; An instance of an inertial deceleration controller is created, and the initial rolling speed is input into the inertial deceleration controller; wherein, the inertial deceleration controller includes a parameter configuration module, a trajectory calculation module, and an animation driving module; the parameter configuration module is used to receive and configure rolling parameters including the initial rolling speed; The inertial deceleration controller's start animation method is invoked, and the frame callback function and completion callback function are passed to the inertial deceleration controller as parameters, so that the inertial deceleration controller performs a preset operation; wherein, the preset operation includes: using the animation driving module to record the animation start time; registering a callback with the timer and starting the inertial scrolling animation; using the trajectory calculation module to calculate the end position and total duration of the inertial scrolling animation based on the scrolling parameters; When the timer triggers the callback, the animation driving module is used to determine the duration of the animation that has been started, and to determine whether the duration of the animation that has been started is less than the total duration of the animation. If so, the animation start duration is passed to the trajectory calculation module, the current position is determined by the trajectory calculation module, and the current position is uploaded to the application layer by calling the frame callback function so that the application layer updates the screen content based on the current position; If not, the completion callback function is called to upload the animation completion flag and endpoint position to the application layer, so that the application layer stops updating the screen content after updating and displaying the last frame based on the endpoint position.

[0007] Optionally, updating the screen content based on the current location includes: The displacement increment for this frame is calculated based on the current position and the historical position, and then added to the cumulative displacement variable; wherein, the historical position is the current position when the content of the previous frame was displayed; Determine whether the value of the cumulative displacement variable is greater than or equal to the preset step width; If so, the number of movement steps is calculated based on the cumulative displacement variable and the preset step width, the content of the current frame is displayed according to the number of movement steps, and the value of the cumulative displacement variable is cleared to zero; If not, the content of the previous frame is set as the content of the current frame, and the system waits to receive the new current position.

[0008] Optionally, the interactive object is an inner tab of a nested structure, and the nested structure also includes an outer list; Accordingly, determining the initial scrolling speed of interactive objects in the application interface includes: By listening to the scrolling events of the outer list, the inertial speed of the outer list when it reaches the top position is set as the initial scrolling speed of the inner tab.

[0009] Optionally, the interactive object is a data visualization chart; Accordingly, determining the initial scrolling speed of interactive objects in the application interface includes: During the user's interaction with the data visualization chart, a gesture recognizer is used to detect events where the user lifts their finger. If a user's finger is lifted, the data visualization chart is set to the initial scrolling speed at the current scrolling speed.

[0010] Optional, also includes: After determining the endpoint position of the inertial scrolling animation, a range to be displayed is determined based on the endpoint position, and the data corresponding to the range to be displayed is preloaded.

[0011] Optionally, before creating an instance of the inertial deceleration controller, the following steps are also included: Determine if there are other inertial scrolling animations currently running; If so, interrupt other inertial scrolling animations that are currently running by calling the interrupt method; Accordingly, the process of the inertial deceleration controller starting the inertial rolling animation also includes: If an animation interruption command is received, the timer is stopped, and the animation interruption flag is uploaded to the application layer by calling the completion callback function, so that the application layer stops updating the screen content.

[0012] Optionally, the scrolling parameters include the initial scrolling speed, initial position, deceleration rate, and stop threshold. The initial position is the position at the start of the inertial scrolling animation. The deceleration rate is the rate at which the scrolling speed of the inertial scrolling animation decays. The stop threshold is a scrolling speed threshold used to determine whether the inertial scrolling animation has stopped. Accordingly, the trajectory calculation module is used to calculate the endpoint position based on the initial scrolling speed and the deceleration rate, to calculate the total animation duration based on the initial scrolling speed, the deceleration rate and the stopping threshold, and to calculate the current position based on the initial scrolling speed, the deceleration rate and the animation start time.

[0013] This application also provides a scrolling interaction system for an application interface, the system comprising: The speed determination module is used to determine the initial scrolling speed of interactive objects in the application interface; A controller creation module is used to create an instance of an inertial deceleration controller and input the initial rolling speed into the inertial deceleration controller; wherein, the inertial deceleration controller includes a parameter configuration module, a trajectory calculation module, and an animation driving module; the parameter configuration module is used to receive and configure rolling parameters including the initial rolling speed; The callback setting module is used to call the start animation method of the inertial deceleration controller, and pass the frame callback function and the completion callback function as parameters to the inertial deceleration controller so that the inertial deceleration controller performs a preset operation; wherein, the preset operation includes: using the animation driving module to record the animation start time; registering a callback with the timer and starting the inertial scrolling animation; using the trajectory calculation module to calculate the end position and the total duration of the inertial scrolling animation based on the scrolling parameters; The duration determination module is used to determine the duration of the animation that has started when the timer triggers the callback, using the animation driving module, and to determine whether the duration of the animation that has started is less than the total duration of the animation. The first processing module is used to, if the animation start duration is less than the total animation duration, pass the animation start duration to the trajectory calculation module, use the trajectory calculation module to determine the current position, and upload the current position to the application layer by calling the frame callback function, so that the application layer updates the screen content based on the current position; The second processing module is used to upload the animation completion flag and endpoint position to the application layer by calling the completion callback function if the animation start duration is greater than or equal to the total animation duration, so that the application layer stops updating the screen content after updating and displaying the last frame of the screen based on the endpoint position.

[0014] This application also provides a storage medium storing a computer program thereon, wherein the computer program, when executed, implements the steps of the scrolling interaction method of the above-mentioned application interface.

[0015] This application also provides an electronic device, including a memory and a processor, wherein the memory stores a computer program, and the processor, when calling the computer program in the memory, implements the steps of the above-mentioned scrolling interaction method of the application interface.

[0016] This application provides a scrolling interaction method for an application interface. After determining the initial scrolling speed of the interactive object, this method creates a corresponding inertial deceleration controller instance for the interactive object and inputs the initial scrolling speed into the inertial deceleration controller. This application calls the inertial deceleration controller's animation start method, passing a frame callback function and a completion callback function as parameters to the inertial deceleration controller. This allows the inertial deceleration controller to establish an association with a timer, record the animation start time, and start the inertial scrolling animation. When the timer triggers a callback, it compares the animation start duration with the total animation duration to determine if the inertial scrolling animation has ended. If the inertial scrolling animation has not ended, it calls the frame callback function to upload the current position determined by the trajectory calculation module to the application layer for updating the screen content. If the inertial scrolling animation has ended, it calls the completion callback function to upload the animation completion flag and the endpoint position to the application layer to stop updating the screen content. In the above process, the inertial deceleration controller implements the functions of scrolling simulation, animation driving, and status notification without relying on the system's native scrolling component. Therefore, this application enables inertial scrolling of interactive objects in the application interface when the system's native scrolling component cannot be used. This application also provides a scrolling interactive system for an application interface, a storage medium, and an electronic device, which have the aforementioned beneficial effects, and will not be elaborated further here. Attached Figure Description

[0017] To more clearly illustrate the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0018] Figure 1 A flowchart illustrating a scrolling interaction method for an application interface provided in an embodiment of this application; Figure 2 A schematic diagram of the architecture of a mobile terminal rolling inertia deceleration control system based on exponential decay provided in an embodiment of this application; Figure 3 This is a flowchart illustrating the implementation of an animation startup and execution function provided in an embodiment of this application. Figure 4 A flowchart illustrating the implementation process of discrete scrolling of a custom chart, as provided in this application embodiment; Figure 5 A flowchart illustrating the implementation process of nested scrolling inertial velocity transfer provided in an embodiment of this application; Figure 6 This is a schematic diagram of the structure of a scrolling interaction system for an application interface provided in an embodiment of this application. Detailed Implementation

[0019] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0020] Please see below. Figure 1 , Figure 1 This is a flowchart of a scrolling interaction method for an application interface provided in an embodiment of this application.

[0021] Specific steps may include: S101: Determine the initial scrolling speed of interactive objects in the application interface.

[0022] This embodiment can be applied to electronic devices running applications, and can display an inertial scrolling animation that conforms to physical intuition after the user's gesture scrolling ends.

[0023] An electronic device's application interface (i.e., a human-computer interaction interface) can contain one or more interactive objects. These interactive objects can be data visualization charts (i.e., custom-drawn charts), nested structures, and other interactive objects. The initial scrolling speed of the interactive object refers to the speed at the start of the inertial scrolling animation of the interactive object.

[0024] Before this step, users can perform swipe gestures on interactive objects within the application interface. If the user's object is a data visualization chart, the initial scrolling speed can be the instantaneous speed at the end of the user's gesture when the user lifts their finger (i.e., when the user's gesture ends). If the user's object is a nested structure (including an outer list and inner tabs), the initial scrolling speed can be the inertial speed of the outer list when it reaches the top position.

[0025] S102: Create an instance of the inertial deceleration controller and input the initial rolling speed into the inertial deceleration controller.

[0026] This step involves instantiating an inertial deceleration controller object by calling the constructor of the controller class. The inertial deceleration controller is a controller that implements inertial scrolling, independent of the system's native scrolling component. The inertial deceleration controller includes a parameter configuration module, a trajectory calculation module, and an animation driving module.

[0027] The parameter configuration module is used to receive and configure rolling parameters, including the initial rolling speed; the parameter configuration module can also configure the initial position, deceleration rate (friction coefficient), and stopping threshold. The parameter configuration module can convert the above parameters into internal states, setting explicit initial conditions and rules for the physical simulation.

[0028] The trajectory calculation module can pre-calculate the total duration and endpoint position of the animation using a physical model based on the parameters provided by the parameter configuration module. The trajectory calculation module can also calculate the position and velocity at any point in time after the inertial scrolling animation starts. In this solution, the initial position, endpoint position, current position, and top position refer to the coordinate offset of the scrolling content of the interactive object within the virtual scrolling space.

[0029] The animation-driven module interacts with the timer to manage the animation lifecycle. Specifically, when the animation-driven module starts, it can register callbacks to establish a frame-by-frame loop. When each frame is triggered, it obtains the timestamp, drives the trajectory calculation module to update the state, and finally outputs the latest state to the application layer through a callback function to update the interface.

[0030] S103: Call the startup animation method of the inertial deceleration controller, and pass the frame callback function and completion callback function as parameters to the inertial deceleration controller so that the inertial deceleration controller performs a preset operation.

[0031] The preset operations include: using the animation driving module to record the animation start time; registering a callback with the timer and starting the inertial scrolling animation; and using the trajectory calculation module to calculate the endpoint position and total duration of the inertial scrolling animation based on the scrolling parameters.

[0032] The startup animation method is an interface provided by the inertial deceleration controller to receive startup commands and trigger a complete set of animation initialization and startup processes to be executed internally by the inertial deceleration controller.

[0033] This step also passes the frame callback function and the completion callback function as parameters to the inertial deceleration controller. The frame callback function is used to receive the current position and speed of each frame, and the completion callback function is used to receive the final state and completion flag when the animation ends or is interrupted.

[0034] Upon receiving the start command, the inertial deceleration controller executes corresponding preset operations internally. The animation driver module records the current timestamp as the animation start time, serving as a benchmark for subsequent calculations of the animation's runtime. The animation driver module can register its internal frame processing functions with the system's underlying timer, thereby establishing an animation loop synchronized with the screen refresh rate.

[0035] The trajectory calculation module can calculate the endpoint where the inertial roll will eventually stop and the total animation duration based on the parameters set in the parameter configuration module and through the built-in physical model (such as the exponential decay formula).

[0036] S104: When the timer triggers the callback, the animation driving module is used to determine the duration of the animation that has been started; When the frame synchronization timer triggers a callback, the animation driver module can obtain the current timestamp and subtract it from the previously recorded animation start time to calculate the elapsed time from the start of the animation to the current moment, i.e., the duration of the animation. The aforementioned timer can be a frame synchronization timer synchronized with the screen refresh, or a general-purpose timer that triggers a callback at a fixed time interval (such as 16 milliseconds).

[0037] S105: Determine whether the animation start duration is less than the total animation duration; if yes, then pass the animation start duration to the trajectory calculation module, use the trajectory calculation module to determine the current position, and upload the current position to the application layer by calling the frame callback function, so that the application layer updates the screen content based on the current position; if no, then upload the animation completion flag and the endpoint position to the application layer by calling the completion callback function, so that the application layer stops updating the screen content after updating and displaying the last frame of screen content based on the endpoint position.

[0038] This step compares the animation's running time with the total animation duration to determine whether to continue updating the inertial scrolling animation.

[0039] If the animation's start time is less than the total animation duration, this solution passes the start time to the trajectory calculation module. This allows the trajectory calculation module to calculate the current position of the interactive object at that precise point in time based on a preset physical model (e.g., exponential decay formula). This step can also pre-pass a frame callback function to upload the current position calculated by the trajectory calculation module to the application layer. The application layer receives the current position in the callback function and updates the inertial scrolling animation's content accordingly, smoothly moving the content to the new position and creating a continuous animation effect.

[0040] If the animation's duration is greater than or equal to the total animation duration, the inertial scrolling animation is determined to end. At this point, this solution calls the completion callback function and uploads the animation completion flag along with the pre-calculated endpoint position to the application layer. Upon receiving this information, the application layer first updates the content of the last frame based on the endpoint position to ensure the interface is ultimately displayed at the endpoint. Then, it stops all update operations related to this inertial scrolling animation and performs resource cleanup and state reset operations. Thus, the inertial scrolling animation is complete.

[0041] In this embodiment, after determining the initial scrolling speed of the interactive object, a corresponding inertial deceleration controller instance is created for the interactive object, and the initial scrolling speed is input into the inertial deceleration controller. This embodiment calls the animation start method of the inertial deceleration controller, passing the frame callback function and completion callback function as parameters to the inertial deceleration controller, enabling the inertial deceleration controller to establish an association with the timer, record the animation start time, and start the inertial scrolling animation. When the timer triggers the callback, the inertial scrolling animation is compared with the animation start duration to determine if it has ended. If the inertial scrolling animation has not ended, the current position determined by the trajectory calculation module is uploaded to the application layer by calling the frame callback function to update the screen content. If the inertial scrolling animation has ended, the completion callback function is called to upload the animation completion flag and end position to the application layer to stop updating the screen content. In the above process, the inertial deceleration controller implements the functions of scrolling simulation, animation driving, and status notification without relying on the system's native scrolling component. Therefore, this embodiment can enable inertial scrolling of interactive objects in the application interface when the system's native scrolling component cannot be used.

[0042] As for Figure 1In a further description of the corresponding embodiment, the process of updating the screen content based on the current position by the application layer includes: calculating the current frame displacement increment according to the current position and the historical position, and adding the current frame displacement increment to the cumulative displacement variable; wherein, the historical position is the current position when displaying the previous frame content; determining whether the value of the cumulative displacement variable is greater than or equal to a preset step width; if yes, calculating the number of movement steps according to the cumulative displacement variable and the preset step width, displaying the current frame content according to the number of movement steps, and clearing the value of the cumulative displacement variable to zero; if no, setting the previous frame content as the current frame content, and waiting to receive a new current position.

[0043] The above process controls the movement distance of the updated screen content based on a preset step width, so that the screen content of the inertial scrolling animation can move in an integer multiple of the preset step width. This avoids frequent micro-movements or jitters in the screen due to the displacement being less than the step width, and also avoids image blurring or rendering distortion problems that may occur on devices with misaligned pixels.

[0044] As for Figure 1 As further described in the corresponding embodiment, the application interface may contain a nested structure, which includes an inner tab and an outer list, with the inner tab nested within the outer list. If the interactive object is the inner tab of the nested structure, the process of determining the initial scrolling speed of the interactive object in the application interface includes: by listening to the scrolling event of the outer list, setting the inertial speed of the outer list when it reaches the top position as the initial scrolling speed of the inner tab.

[0045] During the above process, when the outer list reaches the top position, the position of the outer list does not change, and the inertial speed is the instantaneous speed value corresponding to the scrolling momentum that the outer list still retains and has not yet been exhausted. This solution uses the above inertial speed as the initial scrolling speed of the inner tab, so as to display the inertial scrolling animation of the inner tab according to the above inertial speed, thereby realizing the transfer of scrolling speed from the outer list to the inner tab.

[0046] Before displaying the inertial scrolling animation of the inner tab, it can be determined whether the display of the inner tab meets the scrolling conditions (i.e., whether it can scroll). If it does, the scrolling speed is transferred from the outer list to the inner tab when the outer list reaches the top position. If it does not, the scrolling speed is not transferred when the outer list reaches the top position.

[0047] The process of determining whether the inner tab meets the scrolling conditions may include: determining whether the content height of the inner tab is greater than the view height; if yes, the scrolling conditions are met; if no, the scrolling conditions are not met.

[0048] As for Figure 1A further description of the corresponding embodiment: if the interactive object is a data visualization chart, the process of determining the initial scrolling speed of the interactive object in the application interface includes: during the user's interaction with the data visualization chart, a gesture recognizer is used to detect the user's finger lift-off event; if the user's finger lift-off event is detected, the current scrolling speed of the data visualization chart is set as the initial scrolling speed. The above solution captures the instantaneous speed of the data visualization chart at the key interaction node (finger lift-off) using a gesture recognizer, which can provide an accurate initial motion state for subsequent inertial scrolling simulation, ensuring that the inertial scrolling animation matches the user's experience.

[0049] As for Figure 1 As further described in the corresponding embodiment, after determining the endpoint position of the inertial scrolling animation, a range to be displayed is determined based on the endpoint position, and the data corresponding to the range to be displayed is preloaded. By preloading the data to be displayed (i.e., the data corresponding to the inertial scrolling animation) based on the endpoint position, the above-mentioned preloading of the data to be displayed (i.e., the data corresponding to the inertial scrolling animation) can effectively reduce the stuttering caused by waiting for data to load, thereby providing users with a seamless and smooth browsing experience.

[0050] Before creating an instance of the inertial deceleration controller, this solution can also determine whether other inertial scrolling animations are currently running; if so, it interrupts the other running inertial scrolling animations by calling the interrupt method. Correspondingly, during the inertial deceleration controller's inertial scrolling animation startup process, if an animation interruption command is received, the timer is stopped, and the animation interruption flag is uploaded to the application layer by calling the completion callback function, causing the application layer to stop updating the screen content. This solution avoids conflicts caused by multiple animations running simultaneously.

[0051] As for Figure 1 In a further description of the corresponding embodiment, the scrolling parameters include the initial scrolling speed, the initial position, the deceleration rate, and the stopping threshold. The initial position is the position at the start of the inertial scrolling animation. The deceleration rate is the rate at which the scrolling speed of the inertial scrolling animation decays. The stopping threshold is a scrolling speed threshold used to determine whether the inertial scrolling animation has stopped.

[0052] The trajectory calculation module is used to calculate the endpoint position based on the initial scrolling speed and the deceleration rate, to calculate the total animation duration based on the initial scrolling speed, the deceleration rate, and the stopping threshold, and to calculate the current position based on the initial scrolling speed, the deceleration rate, and the animation start time. Specifically, the trajectory calculation module can be equipped with a mathematical model; substituting various scrolling parameters into the mathematical model yields the corresponding endpoint position, total animation duration, and current position.

[0053] The process described in the above embodiments is illustrated below through a mobile rolling inertia deceleration control scheme based on exponential decay in a practical application.

[0054] Currently, most mainstream mobile operating systems have built-in support for inertial scrolling in their system scrolling components. However, this built-in solution is deeply tied to the scrolling component, cannot be used independently, and cannot meet the needs of the following special scenarios: Scenario 1: Custom chart display scenario.

[0055] Custom-drawn charts, such as candlestick charts, line charts, and technical indicator charts, are widely used in financial mobile applications. These charts are typically drawn directly using a canvas or graphics processor, rather than using system scrolling components. When a user quickly swipes on the chart and then lifts their finger, the chart should continue scrolling for a short distance before stopping. Because the charts are custom-drawn, the inertial scrolling function of the system scrolling component cannot be used directly.

[0056] Scenario 2: Inertial propagation scenario of nested scrolling.

[0057] Financial mobile applications typically employ a multi-level page structure on their homepages: the outer layer is a vertically scrolling list containing asset cards, function entry points, and other content areas; the inner layer consists of multiple tabs, each containing a scrollable list of content. When a user quickly scrolls up the outer list, the remaining momentum should be transferred to the inner tabs after reaching the "sticky" position, creating a seamless scrolling experience.

[0058] Scene 3: Walking-style scrolling scene.

[0059] Data points in charts such as candlestick charts and line charts are arranged with a fixed width, with each data point occupying a fixed pixel width. Scrolling must be done in "steps," meaning each scroll must be an integer multiple of the width of a single data point to ensure alignment between the data point and the coordinate axis. K represents the price trend within a specific time period.

[0060] For example, in financial and securities mobile applications, the stock quote details page is a core page that users frequently use. This page typically contains the following scrollable areas: Header area: Displays basic information such as stock code, name, and price; Chart area: candlestick chart, intraday chart, fund flow chart, etc., supports left and right swiping to browse historical data; Content area: Contains multiple tabs, such as funding, announcements, research reports, etc., and the content of each tab can be scrolled vertically.

[0061] The aforementioned scrollable areas need to work together. When the user performs a rapid swipe, the inertial effect needs to be smoothly transferred between different areas to provide a smooth user experience.

[0062] In related technologies, the following methods are commonly used to implement scrolling of interactive components: Solution A: Inertial scrolling based on the platform's native scrolling component: Each mobile platform's native scrolling component has built-in support for inertial scrolling. Developers simply need to place content into the scrolling component to automatically achieve the inertial effect. The limitations of this solution are: the inertial scrolling mechanism is deeply bound to the scrolling component and cannot be used independently. Custom drawing views (such as charts drawn directly on a canvas) cannot use this solution. Furthermore, the inertial speed cannot be extracted from the scrolling component for use in other views.

[0063] Option B: Physics Engine-Based Animation Display: The physics engine frameworks provided by various mobile platforms can create deceleration effects. The physics engine drives the animation by simulating real-world physical laws (such as friction and elasticity). The limitations of this option are: the physics engine calculates position using real-time simulation, making it impossible to predict the final stopping position before the animation begins; physics simulation involves solving complex differential equations, resulting in significant computational overhead; and the native programming interface, designed for physics simulation scenarios, is not intuitive enough for user interface animations.

[0064] Option C: Based on property animation with easing functions: Property animation on various mobile platforms, combined with deceleration easing functions, can achieve a visual deceleration effect. The limitations of the above option are: the core design of property animation is interpolation from the starting point to the ending point, making it impossible to obtain the current position value during the animation process for business logic processing, i.e., there is no real-time callback; because it cannot obtain the real-time position, it cannot implement the discrete stepping logic of "updating only when the displacement accumulates to a threshold," i.e., it cannot achieve step-by-step updates.

[0065] It is evident that the conventional solutions described above for implementing scrolling of interactive components have the following drawbacks: Unpredictable endpoint: The physics engine uses real-time simulation, making it impossible to calculate the final stopping position before the animation begins. In step-by-step scrolling scenes, it's impossible to predict which data point the user's swipe will eventually stop at, resulting in the inability to achieve precise step-by-step data loading and rendering optimization.

[0066] Inertial speed cannot be extracted: The inertia of the system scrolling component is bound to the component, and the current inertial speed value cannot be obtained. In nested scrolling scenarios, the inertia disappears abruptly after the outer list scrolls to the top, resulting in a noticeable abrupt change in user experience, feeling like the item suddenly stops as if it has hit a wall.

[0067] Insufficient real-time position callback capability: The property animation is designed as an interpolation from the start point to the end point, which cannot obtain the current position in each frame of the animation. It cannot implement the optimization logic of "updating the view only after the cumulative displacement reaches the step width threshold". When the chart scrolls, there is a visual problem that the data points are not aligned with the coordinate axis.

[0068] Poor animation interruptibility: The physics engine needs to clear a lot of internal states to interrupt animation. When the user starts a new touch operation in the middle of an inertial animation, the system response delay is obvious, and even visual abnormalities caused by animation conflicts may occur.

[0069] The deceleration curve is not configurable: The system only provides a limited number of preset deceleration rate parameters, and cannot flexibly adjust the deceleration effect for different business scenarios (such as quickly browsing historical data and accurately selecting data for a specific day).

[0070] Unable to be reused across platforms: The implementation of inertial scrolling varies across mobile platforms, and the same business logic needs to be implemented separately on each platform, increasing development and maintenance costs.

[0071] To address the shortcomings of the aforementioned related technologies, this embodiment provides a mobile scrolling inertial deceleration control scheme based on exponential decay. This scheme offers a predictable endpoint inertial deceleration control method, accurately calculating the final stopping position before the animation begins. It also provides an inertial animation driving mechanism supporting real-time callbacks, providing the current position and progress value in each frame callback to support business logic processing. Furthermore, it offers an update mechanism combining continuous inertia and discrete stepping, converting continuous displacement into discrete stepping updates. It provides a cross-container inertial transfer technology, achieving seamless inertial continuity in nested scrolling scenes. It offers a lightweight animation control mechanism that can be interrupted and restarted at any time. It provides a configurable deceleration curve control scheme, supporting custom deceleration rates and stopping thresholds. Finally, it provides a cross-platform inertial deceleration control system with a core algorithm.

[0072] The following section will elaborate on the overall system architecture, core mathematical model, technical implementation of the inertial deceleration controller, and typical application scenarios.

[0073] Please see Figure 2 , Figure 2 This is a schematic diagram of the architecture of a mobile rolling inertial deceleration control system based on exponential decay provided in an embodiment of this application. The system adopts a layered architecture design, which is divided into three layers from top to bottom: application layer, inertial deceleration controller layer, and platform adaptation layer.

[0074] The application layer can include custom chart views and nested scrolling containers (nested structures). Custom chart views are used to display self-drawn views such as candlestick charts and line charts. Nested scrolling containers include multi-level pages consisting of an outer list and inner tabs.

[0075] The inertial deceleration controller is used to calculate and drive the inertial scrolling animation after the gesture ends. The inertial deceleration controller layer includes a parameter configuration module, a trajectory calculation module, and an animation driving module. The application layer can pass the initial speed of a custom chart view or a nested scrolling container to the parameter configuration module. The parameter configuration module provides parameters to the trajectory calculation module, and the trajectory calculation module provides the position to the animation driving module.

[0076] The frame synchronization mechanism of the platform adaptation layer includes the iOS frame synchronization mechanism, the Android frame synchronization mechanism, and the HarmonyOS frame synchronization mechanism. The animation driver module can call the above frame synchronization mechanisms.

[0077] Specifically, the application layer contains user interface components that require inertial scrolling effects, mainly divided into the following two categories: (1) Custom chart views: data visualization charts drawn directly using a canvas or graphics processor, including K-line charts, line charts, capital flow charts, etc. These views cannot use the system's native scrolling components and need to implement gesture inertia through the inertial deceleration controller of this invention. (2) Nested scrolling containers: a composite scrolling structure consisting of an outer vertical scrolling list and an inner multi-tab page. When the outer list scrolls to the top position, the remaining inertia is transferred to the inner tab page through the inertial speed transfer mechanism of this invention.

[0078] The following describes the three functional modules contained within the inertial deceleration controller: The parameter configuration module is responsible for receiving and managing input parameters, including initial position, initial speed, deceleration rate, and stop threshold. The deceleration rate is an exponential factor that controls how quickly the speed decays, ranging from 0 to 1; the larger the value, the slower the decay. The stop threshold, also known as the speed threshold, refers to the minimum speed value at which the animation stops; the animation stops when the speed decays below this value.

[0079] The trajectory calculation module is used to provide core algorithms such as endpoint position prediction, animation duration prediction, and position calculation at any time based on the exponential decay mathematical model.

[0080] The animation driver module is responsible for interacting with the frame synchronization timer, starting and stopping the animation loop, calling the trajectory calculation module to obtain the current position at the trigger of each frame, and notifying the application layer through a callback function. The frame synchronization timer is used to implement a callback mechanism that synchronizes with the device's screen refresh rate, ensuring that animation frames are aligned with the screen refresh rate.

[0081] The platform adaptation layer encapsulates the frame synchronization mechanisms of various mobile operating systems, providing a unified frame callback interface for the inertial deceleration controller. Different platforms use different underlying technologies to implement frame synchronization, but provide a consistent calling method to the upper layer.

[0082] The trajectory calculation module can use an exponential decay mathematical model to describe the inertial deceleration process. The exponential decay mathematical model simulates the motion law in the physical world where resistance is proportional to velocity.

[0083] The formulas in the exponential decay mathematical model include: velocity decay formula, position integral formula, endpoint position formula, and animation duration formula.

[0084] The velocity decay formula is: In the exponential decay model, the velocity decreases exponentially with time. In the above formula, express Current velocity at any given moment Indicates the initial velocity, in pixels per second; This represents the deceleration rate, with a value range of (0, 1) and a default value of 0.998. This represents time in seconds; the coefficient 1000 is used to convert seconds to milliseconds. A deceleration rate of 0.998 means that 99.8% of the speed is retained every millisecond. After 1 second (1000 milliseconds), the speed becomes 0.998% of its original value. 1000 ≈0.135, or approximately 13.5%. This value is consistent with the standard deceleration rate of the iOS system, ensuring a consistent user experience. A larger deceleration rate (such as 0.999) will result in a longer swipe distance and a slower stop; a smaller deceleration rate (such as 0.990) will result in a quick stop. Applications can adjust this parameter according to the actual scenario.

[0085] The formula for position integration is: Based on the above formula, the velocity formula can be integraled to obtain the precise position at any given time. express Location at any given moment Indicates the initial position. This represents the natural logarithm. The position integral formula achieves accurate calculation of position at any given time through analytical solutions, without the need for numerical integration or frame-by-frame accumulation.

[0086] The formula for the final position is: By approaching infinity and zero velocity, the final stopping position, i.e., the endpoint position, can be obtained. The formula for predicting the endpoint position can accurately predict the endpoint position before the animation begins. This is a key capability that existing physics engine solutions cannot achieve. This capability allows the application layer to perform optimization operations such as data preloading and boundary judgment in advance.

[0087] The formula for animation duration is: . Indicates the total duration of the animation. This indicates the speed threshold. This solution allows for pre-setting the speed threshold. (e.g., 0.01 pixels per second). When the speed decays to this threshold, the animation stops, and the total duration of the animation can be calculated.

[0088] The technical implementation of the inertial deceleration controller is described below: The structure of an inertial deceleration controller includes several parts such as input parameters, read-only attributes, core methods, and internal states, which can be found in Tables 1, 2, 3, and 4.

[0089] Table 1 Input Parameter Table: .

[0090] Table 2 Read-only attribute table: .

[0091] Table 3: Core Methods Table .

[0092] Table 4 Internal Status Table: .

[0093] The inertial deceleration controller has the functions of calculating the endpoint position, calculating the animation duration, calculating the position at any time, starting and executing the animation, and interrupting the animation.

[0094] The endpoint position calculation function is described as follows: Based on the initial parameters, it calculates and returns the predicted final stopping position before the animation starts.

[0095] The implementation process of the endpoint location calculation function includes the following steps: Step A1: The system receives the initial position coordinates and initial velocity vector from the caller.

[0096] Step A2: The system calculates the deceleration constant d = 1000 × ln (deceleration rate). Substituting the deceleration rate into the natural logarithm function and multiplying by 1000, we obtain the deceleration constant. When the deceleration rate takes the default value of 0.998, the deceleration constant is approximately -2.002.

[0097] Step A3: The system calculates the X-axis endpoint coordinates. Subtract the quotient of the initial velocity X-component and the deceleration constant from the initial position X-component. X and Y represent the horizontal and vertical coordinates.

[0098] Step A4: The system calculates the Y-axis endpoint coordinates. Subtract the quotient of the initial velocity Y-component and the deceleration constant from the initial position Y-component.

[0099] Step A5: The system combines the calculated X and Y coordinates into the endpoint position and returns it to the caller.

[0100] The animation duration calculation function is explained as follows: Based on the initial speed and the stopping threshold, the total duration of the animation from start to finish is calculated.

[0101] The implementation process of the animation duration calculation function includes the following steps: Step B1: The system calculates the square of the magnitude of the initial velocity vector, which is the square of the X component plus the square of the Y component.

[0102] Step B2: The system checks if the velocity modulus is zero. If the modulus is zero, it means the initial velocity is zero, and the system directly returns a duration of 0 (i.e., no animation is required).

[0103] Step B3: The system calculates the deceleration constant using the same method as the endpoint position calculation.

[0104] Step B4: The system substitutes the deceleration constant, stopping threshold, and square of velocity magnitude into the duration formula to calculate the animation duration and returns it.

[0105] The function for calculating the position at any given time is described below: Based on a specified time parameter, it calculates the precise position at that moment. This function is the core of frame animation and is called once per frame.

[0106] The implementation process of the position calculation function at any time includes the following steps: Step C1: The system receives the time parameter (the elapsed time relative to the start of the animation) from the caller.

[0107] Step C2: The system calculates the deceleration constant using the same method as the endpoint position calculation.

[0108] Step C3: The system calculates the displacement coefficient. Subtract 1 from the deceleration rate raised to the power of (time × 1000), and then divide by the deceleration constant to obtain the displacement coefficient k.

[0109] Step C4: The system calculates the current position. The initial position is added to the product of the initial velocity and the displacement coefficient to obtain the current coordinates on the X and Y axes, respectively.

[0110] Step C5: The system returns the current location coordinates to the caller.

[0111] The animation startup and execution functions are described as follows: Start the inertial animation, register frame synchronization callbacks, calculate the current position and notify the caller when each frame is triggered.

[0112] The process of implementing the animation startup and execution function includes the following steps: Initialization phase: Step D1: The caller invokes the start animation method, passing the frame callback function and the completion callback function as parameters.

[0113] Step D2: The system saves references to the two callback functions into the controller.

[0114] Step D3: The system sets the running status flag to "Yes", indicating that the animation is running.

[0115] Step D4: The system obtains the current system time and uses it as the animation start timestamp.

[0116] Step D5: The system creates a frame synchronization timer object and adds it to the event loop of the main thread to start it.

[0117] Frame callback phase (executed repeatedly per frame): Step D6: If the frame synchronization timer is triggered, the system enters the frame callback processing flow.

[0118] Step D7: The system first checks the running status flag. If it is "No", it returns directly without processing.

[0119] Step D8: The system calculates the elapsed time by subtracting the start timestamp from the current system time.

[0120] Step D9: The system determines whether the time used is greater than or equal to the predicted total animation duration.

[0121] Step D10: If the end time has been reached, the system performs the following termination process: call the frame callback function, passing in the progress value = 1.0 and the end position; set the running status flag to "No"; stop the frame synchronization timer; call the completion callback function, passing in the completion flag true (true) to indicate normal termination.

[0122] Step D11: If the end time has not been reached, the system continues the animation and performs the following operations: Calculate the current progress percentage, which is equal to the elapsed time divided by the total duration; call the position calculation function to get the current position; call the frame callback function, passing in the current progress and the current position.

[0123] After completing step D11, you can continue to display the animation and wait for the frame synchronization timer to be triggered.

[0124] Please see Figure 3 , Figure 3The flowchart illustrates the implementation of an animation startup and execution function provided in this application embodiment. The process includes: the caller invokes the animation startup method, passing in a frame callback function and a completion callback function. The inertial deceleration controller saves the callback function reference, sets the running status flag to "Yes," obtains the current system time as the start timestamp, creates and starts a frame synchronization timer; waits for the frame synchronization timer to trigger, calculates the elapsed time = current time - start timestamp; determines whether the elapsed time is greater than or equal to the predicted animation duration; if yes, it calls the frame callback function to return the progress and position (e.g., progress = 1.0, position = end position), sets the running status flag to "No," stops the frame synchronization timer, and calls the completion callback function to return a flag indicating that the animation is complete (e.g., finished = true); if no, it calculates the progress = elapsed time / predicted animation duration, calls the position calculation function to obtain the current position, and calls the frame callback function to return the progress and current position so that the animation continues to display.

[0125] The animation interruption function is described as follows: During the animation execution, the animation can be actively interrupted externally.

[0126] The process of implementing the animation interruption function includes the following steps: Step E1: The system checks the running status flags. If no animation is currently running, it returns directly.

[0127] Step E2: The system sets the running status flag to "No".

[0128] Step E3: The system stops the frame synchronization timer.

[0129] Step E4: The system calls the completion callback function, passing in the completion flag false (false) to indicate that the animation was interrupted instead of ending normally.

[0130] This embodiment defines a standardized frame callback protocol, in which two parameters are passed in each callback: progress value and current position. Please refer to Table 5 for details: Table 5: Parameters related to the frame callback protocol .

[0131] The progress value enables the application layer to implement business logic related to the animation progress (such as gradient effects, progress bar updates, etc.), the current position enables the application layer to perform precise position control (such as discrete step update, boundary constraints, etc.), and the standardized protocol enables different application scenarios to reuse the same inertial deceleration controller.

[0132] The above embodiments can be applied to the following scenarios: Financial and securities applications: Inertial scrolling of data visualization components such as candlestick charts, intraday charts, line charts, and technical indicator charts; E-commerce applications: smooth inertial scrolling in scenarios such as product lists and image galleries; Social applications: Inertial propagation of nested lists (such as dynamic streams + comment sections); News and information apps: multiple tabs + sticky scrolling of lists; Any mobile user interface component that requires a custom inertial scrolling effect.

[0133] The above solution will be explained below using a scenario of custom charts with discrete step-by-step scrolling.

[0134] The scenario for discrete step scrolling in custom charts is described as follows: After a user quickly swipes on a custom chart such as a candlestick chart or line chart and then lifts their finger, the chart should continue scrolling for a certain distance before stopping. Because the chart data is arranged with a fixed width, scrolling needs to be done in "steps," meaning each scroll must be an integer multiple of the width of a single data point. Discrete step scrolling refers to: chart data arranged with a fixed width, and each scroll must be an integer multiple of the width of a single data point.

[0135] The off-step scrolling process for a custom chart includes the following steps: Step F1: Gesture end processing.

[0136] When the gesture recognizer detects that the user quickly swipes on the icon and then lifts their finger (i.e., the gesture state ends), the system obtains the current swipe speed vector from the gesture recognizer.

[0137] Step F2: Interrupt the old animation.

[0138] If an inertial animation is currently running, the system calls the interrupt method to stop it, thus avoiding conflicts caused by multiple animations running simultaneously.

[0139] Step F3: Create an inertial deceleration controller.

[0140] The system creates an instance of an inertial deceleration controller, with its initial position set to the origin (0,0) and its initial velocity set to the gesture velocity vector. A virtual coordinate system (starting from the origin) is used here, instead of the actual view coordinates.

[0141] Step F4: Initialize state variables.

[0142] The system initializes the previous frame position and cumulative displacement state variables so that the previous frame position equals the origin and the cumulative displacement equals 0. The previous frame position is used to calculate the displacement increment between adjacent frames; the cumulative displacement variable is used to accumulate displacements that have not reached the step width.

[0143] Step F5: Start the animation and register frame callbacks.

[0144] The system calls the start method of the inertial deceleration controller, passing in the frame callback function. This step can also calculate the current position.

[0145] Step F6: Frame callback processing.

[0146] In each frame callback, the frame callback function can be called to perform the following processing: subtract the previous frame position from the current frame position to calculate the displacement increment of the current frame; update the previous frame position record to the current frame position; and add the displacement increment of the current frame to the cumulative displacement variable.

[0147] Step F7: Step-by-step judgment and update.

[0148] The system calculates the step width (width of a single data item plus the spacing between data items), and then determines whether the absolute value of the cumulative displacement is greater than or equal to the step width. If the step width is reached, the system calculates the number of steps that can be moved (the cumulative position is removed by rounding down the step width), determines the direction of movement based on the sign of the cumulative displacement, calls the chart's data offset update method, and then clears the cumulative displacement to zero. If the step width is not reached, the view is not updated, and the system waits for the next frame to continue accumulating.

[0149] Please see Figure 4 , Figure 4 A flowchart illustrating the implementation process of offline progressive scrolling of a custom chart, provided in this application embodiment, includes the following steps: The user quickly swipes on the chart and then lifts their finger.

[0150] The gesture recognizer detects that the gesture state has ended and obtains the current swipe speed vector.

[0151] Before the application layer (i.e., icon view) interrupts the inertial animation (if any), create an inertial deceleration controller with initial position = (0,0), initial velocity = gesture velocity, initialize the state variable previous frame position = origin cumulative displacement = 0, and start the inertial animation.

[0152] The inertial deceleration controller calculates the current position and calls the frame callback function.

[0153] The application layer calculates the displacement increment for the current frame as the difference between the current position and the previous frame position, updates the previous frame position record, updates the cumulative displacement, and calculates the step width as the sum of the data item width and the spacing. It then checks if the absolute value of the cumulative displacement is greater than or equal to the step width. If so, it calculates the number of possible steps as the sum of the cumulative displacement and the step width (rounded down), determines the direction of movement based on the sign of the displacement, updates the chart data offset, triggers a view redraw, and resets the cumulative displacement to 0. If not, the view is not updated.

[0154] If the animation is not finished, the inertial deceleration controller continues to calculate the current position and calls the frame callback function. If the animation ends, the operation ends.

[0155] Please see Figure 5 , Figure 5 A flowchart illustrating the implementation process of nested scrolling inertial velocity transfer provided in this application embodiment includes the following steps: The user quickly swipes up the outer list and then lifts their finger.

[0156] The outer list scroll view triggers a scrolling-to-end event, and the callback is passed in the current inertial velocity vector.

[0157] The page controller performs the following checks: It checks if the scroll direction is upward and if the current offset is less than the sticky position. It then checks if the scroll is upward and not sticky; if so, it records the reference to the current inner scroll view and calls the inertia propagation method; otherwise, it does nothing.

[0158] Before the inertial transmission is interrupted (if any), create an inertial deceleration controller with initial position = origin and initial velocity = outer inertial velocity, initialize the previous frame position to origin, and start the inertial animation.

[0159] The inertial deceleration controller calculates the current position and calls the frame callback function.

[0160] After the inertial deceleration controller calls the frame callback function, the page controller calculates the displacement increment for this frame = current position Y coordinate - previous frame position Y coordinate, and updates the previous frame position record. It checks if the outer list offset is less than the sticky position; if so, it skips this frame's processing; if not, it retrieves the inner scroll view and checks if it is scrollable. If the inner scroll view is scrollable, it calculates the new offset = current offset + increment × magnification factor, limiting the offset to a valid range, and updates the inner scroll view offset; if the inner scroll view is not scrollable, it skips this frame's processing.

[0161] If the animation is not finished, the inertial deceleration controller continues to calculate the current position and calls the frame callback function. If the animation ends, the operation ends.

[0162] This scheme uses a three-level mechanism of "virtual coordinate system + cumulative displacement + step trigger" to convert the continuous displacement output by the inertial deceleration controller into discrete step update, thus resolving the contradiction between continuous inertia and discrete data.

[0163] Nested scrolling: A multi-level page structure in which the outer scrolling container contains the inner scrollable view. The above solution will be explained below through a scenario of inertial speed transfer in nested scrolling.

[0164] The scenario for transferring inertial speed in nested scrolling is described as follows: A multi-level page consists of an outer list and inner tabs. When a user quickly scrolls up the outer list, once the list reaches the top, the remaining inertial speed should be smoothly transferred to the inner tabs, allowing them to continue scrolling upwards, creating a unified scrolling experience.

[0165] The inertial velocity transfer process of nested scrolling includes the following steps: Step G1: Listen for outer scroll events.

[0166] In the "scrolling is about to end" event callback of the outer list scroll view, the system obtains the current inertial velocity vector.

[0167] Step G2: Determine the propagation conditions.

[0168] The system determines whether the conditions for inertial transmission are met: (1) the scrolling direction is upward (the velocity Y component is greater than 0); (2) the current outer list offset is less than the sticky position. The sticky position refers to the critical point where the outer list stops scrolling after reaching a specific position.

[0169] If the conditions are not met, inertial transmission will not occur.

[0170] Step G3: Record the target view.

[0171] If the transfer conditions are met, the system records a reference to the current inner scroll view, which is then used as the target view for the inertial animation.

[0172] Step G4: Interrupt the old animation.

[0173] If an inertial animation is currently running, the system calls the interrupt method to stop it.

[0174] Step G5: Create an inertial deceleration controller.

[0175] The system creates an instance of an inertial deceleration controller, with the initial position set to the origin and the initial velocity set to the inertial velocity vector of the outer list.

[0176] Step G6: Initialize state variables.

[0177] The system initializes the previous frame position record as the origin.

[0178] Step G7: Start the animation and register frame callbacks.

[0179] The system calls the start method of the inertial deceleration controller, passing in the frame callback function.

[0180] Step G8: Frame callback processing.

[0181] In each frame callback, the system performs the following processing: (1) subtract the Y coordinate of the previous frame from the Y coordinate of the current frame to calculate the displacement increment of the current frame; (2) update the position record of the previous frame.

[0182] Step G9: Ceiling status check.

[0183] The system checks whether the current offset of the outer list has reached the sticky position. If it has not, it means that the outer list is still scrolling due to inertia. The update of the inner list in this frame is skipped to avoid scrolling the two containers at the same time.

[0184] Step G10: Inner layer rolling update.

[0185] If the scroll view is already at the top, the system retrieves the previously recorded reference to the inner scroll view (i.e., the inner tab) and performs the following updates: checks if the inner view is scrollable (content height is greater than view height); calculates the new scroll offset: the current offset plus the displacement increment multiplied by the magnification factor; limits the new offset to a valid range (greater than or equal to 0, less than or equal to the maximum scrollable distance); and updates the offset position of the inner scroll view.

[0186] This solution achieves inertial velocity transfer from the outer container to the inner container through a mechanism of "velocity extraction + controller creation + frame-level displacement transfer". Unlike traditional "distance transfer", the "velocity transfer" in this embodiment retains the dynamic characteristics of inertia, and the user experiences a continuous inertial effect rather than abrupt displacement jumps. Inertial velocity transfer refers to transferring the remaining inertial velocity of one rolling container to another container to continue rolling.

[0187] The following describes the implementation of the platform adaptation layer: different mobile operating systems provide different frame synchronization mechanisms. The platform adaptation layer encapsulates these differences and provides a unified frame callback interface for the inertial deceleration controller.

[0188] The iOS (a mobile operating system) platform implements frame synchronization using an explicit linking mechanism. At startup, the system creates an explicit linking object and sets callback methods, then adds it to the general pattern of the main runtime loop; at shutdown, the system calls the destruction method of the explicit linking object to invalidate it.

[0189] On the Android platform: The system uses a choreographer mechanism to achieve frame synchronization. At startup, the system registers frame callback functions with the choreographer's singleton object; within the frame callback, if animation needs to continue, a new callback for the next frame is registered; when stopping, the system does not register new callbacks, allowing the callbacks to end naturally.

[0190] The HarmonyOS platform implements frame synchronization using a display synchronization mechanism. Upon startup, the system creates a display synchronization object and listens for its frame events; upon shutdown, the system cancels the listening for frame events.

[0191] Through the abstraction of the platform adaptation layer, the core algorithm of the inertial deceleration controller is decoupled from the specific platform, enabling the reuse of a single core logic across multiple mobile platforms.

[0192] Table 6 shows a comparison of this solution with related technologies.

[0193] Table 6. Comparison results of this solution with related technologies: .

[0194] Table 7 below provides the parameters and calculation results for typical use cases.

[0195] Table 7. Parameters and calculation results for typical use cases: .

[0196] In the table above, px / s represents pixels per second, and px represents pixels.

[0197] The above solution addresses the technical challenge of achieving a physically intuitive inertial scrolling effect after a gesture-based scrolling action in mobile applications. Specifically, it includes: Unpredictable endpoint position: Existing physics engine solutions cannot predict the final stopping position before the animation starts, making it impossible to achieve accurate positioning in walk-through scrolling scenes.

[0198] Inertial scrolling issue for custom bound views: Custom charts (such as candlestick charts and line charts) that are directly bound using a canvas or graphics processor cannot use the inertial scrolling function of the system's native scrolling component and need to be handled manually for gesture inertia.

[0199] The inertial interruption problem in nested scrolling scenarios: After the outer list scrolls to the sticky position, the system's inertial scrolling stops abruptly, failing to smoothly transfer the remaining inertial speed to the inner scrolling container, resulting in a disjointed user experience.

[0200] The contradiction between discrete data and continuous inertia: Chart data is arranged with a fixed step width, while inertial scrolling generates continuous displacement. A mechanism is needed to convert continuous displacement into discrete step updates.

[0201] The problem of poor animation interruptibility: When a user starts a new touch interaction while an inertial animation is in progress, the existing physics engine requires complex state cleanup and the response is not timely enough.

[0202] The above solution can use a general-purpose timer instead of a frame synchronization timer. Specifically, this embodiment can use a platform-wide timer to trigger callbacks at fixed time intervals (e.g., 16 milliseconds), replacing the frame synchronization timer that synchronizes with screen refresh. The solution using a general-purpose timer is simple to implement and does not require adaptation to the frame synchronization interfaces of various platforms.

[0203] This embodiment provides a method for predicting the endpoint location based on exponential decay. This method uses an analytical formula. The endpoint position is accurately calculated before the animation begins, without the need for iteration or numerical integration, and the computational complexity is O(1). O(1) indicates that the time or space complexity is constant.

[0204] The frame callback protocol design provided in this embodiment defines a standardized two-parameter callback interface (progress value, current position), which supports the application layer in executing real-time business logic during the animation process.

[0205] This embodiment provides a mechanism for converting continuous inertial to discrete stepping. It uses a virtual coordinate system design: the inertial deceleration controller outputs a virtual position instead of directly driving the view; this embodiment uses a cumulative displacement mechanism to accumulate small displacements over multiple frames until the step width threshold is reached, and also uses step-triggered updates to update the view once the accumulated value reaches the threshold and clear the accumulation.

[0206] The cross-container inertial velocity transfer mechanism provided in this embodiment extracts the inertial velocity vector from the end event of the outer rolling container and uses the velocity vector as the input parameter of the new inertial deceleration controller to achieve velocity inheritance rather than distance inheritance.

[0207] The lightweight, interruptible animation control scheme provided in this embodiment can control the running state using a single Boolean flag. The interruption method in this embodiment takes effect immediately upon invocation, without complex state cleanup. This embodiment supports new animations overwriting old animations and also abstracts the differences in frame synchronization mechanisms across platforms through a unified platform adaptation layer interface, enabling cross-platform reuse of the core algorithm.

[0208] This embodiment can use a quadratic Bézier easing curve (similar to the deceleration effect) to replace the exponential decay model to describe the deceleration process; in the scheme of using a quadratic Bézier curve to replace exponential decay, each platform has built-in easing curve support, and the interface is simple.

[0209] This embodiment can use a spring-damped physical model (critical damping or overdamped state) to replace the exponential decay model. Using the spring-damped physical model instead of the exponential decay model produces a slightly rebounding effect, resulting in a more visually appealing effect.

[0210] In this embodiment, a linear deceleration model (current speed = initial speed - deceleration value × duration) can be used instead of an exponential decay model. The calculation using the above model is simpler and the formula is more intuitive.

[0211] Please see Figure 6 , Figure 6 A schematic diagram of the structure of a scrolling interaction system for an application interface provided in an embodiment of this application; The system may include: Speed ​​determination module 601 is used to determine the initial scrolling speed of interactive objects in the application interface; The controller creation module 602 is used to create an instance of the inertial deceleration controller and input the initial rolling speed into the inertial deceleration controller; wherein, the inertial deceleration controller includes a parameter configuration module, a trajectory calculation module, and an animation driving module; the parameter configuration module is used to receive and configure rolling parameters including the initial rolling speed; The callback setting module 603 is used to call the start animation method of the inertial deceleration controller, and pass the frame callback function and the completion callback function as parameters to the inertial deceleration controller so that the inertial deceleration controller performs a preset operation; wherein, the preset operation includes: using the animation driving module to record the animation start time; registering a callback with the timer and starting the inertial scrolling animation; using the trajectory calculation module to calculate the end position and the total duration of the inertial scrolling animation based on the scrolling parameters; The duration determination module 604 is used to determine the duration of the animation that has started when the timer triggers the callback, and to determine whether the duration of the animation that has started is less than the total duration of the animation. The first processing module 605 is used to, if the animation start duration is less than the total animation duration, pass the animation start duration to the trajectory calculation module, use the trajectory calculation module to determine the current position, and upload the current position to the application layer by calling the frame callback function, so that the application layer updates the screen content based on the current position; The second processing module 606 is used to upload the animation completion flag and the endpoint position to the application layer by calling the completion callback function if the animation start duration is greater than or equal to the total animation duration, so that the application layer stops updating the screen content after updating and displaying the last frame of the screen based on the endpoint position.

[0212] In this embodiment, after determining the initial scrolling speed of the interactive object, a corresponding inertial deceleration controller instance is created for the interactive object, and the initial scrolling speed is input into the inertial deceleration controller. This embodiment calls the animation start method of the inertial deceleration controller, passing the frame callback function and completion callback function as parameters to the inertial deceleration controller, enabling the inertial deceleration controller to establish an association with the timer, record the animation start time, and start the inertial scrolling animation. When the timer triggers the callback, the inertial scrolling animation is compared with the animation start duration to determine if it has ended. If the inertial scrolling animation has not ended, the current position determined by the trajectory calculation module is uploaded to the application layer by calling the frame callback function to update the screen content. If the inertial scrolling animation has ended, the completion callback function is called to upload the animation completion flag and end position to the application layer to stop updating the screen content. In the above process, the inertial deceleration controller implements the functions of scrolling simulation, animation driving, and status notification without relying on the system's native scrolling component. Therefore, this embodiment can enable inertial scrolling of interactive objects in the application interface when the system's native scrolling component cannot be used.

[0213] Furthermore, the process of updating the screen content based on the current position in the application layer includes: calculating the current frame displacement increment based on the current position and the historical position, and adding the current frame displacement increment to the cumulative displacement variable; wherein, the historical position is the current position when displaying the previous frame content; determining whether the value of the cumulative displacement variable is greater than or equal to a preset step width; if yes, calculating the number of movement steps based on the cumulative displacement variable and the preset step width, displaying the current frame content according to the number of movement steps, and clearing the value of the cumulative displacement variable to zero; if no, setting the previous frame content as the current frame content, and waiting to receive a new current position.

[0214] Furthermore, the interactive object is an inner tab of a nested structure, and the nested structure also includes an outer list; Correspondingly, the process by which the speed determination module determines the initial scrolling speed of interactive objects in the application interface includes: by listening to the scrolling event of the outer list, setting the inertial speed of the outer list when it reaches the top position as the initial scrolling speed of the inner tab.

[0215] Furthermore, the interactive object is a data visualization chart; Accordingly, the process by which the speed determination module determines the initial scrolling speed of interactive objects in the application interface includes: during the user's interaction with the data visualization chart, using a gesture recognizer to detect user finger lift-up events; if a user finger lift-up event is detected, the current scrolling speed of the data visualization chart is set as the initial scrolling speed.

[0216] Furthermore, it also includes: The preloading module is used to determine the display range based on the endpoint position of the inertial scrolling animation, and to preload the data corresponding to the display range.

[0217] Furthermore, it also includes: The interrupt management module is used to determine whether there are other inertial scrolling animations running before creating an instance of the inertial deceleration controller; if so, it interrupts the other inertial scrolling animations running by calling the interrupt method. Correspondingly, the interrupt management module is also used to stop the timer if an animation interruption command is received during the inertial deceleration controller's inertial scrolling animation, and to upload the animation interruption flag to the application layer by calling the completion callback function, so that the application layer stops updating the screen content.

[0218] Furthermore, the scrolling parameters include the initial scrolling speed, initial position, deceleration rate, and stop threshold. The initial position is the position at the start of the inertial scrolling animation. The deceleration rate is the rate at which the scrolling speed of the inertial scrolling animation decays. The stop threshold is a scrolling speed threshold used to determine whether the inertial scrolling animation has stopped. Accordingly, the trajectory calculation module is used to calculate the endpoint position based on the initial scrolling speed and the deceleration rate, to calculate the total animation duration based on the initial scrolling speed, the deceleration rate and the stopping threshold, and to calculate the current position based on the initial scrolling speed, the deceleration rate and the animation start time.

[0219] Since the embodiments of the system part correspond to the embodiments of the method part, please refer to the description of the embodiments of the method part for the embodiments of the system part, and they will not be repeated here.

[0220] This application also provides a storage medium on which a computer program is stored, which, when executed, can perform the steps provided in the above embodiments. The storage medium may include various media capable of storing program code, such as a USB flash drive, a portable hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0221] This application also provides an electronic device that may include a memory and a processor. The memory stores a computer program, and when the processor calls the computer program in the memory, it can implement the steps provided in the above embodiments. Of course, the electronic device may also include various network interfaces, power supplies, and other components.

[0222] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the systems disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the descriptions are relatively simple; relevant parts can be referred to the method section. It should be noted that those skilled in the art can make various improvements and modifications to this application without departing from the principles of this application, and these improvements and modifications also fall within the protection scope of this application.

[0223] It should also be noted that, in this specification, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

Claims

1. A scrolling interaction method for an application interface, characterized in that, include: Determine the initial scrolling speed of interactive objects in the application interface; An instance of an inertial deceleration controller is created, and the initial rolling speed is input into the inertial deceleration controller; wherein, the inertial deceleration controller includes a parameter configuration module, a trajectory calculation module, and an animation driving module; the parameter configuration module is used to receive and configure rolling parameters including the initial rolling speed; The inertial deceleration controller's start animation method is invoked, and the frame callback function and completion callback function are passed to the inertial deceleration controller as parameters, so that the inertial deceleration controller performs a preset operation; wherein, the preset operation includes: using the animation driving module to record the animation start time; registering a callback with the timer and starting the inertial scrolling animation; using the trajectory calculation module to calculate the end position and total duration of the inertial scrolling animation based on the scrolling parameters; When the timer triggers the callback, the animation driving module is used to determine the duration of the animation that has been started, and to determine whether the duration of the animation that has been started is less than the total duration of the animation. If so, the animation start duration is passed to the trajectory calculation module, the current position is determined by the trajectory calculation module, and the current position is uploaded to the application layer by calling the frame callback function so that the application layer updates the screen content based on the current position; If not, the completion callback function is called to upload the animation completion flag and endpoint position to the application layer, so that the application layer stops updating the screen content after updating and displaying the last frame based on the endpoint position.

2. The scrolling interaction method for the application interface according to claim 1, characterized in that, Updating the screen content based on the current location includes: The displacement increment for this frame is calculated based on the current position and the historical position, and then added to the cumulative displacement variable; wherein, the historical position is the current position when the content of the previous frame was displayed; Determine whether the value of the cumulative displacement variable is greater than or equal to the preset step width; If so, the number of movement steps is calculated based on the cumulative displacement variable and the preset step width, the content of the current frame is displayed according to the number of movement steps, and the value of the cumulative displacement variable is cleared to zero; If not, the content of the previous frame is set as the content of the current frame, and the system waits to receive the new current position.

3. The scrolling interaction method for the application interface according to claim 1, characterized in that, The interactive object is an inner tab of a nested structure, and the nested structure also includes an outer list. Accordingly, determining the initial scrolling speed of interactive objects in the application interface includes: By listening to the scrolling events of the outer list, the inertial speed of the outer list when it reaches the top position is set as the initial scrolling speed of the inner tab.

4. The scrolling interaction method for the application interface according to claim 1, characterized in that, The interactive object is a data visualization chart; Accordingly, determining the initial scrolling speed of interactive objects in the application interface includes: During the user's interaction with the data visualization chart, a gesture recognizer is used to detect events where the user lifts their finger. If a user's finger is lifted, the data visualization chart is set to the initial scrolling speed at the current scrolling speed.

5. The scrolling interaction method for the application interface according to claim 1, characterized in that, Also includes: After determining the endpoint position of the inertial scrolling animation, a range to be displayed is determined based on the endpoint position, and the data corresponding to the range to be displayed is preloaded.

6. The scrolling interaction method for the application interface according to claim 1, characterized in that, Before creating an instance of the inertial deceleration controller, the following is also included: Determine if there are other inertial scrolling animations currently running; If so, interrupt other inertial scrolling animations that are currently running by calling the interrupt method; Accordingly, the process of the inertial deceleration controller starting the inertial rolling animation also includes: If an animation interruption command is received, the timer is stopped, and the animation interruption flag is uploaded to the application layer by calling the completion callback function, so that the application layer stops updating the screen content.

7. The scrolling interaction method for the application interface according to claim 1, characterized in that, The scrolling parameters include the initial scrolling speed, initial position, deceleration rate, and stop threshold. The initial position is the position at the start of the inertial scrolling animation. The deceleration rate is the rate at which the scrolling speed of the inertial scrolling animation decays. The stop threshold is a scrolling speed threshold used to determine whether the inertial scrolling animation has stopped. Accordingly, the trajectory calculation module is used to calculate the endpoint position based on the initial scrolling speed and the deceleration rate, to calculate the total animation duration based on the initial scrolling speed, the deceleration rate and the stopping threshold, and to calculate the current position based on the initial scrolling speed, the deceleration rate and the animation start time.

8. A scrolling interactive system for an application interface, characterized in that, include: The speed determination module is used to determine the initial scrolling speed of interactive objects in the application interface; A controller creation module is used to create an instance of an inertial deceleration controller and input the initial rolling speed into the inertial deceleration controller; wherein, the inertial deceleration controller includes a parameter configuration module, a trajectory calculation module, and an animation driving module; the parameter configuration module is used to receive and configure rolling parameters including the initial rolling speed; The callback setting module is used to call the start animation method of the inertial deceleration controller, and pass the frame callback function and the completion callback function as parameters to the inertial deceleration controller so that the inertial deceleration controller performs a preset operation; wherein, the preset operation includes: using the animation driving module to record the animation start time; registering a callback with the timer and starting the inertial scrolling animation; using the trajectory calculation module to calculate the end position and the total duration of the inertial scrolling animation based on the scrolling parameters; The duration determination module is used to determine the duration of the animation that has started when the timer triggers the callback, using the animation driving module, and to determine whether the duration of the animation that has started is less than the total duration of the animation. The first processing module is used to, if the animation start duration is less than the total animation duration, pass the animation start duration to the trajectory calculation module, use the trajectory calculation module to determine the current position, and upload the current position to the application layer by calling the frame callback function, so that the application layer updates the screen content based on the current position; The second processing module is used to upload the animation completion flag and endpoint position to the application layer by calling the completion callback function if the animation start duration is greater than or equal to the total animation duration, so that the application layer stops updating the screen content after updating and displaying the last frame of the screen based on the endpoint position.

9. An electronic device, characterized in that, It includes a memory and a processor, wherein the memory stores a computer program, and the processor, when calling the computer program in the memory, implements the steps of the scrolling interaction method of the application interface as described in any one of claims 1 to 7.

10. A storage medium, characterized in that, The storage medium stores computer-executable instructions, which, when loaded and executed by a processor, implement the steps of the scrolling interaction method of the application interface as described in any one of claims 1 to 7.

Images