An animation seamless scrolling method, system, computer device and storage medium

Abstract

The application relates to the technical field of webpage front-end development, and discloses an animation seamless scrolling method, system, computer device and storage medium. The method creates two same lists to realize visual continuity, analyzes scrolling configuration parameters such as a scrolling direction and element spacing, determines a displacement transformation axis and calculates a total scrolling size, sets an initial transformation offset and size of a container, creates a linear easing cycle animation, realizes unconscious position resetting of a sub-element through a modulo operation when a frame is updated, enhances visual continuity in combination with sub-element copying and splicing, synchronously completes animation instance management when component updating and unloading are completed, deeply listens to changes in scrolling configuration parameters and reconstructs the animation after a document object model is updated. The application improves animation fluency and system stability, adapts to dynamic configuration and content changes, and can be widely applied to various front-end scrolling display scenes.

Description

Technical Field

[0001] This invention relates to the field of web page front-end development technology, specifically to a seamless scrolling animation method, system, computer device, and storage medium. Background Technology

[0002] Seamless scrolling is a commonly used visual interaction effect in front-end development, widely applied in scenarios such as product carousels, information displays, and data dashboards. However, in practical applications, it suffers from numerous technical shortcomings, making it difficult to meet the development requirements of high performance and high adaptability. Existing solutions often use non-uniform easing methods when creating scrolling animations and fail to achieve precise cyclic displacement control based on the overall size, easily leading to scrolling stutters and visual gaps. Furthermore, the lack of lifecycle management for animation instances means that old animation instances are not promptly removed during component updates, and related data is not cleaned up during uninstallation, easily causing animation conflicts and memory leaks. Additionally, the lack of a dynamic response mechanism for configuration parameters means that animations cannot be automatically rebuilt after parameter changes, requiring manual updates and resulting in poor adaptability. Therefore, there is an urgent need for a seamless scrolling animation solution that can dynamically adapt to content changes, achieve smooth and seamless looping, possess good performance, and is easy to configure. Summary of the Invention

[0003] In view of this, the present invention provides a method, system, computer device and storage medium for seamless animation scrolling, in order to solve the technical problems in the prior art such as visual breaks in animation, lack of animation lifecycle management and inability to dynamically adapt to configuration changes.

[0004] In a first aspect, the present invention provides a method for seamless scrolling of animation, comprising: Parse the scroll configuration parameters, which include scroll direction, element spacing, and animation duration; Determine the displacement transformation axis based on the scrolling direction, and obtain all child elements within the scrolling container; Calculate the total scroll size based on the size of each child element and the spacing between elements, and set the initial transformation offset and container size of the scroll container according to the total scroll size; The content of the child elements within the scrolling container is copied and appended to the original child elements to fill the visual gaps during scrolling and enhance the visual continuity of seamless scrolling. Then, a linear easing looping animation is created. When the animation is updated at each frame, the total scrolling size is moduloed based on the current cumulative displacement. The modulo result is used as the transformation offset value of the child elements, so that the position is reset imperceptibly when the animation reaches the end, forming a visually seamless looping scrolling. Remove the current animation instance before the component is updated, and recreate the animation after the component is updated; clean up the animation instance when the component is uninstalled. In response to dynamic changes in configuration parameters, the current animation instance is removed. Once the document object model is updated, the animation is recreated and the new configuration or content is applied.

[0005] The total scrolling dimension is calculated based on the size of each sub-element and the element spacing, including: obtaining the size of each sub-element in the scrolling direction and adding it to the element spacing to obtain the unit length; and summing the unit lengths of all sub-elements to obtain the total scrolling dimension.

[0006] Set the initial transformation offset of the scroll container, including: offsetting the scroll container in the opposite direction of the translation transformation axis according to the unit length of the first child element; and setting the initial displacement position of each child element through the static setting method of the anime.js animation library, so that the child elements are arranged sequentially according to the unit length in the scrolling direction.

[0007] Creating a linearly easing looping animation involves: creating an offset array, where each element corresponds one-to-one with a child element, to store the real-time offset of that child element; using the offset array as the animation target, and employing the anime.js animation library to linearly increase or decrease each offset within the animation duration; specifically, if the scrolling direction is vertical, setting the animation displacement direction to the opposite direction to linearly decrease the Y-axis offset, achieving uniform scrolling in the vertical direction; and performing a modulo operation on the total scroll size based on the current value in the offset array at each frame update, setting the modulo result as the cascading style sheet transform property translateX or translateY for each child element, achieving continuous element displacement and visually seamless looping scrolling.

