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 steps of displaying a first interface; in response to a first operation on the first display area, periodically obtaining a first dynamic effect coefficient; in response to the obtained first dynamic effect coefficient, determining a third attribute value of the cards in the card set in the stretching process according to the first dynamic effect coefficient, the first attribute value of the cards in the card set in the stacked state and the second attribute value of the cards in the card set in the unfolded state; displaying the stretching dynamic effect according to the third attribute value of the card in the card set; in response to the end of the stretching dynamic effect, a second interface is displayed, and the second interface completely displays at least two cards. According to the method, the card set is automatically stretched according to the first dynamic effect coefficient, so that a user does not need to continuously operate in the stretching process of the card set, the card set can be unfolded only by triggering the first operation, and the user can conveniently use the card set. Therefore, the flexibility and convenience of the card set in use 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 lives. 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. At present, in order to save terminal interface space, the terminal can aggregate multiple cards into a card set and display them on the terminal interface. Summary of the invention

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

[0004] In the first aspect, a card display method is provided. In the method, a first interface is displayed, the first interface includes a first display area, the first display area includes a card set displayed in a stacked state, and the first display area displays the top card of multiple cards in the card set; in response to a first operation on the first display area, a first motion effect coefficient is periodically obtained; in response to the obtained first motion effect coefficient, a third value of the card in the card set during the stretching process is determined according to the first motion effect coefficient, a first value of the card in the card set in the stacked state, and a second value in the expanded state; a stretching motion effect is displayed according to the third value of the card in the card set; in response to the end of the stretching motion effect, a second interface is displayed, the second interface includes a card set displayed in an expanded state, and the second interface fully displays at least two cards, which are cards in the card set.

[0005] The first operation is used to instruct to stretch the card set from a stacked state to an unfolded state. Optionally, the first operation may be an upward sliding operation or a downward sliding operation with a sliding distance greater than or equal to a first preset distance. For example, the first preset distance may be close to or equal to the height of the card set in the stacked state.

[0006] Stretching the card set means switching the card set from a stacked state to a stretched state. When the card set is in a stretched state, the stretching animation of the card set is displayed. The stretching animation 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.

[0007] The first animation coefficient is used to indicate the stretching progress of the card set. 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. 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.

[0008] Optionally, the attribute value of the card may include one or more of the position, transparency, zoom ratio, etc. of the card.

[0009] The first attribute value of each card in the card set refers to the attribute value of each card when the card set is in a stacked state, and the second attribute value of each card in the card set refers to the attribute value of each card when the card set is in an expanded state.

[0010] In the case where the attribute value of a card includes the position of the card, the first attribute value of the card includes the stacking position of the card, and the second attribute value of the card includes the expanded 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 expanded position of the card is the position of the card when the card set is in an expanded state.

[0011] In the case where the attribute value of the card includes the transparency of the card, the first attribute value of the card includes the stacking transparency of the card, and the second 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.

[0012] In the case where the attribute value of a card includes a zoom ratio of the card, the first attribute value of the card includes the stacking zoom ratio of the card, and the second attribute value of the card includes the expansion zoom ratio of the card. The stacking zoom ratio of the card is the zoom ratio of the card when the card set is in a stacked state, and the expansion zoom ratio of the card is the zoom ratio of the card when the card set is in an expanded state.

[0013] The third 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 third attribute value of each card in the card set determined based on the periodically obtained first motion effect coefficient is also constantly changing. In this case, each card is displayed according to the constantly changing third 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 effect of the card set.

[0014] In this application, a stacked card set located at any position in the interface can be stretched to expand. Moreover, since the card set is automatically stretched according to the first motion effect coefficient, the user does not need to continue to operate during the stretching process of the card set, and only needs to trigger the first operation to expand the card set, which is convenient for the user to use. In this way, the flexibility and convenience of using the card set are improved.

[0015] Optionally, the number of the multiple cards is less than or equal to a preset number, and the multiple cards are fully and centered in the second interface.

[0016] Optionally, the number of the multiple cards is greater than a preset number, the preset number of cards among the multiple cards are fully displayed in the second interface, and the other cards among the multiple cards except the preset number of cards are stacked and displayed in the second interface.

[0017] The first animation coefficient changes continuously during the stretching process of the card set. The first animation coefficient is positively correlated with the stretching duration, that is, the first animation coefficient increases with the increase of the stretching duration, and the stretching duration is the time distance between the current moment and the response moment of the first operation. Optionally, the first animation coefficient can be obtained according to the first animation curve. The first animation curve is a curve of the relationship between the first animation coefficient and the stretching duration. The first animation curve can be a pre-set curve for controlling the stretching progress of the card set. By way of example, the first animation curve can be a spring animation curve.

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

[0019] When the card set is in a stacked state, in response to a first operation, a first attribute value and a second attribute value of each card in the card set can be determined. In this case, the first attribute value of each card in the card set can be determined based on the current attribute value of each card in the card set in the stacked state, and the second attribute value of each card in the card set can be determined by estimating the attribute value of each card when the card set is stretched to an expanded state.

