Client card rendering method and device, electronic equipment and storage medium

Abstract

The invention provides a client card rendering method and device, electronic equipment and a storage medium, and the method comprises the steps: responding to an effective hovering operation for any card in a card list, and generating a cloned card of the card; and constructing a deformation isolation layer at the position of the card, performing deformation operation on the clone card at the deformation isolation layer, and then rendering the clone card. The clone card is generated only when the hovering event is triggered, and compared with a deformation template scheme of preloading all cards in the prior art, the memory occupancy rate can be reduced. Besides, a deformation isolation layer is constructed at the position where the card is located, the deformation isolation layer serves as a logic layer and can be independent of a conventional layout system of a desktop client graphic frame, and by executing deformation operation on the deformation isolation layer, layout recalculation of the whole card list cannot be caused, so that the problem of layout out-of-order is avoided.

Description

Technical Field

[0001] The present invention relates to the technical field of front - end design, and more particularly, to a client - side card rendering method, apparatus, electronic device, and storage medium. Background Art

[0002] In order to meet the requirements of users for visual experience and interaction convenience, it is possible to achieve the effect of displaying different page contents in the form of a card list based on the desktop client graphics framework technology. Each card serves as a list element and can flexibly carry elements such as text, video, pictures, buttons, etc. These card - type list elements can be arranged on the page in different layout ways, and users can interact with this content through simple and intuitive operations.

[0003] However, although the card list display method implemented based on the desktop client graphics framework has significant advantages in visual effects and interactivity, it also has some defects. In order to enhance the visual focus, when a deformation operation is performed on a certain card, it will trigger the layout recalculation of the entire card list, resulting in the displacement of the positions of other cards, and even the phenomenon of stacking and misalignment. In addition, the prior art also pre - reserves resources related to the deformation operation in memory for each card, even if the card has no deformation requirement, which significantly increases the resource occupancy rate. Summary of the Invention

[0004] In view of this, the purpose of the present invention is to provide a client - side card rendering method, apparatus, electronic device, and storage medium, which are used to avoid the layout disorder phenomenon when a deformation operation is performed on a certain card, and at the same time can reduce the resource occupancy rate. To achieve the above purpose, the technical solutions adopted in the embodiments of the present invention are as follows:

[0005] In a first aspect, the present invention provides a client - side card rendering method, the method includes: responding to a valid hover operation on any card in the card list, generating a cloned card of the card; constructing a deformation isolation layer at the position where the card is located, and rendering the cloned card after performing a deformation operation on the cloned card in the deformation isolation layer.

[0006] In an optional implementation manner, the method further includes: responding to a valid hover end operation on the card, performing an inverse operation corresponding to the deformation operation on the cloned card in the deformation isolation layer, and then rendering the cloned card; canceling the deformation isolation layer and caching the cloned card.

[0007] In an alternative embodiment, a deformation isolation layer is constructed at the position where the card is located, and after performing a deformation operation on the cloned card in the deformation isolation layer, the cloned card is rendered, including: obtaining a pre-created interface element modifier; binding a predefined deformation special effect to the interface element modifier to obtain the deformation isolation layer; after binding the cloned card to the interface element modifier, applying the deformation special effect to the cloned card.

[0008] In an alternative embodiment, canceling the deformation isolation layer includes: releasing the binding relationship between the interface element modifier and the cloned card.

[0009] In an alternative embodiment, in response to a valid hover operation on any card in the card list, generating a cloned card of the card includes: when a hover operation is detected, determining whether the trigger duration of the hover operation exceeds a preset event trigger duration; if so, establishing a correspondence between the card and a preset empty card; generating the cloned card according to the data corresponding to the card and the empty card.

[0010] In an alternative embodiment, generating the cloned card according to the data corresponding to the card and the empty card includes: obtaining the visual tree corresponding to the card; wherein, the visual tree refers to the hierarchical structure of the elements within the card; performing a deep clone on the visual tree to generate a mirror instance corresponding to the card; wherein, the mirror instance is used to inherit the attributes and styles corresponding to the card; copying the mirror instance to the empty card to obtain the cloned card.

[0011] In an alternative embodiment, the method further includes: pre-configuring a hover event listener and an event trigger duration for each card in the card list.

[0012] In a second aspect, the present invention provides a client card rendering device, including: a cloning module and a rendering module; the cloning module is configured to generate a cloned card of a card in response to a valid hover operation on any card in the card list; the rendering module is further configured to construct a deformation isolation layer at the position where the card is located, and render the cloned card after performing a deformation operation on the cloned card in the deformation isolation layer.

[0013] In a third aspect, the present invention provides an electronic device, including a processor and a memory, the memory stores machine-executable instructions that can be executed by the processor, and the processor can execute the machine-executable instructions to implement the client card rendering method according to any one of the foregoing embodiments.

[0014] Fourthly, the present invention provides a storage medium, on which a computer program is stored. When the computer program is executed by a processor, it implements the client card rendering method according to any one of the foregoing embodiments.