[0008] In response to dynamic changes in configuration parameters, the following measures are taken: monitoring attribute changes of configuration parameters through deep listening and immediately removing the current animation instance upon detecting a change; and waiting for the document object model to be fully updated before recreating the animation through the nextTick asynchronous update mechanism to ensure that the size calculation matches the document object model structure and avoid calculation errors.

[0009] The displacement transformation axis is determined based on the scrolling direction, including: when the scrolling direction is horizontal, the size is calculated using the horizontal dimension property offsetWidth of the child element, the displacement transformation axis is the horizontal axis, and the corresponding cascading style sheet transformation property is translateX; when the scrolling direction is vertical, the size is calculated using the vertical dimension property offsetHeight of the child element, the displacement transformation axis is the vertical axis, and the corresponding cascading style sheet transformation property is translateY.

[0010] The method also includes: providing pause and resume interfaces bound to the animation instance for external control of the animation's start and stop status. When the pause interface is triggered, the animation stops execution and saves the current offset. When the resume interface is triggered, the animation continues execution from the current offset position, adapting to diverse business control needs.

[0011] The method is based on the component-based interface design of the front-end framework and is encapsulated as a reusable hook function. It can be directly imported into the front-end project through module import. By passing in the element reference of the scroll container and configuration parameters, a seamless scrolling effect can be quickly achieved, improving code reusability and development efficiency.

[0012] In a second aspect, the present invention provides an animation seamless scrolling system, comprising: The initialization module is used to parse scroll configuration parameters during the component mounting phase, determine the displacement transformation axis according to the scroll direction and select the corresponding size attribute, obtain all child elements in the scroll container, calculate the total scroll size based on the size of each child element and the element spacing, set the initial transformation offset and container size of the scroll container, and create animation. The animation creation module is used to create an offset array and use it as the animation target. It creates a linear easing loop animation through the animation library, binds the total scroll size as the displacement target, and resets the offset by taking the modulo of the total scroll size during each frame update of the animation to achieve continuous loop scrolling. The lifecycle management module is used to remove the current animation instance before the component is updated, recreate the animation after the component is updated, and clean up the animation instance and related data when the component is unloaded. The responsive adaptation module is used to monitor configuration parameter changes through deep listening. After a change is detected, the current animation instance is removed, and the animation is recreated after the document object model is updated to adapt to the new configuration or content. The control module is used to control the start and stop status of the animation.

[0013] Thirdly, the present invention provides a computer device, comprising: a memory and a processor, the memory and the processor being communicatively connected to each other, the memory storing computer instructions, and the processor executing the computer instructions to perform the method described in the first aspect or any corresponding embodiment thereof.

[0014] Fourthly, the present invention provides a computer-readable storage medium storing computer instructions for causing a computer to perform the method described in the first aspect or any corresponding embodiment thereof.

[0015] Fifthly, the present invention provides a computer program product, including computer instructions for causing a computer to perform the method described in the first aspect or any corresponding embodiment thereof.

[0016] This invention automatically parses scroll configurations and calculates element and container sizes, enabling initial offset and container size settings without manual intervention, significantly reducing development complexity and improving code reusability and integration efficiency. It employs a combination of cloning and modulo operations, ensuring visual continuity through cloning and achieving seamless position resetting through modulo operations, avoiding DOM redundancy and visual discontinuities caused by traditional simple cloning. By removing and rebuilding animation instances before and after component updates and cleaning up resources during component unloading, it effectively avoids animation conflicts and memory leaks, improving system stability and reliability. It also supports dynamic monitoring of configuration parameters and automatic animation reconstruction after DOM updates, adapting in real-time to changes in scroll direction, spacing, speed, and content, demonstrating excellent dynamic adaptability. This solution is logically simple, highly versatile, and can achieve stable, smooth, and seamless high-performance scrolling effects in various front-end scenarios. Attached Figure Description

