Component arrangement method, device, equipment, storage medium and product

Abstract

The present disclosure provides a component arrangement method, device, equipment and storage medium, relates to the technical field of artificial intelligence, in particular to the technical field of computer vision and deep learning. The component arrangement method comprises: obtaining initial position information of a target component in a current display state; in response to receiving an arrangement operation on the target component, maintaining the current display state and obtaining a final state position sequence of the target component after the arrangement operation; determining an animation effect of the target component according to the initial position information and the final state position sequence; and updating the current display state according to the arrangement operation and the animation effect. The component arrangement method provided by the present disclosure can obtain the final state position sequence of the target component after the arrangement operation while maintaining the current display state, and then determine the animation effect corresponding to the arrangement operation, and update the current display state accordingly, thereby saving computing power and cost and improving code reusability.

Description

Technical Field

[0001] This disclosure relates to the field of artificial intelligence technology, specifically to the fields of computer vision and deep learning technology, and particularly to a method for arranging components, an apparatus, a device, a storage medium, and a computer program product. Background Technology

[0002] Existing products and technologies, when providing users with customizable product pages, often employ drag-and-drop interactions and corresponding arrangement and shifting animations to offer a better configuration experience.

[0003] The current mainstream implementation often requires calculating the position of the components that make up the page before and after the operation based on the component size, which results in a serious waste of computing power. Summary of the Invention

[0004] This disclosure provides a component arrangement method, apparatus, device, storage medium, and computer program product. The component arrangement method and apparatus can be applied to the arrangement of workbench grid components, saving computing power.

[0005] According to a first aspect of this disclosure, a method for arranging components is provided, comprising:

[0006] Get the initial position information of the target component in the current display state;

[0007] In response to receiving an arrangement operation on the target component, maintain the current display state and obtain the final position order of the target component after the arrangement operation;

[0008] Based on the initial position information and the final position order, determine the animation effect of the target component;

[0009] Update the current display state based on the arrangement operation and animation effects.

[0010] According to a second aspect of this disclosure, a component arrangement device is provided, comprising:

[0011] The first acquisition module is configured to acquire the initial position information of the target component in the current display state;

[0012] The second acquisition module is configured to, in response to receiving an arrangement operation on the target component, maintain the current display state and acquire the final position order of the target component after the arrangement operation;

[0013] The determination module is configured to determine the animation effect of the target component based on the initial position information and the final position order;

[0014] The update module is configured to update the current display state based on the arrangement operation and animation effects.

[0015] According to a third aspect of this disclosure, an electronic device is provided, comprising:

[0016] At least one processor; and

[0017] A memory that is communicatively connected to at least one processor; wherein,

[0018] The memory stores instructions that can be executed by at least one processor, such that the instructions are executed by at least one processor to enable the at least one processor to perform the method provided in the first aspect.

[0019] According to a fourth aspect of this disclosure, a non-transitory computer-readable storage medium is provided storing computer instructions for causing a computer to perform the method provided in the first aspect.

[0020] According to a fifth aspect of this disclosure, a computer program product is provided, including a computer program that, when executed by a processor, implements the method provided according to the first aspect.

[0021] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this disclosure, nor is it intended to limit the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0022] The accompanying drawings are provided to better understand this solution and do not constitute a limitation of this disclosure. Wherein:

[0023] Figure 1 An exemplary system architecture to which the component arrangement method of this disclosure can be applied is shown;

[0024] Figure 2 A flowchart of one embodiment of the component arrangement method according to the present disclosure is shown;

[0025] Figure 3 A flowchart of a second embodiment of the component arrangement method according to this disclosure is shown;

[0026] Figure 4 A flowchart of a third embodiment of the component arrangement method according to the present disclosure is shown;

[0027] Figure 5 A schematic diagram of a component arrangement apparatus according to an embodiment of the present disclosure is shown;

[0028] Figure 6 A block diagram of an electronic device for implementing the component arrangement method of this disclosure is shown. Detailed Implementation

[0029] The exemplary embodiments of this disclosure are described below with reference to the accompanying drawings, including various details of the embodiments to aid understanding, and should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of this disclosure. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0030] It should be noted that, unless otherwise specified, the embodiments and features described in this disclosure can be combined with each other. This disclosure will now be described in detail with reference to the accompanying drawings and embodiments.

[0031] When customizing integrated workbench and other product pages, drag-and-drop interactions with corresponding arrangement and shifting animations are often used to provide users with a better configuration experience. The current mainstream approach involves calculating the position of each component after each arrangement, designing keyframes for the animation, and then continuously refreshing the page to achieve the arrangement and shifting animation effect.

[0032] The above implementations often require calculating the size of the components that make up the page and their positions after the operation, and then implementing the animation effect by organizing key animation frames. This process is costly, and the size of each component must be recalculated after each operation, resulting in poor code reusability and significant waste of computing power.

