Card display method, computer equipment and computer readable storage medium

Abstract

The invention discloses a card display method, computer equipment and a computer readable storage medium, and belongs to the technical field of terminals. The method comprises the following steps: in response to a first dragging operation of dragging a first card to a display area of a card set in a stacked state, adding a target card which has the same card data as the first card and is in a hidden state in the card set, and stretching the card set from the stacked state to an unfolded state. Under the condition that the card set is in the unfolded state, if the dragging position of the first card is located in the display area of the card set when the first dragging operation is finished, the sorting position of the target card in the card set is adjusted according to the dragging position of the first card, and each card in the card set is displayed after the target card is adjusted to be in the visible state. Therefore, the first card is inserted into the card set. The user can adjust the insertion position of the card by dragging the first card, so that the user can use the card conveniently. Therefore, the flexibility and the convenience when the cards are intensively inserted are improved.

Description

Technical Field

[0001] The present application relates to the field of terminal technology, and in particular to a card display method, a computer device, and a computer-readable storage medium. Background Art

[0002] With the continuous development of terminal technology, terminals such as mobile phones and tablet computers have become an indispensable part of people's daily life. In order to facilitate users to quickly and conveniently view and use the services of various applications installed in the terminal, corresponding cards can be generated for each application and displayed on the terminal interface.

[0003] Currently, the terminal aggregates multiple cards into a card set for display to save terminal interface space. If the user needs to insert a card into a card set, he can drag the card to the display area of ​​the stacked card set. In this case, the terminal will insert the card into the card set as the first card in the order, so that the card will be displayed at the top of the card set.

[0004] In the above manner, the user cannot adjust the card insertion position when inserting the card into the card set, which causes inconvenience to the user. Summary of the invention

[0005] The present application provides a card display method, a computer device and a computer-readable storage medium, which can improve the flexibility and convenience when inserting cards into a card set. The technical solution is as follows:

[0006] In a first aspect, a card display method is provided. In the method, in response to a first drag operation of dragging a first card to a display area of ​​a stacked card set, a target card is added to the card set, and then the card set is stretched from the stacked state to the expanded state, the target card is in a hidden state, and the card data of the target card is the same as the card data of the first card. When the card set is in the expanded state, if the first drag operation ends and the drag position of the first card is located in the display area of ​​the card set at the end of the first drag operation, the sort position of the target card in the card set is adjusted according to the drag position of the first card, and each card in the card set is displayed after the target card is adjusted to a visible state.

[0007] When the target card is in a hidden state, the target card is invisible. For example, the hidden state of the target card can be achieved by setting the transparency of the target card to be fully transparent.

[0008] Optionally, when adding a target card to the card set, the target card can be added to the card set as the last card in the sorting. In this case, the sorting position of the target card in the card set is the last.

[0009] In the present application, in response to the first drag operation of dragging the first card to the display area of ​​the stacked card set, a target card whose card data is the same as the card data of the first card and is in a hidden state is added to the card set, and then the card set is stretched from the stacked state to the expanded state. In this way, the user can know which cards exist in the card set, which is convenient for the user to determine the card insertion position. When the card set is in the expanded state, if the first drag operation ends and the drag position of the first card is located in the display area of ​​the card set at the end of the first drag operation, the sorting position of the target card in the card set is adjusted according to the drag position of the first card, and each card in the card set is displayed after the target card is adjusted to a visible state, so that the first card is inserted into the card set. Since the sorting position of the target card in the card set is adjusted according to the drag position of the first card, the user can adjust the card insertion position by dragging the first card, which is convenient for the user to use. In this way, the flexibility and convenience of inserting cards in the card set are improved.

[0010] Optionally, after the card set is stretched from a stacked state to an expanded state, when the card set is in the expanded state, if the first drag operation has not ended, the drag position of the first card is periodically obtained; each time the drag position of the first card is obtained, the sort position of the target card in the card set is adjusted according to the drag position of the first card, and each card in the card set is displayed while keeping the target card in a hidden state.

[0011] In the present application, when the card set is in the expanded state, if the first drag operation has not ended, it means that the user is still dragging the first card. In this case, the drag position of the first card can be periodically obtained to continuously adjust the sorting position of the target card in the card set according to the drag position of the first card, thereby achieving the adjustment of the card insertion position.

[0012] Among them, the operation of adjusting the sorting position of the target card in the card set according to the drag position of the first card can be: if the drag position of the first card is located in the display area of ​​a card in the card set, then the first sorting position and the second sorting position are obtained, the first sorting position is the current sorting position of this card in the card set, and the second sorting position is the current sorting position of the target card in the card set; if the first sorting position is before the second sorting position, the sorting position of the card sorted at the first sorting position and all the cards sorted after the first sorting position and before the second sorting position in the card set are all moved back by one position, and the sorting position of the target card in the card set is adjusted to the first sorting position; if the first sorting position is after the second sorting position, the sorting positions of the card sorted at the first sorting position and all the cards sorted after the second sorting position and before the first sorting position in the card set are all moved forward by one position, and the sorting position of the target card in the card set is adjusted to the first sorting position.

[0013] In the present application, if the drag position of the first card is located in the display area of ​​a card in the card set, it means that the card insertion position that the user wants to insert is likely to be the current sort position of this card in the card set. Therefore, the sort position of the target card in the card set can be adjusted to the current sort position of this card in the card set, and the sort positions of other cards in the card set can be moved accordingly.

[0014] Among them, the operation of stretching the card set from a stacked state to an expanded state can be: periodically obtaining a first motion effect coefficient, the first motion effect coefficient is used to indicate the stretching progress of the card set; each time a first motion effect coefficient is obtained, the stretching attribute value of each card in the card set is determined according to the most recently obtained first motion effect coefficient, the stacking attribute value and the expansion attribute value of each card in the card set, and each card is displayed according to the stretching attribute value of each card in the card set.

[0015] The stretch attribute value of each card in the card set refers to the attribute value of each card in the card set when it is in a stretched state. Since the first motion effect coefficient is obtained periodically and the first motion effect coefficient is constantly increasing, the stretch attribute value of each card in the card set determined according to the periodically obtained first motion effect coefficient is also constantly changing. In this case, each card is displayed according to the constantly changing stretch attribute value of each card in the card set, which realizes the dynamic display of each card, thereby realizing the stretching of the card set and presenting the stretching motion effect of the card set.

[0016] In the present application, since the card set is automatically stretched according to the first dynamic effect coefficient, there is no restriction on the position of the card set in the interface. In other words, the stacked card set in the present application can be located at any position in the interface, such as the top, bottom, middle, etc. of the interface. No matter where the stacked card set is located in the interface, the present application can automatically stretch the card set to expand when the user drags the first card to the stacked card set. In this way, the flexibility and convenience of using the card set are improved.

[0017] For example, the expansion attribute value of the card includes the expansion position, and the expansion position of the card is the position coordinate of the upper left corner vertex of the card. The method also includes: determining the horizontal coordinate of the expansion position of each card in the card set according to the expanded card width; determining the vertical coordinate of the expansion position of each card according to the expanded card height, the card interval height and the sorting sequence number of each card in the card set, and the card interval height is the height of the interval between two adjacent cards in the expanded card set.

[0018] Optionally, after the card set is stretched from a stacked state to an expanded state, while the card set is in the expanded state, if the first drag operation ends and the drag position of the first card is not located in the display area of ​​the card set at the end of the first drag operation, the target card in the card set is deleted and the card set is contracted from the expanded state to the stacked state.

[0019] In the present application, if the drag position of the first card is not located in the display area of ​​the card set at the end of the first drag operation, it means that the user does not want to insert the card, so the target card in the card set can be deleted, and then the card set can be collapsed from the expanded state to the stacked state. After the card set is collapsed to the stacked state, the interface space can be saved, so that other cards can be displayed more easily.

[0020] Optionally, the method also includes: in response to a second drag operation on a second card in the expanded card set, periodically obtaining the drag position of the second card when the second drag operation has not ended; each time the drag position of the second card is obtained, if the drag position of the second card is not located in the display area of ​​the card set, deleting the second card in the card set and shrinking the card set from the expanded state to the stacked state.

[0021] In the present application, if the drag position of the second card is not located in the display area of ​​the card set before the second drag operation is completed, it means that the user is determined to remove the second card from the card set, and then the second card in the card set can be deleted, and then the card set can be collapsed from the expanded state to the stacked state. After the card set is collapsed to the stacked state, the interface space can be saved, so that it is convenient for the user to find a suitable position in the interface and drag the second card there.

[0022] Among them, the operation of shrinking the card set from an expanded state to a stacked state can be: periodically obtaining a second animation coefficient, the second animation coefficient is used to indicate the shrinking progress of the card set; each time a second animation coefficient is obtained, the shrinking attribute value of each card in the card set is determined according to the most recently obtained second animation coefficient, the expansion attribute value and the stacking attribute value of each card in the card set, and each card is displayed according to the shrinking attribute value of each card in the card set.

[0023] The shrinkage attribute value of each card in the card set refers to the attribute value of each card in the card set when it is in the shrunken state. Since the second motion effect coefficient is obtained periodically and the second motion effect coefficient is constantly increasing, the shrinkage attribute value of each card in the card set determined according to the periodically obtained second motion effect coefficient is also constantly changing. In this case, each card is displayed according to the constantly changing shrinkage attribute value of each card in the card set, that is, the dynamic display of each card is realized, thereby realizing the shrinkage of the card set and presenting the shrinkage animation of the card set.

[0024] In a second aspect, a card display method is provided, the method comprising:

[0025] When the interface management module detects a first drag operation of dragging the first card to the display area of ​​the stacked card set, the interface management module sends the card data of the first card to the data adapter;

[0026] After receiving the card data of the first card, the data adapter adds a target card to the card set, the target card is in a hidden state, and the card data of the target card is the same as the card data of the first card;

[0027] After the interface management module sends the card data of the first card to the data adapter, the card set is stretched from a stacked state to an expanded state;

[0028] When the first drag operation ends, the interface management module sends a drag end message carrying the drag position of the first card to the drag manager;

[0029] After the drag manager receives the drag end message, if the drag position of the first card is located in the display area of ​​the card set, the sort position of the target card in the card set is adjusted according to the drag position of the first card, and each card in the card set is displayed after adjusting the target card to a visible state.

[0030] Optionally, after the card set is stretched from the stacked state to the expanded state, the method further includes:

[0031] The interface management module periodically obtains the drag position of the first card when the first drag operation is not completed, and sends the drag position of the first card to the drag manager each time the drag position of the first card is obtained;

[0032] After receiving the drag position of the first card, the drag manager adjusts the sort position of the target card in the card set according to the drag position of the first card, and displays each card in the card set while keeping the target card in a hidden state.

[0033] Optionally, the method further comprises:

[0034] After receiving the drag end message, if the drag position of the first card is not located in the display area of ​​the card set, the drag manager deletes the target card in the card set and shrinks the card set from the expanded state to the stacked state.

[0035] Optionally, the method further comprises:

[0036] When the interface management module detects a second drag operation on a second card in the expanded card set, the interface management module periodically obtains the drag position of the second card if the second drag operation is not completed.

[0037] The interface management module sends a card deletion message to the data adapter every time it obtains the drag position of the second card if the drag position of the second card is not located in the display area of ​​the card set;

[0038] After receiving the card deletion message, the data adapter deletes the second card in the card set;

[0039] After the interface management module sends a card deletion message to the data adapter, the card set is contracted from the expanded state to the stacked state.

[0040] In a third aspect, a card display device is provided, wherein the card display device has the function of implementing the card display method in the first aspect. The card display device comprises at least one module, wherein the at least one module is used to implement the card display method provided in the first aspect.

[0041] In a fourth aspect, a computer device is provided, wherein the structure of the computer device includes a processor and a memory, wherein the memory is used to store a program that supports the computer device to execute the card display method provided in the first aspect or the second aspect, and to store data involved in implementing the card display method described in the first aspect or the second aspect. The processor is configured to execute the program stored in the memory. The computer device may also include a communication bus, wherein the communication bus is used to establish a connection between the processor and the memory.

[0042] In a fifth aspect, a computer-readable storage medium is provided, wherein instructions are stored in the computer-readable storage medium, and when the computer-readable storage medium is run on a computer, the computer executes the card display method described in the first aspect or the second aspect.

[0043] In a sixth aspect, a computer program product comprising instructions is provided, which, when executed on a computer, enables the computer to execute the card display method described in the first aspect or the second aspect.

[0044] The technical effects obtained by the above-mentioned second, third, fourth, fifth and sixth aspects are similar to the technical effects obtained by the corresponding technical means in the above-mentioned first aspect, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] Figure 1 It is a state diagram of a card set provided in an embodiment of the present application;

[0046] Figure 2 is a schematic diagram of a card insertion process provided by an embodiment of the present application;

[0047] Figure 3 is a schematic diagram of the structure of a terminal provided in an embodiment of the present application;

[0048] Figure 4 is a block diagram of a software system of a terminal provided in an embodiment of the present application;

[0049] Figure 5 is a flow chart of a first card display method provided in an embodiment of the present application;

[0050] Figure 6 is a schematic diagram of an expansion process of a card set provided in an embodiment of the present application;

[0051] Figure 7 is a schematic diagram of a terminal interface provided in an embodiment of the present application;

[0052] Figure 8 is a flow chart of a card set stretching operation provided in an embodiment of the present application;

[0053] Fig. 9 is a schematic diagram of the unfolding positions of the cards in the first card set provided in an embodiment of the present application;

[0054] Fig.10 is a schematic diagram of the unfolding positions of the cards in the second card set provided in an embodiment of the present application;

[0055] Fig.11 is a schematic diagram of the unfolding positions of the cards in the third card set provided in an embodiment of the present application;

[0056] Fig.12 is a schematic diagram of the unfolding positions of the cards in the fourth card set provided in an embodiment of the present application;

[0057] Fig.13 is a schematic diagram of the unfolding positions of the cards in the fifth card set provided in an embodiment of the present application;

[0058] Fig.14 is a schematic diagram of the unfolding positions of the cards in the sixth card set provided in an embodiment of the present application;

[0059] Fig.15 is a schematic diagram of a display area of ​​a card in a card set provided in an embodiment of the present application;

[0060] Fig.16 is a schematic diagram of the sorting position of the first type of card in the card set provided by the embodiment of the present application;

[0061] Fig.17 is a schematic diagram of the sorting position of the second type of card in the card set provided in an embodiment of the present application;

[0062] Fig.18 is a schematic diagram of a card set stacking process provided in an embodiment of the present application;

[0063] Fig.19 This is a flowchart of a card set shrinking operation provided by an embodiment of the present application;

[0064] Fig. 20 is a flow chart of a second card display method provided in an embodiment of the present application;

[0065] Fig.21 is a schematic diagram of the sorting position of the third type of card in the card set provided in an embodiment of the present application;

[0066] Fig. 22 is a schematic diagram of a stacking process of another card set provided in an embodiment of the present application;

[0067] Fig.23 is a flowchart of a third card display method provided in an embodiment of the present application;

[0068] Fig.24 is a flowchart of a fourth card display method provided in an embodiment of the present application;

[0069] Fig.25 is a flowchart of a fifth card display method provided in an embodiment of the present application;

[0070] Fig.26 is a flowchart of a sixth card display method provided in an embodiment of the present application;

[0071] Fig. 27It is a structural schematic diagram of a card display device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0072] In order to make the objectives, technical solutions and advantages of the present application clearer, the implementation methods of the present application will be further described in detail below in conjunction with the accompanying drawings.