[0017] To more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0018] Figure 1 This is a flowchart illustrating a seamless scrolling animation method according to an embodiment of the present invention; Figure 2 This is an overall logic diagram of an animation seamless scrolling method according to an embodiment of the present invention; Figure 3 This is a structural block diagram of an animation seamless scrolling system according to an embodiment of the present invention; Figure 4 This is a schematic diagram of the hardware structure of a computer device according to an embodiment of the present invention. Detailed Implementation

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

[0020] Seamless scrolling is a common visual interaction effect in front-end development, widely used in scenarios such as product carousels, information displays, and data dashboards. Its core lies in achieving continuous, looping movement of content so that users cannot visually perceive the boundary between the scrolling start and end points. Currently, the main methods for achieving seamless scrolling animations include: using JavaScript timers in conjunction with changes in CSS Cascading Style Sheets Properties to achieve displacement; using CSS Cascading Style Sheets Animations for looping playback; and achieving visual continuity by cloning and stitching together elements from the Document Object Model (DOM).

[0021] However, the above-mentioned technical solutions have many technical defects in practical applications and are difficult to meet the development requirements of high performance and high adaptability.

[0022] First, the animation control precision is insufficient. Many scrolling animations employ non-uniform easing methods and fail to incorporate precise cyclic displacement control based on the total scroll size. Some solutions rely on manually calculating the displacement for each frame, which can lead to scrolling stutters and jitter when the calculation accuracy is insufficient or out of sync with the browser refresh rate. Other solutions use timers with set intervals to drive the displacement, but their execution frequency is inconsistent with the screen refresh rate, easily causing visual discontinuity and frame rate drops. Furthermore, due to the lack of modulo control over the total scroll size and displacement, the animation often loops by instantly resetting the position at the end, resulting in noticeable jumps or gaps in visuals and failing to achieve a truly smooth, seamless scrolling experience.

[0023] Secondly, lifecycle management is lacking. When used in conjunction with front-end frameworks, component lifecycle management was not adequately considered. When components are updated, old animation instances are not removed promptly, causing both new and old animations to run simultaneously, leading to animation conflicts and state chaos. When components are unloaded, animation instances and related data are not cleaned up, causing memory leaks and a significant decline in page performance after prolonged use. These issues are particularly pronounced in single-page applications where components are frequently created and destroyed.

[0024] Secondly, the dynamic adaptation capability is insufficient. Typically, the total scroll length is calculated and animation is created all at once when the page loads. When the scrolling content changes dynamically or the scrolling configuration changes, it cannot respond automatically. Developers need to manually recalculate the size, destroy old animations, and create new ones, increasing development complexity and maintenance costs, and easily causing animation anomalies due to improper timing of operations.

[0025] Finally, configuration flexibility is poor. Parameters such as scrolling direction, spacing, and speed are often hard-coded into the implementation logic, making it difficult to adjust flexibly according to business needs and resulting in poor reusability. Scrolling requirements vary significantly across different scenarios, and the lack of a unified, configurable interface forces developers to repeatedly implement similar logic.

[0026] In summary, there is an urgent need for a seamless scrolling animation solution that can dynamically adapt to content changes, achieve smooth and seamless looping, has good performance, and is easy to configure.

[0027] According to an embodiment of the present invention, an embodiment of a seamless scrolling animation method is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here. Example

[0028] This embodiment provides a seamless scrolling animation method. The core principle is to create two identical lists and use the CSS transform property and the anime.js animation library to achieve a continuous scrolling effect for the list elements. Figure 1 This is a flowchart of an animation seamless scrolling method according to an embodiment of the present invention, such as... Figure 1 As shown, the process includes the following steps: Step S101: Parse the scrolling configuration parameters.

[0029] The `useSeamlessScroll` hook function is called, passing in a reference to the scroll container and configuration parameters. This hook function is a reusable functional unit that receives the Vue reference `listRef` of the scroll container and scroll configuration parameters `options`, including scroll direction, element spacing, and animation duration. By calling this hook function, the entire process of scroll initialization, size calculation, initial positioning, animation creation, loop control, responsive updates, and lifecycle management can be completed.

[0030] Initialize the initial offset of each child element. The offset can be set to 0 or a preset starting offset value, so that scrolling starts from the specified starting position. In this embodiment, each parameter supports custom configuration according to different front-end business scenarios such as e-commerce carousel and information display. At the same time, reasonable default parameters are preset, and the default scrolling direction is horizontal, which greatly improves the convenience of development and use. After the parameters are parsed, they are stored in a structured manner for easy direct calling in subsequent steps.