[0020] Optionally, the second attribute value of the card includes an expanded position, and the expanded position of the card is the position coordinate of the top left corner of the card. The method further includes: in response to the first operation on the stacked card set, determining the horizontal coordinate of the expanded position of each card in the card set according to the expanded card width, and determining the vertical coordinate of the expanded 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. The card interval height is the height of the interval between two adjacent cards in the expanded card set.

[0021] The operation of determining the horizontal coordinate of the expansion position of each card in the card set according to the width of the expanded card can be: half of the difference between the width of the stacked card set and the width of the expanded card is determined as the horizontal coordinate of the expansion position of each card in the card set. In this case, it is assumed that the top card in the stacked card set is completely on the right side of the screen, and the position of each card in the expanded card set is determined based on this as a reference. Alternatively, half of the difference between the screen width and the width of the expanded card is determined as the horizontal coordinate of the expansion position of each card in the card set. In this case, the expanded card set is displayed centered in the X-axis direction of the screen.

[0022] As an example, the operation of determining the vertical coordinate of the expanded position of each card according to the expanded card height, the card interval height and the sorting number of each card in the card set can be: obtain a first height, which is the sum of the expanded card height and the card interval height; when the card set is expanded upward, for any card in the card set, 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 first preset height to obtain the vertical coordinate of the expanded position of the card, so that the expanded card set is displayed at the top of the screen in the Y-axis direction; when the card set is expanded downward, for any card in the card set, subtract the card interval height from the screen height, subtract the product of the sorting number of the card and the first height, and subtract the second preset height to obtain the vertical coordinate of the expanded position of the card, so that the expanded card set is displayed at the bottom of the screen in the Y-axis direction.

[0023] As another example, the operation of determining the vertical coordinate of the expanded 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 may be:

[0024] If the number of multiple cards is less than or equal to the preset number, the second height is obtained, which is half of the difference between the screen height and the card set expansion height. The card set expansion height is obtained by subtracting the card spacing height from the product of the number of cards in the card set and the first height, and the first height is the sum of the expanded card height and the card spacing height. When the card set is expanded upward, for any card in the card set, the value obtained by subtracting 1 from the sorting number of a card is multiplied by the first height and then added to the second height to obtain the ordinate of the expansion position of a card. When the card set is expanded downward, for any card in the card set, the screen height is subtracted from the second height, the card spacing height, and the product of the sorting number of a card and the first height to obtain the ordinate of the expansion position of a card. In this case, when the number of cards in the card set is small, the expanded card set is displayed in the center of the Y-axis direction of the screen.

[0025] If the number of multiple cards is greater than the preset number, a fourth height is obtained, which is half of the difference between the screen height and the third height, and the third height is obtained by subtracting the card spacing height from the product of the preset number and the first height; when the card set is expanded upward, for any card among the first k cards in the card set, the value obtained by subtracting 1 from the sorting number of a card is multiplied by the first height and then added to the fourth height to obtain the vertical coordinate of the expanded position of a card, where k is the preset number; the screen height is subtracted from the expanded card height and the second preset height to obtain the vertical coordinate of the expanded position of each card in the card set except the first k cards; when the card set is expanded downward, for any card among the first k cards in the card set, the screen height is subtracted from the fourth height, the card spacing height, and the product of the sorting number of a card and the first height to obtain the vertical coordinate of the expanded position of a card; the vertical coordinate of the expanded position of each card in the card set except the first k cards is determined as the first preset height. 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.

[0026] Optionally, the operation of determining the third attribute value of each card in the card set based on the most recently acquired first motion effect coefficient, the first attribute value and the second attribute value of each card in the card set can be: for any card in the card set, subtract the first attribute value of the card from the second attribute value of the card to obtain the first value; multiply the first value by the most recently acquired first motion effect coefficient to obtain the second value; add the second value to the first attribute value of the card to obtain the third attribute value of the card.

[0027] The first value is the difference between the second attribute value that the card is going to achieve and the original first attribute value. Since the first motion effect coefficient is used to indicate the stretching progress, the difference between the current third attribute value of the card and the original first attribute value of the card is the product of the first value and the first motion effect coefficient, which is the second value. Then the current third attribute value of the card is the sum of the second value and the original first attribute value.

[0028] Optionally, the second interface includes a second display area, and the second display area includes a card set displayed in an expanded state. The method also includes: in response to a second operation on the second display area, periodically obtaining a second animation coefficient; in response to the obtained second animation coefficient, determining a fourth attribute value of the cards in the card set during the contraction process according to the second animation coefficient, the second attribute value of the cards in the card set, and the first attribute value; and displaying the contraction animation according to the fourth attribute value of the cards in the card set.