[0033] This disclosure provides a component arrangement method that, while maintaining the current display state, obtains the final position order of the target components after the arrangement operation, determines the animation effect corresponding to the arrangement operation based on the final position order, and then updates the current display state based on the arrangement operation and the animation effect, thereby saving computing power and cost and improving code reusability.

[0034] Figure 1 An exemplary system architecture 100 is shown, to which embodiments of the component arrangement method or component arrangement apparatus of this disclosure may be applied.

[0035] like Figure 1 As shown, the system architecture 100 may include a terminal device 101, a network 102, and a server 103. The network 102 is used to provide a communication link between the terminal device 101 and the server 103, and may include various connection types, such as wired communication links, wireless communication links, or fiber optic cables, etc.

[0036] Users can use terminal device 101 to interact with server 103 via network 102 to receive or send information, etc. For example, various client applications can be installed on terminal device 101. Users can arrange page components of various clients or web pages on terminal device 101. Server 103 can obtain the position information and order of each component, as well as the user's arrangement operation, via network 102. Based on the obtained information, server 103 determines the animation effect corresponding to the arrangement operation and presents the animation effect to the corresponding page on terminal device 101 via network 102 to update the current display state of the page.

[0037] Terminal device 101 can be hardware or software. When terminal device 101 is hardware, it can be various electronic devices, including but not limited to smartphones, tablets, laptops, and desktop computers. When terminal device 101 is software, it can be installed in the aforementioned electronic devices. It can be implemented as multiple software programs or software modules, or as a single software program or software module. No specific limitations are made here.

[0038] Server 103 can be either hardware or software. When server 103 is hardware, it can be implemented as a distributed server cluster consisting of multiple servers, or as a single server. When server 103 is software, it can be implemented as multiple software programs or software modules (e.g., used to provide distributed services), or as a single software program or software module. No specific limitations are made here.

[0039] The component arrangement method provided in this embodiment is generally executed by server 103, and correspondingly, the component arrangement device is generally disposed in server 103.

[0040] It should be noted that, Figure 1 The number of terminal devices 101, network 102, and server 103 shown is merely illustrative. Depending on implementation needs, any number of terminal devices 101, network 102, and server 103 can be included.

[0041] In this embodiment of the disclosure, the component arrangement method is executed by server 103, and the animation effect and the updated current display state are sent to terminal device 101 with the client installed, so as to realize the animation presentation of the user's arrangement operation of the components on the page on the terminal device 101, and update the current display state of the components on the page in the terminal device 101.

[0042] Figure 2 A flow 200 is shown as an embodiment of the component arrangement method according to this disclosure, with reference to Figure 2 As shown, the component arrangement method includes the following steps:

[0043] Step S201: Obtain the initial position information of the target component in the current display state.

[0044] In this embodiment of the disclosure, the executing entity of the component arrangement method is, for example, Figure 1 The server 103 shown obtains the initial position information of the target component in the current display state. The target component can be any component in the currently displayed client page or application page on the terminal device 101.

[0045] In this embodiment of the disclosure, the target component can be any type of component such as a text component, an image component, or a video component, and there is no limitation herein.

[0046] For example, the current display state can be the initial display state of the page where the target component is located, that is, the display state before any component on the page is moved or arranged.

[0047] In some optional implementations of the embodiments of this disclosure, the initial position information of the target component includes at least the initial position coordinate information of a preset point on the target component, such as at least one of the coordinate information of the upper left corner, the lower left corner, and the geometric center of the target component.

[0048] In step S202, in response to receiving the arrangement operation on the target component, the current display state is maintained, and the final position order of the target component after the arrangement operation is obtained.

[0049] In this embodiment of the disclosure, the executing entity of the component arrangement method is, for example, Figure 1 The server 103 shown, in response to receiving an arrangement operation on the target component, maintains the current display state in step S201 and obtains the final position information of the target component after the arrangement operation.

[0050] In this embodiment of the disclosure, the arrangement operation can be at least one of at least one type of operation, such as a move operation, an insertion operation, or a deletion operation. That is, the arrangement operation can include only one independent operation or at least two consecutive operations. If it is at least two consecutive operations, the at least two consecutive operations can be operations of the same type or operations of different types.

[0051] The move operation involves moving any component on the page from its original position to another position. This can be a move operation on a single component or an operation to swap the positions of any two components. However, since the sizes of the components on the page may not be the same, even swapping two components may cause the position of the component located between them to change.

[0052] An insertion operation is the operation of adding a new component to the existing component layout of a page. For example, the insertion operation can be inserting the new component between any two components that are at the beginning, end, or in the middle of the existing components.