[0015] The client card rendering method, device, electronic device and storage medium provided by the present invention, the method includes: responding to a valid hover operation on any card in the card list, generating a cloned card of the card; constructing a deformation isolation layer at the position where the card is located, and rendering the cloned card after performing a deformation operation on the cloned card in the deformation isolation layer; in the embodiments of the present invention, a cloned card is generated only when a hover event is triggered. Compared with the prior art that preloads deformation templates of all cards, the memory occupancy rate can be reduced. Further, the present invention constructs a deformation isolation layer at the position where the card is located. The deformation isolation layer is an independent logical layer, independent of the conventional layout system of the desktop client graphics framework. By performing a deformation operation in the deformation isolation layer, the layout recalculation of the entire card list will not be caused, thereby avoiding the problem of layout disorder.

[0016] To make the above objects, features and advantages of the present invention more obvious and understandable, the following specifically enumerates preferred embodiments and, in conjunction with the accompanying drawings, makes a detailed description as follows. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] To more clearly illustrate the technical solutions of the embodiments of the present invention, the following will briefly introduce the drawings required to be used in the embodiments. It should be understood that the following drawings only show some embodiments of the present invention, and therefore should not be regarded as limiting the scope. For those of ordinary skill in the art, other related drawings can be obtained based on these drawings without creative efforts.

[0018] Figure 1A Shows the home page interface of a live client;

[0019] Figure 1B Presents a schematic diagram of card magnification on a client;

[0020] Figure 2 Is a schematic flowchart of the client card rendering method provided by the embodiments of the present invention;

[0021] Figure 3 Is a schematic diagram of the effect of the client card rendering method provided by the embodiments of the present invention;

[0022] Figure 4 Is another schematic diagram of the effect of the client card rendering method provided by the embodiments of the present invention;

[0023] Figure 5 Is another flowchart of the client card rendering method provided by the embodiments of the present invention;

[0024] Figure 6 It is a functional module diagram of the client card rendering device provided by an embodiment of the present invention;

[0025] Figure 7 It is a structural block diagram of an electronic device provided by an embodiment of the present invention. Specific embodiments

[0026] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. Usually, the components of the embodiments of the present invention described and shown in the drawings here can be arranged and designed in various different configurations.

[0027] Therefore, the following detailed description of the embodiments of the present invention provided in the drawings is not intended to limit the scope of the claimed present invention, but merely represents selected embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative efforts belong to the scope of protection of the present invention.

[0028] It should be noted that relational terms such as "first" and "second" are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variant thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements, but also includes other elements not expressly listed, or further includes elements inherent to such process, method, article or device. Without further limitation, an element defined by the statement "including a..." does not exclude the presence of additional identical elements in the process, method, article or device including the element.

[0029] Currently, in the home page design of many clients, the form of a card list is widely used to display a rich variety of information, such as news, function entrances, recommended content, etc. This layout can quickly present key information to users. By performing deformation operations on a specific card, such as zooming in, deforming, adding animation effects, etc., the attention of users can be instantly attracted, guiding them to focus on the content carried by the card, thereby enhancing the attention and interest of users in the information.

[0030] In addition, the extended area generated by the deformation operation serves as a dynamic hosting container that can be used to host multimodal commercial components. This means that the extended area can support the hot loading of various types of commercial plugins, such as advertising systems, game co - operation components (mini - games / download entrances), etc., thereby effectively improving the user's gaze conversion rate and enhancing the user stickiness of the platform.

[0031] For example, Figure 1A shows the home page interface of a live - streaming client. In this interface, there are two cards, Card 1 and Card 2. The content presented on each card can include, but is not limited to: video introduction, like count, popularity value, UP - host information, etc., providing users with a comprehensive overview of live - streaming information. Further, Figure 1B presents a schematic diagram of card magnification on the client. When the magnification operation is performed on Card 2, the size of Card 2 is in the enlarged state, which can make the relevant information of the video more prominent. At the same time, continue to refer to Figure 1B , within the extended area of Card 2, hot - plugins and their corresponding interaction controls are shown. The hot - plugins can be live - streaming room entrances, advertising systems, etc. The interaction controls such as the "open" button facilitate users to enter the interface related to the hot - plugin with one key, further enhancing the interaction convenience for users.

[0032] The inventors found during the research process that: Currently, card rendering is usually based on virtualization container generation strategies for project controls and their derived - class controls, such as list boxes, list views, etc. That is, when there are a large number of cards in the list, to improve performance, in the desktop client graphics framework, the system does not generate all the card controls at once. It only generates the list - item controls within the currently visible range, and when the user scrolls the list, these controls are dynamically created and destroyed, so that each card is displayed on the page in the form of a list.