[0029] The second operation is used to indicate that the card set is collapsed from the expanded state to the stacked state. Optionally, the second operation may be an upward sliding operation or a downward sliding operation with a sliding distance greater than or equal to a second preset distance. For example, the second preset distance may be close to or equal to the height of the expanded card. The second preset distance may be the same as or different from the first preset distance, for example, the second preset distance may be less than or equal to the first preset distance.

[0030] Shrinking the card set means switching the card set from an expanded state to a shrunken state. When the card set is in a shrunken state, the shrinking animation of the card set is displayed. The shrinking animation of the card set is used to show the property 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.

[0031] The second animation coefficient is used to indicate the progress of the card set shrinking. 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. When the second animation coefficient is 1, it means that the card set has been shrunk, and the shrinking animation can be stopped at this time.

[0032] The second animation coefficient changes continuously during the contraction process of the card set. The second animation coefficient is positively correlated with the contraction duration, that is, the second animation coefficient increases with the increase of the contraction duration, which is the time between the current moment and the response moment of the second operation.

[0033] Optionally, 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.

[0034] In this case, the operation of periodically obtaining the second animation coefficient can be: every preset time, according to the time between the current moment and the response moment of the second operation (i.e., the current contraction time), the second animation coefficient is obtained through the second animation curve. In other words, the second animation coefficient can be obtained 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.

[0035] The fourth 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 contracted state. Since the second motion effect coefficient is obtained periodically and the second motion effect coefficient is constantly increasing, the fourth 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 fourth attribute value of each card in the card set, that is, the dynamic display of each card is realized, thereby realizing the contraction of the card set and presenting the contraction effect of the card set.

[0036] Specifically, for any card in the card set, you can subtract the second attribute value of the card from the first attribute value of the card to get a third value, multiply the third value by the most recently acquired second motion effect coefficient to get a fourth value, and add the fourth value to the second attribute value of the card to get the fourth attribute value of the card.

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

[0038] In a second aspect, a card display device is provided, the card display device has the function of implementing the card display method in the first aspect. The card display device includes at least one module, and the at least one module is used to implement the card display method provided in the first aspect.

[0039] In a third 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.

[0040] In a fourth 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.

[0041] In a fifth 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.

[0042] The technical effects obtained by the above-mentioned second, third, fourth and fifth 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

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

[0044] Figure 2 It is a schematic diagram of the stretching process of a card set provided in an embodiment of the present application;

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

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

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

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

[0049] Figure 7 is a schematic diagram of a first operation provided in an embodiment of the present application;

[0050] Figure 8 It is a schematic diagram of the movement of cards in a card set provided by an embodiment of the present application;

[0051] Fig. 9 is a schematic diagram of an interface where a card set is provided in an embodiment of the present application;

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

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

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

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

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

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

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

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

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

[0061] Fig.19 This is a flowchart of the fourth card display method provided in an embodiment of the present application. DETAILED DESCRIPTION

[0062] 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.

[0063] 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.

[0064] 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.

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

[0066] 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.

[0067] 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.

[0068] 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.

[0069] 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.).

[0070] 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.

[0071] 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.

[0072] 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 of the card set, but cannot see the lower cards of 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 1 As 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.

[0073] In related technologies, such as Figure 2As shown in Figure (a) in Figure 1, the stacked card set is displayed at the top of the terminal interface, the top card of the card set is fully expanded, and other cards are stacked on the lower layer of the card set. If the user wants to expand the card set, he can perform a sliding operation on the card set, and the terminal can stretch the card set according to the sliding distance of the sliding operation. For example, if the user's finger is on Figure 2 Slide down on the card set shown in Figure (a) in Figure 1. When the sliding distance of the user's finger reaches distance 1, as shown in Figure 1 Figure 2 As shown in Figure (b) in FIG. 1 , the terminal can expand all cards in the card collection except the top card by two-thirds. The user continues to slide his finger downward. When the sliding distance of the user's finger reaches distance 2, as shown in FIG. Figure 2 As shown in Figure (c) in FIG. 1 , the terminal can expand all cards in the card collection except the top card by three quarters. The user continues to slide his finger downward. When the sliding distance of the user's finger reaches distance 3, as shown in FIG. Figure 2 As shown in FIG. 5( d ) in FIG. 5 , the terminal may fully expand at least one card in the card collection except for the top card.

[0074] It can be seen that in the related art, the terminal stretches the stacked card set by following the hand. In this case, on the one hand, the stacked card set needs to be located at the top of the terminal interface, so that the user's finger can stretch the card set by sliding down for a long time. On the other hand, the user's finger needs to continue to slide down during the stretching process of the card set, and needs to slide down for a considerable distance to fully expand the card set.

[0075] To this end, an embodiment of the present application provides a card display method that can stretch a stacked card set located at any position in the terminal interface to expand. In addition, a first dynamic effect coefficient is introduced to indicate the stretching progress of the card set. After the user triggers the first operation on the stacked card set, the terminal does not need to stretch the card set according to the relevant information of the first operation, but can automatically stretch the card set according to the first dynamic effect coefficient. In this way, the user does not need to continue operating during the stretching process of the card set, and only needs to trigger the first operation to expand the card set, which is convenient for users to use. In this way, the flexibility and convenience of using the card set are improved.