[0073] It should be understood that the "multiple" mentioned in this application refers to two or more. In the description of this application, unless otherwise specified, " / " means or, for example, A / B can mean A or B; "and / or" in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in order to facilitate the clear description of the technical solution of this application, the words "first" and "second" are used to distinguish between the same items or similar items with basically the same functions and effects. Those skilled in the art can understand that the words "first" and "second" do not limit the quantity and execution order, and the words "first" and "second" do not limit them to be different.

[0074] The phrases such as "one embodiment" or "some embodiments" described in the present application mean that the specific features, structures or characteristics described in the embodiment are included in one or more embodiments of the present application. Therefore, the phrases such as "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments" that appear in the differences in the present application do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. In addition, the terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in other ways.

[0075] The application scenarios involved in the embodiments of the present application are described below.

[0076] With the rapid development of terminal technology, intelligence has become the focus of terminal manufacturers. As an important entry point for providing users with intelligent services, cards play an important role in improving user experience.

[0077] Cards, also known as service cards, are a form of service that provides a more fine-grained atomic service capability than applications (APPs), and directly presents the content that users care about most to users in the form of interactive cards. Cards can be embedded in various applications to achieve rich interactive scenarios and meet user needs.

[0078] Cards carry the service information of applications, such as ticket information in travel applications, logistics information in shopping applications, etc., so that users can view these service information through cards without entering the application. In addition, cards can also carry operations related to the application, such as jump links to direct service pages, so that users can quickly access the service pages of the application through cards.

[0079] In order to facilitate users to quickly and conveniently view and use the services of various applications installed in the terminal, corresponding cards can be generated for each application and displayed on the terminal interface (such as the main interface, negative one screen, etc.).

[0080] As more and more applications are installed in the terminal, and as more and more cards correspond to each application, more and more cards need to be displayed on the terminal interface, resulting in space shortage on the terminal interface. At present, in order to solve this problem, multiple cards can be aggregated into a card set (also called a card pile) for display to save space on the terminal interface. Aggregating multiple cards into a card set means stacking multiple cards for display. In this case, multiple cards only occupy one display area.

[0081] For example, a card set has four states, namely: stacked state, stretched state, expanded state, and contracted state. When all cards in a card set are stacked together, the card set is in a stacked state. When multiple cards in a card set are expanded, the card set is in an expanded state. Among them, by operating the card set in a stacked state, the card set can be stretched to expand multiple cards stacked together in the card set. In this case, the card set transitions from the stacked state to the stretched state, and finally switches to the expanded state. By operating the card set in the expanded state, the card set can be contracted to stack multiple cards expanded in the card set. In this case, the card set transitions from the expanded state to the contracted state, and finally switches to the stacked state.

[0082] for example, Figure 1 The card set shown in Figure (a) is in a stacked state. In this case, the user can see the top card in the card set, but cannot see the lower cards in the card set. Figure 1 The stacked card set shown in Figure (a) is used to stretch the card set, such as Figure 1 As shown in Figure (b) in the figure, when the card set is in a stretched state, the cards in the card set will gradually expand until multiple cards in the card set are fully expanded. Figure 1 As shown in Figure (c) in the figure, the card set is in the expanded state. In this case, the user can see multiple cards in the card set. Figure 1 The expanded card set shown in Figure (c) in the figure is used to shrink the card set, such as Figure 1As shown in Figure (d) in the figure, when the card set is in a contracted state, multiple cards in the card set will gradually stack up until all the cards in the card set are stacked together, as shown in Figure 5. Figure 1 As shown in Figure (e) in the figure, the card set is in a stacked state.

[0083] In related technologies, such as Figure 2 As shown in Figure (a) in the figure, the stacked card set is displayed at the top of the terminal interface, the top card in the card set is fully expanded, and other cards are stacked in the lower layer of the card set. If the user wants to insert a card into the card set, he can drag the card to be inserted into the display area of ​​the card set, and the terminal can insert the card into the card set as the first card in the order. For example, Figure 2 As shown in Figure (b) in FIG. 1 , the user drags card 4 to the display area of ​​the card set and then releases the card. The terminal inserts card 4 into the card set as the first card in the sorting order. Figure 2 As shown in Figure (c), card 4 will be displayed at the top of the card set.

[0084] It can be seen that in the related art, when a user inserts a card into a card set, on the one hand, he cannot know which cards currently exist in the card set, and on the other hand, he cannot adjust the card insertion position. He can only insert the card into the front position of the card set, which causes inconvenience to the user.

[0085] To this end, an embodiment of the present application provides a card display method, when a user drags a first card to the display area of ​​a stacked card set, the terminal can add a target card with the same card data as the first card in the card set, and then stretch the card set from the stacked state to the expanded state, so that the user can know which cards exist in the card set, which is convenient for the user to determine the card insertion position. When the card set is in the expanded state, the terminal can adjust the sorting position of the target card in the card set according to the dragged position of the first card, so that the user can adjust the card insertion position by dragging the first card, which is convenient for the user to use. In this way, the flexibility and convenience of inserting cards in the card set are improved.

[0086] Before explaining the card display method provided in the embodiment of the present application in detail, the computer device involved in the embodiment of the present application is first explained.

[0087] Figure 3 is a schematic diagram of the structure of a terminal provided in an embodiment of the present application. Figure 3The terminal 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. Among them, the sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0088] It is to be understood that the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the terminal 100. In other embodiments of the present application, the terminal 100 may include more or fewer components than shown in the figure, or combine certain components, or split certain components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0089] The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0090] The controller may be the nerve center and command center of the terminal 100. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0091] The processor 110 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0092] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the terminal 100. The external memory card communicates with the processor 110 through the external memory interface 120 to implement a data storage function, such as storing music, video and other files in the external memory card.

[0093] The internal memory 121 can be used to store computer executable program codes, which include instructions. The processor 110 executes various functional applications and data processing of the terminal 100 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area may store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc. The data storage area may store data created by the terminal 100 during use (such as audio data, a phone book, etc.), etc. In addition, the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0094] The USB interface 130 is an interface that complies with the USB standard specification, and specifically can be a Mini USB interface, a Micro USB interface, a USB Type C interface, etc. The USB interface 130 can be used to connect a charger to charge the terminal 100, and can also be used to transmit data between the terminal 100 and peripheral devices. It can also be used to connect headphones to play audio through the headphones. The USB interface 130 can also be used to connect other devices, such as AR devices, etc.

[0095] The charging management module 140 is used to receive charging input from a charger. The charger may be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 may receive charging input from a wired charger through the USB interface 130. In some wireless charging embodiments, the charging management module 140 may receive wireless charging input through a wireless charging coil of the terminal 100. While the charging management module 140 is charging the battery 142, it may also power the terminal 100 through the power management module 141.

[0096] The power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, and provides power to the processor 110, the internal memory 121, the external memory, the display screen 194, the camera 193 and the wireless communication module 160. The power management module 141 can also be used to monitor parameters such as battery capacity, battery cycle number, battery health status (leakage, impedance), etc. In some other embodiments, the power management module 141 can also be set in the processor 110. In other embodiments, the power management module 141 and the charging management module 140 can also be set in the same device.

[0097] The wireless communication function of the terminal 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

[0098] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in terminal 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve the utilization of the antennas. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in combination with a tuning switch.

[0099] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G applied on the terminal 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, and filter, amplify, and process the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the same device as at least some of the modules of the processor 110.

[0100] The wireless communication module 160 can provide wireless communication solutions including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc., which are applied to the terminal 100. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, modulates the frequency of the electromagnetic wave signal and performs filtering, and sends the processed signal to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, modulate the frequency of it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0101] The terminal 100 implements the display function through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, which connects the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

[0102] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light emitting diode or an active-matrix organic light emitting diode (AMOLED), a flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the terminal 100 may include 1 or N display screens 194, where N is an integer greater than 1.

[0103] In an embodiment of the present application, the terminal 100 can display a card set on the display screen 194. The terminal 100 can stretch the card set in a stacked state displayed on the display screen 194, that is, the card set can be transitioned from a stacked state to a stretched state, and finally switched to an expanded state, and the terminal 100 can display an animation effect when the card set is stretched during the stretching process of the card set. The terminal 100 can also shrink the card set in an expanded state displayed on the display screen 194, that is, the card set can be transitioned from an expanded state to a contracted state, and finally switched to a stacked state, and the terminal 100 can display an animation effect when the card set is contracted during the contraction process of the card set. In some embodiments, the stretching and contraction of the card set by the terminal 100 can be triggered by user operation.

[0104] The terminal 100 can realize the shooting function through the ISP, the camera 193, the video codec, the GPU, the display screen 194 and the application processor.

[0105] ISP is used to process the data fed back by camera 193. For example, when taking a photo, the shutter is opened, and the light is transmitted to the camera photosensitive element through the lens. The light signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to ISP for processing and converts it into an image visible to the naked eye. ISP can also perform algorithm optimization on the noise, brightness, and skin color of the image. ISP can also optimize the exposure, color temperature and other parameters of the shooting scene. In some embodiments, ISP can be set in camera 193.

[0106] The camera 193 is used to capture still images or videos. The object generates an optical image through the lens and projects it onto the photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then passes the electrical signal to the ISP to be converted into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV or other format. In some embodiments, the terminal 100 may include 1 or N cameras 193, where N is an integer greater than 1.

[0107] The terminal 100 can implement audio functions, such as music playing and recording, through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D and the application processor.

[0108] The audio module 170 is used to convert digital audio information into analog audio signal output, and is also used to convert analog audio input into digital audio signals. The audio module 170 can also be used to encode and decode audio signals. In some embodiments, the audio module 170 can be arranged in the processor 110, or some functional modules of the audio module 170 can be arranged in the processor 110.

[0109] The key 190 includes a power key, a volume key, etc. The key 190 may be a mechanical key or a touch key. The terminal 100 may receive key input and generate key signal input related to user settings and function control of the terminal 100.

[0110] Motor 191 can generate vibration prompts. Motor 191 can be used for incoming call vibration prompts, and can also be used for touch vibration feedback. For example, touch operations acting on different applications (such as taking pictures, audio playback, etc.) can correspond to different vibration feedback effects. Touch operations acting on different areas of the display screen 194 can also correspond to different vibration feedback effects. Different application scenarios (such as: time reminders, receiving messages, alarm clocks, games, etc.) can also correspond to different vibration feedback effects. The touch vibration feedback effect can also support customization.

[0111] Indicator 192 may be an indicator light, which may be used to indicate charging status, power changes, messages, missed calls, notifications, etc.

[0112] The SIM card interface 195 is used to connect a SIM card. The SIM card can be connected to and separated from the terminal 100 by inserting it into the SIM card interface 195 or pulling it out from the SIM card interface 195. The terminal 100 can support 1 or N SIM card interfaces, where N is an integer greater than 1. The SIM card interface 195 can support Nano SIM cards, Micro SIM cards, SIM cards, and the like. Multiple cards can be inserted into the same SIM card interface 195 at the same time. The types of the multiple cards can be the same or different. The SIM card interface 195 can also be compatible with different types of SIM cards. The SIM card interface 195 can also be compatible with external memory cards. The terminal 100 interacts with the network through the SIM card to implement functions such as calls and data communications. In some embodiments, the terminal 100 uses an eSIM, i.e., an embedded SIM card. The eSIM card can be embedded in the terminal 100 and cannot be separated from the terminal 100.

[0113] Next, the software system of the terminal 100 will be described.

[0114] The software system of the terminal 100 may adopt a layered architecture, an event-driven architecture, a micro-core architecture, a micro-service architecture, or a cloud architecture. The embodiment of the present application takes the Android system of the layered architecture as an example to exemplify the software system of the terminal 100.

[0115] Figure 4 1 is a block diagram of a software system of a terminal 100 provided in an embodiment of the present application. Figure 4 The layered architecture divides the software into several layers, each with clear roles and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into an application layer, an application framework layer, an Android runtime (AndroidRuntime) and a system layer, and a kernel layer.

[0116] The application layer may include a series of applications. In some embodiments, the application layer may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, etc.

[0117] The application framework layer provides an application programming interface (API) and a programming framework for the applications in the application layer. The application framework layer includes some predefined functions.

[0118] In some embodiments, the application framework layer may include a navigation point control manager, a card set control manager, a view framework (also referred to as a View framework), an animation framework, and the like. Among them, the navigation point control manager is used to manage navigation point controls, and the navigation point is used to indicate the amount of content and to indicate the location of the current content. The card set control manager is used to manage card set controls. The View framework is used to draw animation effects (hereinafter referred to as animation effects) of cards in the card set. The animation framework is used to manage the animation parameters of cards in the card set. The animation effects of cards in the card set may include the movement of the position of the card, the change of the transparency of the card, the scaling of the size of the card, and the like.

[0119] Optionally, the card set control manager may include a data adapter, a state manager, a state change animation manager, a layout manager, an expanded state touch manager, a drag manager, and the like. Among them, the data adapter is used to manage the card data of the cards in the card set, and the card data of the cards may include the card title, card content, card background image, and the like. The state manager is used to manage the state of the card set, and the state of the card set may include a stacked state, a transition state, and an expanded state, and the transition state may include a stretched state and a contracted state. The state change animation manager is used to manage the transition state animation of the cards in the card set. The layout manager is used to manage the properties of the cards in the card set, and the properties of the cards may include one or more of the card's position, transparency, and scaling, and the like. The expanded state touch manager is used to manage the related touch events that exist when the card set is in the expanded state. The drag manager is used to manage the drag events related to the card set.

[0120] As an example, both the navigation point control manager and the card set control manager can be aar (Android Archive, Android archive) control managers.

[0121] As an example, the application framework layer may include a UIKit framework, and the navigation point control manager and the card set control manager may both exist in the UIKit framework.

[0122] Android Runtime includes core libraries and virtual machines. Android Runtime is responsible for scheduling and management of the Android system. The core library consists of two parts: one is the function that the Java language needs to call, and the other is the Android core library. The application layer and the application framework layer run in the virtual machine. The virtual machine executes the Java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform object life cycle management, stack management, thread management, security and exception management, and garbage collection.

[0123] The system layer can include multiple functional modules, such as: surface manager, media library, 3D graphics processing library (such as: OpenGL ES), 2D graphics engine (such as: SGL), etc. The surface manager is used to manage the display subsystem and provide fusion of 2D and 3D layers for multiple applications. The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc. The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, synthesis and layer processing, etc. The 2D graphics engine is a drawing engine for 2D drawing.

[0124] The kernel layer is the layer between hardware and software. The kernel layer can include display drivers, camera drivers, audio drivers, sensor drivers, etc.

[0125] It should be noted that Figure 4 The connection relationship between the layers in the software system shown is only a schematic illustration and does not constitute a limitation on the connection relationship between the layers in the software system of the terminal 100 .

[0126] The card display method provided in the embodiment of the present application is explained in detail below.

[0127] Figure 5 is a flowchart of a card display method provided in an embodiment of the present application, the method is applied to a terminal, and the terminal can be the above Figure 3 to Figure 4 The terminal 100 described in the embodiment. Figure 5 , the method comprising:

[0128] Step 501: In response to a first drag operation of dragging a first card to a display area of ​​a stacked card set, the terminal adds a target card to the card set and stretches the card set from the stacked state to the expanded state.

[0129] It should be noted that the stacked card set described in the embodiment of the present application may include multiple cards or only one card, and the embodiment of the present application does not limit this. That is, when the terminal detects a first drag operation of dragging a first card to a card set formed by a plurality of cards, step 501 may be executed, and when the terminal detects a first drag operation of dragging the first card to a display area of ​​a card, the terminal may also regard the card as a stacked card set to execute step 501.