[0033] However, when an asymmetric deformation (such as a local magnification operation) is performed on a certain card, due to the implementation of the card - list control in the current desktop client graphics framework where the card layout follows a unified size - constraint mechanism, the size change of a single card will trigger the recalculation of the layout of other cards on the entire project panel. This process not only causes the position offset of other cards on the page (such as graphic stacking misalignment or scrolling - container positioning inaccuracy), but also leads to cascading rendering overhead, seriously reducing the interface interaction fluency.

[0034] In addition, the existing technical solutions will preset the visualization tree in the deformed state for each list item, which results in the continuous residence of UI component resources of unactivated cards (i.e., cards with no visual - change requirements) in memory, significantly increasing the GPU video - memory occupancy rate, and generating an accumulation of invalid bitmap caches in the data - virtualization scenario, violating the best - practice principle of dynamic resource loading on demand.

[0035] To solve the above problems, an embodiment of the present invention provides a method for rendering client cards, which can stabilize the layout stability of the entire card page during the visual change of a single card.

[0036] Please refer to Figure 2 , Figure 2 which is a schematic flowchart of the method for rendering client cards provided by an embodiment of the present invention. The execution subject of this method can be, but is not limited to, a server or a PC. The PC can be, but is not limited to, various desktop computers, laptop computers, and tablet computers. Hereinafter, taking the PC as the execution subject, steps S201 to S202 are introduced as follows:

[0037] S201: Respond to a valid hover operation on any card in the card list and generate a cloned card of the card.

[0038] S202: Construct a deformation isolation layer at the position of the card, and perform a deformation operation on the cloned card in the deformation isolation layer and then render the cloned card.

[0039] In the solution shown in steps S201 to S202 provided by the embodiment of the present invention, a cloned card of the card is generated in response to a valid hover operation on any card in the card list, which means that the embodiment of the present invention generates a cloned card only when the hover event is triggered. Compared with the prior art of preloading the deformation templates of all cards, the memory occupancy rate can be reduced. Further, a deformation isolation layer is constructed at the position of the card, and the cloned card is deformed and rendered in the deformation isolation layer, so that the cloned card after the deformation operation can be presented at the position of the card. The deformation isolation layer is an independent logical layer, independent of the conventional layout system of the desktop client graphics framework. By performing the deformation operation in the deformation isolation layer, the layout of the entire card list will not be recalculated, thus avoiding the problem of layout disorder.

[0040] As Figure 3 shown, Figure 3 is an effect schematic diagram of the method for rendering client cards provided by an embodiment of the present invention. It can be seen from Figure 3 that when the mouse pointer (cursor) hovers over card 2 and the hover operation is valid, then the deformation operation on card 2 is triggered. During the deformation process, the position of card 1 will not shift, avoiding the problem of layout disorder.

[0041] Next, the embodiment of the present invention will introduce the provided card rendering process in detail in combination with relevant drawings.

[0042] In step S201, the PC side can display a card list to the user, and the card list contains multiple cards. Each card can contain various types of content, such as text, images, controls, etc. These contents can involve game videos, news, advertisements, and so on. Among them, the controls are used for user interaction, such as selection, click, drag, etc.

[0043] In the embodiment of the present invention, the card list can be, but is not limited to, arranged in a single row and single column, or can be arranged in a multi - row flow layout, that is, automatically arranged by rows or columns. When the space of a row or a column is not enough to accommodate more child elements, it will automatically wrap to the next row or column, thus forming a multi - row or multi - column layout. This layout method is particularly suitable for dealing with dynamic content or adapting to different screen sizes.

[0044] To implement different layout methods of the cards, the PC side can use an item control as the binding container for the card data, and define the layout method of the cards in the item control (such as list box, list view, etc.) through the item panel template in the desktop client graphics framework. For example, assuming that a multi - row flow layout needs to be implemented, the PC side can configure the item panel template as a flow layout template to implement the multi - row flow layout logic.

[0045] For each card, in order to present various different contents on the page, the data template in the desktop client graphics framework can also be used to define a visual tree structure of the card, describing the appearance and layout of a card. The visual tree refers to the hierarchical structure of the card content presentation components, such as text and images, etc., which provides a data basis for subsequent card cloning.

[0046] In the embodiment of the present invention, during the process of displaying the card list on the PC side, in order to improve performance, only some cards within the visible range of the screen can still be displayed. When the user scrolls the card list, other cards will be dynamically displayed on the page.

[0047] In the card list displayed on the PC side, if it is detected that a certain card has a visual change requirement, that is, the size of the card needs to be enlarged to enhance the visual focus. In step S201, the embodiment of the present invention establishes a hover event detection mechanism for the card to determine whether there is a hover operation on the card. If so, it indicates that the card has a visual change requirement and card cloning can be executed. The card cloning executed only when the hover event is triggered provided by the embodiment of the present invention reduces the memory occupancy rate by at least 67% to 89% compared with the prior art scheme of pre - loading all the deformation templates of the cards.