[0076] 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.

[0077] 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.

[0078] 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.

[0079] 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.

[0080] 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.

[0081] 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.

[0082] 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.

[0083] 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.

[0084] 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.

[0085] 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.

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

[0087] 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.

[0088] 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.

[0089] 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.

[0090] 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.

[0091] 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), a motion effect framework, etc. 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 motion effects) of cards in the card set. The motion effect framework is used to manage the motion effect parameters of cards in the card set. The motion effects of cards in the card set 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, etc.

[0092] Optionally, the card set control manager may include a state manager, a state change animation manager, a layout manager, a data adapter, etc. Among them, 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. 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, etc.

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

[0094] 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.

[0095] 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.

[0096] 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.

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

[0098] 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 .

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

[0100] 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:

[0101] Step 500: The terminal displays a first interface.

[0102] The first interface includes a first display area, and the first display area includes a card set displayed in a stacked state. The first display area displays the top card of multiple cards in the card set, that is, the first display area displays the top card of the card set in a stacked state.

[0103] For example, Figure 6 As shown in Figure (a) in FIG. 1 , the first interface may refer to the negative one screen interface. Alternatively, Figure 6 As shown in Figure (b), the first interface may refer to the main interface.

[0104] Step 501: The terminal periodically obtains a first motion effect coefficient in response to a first operation on a first display area.

[0105] The cards in the card set have attribute values, and the attribute values ​​of the cards may include one or more of the position, transparency, zoom ratio, etc. of the cards.

[0106] Among them, the position of the card can be represented by the coordinates of a specific position point in the card. For example, the position of the 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 does not limit this. It should be noted that when the corners of the card are right angles, the vertices of the card described in the embodiment of the present application refer to the vertices of the card itself. When the corners of the card are rounded, the vertices of the card described in the embodiment of the present application refer to the vertices of the minimum circumscribed rectangle of the card.

[0107] Optionally, the position of the card can be determined based on the screen coordinate system.

[0108] The scaling ratio of a card is the scaling ratio of the current size of the card to the preset original size. The size of a card includes the horizontal length (also called width) and the vertical length (also called height) of the card. The scaling ratio of the card in width and height is the same, that is, the scaling ratio of the card is the ratio of the current width of the card to the preset original width, and the scaling ratio of the current height of the card to the preset original height.

[0109] 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.

[0110] 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 increase in sequence, that is, the transparency of the topmost card to the bottommost card in the stacked card set increases in sequence. 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. Among them, the greater the transparency of a card, the more transparent the card.

[0111] The size of the stacked card set may be the size of the topmost card of the stacked card set. That is, the width of the stacked card set may be the width of the topmost card of the stacked card set, and the height of the stacked card set may be the height of the topmost card of the stacked card set.

[0112] 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.

[0113] 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.

[0114] 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.

[0115] The first operation is used to instruct to stretch the card set from a stacked state to an expanded state. The first operation may be triggered by a user, for example, the first operation may be a click operation, a slide operation, a gesture operation, a somatosensory operation, a voice operation, etc.

[0116] In some embodiments, Figure 7 As shown, the first operation may be an upward sliding operation or a downward sliding operation with a sliding distance greater than or equal to a first preset distance. For example, the first preset distance may be close to or equal to the height of the card set in the stacked state.

[0117] For example, the user can slide upward in the first display area, and when the sliding distance reaches a first preset distance, the sliding operation is a first operation, and the terminal stretches the card set in the first display area in response to the first operation. In this case, the first operation indicates stretching the card set upward, and accordingly, the card set will eventually expand upward.

[0118] For another example, the user can slide down in the first display area, and when the sliding distance reaches a first preset distance, the sliding operation is a first operation, and the terminal stretches the card set in the first display area in response to the first operation. In this case, the first operation indicates stretching the card set downward, and accordingly, the card set will eventually expand downward.

[0119] In one possible scenario, Figure 8As shown in Figure (a) of FIG. 1 , the user performs an upward sliding operation in the first display area. When the upward sliding distance of the upward sliding operation does not reach the first preset distance, as shown in FIG. Figure 8 As shown in (b) of FIG. 1 , the terminal can move the topmost card of the card set upward in the first display area. In this case, the portion of the topmost card of the card set that is moved outside the first display area is hidden, the remaining portion is still visible, and the portion of the next card that is not blocked by the topmost card is revealed. Figure 8 As shown in Figure (c) of FIG. 1 , if the sliding distance of the sliding operation reaches the first preset distance, the sliding operation is responded to by the terminal as the first operation, and the terminal can stretch the card set upward to expand in response to the first operation. If the user does not continue the sliding operation but leaves the screen before the sliding distance reaches the first preset distance, that is, the sliding operation ends before the sliding distance reaches the first preset distance, then Figure 8 As shown in Figure (d) in the figure, the terminal can reset the top card of the card set, and the card set is still in a stacked state.