[0130] The first card is the card that you want to insert into the card set. The first drag operation is an operation to adjust the position of the first card. For example, the first drag operation can be triggered by the user. For example, the first drag operation can be an operation of long pressing the first card and then sliding. When the first drag operation has not ended, that is, during the first drag operation, the position of the first card changes as the first card is dragged by the first drag operation. The position to which the first card is dragged by the first drag operation can be called the drag position of the first card. The position to which the first card is dragged at the end of the first drag operation is the final drag position of the first card.

[0131] The position of a card can be represented by the coordinates of a specific position point in the card. For example, the position of a card can be the position coordinates of the center point of the card, or the position coordinates of the upper left corner vertex, the upper right corner vertex, the lower left corner vertex, and the lower right corner vertex of the card. The embodiment of the present application is not limited to this. Optionally, the position of the card can be determined based on the screen coordinate system.

[0132] When the first drag operation drags the first card to the display area of ​​the stacked card set, that is, when the drag position of the first card is located in the display area of ​​the card set, it indicates that there is currently a need to insert the first card into the card set. Therefore, the terminal can add a target card to the card set in response to the first drag operation, and then stretch the card set from the stacked state to the expanded state, so that the first card can be inserted subsequently.

[0133] The card data of the target card is the same as the card data of the first card, and the card data may include the card title, card content, card background image, etc. After the terminal adds the target card to the card set, it sets the target card to a hidden state. When the target card is in a hidden state, the target card is invisible. For example, the hidden state of the target card can be achieved by setting the transparency of the target card to fully transparent.

[0134] Optionally, when the terminal adds the target card to the card set, the target card may be added to the card set as the last card in the sorting. In this case, the sorting position of the target card in the card set is the last.

[0135] After the terminal adds the target card to the card set, the terminal can stretch the card set from the stacked state to the expanded state. In the process of stretching the card set from the stacked state to the expanded state, the first card is continuously displayed on the upper layer of the card set, and the first card is still displayed on the upper layer of the card set until the card set is switched to the expanded state. The terminal can display the first card according to the drag position of the first card.

[0136] For example, Figure 6 As shown in Figure (a) in Figure 1, the user drags the first card. Figure 6 As shown in Figure (b) in FIG. 1 , when the user drags the first card to the display area of ​​the stacked card set, the terminal can add a target card to the card set and then stretch the card set from the stacked state to the expanded state. After the card set is switched to the expanded state, Figure 6 As shown in (c) of FIG. 1 , the terminal displays the card set in an expanded state, the card set includes card 1, card 2 and a target card, and the target card is in a hidden state. At the same time, the terminal also displays the first card being dragged, and the first card can be displayed in the upper layer of the card set.

[0137] It should be noted that after the terminal adds the target card to the card set, when stretching the card set from the stacked state to the expanded state, the card set can be stretched upward to expand the card set upward; or, the card set can be stretched downward to expand the card set downward.

[0138] For example, Figure 7As shown in the figure, the stacked card set can be displayed on the negative one screen interface or the main interface of the terminal.

[0139] Alternatively, see Figure 8 The operation of the terminal stretching the card set from a stacked state to an expanded state may include the following steps 5011 and 5012.

[0140] Step 5011: The terminal periodically obtains the first motion effect coefficient.

[0141] The cards in the card set have attribute values, and the attribute values ​​of the cards may include one or more of the card's position, transparency, scaling ratio, etc. The scaling ratio of the card is the scaling ratio of the current size of the card compared to the preset original size.

[0142] The position of each card in the card set in the stacked state may be the same, and the position of the card set in the stacked state is the position of each card in the card set in the stacked state.

[0143] Optionally, the transparency of each card in the stacked card set may be the same. Alternatively, the transparency of each card in the stacked card set may be different, for example, the transparency of each card in the stacked card set may decrease in sequence, that is, the transparency of the card in the stacked card set decreases in sequence from the top card to the bottom card. Alternatively, some cards in the stacked card set may have the same transparency, while some cards may have different transparency, which is not limited in the embodiments of the present application.

[0144] The size of the stacked card set may be the size of the topmost card in the stacked card set. That is, the horizontal length (also referred to as the width) of the stacked card set may be the width of the topmost card in the stacked card set, and the vertical length (also referred to as the height) of the stacked card set may be the height of the topmost card in the stacked card set.

[0145] Optionally, the size of each card in the stacked card set can be the same, that is, the width and height of each card are the same, and the width and height of each card can be set in advance. In this case, the zoom ratio of each card in the stacked card set is the same.

[0146] Alternatively, the size of each card in the stacked card set may be different. For example, the size of each card in the stacked card set may decrease in sequence, that is, the size of the card in the stacked card set decreases in sequence from the top card to the bottom card. In this case, the zoom ratio of each card in the stacked card set decreases in sequence.

[0147] Alternatively, in the stacked card set, some cards may have the same zoom ratio, while some cards may have different zoom ratios, which is not limited in this embodiment of the present application.

[0148] The terminal stretches the card set, that is, switches the card set from a stacked state to a stretched state. When the card set is in a stretched state, the terminal displays the dynamic effect of the card set during the stretching process (hereinafter referred to as the stretching dynamic effect). The stretching dynamic effect of the card set is used to show the changes in the attributes of the cards in the card set during the stretching process of the card set, which may include one or more changes in the position movement of the cards in the card set, the change in the transparency of the cards, the size scaling of the cards, etc.

[0149] In an embodiment of the present application, the terminal can stretch the card set according to the first animation coefficient. The first animation coefficient is used to indicate the stretching progress of the card set, and the first animation coefficient is greater than or equal to 0 and less than or equal to 1. When the first animation coefficient is 0, it means that the card set has just started to be stretched, and the stretching animation can be displayed at this time. When the first animation coefficient is greater than 0 and less than 1, it means that the card set is being stretched, and the stretching animation can be continuously displayed at this time. When the first animation coefficient is 1, it means that the stretching of the card set has been completed, and the display of the stretching animation can be ended at this time.

[0150] The first dynamic effect coefficient is constantly changing during the stretching process of the card set. The first dynamic effect coefficient is positively correlated with the stretching duration, that is, the first dynamic effect coefficient increases with the increase of the stretching duration, and the stretching duration is the time between the current moment and the response moment of the first drag operation.

[0151] In some embodiments, a first duration can be preset as the total duration of the stretched state of the card set, that is, the stretched animation of the card set will be continuously displayed within the first duration. In this case, when the stretched duration of the card set increases from 0 to the first duration, the first animation coefficient also increases from 0 to 1.

[0152] In some embodiments, the first dynamic effect coefficient can be obtained according to the first dynamic effect curve. The first dynamic effect curve is a curve of the relationship between the first dynamic effect coefficient and the stretching duration. The first dynamic effect curve can be a pre-set curve for controlling the stretching progress of the card set. For example, the first dynamic effect curve can be a spring animation curve.

[0153] In this case, the operation of the terminal periodically obtaining the first dynamic effect coefficient can be: every preset time, according to the time between the current moment and the response moment of the first drag operation (i.e., the current stretching time), the first dynamic effect coefficient is obtained through the first dynamic effect curve. In other words, the terminal can obtain the first dynamic effect coefficient once every preset time, and specifically, the first dynamic effect coefficient corresponding to the current stretching time in the first dynamic effect curve can be obtained once every preset time. In this way, the first dynamic effect coefficient obtained periodically will increase with the increase of the stretching time.

[0154] Since the first animation coefficient is used to indicate the stretching progress of the card set, each time the terminal obtains a first animation coefficient, it can implement the stretching animation of the card set according to the most recently obtained first animation coefficient. The specific operation is described in step 5012 below.

[0155] Step 5012: Every time the terminal obtains a first motion effect coefficient, it determines the stretching attribute value of each card in the card set according to the most recently obtained first motion effect coefficient, the stacking attribute value and the expansion attribute value of each card in the card set, and displays each card according to the stretching attribute value of each card in the card set.

[0156] The stacking attribute value of each card in the card set refers to the attribute value of each card in the card set when the card set is in a stacked state, and the expanding attribute value of each card in the card set refers to the attribute value of each card in the card set when the card set is in an expanded state.

[0157] In the case where the attribute value of a card includes the position of the card, the stacking attribute value of the card includes the stacking position of the card, and the expansion attribute value of the card includes the expansion position of the card. The stacking position of the card is the position of the card when the card set is in a stacked state, and the expansion position of the card is the position of the card when the card set is in an expanded state.

[0158] In the case where the attribute value of a card includes the transparency of the card, the stacking attribute value of the card includes the stacking transparency of the card, and the expansion attribute value of the card includes the expansion transparency of the card. The stacking transparency of the card is the transparency of the card when the card set is in a stacked state, and the expansion transparency of the card is the transparency of the card when the card set is in an expanded state.

[0159] In the case where the attribute value of a card includes the card's zoom ratio, the stack attribute value of the card includes the card's stack zoom ratio, and the card's expansion attribute value includes the card's expansion zoom ratio. The card's stack zoom ratio is the zoom ratio of the card when the card set is in a stacked state, and the card's expansion zoom ratio is the zoom ratio of the card when the card set is in an expanded state.

[0160] The terminal can determine the stacking attribute value of each card in the card set according to the current attribute value of each card in the stacked state, and can determine the expanded attribute value of each card in the card set by estimating the attribute value of each card when the card set is stretched to the expanded state.

[0161] The following is an explanation of how the terminal determines the stacking position and unfolding position of the cards:

[0162] Since all cards in the stacked card set are located at the same position, the terminal may use the position of the stacked card set as the stacking position of each card in the card set.

[0163] In some cases, the card set may be automatically generated after the terminal is turned on, so the terminal can obtain the position of the stacked card set after the terminal is turned on. And / or, the card set may be generated by user operation during the use of the terminal, so the terminal can obtain the position of the stacked card set after detecting that the card set is newly generated. In these cases, if the terminal detects that the position of the stacked card set has changed, it can also obtain the position of the stacked card set.

[0164] In other cases, the terminal may obtain the position of the card set in the stacked state in response to the first drag operation.

[0165] Next, we take the origin of the screen coordinate system as the top left corner of the screen, the positive direction of the horizontal axis of the screen coordinate system as the right direction, and the positive direction of the Y axis of the screen coordinate system as the downward direction as an example to explain how to determine the expansion position of each card in the card set. Of course, the screen coordinate system can also be constructed in other ways. When the constructed screen coordinate system is different, the specific method of determining the expansion position of each card in the card set is slightly different, but the principle is similar, and the embodiments of this application will not be repeated here.

[0166] It should be noted that the cards in the card set are ranked. When displaying the card set, the cards with the highest ranking can be displayed first. In other words, if the display area of ​​the card with the highest ranking in the card set completely overlaps or partially overlaps with the display area of ​​the card with the lowest ranking, then the card with the highest ranking can completely or partially cover the card with the lowest ranking when displayed.

[0167] The sorting position of the cards in the card set can be indicated by a sorting number, and the sorting number of the card increases by 1. The card with a sorting number of 1 in the card set is at the front of the sorting position in the card set, and the larger the sorting number of the card, the later the sorting position of the card in the card set.

[0168] The order from the topmost card to the bottommost card in the stacked card set is from the first card to the last card. For the expanded card set, if the card set is expanded upward, the order from the topmost card to the bottommost card in the expanded card set is from the first card to the last card; if the card set is expanded downward, the order from the bottommost card to the topmost card in the expanded card set is from the first card to the last card.

[0169] Another point to be explained is that the size of each card in the expanded card set is the same, that is, the width and height of each card are the same, and the width and height of each card can be set in advance. In this case, the width of any card in the expanded card set can be called the expanded card width, and the height of any card in the expanded card set can be called the expanded card height.

[0170] In some embodiments, the horizontal coordinate of the expanded position of each card in the card set may be the same.

[0171] As an example, if the position of a card is the position coordinate of the center point of the card, then the horizontal coordinate of the expanded position of each card in the card set can be half the screen width. In this case, the expanded card set is displayed in the center of the screen in the X-axis direction.

[0172] For example, Fig. 9 As shown, the origin of the screen coordinate system is the top left corner of the screen, the positive direction of the X axis of the screen coordinate system is to the right, and the positive direction of the Y axis of the screen coordinate system is to the downward direction. Assuming that the screen width is 10, the horizontal coordinate of the center point of each card in the expanded card set is 10÷2=5, that is, the horizontal coordinate of the expanded position of each card in the card set is 5.

[0173] As another example, if the position of the card is the position coordinate of the top left corner of the card, the terminal can determine the horizontal coordinate of the expanded position of each card in the card set according to the width of the expanded card.

[0174] In some cases, the horizontal coordinate of the expanded position of each card in the card set can be half the difference between the width of the stacked card set and the width of the expanded card. In this case, it is assumed that the top card in the stacked card set is completely to the right of the screen, and this is used as a reference to determine the position of each card in the expanded card set.

[0175] For example, Fig.10As shown, the origin of the screen coordinate system is the top left corner of the screen, the positive direction of the X axis of the screen coordinate system is to the right, and the positive direction of the Y axis of the screen coordinate system is to the downward direction. Assuming that the width of the stacked card set is 9 and the width of the expanded card set is 8, then the horizontal coordinate of the top left corner of each card in the expanded card set is (9-8) ÷ 2 = 0.5, that is, the horizontal coordinate of the expanded position of each card in the card set is 0.5.

[0176] In other cases, the horizontal coordinate of the expanded position of each card in the card set can be half of the difference between the screen width and the expanded card width. In this case, the expanded card set is displayed in the center of the screen in the X-axis direction.

[0177] For example, Fig.11 As shown, the origin of the screen coordinate system is the top left corner of the screen, the positive direction of the X axis of the screen coordinate system is to the right, and the positive direction of the Y axis of the screen coordinate system is to the downward direction. Assuming that the screen width is 10 and the width of the expanded card is 8, the horizontal coordinate of the top left corner of each card in the expanded card set is (10-8) ÷ 2 = 1, that is, the horizontal coordinate of the expanded position of each card in the card set is 1.

[0178] It should be noted that the method of determining the horizontal coordinate of the expanded position of each card in the card set when the position of the card is the position coordinates of the lower left corner vertex, the upper right corner vertex, or the lower right corner vertex of the card is similar to the method of determining the horizontal coordinate of the expanded position of each card in the card set when the position of the card is the position coordinates of the upper left corner vertex of the card, and the embodiments of the present application will not go into details about this.

[0179] In some embodiments, the ordinate of the expanded position of each card in the card set increases or decreases in sequence. The difference between the ordinates of the expanded positions of two adjacent cards in the card set is the same. If the card set is expanded upward, the ordinate of the expanded position of each card in the card set increases in sequence; if the card set is expanded downward, the ordinate of the expanded position of each card in the card set decreases in sequence.

[0180] Next, we will take the position of the card as the position coordinates of the upper left corner vertex of the card as an example to illustrate how to determine the vertical coordinate of the expanded position of each card in the card set. The method of determining the position of the card as the coordinates of other position points of the card is similar, and the embodiments of the present application will not go into details.

[0181] As an example, there is a gap between two adjacent cards in the expanded card set, and the height of the gap between any two adjacent cards (which may be referred to as the card gap height) is the same, and the card gap height may also be set in advance.

[0182] Optionally, the terminal may determine the ordinate of the unfolded position of each card according to the unfolded card height, the card interval height and the sorting sequence number of each card in the card set, wherein the sum of the unfolded card height and the card interval height may be used as the first height.

[0183] In the first possible case, if the card set is expanded upward, then for any card in the card set, the terminal can multiply the value obtained by subtracting 1 from the sorting number of the card by the first height and then add it to the first preset height to obtain the ordinate of the expanded position of the card. In this way, the expanded card set is displayed on the upper side of the screen in the Y-axis direction. The first preset height can be set in advance, and the first preset height is the distance between the upper boundary of the second display area in the second interface and the top of the screen.