[0053] The deletion operation involves removing at least one component from the existing page. Since this deletion operation may affect the rearrangement of the remaining components, the component arrangement method disclosed herein also needs to be executed.

[0054] Upon receiving a user's arrangement operation for any target component, the aforementioned execution entity maintains the current display state of the page and its components, and obtains the final position order of the target component after the arrangement operation. This final position order is the position order of the target component among all components on the page after responding to the arrangement operation.

[0055] Step S203: Determine the animation effect of the target component based on the initial position information and the final position order.

[0056] In this embodiment of the disclosure, the executing entity of the component arrangement method is, for example, Figure 1 The server 103 shown determines the animation effect of the target component based on the order of the initial position of the target component obtained in step S201 and the final position of the target component obtained in step S202.

[0057] For example, the execution entity can determine the final position information of the target component based on the final position order of the target component, and determine its animation effect based on the initial position information and the final position information of the target component.

[0058] The animation effect of the target component can be any type of pre-set animation effect, such as any type of animation effect including translation, flashing, highlighting or color-changing, translation or flashing + scaling, etc.

[0059] Step S204: Update the current display state based on the arrangement operation and animation effect.

[0060] In this embodiment of the disclosure, the executing entity of the component arrangement method is, for example, Figure 1 The server 103 shown updates the current display state based on the arrangement operation obtained in step S202 and the animation effect determined in step S203.

[0061] The aforementioned execution entity presents the animation effect determined in step S203 to realize the execution result of the arrangement operation, and updates the current display state of the page and the components in the page, displaying the display state of each component in the page after the above arrangement operation is performed.

[0062] The component arrangement method provided in this disclosure involves the executing entity initializing the position of the target component on the page, obtaining the initial position information of the target component before the arrangement operation, and upon receiving the arrangement operation for the target component, maintaining the current display state and obtaining the final position order of the target component after the arrangement operation. Then, the animation effect is determined based on the final position order and the initial position information, and the current display state is updated based on the arrangement operation and the animation effect. In this solution, the executing entity does not need to repeatedly calculate the size of the target component before and after the arrangement operation; it only needs to determine its animation effect according to its initial position information and final position order. This effectively reduces the calculation process, saves computing power, and thus saves costs.

[0063] Figure 3 A flow 300 of one embodiment of the component arrangement method according to the present disclosure is shown, with reference to Figure 3 As shown in this embodiment, the component arrangement method includes the following steps:

[0064] Step S301: Obtain the initial position information of the target component in the current display state.

[0065] In step S302, in response to receiving the arrangement operation for the target component, the current display state is maintained, and the final position order of the target component after the arrangement operation is obtained.

[0066] In this embodiment of the disclosure, the executing entity of the component arrangement method is, for example, Figure 1 The server 103 shown executes the above steps S301-S302 in sequence. Steps S301-S302 are basically the same as steps S201-S202 in the previous embodiment. For the specific implementation, please refer to the above description of steps S201-S202, which will not be repeated here.

[0067] Step S303: Determine the final state position information of the target component according to the final state position sequence.

[0068] In this embodiment of the disclosure, the executing entity of the component arrangement method is, for example, Figure 1 The server 103 shown determines the final state position information of the target components according to the final state position order of the target components obtained in step S302.

[0069] In some optional implementations of the embodiments of this disclosure, determining the final state position information of the target component according to the final state position order includes: determining the predecessor component of the target component in the final state position order according to the final state position order; obtaining the specification information of the predecessor component; and determining the final state position information of the target component according to the specification information of the predecessor component.

[0070] The preceding components are all components on this page that are located before the target component according to the final state position order.

[0071] Based on the final state position order of the target component, the executing entity can determine the preceding component in that final state position order. For example, if the target component is in the 4th position in the final state position order, the preceding component in the 3 positions above the target component can be determined in that final state position order.

[0072] After identifying the preceding components of the target component, the executing entity obtains the specification information of each preceding component, and then determines the final state position information of the target component based on the specification information of each preceding component.

[0073] For example, based on the specifications of each front-end component, the required space size after the front-end components are arranged in sequence can be determined, and then the position information of the target component can be determined based on the required space size of each front-end component.

[0074] In this scheme, the preceding components of the target component are determined according to the final state position order. The space requirements of the preceding components are determined by their specifications, thereby determining the final state position information of the target component. This can effectively improve the accuracy and reliability of the final state position information of the target component. At the same time, this scheme does not require calculating the size of each component, but only needs to determine its final state position order and the specifications of the preceding components, which can save computing power.

[0075] It should be noted that in the component arrangement method of this disclosure embodiment, after determining the final state position information of the target component, the final state position information is stored and used as the initial position information before the next arrangement operation, which can improve the reuse rate of information and code and further save computing power.