[0120] In one possible scenario, the user performs a sliding operation in the first display area. When the sliding distance of the sliding operation does not reach the first preset distance, the terminal can move the top card of the card set downward in the first display area. In this case, the part of the top card of the card set that is moved outside the first display area is hidden, the rest is still visible, and the part of the next card that is not blocked by the top card is revealed. Afterwards, if the sliding distance of the sliding operation reaches the first preset distance, the sliding operation is responded to by the terminal as the first operation, and the terminal can stretch the card set downward to expand in response to the first operation. If the user does not continue the sliding operation but leaves the screen before the sliding distance reaches the first preset distance, that is, the sliding operation ends before the sliding distance reaches the first preset distance, then the terminal can reset the top card of the card set, and the card set is still in a stacked state.

[0121] In some embodiments, the interface of the card set in the stacked state is different from the interface of the card set in the unfolded state. Fig. 9 As shown in Figure (a) of FIG. 1 , the interface where the card set is in the stacked state is the first interface of the terminal, and the area in the first interface for displaying the card set in the stacked state is the first display area. When the card set is switched from the stacked state to the expanded state, as shown in FIG. Fig. 9 As shown in Figure (b) in the figure, the terminal displays the second interface on the upper layer of the first interface, and displays the expanded card set on the second interface. The area in the second interface for displaying the expanded card set is the second display area. For example, in addition to displaying the card set, the second interface can also display controls related to the card set, such as, Fig. 9The smart carousel control and smart recommendation control shown in Figure (b) in the figure.

[0122] 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.

[0123] 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 not yet 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.

[0124] 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 operation.

[0125] 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.

[0126] 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.

[0127] In this case, the operation of the terminal periodically obtaining the first animation coefficient can be: every preset time, according to the time distance between the current moment and the response moment of the first operation (i.e., the current stretching duration), the first animation coefficient is obtained through the first animation curve. The response moment of the first operation refers to the moment when the terminal starts to execute the stretching of the card set in response to the first operation. In other words, the terminal can obtain the first animation coefficient once every preset time, and specifically, can obtain the first animation coefficient corresponding to the current stretching duration in the first animation curve once every preset time. In this way, the periodically obtained first animation coefficient will increase with the increase of the stretching duration.

[0128] 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 latest obtained first animation coefficient. The specific operation is described in step 502 below.

[0129] Step 502: In response to the acquired first motion effect coefficient, the terminal determines the stretching attribute values ​​of the cards in the card set according to the first motion effect coefficient, the stacking attribute values ​​and the expanding attribute values ​​of the cards in the card set, and displays the cards in the card set according to the stretching attribute values ​​of the cards in the card set.

[0130] The stacking attribute value of any card in the card set refers to the attribute value of the card when the card set is in a stacked state, and the expansion attribute value of any card in the card set refers to the attribute value of the card when the card set is in an expanded state. In the embodiment of the present application, the stacking attribute value of the card can also be referred to as the first attribute value of the card in the stacked state, and the expansion attribute value of the card can also be referred to as the second attribute value of the card in the expanded state.

[0131] Displaying the cards in the card set according to the stretch attribute values ​​of the cards in the card set, that is, displaying the stretch animation effect according to the stretch attribute values ​​of the cards in the card set.

[0132] 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.

[0133] 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.

[0134] 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.

[0135] When the card set is in a stacked state, the terminal can determine the stacking attribute value and the expansion attribute value of each card in the card set in response to the first operation. In this case, 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 card set in the stacked state, and can determine the expansion 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 expansion state.

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

[0137] 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.

[0138] 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.

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

[0140] Next, we take the origin of the screen coordinate system as the top left corner of the screen, the positive direction of the X 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.

[0141] 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.

[0142] 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.

[0143] 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.

[0144] 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.

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

[0146] 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.

[0147] For example, Fig.10 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.

[0148] 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.

[0149] 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.

[0150] 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 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.

[0151] 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.

[0152] 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 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.

[0153] 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.

[0154] 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.

[0155] 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.

[0156] 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.

[0157] 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.

[0158] 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.

[0159] 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.

[0160] For example, Fig.13As 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.

[0161] 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.

[0162] 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.

[0163] 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.

[0164] 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.

[0165] 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.

[0166] 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.

[0167] 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.

[0168] 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.

[0169] For example, Fig.14 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.

[0170] Assume that the card set is expanded upwards, then Fig.14 As 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.

[0171] Assume that the card set is expanded downwards, then Fig.14 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.

[0172] 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.

[0173] 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.

[0174] 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.

[0175] 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.

[0176] For example, Fig.15 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. 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.

[0177] Assume that the card set is expanded upwards, then Fig.15 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.

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

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

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

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

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

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

[0184] 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.

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