[0184] In this case, if it is determined that the ordinate of the expanded position of a card is greater than the value obtained by subtracting the height of the expanded card from the screen height and the second preset height, the terminal can redefine the ordinate of the expanded position of the card as the value obtained by subtracting the height of the expanded card from the screen height and the second preset height. In this way, when there are too many cards in the card set, some cards with a higher ranking are expanded, and some cards with a lower ranking are stacked in the lower layer of the cards expanded below the screen. The second preset height can be set in advance, and the second preset height is the distance between the lower boundary of the second display area in the second interface and the top of the screen.

[0185] For example, Fig.12 As shown, the origin of the screen coordinate system is the top left corner of the screen, the positive direction of the X axis of the screen coordinate system is the right direction, and the positive direction of the Y axis of the screen coordinate system is the downward direction. The card set is expanded upward. Assuming that the screen height is 20, the first preset height is 2, the second preset height is 3, the first height is 5, and the height of the expanded card is 3, then the vertical coordinate of the expanded position of the first card in the expanded card set is 2, the vertical coordinate of the expanded position of the second card is 7, the vertical coordinate of the expanded position of the third card is 12, the vertical coordinate of the expanded position of the fourth card is 14, and the vertical coordinate of the expanded position of the fifth card is 14. In this case, the first three cards in the card set are expanded in order from top to bottom, and the last two cards are stacked on the lower layer of the third card, and the last two cards are stacked below the screen.

[0186] In the second possible case, if the card set is expanded downward, then for any card in the card set, the terminal can subtract the card spacing height from the screen height, then subtract the product of the sorting number of the card and the first height, and then subtract the second preset height to obtain the vertical coordinate of the expanded position of the card. In this way, the expanded card set is displayed downward in the Y-axis direction of the screen.

[0187] In this case, if it is determined that the vertical coordinate of the expanded position of a certain card is less than the first preset height, the terminal can redefine the vertical coordinate of the expanded position of the card to the first preset height. In this way, when there are too many cards in the card set, some cards with a higher ranking are expanded, and some cards with a lower ranking are stacked on the lower layer of the cards expanded above the screen.

[0188] In a third possible scenario, the terminal may obtain the card set expansion height by subtracting the card spacing height from the product of the number of cards in the card set and the first height, where the card set expansion height is the total height that all cards in the card set will reach when expanded.

[0189] In some embodiments, if the number of cards in the card set is less than or equal to a preset number, the terminal may use half of the difference between the screen height and the expanded height of the card set as the second height.

[0190] The preset number can be set in advance, and the preset number is the maximum number of cards that are allowed to be fully displayed in the second interface.

[0191] If the card set is expanded upward, for any card in the card set, the terminal can multiply the value obtained by subtracting 1 from the sorting number of the card by the first height, and then add the value to the second height to obtain the vertical coordinate of the expanded position of the card.

[0192] If the card set is expanded downward, for any card in the card set, the terminal can subtract the second height from the screen height, subtract the card spacing height, and then subtract the product of the sorting number of the card and the first height to obtain the vertical coordinate of the expanded position of the card.

[0193] In this case, when the number of cards in the card set is small, the expanded card set is displayed centered in the Y-axis direction of the screen.

[0194] For example, Fig.13 As shown, the origin of the screen coordinate system is the top left corner of the screen, the positive direction of the X axis of the screen coordinate system is to the right, and the positive direction of the Y axis of the screen coordinate system is to the downward direction. Assuming that the preset number is 3, the screen height is 20, the number of cards in the card set is 3, the height of the unfolded card is 5, the card interval height is 0.5, and the first height is 5.5, then the unfolded height of the card set is 3×5.5-0.5=16. Since the number of cards in the card set is less than the preset number, the second height is (20-16)÷2=2.

[0195] Assume that the card set is expanded upwards, then Fig.13As shown in Figure (a), the vertical coordinate of the expanded position of the first card in the expanded card set is 2, the vertical coordinate of the expanded position of the second card is 7.5, and the vertical coordinate of the expanded position of the third card is 13. In this case, the three cards in the card set are expanded from top to bottom, and the card set is displayed in the center of the Y-axis direction of the screen.

[0196] Assume that the card set is expanded downwards, then Fig.13 As shown in Figure (b), the vertical coordinate of the expanded position of the first card in the expanded card set is 13, the vertical coordinate of the expanded position of the second card is 7.5, and the vertical coordinate of the expanded position of the third card is 2. In this case, the three cards in the card set are expanded from bottom to top, and the card set is displayed in the center of the Y-axis direction of the screen.

[0197] In other embodiments, if the number of cards in the card set is greater than the preset number, the terminal may subtract the card spacing height from the product of the preset number and the first height to obtain a third height, where the third height is the total height that the first k cards in the card set will reach when they are unfolded, and k is the preset number. Afterwards, half of the difference between the screen height and the third height is used as the fourth height.

[0198] If the card set is expanded upward, then for any one of the first k cards in the card set, the terminal can multiply the value obtained by subtracting 1 from the sorting number of the card by the first height, and then add it to the fourth height to obtain the vertical coordinate of the expanded position of the card; for each card in the card set except the first k cards, the terminal can subtract the height of the expanded card and the second preset height from the screen height to obtain the vertical coordinate of the expanded position of each card in the card set except the first k cards.

[0199] If the card set is expanded downward, then for any one of the first k cards in the card set, the terminal can subtract the fourth height from the screen height, then subtract the card interval height, and then subtract the product of the sorting number of the card and the first height to obtain the vertical coordinate of the expanded position of the card; for each card in the card set except the first k cards, the terminal can use the first preset height as the vertical coordinate of the expanded position of each card in the card set except the first k cards.

[0200] In this case, when the number of cards in the card set is large, a part of the cards in the card set is displayed in the center of the Y-axis direction of the screen, and the other part of the cards are stacked.

[0201] For example, Fig.14As shown, the origin of the screen coordinate system is the top left corner of the screen, the positive direction of the X axis of the screen coordinate system is to the right, and the positive direction of the Y axis of the screen coordinate system is to the downward direction. Assume that the preset number is 3, the second preset height is 1, the screen height is 20, the number of cards in the card set is 5, the height of the unfolded card is 5, the card interval height is 0.5, and the first height is 5.5. Since the number of cards in the card set is greater than the preset number, the third height is 3×5.5-0.5=16, and the fourth height is (20-16)÷2=2.

[0202] Assume that the card set is expanded upwards, then Fig.14 As shown, the ordinate of the expanded position of the first card in the expanded card set is 2, the ordinate of the expanded position of the second card is 7.5, the ordinate of the expanded position of the third card is 13, the ordinate of the expanded position of the fourth card is 14, and the ordinate of the expanded position of the fifth card is 14. In this case, the first three cards in the card set are expanded in sequence from top to bottom, and the first three cards in the card set are displayed as a whole in the center of the Y axis direction of the screen. The last two cards in the card set are stacked on the lower layer of the third card and stacked below the screen.

[0203] The following is an explanation of how the terminal determines the stacking transparency and unfolding transparency of the card:

[0204] The stacking transparency and expanded transparency of cards can be set in advance.

[0205] For the target card in the card set, since the target card is in a hidden state, the stacking transparency and the expansion transparency of the target card are both 100%.

[0206] In some embodiments, the terminal may pre-set the stacking transparency of all cards in the card set except the target card to the first transparency, and pre-set the unfolding transparency of all cards in the card set except the target card to the second transparency. For example, the first transparency may be 0% and the second transparency may be 20%.

[0207] In this case, the terminal can directly determine the stacking transparency and expanded transparency of each card in the card set except the target card, that is, the stacking transparency of each card in the card set except the target card can be determined as the first transparency, and the expanded transparency of each card in the card set except the target card can be determined as the second transparency.

[0208] In other embodiments, the transparency of each card in the card set except the target card may be associated with the order of each card.

[0209] In this case, for any card in the card set except the target card, the terminal can obtain the stacking transparency and the unfolding transparency of the card according to the sorting sequence number of the card through the first association relationship.

[0210] The first association relationship may be preset, and the first association relationship is an association relationship between the card sorting sequence number and the stacking transparency and the unfolding transparency.

[0211] Optionally, the first association relationship may be a correspondence relationship between the card sorting number, stacking transparency and expansion transparency, so that the terminal can obtain the corresponding stacking transparency and expansion transparency from the correspondence relationship according to the card sorting number. Alternatively, the first association relationship may include a functional relationship between stacking transparency and card sorting number, and a functional relationship between expansion transparency and card sorting number, so that the terminal can substitute the card sorting number into the two functional relationships respectively to obtain stacking transparency and expansion transparency.

[0212] In some other embodiments, the stacking transparency of each card in the card set except the target card can be associated with the order of each card, and the expansion transparency of all cards in the card set except the target card can be the same. Specifically, the terminal can pre-set the second association relationship, and pre-set the expansion transparency of all cards in the card set except the target card to a third transparency. The second association relationship is the association relationship between the card order number and the stacking transparency.

[0213] In this case, for any card in the card set except the target card, the terminal can obtain the stacking transparency of the card according to the sorting sequence number of the card through the second association relationship. In addition, the terminal can directly determine the expansion transparency of each card in the card set except the target card, that is, the expansion transparency of each card in the card set except the target card can be determined as the third transparency.

[0214] Optionally, the second association relationship may be a correspondence relationship between the card sorting number and the stacking transparency, so that the terminal can obtain the corresponding stacking transparency from the correspondence relationship according to the card sorting number. Alternatively, the second association relationship may include a functional relationship between the stacking transparency and the card sorting number, so that the terminal can substitute the card sorting number into the functional relationship to obtain the stacking transparency.

[0215] The following describes how the terminal determines the stacking and expansion scaling of cards:

[0216] The stacking and expansion scales of cards can be set in advance.

[0217] In some embodiments, the terminal may preset the stacking zoom ratio of all cards in the card set to a first zoom ratio, and preset the expansion zoom ratio of all cards in the card set to a second zoom ratio. For example, the first zoom ratio may be 100%, and the second zoom ratio may be 90%.

[0218] In this case, the terminal can directly determine the stacking zoom ratio and expansion zoom ratio of each card in the card set, that is, the stacking zoom ratio of each card in the card set can be determined as the first zoom ratio, and the expansion zoom ratio of each card in the card set can be determined as the second zoom ratio.

[0219] In other embodiments, the zoom ratio of each card in the card set may be associated with the order of each card.

[0220] In this case, for any card in the card set, the terminal can obtain the stacking zoom ratio and the expansion zoom ratio of the card according to the sorting sequence number of the card through the third association relationship. The third association relationship can be preset, and the third association relationship is the association relationship between the card sorting sequence number and the stacking zoom ratio and the expansion zoom ratio.

[0221] Optionally, the third association relationship may be a correspondence relationship between the card sorting number, the stacking zoom ratio, and the expansion zoom ratio, so that the terminal can obtain the corresponding stacking zoom ratio and the expansion zoom ratio from the correspondence relationship according to the sorting number of the card. Alternatively, the third association relationship may include a functional relationship between the stacking zoom ratio and the card sorting number, and a functional relationship between the expansion zoom ratio and the card sorting number, so that the terminal can substitute the sorting number of the card into the two functional relationships respectively to obtain the stacking zoom ratio and the expansion zoom ratio.

[0222] In some other embodiments, the stacking scaling ratio of each card in the card set may be associated with the order of each card, and the expansion scaling ratio of all cards in the card set may be the same. Specifically, the terminal may pre-set a fourth association relationship, and pre-set the expansion scaling ratio of all cards in the card set to the third scaling ratio. The fourth association relationship is an association relationship between the card order number and the stacking scaling ratio.

[0223] In this case, for any card in the card set, the terminal can obtain the stacking zoom ratio of the card according to the sorting sequence number of the card through the fourth association relationship. In addition, the terminal can directly determine the expansion zoom ratio of each card in the card set, that is, it can determine that the expansion zoom ratio of each card in the card set is the third zoom ratio.

[0224] Optionally, the fourth association relationship may be a correspondence relationship between the card sorting sequence number and the stacking scaling ratio, so that the terminal can obtain the corresponding stacking scaling ratio from the correspondence relationship according to the card sorting sequence number. Alternatively, the fourth association relationship may include a functional relationship between the stacking scaling ratio and the card sorting sequence number, so that the terminal can substitute the card sorting sequence number into the functional relationship to obtain the stacking scaling ratio.

[0225] The stacking attribute value and the expansion attribute value of each card in the card set can be obtained through the above operation terminal, and then the stretching attribute value of each card in the card set can be determined according to the latest acquired first motion effect coefficient, the stacking attribute value and the expansion attribute value of each card in the card set.

[0226] The stretching attribute value of each card in the card set refers to the attribute value of each card in the card set when it is in a stretched state. Since the terminal periodically obtains the first motion effect coefficient, and the first motion effect coefficient is constantly increasing, the stretching attribute value of each card in the card set determined by the terminal based on the periodically obtained first motion effect coefficient is also constantly changing. In this case, the terminal displays each card according to the constantly changing stretching attribute value of each card in the card set, that is, it realizes the dynamic display of each card, thereby realizing the stretching of the card set and presenting the stretching motion effect of the card set.

[0227] Specifically, for any card in the card set, the terminal can subtract the stacking attribute value of the card from the expanded attribute value of the card to obtain a first attribute value, multiply the first attribute value by the most recently acquired first motion effect coefficient to obtain a second attribute value, and add the second attribute value to the stacking attribute value of the card to obtain the stretching attribute value of the card.

[0228] The first attribute value is the difference between the expanded attribute value that the card is going to achieve and the original stacked attribute value. Since the first animation coefficient is used to indicate the stretching progress, the difference between the current stretched attribute value of the card and the original stacked attribute value of the card is the product of the first attribute value and the first animation coefficient, which is the second attribute value. Then the current stretched attribute value of the card is the sum of the second attribute value and the original stacked attribute value.

[0229] For example, the coordinate value obtained by subtracting the horizontal coordinate of the stacked position of the card from the horizontal coordinate of the expanded position of the card is multiplied by the newly acquired first motion effect coefficient, and then added to the horizontal coordinate of the stacked position of the card to obtain the horizontal coordinate of the stretched position of the card. The coordinate value obtained by subtracting the vertical coordinate of the stacked position of the card from the vertical coordinate of the expanded position of the card is multiplied by the newly acquired first motion effect coefficient, and then added to the vertical coordinate of the stacked position of the card to obtain the vertical coordinate of the stretched position of the card.

[0230] For another example, the transparency value obtained by subtracting the stacking transparency of the card from the expanded transparency of the card is multiplied by the newly obtained first motion effect coefficient, and then added to the stacking transparency of the card to obtain the stretched transparency of the card.

[0231] For another example, the scaling ratio value obtained by subtracting the stacking scaling ratio of the card from the expansion scaling ratio of the card is multiplied by the most recently acquired first motion effect coefficient, and then added to the stacking scaling ratio of the card to obtain the stretching scaling ratio of the card.

[0232] Through the above operation, the terminal can obtain the stretch attribute value of each card in the card set, and the terminal can display each card in the card set based on this. Each displayed card contains card data, such as card title, card content, card background image, etc.

[0233] In some possible implementations, for any card in the card set, when the terminal displays the card according to the stretch attribute value of the card, the display size of the card can be determined according to the stretch scaling ratio of the card, and the display area of ​​the card can be determined according to the stretch position of the card and the display size of the card. The size of the display area of ​​the card is the display size of the card, and then the card is displayed in the display area of ​​the card according to the stretch transparency of the card, the display size of the card and the card data of the card.