[0031] Key code implementation: Function definition and parameters export function useSeamlessScroll(listRef: Ref<HTMLElement | null> ,options: OptionsType = {}) { / / Implementation code } Parameter description: - `listRef`: A Vue reference (Ref) to the container element that needs to be scrolled. - `options`: Configuration options, including: - `direction`: Scrolling direction, with options 'horizontal' (horizontal) or 'vertical' (vertical), defaulting to 'horizontal'. - `gap`: Spacing between elements, default value is 10px - `duration`: The duration of the scrolling animation, the default value is 10000ms. ```typescript / / Initialization function function init() { const { direction = 'horizontal', gap = 10, duration = 10000 } = options const isHorizontal = direction === 'horizontal' const translateKey = isHorizontal ? 'translateX' : 'translateY' const transKey = isHorizontal ? 'x' : 'y' Step S102: Determine the displacement transformation axis and obtain the sub-elements.

[0032] Based on the scrolling direction obtained from the analysis, the corresponding translation transformation axis and CSS transform property are accurately matched to clarify the translation control method for horizontal scrolling (translateX) and vertical scrolling (translateY), laying the foundation for subsequent accurate translation calculations. At the same time, all child elements under the scrolling container are accurately obtained through container references as the core control objects for the scrolling animation. Non-empty validation is performed to ensure that all elements to be scrolled are accurately obtained without omission or incorrect selection, providing a complete object foundation for subsequent size calculations, translation settings, and animation driving.

[0033] Key code implementation: / / Get child elements const children = listRef.value?.children || [] If (!children.length) return Step S103: Calculate the total scroll size and set the initial properties of the container.

[0034] Iterate through all child elements, and based on the configured element spacing, obtain the actual size of each child element on the corresponding displacement transformation axis. Calculate the overall size occupied by a single child element and sum them up to obtain the total scroll size. This total size is the core basis for animation loop displacement and modulo operation reset, directly determining the accuracy of the scroll loop. At the same time, calculate the offset value based on the size and spacing of the first child element, and set the initial transformation offset for the scroll container to eliminate the white space problem at the beginning of the scroll from the root, making the initial scroll state more in line with visual display requirements. And set the corresponding width or height for the container according to the scroll direction to ensure that the physical size of the scroll container matches the total scroll size, and that the scroll layout is complete without abnormal white space or element overflow.

[0035] Key code implementation: / / Calculate the size and spacing of the first element const firstEl = children[0] as HTMLElement const firstDiff = (isHorizontal ? firstEl.offsetWidth :firstEl.offsetHeight) + gap / / Set initial offset listRef.value!.style.transform = `${translateKey}(-${firstDiff}px)` let total = 0 / / Total dimensions / / Set initial position anime.set(children, { [translateKey]: (el: HTMLElement, i) => { const distance = (isHorizontal ? el.offsetWidth :el.offsetHeight) + gap total += distance transList[i] = { [transKey]: total - distance} return total - distance } }) / / Set container size listRef.value!.style[isHorizontal ? 'width' : 'height'] = total + 'px' Step S104: Create a linear easing loop animation and achieve seamless scrolling.

[0036] First, the content of the child elements within the scrolling container is completely copied and appended to the original child elements in their original order. This double-element layout design fills in the visual blank areas that may appear due to element displacement during scrolling, ensuring the initial visual continuity of the scrolling. Then, a linearly easing looping animation is created using the high-performance anime.js animation library. The linear easing characteristic ensures uniform displacement speed during animation execution, avoiding visual issues such as stuttering, jumps, and inconsistent frame rates. The animation direction is also adapted to visual habits: horizontal scrolling uses the default forward animation, while vertical scrolling is specifically set to a reverse animation, making the scrolling effect more consistent with user operation and viewing habits. During each frame update of the animation, the displacement value is cyclically reset by performing a modulo operation between the current cumulative displacement and the total scroll size. This ensures that the element displacement automatically resets to zero and restarts after reaching the total scroll size, achieving a seamless looping scrolling effect without breaks, stutters, or noticeable jumps.

[0037] Key code implementation: / / Create animation animation.value = anime({ targets: transList, duration, easing: 'linear', direction: isHorizontal ? undefined : 'reverse', [transKey]: `+=${total}`, loop: true, update: () => { anime.set(children, { [translateKey]: (el, i) => { return transList[i][transKey] % total } }) } }) } ``` Step S105: Manage animation instances according to the component lifecycle.