[0186] In this case, for any card in the card set, 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, that is, it can determine that the expansion transparency of each card in the card set is the third transparency.

[0187] 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.

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

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

[0190] 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%.

[0191] 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.

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

[0193] 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.

[0194] 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.

[0195] 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.

[0196] 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.

[0197] 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.

[0198] 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.

[0199] 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. The stretching attribute value of a card can also be called the third attribute value of the card during the stretching process. 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.

[0200] 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 value, multiply the first value by the most recently acquired first motion effect coefficient to obtain a second value, and add the second value to the stacking attribute value of the card to obtain the stretching attribute value of the card.

[0201] The first 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 value and the first animation coefficient, which is the second value. Then the current stretched attribute value of the card is the sum of the second value and the original stacked attribute value.

[0202] 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.

[0203] 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.

[0204] 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.

[0205] 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.

[0206] 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.

[0207] 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.13 or Fig.15In 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.

[0208] If this card is not unfolded but stacked when the card set is in the unfolded state, such as in Fig.13 or Fig.15 In 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.

[0209] 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.

[0210] For example, Fig.16 As shown, for any one of the fourth card and the fifth card in the card set, 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.

[0211] Further, in response to the end of the stretching animation, a second interface is displayed, the second interface includes the card set displayed in an expanded state, and the second interface fully displays at least two cards, the at least two cards being cards in the card set. In some embodiments, the number of the multiple cards is less than or equal to a preset number, and the multiple cards are fully displayed in the center of the second interface. In other embodiments, the number of the multiple cards is greater than a preset number, a preset number of cards in the multiple cards are fully displayed in the second interface, and the other cards in the multiple cards except the preset number of cards are stacked and displayed in the second interface.

[0212] It should be noted that the embodiment of the present application does not stretch the card set by following the hand, but automatically stretches the card set according to the first dynamic effect coefficient. Therefore, the user does not need to long slide in the interface, and only needs to trigger the first operation to stretch the card set. This not only facilitates user use, but also does not limit the position of the card set in the interface. In other words, the stacked card set in the embodiment of the present application can be located at any position in the interface, such as at the top, bottom, or middle of the interface. No matter where the stacked card set is located in the interface, the card display method provided in the embodiment of the present application can achieve the stretching of the stacked card set.

[0213] In an embodiment of the present application, the terminal periodically obtains a first motion effect coefficient in response to a first operation on a first display area in a first interface. Each time a first motion effect coefficient is obtained, the stretching attribute value of the card in the card set can be determined based on the most recently obtained first motion effect coefficient, the stacking attribute value and the expansion attribute value of the card in the card set, and each card is displayed according to the stretching attribute value of the card in the card set to achieve stretching of the card set. In this way, a stacked card set located at any position in the terminal interface can be stretched to expand. Moreover, since the card set is automatically stretched according to the first motion effect coefficient, the user does not need to continue operating during the stretching process of the card set, and only needs to trigger the first operation to expand the card set, which is convenient for the user to use. In this way, the flexibility and convenience of using the card set are improved.

[0214] It should be noted that the above Figures 5 to 16 The embodiment describes the stretching process of the stacked card set in detail. Fig.17 The embodiment describes in detail the shrinking process of the expanded card set.

[0215] Fig.17 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.17 , the method comprising:

[0216] Step 1701: The terminal periodically obtains a second motion effect coefficient in response to a second operation on a second display area in a second interface.

[0217] The second display area in the second interface includes a card set displayed in an expanded state.

[0218] The second operation is used to instruct to shrink the card set from the expanded state to the stacked state. The second operation may be triggered by the user, for example, the second operation may be a click operation, a slide operation, a gesture operation, a somatosensory operation, a voice operation, etc.

[0219] In some embodiments, the second operation may be an upward sliding operation or a downward sliding operation with a sliding distance greater than or equal to a second preset distance. Optionally, the second preset distance may be close to or equal to the height of the unfolded card. The second preset distance may be the same as or different from the first preset distance, for example, the second preset distance may be less than or equal to the first preset distance.

[0220] For example, when the card set is expanded upward, the second operation may be a sliding operation with a sliding distance greater than or equal to a second preset distance. For example, when the card set is expanded upward, the user may slide downward on the expanded card set, and when the sliding distance reaches the second preset distance, the second operation is triggered, and the terminal shrinks the card set in response to the second operation.

[0221] For example, when the card set is expanded downward, the second operation may be an upward sliding operation with a sliding distance greater than or equal to a second preset distance. For example, when the card set is expanded downward, the user may slide upward on the expanded card set, and when the upward sliding distance reaches the second preset distance, the second operation is triggered, and the terminal shrinks the card set in response to the second operation.

[0222] 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.

[0223] 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.

[0224] The second animation coefficient changes continuously during the contraction process of the card set. The second animation coefficient is positively correlated with the contraction duration, that is, the second animation coefficient increases with the increase of the contraction duration, which is the time between the current moment and the response moment of the second operation.

[0225] 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.

[0226] 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.