[0076] Step S304: Determine the position offset of the target component based on the initial position information and the final position information.

[0077] In this embodiment of the disclosure, the executing entity of the component arrangement method is, for example, Figure 1 The server 103 shown can determine the position offset of the target component based on the initial position information of the target component obtained in step S301 and the final position information determined in step S303.

[0078] For example, the position offset of the target component is the difference between its final position and its initial position. For instance, it can be the difference between the final position coordinates and the initial position coordinates of the target component.

[0079] In some optional implementations of the embodiments of this disclosure, the initial position information includes the initial coordinate information of a preset point on the target component, and the final position information includes the final coordinate information of the preset point on the target component. The preset point on the target component can be an edge or corner position of the target component; for example, it can be any position such as the upper left corner, lower left corner, midpoint of the bottom edge, or midpoint of the left side edge of the target component, etc., without limitation. It should be noted that the preset point in the initial position information of the target component and the preset point in its final position information are the same point to ensure the accuracy of its position offset calculation. For example, if its initial position information is the initial coordinate information of the upper left corner of the target component, then its final position information is the final coordinate information of the upper left corner of the target component.

[0080] In this implementation, the position offset of the target component is determined based on the initial position information and the final position information, including: determining the coordinate offset of the preset point on the target component based on the initial coordinate information and the final coordinate information of the preset point on the target component; and determining the coordinate offset of the preset point on the target component as the position offset of the target component.

[0081] The aforementioned execution entity calculates the difference between the final coordinate information and the initial coordinate information of the preset point on the target component based on the initial coordinate information and the final coordinate information of the preset point. This difference yields the coordinate offset of the preset point on the target component, which is the position offset of the target component.

[0082] In this embodiment, the executing entity calculates the coordinate offset of a preset point on the target component as the position offset of the target component. By using the preset point on the target component as a reference, the calculation of the position offset of the target component can be fast and accurate.

[0083] Step S305: Determine the animation effect of the target component based on the position offset.

[0084] In this embodiment of the disclosure, the executing entity of the component arrangement method is, for example, Figure 1 The server 103 shown determines the animation effect of the target component based on the position offset of the target component determined in step S304.

[0085] The animation effect of the target component can be any of the preset types of animation effects, such as translation, flashing, highlighting, scaling, etc., without any limitation.

[0086] In some optional implementations of the embodiments of this disclosure, determining the animation effect of the target component based on the position offset includes: in response to the position offset being greater than 0, obtaining the animation duration and animation type of the target component; determining the animation trajectory of the target component based on the position offset and the animation duration; and determining the animation effect based on the animation trajectory and the animation type.

[0087] When the aforementioned execution entity determines that the position offset of the target component is greater than 0, i.e., the position of the target component has changed, it then obtains the animation duration and animation type of the target component. The animation duration and animation type of the target component are both preset. For example, they can be set according to the type of arrangement operation, or according to the type or specifications of the target component. For instance, for an insertion operation, the animation type can be set to flash or zoom, and the animation duration can be set to 0.2–2 seconds; for a deletion operation, the animation type can be set to blur (visibility changes from 100% to 0%), and the animation duration can be set to 0.1–1 seconds; for a movement operation, the animation type can be set to translation or translation + zoom, and the animation duration can be set to 0.5–3 seconds. Furthermore, for text-type target components, the animation type can include color-changing flashing or highlighting, and the animation duration can be set to 0.1–3 seconds; for image-type target components, the animation type can include scaling or color-changing, and the animation duration can be set to 0.1–3 seconds, and so on.

[0088] The aforementioned execution entity determines the animation trajectory of the target component based on its animation duration and animation type. For example, if the animation type is translation, its animation trajectory can be determined as a straight line between the initial and final positions of the target component, or a curve of a preset type, based on its animation duration.

[0089] After determining the animation trajectory of the target component, the executing entity determines the keyframes of the animation based on the animation trajectory and the animation type, thereby determining the animation effect of the target component. The process of determining the keyframes based on the animation trajectory and animation type can refer to corresponding processes in related technologies; this solution does not impose further limitations and will not be elaborated upon here.

[0090] In this solution, the execution component determines the animation duration and type based on the position offset of the target component, and then determines the animation trajectory and animation effect accordingly. It can determine the corresponding animation effect for the target component for different position offsets, which can meet the diverse needs of animation effects for different arrangement operation types.

[0091] In some optional implementations of the embodiments of this disclosure, in response to the target component's position offset being 0, the execution subject determines that the position of the target component does not change, and at this time it can be determined that the target component does not perform animation effects.

[0092] In some optional implementations of the embodiments of this disclosure, a corresponding animation effect can be preset for a position offset of 0. For example, a highlighting animation effect can be performed at the original position. Exemplarily, in response to the target component's position offset being 0, the execution subject determines that the target component performs any preset highlighting animation effect such as scaling, flashing, or color marking.