[0038] Deeply integrated with the component lifecycle mechanism of the Vue 3 front-end framework, this system provides full-process, fine-grained lifecycle management for animation instances, achieving synchronized linkage between animations and component states: Animations are initialized and started when the component is mounted, ensuring normal execution after page rendering; existing animation instances are promptly destroyed when the component is about to enter the update phase to avoid conflicts between old animation instances and new component content and page layout, preventing animation overlap and misalignment; animations are reinitialized after component updates, keeping animation effects synchronized with the latest page structure and element states; and animation instances and related resources are thoroughly cleaned up when the component is unloaded, fundamentally preventing memory leaks and ensuring the long-term stability and reliability of the front-end page.

[0039] Step S106: Respond to dynamic changes in configuration parameters and rebuild the animation.

[0040] Through a deep monitoring mechanism, all properties of the scroll configuration parameters are monitored in real time and in full, ensuring that even the slightest changes in any parameter, such as scroll direction, element spacing, or animation duration, can be accurately captured. When a dynamic change in the configuration parameters is detected, the currently executing animation instance is immediately destroyed to prevent invalid animations from continuing to run. At the same time, through Vue 3's nextTick asynchronous update mechanism, the animation is recreated and started based on the latest configuration parameters after the Document Object Model has completed the re-rendering and update of the page structure. This ensures that the size calculation, element positioning, and updated DOM structure are completely matched, avoiding calculation errors and element misalignment caused by timing issues. This achieves automatic and seamless adaptation after dynamic configuration changes, without requiring developers to manually refresh the page or trigger animation restarts.

[0041] Key code implementation: ```typescript / / Initialize when component is mounted onMounted(() => { init() }) / / Remove animation before component update onBeforeUpdate(() => { animation.value.remove(transList) }) / / Reinitialize after component update onUpdated(() => { init() }) / / Listen for changes in configuration options watch(() => options, () => { animation.value.remove(transList) nextTick(() => { init() }) }, { deep: true}) ``` other: It provides pause and resume interfaces that are bound to the animation instance, allowing external control of the animation's start and stop status. When the pause interface is triggered, the animation stops execution and saves the current offset. When the resume interface is triggered, the animation continues execution from the current offset position, adapting to diverse business control needs.

[0042] External Interface ```typescript return { listRef, pause, play animation } ``` Return value description: - `listRef`: The passed-in reference to the container element - `pause`: The method to pause animation. - `play`: Method for playing animations - `animation`: An animation example from anime.js, available for advanced control. The seamless scrolling method provided in this embodiment completes the entire process from parameter parsing to animation control through standardized steps, eliminating the need for manual size calculations and animation position resets, thus significantly reducing the development complexity of seamless scrolling functionality. It achieves seamless animation looping through modulo operations, effectively solving the visual discontinuity problem of traditional scrolling solutions and improving the smoothness of scrolling display. Through the linked management of component lifecycles and animation instances, it avoids animation conflicts and memory leaks, enhancing the operational stability of the front-end page. Simultaneously, it supports dynamic response to configuration parameters, enabling flexible adaptation of scrolling effects to meet the display needs of different front-end business scenarios. Example

[0043] The difference between this embodiment and Embodiment 1 is that, for vertical scrolling scenarios, the animation direction is set to the opposite direction, and the downward scrolling effect is achieved in conjunction with the displacement target. Example

[0044] The difference between this embodiment and Embodiment 1 is that multiple scrolling containers on the same page run independently at the same time, which is suitable for use scenarios where multiple areas on a complex page scroll simultaneously.