[0048] The hover operation also refers to the operation of the mouse pointer entering the card. In the embodiments of the present invention, if it is detected that the time when the mouse pointer hovers on the card is very short, it will be regarded as an invalid hover operation, and at this time, there is no need to deform the card. In order to accurately detect an effective hover operation, a mouse pointer enter event listener and a mouse pointer leave event listener can be configured for each card. The mouse pointer enter event is triggered when the mouse pointer enters the boundary of a certain card, and the mouse pointer leave event is triggered when the mouse pointer leaves the boundary of a certain card, which is used to cancel the deformation effect set in the mouse pointer enter event. At the same time, it is also necessary to set the event trigger duration, for example, set it to 10 milliseconds, so as to determine whether the hover operation is effective and avoid possible mouse pointer jitter problems.

[0049] Therefore, for step S201, the following method can be used to determine whether the hover operation is effective: when a hover operation is detected, determine whether the trigger duration of the hover operation exceeds the preset event trigger duration. For example, determine whether the hover state exceeds 10 milliseconds. If so, it is considered an effective hover operation, otherwise it is not an effective hover operation. For the convenience of description, in the subsequent embodiments of the present invention, the card for which an effective hover operation is detected is referred to as the "original card".

[0050] In the embodiments of the present invention, when an effective hover operation is successfully detected, before cloning the card, the position of the original card in the screen coordinate system can also be determined, so as to display the deformed cloned card at the same position, making the initial position of the cloned card completely coincide with that of the original card in the screen coordinate system. This method of using the screen coordinate system to position the cloned element (instead of the logical container coordinate system) can keep the original card in its reference size (actual rendered height and width) unchanged during the deformation process.

[0051] In addition, when an effective hover operation is successfully detected, the PC side can also pre-obtain the rendering boundary parameters of the original card, that is, the width and height actually rendered on the screen of the UI controls contained in the original card. By obtaining these parameters, key size information is provided for the subsequent rendering of the cloned card, ensuring that the cloned card has exactly the same visual effect as the original card during rendering, and avoiding problems such as rendering errors, layout disorders, or visual differences.

[0052] Furthermore, in step S201, after an effective hover operation is detected, a cloned card of the original card can be generated. The embodiments of the present invention can generate a cloned card in the following manner:

[0053] Step a1: Establish a correspondence relationship between the card and a preset empty card;

[0054] In an embodiment of the present invention, only one empty card needs to be established. Whenever a card is activated and needs to be visually changed, a correspondence between the activated card and the empty card can be established. If the visual change requirement for the activated card is canceled, the correspondence can be canceled and the data related to the activated card in the empty card can be released so that the empty card can be used for the next activated card.

[0055] In an optional implementation, the PC side can manage the correspondence between the empty card and the activated card by building a state tracking associator, that is, establishing and releasing the correspondence.

[0056] Step a2: Generate a clone card based on the data corresponding to the card and the empty card.

[0057] In the embodiment of the present invention, the PC has already represented the hierarchical relationship of each UI element in the original card through a visual tree in advance, and maintained data related to the layout and appearance of the original card. Therefore, when generating a cloned card, the embodiment of the present invention can proceed as follows:

[0058] Step b1: Get the visual tree corresponding to the card;

[0059] Step b2: deep clone the visual tree to generate a mirrored instance corresponding to the card; wherein the mirrored instance is used to inherit the properties and styles corresponding to the card;

[0060] Step b3: Copy the mirrored instance to an empty card to obtain a cloned card.

[0061] After the cloned card is generated by the above implementation, the cloned card can be deformed at the location of the original card. In order to avoid layout disorder caused by the deformation operation, the embodiment of the present invention adopts step S202.

[0062] In step S202, the embodiment of the present invention constructs a deformation isolation layer at the location of the original card. This is an independent visual channel that can completely separate the dynamic deformation operation from the main layout system, and then perform deformation operations on the cloned card in the deformation isolation layer. In this way, the deformation requirements for the original card can be met, and layout disorder caused by the deformation operation can be avoided. Therefore, the present invention provides an implementation method of step S202, including steps c1 to c2:

[0063] Step c1: Get the pre-created interface element decorator;

[0064] Step c2: Bind a predefined deformation effect to the interface element modifier to obtain a deformation isolation layer;

[0065] The interface element decorator designed in the embodiments of the present invention can create a visual channel independent of the main layout logic in the graphics rendering system, so as to be used to attach dynamic visual content on existing interface elements without interfering with the layout structure and rendering characteristics of the original elements. Specifically, the implementation process of step c1 is as follows:

[0066] First, initialize the decorator instance and create a global decorator manager. Among them, the global decorator manager is responsible for the life cycle control and resource allocation of all decorator instances. Place a transparent container (decorative layer host container) at the top-level interface (top of the visual tree) of the application. This container is used to store and manage all decorators to ensure that they can be effectively controlled and used.