[0234] In some other possible implementations, for any card in the card set, if the card is expanded when the card set is in the expanded state, such as in Fig.11 , Fig.12 or Fig.14 In the card set, the first three cards are expanded when the card set is in the expanded state. Then, when the terminal displays the card according to the stretch attribute value of the card, the display size of the card can be determined according to the stretch scaling ratio of the card, and the display area of ​​the card can be determined according to the stretch position of the card and the display size of the card. The size of the display area of ​​the card is the display size of the card, and then the card is displayed in the display area of ​​the card according to the stretch transparency of the card, the display size of the card and the card data of the card.

[0235] If this card is not unfolded but stacked when the card set is in the unfolded state, such as in Fig.11 , Fig.12 or Fig.14In the example, the fourth card and the fifth card in the card set are stacked when the card set is in the expanded state. When the terminal displays the card according to the stretch attribute value of the card, the stretch scaling ratio of the card can be multiplied by the preset coefficient to obtain the visual scaling ratio, and then the display size of the card is determined according to the stretch scaling ratio of the card and the visual size of the card is determined according to the visual scaling ratio of the card. The display area of ​​the card is determined according to the stretch position of the card and the display size of the card. The size of the display area of ​​the card is the display size of the card. The card is displayed in the display area of ​​the card according to the stretch transparency of the card, the visual size of the card and the card data of the card. Among them, the preset coefficient is greater than 0 and less than 1, so the visual scaling ratio of the card is less than the stretch scaling ratio of the card, and the visual size of the card is less than the display size of the card, that is, the visual size of the card is less than the size of the display area of ​​the card.

[0236] In this way, during the stretching process of the card set and when the card set is finally switched to the expanded state, the cards in the card set that will never be expanded will visually appear smaller than other cards that will eventually be expanded, which can bring better visual effects.

[0237] For example, Fig.15 As shown, for the fourth card in the card set (i.e. Fig.15 4) and the fifth card (i.e. Fig.15 For any card in the target card shown in ), the terminal determines that the display area of ​​the card is display area A, then the terminal can display the card in display area A according to the stretch transparency of the card, the visual size of the card and the card data of the card. In this case, the actual display area of ​​the card is display area A, but the card visually appears to be smaller than display area A.

[0238] It should be noted that in the embodiment of the present application, when the user drags the first card to the display area of ​​the stacked card set, the terminal can add a target card in the card set whose card data is the same as the card data of the first card and is in a hidden state, and can automatically stretch the card set from the stacked state to the expanded state according to the first motion effect coefficient. In this way, the user can know which cards exist in the card set, which is convenient for the user to determine the card insertion position.

[0239] In addition, since the terminal automatically stretches the card set according to the first motion effect coefficient, the position of the card set in the interface will not be restricted. That is to say, the stacked card set in the embodiment of the present application can be located at any position in the interface, such as the top, bottom, middle, etc. of the interface. No matter where the stacked card set is located in the interface, the card display method provided by the embodiment of the present application can automatically stretch the card set to expand when the user drags the first card to the stacked card set. In this way, the flexibility and convenience of using the card set are improved.

[0240] After the card set is switched to the expanded state, the terminal can adjust the sorting position of the target card in the card set according to the drag position of the first card. In this way, the card insertion position is adjusted according to the first drag operation, which is specifically explained in the following steps 502 and 503.

[0241] Step 502: When the card set is in the expanded state, if the first drag operation has not ended, the terminal periodically obtains the drag position of the first card; each time the drag position of the first card is obtained, the sort position of the target card in the card set is adjusted according to the drag position of the first card, and each card in the card set is displayed while keeping the target card in a hidden state.

[0242] When the card set is in the expanded state, if the first drag operation has not ended, it means that the user is still dragging the first card. In this case, the terminal can periodically obtain the drag position of the first card, so as to continuously adjust the sorting position of the target card in the card set according to the drag position of the first card, thereby adjusting the card insertion position.

[0243] The operation of the terminal adjusting the sorting position of the target card in the card set according to the dragging position of the first card may include the following two situations:

[0244] The first case: if the drag position of the first card is located in the display area of ​​a card in the card set, the terminal obtains the first sorting position and the second sorting position, the first sorting position is the current sorting position of the card in the card set, and the second sorting position is the current sorting position of the target card in the card set. If the first sorting position and the second sorting position are the same, the sorting position of each card in the card set remains unchanged; if the first sorting position is before the second sorting position, the sorting position of the card sorted in the first sorting position and all the cards sorted after the first sorting position and before the second sorting position in the card set are all moved backward by one position, and then the sorting position of the target card in the card set is adjusted to the first sorting position; if the first sorting position is after the second sorting position, the sorting position of the card sorted in the first sorting position and all the cards sorted after the second sorting position and before the first sorting position in the card set are all moved forward by one position, and then the sorting position of the target card in the card set is adjusted to the first sorting position.

[0245] If the drag position of the first card is located in the display area of ​​a card in the card set, it means that the card insertion position that the user wants to insert is likely to be the current sort position of this card in the card set. Therefore, the terminal can adjust the sort position of the target card in the card set to the current sort position of this card in the card set, and move the sort positions of other cards in the card set in the card set.

[0246] For example, Fig.16 As shown in Figure (a) in the figure, the user drags the first card to the second card in the expanded card set (i.e. Fig.16 The display area of ​​the card 2) shown in FIG. Fig.16 As shown in Figure (b), the terminal can adjust the sorting position of the target card in the card set to the second position, and move the sorting position of card 2 in the card set backward to the third position.

[0247] The second case: if the drag position of the first card is not located in the display area of ​​the card set, that is, if the drag position of the first card is not located in the display area of ​​any card in the card set, the terminal obtains the second sorting position, which is the current sorting position of the target card in the card set; if the second sorting position is the last one in the card set, the sorting position of the target card in the card set remains unchanged; if the second sorting position is not the last one in the card set, all cards sorted after the second sorting position are moved forward one position in the card set, and the sorting position of the target card in the card set is adjusted to the last one.

[0248] If the dragged position of the first card is not located in the display area of ​​the card set, it means that the user has not yet determined the card insertion position, so the terminal can stabilize the sorting position of the target card in the card set at the last position.

[0249] For example, Fig.17 As shown in Figure (a) in FIG. 1 , the display area of ​​the expanded card set is the display area B. If the user drags the first card to an area outside the display area B, Fig.17 As shown in FIG. 2 (b), the terminal can adjust the sorting position of the target card in the card set to the third position, and move the sorting position of card 2 in the card set forward to the second position.

[0250] After the terminal adjusts the sorting position of the target card in the card set according to the dragging position of the first card, the sorting position of each card in the card set is adjusted. In this case, the terminal still keeps the target card in a hidden state, and then displays each card in the card set according to the sorting position of each card in the card set.

[0251] When the terminal displays each card in the card set according to the sorting position of each card in the card set, since the sorting position of each card in the card set has been adjusted, the terminal can re-determine the expansion attribute value of each card in the card set, and then display each card according to the expansion attribute value of each card in the card set.

[0252] Among them, the operation of the terminal determining the expansion attribute value of each card in the card set is similar to the operation of the terminal determining the expansion attribute value of each card in the card set in step 5012, and this embodiment of the present application will not be repeated here.

[0253] Among them, the operation of the terminal displaying each card according to the expanded attribute value of each card in the card set is similar to the operation of the terminal displaying each card according to the stretched attribute value of each card in the card set in step 5012, and the embodiment of the present application will not be repeated here.

[0254] It should be noted that, when the card set is in the expanded state, if the first drag operation has not been completed, the terminal can continuously adjust the sorting position of the target card in the card set according to the position where the first card is dragged by the first drag operation, and display the card set accordingly. Moreover, when the first drag operation has not been completed, the terminal needs to display the first card according to the drag position of the first card while displaying the card set, and can display the first card in the upper layer of the card set.

[0255] Step 503: When the card set is in the expanded state, if the first drag operation ends and the drag position of the first card is located in the display area of ​​the card set at the end of the first drag operation, the terminal adjusts the sort position of the target card in the card set according to the drag position of the first card, and displays each card in the card set after adjusting the target card to a visible state.

[0256] If the drag position of the first card is located in the display area of ​​the card set at the end of the first drag operation, it means that the user has determined the card insertion position. Therefore, the terminal can adjust the sorting position of the target card in the card set according to the dragging position of the first card. In this case, the sorting position of the target card in the card set is the card insertion position determined by the user.

[0257] Among them, the operation of the terminal adjusting the sorting position of the target card in the card set according to the drag position of the first card is similar to the operation of the terminal adjusting the sorting position of the target card in the card set according to the drag position of the first card in step 502, and the embodiment of the present application will not repeat it.

[0258] After the terminal adjusts the sorting position of the target card in the card set according to the dragging position of the first card, the sorting position of each card in the card set is adjusted. In this case, since the first dragging operation has ended, the target card can be adjusted to a visible state, and then each card in the card set is displayed according to the sorting position of each card in the card set.

[0259] Adjusting the target card to a visible state means adjusting the transparency of the target card to a normal transparency. When the target card is in a hidden state, the stacking transparency and the expansion transparency of the target card are both 100%. When the target card is in a visible state, the determination logic of the stacking transparency and the expansion transparency of the target card is the same as the determination logic of the stacking transparency and the expansion transparency of other cards in the card set. The specific operation has been described in step 5012 and will not be repeated here.

[0260] When the terminal displays each card in the card set according to the sorting position of each card in the card set, since the sorting position of each card in the card set has been adjusted, the terminal can re-determine the expansion attribute value of each card in the card set, and then display each card according to the expansion attribute value of each card in the card set.

[0261] Since the card data of the target card is the same as the card data of the first card, after the terminal adjusts the target card to a visible state, the first card is actually inserted into the card set. In this case, the terminal may no longer display the first card after adjusting the target card to a visible state and displaying each card in the card set. In addition, since the sorting position of the target card in the card set is adjusted according to the drag position of the first card, that is, the sorting position of the target card in the card set corresponds to the drag position of the first card set, the user can adjust the card insertion position by dragging the first card in the embodiment of the present application, thereby facilitating user use. In this way, the flexibility and convenience of inserting cards into the card set are improved.

[0262] In some embodiments, when the card set is in an expanded state, if the first drag operation ends and the drag position of the first card is not located in the display area of ​​the card set at the end of the first drag operation, the target card in the card set is deleted, and then the card set is contracted from the expanded state to the stacked state.

[0263] If the drag position of the first card is not located in the display area of ​​the card set at the end of the first drag operation, it means that the user does not want to insert the card, so the terminal can delete the target card in the card set, and then shrink the card set from the expanded state to the stacked state. In addition, in the process of shrinking the card set from the expanded state to the stacked state, the terminal can also move the first card back to the position before it was dragged for display. After the card set is shrunk to the stacked state, the interface space can be saved, thereby facilitating the display of other cards.

[0264] For example, Fig.18 As shown in Figure (a) of FIG. 1 , the display area of ​​the expanded card set is display area B. After the user drags the first card to an area outside display area B and ends dragging the first card, the terminal can delete the target card in the card set, then shrink the card set from the expanded state to the stacked state, and move the first card back to its position before being dragged. After the card set is switched to the stacked state, Fig.18 As shown in Figure (b) in the figure, the terminal displays the card set in a stacked state and also displays the first card.

[0265] Alternatively, see Fig.19 The operation of the terminal shrinking the card set from the expanded state to the stacked state may include the following steps 1901 and 1902.

[0266] Step 1901: The terminal periodically obtains the second motion effect coefficient.

[0267] The terminal shrinks the card set, that is, switches the card set from an expanded state to a shrunken state. When the card set is in a shrunken state, the terminal displays the dynamic effect of the card set during the shrinking process (hereinafter referred to as the shrinking dynamic effect). The shrinking dynamic effect of the card set is used to show the attribute changes of the cards in the card set during the shrinking process of the card set, which may include one or more changes in the position movement of the cards in the card set, the change in the transparency of the cards, the size scaling of the cards, etc.

[0268] In an embodiment of the present application, the terminal can shrink the card set according to the second animation coefficient. The second animation coefficient is used to indicate the shrinking progress of the card set, and the second animation coefficient is greater than or equal to 0 and less than or equal to 1. When the second animation coefficient is 0, it means that the card set has just started to shrink, and the shrinking animation can be displayed at this time. When the second animation coefficient is greater than 0 and less than 1, it means that the card set is shrinking, and the shrinking animation can be continuously displayed at this time. When the second animation coefficient is 1, it means that the shrinkage of the card set has been completed, and the display of the shrinking animation can be ended at this time.

[0269] The second dynamic effect coefficient is constantly changing during the contraction process of the card set. The second dynamic effect coefficient is positively correlated with the contraction duration, that is, the second dynamic effect coefficient increases with the increase of the contraction duration, and the contraction duration is the time between the current moment and the end moment of the first drag operation.

[0270] In some embodiments, the second duration can be preset as the total duration of the contraction state of the card set, that is, the contraction animation of the card set will be continuously displayed within the second duration. In this case, when the contraction duration of the card set increases from 0 to the second duration, the second animation coefficient also increases from 0 to 1.

[0271] In some embodiments, the second animation coefficient can be obtained according to the second animation curve. The second animation curve is a curve of the relationship between the second animation coefficient and the contraction duration. The second animation curve can be a pre-set curve for controlling the contraction progress of the card set. The second animation curve can be the same as or different from the first animation curve. For example, the second animation curve can be a spring animation curve.

[0272] In this case, the operation of the terminal periodically obtaining the second animation coefficient can be: every preset time, according to the time between the current moment and the end moment of the first drag operation (i.e., the current contraction time), the second animation coefficient is obtained through the second animation curve. In other words, the terminal can obtain the second animation coefficient once every preset time, and specifically, the second animation coefficient corresponding to the current contraction time in the second animation curve can be obtained once every preset time. In this way, the periodically obtained second animation coefficient will increase with the increase of the contraction time.

[0273] Since the second animation coefficient is used to indicate the shrinking progress of the card set, each time the terminal obtains a second animation coefficient, it can implement the shrinking animation of the card set according to the most recently obtained second animation coefficient. The specific operation is described in step 1902 below.

[0274] Step 1902: Every time the terminal obtains a second motion effect coefficient, it determines the shrinkage attribute value of each card in the card set according to the most recently obtained second motion effect coefficient, the expansion attribute value and the stacking attribute value of each card in the card set, and displays each card according to the shrinkage attribute value of each card in the card set.

[0275] The terminal can determine the expanded attribute value of each card in the card set according to the current attribute value of each card in the expanded state, and can determine the stacked attribute value of each card in the card set by estimating the attribute value of each card when the card set is shrunk to a stacked state.

[0276] In some embodiments, the terminal may obtain the position of each card in the expanded card set as the expanded position of each card, and the terminal may obtain the original position of the card set in the stacked state as the stacked position of each card in the card set.

[0277] In some embodiments, the terminal may pre-set the expansion transparency of all cards in the card set to the second transparency, and pre-set the stacking transparency of all cards in the card set to the first transparency. In this case, the terminal may directly determine the expansion transparency and stacking transparency of each card in the card set, that is, the expansion transparency of each card in the card set may be determined to be the second transparency, and the stacking transparency of each card in the card set may be determined to be the first transparency. Alternatively, the terminal may pre-set the first association relationship. In this case, for any card in the card set, the terminal may obtain the expansion transparency and stacking transparency of the card through the first association relationship according to the sorting sequence number of the card. Alternatively, the terminal may pre-set the expansion transparency of all cards in the card set to the third transparency, and pre-set the second association relationship. In this case, the terminal may directly determine the expansion transparency of each card in the card set, that is, the expansion transparency of each card in the card set may be determined to be the third transparency, and, for any card in the card set, the terminal may obtain the stacking transparency of the card through the second association relationship according to the sorting sequence number of the card.