[0045] This embodiment also provides a seamless animation scrolling system, which is used to implement the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can be a combination of software and / or hardware that performs a predetermined function. Although the apparatus described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0046] This embodiment provides a seamless animation scrolling system, such as Figure 3 As shown, it includes: The initialization module is used to parse scroll configuration parameters during the component mounting phase, determine the displacement transformation axis according to the scroll direction and select the corresponding size attribute, obtain all child elements in the scroll container, calculate the total scroll size based on the size of each child element and the element spacing, set the initial transformation offset and container size of the scroll container, and create animation. The animation creation module is used to create an offset array and use it as the animation target. It creates a linear easing loop animation through the animation library, binds the total scroll size as the displacement target, and resets the offset by taking the modulo of the total scroll size during each frame update of the animation to achieve continuous loop scrolling. The lifecycle management module is used to remove the current animation instance before the component is updated, recreate the animation after the component is updated, and clean up the animation instance and related data when the component is unloaded. The responsive adaptation module is used to monitor configuration parameter changes through deep listening. After a change is detected, the current animation instance is removed, and the animation is recreated after the document object model is updated to adapt to the new configuration or content. The control module is used to control the start and stop status of the animation.

[0047] Further functional descriptions of the above modules and units are the same as those in the corresponding embodiments described above, and will not be repeated here.

[0048] In this embodiment, an animation seamless scrolling system is presented in the form of functional units. Here, a unit refers to an ASIC (Application Specific Integrated Circuit) circuit, a processor and memory that execute one or more software or fixed programs, and / or other devices that can provide the above functions.

[0049] This invention also provides a computer device having the above-described features. Figure 4 This illustrates a seamless scrolling animation system.

[0050] Please see Figure 4 , Figure 4 This is a schematic diagram of the structure of a computer device provided in an optional embodiment of the present invention, such as... Figure 4As shown, the computer device includes one or more processors 10, memory 20, and interfaces for connecting the components, including high-speed interfaces and low-speed interfaces. The components communicate with each other via different buses and can be mounted on a common motherboard or otherwise installed as needed. The processors can process instructions executed within the computer device, including instructions stored in or on memory to display graphical information of a GUI on external input / output devices (such as display devices coupled to the interfaces). In some alternative implementations, multiple processors and / or multiple buses can be used with multiple memories and multiple memory modules, if desired. Similarly, multiple computer devices can be connected, each providing some of the necessary operations (e.g., as a server array, a group of blade servers, or a multiprocessor system). Figure 4 Take a processor 10 as an example.

[0051] Processor 10 may be a central processing unit, a network processor, or a combination thereof. Processor 10 may further include a hardware chip. The hardware chip may be an application-specific integrated circuit (ASIC), a programmable logic device (PLD), or a combination thereof. The programmable logic device may be a complex programmable logic device (CAMP), a field-programmable gate array (FPGA), a general-purpose array logic (GPA), or any combination thereof.

[0052] The memory 20 stores instructions executable by at least one processor 10 to cause the at least one processor 10 to perform the method shown in the above embodiments.

[0053] The memory 20 may include a program storage area and a data storage area. The program storage area may store the operating system and applications required for at least one function; the data storage area may store data created based on the use of the computer device. Furthermore, the memory 20 may include high-speed random access memory and may also include non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid-state storage device. In some alternative embodiments, the memory 20 may optionally include memory remotely located relative to the processor 10, and these remote memories may be connected to the computer device via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0054] The memory 20 may include volatile memory, such as random access memory; the memory may also include non-volatile memory, such as flash memory, hard disk or solid-state drive; the memory 20 may also include a combination of the above types of memory.

[0055] The computer device also includes a communication interface 30 for communicating with other devices or communication networks.

[0056] This invention also provides a computer-readable storage medium. The methods described above according to embodiments of the invention can be implemented in hardware or firmware, or implemented as computer code that can be recorded on a storage medium, or implemented as computer code downloaded via a network and originally stored on a remote storage medium or a non-transitory machine-readable storage medium and then stored on a local storage medium. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium can also include combinations of the above types of memory. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code, which, when accessed and executed by the computer, processor, or hardware, implements the methods shown in the above embodiments.

[0057] A portion of this application can be applied as a computer program product, such as computer program instructions, which, when executed by a computer, can invoke or provide the methods and / or technical solutions according to this application through the operation of the computer. Those skilled in the art will understand that the forms in which computer program instructions exist in a computer-readable medium include, but are not limited to, source files, executable files, installation package files, etc. Correspondingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executing the instructions, or the computer compiling the instructions and then executing the corresponding compiled program, or the computer reading and executing the instructions, or the computer reading and installing the instructions and then executing the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer.