[0093] When the position offset of the target component is 0, the animation trajectory of the target component can be 0, meaning it will remain in its original position without changing position, or it can be a closed loop animation trajectory. For example, the animation trajectory can be a ring (circle, ellipse, or other closed loop shape where the start and end points coincide) or a straight line or curve that travels back and forth along the original path, as long as the start and end points coincide. In other words, even if the position offset of the target component is 0, its animation effect can still be determined as an animation effect of moving its position during translation or other animation processes.

[0094] Step S306: Update the current display state based on the arrangement operation and animation effect.

[0095] In this embodiment of the disclosure, the executing entity of the component arrangement method is, for example, Figure 1 The server 103 shown executes step S306 as described above. Step S306 is basically the same as step S206 in the previous embodiment. For the specific implementation and effect, please refer to the description of step S206 above, which will not be repeated here.

[0096] In the component arrangement method provided in this disclosure, the executing entity determines the final state position information of the target component based on the final state position order, and then determines the position offset of the target component based on the final state position information and the initial position information, thereby determining the animation effect of the target component. This method of directly determining the final state position information based on the final state position order can directly obtain the final state position information of the target component without calculating the size of each component each time, effectively saving computing power; furthermore, determining its position offset based on the initial position information and final state position information of the target component can improve the accuracy of its position offset; and determining the animation effect based on this can improve the accuracy and reliability of the animation effect.

[0097] Figure 4 A flow 400 is shown as an embodiment of the component arrangement method according to this disclosure, with reference to Figure 4 As shown in this embodiment, the component arrangement method includes the following steps:

[0098] Step S401: Obtain the initial position information of the target component in the current display state.

[0099] In step S402, in response to receiving the arrangement operation for the target component, the current display state is maintained, and the final position order of the target component after the arrangement operation is obtained.

[0100] In this embodiment of the disclosure, the executing entity of the component arrangement method is, for example, Figure 1 The server 103 shown executes the above steps S401-S402 in sequence. Steps S401-S402 are basically the same as steps S201-S202 in the previous embodiment. For the specific implementation, please refer to the above description of steps S201-S202, which will not be repeated here.

[0101] Step S403: Determine the animation effect of the target component based on the initial position information and the final position order.

[0102] In this embodiment of the disclosure, the executing entity of the component arrangement method is, for example, Figure 1 The server 103 shown executes step S403 as described above. Step S403 is the same as described above. Figure 2 Step S203 of the illustrated embodiment or Figure 3 The steps S303-S305 of the illustrated embodiment are basically the same. For specific implementation methods, please refer to the above description of steps S203 or S303-S305, which will not be repeated here.

[0103] Step S404: Obtain the initial position order of the target components in the current display state.

[0104] In this embodiment of the disclosure, the executing entity of the component arrangement method is, for example, Figure 1 The server 103 shown obtains the initial position order of the target components in the current display state. The current display state is the same as the display state before the arrangement operation on the target components was performed.

[0105] Step S405: Determine the number of components whose positions have changed based on the initial position order and the final position order.

[0106] In this embodiment of the disclosure, the executing entity of the component arrangement method is, for example, Figure 1 The server 103 shown determines the number of components whose positions changed before and after the arrangement operation based on the initial position order obtained in step S404 and the final position order obtained in step S402.

[0107] In some optional implementations of the embodiments of this disclosure, determining the number of components whose position order has changed based on the initial position order and the final position order includes: determining the first and last components whose position order has changed based on the initial position order and the final position order; and determining the number of components from the first and last components to the last component as the number of components whose position has changed.

[0108] It should be noted that since the specifications and sizes of the components are not necessarily the same, the position of a component whose positional order has changed may not necessarily change, while the position of a component whose positional order has not changed may not necessarily remain unchanged.

[0109] For example, for components A1, A2, A3, A4, and A5 arranged in sequence, the sum of the space occupied by components A1 and A2 is the same as the space occupied by component A5. If the final position order after the arrangement operation is components A5, A3, A4, A1, and A2, then the movement requirements of components A5 and components A1 and A2 can be met without moving components A3 and A4. In this case, the position order of components A3 and A4 changes, both moving forward one position, but their component positions do not change.

[0110] For example, consider components B1, B2, B3, B4, and B5 arranged in sequence, where each component has a different size, for example, the size of the components increases sequentially. When the positions of components B2 and B4 are swapped, the original position of component B2 will inevitably not meet the space requirements of component B4, while the original position of component B4 is larger than the space requirements of component B2. Therefore, the position of component B3 needs to be moved towards component B5 to meet the swapping requirements of components B2 and B4. At this time, the order of component B3's positions remains unchanged, but its position changes.