[0278] In some embodiments, the terminal may pre-set the expansion scaling ratio of all cards in the card set to the second scaling ratio, and pre-set the stacking scaling ratio of all cards in the card set to the first scaling ratio. In this case, the terminal may directly determine the expansion scaling ratio and stacking scaling ratio of each card in the card set, that is, the expansion scaling ratio of each card in the card set may be determined to be the second scaling ratio, and the stacking scaling ratio of each card in the card set may be determined to be the first scaling ratio. Alternatively, the terminal may pre-set a third association relationship. In this case, for any card in the card set, the terminal may obtain the expansion scaling ratio and stacking scaling ratio of the card through the third association relationship according to the sorting sequence number of the card. Alternatively, the terminal may pre-set the expansion scaling ratio of all cards in the card set to the third scaling ratio, and pre-set a fourth association relationship. In this case, the terminal may directly determine the expansion scaling ratio of each card in the card set, that is, the expansion scaling ratio of each card in the card set may be determined to be the third scaling ratio, and, for any card in the card set, the terminal may obtain the stacking scaling ratio of the card through the fourth association relationship according to the sorting sequence number of the card.

[0279] The above-mentioned operation terminal can obtain the expansion attribute value and stacking attribute value of each card in the card set, and then determine the contraction attribute value of each card in the card set based on the latest acquired second motion effect coefficient, the expansion attribute value and stacking attribute value of each card in the card set.

[0280] The shrinkage attribute value of each card in the card set refers to the attribute value of each card in the card set when it is in the shrunken state. Since the terminal periodically obtains the second motion effect coefficient, and the second motion effect coefficient is constantly increasing, the shrinkage attribute value of each card in the card set determined by the terminal based on the periodically obtained second motion effect coefficient is also constantly changing. In this case, the terminal displays each card according to the constantly changing shrinkage attribute value of each card in the card set, that is, it realizes the dynamic display of each card, thereby realizing the shrinkage of the card set and presenting the shrinkage effect of the card set.

[0281] Specifically, for any card in the card set, the terminal can subtract the expansion attribute value of the card from the stacking attribute value of the card to obtain a third attribute value, multiply the third attribute value by the most recently acquired second motion effect coefficient to obtain a fourth attribute value, and add the fourth attribute value to the expansion attribute value of the card to obtain the contraction attribute value of the card.

[0282] The third attribute value is the difference between the stacking attribute value that the card is going to achieve and the original expansion attribute value. Since the second animation coefficient is used to indicate the shrinking progress, the difference between the current shrinking attribute value of the card and the original expansion attribute value of the card is the product of the third attribute value and the second animation coefficient, which is the fourth attribute value. Then the current shrinking attribute value of the card is the sum of the fourth attribute value and the original expansion attribute value.

[0283] For example, the coordinate value obtained by subtracting the horizontal coordinate of the expanded position of the card from the horizontal coordinate of the stacked position of the card is multiplied by the newly acquired second animation coefficient, and then added to the horizontal coordinate of the expanded position of the card to obtain the horizontal coordinate of the contracted position of the card. The coordinate value obtained by subtracting the vertical coordinate of the expanded position of the card from the vertical coordinate of the stacked position of the card is multiplied by the newly acquired second animation coefficient, and then added to the vertical coordinate of the expanded position of the card to obtain the vertical coordinate of the contracted position of the card.

[0284] For another example, the transparency value obtained by subtracting the expanded transparency of the card from the stacked transparency of the card is multiplied by the newly obtained second motion effect coefficient, and then added to the expanded transparency of the card to obtain the shrunk transparency of the card.

[0285] For another example, the scaling ratio value obtained by subtracting the expansion scaling ratio of the card from the stacking scaling ratio of the card is multiplied by the most recently acquired second motion effect coefficient, and then added to the expansion scaling ratio of the card to obtain the contraction scaling ratio of the card.

[0286] Through the above operation, the terminal can obtain the shrink attribute value of each card in the card set, and the terminal can display each card in the card set based on this. Each displayed card contains card data, such as card title, card content, card background image, etc.

[0287] In some possible implementations, for any card in the card set, when the terminal displays the card according to the shrinkage attribute value of the card, the display size of the card can be determined according to the shrinkage scaling ratio of the card, and the display area of ​​the card can be determined according to the shrinkage position of the card and the display size of the card. The size of the display area of ​​the card is the display size of the card, and then the card is displayed in the display area of ​​the card according to the shrinkage transparency of the card, the display size of the card and the card data of the card.

[0288] In other possible implementations, for any card in the card set, if the card is expanded when the card set is in the expanded state, then when the terminal displays the card according to the shrinkage attribute value of the card, the display size of the card can be determined according to the shrinkage scaling ratio of the card, and the display area of ​​the card can be determined according to the shrinkage position of the card and the display size of the card. The size of the display area of ​​the card is the display size of the card, and then the card is displayed in the display area of ​​the card according to the shrinkage transparency of the card, the display size of the card and the card data of the card.

[0289] If the card is not unfolded but stacked when the card set is in the expanded state, then when the terminal displays the card according to the shrink attribute value of the card, the shrink scaling ratio of the card can be multiplied by a preset coefficient to obtain a visual scaling ratio, and then the display size of the card is determined according to the shrink scaling ratio of the card and the visual size of the card is determined according to the visual scaling ratio of the card, the display area of ​​the card is determined according to the shrink position of the card and the display size of the card, the size of the display area of ​​the card is the display size of the card, and the card is displayed in the display area of ​​the card according to the shrink transparency of the card, the visual size of the card and the card data of the card. In this way, during the shrinking process of the card set, the cards in the card set that will never be expanded will appear smaller than other cards visually, which can bring better visual effects.

[0290] It should be noted that the above Figures 5 to 19 The embodiment describes in detail the process of inserting a card into a card set. Fig. 20 The embodiment describes in detail the process of removing a card from a card set.

[0291] Fig. 20 is a flowchart of a card display method provided in an embodiment of the present application, the method is applied to a terminal, and the terminal can be the above Figure 3 to Figure 4 The terminal 100 described in the embodiment. Fig. 20 , the method comprising:

[0292] Step 2001: In response to a second drag operation on a second card in an expanded card set, the terminal periodically obtains a drag position of the second card when the second drag operation is not completed.

[0293] The second card is the card that you want to remove from the card set. The second drag operation is an operation to adjust the position of the second card. For example, the second drag operation can be triggered by the user. For example, the second drag operation can be an operation of long pressing the second card and then sliding. When the second drag operation has not ended, that is, during the second drag operation, the position of the second card changes as the second drag operation drags the second card. The position to which the second card is dragged by the second drag operation can be called the drag position of the second card. The position to which the second card is dragged at the end of the second drag operation is the final drag position of the second card.

[0294] If the second drag operation is not finished, it means that the user is still dragging the second card. In this case, the terminal can periodically obtain the drag position of the second card, so as to remove the second card according to the drag position of the second card.

[0295] Step 2002: When the second drag operation has not ended, each time the terminal obtains the drag position of the second card, when the drag position of the second card is located in the display area of ​​the card set, the terminal adjusts the sort position of the second card in the card set according to the drag position of the second card, and then displays each card in the card set; when the drag position of the second card is not located in the display area of ​​the card set, the terminal deletes the second card in the card set, and then shrinks the card set from an expanded state to a stacked state.

[0296] The operation of the terminal adjusting the sorting position of the second card in the card set according to the drag position of the second card can be: if the drag position of the second card is located in the display area of ​​a card other than the second card in the card set, the terminal obtains the third sorting position and the fourth sorting position, the third sorting position is the current sorting position of the card in the card set, and the fourth sorting position is the current sorting position of the second card in the card set. If the third sorting position is before the fourth sorting position, the sorting position of the card sorted in the third sorting position and all the cards sorted after the third sorting position and before the fourth sorting position in the card set are all moved backward by one position, and then the sorting position of the second card in the card set is adjusted to the third sorting position; if the third sorting position is after the fourth sorting position, the sorting position of the card sorted in the third sorting position and all the cards sorted after the fourth sorting position and before the third sorting position in the card set are all moved forward by one position, and then the sorting position of the second card in the card set is adjusted to the third sorting position.

[0297] If the drag position of the second card is located in the display area of ​​a card other than the second card in the card set, it means that the user may want to adjust the second card to the current sort position of this card in the card set. Therefore, the terminal can adjust the sort position of the second card in the card set to the current sort position of this card in the card set, and move the sort positions of other cards in the card set in the card set.

[0298] For example, Fig.21 As shown in Figure (a) in FIG. 1 , the user drags the expanded card 2 in the card set to the display area of ​​the card 1, and then Fig.21 As shown in FIG. 2 (b), the terminal may adjust the sorting position of card 2 in the card set to the first position, and move the sorting position of card 1 in the card set backward to the second position.

[0299] After the terminal adjusts the sorting position of the second card in the card set according to the dragging position of the second card, the sorting position of each card in the card set is adjusted. Since the sorting position of each card in the card set has been adjusted, the terminal can re-determine the expansion attribute value of each card in the card set, and then display each card according to the expansion attribute value of each card in the card set.

[0300] Among them, the operation of the terminal determining the expansion attribute value of each card in the card set is similar to the operation of the terminal determining the expansion attribute value of each card in the card set in step 5012, and this embodiment of the present application will not be repeated here.

[0301] In particular, since the second card is being dragged, the expansion position in the expansion attribute value of the second card needs to be set to the drag position of the second card, and the determination logic of other attribute values ​​in the expansion attribute value of the second card except the expansion position is the same as that of other cards in the card set.

[0302] Among them, the operation of the terminal displaying each card according to the expanded attribute value of each card in the card set is similar to the operation of the terminal displaying each card according to the stretched attribute value of each card in the card set in step 5012, and the embodiment of the present application will not be repeated here.

[0303] In particular, since the second card is being dragged, the second card may be displayed on an upper layer of other cards in the card set when the second card is displayed.

[0304] In the case where the second drag operation is not ended, if the drag position of the second card is located in the display area of ​​the card set, the terminal can adjust the sorting position of the second card in the card set according to the drag position of the second card. If the drag position of the second card is always located in the display area of ​​the card set during the second drag operation from the beginning to the end, the terminal will not remove the second card from the card set, but will continuously adjust the sorting position of the second card in the card set according to the drag position of the second card. In this case, at the end of the second drag operation, the terminal adjusts the sorting position of the second card in the card set according to the drag position of the second card, and then determines the expansion attribute value of each card in the card set according to the sorting position of each card in the card set in the card set, and displays each card according to the expansion attribute value of each card in the card set. In addition, since the second card is not dragged at this time, the determination logic of the expansion attribute value of the second card is the same as the determination logic of the expansion attribute values ​​of other cards in the card set, and the display logic of the second card is also the same as the display logic of other cards in the card set.

[0305] If the second drag operation is not completed, if the drag position of the second card is not located in the display area of ​​the card set, it means that the user is determined to remove the second card from the card set, and the terminal can delete the second card in the card set, and then shrink the card set from the expanded state to the stacked state. After the card set is shrunk to the stacked state, the interface space can be saved, so that the user can find a suitable position in the interface and drag the second card there.

[0306] For example, Fig. 22 As shown in Figure (a) of FIG. 1 , the display area of ​​the expanded card set is display area B. If the user drags the second card in the card set from inside display area B to outside display area B, the terminal can delete the second card in the card set and then collapse the card set from the expanded state to the stacked state. After the card set is switched to the stacked state, Fig. 22 As shown in Figure (b) in FIG. 1 , the terminal displays the card set in a stacked state and also displays a second card being dragged.

[0307] The operation of the terminal shrinking the card set from the expanded state to the stacked state is similar to the operation of shrinking the card set from the expanded state to the stacked state in step 503, and will not be described in detail in this embodiment of the present application.

[0308] It should be noted that the only difference between the operation of the terminal shrinking the card set from an expanded state to a stacked state and the operation of the terminal shrinking the card set from an expanded state to a stacked state in step 503 is that the shrinkage duration here is the duration between the current moment and the moment when it is detected that the drag position of the second card is not located in the display area of ​​the card set.

[0309] The terminal may display the second card according to the drag position of the second card during the process of shrinking the card set from the expanded state to the stacked state. The terminal may also display the second card according to the drag position of the second card after shrinking the card set from the expanded state to the stacked state. After the card set is switched to the stacked state, if the second drag operation ends, the terminal may display the second card according to the final drag position of the second card.

[0310] In some embodiments, the card display method described above can be implemented by a related module in the software system of the terminal. Figure 4 The software system described in the embodiment is used to exemplarily illustrate the card display method provided in the embodiment of the present application.

[0311] Fig.23 is a flowchart of a card display method provided in an embodiment of the present application, see Fig.23 , the method comprises the following steps:

[0312] Step 2301: When the interface management module detects a first drag operation of dragging a first card to a display area of ​​a stacked card set, the interface management module sends card data of the first card to the data adapter.

[0313] The interface management module is a module for managing the terminal interface. The interface management module can obtain the position of the stacked card set in the interface it manages, and can also obtain the display area of ​​the card set.

[0314] Optionally, the interface management module may include an interface module and a touch module. The interface module may detect a touch operation in the interface, and the touch module may determine whether the touch operation in the interface is a first drag operation.

[0315] In some embodiments, when the interface module detects a drag operation on the first card in the interface, the interface module may send the operation information of the drag operation (including the drag position of the first card, the card data of the first card, etc.) to the touch module. The touch module may determine whether the drag operation is the first drag operation based on the operation information of the drag operation and the display area of ​​the stacked card set. For example, the touch module may determine that the drag operation is the first drag operation when the drag position of the first card is located in the display area of ​​the card set. Afterwards, the touch module may send the card data of the first card to the data adapter.

[0316] Step 2302: After receiving the card data of the first card, the data adapter adds a target card to the card set.

[0317] After receiving the card data of the first card, the data adapter updates the card set, and the updated card set adds the target card, the card data of the target card is the same as the card data of the first card, and the target card is in a hidden state. Optionally, the target card is ranked last in the card set.

[0318] After the data adapter adds the target card to the card set, it can also display each card in the card set in a stacked state.

[0319] Specifically, in step 23a, the data adapter can send the card information of each card in the card set to the layout manager, and the card information includes the stacking attribute value of the card and the card data of the card. In step 23b, after receiving the card information of each card in the card set, the layout manager sends a card display message to the View framework, and the card display message is used to request the display of the cards in the card set, and the card display message carries the card information of each card in the card set. In step 23c, after receiving the card display message, the View framework displays each card according to the card information of each card in the card set.

[0320] After the layout manager obtains the card information of each card in the card set, it completes the layout of each card in the card set. Then the layout manager can send the card display message to the View framework to instruct the View framework to display according to the layout.

[0321] For example, after receiving the card display message, the View framework can draw (Draw) the corresponding graphics according to the card information of each card in the card set, and then submit the drawn graphics to the rendering service for rendering to display each card in the card set on the screen. The operation of the View framework drawing the corresponding graphics according to the card information of each card in the card set is similar to the operation of the terminal displaying each card according to the stretch attribute value of each card in the card set in step 5012, and this embodiment of the present application will not be repeated.

[0322] Step 2303: The interface management module stretches the card set from the stacked state to the expanded state.

[0323] After the interface management module sends the card data of the first card to the data adapter, the card set can be stretched from the stacked state to the expanded state.

[0324] After the card set is stretched from the stacked state to the expanded state, that is, when the card set is in the expanded state, the following step 2304 can be continued to be executed.

[0325] Step 2304: When the first drag operation is not completed, the interface management module periodically obtains the drag position of the first card.

[0326] Each time the interface management module obtains the drag position of the first card, it may send the drag position of the first card to the drag manager. Optionally, the operation of the interface management module sending the drag position of the first card to the drag manager may include the following steps 2305 to 2307.