[0067] Secondly, obtain visual attribute information such as the position and size of the target interface element (such as a button, picture or text box), calculate and store the absolute coordinate position of the target interface element in the visual tree, that is, the exact position of the element relative to the entire screen, and store this position information. Furthermore, establish a spatial mapping relationship between the decorative layer and the target interface element to ensure that it can correctly cover or follow these target interface elements without taking the decorative layer as a child element of the target element. That is to say, the decorative layer will not affect the layout structure of the target interface element, nor will it be affected by the layout changes of the target interface element, so as to ensure that the decorative layer can follow the position changes of the target element. Once it is detected that the position of the target element has changed, the decorative layer will also adjust its position accordingly to maintain consistency with the target interface element.

[0068] Furthermore, create a specific drawing area for the decorator, and customize the drawing logic and establish a caching mechanism in this specific drawing area. Among them, the drawing area is separated from the main interface layout system of the application. In this way, the main layout system is responsible for managing the positions and sizes of all regular interface elements (such as buttons, text boxes, etc.) in the application. The rendering context of the decorator is independent and will not be affected by the main layout system, nor will it affect the main layout system. Through the customized drawing logic, various visual effects can be achieved, such as shape drawing, image rendering, animation effects (including fading, rotation, scaling, etc.). Through the caching mechanism, the number of repeated drawings can be reduced, thereby improving the rendering efficiency and making the application run more smoothly.

[0069] Finally, create a resource release mechanism for the decorator and build a decorator instance pool. When the decorator finishes its task, release the resources it occupies through the resource release mechanism, such as memory, graphics cache, texture, etc. By releasing these resources, memory leaks and resource waste can be avoided, and the overall performance of the system can be improved. The decorator instance pool is a collection that stores decorator instances. These instances can be taken out and used when needed, instead of creating new instances every time, which can reduce the overhead of creating and destroying instances and improve efficiency. In high-frequency interaction scenarios (such as when the user frequently clicks a button or swipes the screen), if a new decorator instance needs to be created every time, it may lead to performance bottlenecks. Through the instance pool, the already created but temporarily unused instances can be saved and reused directly the next time they are needed, thus improving the response speed and performance. Before executing step c1, the PC side can pre-confirm whether there is already a created interface element decorator. If it exists, it can be directly used; if not, the creation process can be executed. As an implementation method, the PC side can create an interface element decorator that inherits from the desktop client graphics framework. By injecting the original card reference and cloning the card instance into the constructor of the interface element decorator, a deformation isolation layer for the cloned card can be obtained.

[0070] In order to be able to perform deformation operations on the cloned card in the deformation isolation layer, the PC side can bind predefined deformation special effects to the interface element decorator. Specifically, an animation timeline controller can be initialized, and then the scaling key frames (i.e., scaling transformation) of the cloned card in the X-axis and Y-axis directions can be defined to achieve the deformation effect.

[0071] For example, when the mouse pointer hovers over the card, the animation effect is to enlarge, and when the mouse pointer leaves the card, the animation effect is to shrink. Here, the mouse pointer leaving the card means that the deformation operation on the cloned card can be cancelled, and the cloned card can be restored to the size of the original card, and then the original card can be presented on the page.

[0072] In an optional implementation method, for the deformation special effects, the embodiments of the present invention can also achieve various deformation operations by externally injecting animation parameters such as the open scaling coefficient, easing function, and duration of the deformation strategy, which specifically depends on the application scenario.

[0073] Step c3: After binding the cloned card to the interface element decorator, apply the deformation special effect to the cloned card and render it.

[0074] In the embodiments of the present invention, only one interface element decorator needs to be created. Only when the original card needs to perform a deformation operation, the interface element decorator will be bound to the cloned card of the original card. After the visual change is completed, the binding relationship can be immediately released to release the relevant resources, so that the interface element decorator can be used for the next card that needs a visual change.

[0075] Through the above embodiments, the embodiments of the present invention can apply deformation special effects to the deformation isolation layer without changing the original layout parameters. The deformation operation is completely independent of the main layout system, avoiding the problem of layout disorder.

[0076] In an embodiment of the present invention, in order to further enhance the function of the interface element decorator, a data context penetration component can also be developed to enable the interface element decorator to access the property change notification interface of the original card data source. Through this design, the cloned card can be automatically bound to the property change notification interface of the original card data source. This can ensure the data consistency between the cloned card and the original card during the deformation process, realizing two-way data synchronization between the two.

[0077] The embodiments of the present invention render the cloned card in the deformation isolation layer at the position where the card is located, so that the deformed card can be displayed at the position of the card in the card list, such as Figure 1B the enlarged effect shown.

[0078] Furthermore, when the mouse pointer leaves the card, the embodiments of the present invention can also restore the cloned card to the size of the original card, and then present the original card on the page, that is, perform the following embodiments:

[0079] Step d1: In response to the effective hover end operation for the card, perform the inverse operation corresponding to the deformation operation on the cloned card in the deformation isolation layer and then render the cloned card;

[0080] In the embodiments of the present invention, the hover end operation refers to the operation of the mouse pointer leaving the card. Similar to the embodiments of detecting the effective hover operation introduced above, the embodiments of the present invention can detect the effective hover end operation through a mouse pointer leave event listener, which will not be elaborated here.