[0111] However, accurately calculating whether the position of each component has changed would undoubtedly increase a lot of unnecessary calculations, resulting in a waste of computing power.

[0112] Therefore, in this scheme, the executing entity determines only the first and last components whose position order has changed based on the initial position order and the final position order. For example, B4 after the move is the first component and B2 after the move is the last component. For the component B1 before the first component and the component B5 after the last component, it is determined that their positions have not changed. Therefore, there is no need to re-determine the position information of components B1 and B5, thus saving computing power.

[0113] Therefore, the number of components whose positions have changed as determined by this scheme is the total number of all possible components whose positions may change, while minimizing computational resources. This ensures that all components whose positions have changed are included, preventing any components whose positions have changed from being ignored. It effectively guarantees that all target components whose positions have changed are included in the animation effect, saving computational resources and preventing components whose positions have changed from being missed, which would affect the accuracy of the arrangement operation.

[0114] In step S406, in response to the fact that the number of components whose positions have changed is greater than 1, an animation effect is presented according to the arrangement operation and the preset execution rules, and the current display state is updated. The preset execution rules include execution timing rules.

[0115] In this embodiment of the disclosure, the executing entity of the component arrangement method is, for example, Figure 1 The server 103 shown responds to a number of components whose positions have changed by more than one by displaying animation effects and updating the current display state of the page and the components on the page according to the arrangement operation and preset execution rules.

[0116] If the number of components whose positions change is 1, for example, adding or deleting a component at the end of the initial position order, the position order and position of other components will not be affected. Therefore, only the corresponding animation effect needs to be applied to the added or deleted component.

[0117] If the number of components whose positions change in a permutation operation is greater than one, for example, inserting a new component in the middle or first position of the initial position sequence, or swapping the positions of at least two components in the initial position sequence, then multiple components will have their positions changed, and thus these multiple components will have corresponding animation effects. How to ensure that the animation effects of multiple components are effectively presented is the problem that this solution aims to solve.

[0118] In this scheme, the preset execution rules include execution timing rules. For example, simultaneous execution can be set, or the execution can be set to be performed according to the initial position order with a preset time interval, in ascending or descending order, or according to the final position order with a preset time interval, in ascending or descending order.

[0119] For example, among components initially positioned in the order C1, C2, C3, C4, and C5, if the arrangement operation is an insertion operation, such as inserting C0 between C2 and C3, resulting in a final position order of C1, C2, C0, C3, C4, and C5, then four components will have their positions changed, including C0, C3, C4, and C5. If the default execution rule is to execute in reverse order of the final position with a time interval of 20ms, then the animation effect will be presented in the order of C5, C4, C3, and C0, with a 20ms time interval between the start of the animation effect for each adjacent component.

[0120] The component arrangement method provided in this disclosure determines the number of components whose positions have changed based on the initial position order and the final position order. This method can effectively ensure that all target components whose positions have changed are animated while saving computing power, avoiding the omission of components whose positions have changed, which would affect the accuracy of the arrangement operation and thus ensuring the accuracy of the updated current display state. Furthermore, it ensures that the animation effects of multiple components are presented in an orderly manner according to preset execution rules, thereby ensuring the orderliness and aesthetics of the presented animation effects and improving the user experience.

[0121] As an implementation of the methods shown in the above figures, Figure 5 An embodiment of a component arrangement apparatus according to the present disclosure is shown. This component arrangement apparatus is related to... Figure 2 Corresponding to the method embodiments shown, this device can be applied to various electronic devices.

[0122] Reference Figure 5 As shown, the component arrangement device 500 provided in this embodiment includes: a first acquisition module 501, a second acquisition module 502, a determination module 503, and an update module 504. The first acquisition module 501 is configured to acquire the initial position information of the target component in the current display state; the second acquisition module 502 is configured to, in response to receiving an arrangement operation on the target component, maintain the current display state and acquire the final position order of the target component after the arrangement operation; the determination module 503 is configured to determine the animation effect of the target component based on the initial position information and the final position order; and the update module 504 is configured to update the current display state based on the arrangement operation and the animation effect.

[0123] The specific processing of the first acquisition module 501, the second acquisition module 502, the determination module 503, and the update module 504 in the component arrangement device 500 of this disclosure, and the resulting technical effects, can be found in the following references: Figure 2 The relevant descriptions of steps S201-S204 in the corresponding embodiments will not be repeated here.

[0124] In the component arrangement apparatus 500 provided in this embodiment, the determining module 503 includes: a first determining unit, a second determining unit, and a third determining unit. The first determining unit is configured to determine the final position information of the target component based on the final position order; the second determining unit is configured to determine the position offset of the target component based on the initial position information and the final position information; and the third determining unit is configured to determine the animation effect of the target component based on the position offset.