[0058] Although embodiments of the invention have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of the invention, and such modifications and variations all fall within the scope defined by the appended claims.

Claims

1. A method for seamless scrolling in animation, characterized in that, The method includes: Parse the scrolling configuration parameters, which include scrolling direction, element spacing, and animation duration; The displacement transformation axis is determined based on the rolling direction, and all sub-elements within the rolling container are obtained; Based on the dimensions of each sub-element in the direction of the displacement transformation axis and the spacing between the elements, the total rolling dimension is calculated, and the initial transformation offset of the rolling container and the dimensions of the container in the direction of the displacement transformation axis are set according to the total rolling dimension. Copy the content of the child elements within the scrolling container and append it to the original child elements; Create a linear easing loop animation. When the animation is updated at each frame, perform a modulo operation on the total scroll size based on the current cumulative displacement. Use the modulo result as the transformation offset value of the sub-element in the direction of the displacement transformation axis to control the real-time displacement of the sub-element in the scroll direction. Remove the current animation instance before the component is updated, and recreate the animation after the component is updated; clean up the animation instance and related resources when the component is uninstalled. In response to dynamic changes in the configuration parameters, the current animation instance is immediately removed. Once the document object model is updated, the animation is recreated based on the new configuration parameters and the new configuration or content is applied.

2. The seamless scrolling animation method according to claim 1, characterized in that, The calculation of the total scroll size based on the size of each sub-element and the spacing between the elements includes: Obtain the dimension of each sub-element in the direction of the displacement transformation axis, and add it to the element spacing to obtain the unit length; The total scrolling dimension is obtained by summing the unit lengths of all child elements.

3. The seamless scrolling animation method according to claim 1, characterized in that, The creation of a linearly easing looping animation includes: Create an offset array, where each element in the offset array corresponds one-to-one with a child element, and is used to store the real-time offset of that child element; The offset array is used as the animation target, and the offsets are linearly increased during the animation duration using an animation library. At each frame update of the animation, the total scroll size is moduloed based on the current value in the offset array, and the modulo result is used as the transformation attribute value of each child element.

4. The seamless scrolling animation method according to claim 1, characterized in that, The response to dynamic changes in configuration parameters includes: The system monitors changes to configuration parameters using deep listening, and immediately removes the current animation instance upon detecting a change. The animation is recreated only after the document object model has been fully updated using an asynchronous update mechanism.

5. The seamless scrolling animation method according to claim 1, characterized in that, Determining the displacement transformation axis based on the rolling direction includes: When the scrolling direction is horizontal, the size is calculated using the size attribute of the sub-element in the direction of the displacement transformation axis, which is the horizontal axis. When the scrolling direction is vertical, the size is calculated using the size attribute of the sub-element in the direction of the displacement transformation axis, which is the vertical axis.

6. The seamless scrolling animation method according to claim 1, characterized in that, Also includes: Provide pause and resume interfaces for external control of the animation's start and stop status.

7. A seamless animation scrolling system, characterized in that, The system includes: The initialization module is used to parse the scroll configuration parameters, determine the displacement transformation axis according to the scroll direction and select the corresponding size attribute, obtain all child elements in the scroll container, calculate the total scroll size based on the size of each child element and the element spacing, set the initial transformation offset and container size of the scroll container, and create the animation. The animation creation module is used to create an offset array and use it as the animation target. It creates a linear easing loop animation through the animation library, binds the total scroll size as the displacement target, and resets the offset by taking the modulo of the total scroll size during each frame update of the animation to achieve continuous loop scrolling. The lifecycle management module is used to remove the current animation instance before the component is updated, recreate the animation after the component is updated, and clean up the animation instance and related resources when the component is unloaded. The responsive adaptation module is used to monitor configuration parameter changes through deep listening. After a change is detected, the current animation instance is removed, and the animation is recreated after the document object model is updated to adapt to the new configuration or content. The control module is used to control the start and stop status of the animation.

8. A computer device, characterized in that, include: A memory and a processor, the memory and the processor being communicatively connected to each other, the memory storing computer instructions, the processor executing the computer instructions to perform the method of any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing a computer to perform the method of any one of claims 1 to 6.

10. A computer program product, characterized in that, Includes computer instructions for causing a computer to perform the method of any one of claims 1 to 6.

Images