[0227] 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 response moment of the second 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.

[0228] 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 1702 below.

[0229] Step 1702: The terminal determines the shrinkage attribute values ​​of the cards in the card set in response to the acquired second animation coefficient according to the second animation coefficient, the expansion attribute values ​​and the stacking attribute values ​​of the cards in the card set, and displays the cards in the card set according to the shrinkage attribute value of each card in the card set.

[0230] When the card set is in the expanded state, the terminal can determine the expanded attribute value and the stacked attribute value of each card in the card set in response to the second operation. In this case, 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 the stacked state.

[0231] The cards in the card set are displayed according to the shrink attribute value of each card in the card set, that is, the shrink animation effect is displayed according to the shrink attribute value of the cards in the card set.

[0232] 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.

[0233] 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.

[0234] 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.

[0235] 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.

[0236] 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 shrunk state. The shrinkage attribute value of the card can also be called the fourth attribute value of the card during the shrinkage process. 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 animation of the card set.

[0237] 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 value, multiply the third value by the most recently acquired second motion effect coefficient to obtain a fourth value, and add the fourth value to the expansion attribute value of the card to obtain the contraction attribute value of the card.

[0238] The third 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 value and the second animation coefficient, which is the fourth value. Then the current shrinking attribute value of the card is the sum of the fourth value and the original expansion attribute value.

[0239] 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.

[0240] 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.

[0241] 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.

[0242] 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.

[0243] 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.

[0244] 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.

[0245] 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.

[0246] 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.

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

[0248] Step 1801: The interface management module sends the position of the stacked card set to the state manager.

[0249] 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 existing in the interface it manages.

[0250] In some embodiments, the interface management module may send the position of the stacked card set 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 in the interface to the state manager after the position of the stacked card set in the interface changes.

[0251] Step 1802: After detecting the first operation on the card set in the stacked state, the interface management module sends a stretch message to the state manager.

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

[0253] Optionally, in the embodiment of the present application, step 1801 may not be performed, but the position of the card set may be directly carried in the stretch message. In this way, when the interface management module detects the first operation on the card set in the stacked state, it sends the position of the card set in the stacked state to the state manager.

[0254] Step 1803: 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.

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

[0256] The stretching animation execution message carries the position of the stacked card set. For example, the state of the card set can be a flag. The state of the card set determines the response logic for the operation of the card set.

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

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

[0259] 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 operation (i.e., the moment when the state change animation manager receives the stretching animation execution message).

[0260] 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 502 above, and this embodiment of the present application will not be repeated.

[0261] 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 1805 to 1811 below.

[0262] Step 1805: 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.

[0263] 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 502, and the embodiments of the present application will not go into details therein.

[0264] 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 1806 to 1807 below.

[0265] Step 1806: 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.

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

[0267] Step 1807: 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.

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

[0269] 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.

[0270] 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.

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

[0272] For example, after the View framework receives the card display message, it 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, so as to display each card in the card set on the screen to present the stretching animation of the card set.

[0273] 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 the above step 502, and this embodiment of the present application will not be repeated here.

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

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

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

[0277] Step 1811: 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.

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

[0279] It should be noted that the stretching process of the stacked card set is exemplarily described above, and the contraction process of the unfolded card set is exemplarily described below.

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

[0281] Step 1901: after detecting a second operation on the expanded card set, the interface management module sends a shrink message to the state manager.

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

[0283] Step 1902: 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.

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

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

[0286] 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 1701 above, and this embodiment of the present application will not be repeated here.

[0287] 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 response moment of the second operation (i.e., the moment when the state change animation manager receives the shrink animation execution message).

[0288] 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 1702 above, and this embodiment of the application will not be repeated.

[0289] 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 1904 to 1910 below.

[0290] Step 1904: 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.

[0291] 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 1702, and the embodiments of the present application will not go into details therein.

[0292] 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 1905 to 1906 below.

[0293] Step 1905: 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.

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

[0295] Step 1906: 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.

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

[0297] 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.

[0298] 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.

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

[0300] 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.

[0301] 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.

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

[0303] Step 1909: 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.

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

[0305] Step 1910: After receiving the shrinking 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 shrinking completion message to the interface management module.

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

[0307] 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)).

[0308] 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: Displaying a first interface, the first interface including a first display area, the first display area including a card set displayed in a stacked state, the first display area displaying the topmost card among a plurality of cards in the card set; In response to a first operation on the first display area, periodically acquiring a first motion effect coefficient, wherein the first operation is used to indicate stretching the card set from a stacked state to an expanded state, and the first motion effect coefficient is used to indicate a stretching progress of the card set; In response to the first motion effect coefficient obtained, determining a third attribute value of the card in the card set during the stretching process according to the first motion effect coefficient, a first attribute value of the card in the card set in the stacked state, and a second attribute value of the card in the expanded state; Displaying a stretching animation according to a third attribute value of a card in the card set; In response to the end of the stretching animation, a second interface is displayed, the second interface includes the card set displayed in an expanded state, and the second interface fully displays at least two cards, and the at least two cards are cards in the card set.