[0125] In this embodiment, the specific processing of the first determining unit, the second determining unit, and the third determining unit, and the resulting technical effects, can be referred to respectively. Figure 3 The relevant descriptions of steps S303-S305 in the corresponding embodiments will not be repeated here.

[0126] In some optional implementations of the embodiments of this disclosure, the first determining unit is further configured to: determine the preceding component of the target component in the final state position order according to the final state position order; obtain the specification information of the preceding component; and determine the final state position information of the target component according to the specification information of the preceding component.

[0127] In some optional implementations of the embodiments of this disclosure, the initial position information includes the initial coordinate information of a preset point on the target component, and the final position information includes the final coordinate information of the preset point on the target component; and the second determining unit is further configured to: determine the coordinate offset of the preset point on the target component based on the initial coordinate information and the final coordinate information of the preset point on the target component; and determine the coordinate offset of the preset point on the target component as the position offset of the target component.

[0128] In some optional implementations of the embodiments of this disclosure, the third determining unit is further configured to: in response to a position offset greater than 0, obtain the animation duration and animation type of the target component; determine the animation trajectory of the target component based on the position offset and the animation duration; and determine the animation effect based on the animation trajectory and the animation type.

[0129] In the component arrangement apparatus 500 provided in this embodiment, the update module includes: an acquisition unit, a fourth determination unit, and an update unit. The acquisition unit is configured to acquire the initial position order of the target components in the current display state; the fourth determination unit is configured to determine the number of components whose positions have changed based on the initial position order and the final position order; the update unit is configured to, in response to a number of components whose positions have changed being greater than 1, present an animation effect and update the current display state according to the arrangement operation and a preset execution rule, wherein the preset execution rule includes an execution timing rule.

[0130] In this embodiment, the specific processing of the acquisition unit, the fourth determination unit, and the update unit, and the resulting technical effects, can be found by referring to [the documentation / reference]. Figure 4 The relevant descriptions of steps S404-S406 in the corresponding embodiments will not be repeated here.

[0131] In some optional implementations of the embodiments of this disclosure, the fourth determining unit is further configured to: determine the first and last components whose position order has changed according to the initial position order and the final position order; and determine the number of components from the first and last components to the last component as the number of components whose position has changed.

[0132] According to embodiments of this disclosure, this disclosure also provides an electronic device, a non-transitory computer-readable storage medium storing computer instructions, and a computer program product.

[0133] The electronic device includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform the above-described component arrangement method.

[0134] In some embodiments, a non-transitory computer-readable storage medium storing computer instructions is provided, the computer instructions being used to cause a computer to perform the above-described component arrangement method.

[0135] In some embodiments, a computer program product includes a computer program that, when executed by a processor, implements the above-described component arrangement method.

[0136] Figure 6 A schematic block diagram of an example electronic device 600 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0137] like Figure 6As shown, device 600 includes a computing unit 601, which can perform various appropriate actions and processes based on a computer program stored in read-only memory (ROM) 602 or a computer program loaded from storage unit 608 into random access memory (RAM) 603. RAM 603 may also store various programs and data required for the operation of device 600. The computing unit 601, ROM 602, and RAM 603 are interconnected via bus 604. Input / output (I / O) interface 605 is also connected to bus 604.

[0138] Multiple components in device 600 are connected to I / O interface 605, including: input unit 606, such as keyboard, mouse, etc.; output unit 607, such as various types of monitors, speakers, etc.; storage unit 608, such as disk, optical disk, etc.; and communication unit 609, such as network card, modem, wireless transceiver, etc. Communication unit 609 allows device 600 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0139] The computing unit 601 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 601 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 601 performs the various methods and processes described above, such as methods for generating backbone networks or image processing methods. For example, in some embodiments, the component arrangement method may be implemented as a computer software program tangibly contained in a machine-readable medium, such as storage unit 608. In some embodiments, part or all of the computer program may be loaded and / or installed on device 600 via ROM 602 and / or communication unit 609. When the computer program is loaded into RAM 603 and executed by the computing unit 601, one or more steps of the methods for generating backbone networks or image processing methods described above may be performed. Alternatively, in other embodiments, the computing unit 601 may be configured to perform a component arrangement method by any other suitable means (e.g., by means of firmware).

[0140] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), payload-programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0141] The program code used to implement the methods of this disclosure may be written in any combination of one or more programming languages. This program code may be provided to a processor or controller of a general-purpose computer, special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor or controller, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a machine, partially on a machine, as a standalone software package partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0142] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0143] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device for displaying information to the user (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor); and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the computer. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0144] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as a data server), or computing systems that include middleware components (e.g., an application server), or computing systems that include frontend components (e.g., a user computer with a graphical user interface or web browser through which a user can interact with embodiments of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., a communication network). Examples of communication networks include local area networks (LANs), wide area networks (WANs), and the Internet.