[0081] When the effective hover end operation is detected, perform the inverse operation of the deformation operation on the cloned card during the foregoing process and then render the cloned card, aiming to restore the size of the cloned card to the size of the original card. For example, if the size of the cloned card is enlarged after the effective hover operation is detected, then the size of the cloned card is reduced after the effective hover end operation is detected. As Figure 4 shown, Figure 4 shows another effect diagram of the client card rendering method provided by the embodiments of the present invention. In Figure 4 , when the mouse pointer leaves card 2, then card 2 returns to the original size, and the entire process does not cause the position of card 2 to shift.

[0082] As mentioned above, when performing deformation operations on cloned cards, you can actually define animation sequences of cloned cards in the X-axis direction and the Y-axis direction. Therefore, when it is detected that the mouse pointer has left the card for a period of time, a reverse animation sequence can be triggered to restore the cloned card to its original size.

[0083] Step d2: Undo the deformation isolation layer and cache the cloned card.

[0084] In the embodiment of the present invention, the cloned card is cached instead of being destroyed immediately, so as to support subsequent rapid reuse.

[0085] In the embodiment of the present invention, the implementation method of canceling the deformation isolation layer is to release the binding relationship between the interface element modifier and the cloned card, and release related resources so that the modifier can be used for the next card that needs to undergo visual changes.

[0086] In the embodiment of the present invention, after a clone card of a certain card is generated through the above implementation, a weak reference cache pool can be used to manage the clone card instance, so that low-complexity instance acquisition / recycling operations can be implemented.

[0087] For an overall understanding of the client card rendering method provided by the embodiment of the present invention, please refer to Figure 5 , Figure 5 Another flow chart of the client card rendering method provided by the embodiment of the present invention. Figure 5 The above content can be summarized as follows: the technical effectiveness of the embodiment of the present invention is shown in Table 1.

[0088] Table 1

[0089] Defects of Traditional Solutions Innovative Technologies of the Present Invention Improvement of Technical Effects Deformation Triggers Global Layout Rearrangement Deformation Isolation Rendering Architecture Layout Calculation Overhead Reduced to Zero Data of Cloned Instances Out of Sync Two-Way Data Binding Data Delay Reduced by 97% Animation Interruption Causes Visual Jumps Deformation Animation Configurable Animation Smoothness Reaches 99.2% Dynamic Layers Obstruct Underlying Interactions Effective Hover Event Detection Click Accuracy Rate of 98.7%

[0090] As can be seen from Table 1: First, the client card rendering method provided by the embodiments of the present invention provides a layout stability guarantee mechanism. Specifically: The embodiments of the present invention can construct an independent visual channel through an interface element decorator, so that the deformation operation is completely separated from the main layout system, avoiding the problem of layout disorder. By creating an interface element decorator independent of the main rendering pipeline, the embodiments of the present invention can implement a lightweight visual overlay layer, so that the deformed elements are attached to the existing UI elements without disturbing their original layout logic; in the Z-axis direction, the decorator is always above its associated element to ensure its visual priority. This can ensure that the decoration effects (such as shadows, highlights, etc.) are always visible and will not be blocked by other elements. In addition, the decorator has an independent coordinate system and transformation pipeline, and can apply transformations such as scaling and rotation to the content, and these transformations will not affect the underlying elements. This enables the decorator to flexibly process various visual effects while keeping the layout of the underlying elements unchanged. Finally, the decoration layer can selectively process or pass input events to implement transparent or opaque interaction logic. This means that the decoration layer can both respond to user input events (such as clicks, touches, etc.) and choose to pass these events to the underlying elements, thus implementing more complex interaction designs.

[0091] Second, the client card rendering method provided by the embodiments of the present invention has the advantage of dynamic resource scheduling. Specifically: The embodiments of the present invention generate cloned cards only when there is a hover event on the card. Compared with the scheme of preloading all deformation templates, it can reduce the memory occupancy by 67% to 89%. In addition, the embodiments of the present invention can manage the cloned card instances using a weak reference cache pool, so as to achieve instance acquisition and recycling operations with low time complexity.

[0092] Finally, the client card rendering method provided by the embodiments of the present invention has strong scalability. Specifically: The embodiments of the present invention can automatically bind the cloned cards to the property change notification interface of the original card data source to ensure the two-way data synchronization between the cloned cards and the original cards during the deformation operation and guarantee data consistency; in addition, in terms of deformation special effects, the embodiments of the present invention can attach additional animation parameters such as open scaling factors, easing functions, and durations to suit different application scenarios.

[0093] To execute the corresponding steps in the above embodiments and all possible ways, the following gives an implementation manner of a client card rendering device. Please refer to Figure 6 , Figure 6This is a functional module diagram of a client card rendering device provided in an embodiment of the present invention. It should be noted that the basic principle and technical effects of the client card rendering device provided in this embodiment are the same as those of the above embodiments. For the sake of brief description, for parts not mentioned in this embodiment, reference can be made to the corresponding contents in the above embodiments. The client card rendering device 60 includes: a cloning module 601 and a rendering module 602.