[0327] Step 2305: The interface management module sends the drag position of the first card to the expanded touch manager.

[0328] Step 2306: After receiving the drag position of the first card, the expanded touch manager sets the card set to the drag state.

[0329] When the card set is in the dragging state, the sorting position of the target card in the card set needs to be adjusted according to the dragging position of the first card.

[0330] Step 2307: The expanded touch manager sends the drag position of the first card to the drag manager.

[0331] Step 2308: After receiving the drag position of the first card, the drag manager adjusts the sorting position of the target card in the card set according to the drag position of the first card.

[0332] The operation of the drag manager adjusting the sorting position of the target card in the card set according to the drag position of the first card is similar to the operation of the terminal adjusting the sorting position of the target card in the card set according to the drag position of the first card in step 502, and this embodiment of the present application will not be repeated here.

[0333] After the drag manager adjusts the sort position of the target card in the card set according to the drag position of the first card, the sort position of each card in the card set is adjusted. Since the sort position of each card in the card set has been adjusted, the drag manager can display each card in the card set while keeping the target card in a hidden state. Specifically, the drag manager can redetermine the expansion attribute value of each card in the card set while keeping the target card in a hidden state, and then display each card in the card set accordingly, which can be specifically achieved through the following steps 2309 to 2313.

[0334] Step 2309: The drag manager sends the expansion property value of each card in the card set to the layout manager.

[0335] Step 2310: After receiving the expansion attribute value of each card in the card set, the layout manager sends a card data request message to the data adapter.

[0336] The card data request message is used to request to obtain the card data of each card in the card set.

[0337] Step 2311: After receiving the card data request message, the data adapter sends the card data of each card in the card set to the layout manager.

[0338] Step 2312: After receiving the card data of each card in the card set, the layout manager sends a card display message to the View framework.

[0339] The card display message is used to request to display the cards in the card set. The card display message carries the card information of each card in the card set, and the card information includes the expansion attribute value of the card and the card data of the card.

[0340] Step 2313: After receiving the card display message, the View framework displays each card according to the card information of each card in the card set.

[0341] Step 2314: When the interface management module detects that the first drag operation ends, it obtains the drag position of the first card.

[0342] The interface management module may send a drag end message to the drag manager when detecting that the first drag operation has ended. The drag end message is used to indicate that the first drag operation has ended. The drag end message may carry the drag position of the first card when the first drag operation ends.

[0343] Optionally, the operation of the interface management module sending a drag end message to the drag manager may include the following steps 2315 to 2317 .

[0344] Step 2315: The interface management module sends a drag end message to the expanded touch manager.

[0345] Step 2316: After receiving the drag end message, the expanded touch manager cancels the drag state of the card set.

[0346] After the dragging state of the card set is canceled, there is no need to adjust the sorting position of the target card in the card set according to the dragging position of the first card.

[0347] Step 2317: The expanded touch manager sends a drag end message to the drag manager.

[0348] If the drag position of the first card is located in the display area of ​​the card set, the following steps 2318 to 2322 may be performed. If the drag position of the first card is not located in the display area of ​​the card set, the following step 2323 may be performed.

[0349] Step 2318: After receiving the drag end message, if the drag manager determines that the drag position of the first card is located in the display area of ​​the card set, the sort position of the target card in the card set is adjusted according to the drag position of the first card.

[0350] After the drag manager adjusts the sort position of the target card in the card set according to the drag position of the first card, the sort position of each card in the card set is adjusted. Since the sort position of each card in the card set has been adjusted, the drag manager can display each card in the card set when the target card is adjusted to a visible state. Specifically, the drag manager can redetermine the expansion attribute value of each card in the card set when the target card is adjusted to a visible state, and then display each card in the card set accordingly, which can be specifically achieved through the following steps 2319 to 2323.

[0351] Step 2319: The drag manager sends a card set update message to the data adapter.

[0352] The card set update message carries the expansion attribute value of each card in the card set.

[0353] Step 2320: After receiving the card set update message, the data adapter sends the card information of each card in the card set to the layout manager. The card information includes the expansion attribute value of the card and the card data of the card.

[0354] Step 2321: After receiving the card information of each card in the card set, the layout manager sends a card display message to the View framework. The card display message is used to request to display the cards in the card set. The card display message carries the card information of each card in the card set.

[0355] Step 2322: After receiving the card display message, the View framework displays each card according to the card information of each card in the card set.

[0356] Step 2323: After receiving the drag end message, if the drag manager determines that the drag position of the first card is not located in the display area of ​​the card set, the target card in the card set is deleted, and the card set is collapsed from the expanded state to the stacked state.

[0357] Optionally, when the drag manager deletes the target card in the card set, it may send a card deletion message to the data adapter. After receiving the card deletion message, the data adapter deletes the target card in the card set.

[0358] After the data adapter deletes the target card in the card set, it can also display each card in the card set in an expanded state.

[0359] Specifically, the data adapter can send the card information of each card in the card set to the layout manager, and the card information includes the expansion attribute value of the card and the card data of the card. After receiving the card information of each card in the card set, the layout manager sends a card display message to the View framework, and the card display message is used to request the display of the cards in the card set. The card display message carries the card information of each card in the card set. After receiving the card display message, the View framework displays each card according to the card information of each card in the card set.

[0360] In some embodiments, see Fig.24 The operation of the interface management module stretching the card set from the stacked state to the expanded state may include the following steps 2401 to 2410:

[0361] Step 2401: The interface management module sends a stretch message to the state manager.

[0362] The stretch message is used to instruct to stretch the card set in a stacked state to an expanded state.

[0363] Optionally, the interface management module may also send the position of the stacked card set to the state manager.

[0364] In some embodiments, the interface management module may send the position of the stacked card set existing in the interface to the state manager after startup; and / or, the interface management module may send the position of the newly generated stacked card set to the state manager when a new card set is generated in the interface; and / or, the interface management module may send the position of the stacked card set to the state manager after the position of the stacked card set existing in the interface changes; and / or, the interface management module may carry the position of the stacked card set in the stretch message sent to the state manager.

[0365] Step 2402: After receiving the stretch message, the state manager switches the state of the card set from the stacked state to the stretched state, and sends a stretch animation execution message to the state change animation manager.

[0366] The stretch animation execution message is used to instruct execution of the stretch animation.

[0367] Step 2403: After receiving the stretching animation effect execution message, the state change animation manager periodically obtains the first animation effect coefficient.

[0368] The operation of the state change animation manager periodically obtaining the first animation coefficient is similar to the operation of the terminal periodically obtaining the first animation coefficient in step 5011 above, and this embodiment of the present application will not be repeated here.

[0369] For example, after the state change animation manager receives the stretching animation execution message, it can first obtain the first animation curve from the animation framework, and then obtain the first animation coefficient through the first animation curve at preset time intervals based on the time between the current moment and the response moment of the first drag operation (that is, the moment when the state change animation manager receives the stretching animation execution message).

[0370] In some embodiments, after receiving the stretching animation execution message, the state change animation manager can determine the stacking attribute value and the expansion attribute value of each card in the card set. The operation of the state change animation manager determining the stacking attribute value and the expansion attribute value of each card in the card set is similar to the operation of the terminal determining the stacking attribute value and the expansion attribute value of each card in the card set in step 5012, and this embodiment of the present application will not be repeated.

[0371] In this case, each time the state change animation manager obtains a first motion effect coefficient, it can determine the stretching attribute value of each card in the card set based on the most recently obtained first motion effect coefficient, the stacking attribute value and the expansion attribute value of each card in the card set, and display each card according to the stretching attribute value of each card in the card set, as described in steps 2404 to 2410 below.

[0372] Step 2404: Every time the state change animation manager obtains a first motion effect coefficient, it determines the stretching attribute value of each card in the card set based on the most recently obtained first motion effect coefficient, the stacking attribute value and the expanding attribute value of each card in the card set, and sends the stretching attribute value of each card in the card set to the layout manager.

[0373] The operation of the state change animation manager determining the stretching attribute value of each card in the card set based on the most recently acquired first motion effect coefficient, the stacking attribute value and the expansion attribute value of each card in the card set is similar to the operation of the terminal determining the stretching attribute value of each card in the card set based on the most recently acquired first motion effect coefficient, the stacking attribute value and the expansion attribute value of each card in the card set in the above step 5012, and the embodiments of the present application will not go into details therein.

[0374] After receiving the stretch attribute value of each card in the card set, the layout manager can obtain the card data of each card in the card set from the data adapter, as described in steps 2405 to 2406 below.

[0375] Step 2405: After receiving the stretch attribute value of each card in the card set, the layout manager sends a card data request message to the data adapter.

[0376] The card data request message is used to request to obtain the card data of each card in the card set.

[0377] Step 2406: After receiving the card data request message, the data adapter sends the card data of each card in the card set to the layout manager.

[0378] Step 2407: After receiving the card data of each card in the card set, the layout manager sends a card display message to the View framework.

[0379] The card display message is used to request to display the cards in the card set. The card display message carries the card information of each card in the card set, and the card information includes the stretch attribute value of the card and the card data of the card.

[0380] Step 2408: After receiving the card display message, the View framework displays each card according to the card information of each card in the card set.

[0381] For example, after receiving the card display message, the View framework can draw corresponding graphics according to the card information of each card in the card set, and then submit the drawn graphics to the rendering service for rendering to display each card in the card set on the screen to present the stretching animation of the card set.

[0382] The card set can be stretched through the above steps 2404 to 2408. It should be noted that if the state change animation manager obtains the first motion effect coefficient of 1 in step 2404, the card set can be stretched and expanded by continuing to execute the above steps 2404 to 2408. In this case, the state change animation manager can also execute the following step 2409 when the first motion effect coefficient obtained is 1.

[0383] Step 2409: If the first animation effect coefficient most recently obtained by the state change animation manager is 1, a stretching animation effect execution completion message is sent to the state manager.

[0384] The stretching animation execution completion message is used to indicate that the stretching animation of the card set has been executed.

[0385] Step 2410: After receiving the stretching animation execution completion message, the state manager switches the state of the card set from the stretched state to the expanded state, and sends a stretching completion message to the interface management module.

[0386] The stretching completion message is used to indicate that the stretching of the card set has been completed.

[0387] In some embodiments, see Fig.25 The operation of the drag manager shrinking the card set from the expanded state to the stacked state may include the following steps 2501 to 2510:

[0388] Step 2501: The drag manager sends a shrink message to the state manager.

[0389] The shrink message is used to instruct to shrink the card set in the expanded state to a stacked state.

[0390] Step 2502: After receiving the shrink message, the state manager switches the state of the card set from the expanded state to the collapsed state, and sends a shrink animation execution message to the state change animation manager.

[0391] The shrinking animation execution message is used to instruct the execution of the shrinking animation.

[0392] Step 2503: After receiving the shrinking animation effect execution message, the state change animation manager periodically obtains the second animation effect coefficient.

[0393] The operation of the state change animation manager periodically acquiring the second animation effect coefficient is similar to the operation of the terminal periodically acquiring the second animation effect coefficient in step 1901 above, and this embodiment of the present application will not be repeated here.

[0394] For example, after the state change animation manager receives the shrink animation execution message, it can first obtain the second animation curve from the animation framework, and then obtain the second animation coefficient through the second animation curve at preset time intervals based on the time between the current moment and the end moment of the first drag operation (that is, the moment when the state change animation manager receives the shrink animation execution message).

[0395] In some embodiments, after receiving the shrink animation execution message, the state change animation manager can determine the expansion attribute value and stacking attribute value of each card in the card set. The operation of the state change animation manager determining the expansion attribute value and stacking attribute value of each card in the card set is similar to the operation of the terminal determining the expansion attribute value and stacking attribute value of each card in the card set in step 1902 above, and this embodiment of the application will not be repeated.

[0396] In this case, each time the state change animation manager obtains a second motion effect coefficient, it can determine the shrinkage attribute value of each card in the card set based on the most recently obtained second motion effect coefficient, the expansion attribute value and the stacking attribute value of each card in the card set, and display each card according to the shrinkage attribute value of each card in the card set, as described in steps 2504 to 2510 below.

[0397] Step 2504: Every time the state change animation manager obtains a second animation coefficient, it determines the shrink attribute value of each card in the card set based on the most recently obtained second animation coefficient, the expansion attribute value and the stacking attribute value of each card in the card set, and sends the shrink attribute value of each card in the card set to the layout manager.

[0398] The operation of the state change animation manager determining the shrink attribute value of each card in the card set based on the most recently acquired second motion effect coefficient and the expansion attribute value and stacking attribute value of each card in the card set is similar to the operation of the terminal determining the shrink attribute value of each card in the card set based on the most recently acquired second motion effect coefficient and the expansion attribute value and stacking attribute value of each card in the card set in the above step 1902, and the embodiments of the present application will not go into details therein.

[0399] After receiving the shrink attribute value of each card in the card set, the layout manager can obtain the card data of each card in the card set from the data adapter, as described in steps 2505 to 2506 below.

[0400] Step 2505: After receiving the shrink attribute value of each card in the card set, the layout manager sends a card data request message to the data adapter.

[0401] The card data request message is used to request to obtain the card data of each card in the card set.

[0402] Step 2506: After receiving the card data request message, the data adapter sends the card data of each card in the card set to the layout manager.

[0403] Step 2507: After receiving the card data of each card in the card set, the layout manager sends a card display message to the View framework.

[0404] The card display message is used to request to display the cards in the card set. The card display message carries the card information of each card in the card set, and the card information includes the shrink attribute value of the card and the card data of the card.

[0405] Step 2508: After receiving the card display message, the View framework displays each card according to the card information of each card in the card set.

[0406] For example, after the View framework receives the card display message, it can draw corresponding graphics according to the card information of each card in the card set, and then submit the drawn graphics to the rendering service for rendering, so as to display each card in the card set on the screen to present the shrinking animation of the card set.

[0407] The operation of the View framework drawing the corresponding graphics according to the card information of each card in the card set is similar to the operation of the terminal displaying each card according to the shrink attribute value of each card in the card set in the above step 1602, and the embodiment of the present application will not be repeated here.

[0408] The card set can be shrunk by the above steps 2504 to 2508. It should be noted that if the second motion effect coefficient newly obtained by the state change animation manager in step 2504 is 1, the card set can be shrunk and the card set can be stacked by continuing to execute the above steps 2504 to 2508. In this case, the state change animation manager can also execute the following step 2509 when the second motion effect coefficient newly obtained is 1.

[0409] Step 2509: If the second animation effect coefficient most recently acquired by the state change animation manager is 1, a shrink animation effect execution completion message is sent to the state manager.

[0410] The shrinking animation execution completion message is used to indicate that the shrinking animation of the card set has been executed.

[0411] Step 2510: After receiving the shrink animation execution completion message, the state manager switches the state of the card set from the shrunken state to the stacked state, and sends a shrink completion message to the drag manager.

[0412] The shrinking completion message is used to indicate that the shrinking of the card set has been completed.

[0413] It should be noted that the above Figure 23 to Figure 25 The embodiment has described in detail the process of inserting a card into a card set, and the following will describe in detail the process of removing a card from a card set.

[0414] Fig.26 is a flowchart of a card display method provided in an embodiment of the present application, see Fig.26 , the method comprises the following steps:

[0415] Step 2601: When the interface management module detects a second drag operation on a second card in the expanded card set, the drag position of the second card is periodically obtained if the second drag operation has not ended.

[0416] The interface management module is a module for managing the terminal interface. The interface management module can obtain the display area of ​​the expanded card set in the interface it manages. In this way, after obtaining the drag position of the second card, the interface management module can also determine whether the drag position of the second card is located in the display area of ​​the card set.