[0145] Computer systems can include clients and servers. Clients and servers are generally located far apart and typically interact via communication networks. Client-server relationships are created by computer programs running on the respective computers and having a client-server relationship with each other. Servers can be cloud servers, servers in distributed systems, or servers incorporating blockchain technology.

[0146] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution disclosed in this disclosure can be achieved, and this is not limited herein.

[0147] The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A method for arranging components, comprising: Get the initial position information of the target component in the current display state; In response to receiving an arrangement operation on the target component, the current display state is maintained, and the final position order of the target component after the arrangement operation is obtained; Based on the final state position order, determine the preceding components of the target component in the final state position order, obtain the specification information of the preceding components, determine the space requirements of the preceding components based on the specification information, and determine the final state position information of the target component based on the space requirements. The preceding components are all components that are located before the target component according to the final state position order. Based on the initial position information and the final position information, the animation effect of the target component is determined; Obtain the initial position order of the target components in the current display state; determine the first and last components whose position order has changed based on the initial position order and the final position order; determine the number of components from the first to the last component as the number of components whose position has changed. In response to the fact that the number of components whose positions have changed is greater than 1, the animation effect is presented according to the arrangement operation and the preset execution rules, and the current display state is updated, wherein the preset execution rules include execution timing rules.

2. The component arrangement method according to claim 1, wherein, Determining the animation effect of the target component based on the initial position information and the final position information includes: Based on the final state position sequence, determine the final state position information of the target component; Based on the initial position information and the final position information, the position offset of the target component is determined; The animation effect of the target component is determined based on the position offset.

3. The component arrangement method according to claim 2, wherein, The initial position information includes the initial coordinate information of the preset point on the target component, and the final position information includes the final coordinate information of the preset point on the target component. as well as Determining the position offset of the target component based on the initial position information and the final position information includes: Based on the initial coordinate information and the final coordinate information of the preset points on the target component, determine the coordinate offset of the preset points on the target component. The coordinate offset of the preset point on the target component is determined as the position offset of the target component.

4. The component arrangement method according to claim 2, wherein, Determining the animation effect of the target component based on the position offset includes: In response to the position offset being greater than 0, the animation duration and animation type of the target component are obtained; The animation trajectory of the target component is determined based on the position offset and the animation duration. The animation effect is determined based on the animation trajectory and the animation type.

5. A component arrangement device, comprising: The first acquisition module is configured to acquire the initial position information of the target component in the current display state; The second acquisition module is configured to, in response to receiving an arrangement operation on the target component, maintain the current display state and acquire the final position order of the target component after the arrangement operation; The second acquisition module is configured to determine the preceding component of the target component in the final state position order according to the final state position order, acquire the specification information of the preceding component, determine the space requirement of the preceding component according to the specification information, and determine the final state position information of the target component according to the space requirement. The preceding component is all components that are located before the target component according to the final state position order. The determination module is configured to determine the animation effect of the target component based on the initial position information and the final position information; The update module is configured to obtain the initial position order of the target components in the current display state; determine the first and last components whose position order has changed based on the initial position order and the final position order; and determine the number of components from the first to the last component as the number of components whose position has changed. In response to the fact that the number of components whose positions have changed is greater than 1, the animation effect is presented according to the arrangement operation and the preset execution rules, and the current display state is updated, wherein the preset execution rules include execution timing rules.

6. The component arrangement device according to claim 5, wherein, The determining module includes: The first determining unit is configured to determine the final state position information of the target component according to the final state position order; The second determining unit is configured to determine the position offset of the target component based on the initial position information and the final position information; The third determining unit is configured to determine the animation effect of the target component based on the position offset.

7. The component arrangement device according to claim 6, wherein, The initial position information includes the initial coordinate information of a preset point on the target component, and the final position information includes the final coordinate information of the preset point on the target component; and the second determining unit is configured to: Based on the initial coordinate information and the final coordinate information of the preset points on the target component, determine the coordinate offset of the preset points on the target component. The coordinate offset of the preset point on the target component is determined as the position offset of the target component.

8. The component arrangement device according to claim 6, wherein, The third determining unit is configured as follows: In response to the position offset being greater than 0, the animation duration and animation type of the target component are obtained; The animation trajectory of the target component is determined based on the position offset and the animation duration. The animation effect is determined based on the animation trajectory and the animation type.

9. An electronic device, comprising: At least one processor; as well as A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-4.

10. A non-transitory computer-readable storage medium storing computer instructions for causing the computer to perform the method of any one of claims 1-4.

11. A computer program product comprising a computer program that, when executed by a processor, implements the method according to any one of claims 1-4.

Images