2. The method according to claim 1, characterized in that The number of the multiple cards is less than or equal to a preset number, and the multiple cards are fully and centered in the second interface.

3. The method according to claim 1, characterized in that The number of the multiple cards is greater than a preset number, the preset number of cards among the multiple cards are fully displayed in the second interface, and the other cards among the multiple cards except the preset number of cards are stacked and displayed in the second interface.

4. The method according to any one of claims 1 to 3, characterized in that: The attribute value of the card includes the position of the card, and the attribute value of the card also includes one or more of transparency and scaling.

5. The method according to any one of claims 1 to 4, characterized in that: The periodically obtaining the first motion effect coefficient includes: At preset time intervals, the first motion effect coefficient is obtained through the first motion effect curve according to the time interval between the current moment and the response moment of the first operation.

6. The method according to claim 1, characterized in that The first attribute value of the card includes an expanded position, and the expanded position of the card is the position coordinate of the upper left corner vertex of the card. The method further includes: In response to the first operation on the stacked card set, the horizontal coordinate of the expanded position of each card in the card set is determined according to the expanded card width, and the vertical coordinate 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, and the card interval height is the height of the interval between two adjacent expanded cards in the expanded card set.

7. The method according to claim 6, characterized in that The step of determining the horizontal coordinate of the expanded position of each card in the card set according to the expanded card width includes: Determine half of the difference between the width of the card set in the stacked state and the width of the card in the unfolded state as the horizontal coordinate of the unfolded position of each card in the card set; or, Half of the difference between the screen width and the width of the expanded card is determined as the horizontal coordinate of the expanded position of each card in the card set.

8. The method according to claim 6 or 7, characterized in that The step of determining the vertical coordinate 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 includes: Obtaining a first height, where the first height is the sum of the height of the unfolded card and the height of the card interval; When the card set is expanded upward, for any card in the card set, a value obtained by subtracting 1 from the sorting number of the card is multiplied by the first height and then added to the first preset height to obtain the ordinate of the expanded position of the card; When the card set is expanded downward, for any card in the card set, the screen height is subtracted from the card interval height, and the product of the sorting number of the card and the first height is subtracted, and the second preset height is subtracted to obtain the vertical coordinate of the expanded position of the card.

9. The method according to claim 6 or 7, characterized in that The step of determining the vertical coordinate 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 includes: If the number of the plurality of cards is less than or equal to the preset number, a second height is obtained, where the second height is half of the difference between the screen height and the expanded height of the card set, where the expanded height of the card set is obtained by subtracting the card spacing height from the product of the number of cards in the card set and the first height, where the first height is the sum of the expanded card height and the card spacing height; When the card set is expanded upward, for any card in the card set, 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; When the card set is expanded downward, for any card in the card set, subtract the second height from the screen height, subtract the card interval height, and 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.

10. The method according to claim 9, characterized in that The step of determining the vertical coordinate 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 includes: If the number of the plurality of cards is greater than a preset number, a fourth height is obtained, where the fourth height is half of the difference between the screen height and the third height, where the third height is obtained by subtracting the card spacing height from the product of the preset number and the first height; In the case where the card set is expanded upward, for any one of the first k cards in the card set, a value obtained by subtracting 1 from the sorting sequence number of the card is multiplied by the first height and then added to the fourth height to obtain the ordinate of the expanded position of the card, where k is the preset number; the ordinate of the expanded position of each card in the card set except the first k cards is obtained by subtracting the height of the expanded card and the second preset height from the screen height; When the card set is expanded downward, for any one of the first k cards in the card set, subtract the fourth height from the screen height, subtract the card interval height, and 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; the vertical coordinate of the expanded position of each card in the card set except the first k cards is determined as the first preset height.

11. The method according to any one of claims 1 to 10, characterized in that: The determining, according to the first motion effect coefficient, the first attribute value and the second attribute value of each card in the card set, the third attribute value of each card in the card set includes: For any card in the card set, subtract the first attribute value of the card from the second attribute value of the card to obtain a first value; Multiplying the first value by the first motion effect coefficient to obtain a second value; The second value is added to the first attribute value of the card to obtain a third attribute value of the card.

12. The method according to any one of claims 1 to 11, characterized in that: The second interface includes a second display area, the second display area includes the card set displayed in an expanded state, and the method further includes: In response to a second operation on the second display area, periodically acquiring a second animation coefficient, wherein the second operation is used to indicate shrinking the card set from an expanded state to a stacked state, and the second animation coefficient is used to indicate a shrinking progress of the card set; In response to the acquired second motion effect coefficient, determining a fourth attribute value of the card in the card set during the shrinking process according to the second motion effect coefficient, the second attribute value and the first attribute value of the card in the card set; A shrinking animation effect is displayed according to the fourth attribute value of the card in the card set.

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