[0094] The cloning module 601 is used to generate a clone card of the card in response to a valid hover operation on any card in the card list;

[0095] The rendering module 602 is used to construct a deformation isolation layer at the location of the card, and render the cloned card after the deformation isolation layer performs a deformation operation on the cloned card.

[0096] It is understandable that the cloning module 601 and the rendering module 602 can be executed in coordination. Figure 2 Each step in the process is performed to achieve the corresponding technical effect.

[0097] In an optional embodiment, the rendering module 602 is also used to respond to a valid hover end operation on the card, render the cloned card after the deformation isolation layer performs an inverse operation corresponding to the deformation operation on the cloned card; cancel the deformation isolation layer, and cache the cloned card.

[0098] In an optional implementation, the rendering module 602 is specifically used to obtain a pre-created interface element modifier; bind a predefined deformation effect to the interface element modifier to obtain a deformation isolation layer; and after binding the cloned card to the interface element modifier, apply the deformation effect to the cloned card and render it.

[0099] In an optional implementation, the rendering module 602 is further specifically configured to release the binding relationship between the interface element decorator and the cloned card.

[0100] In an optional embodiment, the rendering module 602 is also specifically used to determine whether the trigger duration of the hover operation exceeds the preset event trigger duration when a hover operation is detected; if so, establish a correspondence between the card and the preset empty card; and generate a clone card based on the data corresponding to the card and the empty card.

[0101] In an optional implementation, the rendering module 602 is further specifically used to obtain a visual tree corresponding to the card; wherein the visual tree refers to the hierarchical structure of UI elements in the card; deep cloning the visual tree to generate a mirror instance corresponding to the card; wherein the mirror instance is used to inherit the properties and styles corresponding to the card; and copying the mirror instance to an empty card to obtain a cloned card.

[0102] In an alternative embodiment, the client card rendering device 60 further includes a configuration module for pre-configuring a hover event listener and an event trigger duration for each card in the card list.

[0103] It should be noted that the division of modules in the above embodiments of the present application is illustrative, only a logical function division. In actual implementation, there may be other division methods. In addition, in each embodiment of the present application, the functional units may be integrated in a processing unit, may exist separately physically, or two or more units may be integrated in one unit. The above integrated units may be implemented in the form of hardware or in the form of software functional units.

[0104] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for causing an electronic device (which may be a personal computer, a server, or a network device, etc.) or a processor to execute all or part of the steps of the methods in the various embodiments of the present application. The foregoing storage medium includes: USB flash drives, mobile hard disks, read-only memories (ROMs), random access memories (RAMs), magnetic disks, or optical discs, etc., which can store program executable codes.

[0105] The embodiment of the present invention also provides an electronic device. Please refer to Figure 7 , Figure 7 which is the structural block diagram of the electronic device provided by the embodiment of the present invention, including: a memory 701, a processor 702, and a communication interface 703. The memory 701, the processor 702, and the communication interface 703 are directly or indirectly electrically connected to each other to achieve data transmission or interaction. For example, these components can be electrically connected to each other through one or more communication buses or signal lines.

[0106] Optionally, the bus can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 7 only a thick line is shown in

[0107] In an embodiment of the present invention, the processor 702 may be a general-purpose processor, a digital signal processor, an application specific integrated circuit, a field programmable gate array or other programmable logic device, discrete gate or transistor logic device, discrete hardware component, and may implement or execute the various methods, steps and logic block diagrams disclosed in the embodiments of the present invention. The general-purpose processor may be a microprocessor or any conventional processor, etc. The steps of the method disclosed in combination with the embodiments of the present invention may be directly embodied as being executed by a hardware processor, or implemented by a combination of hardware and software modules in the processor. The software module may be located in the memory 701, and the processor 702 reads the program instructions in the memory 701 and combines its hardware to complete the steps of the above method.

[0108] In an embodiment of the present invention, the memory 701 may be a non-volatile memory, such as a hard disk drive (HDD) or a solid-state drive (SSD), etc., or may also be a volatile memory, such as RAM. The memory may also be any other medium that can be used to carry or store the desired program executable code in the form of instructions or data structures and can be accessed by a computer, but is not limited thereto. The memory in the embodiments of the present invention may also be a circuit or any other device capable of implementing a storage function, for storing instructions and / or data.

[0109] The memory 701 may be used to store software programs and modules, such as the instructions / modules of the client card rendering device 60 provided in the embodiments of the present invention, and may be stored in the memory 701 in the form of software or firmware, or solidified in the operating system (OS) of the electronic device 70. The processor 702 executes the software programs and modules stored in the memory 701, thereby performing various functional applications and data processing. The communication interface 703 may be used for signaling or data communication with other node devices.