[0417] Optionally, the interface management module may include an interface module and a touch module. The interface module may detect a touch operation in the interface, and the touch module may determine whether the touch operation in the interface is a second drag operation. Furthermore, after determining that the touch operation in the interface is the second drag operation, the touch module may also determine whether the drag position of the second card is located in the display area of ​​the expanded card set.

[0418] When the second drag operation has not ended, the interface management module continues to execute steps 2602 to 2608 each time it obtains the drag position of the second card and when the drag position of the second card is located in the display area of ​​the card set; and continues to execute steps 2609 to 2611 when the drag position of the second card is not located in the display area of ​​the card set.

[0419] Step 2602: When the drag position of the second card is located in the display area of ​​the card set, the interface management module sends a drag request message to the drag manager, and the drag request message carries the drag position of the second card.

[0420] The drag request message is used to request adjustment of the sorting position of the second card in the card set.

[0421] Step 2603: After receiving the drag request message, the drag manager adjusts the sorting position of the second card in the card set according to the drag position of the second card.

[0422] The operation of the drag manager adjusting the sorting position of the second card in the card set according to the drag position of the second card is similar to the operation of the terminal adjusting the sorting position of the second card in the card set according to the drag position of the second card in step 2002, and this embodiment of the present application will not be repeated here.

[0423] After the drag manager adjusts the sort position of the second card in the card set according to the drag position of the second card, the sort position of each card in the card set is adjusted. Since the sort position of each card in the card set has been adjusted, the drag manager can display each card in the card set. Specifically, the drag manager can re-determine the expansion attribute value of each card in the card set, and then display each card in the card set accordingly, which can be implemented through the following steps 2604 to 2608.

[0424] Step 2604: The drag manager sends the expansion property value of each card in the card set to the layout manager.

[0425] Step 2605: After receiving the expansion attribute value of each card in the card set, the layout manager sends a card data request message to the data adapter.

[0426] The card data request message is used to request to obtain the card data of each card in the card set.

[0427] Step 2606: After receiving the card data request message, the data adapter sends the card data of each card in the card set to the layout manager.

[0428] Step 2607: After receiving the card data of each card in the card set, the layout manager sends a card display message to the View framework.

[0429] The card display message is used to request to display the cards in the card set. The card display message carries the card information of each card in the card set, and the card information includes the expansion attribute value of the card and the card data of the card.

[0430] Step 2608: After receiving the card display message, the View framework displays each card according to the card information of each card in the card set.

[0431] Step 2609: The interface management module sends a card deletion message to the data adapter when the drag position of the second card is not located in the display area of ​​the card set.

[0432] Step 2610: After receiving the card deletion message, the data adapter deletes the second card in the card set.

[0433] After the data adapter deletes the second card in the card set, it can also display each card in the card set in an expanded state.

[0434] Specifically, in step 26a, the data adapter can send the card information of each card in the card set to the layout manager, and the card information includes the expansion attribute value of the card and the card data of the card. In step 26b, after receiving the card information of each card in the card set, the layout manager sends a card display message to the View framework, and the card display message is used to request the display of the cards in the card set, and the card display message carries the card information of each card in the card set. In step 26c, after receiving the card display message, the View framework displays each card according to the card information of each card in the card set.

[0435] Step 2611: After the interface management module sends a card deletion message to the data adapter, the card set is collapsed from the expanded state to the stacked state.

[0436] The operation of the interface management module to shrink the card set from the expanded state to the stacked state is similar to the operation of the drag manager to shrink the card set from the expanded state to the stacked state, and the embodiment of the present application will not be repeated here.

[0437] Fig. 27 is a schematic diagram of the structure of a card display device provided in an embodiment of the present application. The device can be implemented as part or all of a computer device by software, hardware, or a combination of both. The computer device can be Figure 3 to Figure 4 The terminal 100 described in the embodiment. Fig. 27The device includes: a stretching module 2701, an adjustment module 2702 and a display module 2703.

[0438] The stretching module 2701 is used for responding to a first drag operation of dragging a first card to a display area of ​​a stacked card set, adding a target card to the card set, stretching the card set from a stacked state to an expanded state, with the target card in a hidden state, and having the same card data as the first card;

[0439] An adjustment module 2702, configured to adjust the sorting position of the target card in the card set according to the dragged position of the first card when the card set is in the expanded state, if the first drag operation ends and the dragged position of the first card is located in the display area of ​​the card set at the end of the first drag operation;

[0440] Display module 2703 is used to display each card in the card set after adjusting the target card to a visible state.

[0441] Optionally, the device further comprises:

[0442] A first acquisition module, configured to periodically acquire the drag position of the first card if the first drag operation is not completed when the card set is in an expanded state;

[0443] The display module 2703 is further used to adjust the sorting position of the target card in the card set according to the dragging position of the first card each time the dragging position of the first card is obtained, and display each card in the card set while keeping the target card in a hidden state.

[0444] Optionally, the adjustment module 2702 is used to:

[0445] If the drag position of the first card is located in the display area of ​​a card in the card set, the first sort position and the second sort position are obtained, the first sort position is the current sort position of the card in the card set, and the second sort position is the current sort position of the target card in the card set;

[0446] If the first sorting position is before the second sorting position, the sorting positions of the card sorted at the first sorting position and all the cards sorted after the first sorting position and before the second sorting position in the card set are all moved backward by one position, and the sorting position of the target card in the card set is adjusted to the first sorting position;

[0447] If the first sorting position is behind the second sorting position, the card sorted at the first sorting position and all cards sorted after the second sorting position and before the first sorting position in the card set will be moved forward by one position, and the sorting position of the target card in the card set will be adjusted to the first sorting position.

[0448] Optionally, the stretching module 2701 is used to:

[0449] Periodically obtain a first motion effect coefficient, where the first motion effect coefficient is used to indicate the stretching progress of the card set;

[0450] Every time a first motion effect coefficient is obtained, the stretching attribute value of each card in the card set is determined according to the most recently obtained first motion effect coefficient, the stacking attribute value and the expansion attribute value of each card in the card set, and each card in the card set is displayed according to the stretching attribute value of each card in the card set.

[0451] Optionally, the expansion attribute value of the card includes an expansion position, and the expansion position of the card is the position coordinate of the top left corner of the card. The stretching module 2701 is used to:

[0452] Determine the horizontal coordinate of the expansion position of each card in the card set according to the width of the expanded card;

[0453] The ordinate of the expanded position of each card is determined according to the expanded card height, the card interval height and the sorting sequence number of each card in the card set. The card interval height is the height of the interval between two adjacent cards expanded in the expanded card set.

[0454] Optionally, the device further comprises:

[0455] The contraction module is used to delete the target card in the card set and contract the card set from the expanded state to the stacked state if the first drag operation ends and the drag position of the first card is not located in the display area of ​​the card set when the first drag operation ends when the card set is in the expanded state.

[0456] Optionally, the device further comprises:

[0457] A second acquisition module, configured to, in response to a second drag operation on a second card in the expanded card set, periodically acquire a drag position of the second card if the second drag operation is not completed;

[0458] The contraction module is used to delete the second card in the card set and contract the card set from the expanded state to the stacked state when the drag position of the second card is not located in the display area of ​​the card set each time the drag position of the second card is obtained.

[0459] Optionally, the shrink module is used to:

[0460] Periodically obtain a second motion effect coefficient, where the second motion effect coefficient is used to indicate the shrinking progress of the card set;

[0461] Every time a second motion effect coefficient is obtained, the shrinkage attribute value of each card in the card set is determined according to the most recently obtained second motion effect coefficient, the expansion attribute value and the stacking attribute value of each card in the card set, and each card in the card set is displayed according to the shrinkage attribute value of each card in the card set.

[0462] In an embodiment of the present application, in response to a first drag operation of dragging a first card to a display area of ​​a stacked card set, a target card whose card data is the same as that of the first card and is in a hidden state is added to the card set, and then the card set is stretched from a stacked state to an expanded state. In this way, the user can know which cards exist in the card set, which is convenient for the user to determine the card insertion position. When the card set is in an expanded state, if the first drag operation ends and the drag position of the first card is located in the display area of ​​the card set at the end of the first drag operation, the sorting position of the target card in the card set is adjusted according to the drag position of the first card, and each card in the card set is displayed after the target card is adjusted to a visible state, so that the first card is inserted into the card set. Since the sorting position of the target card in the card set is adjusted according to the drag position of the first card, the user can adjust the card insertion position by dragging the first card, which is convenient for the user to use. In this way, the flexibility and convenience of inserting cards in the card set are improved.

[0463] It should be noted that: the card display device provided in the above embodiment only uses the division of the above-mentioned functional modules as an example when displaying cards. In actual applications, the above-mentioned functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above.

[0464] The functional units and modules in the above embodiments may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit, and the above integrated units may be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the protection scope of the embodiments of the present application.

[0465] The card display device and the card display method provided in the above embodiments belong to the same concept. The specific working process and technical effects brought about by the units and modules in the above embodiments can be found in the method embodiment part and will not be repeated here.

[0466] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network or other programmable device. The computer instructions may be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transmitted from a website site, computer, server or data center by wired (such as: coaxial cable, optical fiber, data subscriber line (Digital Subscriber Line, DSL)) or wireless (such as: infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium may be any available medium that a computer can access, or a data storage device such as a server or data center that includes one or more available media integrations. The available medium may be a magnetic medium (such as a floppy disk, a hard disk, a magnetic tape), an optical medium (such as a digital versatile disc (DVD)), or a semiconductor medium (such as a solid state disk (SSD)).

[0467] The above are optional embodiments provided for the present application and are not intended to limit the present application. Any modifications, equivalent substitutions, improvements, etc. made within the technical scope disclosed in the present application shall be included in the protection scope of the present application.

Claims

1. A card display method, characterized in that: The method comprises: In response to a first drag operation of dragging a first card to a display area of ​​a stacked card set, a target card is added to the card set, the card set is stretched from a stacked state to an expanded state, the target card is in a hidden state, and the card data of the target card is the same as the card data of the first card; When the card set is in the expanded state, if the first drag operation ends and the drag position of the first card is located in the display area of ​​the card set at the end of the first drag operation, adjusting the sort position of the target card in the card set according to the drag position of the first card; Each card in the card set is displayed after adjusting the target card to a visible state.

2. The method according to claim 1, characterized in that After the card set is stretched from a stacked state to an unfolded state, the method further includes: When the card set is in the expanded state, if the first drag operation is not completed, periodically obtaining the drag position of the first card; Whenever the drag position of the first card is obtained, the sort position of the target card in the card set is adjusted according to the drag position of the first card, and each card in the card set is displayed while keeping the target card in a hidden state.

3. The method according to claim 1 or 2, characterized in that The adjusting the sorting position of the target card in the card set according to the drag position of the first card includes: If the drag position of the first card is located in the display area of ​​a card in the card set, a first sorting position and a second sorting position are obtained, wherein the first sorting position is the current sorting position of the card in the card set, and the second sorting position is the current sorting position of the target card in the card set; If the first sorting position is before the second sorting position, the card sorted at the first sorting position and all cards sorted after the first sorting position and before the second sorting position in the card set are all moved backward by one position, and the sorting position of the target card in the card set is adjusted to the first sorting position; If the first sorting position is behind the second sorting position, the card sorted at the first sorting position and all cards sorted after the second sorting position and before the first sorting position in the card set will be moved forward one position, and the sorting position of the target card in the card set will be adjusted to the first sorting position.

4. The method according to any one of claims 1 to 3, characterized in that: The step of stretching the card set from a stacked state to an unfolded state includes: Periodically acquiring a first motion effect coefficient, where the first motion effect coefficient is used to indicate a stretching progress of the card set; Each time a first motion effect coefficient is obtained, the stretching attribute value of each card in the card set is determined according to the most recently obtained first motion effect coefficient, the stacking attribute value and the expansion attribute value of each card in the card set, and each card in the card set is displayed according to the stretching attribute value of each card in the card set.

5. The method according to claim 4, characterized in that The expansion attribute value of the card includes an expansion position, and the expansion position of the card is the position coordinate of the upper left corner vertex of the card. The method further includes: Determine the horizontal coordinate of the expansion position of each card in the card set according to the width of the expanded card; The vertical coordinate of the unfolded position of each card is determined according to the unfolded card height, the card interval height and the sorting sequence number of each card in the card set. The card interval height is the height of the interval between two adjacent unfolded cards in the unfolded card set.

6. The method according to any one of claims 1 to 5, characterized in that: After the card set is stretched from a stacked state to an unfolded state, the method further includes: When the card set is in an expanded state, if the first drag operation ends and the drag position of the first card is not located in the display area of ​​the card set when the first drag operation ends, the target card in the card set is deleted, and the card set is contracted from an expanded state to a stacked state.

7. The method according to any one of claims 1 to 6, characterized in that: The method further comprises: In response to a second drag operation on a second card in the expanded card set, periodically acquiring a drag position of the second card if the second drag operation is not ended; Whenever the drag position of the second card is obtained, if the drag position of the second card is not located in the display area of ​​the card set, the second card in the card set is deleted, and the card set is contracted from the expanded state to the stacked state.

8. The method according to claim 6 or 7, characterized in that The step of shrinking the card set from an expanded state to a stacked state includes: Periodically acquiring a second motion effect coefficient, where the second motion effect coefficient is used to indicate the shrinking progress of the card set; Each time a second motion effect coefficient is obtained, the shrinkage attribute value of each card in the card set is determined according to the most recently obtained second motion effect coefficient, the expansion attribute value and the stacking attribute value of each card in the card set, and each card is displayed according to the shrinkage attribute value of each card in the card set.

9. A card display method, characterized in that: The method comprises: When the interface management module detects a first drag operation of dragging a first card to a display area of ​​a stacked card set, the interface management module sends card data of the first card to the data adapter; After receiving the card data of the first card, the data adapter adds a target card to the card set, the target card is in a hidden state, and the card data of the target card is the same as the card data of the first card; After the interface management module sends the card data of the first card to the data adapter, the card set is stretched from a stacked state to an expanded state; The interface management module sends a drag end message carrying the drag position of the first card to the drag manager when the first drag operation ends; After the drag manager receives the drag end message, if the drag position of the first card is located in the display area of ​​the card set, the sort position of the target card in the card set is adjusted according to the drag position of the first card, and each card in the card set is displayed after adjusting the target card to a visible state.

10. The method according to claim 9, characterized in that After the card set is stretched from a stacked state to an unfolded state, the method further includes: The interface management module periodically obtains the drag position of the first card when the first drag operation is not completed, and sends the drag position of the first card to the drag manager each time the drag position of the first card is obtained; After receiving the drag position of the first card, the drag manager adjusts the sort position of the target card in the card set according to the drag position of the first card, and displays each card in the card set while keeping the target card in a hidden state.

11. The method according to claim 9 or 10, characterized in that The method further comprises: After receiving the drag end message, the drag manager deletes the target card in the card set and shrinks the card set from an expanded state to a stacked state if the drag position of the first card is not located in the display area of ​​the card set.

12. The method according to any one of claims 9 to 11, characterized in that: The method further comprises: When the interface management module detects a second drag operation on a second card in the expanded card set, periodically acquiring a drag position of the second card if the second drag operation is not completed; The interface management module sends a card deletion message to the data adapter every time it obtains the drag position of the second card if the drag position of the second card is not located in the display area of ​​the card set; After receiving the card deletion message, the data adapter deletes the second card in the card set; After the interface management module sends the card deletion message to the data adapter, the card set is collapsed from the expanded state to the stacked state.

13. A computer device, characterized in that: The computer device comprises a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program implements the method according to any one of claims 1 to 12 when executed by the processor.

14. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores instructions, which, when executed on a computer, enable the computer to execute the method according to any one of claims 1 to 12.

Images