[0110] Those skilled in the art can clearly understand that for the convenience and brevity of description, the specific working processes of the above-described devices and units may refer to the corresponding processes in the foregoing method embodiments, and will not be described herein again.

[0111] It can be understood that Figure 7 The structure shown is only schematic, and the electronic device 70 may further include more or fewer components than those shown Figure 7 in the figure, or have a different configuration from that shown Figure 7 in the figure. Figure 7 The components shown may be implemented using hardware, software, or a combination thereof.

[0112] Based on the above embodiments, the present application further provides a storage medium. A computer program is stored in the computer storage medium. When the computer program is executed by a computer, the computer is made to execute the client card rendering method provided in the above embodiments.

[0113] Based on the above embodiments, the embodiments of the present invention further provide a computer program. When the computer program runs on a computer, the computer is made to execute the client card rendering method provided in the above embodiments.

[0114] Based on the above embodiments, the embodiments of the present invention further provide a chip. The chip is used to read the computer program stored in a memory and is used to execute the client card rendering method provided in the above embodiments.

[0115] The embodiments of the present invention further provide a computer program product, including instructions. When the instructions run on a computer, the computer is made to execute the client card rendering method provided in the above embodiments.

[0116] The embodiments of the present invention are described with reference to the flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to the embodiments of the present invention. It should be understood that each flow and / or block in the flowcharts and / or block diagrams, and the combination of flows and / or blocks in the flowcharts and / or block diagrams, can be realized by instructions. These instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, such that the instructions executed by the processor of the computer or other programmable data processing devices generate a device for realizing the functions specified in one or more flows in the flowchart and / or one or more blocks in the block diagram.

[0117] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, such that the instructions stored in the computer-readable memory generate a manufactured article including an instruction device, and the instruction device realizes the functions specified in one or more flows in the flowchart and / or one or more blocks in the block diagram.

[0118] These computer program instructions can also be loaded onto a computer or other programmable data processing device, such that a series of operation steps are executed on the computer or other programmable device to generate a computer-implemented process. Thus, the instructions executed on the computer or other programmable device provide steps for realizing the functions specified in one or more flows in the flowchart and / or one or more blocks in the block diagram.

[0119] The above are only the specific embodiments of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by those skilled in the art within the technical scope disclosed by the present invention should be covered by the protection scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims

1. A method for rendering client cards, characterized in that, The method comprises: In response to a valid hover operation on any card in the card list, generating a clone card of the card; A deformation isolation layer is constructed at the location of the card, and the cloned card is rendered after the deformation isolation layer performs a deformation operation on the cloned card.

2. The client card rendering method according to claim 1, wherein The method further comprises: In response to a valid hover end operation on the card, after performing an inverse operation corresponding to the deformation operation on the cloned card in the deformation isolation layer, rendering the cloned card; The deformation isolation layer is cancelled, and the cloned card is cached.

3. The client card rendering method according to claim 1, wherein Constructing a deformation isolation layer at the location of the card, and rendering the cloned card after the deformation isolation layer performs a deformation operation on the cloned card, including: Get the pre-created interface element decorator; Binding a predefined deformation effect to the interface element modifier to obtain the deformation isolation layer; After the clone card is bound to the interface element modifier, the deformation effect is applied to the clone card and rendered.

4. The client card rendering method according to claim 3, wherein Canceling the deformation isolation layer comprises: The binding relationship between the interface element decorator and the clone card is released.

5. The client card rendering method according to claim 1, wherein In response to a valid hover operation on any card in the card list, a clone card of the card is generated, including: When a hover operation is detected, determining whether the triggering duration of the hover operation exceeds a preset event triggering duration; If so, establishing a correspondence between the card and a preset empty card; The clone card is generated according to the data corresponding to the card and the empty card.

6. The client card rendering method according to claim 5, wherein Generating the clone card according to the data corresponding to the card and the blank card includes: Obtaining a visual tree corresponding to the card; wherein the visual tree refers to the hierarchical structure of elements in the card; Deeply clone the visual tree to generate a mirrored instance corresponding to the card; wherein the mirrored instance is used to inherit the properties and styles corresponding to the card; The mirrored instance is copied to the empty card to obtain the cloned card.

7. The client card rendering method according to any one of claims 1-6, characterized in that The method further comprises: A hover event listener and event triggering duration are configured in advance for each card in the card list.

8. A client card rendering device, characterized in that Clone module and render module; The cloning module is used to generate a clone card of any card in the card list in response to a valid hover operation on the card; The rendering module is further used to construct a deformation isolation layer at the location of the card, and render the cloned card after the deformation isolation layer performs a deformation operation on the cloned card.

9. An electronic device, characterized in that, It comprises a processor and a memory, wherein the memory stores machine executable instructions that can be executed by the processor, and the processor can execute the machine executable instructions to implement the client card rendering method according to any one of claims 1 to 7.

10. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, the client card rendering method according to any one of claims 1 to 7 is implemented.

Images