Method for displaying a card and electronic device
By dynamically adjusting the card tilt angle, the problem of users having to frequently flip through pages when multiple cards are stacked is solved, thus improving the card display effect and user experience.
Patent Information
- Application Number
- CN202310757940.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2023-06-25
- Publication Date
- 2026-02-10
- Estimated Expiration
- 2043-06-25
AI Technical Summary
When multiple cards are stacked, users need to frequently flip through pages to view a specific card, resulting in poor card display and a bad user experience.
By detecting user actions, the card's tilt angle is dynamically adjusted, allowing the card to change position in its unfolded state. This enables the card's tilt angle to change with user actions, and the tilt angle is managed in conjunction with an angle manager.
It improved the display effect of cards, simplified the user operation process, and enhanced the user experience.
Smart Images

Figure CN119211409B_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of terminal, in particular to a method for displaying a card and an electronic device. BACKGROUND
[0002] With the development of electronic devices, in order to facilitate users to quickly obtain the information of the application program, widgets are more and more widely used in electronic devices; wherein, the widget refers to a small application program view, and can be embedded into other application programs; the widget can also be called a desktop widget or a card. In order to save the display position of the desktop in the electronic device, a plurality of cards can be displayed in the card display area where the same widget is located in turn, each card corresponding to the view of an application program, thereby forming a card stacking effect.
[0003] When a plurality of cards are in a stacked state, if a user wants to view the information in a card, the user needs to operate the card stack; the electronic device responds to the user operation to adjust the card in the stacked state to an expanded state for display; at present, when a plurality of cards are in an expanded state, the display effect of the card does not change accordingly with the user's sliding operation, resulting in poor display effect of the card and poor user experience. SUMMARY
[0004] The present application provides a method for displaying a card and an electronic device, which can change the tilt angle of the card displayed in the display screen with the position of the card, so as to improve the display effect of the card and improve the user experience.
[0005] In a first aspect, a method for displaying a card is provided, comprising:
[0006] detecting a first operation on a card display area, the first card being displayed in the card display area, the card display area including a plurality of cards, the first card covering other cards of the plurality of cards except the first card;
[0007] in response to the first operation, displaying a first interface, the first interface displaying part of the plurality of cards, the part of the plurality of cards including the first card and a second card;
[0008] detecting a second operation on the first interface;
[0009] in response to the second operation, displaying a second interface, the second interface including the second card, the second card having a first tilt angle, the first tilt angle being different at different positions of the second card in the first interface, the first tilt angle being used to represent the angle of the second card inwardly turning into the display screen.
[0010] In the embodiments of the present application, the first interface can refer to an interface in which the card set is in an expanded state; the second operation on the first interface is detected; in response to the second operation, the second interface is displayed, the second card is displayed in different positions in the first interface, and the first inclination angle is different; that is, in the scheme of the present application, when the card in the card set in the expanded state is displayed, when the position of the second card displayed in the second interface changes, the first inclination angle of the second card also changes; so that the first inclination angle of the card displayed in the second display interface changes accordingly based on the second operation of the user, so that the display effect of the card is better, and the user experience is improved.
[0011] In an implementation manner, the electronic device includes an application framework layer, the application framework layer includes an angle manager, the angle manager includes a timer, and the angle manager is configured to manage the inclination angle of the card; one angle manager can be used to manage the inclination angle of multiple cards in a card set, and the inclination angle of multiple cards is managed by one angle manager, which can save the resources of the electronic device to a certain extent.
[0012] In an implementation manner, the electronic device includes an application framework layer, the application framework layer includes an angle manager, the angle manager includes a timer, and the angle manager is configured to manage the inclination angle of the card; one angle manager can be used to manage the inclination angle of multiple cards in a card set, and the inclination angle of multiple cards is managed by one angle manager, which can save the resources of the electronic device to a certain extent.
[0013] In combination with the first aspect, in some implementation manners of the first aspect, the first interface includes a first region and a second region, the first region displays the first card, and the second region displays at least two cards in the part of cards.
[0014] In the embodiments of the present application, in response to the first operation (for example, an operation of triggering the expansion of the card in the stacked state) of the card display region, the first interface is displayed in response to the first operation; the first interface includes a first region (for example, a top display region) and a second region (for example, a bottom display region); wherein the first region displays the first card, and the second region displays at least two cards in the part of cards; through the scheme of the embodiments of the present application, the stacked display effect of the bottom display region of the card in the display screen can be realized, so that the user can efficiently obtain the information of one or more cards; and the user experience is improved.
[0015] In combination with the first aspect, in some implementation manners of the first aspect, at least two cards are displayed in the first region and / or the second region of the second interface.
[0016] In the embodiments of the present application, the second interface is displayed, and the at least two cards are displayed in the first region and / or the second region of the second interface; through the scheme of the embodiments of the present application, on the one hand, the stacking display effect of the cards in the top display region and / or the bottom display region of the display screen can be realized, so that the user can efficiently obtain the information of one or more cards; in addition, the user can quickly perceive whether there are other cards in the top region or the bottom region of the display screen; on the other hand, when the position of the second card displayed in the second interface changes, the first inclination angle of the second card also changes; so that the card displayed in the second display interface changes correspondingly based on the second operation of the user, so that the display effect of the card is better; and the experience of the user is improved.
[0017] In a possible implementation, if the at least two cards are displayed in the first region and the second region of the second interface, the display shapes of the at least two cards displayed in the first region and the at least two cards displayed in the second region are mirror-symmetrical.
[0018] In the embodiments of the present application, if the at least two cards are displayed in the first region and the second region of the second interface, the display shapes of the at least two cards displayed in the first region and the at least two cards displayed in the second region are mirror-symmetrical, which is more in line with the visual sense of the user.
[0019] With reference to the first aspect, in some implementations of the first aspect, the second operation includes a touch operation and a sliding operation, and the second interface is displayed in response to the second operation, including:
[0020] In response to the touch operation, the state of a timer is updated, and a first angle coefficient is obtained, the first angle coefficient being related to the state of the timer;
[0021] In response to the sliding operation, distance information of the sliding operation is obtained;
[0022] According to the distance information of the sliding operation, position information of each card in the plurality of cards is obtained, the position information of each card in the plurality of cards including the position information of the second card;
[0023] According to the first angle coefficient and the position information of the second card, the first inclination angle is obtained;
[0024] According to the first inclination angle and the position information of each card in the plurality of cards, the second interface is displayed.
[0025] In the embodiments of the present application, the position information of each card in the plurality of cards can be obtained according to the distance information of the sliding operation; the first inclination angle can be obtained according to the first angle coefficient and the position information of the second card; the second interface can be displayed according to the first inclination angle and the position information of each card in the plurality of cards; the first inclination angle of the second card also changes; so that the cards displayed in the second display interface change accordingly based on the second operation of the user, so that the display effect of the cards is better, and the user experience is improved.
[0026] It should be understood that in the scheme of the present application, when the plurality of cards in the unfolded state in the first interface respond to the sliding operation, the motion speed of the current card is less than that of the next card of the current card in the order of the display screen from top to bottom; in the embodiments of the present application, the card stacking display effect of the first region and / or the second region in the second interface can be realized by the sliding coefficient.
[0027] In combination with the first aspect, in some implementations of the first aspect, the sliding coefficient is obtained according to the distance information of the sliding operation, including:
[0028] The sliding coefficient is obtained according to the distance information of the sliding operation, card height information and first interval information; wherein the card height information is used to represent the height of each card in the plurality of cards, and the first interval information is used to represent the interval between two cards displaying complete card content information in the first interface.
[0029] In a possible implementation, the sliding coefficient a = [h%(h2+h3)] / (h2+h3); wherein h represents the distance information of the sliding operation; h2 represents the card height information; h3 represents the first interval information; % represents the modulo operation.
[0030] It should be noted that if one sliding operation on the first interface is detected, the distance information of the sliding operation is the sliding distance of the one sliding operation; if two sliding operations on the first interface are detected, the distance information of the sliding operation is the total distance of the two sliding operations; if multiple sliding operations on the first interface are detected, the distance of the sliding operation is the total distance of the multiple sliding operations.
[0031] In combination with the first aspect, in some implementations of the first aspect, further comprising:
[0032] The identification information of the second card is obtained according to the distance information of the sliding operation and the sliding coefficient, the second card being a card displaying complete card content information in the first region of the second interface.
[0033] In the embodiments of the present application, the identification information of the second card can be determined according to the distance information of the sliding operation and the sliding coefficient, that is, the card identification of the first card completely displayed in the display screen is determined; and the card identification of other cards completely displayed can be determined according to the card identification of the first card completely displayed in the display screen.
[0034] With reference to the first aspect, in some implementations of the first aspect, the position information of each card in the plurality of cards is obtained according to the sliding coefficient, including:
[0035] The position information of the second card is obtained according to the sliding coefficient, the card height information, the first interval information, the second interval information and the first stack quantity information; the second interval information is used to represent the interval between two cards displaying partial card content information in the first region or the second region; and the first stack quantity information is used to represent the number of cards in the first region except the second card.
[0036] In a possible implementation, the position information of the second card = K1*h1 + (h2+h3)*(1-a); wherein K1 represents the first stack quantity information; h1 represents the second interval information; h2 represents the card height information; h3 represents the first interval information; and a represents the sliding coefficient.
[0037] With reference to the first aspect, in some implementations of the first aspect, the method further includes:
[0038] The position information of at least one third card is obtained according to the position information of the second card, the first interval information, the card height information and the card identification information, the third card being used to represent a card displaying complete card content information in the second interface except the second card, the at least one third card including a target third card, the target third card being used to represent a card displaying complete card content information in the second region of the second interface;
[0039] The position information of a fourth card is obtained according to the position information of the target third card, the card height information, the card identification information, the second interval information and a second stack quantity information, the second stack quantity information being used to represent the number of cards in the second region except the target third card, the fourth card being used to represent a card in the second region of the second interface except the target third card;
[0040] The position information of a fifth card is obtained according to the first stack quantity information, the second interval information and the card identification information, the fifth card being used to represent a card in the first region of the second interface except the second card.
[0041] In a possible implementation, the position information of the third card = (the identity of the third card - the identity of the second card) * (h2 + h3) + the position information of the second card; wherein h2 represents card height information; h3 represents first interval information; the position information of the second card = K1 * h1 + (h2 + h3) * (1 - a); wherein K1 represents first stack quantity information; h1 represents second interval information; and a represents a sliding coefficient.
[0042] In a possible implementation, the position information of the fourth card = the position information of the target third card + (h2 + h3) * a + (the identity of the fourth card - the identity of the target third card - a) * K2; wherein K2 represents second stack quantity information; h2 represents card height information; h3 represents first interval information; and a represents a sliding coefficient.
[0043] In a possible implementation, the position information of the fifth card = K1 * h1 - (the identity of the second card - the identity of the fifth card - 1 + a) * h1; wherein K1 represents first stack quantity information; h1 represents second interval information; and a represents a sliding coefficient.
[0044] With reference to the first aspect, in some implementations of the first aspect, the first inclination angle is obtained according to the first angle coefficient and the position information of the second card, including:
[0045] obtaining first angle information according to the position information of the second card, the first angle being used to represent a maximum distortion angle of the second card;
[0046] obtaining the first inclination angle according to the first angle coefficient and the first angle information.
[0047] With reference to the first aspect, in some implementations of the first aspect, the first angle and the position information of the second card are in a linear relationship.
[0048] With reference to the first aspect, in some implementations of the first aspect, an initial value of the first angle coefficient is 0 and a maximum value of the first angle coefficient is 1; after detecting a preset time length of the touch operation, the first angle coefficient is 1.
[0049] With reference to the first aspect, in some implementations of the first aspect, the method further includes:
[0050] detecting a finger-up operation on the second interface;
[0051] in response to the finger-up operation, updating a state of the timer and obtaining a second angle coefficient, the second angle coefficient being related to the state of the timer;
[0052] obtain a second tilt angle according to the second angle coefficient and position information of the second card;
[0053] display a third interface according to the second tilt angle and position information of each card in the plurality of cards at the current time.
[0054] With reference to the first aspect, in some implementations of the first aspect, the obtaining of the second tilt angle according to the second angle coefficient and the position information of the second card includes:
[0055] obtaining information of a first angle according to position information of the second card at the current time, the first angle being used to represent a maximum distortion angle of the second card;
[0056] obtaining the second tilt angle according to the second angle coefficient and the information of the first angle.
[0057] With reference to the first aspect, in some implementations of the first aspect, an initial value of the second angle coefficient is 1 and a maximum value of the second angle coefficient is 0; after detecting that the preset time length of the lifting-finger operation is detected, the second angle coefficient is 0.
[0058] With reference to the first aspect, in some implementations of the first aspect, the first card completely covers other cards in the plurality of cards except the first card.
[0059] Secondly, an electronic device is provided, which includes one or more processors and a memory; the memory is coupled to the one or more processors, and is used to store computer program codes including computer instructions; the one or more processors invoke the computer instructions to enable the electronic device to perform:
[0060] detecting a first operation on a card display area, the first card being displayed in the card display area, the card display area including a plurality of cards, the first card covering other cards in the plurality of cards except the first card;
[0061] displaying a first interface in response to the first operation, the first interface displaying part of the plurality of cards, the part of the plurality of cards including the first card and a second card;
[0062] detecting a second operation on the first interface;
[0063] displaying a second interface in response to the second operation, the second interface including the second card, the second card having a first tilt angle, the first tilt angle being different at different positions of the second card in the first interface, the first tilt angle being used to represent an angle of the second card being turned inwards towards the display screen.
[0064] With reference to the second aspect, in some implementations of the second aspect, the first interface comprises a first region and a second region, the first region displays the first card, and the second region displays at least two of the partial cards.
[0065] With reference to the second aspect, in some implementations of the second aspect, at least two cards are displayed in the first region and / or the second region of the second interface.
[0066] With reference to the second aspect, in some implementations of the second aspect, the one or more processors invoke the computer instructions to cause the electronic device to perform:
[0067] In response to the touch operation, update a state of the timer and obtain a first angle coefficient, the first angle coefficient being related to the state of the timer;
[0068] In response to the sliding operation, obtain distance information of the sliding operation;
[0069] According to the distance information of the sliding operation, obtain position information of each card in the plurality of cards, the position information of each card in the plurality of cards comprising position information of the second card;
[0070] According to the first angle coefficient and the position information of the second card, obtain the first tilt angle;
[0071] According to the first tilt angle and the position information of each card in the plurality of cards, display the second interface.
[0072] With reference to the second aspect, in some implementations of the second aspect, the one or more processors invoke the computer instructions to cause the electronic device to perform:
[0073] According to the distance information of the sliding operation, obtain a sliding coefficient, the sliding coefficient being used to represent a percentage of a card moving from a current card position to a previous card position of the current card position;
[0074] According to the sliding coefficient, obtain the position information of each card in the plurality of cards.
[0075] With reference to the second aspect, in some implementations of the second aspect, the one or more processors invoke the computer instructions to cause the electronic device to perform:
[0076] obtain the sliding coefficient according to the distance information of the sliding operation, card height information and first interval information, wherein the card height information is used to represent a height of each card in the plurality of cards, and the first interval information is used to represent an interval between two cards displaying complete card content information in the first interface.
[0077] With reference to the second aspect, in some implementations of the second aspect, the second card is a card displaying complete card content information in the first region of the second interface, and the one or more processors invoke the computer instructions to cause the electronic device to perform:
[0078] obtain identification information of a second card according to the distance information of the sliding operation and the sliding coefficient.
[0079] With reference to the second aspect, in some implementations of the second aspect, the one or more processors invoke the computer instructions to cause the electronic device to perform:
[0080] obtain position information of the second card according to the sliding coefficient, the card height information, the first interval information, second interval information and first stack quantity information, wherein the second interval information is used to represent an interval between two cards displaying partial card content information in the first region or the second region, and the first stack quantity information is used to represent a number of cards in the first region except the second card.
[0081] With reference to the second aspect, in some implementations of the second aspect, the one or more processors invoke the computer instructions to cause the electronic device to perform:
[0082] obtain position information of at least one third card according to the position information of the second card, the first interval information, the card height information and card identification information, wherein the third card is used to represent a card displaying complete card content information in the second interface except the second card, the at least one third card includes a target third card, and the target third card is used to represent a card displaying complete card content information in the second region of the second interface;
[0083] obtain position information of a fourth card according to the position information of the target third card, the card height information, the card identification information, the second interval information and second stack quantity information, wherein the second stack quantity information is used to represent a number of cards in the second region except the target third card, and the fourth card is used to represent a card in the second region of the second interface except the target third card;
[0084] According to the first stack quantity information, the second interval information and the card identification information, position information of a fifth card is obtained, the fifth card being used to represent a card other than the second card in the first region of the second interface.
[0085] With reference to the second aspect, in some implementations of the second aspect, the one or more processors invoke the computer instructions to cause the electronic device to perform:
[0086] According to the position information of the second card, information of a first angle is obtained, the first angle being used to represent a maximum distortion angle of the second card;
[0087] According to the first angle coefficient and the information of the first angle, the first tilt angle is obtained.
[0088] With reference to the second aspect, in some implementations of the second aspect, the first angle and the position information of the second card are in a linear relationship.
[0089] With reference to the second aspect, in some implementations of the second aspect, an initial value of the first angle coefficient is 0 and a maximum value of the first angle coefficient is 1; after detecting the preset time length of the touch operation, the first angle coefficient has a value of 1.
[0090] With reference to the second aspect, in some implementations of the second aspect, the one or more processors invoke the computer instructions to cause the electronic device to perform:
[0091] detecting a finger-up operation on the second interface;
[0092] in response to the finger-up operation, updating a state of the timer and obtaining a second angle coefficient, the second angle coefficient being related to the state of the timer;
[0093] According to the second angle coefficient and the position information of the second card, a second tilt angle is obtained.
[0094] According to the second tilt angle and position information of each card in the plurality of cards at a current time, a third interface is displayed.
[0095] With reference to the second aspect, in some implementations of the second aspect, the one or more processors invoke the computer instructions to cause the electronic device to perform:
[0096] According to the position information of the second card at a current time, information of a first angle is obtained, the first angle being used to represent a maximum distortion angle of the second card;
[0097] According to the second angle coefficient and the information of the first angle, the second tilt angle is obtained.
[0098] With reference to the second aspect, in some implementations of the second aspect, an initial value of the second angle coefficient is 1 and a maximum value of the second angle coefficient is 0; after a preset time length of the operation of lifting the finger is detected, the second angle coefficient is 0.
[0099] With reference to the second aspect, in some implementations of the second aspect, the first card completely covers other cards of the plurality of cards except the first card.
[0100] It should be understood that the expansion, limitation, explanation and description of the related content in the above first aspect also apply to the same content in the second aspect.
[0101] In a third aspect, an electronic device is provided, which includes one or more processors and a memory; the memory is coupled to the one or more processors, and the memory is configured to store computer program code including computer instructions; the one or more processors invoke the computer instructions to enable the electronic device to perform any of the methods of displaying a card in the first aspect.
[0102] In a fourth aspect, a chip system is provided, which is applied to an electronic device, and the chip system includes one or more processors; the processor is configured to invoke computer instructions to enable the electronic device to perform any of the methods of displaying a card in the first aspect.
[0103] In a fifth aspect, a computer readable storage medium is provided, which stores computer program code; when the computer program code is run by an electronic device, the electronic device is enabled to perform any of the methods of displaying a card in the first aspect.
[0104] In a sixth aspect, a computer program product is provided, which includes computer program code; when the computer program code is run by an electronic device, the electronic device is enabled to perform any of the methods of displaying a card in the first aspect.
[0105] In the embodiments of the present application, the first interface can refer to an interface in which the card set is in an expanded state; the second operation on the first interface is detected; in response to the second operation, the second interface is displayed; the first inclination angle of the second card is different at different positions of the second card in the first interface; that is, in the scheme of the present application, when the card in the expanded state in the card set is displayed, the first inclination angle of the second card in the second interface changes when the position of the second card displayed in the second interface changes; the first inclination angle of the card displayed in the second display interface changes accordingly based on the second operation of the user, so that the display effect of the card is better, and the user experience is improved. BRIEF DESCRIPTION OF DRAWINGS
[0106] Figure 1 is a schematic diagram of a display card provided by an embodiment of the present application;
[0107] Figure 2 is a schematic diagram of another display card provided by an embodiment of the present application;
[0108] Figure 3 is a schematic diagram of a display card provided by an embodiment of the present application;
[0109] Figure 4 is a schematic diagram of another display card provided by an embodiment of the present application;
[0110] Figure 5 is a schematic diagram of another display card provided by an embodiment of the present application;
[0111] Figure 6 is a schematic diagram of another display card provided by an embodiment of the present application;
[0112] Figure 7 is a schematic diagram of a software system of an electronic device provided by an embodiment of the present application;
[0113] Figure 8 is a schematic diagram of a display card method provided by an embodiment of the present application;
[0114] Figure 9 is a schematic diagram of a card spacing distance provided by an embodiment of the present application;
[0115] Figure 10 is a schematic diagram of a display card method provided by an embodiment of the present application;
[0116] Figure 11 is a schematic diagram of an electronic device suitable for the present application;
[0117] Figure 12 is a schematic diagram of a hardware structure of an electronic device suitable for the present application. DETAILED DESCRIPTION
[0118] In the embodiments of the present application, the following terms "first", "second", and the like are only used for description purposes, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features defined with "first", "second" can explicitly or implicitly include one or more of the features. In the description of the embodiments, unless otherwise specified, the meaning of "a plurality of" is two or more.
[0119] Currently, to facilitate the use of various applications and enhance the visual richness of mobile devices, the home screen of electronic devices typically displays multiple application cards. For example, after an application is installed on an electronic device, it can register with the phone's widget manager (also known as a card manager), thereby generating a card corresponding to that application. If the device detects that a user has added a card to the home screen, it responds by retrieving the application's information and displaying the card on the home screen.
[0120] For example, such as Figure 1 As shown in (a), to save desktop space, users can display multiple cards of the same size in the same card display area 101; the card display area 101 displays cards in a stacked state; among them, the stacked cards include weather cards, recommendation cards, clock cards, and calendar cards; when multiple cards are stacked, if a user wants to view a specific card among the multiple cards, they need to search through the multiple cards until the card is displayed on the electronic device; multiple cards are stacked on the desktop of the electronic device, and the display order of the multiple cards in the card display area 101 is weather card, recommendation card, clock card, and calendar card, with the weather card currently displayed at the top. The electronic device detects a downward swipe operation on the weather card, such as... Figure 1 As shown in (b); in response to a swipe-down operation, the electronic device displays the weather card at the bottom of a set of cards and then displays the next card in the order of appearance, i.e., the recommended card, such as... Figure 1 As shown in (c); if the recommended card is not the card the user expects to view, the user needs to continue swiping down on the recommended card, as shown in (c). Figure 1 As shown in (d); in response to a swipe-down operation on the recommended card, the electronic device displays the recommended card at the bottom of multiple cards and then displays the next card in the order of display, i.e., the clock card, as shown. Figure 2 As shown in (a); if the clock card is still not the card the user wants to view, the user continues to swipe down on the clock card, as shown in (a). Figure 2 As shown in (b); in response to a downward swipe operation on the clock card, the electronic device displays the clock at the bottom of multiple cards and then displays the next card in the order of display, i.e., the schedule card, as shown. Figure 2 As shown in (c) in the figure.
[0121] As described above, if multiple cards are currently stacked on the desktop of an electronic device, and the user wants to view a specific card, they need to repeatedly flip through the stacked cards until they find the card. This process is cumbersome and results in a poor user experience.
[0122] Therefore, the embodiment of the present application provides a method for displaying cards and an electronic device. In the solution of the present application, a first operation on a card display area is detected, a first card is displayed in the card display area, and the card display area includes a plurality of cards, and the first card covers other cards of the plurality of cards except the first card. In response to the first operation, a first interface is displayed, and part of the plurality of cards is displayed in the first interface, and the part of the plurality of cards includes the first card and a second card. A second operation on the first interface is detected. In response to the second operation, a second interface is displayed, and the second interface includes the second card, the second card has a first inclination angle, the first inclination angle of the second card is different at different positions of the first interface, and the first inclination angle is used to represent an angle of the second card being turned inward to the display screen. Through the solution of the present application, when the card in the card set in the unfolded state is displayed, the first inclination angle of the second card displayed in the second interface changes when the position of the second card changes. The first inclination angle of the card displayed in the second display interface changes correspondingly based on the second operation of the user, so that the display effect of the card is better, and the user experience is improved.
[0123] Before the card display provided by the embodiment of the present application is described in detail, the electronic device related to the embodiment of the present application is described.
[0124] The method provided by the embodiment of the present application can be executed by an electronic device. A plurality of cards running in a desktop main process are displayed on a desktop of the electronic device, and the plurality of cards can be displayed in a stacked manner. As an example but not limitation, the electronic device can be, but is not limited to, a GoPro, a digital camera, a tablet computer, a desktop computer, a laptop computer, a handheld computer, a notebook computer, a vehicle-mounted device, an ultra-mobile personal computer (UMPC), a netbook, a cellular phone, a personal digital assistant (PDA), an augmented reality (AR) \ virtual reality (VR) device, a mobile phone, a door lock, a smart appliance, and the like, and the embodiment of the present application does not limit this. Optionally, the hardware structure diagram of the electronic device can be referred to the related description of the subsequent Figure 12 .
[0125] The method for displaying cards provided by the embodiment of the present application is described in detail below. Figures 3 to 10 The method for displaying cards provided by the embodiment of the present application is described in detail below.
[0126] In the embodiments of the present application, for a plurality of cards in a card set, the angle information of the plurality of cards can be calculated by an angle manager; to a certain extent, the resources of the electronic device can be saved; for example, when the plurality of cards in the card set are displayed in an expanded state in the electronic device, the animation effect of the cards being stacked at the top and the bottom of the display screen at the same time can be realized by the scheme of the present application; in addition, the distortion of the angle of the cards in the card set can also occur during the process of displaying the cards from the stacked state to the expanded state; for example, when the electronic device detects a click operation, i.e. 0 ms, the card is in a 2D state (i.e. the angle of the card does not change); within a preset time length of the click operation, the card changes from a 2D state to a 3D state; it can be understood that the card produces a distortion angle during the display process; when the click operation exceeds the preset time length, the card is completely distorted into a 3D state.
[0127] The display interface of the electronic device can be a negative one screen; the display interface of the negative one screen includes a card 102, hot search recommendation information and video recommendation information, as shown in (a) of Figure 3 The card display area where the card 102 is located can display a plurality of stacked cards, and the electronic device detects a trigger operation on the card 102 or the card display area where the card 102 is located, triggering the display of the plurality of stacked cards in an expanded state; the trigger operation can be an upward sliding operation on the card 102, as shown in (b) of Figure 3 After the electronic device detects the trigger operation, the electronic device can display a plurality of cards in an expanded state, as shown in (c) of Figure 3 The electronic device detects an upward sliding operation on the plurality of cards in the expanded state, as shown in (d) of Figure 3 After the electronic device detects the sliding operation, in response to the upward sliding operation of the user, an animation effect of the plurality of cards is displayed; for example, when the upward sliding operation is detected, the first card completely visible displayed at the top of the display screen is card 1 (for example, a weather card), and in response to the upward sliding operation, the weather card 1 moves to the top of the display screen. The first card completely visible displayed at the top of the display screen is card 2 (for example, a note card); card 1 is stacked at the bottom of card 2; in addition, the last card displayed at the bottom of the display screen is card 3 (for example, a file and notification card); card 4 (for example, a to-do list card) is stacked at the bottom of card 3, as shown in (a) of Figure 4 The upward sliding operation of the user is detected, as shown in (b) of Figure 4 In response to the upward sliding operation, the first card completely visible displayed at the top of the display screen is card 5 (for example, a daily skill recommendation card); card 2 is stacked at the bottom of card 4; in addition, the last card displayed at the bottom of the display screen is card 4, as shown in (a) of Figure 4(c) of FIG. 10A; when the first fully visible card displayed at the top of the display screen is the daily skill recommendation card, a downward swipe operation from the top of the display screen is detected, as shown in (d) of FIG. 10A; in response to the downward swipe operation, the multiple cards in the expanded state are displayed in the stacked state, and the first card in the multiple cards in the stacked state is the first fully visible card displayed at the top of the display screen, as shown in (e) of FIG. 10A. Figure 4 Figure 5
[0128] It should be understood that, Figure 3 and Figure 4 The operation of triggering the card set to change from the folded state to the expanded state with the upward swipe operation is exemplified in (a) of FIG. 9A; the triggering operation can also be a long press operation, or other operations, which are not limited in the embodiments of the present application.
[0129] In the embodiments of the present application, when the multiple cards in the expanded state are displayed in the display screen of the electronic device, the stacked card effect can be displayed at the top of the display screen, as shown in (a) of FIG. 10A. Figure 4 The cards 31 and 32 shown in (a) of FIG. 10A, and the stacked card effect can be displayed at the bottom of the display screen, as shown in (a) of FIG. 10A. Figure 4 The cards 35 and 36 shown in (a) of FIG. 10A; in addition, the cards have distortion angles.
[0130] By the method for displaying cards provided in the embodiments of the present application, on the one hand, the user can avoid frequent page turning operations in the multiple stacked cards, and the operation is simple; the information of the multiple cards can be displayed in the display screen at the same time, improving the user experience; on the other hand, when the multiple cards are displayed, the cards can have distortion angles; in the embodiments of the present application, the angle information of the multiple cards in the card set can be managed by an angle manager, which can save the resources of the electronic device to a certain extent.
[0131] Exemplarily, in the embodiments of the present application, the positions of the multiple cards in the expanded state displayed in the display screen can be adjusted; as shown in (a) of FIG. 10A, in the order from top to bottom of the display screen, the cards 32, 33, 34 and 35 are displayed in the display screen in sequence; the bottom of the card 32 is stacked with the card 31, and the bottom of the card 35 is stacked with the card 36; when a click and movement operation of the card 34 is detected, the card 34 is gradually moved to the top of the card 33, as shown in (b) of FIG. 10A. Figure 6 Figure 6 Figure 6 In response to the click and movement operation of the user, the position of the displayed card 34 in the display screen is above the position of the card 33, as shown in (c) of FIG. 10A. Figure 6 Figure 6 The (d) in the (d) can be regarded as adjusting the positions of the card 34 and the card 33 in response to the click and the moving operation of the user.
[0132] Optionally, in an implementation manner, Figure 6 The (a) to Figure 6 The card 33 and the card 34 shown in the (d) can also have a distortion angle, that is, the card 33 and the card 34 can also be non-rectangular; the present application does not make any limitation on this.
[0133] Figure 7 FIG. 2 is a schematic diagram of another software system of an electronic device provided by an embodiment of the present application.
[0134] As Figure 7 indicated, the electronic device adopts a software system of a layered architecture, and the software system is divided into a plurality of layers, each layer has a clear role and division of labor. The layers communicate with each other through a software interface. In some embodiments, the software system can be divided into four layers, from top to bottom, an application layer, an application framework layer, an Android runtime and a system library, and a kernel layer.
[0135] Exemplarily, the application layer can include applications in the electronic device; for example, the applications include but are not limited to: camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, and the like.
[0136] Exemplarily, the application framework layer provides an application programming interface (API) and a programming framework for the applications of the application layer. The application framework layer can include some predefined functions.
[0137] In one example, in the embodiments of the present application, the application framework layer includes: a card set control manager, a navigation point control manager, a View architecture module, and an animation effect architecture management module, etc.; wherein the card set control manager is used to manage the related controls of the card set; the navigation point control manager is used to manage the navigation point controls; the View architecture module is used to draw the animation effects of the cards in the card set; the animation effect architecture management module is used to control the View architecture module to draw the animation effects of the cards in the card set; wherein the animation effects of the cards in the card set include but are not limited to: the movement of the cards, the size scaling of the cards, the transparency change of the cards, and the angle change of the cards, etc.; the card set control manager includes: an angle manager, a layout manager, a data adapter, a state change animation manager, and a state manager; wherein the angle manager is used to calculate the angle information of the cards in the card set; the angle manager includes a timer; the layout manager is used to manage the positions of the cards in the card set and the sizes of the cards; the data adapter is used to manage and transmit the identification of the cards in the card set, the content information of the cards, and the ordering of the cards; the state change animation manager is used to manage the transition state animation of the cards in the card set; the state manager is used to manage the state of the card set; wherein the state of the card set includes the stacking state, the transition state, and the unfolded state.
[0138] Optionally, the View framework module is provided with a position information interface, through which the position information of the cards is transmitted.
[0139] Exemplarily, the system layer includes a surface manager, a media library, a three-dimensional graphics processing library (for example: an open graphics library for embedded systems), and a two-dimensional graphics engine, etc.; wherein the surface manager is used to manage the display subsystem, and provides the fusion of the two-dimensional layer and the three-dimensional layer for multiple application programs; the media library supports the playback and recording of multiple audio formats, the playback and recording of multiple video formats, and static image files. The media library can support multiple audio and video coding formats, for example: MPEG4, H.264, moving picture experts group audio layer III (MP3), advanced audio coding (AAC), adaptive multi-rate (AMR), joint photographic experts group (JPG), and portable network graphics (PNG), etc.; the three-dimensional graphics processing library can be used to realize three-dimensional graphics drawing, image rendering, synthesis, and layer processing; the two-dimensional graphics engine is a drawing engine for two-dimensional drawing.
[0140] Exemplarily, the kernel layer is a layer between hardware and software. The kernel layer can include a display driver, a camera driver, an audio driver, and a sensor driver, and the like.
[0141] Optionally, Figure 7 The connection relationship of the illustrated layers is only illustrative and does not constitute a limitation on the connection relationship of the software architecture layers of the electronic device.
[0142] Exemplarily, the method for displaying a card provided by the embodiments of the present application can be implemented through the managers or modules in the application architecture layer; for example, after the application layer detects the operation of the user, the application layer can send information related to the card to the card set control manager in the application architecture layer; for example, the application layer can send the card identifier, the sorting of the card identifier, and the content information of the card to the data adapter in the card set control manager; the application layer can send the card size and the number of cards to the layout manager in the card set control manager; the data adapter can send the card identifier, the sorting of the card identifier, and the content information of the card to the layout manager; and the layout manager can send the card identifier and the position information of the card to the angle manager.
[0143] Optionally, the data interaction process between the managers or data adapters in the card set control manager can be referred to the related description of the subsequent Figure 8 .
[0144] Optionally, the data interaction process between the managers or data adapters in the card set control manager can be referred to the related description of the subsequent Figure 8 .
[0145] The data flow interaction between the managers or modules in the application architecture layer of the electronic device in the method for displaying a card of the present application will be described in detail below. As Figure 8 shown, the method includes steps S401 to S423; the steps S401 to S423 will be described in detail below. Figure 8
[0146] S401, the application layer detects a first operation on a card set.
[0147] Exemplarily, the electronic device displays a stacked card set, and the electronic device detects a first operation on the stacked card set; wherein the first operation is an operation of triggering the card set to change from a folded state to an unfolded state; the first operation can be an upward sliding operation, or the first operation can be a long press operation, or the first operation can be other operations.
[0148] In one implementation, when a user wants to view one or more cards in a stacked card set, the electronic device first detects a first operation on the card set. In response to the first operation, the card set is adjusted from a stacked state to a transition state, and multiple cards can be displayed on the screen. If the user wants to browse the information in multiple cards, the electronic device can detect the user's click operation on the screen and swipe operation on the screen. If the user stops browsing the information in multiple cards on the screen, the electronic device can detect the operation of lifting a finger.
[0149] S402. In response to the first operation, the application layer sends the card identifiers in the card set, the order of the card identifiers, and the content information of the cards to the data adapter.
[0150] Among them, card identifiers are used to identify different cards in the card set; the order of card identifiers is used to characterize the display order of multiple cards in the card set; the content information of the card includes text information or image information in the card.
[0151] For example, such as Figure 3 The card display area shown in (a) displays a card set, which includes weather cards, note cards, daily tips cards, express delivery reminder cards, download information cards, and to-do items cards. These cards can be identified by different serial numbers; for example, serial number 1 identifies the weather card, serial number 2 identifies the note card, serial number 3 identifies the daily tips card, serial number 4 identifies the express delivery reminder card, serial number 5 identifies the download information card, and serial number 6 identifies the to-do items card.
[0152] It should be noted that the above example uses serial number identification of cards, and this application does not limit the implementation method of marking different cards in the card set.
[0153] For example, such as Figure 3 The weather card shown in (a) contains information such as the current temperature "30℃", "high 31℃", "low 23℃", "sunny", "12:30℃", "13:28℃", "14:27℃", "15:26℃", "16:21℃", and "17:20℃".
[0154] For example, such as Figure 3 The note card shown in (c) contains information such as "UX design itself is very broad" and "the qualities a UX designer should possess".
[0155] Optionally, in an implementation, the application layer can send the card identifiers and the order of the card identifiers to the data adapter by sending an information; for example, the application layer can send continuous or discontinuous serial numbers to the data adapter, and the continuous or discontinuous serial numbers can represent the card identifiers and the order of the card identifiers; for example, on one hand, different continuous or discontinuous serial numbers can represent different cards in the card set; on the other hand, the display order of the cards can be obtained according to the numerical size of the continuous or discontinuous serial numbers; for example, the display order of the cards can be obtained according to the continuous or discontinuous serial numbers from small to large; or the display order of the cards can be obtained according to the continuous or discontinuous serial numbers from large to small.
[0156] Optionally, the application layer can send the card identifiers, the order of the card identifiers and the content information of the cards in the card set to the data adapter through the card set control manager as shown in Figure 2
[0157] For example, the application layer sends the card identifiers, the order of the card identifiers and the content information of the cards in the card set to the card set control manager, and the card set control manager sends the card identifiers, the order of the card identifiers and the content information of the cards in the card set to the data adapter.
[0158] S403, in response to the first operation, the application layer sends the card size and the number of cards to the layout manager.
[0159] For example, as shown in (a) of FIG. 4, the maximum number of cards allowed to be displayed in the display interface is 4. Figure 4
[0160] Optionally, the card sizes of the cards in the card set can be the same.
[0161] Optionally, the application layer can send the card size and the number of cards to the layout manager through the card set control manager as shown in Figure 7
[0162] For example, the application layer sends the card size and the number of cards to the card set control manager, and the card set control manager sends the card size and the number of cards to the layout manager.
[0163] Optionally, S402 can be performed first and then S403 can be performed; or S403 can be performed first and then S402 can be performed; or S402 and S403 can be performed simultaneously, and the present application does not make any limitation in this regard.
[0164] S404. The data adapter sends the card identifier in the card set, the order of the card identifier, and the content information of the card to the layout manager.
[0165] By way of example, the card identifier, the order of the card identifier, and the content information of the card can refer to the relevant description in S402, which will not be described here again.
[0166] S405. The application layer detects a touch operation.
[0167] By way of example, the touch operation can be a click operation on the display screen.
[0168] Optionally, as shown in Figure 7 If the application layer detects the touch operation, the application layer can send information to the card set control manager in the application framework layer, and the card set control manager sends information to the angle manager; the instruction is used to indicate that the touch operation of the user on the display screen is detected (or the touch event of the user is detected), and the information is used to trigger the angle manager to update the state of the timer.
[0169] S406. The application layer sends touch information to the layout manager.
[0170] The touch information is used to indicate that the touch operation of the user is detected by the application layer; for example, the touch operation can be an operation of pressing the display screen with a finger, or an operation of clicking the display screen with a finger, etc.
[0171] S407. The layout manager sends the touch information to the angle manager.
[0172] The touch information is used to indicate that the touch operation of the user is detected by the application layer; for example, the touch operation can be an operation of pressing the display screen with a finger, or an operation of clicking the display screen with a finger, etc.
[0173] S408. The angle manager updates the state of the timer and calculates the degree of change a1 of the angle.
[0174] It should be understood that the degree of change a1 of the angle is used to represent the degree of distortion of the angle of the card in the card set after the touch operation is detected; for example, the degree of change a1 of the angle ranges from 0% to 100% within a preset time length after the touch operation is detected.
[0175] S409. The application layer detects a sliding operation.
[0176] By way of example, the electronic device detects the sliding operation of the user after detecting the click operation; according to the sliding distance of the sliding operation, the card in the display screen is displayed in an unfolded state.
[0177] S410. The application layer sends the sliding distance of the sliding operation to the layout manager.
[0178] Exemplarily, in the embodiment of the present application, the measurement unit of the sliding distance of the sliding operation can be pixel (px).
[0179] Optionally, as shown in the figure, the application layer detects the click operation; the application layer can send the sliding distance to the card set control manager in the application framework layer, and the card set control manager can send the sliding distance to the layout manager. Figure 7
[0180] S411, the layout manager obtains the accumulated total sliding distance based on the sliding distance, and calculates the position information of each card in the card set.
[0181] In one example, it is assumed that upward sliding is positive sliding and downward sliding is negative sliding; the first sliding operation of the user is detected as upward sliding with a sliding distance of y1 pixels, the second sliding operation of the user is detected as upward sliding with a sliding distance of y2 pixels, and the accumulated total sliding distance h of the two sliding operations is (y1+y2) pixels.
[0182] In another example, it is assumed that upward sliding is positive sliding and downward sliding is negative sliding; the first sliding operation of the user is detected as upward sliding with a sliding distance of y1 pixels; the second sliding operation of the user is detected as upward sliding with a sliding distance of y2 pixels; the third sliding operation of the user is detected as downward sliding with a sliding distance of y3 pixels, and the accumulated total sliding distance h of the three sliding operations is [y1+y2+(-y3)] pixels.
[0183] In another example, it is assumed that upward sliding is positive sliding and downward sliding is negative sliding; the first sliding operation of the user is detected as upward sliding with a sliding distance of y1 pixels; the second sliding operation of the user is detected as upward sliding with a sliding distance of y2 pixels; the third sliding operation of the user is detected as downward sliding with a sliding distance of y3 pixels, and the accumulated total sliding distance h of the three sliding operations is [y1+y2+(-y3)] pixels.
[0184] It should be noted that the above is an example description of the sliding operation and the accumulated total sliding distance, and the present application does not make any limitation thereto.
[0185] The calculation of the position information of each card in the card set by the layout manager is described in detail below.
[0186] Exemplarily, as shown in the figure, Figure 9 As shown in (a) of FIG. 1, the cards displayed in the display screen from top to bottom include: cards in the top stack area (for example, cards identified as n-3, n-2 and n-1), the first fully visible card (for example, card identified as n), other fully visible cards (for example, cards identified as n+1, n+2, n+3 to m), and cards in the bottom stack area (for example, cards identified as m+1, m+2 and m+3); wherein the stack card interval of the cards in the top stack area or the cards in the bottom stack area is h1; the height of a single card is h2; and the visible card interval is h3.
[0187] It should be noted that the display position of the card in the display screen changes in response to the detected sliding operation; that is, at different times, the first fully visible card displayed in the display screen can be different.
[0188] In addition, the sliding coefficient a is also needed when calculating the card position information, which is used to represent the percentage of the movement position of the current card from the card position to the card position of the previous card of the current card; for example, the sliding coefficient a can represent the percentage of the movement position of the nth card from the current card position to the card position of the (n-1)th card; for example, the sliding coefficient a can be calculated based on the top left corner vertex of the card.
[0189] For example, the sliding coefficient a = [h%(h2+h3)] / (h2+h3); wherein h represents the total accumulated sliding distance detected by the sliding operation; h2 represents the height of a single card; h3 represents the visible card interval; % represents the modulo operation; and the value range of the sliding coefficient a is 0% to 100%.
[0190] It should be noted that the sliding coefficient a can be unitless.
[0191] For example, the card identification of the first fully visible card = [h / (h2+h3)]; wherein h represents the total accumulated sliding distance detected by the sliding operation; h2 represents the height of a single card; h3 represents the visible card interval; [] represents the upward rounding operation; the position of the first fully visible card = K1*h1+(h2+h3)*(1-a); wherein K1 represents the stack level number of the top card display area; h1 represents the stack card interval; h2 represents the height of a single card; h3 represents the visible card interval; and a represents the sliding coefficient.
[0192] For example, the position of the card identified as n shown in (a) of FIG. 1 is taken as an example, the stack level number K1 = 3; and the position of the first fully visible card = 3*h1+(h2+h3)*(1-a). Figure 9 For example, the position of the card identified as n shown in (a) of FIG. 1 is taken as an example, the stack level number K1 = 3; and the position of the first fully visible card = 3*h1+(h2+h3)*(1-a).
[0193] It should be understood that before the cards are moved, the first fully visible card is the card with card identifier n; in response to the user's upward swipe operation, multiple cards move upward, and the card with card identifier n+1 covers at least a portion of the card with card identifier n, at which point the first fully visible card is the card with card identifier n+1; before the cards are moved, the sliding coefficient a is 0% for the card with card identifier n+1; when the card with card identifier n+1 moves to the position of the card with card identifier n, the sliding coefficient a is 100% for the card with card identifier n+1.
[0194] For example, when displaying the animation effect of a card, the card's position information can be calculated using the distance between the top-left vertices of the cards; for instance, assuming that before the card's position changes, the distance between the top-left vertex A1 of card ID n and the top-left vertex A2 of card ID n+1 is h2+h3; when an upward swipe operation on the card or the display screen is detected, with the top of the display screen as the initial position, an upward swipe is a positive swipe, and a downward swipe is a negative swipe; the card with card ID n can be moved from, for example... Figure 9 Move the position shown in (b) to the position shown in the diagram. Figure 9 The position shown in (c) is as follows: At this time, since the movement of card n+1 is a dynamic process, and the distance moved is related to the sliding coefficient a, that is, the distance moved is related to the percentage by which card n+1 moves from its current position to the position of card n; therefore, after card n+1 moves, the distance between the top left corner vertex A1' of card n and the top left corner vertex A2' of card n+1 is (h2+h3)*(1-a); therefore, the interval between the top left corner vertex of the first fully visible card and the initial position is K1*h3+(h2+h3)*(1-a), that is, the position of the first fully visible card = K1*h1+(h2+h3)*(1-a); K1 represents the number of stacking levels in the top display area of the screen; h1 represents the stacking card interval; h2 represents the height of a single card; h3 represents the visible card interval; a represents the sliding coefficient; for example, as Figure 9 As shown in (a), K1 = 3.
[0195] Optionally, if the cards are represented by consecutive numerical sequences, then the position of other fully visible cards = (this card identifier - n) * (h2 + h3) + the card position of card identifier n; where n represents the identifier of the first fully visible card; h2 represents the height of a single card; and h3 represents the interval between visible cards.
[0196] For example, the distance between each other fully visible card, except the first fully visible card, is fixed; for example, the distance between the card with card identification n+2 and the card with card identification n+1 is fixed as h3.
[0197] For example, if the card identification is a continuous number sequence, the position of the card in the top stacking area = K1*h1-(n-card identification of the current card-1+a)*h1; wherein K1 represents the stacking level number of the top display area of the display screen; h1 represents the stacking card interval; n represents the identification of the first fully visible card; and a represents the sliding coefficient.
[0198] For example, when displaying the animation effect of the card, the position information of the card can be calculated based on the distance between the top left corner vertices of the card; for example, as shown in (d) of FIG. 6, before the position of the card changes, the distance between the top left corner vertex A1 of the card with card identification n and the top left corner vertex A3 of the card with card identification n-1 is h1; the upward sliding operation of the card or the display screen is detected, the top of the display screen is the initial position, the upward sliding is the positive sliding, and the downward sliding is the negative sliding; the card with card identification n can be moved from the position shown in (d) of FIG. 6 to the position shown in (e) of FIG. 6; at this time, since the moving process of the card with card identification n is a dynamic process, and the moving distance is related to the sliding coefficient a, that is, the moving distance is related to the percentage of the card with card identification n moving from the current card to the position of the card with card identification n-1; therefore, after the card with card identification n moves, the distance between the top left corner vertex A1' of the card with card identification n and the top left corner vertex A3' of the card with card identification n-1 is a*h1. Figure 9 Figure 9 Figure 9
[0199] For example, if the card identification is a continuous number sequence, the position of the card in the bottom stacking area = the position of the card m+(h2+h3)*a+(card identification of the current card-card identification of the card m-a)*K2; wherein card m represents the last fully visible card, K2 represents the stacking level number of the bottom display area of the display screen; h2 represents the height of a single card; h3 represents the visible card interval; and a represents the sliding coefficient.
[0200] Optionally, in an implementation manner, K1 is equal to K2, that is, the stacking level number of the top display area of the display screen is equal to the stacking level number of the bottom display area of the display screen.
[0201] For example, when displaying the animation effect of the card, the position information of the card can be calculated based on the distance between the top left corner vertices of the card; for example, as shown in (d) of FIG. 6, before the position of the card changes, the distance between the top left corner vertex A1 of the card with card identification n and the top left corner vertex A3 of the card with card identification n-1 is h1; the upward sliding operation of the card or the display screen is detected, the top of the display screen is the initial position, the upward sliding is the positive sliding, and the downward sliding is the negative sliding; the card with card identification n can be moved from the position shown in (d) of FIG. 6 to the position shown in (e) of FIG. 6; at this time, since the moving process of the card with card identification n is a dynamic process, and the moving distance is related to the sliding coefficient a, that is, the moving distance is related to the percentage of the card with card identification n moving from the current card to the position of the card with card identification n-1; therefore, after the card with card identification n moves, the distance between the top left corner vertex A1' of the card with card identification n and the top left corner vertex A3' of the card with card identification n-1 is a*h1. Figure 9 As shown in (f) in FIG. 6, before the position of the card changes, the distance between the top left corner vertex A4 of the card with the card identification m and the top left corner vertex A5 of the card with the card identification m+1 is h1; the upward sliding operation on the card or the display screen is detected, the top of the display screen is the initial position, the upward sliding is the positive sliding, and the downward sliding is the negative sliding; the card with the card identification m and the card with the card identification m+1 can be moved from the position as shown in (f) in FIG. 6 to the position as shown in (g) in FIG. 6; at this time, since the moving process of the card with the card identification m+1 is a dynamic process, and the moving distance is related to the sliding coefficient a, that is, the moving distance is related to the percentage of the card with the card identification m+1 moving from the current card to the position of the card with the card identification m; therefore, after the card with the card identification m+1 moves, the distance between the top left corner vertex A4' of the card with the card identification m and the top left corner vertex A3' of the card with the card identification m+1 is (1-a)*h1. Figure 9 As shown in (f) in FIG. 6, before the position of the card changes, the distance between the top left corner vertex A4 of the card with the card identification m and the top left corner vertex A5 of the card with the card identification m+1 is h1; the upward sliding operation on the card or the display screen is detected, the top of the display screen is the initial position, the upward sliding is the positive sliding, and the downward sliding is the negative sliding; the card with the card identification m and the card with the card identification m+1 can be moved from the position as shown in (f) in FIG. 6 to the position as shown in (g) in FIG. 6; at this time, since the moving process of the card with the card identification m+1 is a dynamic process, and the moving distance is related to the sliding coefficient a, that is, the moving distance is related to the percentage of the card with the card identification m+1 moving from the current card to the position of the card with the card identification m; therefore, after the card with the card identification m+1 moves, the distance between the top left corner vertex A4' of the card with the card identification m and the top left corner vertex A3' of the card with the card identification m+1 is (1-a)*h1. Figure 8 As shown in (f) in FIG. 6, before the position of the card changes, the distance between the top left corner vertex A4 of the card with the card identification m and the top left corner vertex A5 of the card with the card identification m+1 is h1; the upward sliding operation on the card or the display screen is detected, the top of the display screen is the initial position, the upward sliding is the positive sliding, and the downward sliding is the negative sliding; the card with the card identification m and the card with the card identification m+1 can be moved from the position as shown in (f) in FIG. 6 to the position as shown in (g) in FIG. 6; at this time, since the moving process of the card with the card identification m+1 is a dynamic process, and the moving distance is related to the sliding coefficient a, that is, the moving distance is related to the percentage of the card with the card identification m+1 moving from the current card to the position of the card with the card identification m; therefore, after the card with the card identification m+1 moves, the distance between the top left corner vertex A4' of the card with the card identification m and the top left corner vertex A3' of the card with the card identification m+1 is (1-a)*h1.
[0202] In the embodiment of the present application, the layout manager is included in the card control manager; the layout manager can acquire the accumulated sliding total distance of the sliding operation of the user; the position information of each card in the card set is calculated according to the accumulated sliding total distance, and when the plurality of cards in the card set are displayed in the electronic device, the animation effect of the cards being stacked at the top and the bottom of the display screen at the same time can be realized, so that the user can efficiently acquire the information of one or more cards, and the experience of the user is improved.
[0203] S412, the layout manager sends the card identification, the order of the card identification, the content information of the card and the position information of the card to the View framework module.
[0204] Optionally, the layout manager can also send the card size and the card quantity to the View framework module.
[0205] Exemplarily, the card identification, the order of the card identification and the content information of the card can be referred to the related description in S402, and the position information of the card can be referred to the related description of S411, which will not be described here.
[0206] Optionally, the position information interface is arranged in the View framework module, and the View framework module can receive the position information of the card through the position information interface.
[0207] Optionally, the View framework module can receive the card identification, the order of the card identification and the content information of the card through any existing manner, and the embodiment of the present application does not make any limitation in this regard.
[0208] S413, the layout manager sends the position information of the card and the card identification to the angle manager.
[0209] It should be understood that when the angle manager calculates the angle information of each card, the position information of the card and the card identifier need to be obtained; therefore, the angle manager can obtain the position information of the card and the card identifier from the layout manager.
[0210] In S414, the angle manager calculates the current angle 1 of each card in the card set according to the angle change degree a1.
[0211] Exemplarily, in the embodiment of the present application, the current angle 1 of the card in the card set is related to the position information of the card.
[0212] It should be noted that the current angle of the card and the position information of the card are in a linear change relationship, and the current angle 1 is associated with the angle change degree a1; wherein the card angle can be used to represent the maximum distortion angle allowed by a card; or the card angle can be used to represent the angle change range allowed by a card; the current angle of the card refers to the distortion angle of the card at the current time; for example, card angle = f(y-axis coordinate value of the center of the card); current angle 1 of the card = f(y-axis coordinate value of the center of the card) * a1; wherein a1 represents the angle change degree within a preset time length when the click operation is detected.
[0213] It should be understood that for the card in the top area of the display screen, the maximum distortion angle allowed can be regarded as the maximum angle of the card allowed to be turned inward to the display screen with the bottom edge of the card as the axis; for the card in the bottom area of the display screen, the maximum distortion angle allowed can be regarded as the maximum angle of the card allowed to be turned inward to the display screen with the top edge of the card as the axis.
[0214] Exemplarily, card angle = (y-axis coordinate value of the center of the card - center position of the card set) / half of the overall height of the card set * preset angle; for example, the preset angle can be 15 degrees.
[0215] It should be understood that for the center of the display screen, the card angle is smaller and smaller; gradually approaching the top of the display screen from the center of the display screen, the card angle is getting larger and larger; gradually approaching the bottom of the display screen from the center of the display screen, the card angle is getting larger and larger.
[0216] Optionally, the cards displayed at the top of the display screen and the bottom of the display screen can be mirror symmetric.
[0217] In one example, the number of cards in the display screen is taken as an example of 5; card 1, card 2, card 3, card 4 and card 5 are displayed from the top to the bottom of the display screen; wherein the card angle of card 1 is 15 degrees, i.e. the maximum distortion angle allowed by card 1 is 15 degrees; the card angle of card 2 is 10 degrees, i.e. the maximum distortion angle allowed by card 2 is 10 degrees; the card angle of card 3 is 5 degrees, i.e. the maximum distortion angle allowed by card 3 is 5 degrees; the card angle of card 4 is 10 degrees, i.e. the maximum distortion angle allowed by card 4 is 10 degrees; the card angle of card 5 is 15 degrees, i.e. the maximum distortion angle allowed by card 5 is 15 degrees.
[0218] Exemplarily, the current angle 1 of the card = f(y-axis coordinate value of the center of the card) * a1; wherein a1 represents the degree of change in angle within the preset time period during which the click operation is detected.
[0219] It should be noted that the range of a1 within the preset time period during which the click operation is detected is 0% to 100%; a1 is 0% at the moment when the click operation is detected; a1 is 100% after the preset time period after the moment when the click operation is detected; wherein the preset time period can be 200ms, i.e. a1 is 0% at the moment when the click operation is detected; a1 is 100% after 200ms after the moment when the click operation is detected; i.e. the card reaches the full distortion state after 200ms.
[0220] For example, the card angle = f(y-axis coordinate value of the center of the card) = (y-axis coordinate value of the center of the card - center position of the card set) / half of the overall height of the card set * preset angle; then the current angle 1 of the card = f(y-axis coordinate value of the center of the card) * a1 = (y-axis coordinate value of the center of the card - center position of the card set) / half of the overall height of the card set * preset angle * a1; wherein the preset angle can be 15 degrees; wherein the overall height of the card set can refer to the distance between the top of the first visible card and the bottom of the last visible card in the display screen, wherein the first visible card can refer to part or all of the visible card.
[0221] Optionally, in one implementation, the overall height of the card set is a fixed value; it can be understood that the overall height of the card set is the same when the stacked cards are displayed in the top display area and / or the bottom display area of the display screen.
[0222] It should be understood that the above example takes the preset angle as 15 degrees; the preset angle can be a preconfigured angle, and the preset angle can also be 10 degrees, 11 degrees, 12 degrees, 13 degrees, 14 degrees or 16 degrees, etc., which are not limited in the present application.
[0223] S415. The angle manager sends the current angle 1 corresponding to each card identifier to the layout manager.
[0224] For example, the angle manager can send the current angle 1 corresponding to each card identifier to the layout manager after calculating the current angle 1 of each card in the card set.
[0225] For example, the card identifiers include identifier 1, identifier 2, identifier 3 and identifier 4; identifier 1 identifies card 1, and the current angle 1 of card 1 is C1 degrees; identifier 2 identifies card 2, and the current angle 1 of card 2 is C2 degrees; identifier 3 identifies card 3, and the current angle 1 of card 3 is C3 degrees; identifier 4 identifies card 4, and the current angle 1 of card 4 is C4 degrees; the angle manager sends information to the layout manager, and the information can include: identifier 1-C1 degrees, identifier 2-C2 degrees, identifier 3-C3 degrees, and identifier 4-C4 degrees.
[0226] S416. The View framework module draws the card display interface of the current frame according to the card identifier, the order of the card identifier, the content information of the card, the position information of the card and the current angle 1 of the card.
[0227] Optionally, after the View framework module draws the card display interface of the current frame, the View framework module can trigger the display screen of the electronic device to display the card display interface of the current frame.
[0228] It should be noted that, Figure 7 S401-S416 can be a process of generating a frame of card display interface; according to the sliding operation detected at different times, the electronic device can execute the above steps multiple times to generate multiple frames of card display interface; display multiple frames of card display interface, that is, display the card animation effect; the time of detecting the sliding operation is related to the sampling rate of the display screen.
[0229] For example, as shown in Figure 7 The animation effect framework module can control the View framework module to draw the card display interface of the current frame according to the card identifier of each card in the card set, the order of the card identifier, the content information of the card, the position information of the card and the current angle 1 of the card; the View framework module can trigger the display screen of the electronic device to display multiple frames of card display interface, that is, display the animation effect of the card set; in the scheme of the present application, the View framework module can obtain the position information of the card to realize the animation effect of the up-down stacking of the card in the display screen; in addition, the View framework module can obtain the current angle 1 of each card to realize the effect of the change of the angle of the card based on the current angle 1 of each card.
[0230] S417. The application layer detects the operation of lifting the finger.
[0231] It should be noted that the operation of lifting the finger can refer to an operation of the finger leaving the display screen, i.e., an operation in which the electronic device does not detect that the finger of the user touches the display screen.
[0232] S418, the application layer sends lifting information to the layout manager.
[0233] The lifting information is used to indicate that the application layer detects the operation of lifting the finger of the user; for example, the operation of lifting the finger can refer to an operation of the user releasing or leaving the display screen.
[0234] S419, the layout manager sends the lifting information to the angle manager.
[0235] The lifting information is used to indicate that the application layer detects the operation of lifting the finger of the user; for example, the operation of lifting the finger can refer to an operation of the user releasing or leaving the display screen.
[0236] S420, the position information of the card and the card identifier are sent.
[0237] Exemplarily, S410 and S411 can be performed to obtain the position information of the card and the card identifier; according to the sampling rate, the position information of the card can be different for different frames, i.e., at different time points.
[0238] S421, the angle manager updates the state of the timer and calculates the degree of change of the angle a2; the current angle 2 of each card in the card set is calculated according to the degree of change of the angle 2.
[0239] Optionally, as shown in Figure 7 the application layer detects the operation of lifting the finger; the application layer can send an instruction to the card set control manager in the application framework layer, the card set control manager can send an instruction to the angle manager, and the instruction causes the angle manager to start timing through the timer in the angle manager.
[0240] It should be understood that the degree of change of the angle a2 is used to represent the degree of distortion of the angle of the card in the card set after the operation of lifting the finger is detected; for example, the degree of change of the angle a2 ranges from 100% to 0% within a preset time period after the operation of lifting the finger is detected.
[0241] It should be noted that the degree of change of the angle a1 ranges from 0% to 100% within a preset time period after the application layer detects the click operation; the degree of change of the angle a2 ranges from 100% to 0% within a preset time period after the application layer detects the operation of lifting the finger.
[0242] It should be understood that at moment 1 (0ms) when the application layer detects a click operation on the display screen, the card's display state can be two-dimensional (e.g., the card has no distortion angle); from moment 1 to a preset duration (e.g., 200ms), the card's display state changes from two-dimensional to three-dimensional (e.g., the card gradually changes from having no distortion angle to having a distortion angle); after the preset duration (e.g., after 200ms), the card's display state is completely three-dimensional (e.g., the card's distortion angle is the maximum allowed distortion angle); similarly, when the application layer detects a finger lift operation, the card's display state can recover from a three-dimensional state to a two-dimensional state; for example, when the application layer detects... At time 2, i.e., 0ms after the finger is lifted, the card is displayed in a three-dimensional state. From time 2 to a preset duration (e.g., 200ms), the card's display state changes from a three-dimensional state (e.g., the card's distortion angle is the maximum allowed distortion angle) to a two-dimensional state (e.g., the card gradually changes from a state without distortion angle to a state with distortion angle). After the preset duration (e.g., after 200ms), the card's display state is completely two-dimensional. For example, when a click operation is detected, the shape of the card displayed on the screen gradually changes from a rectangle to a non-rectangular shape; when a finger lift operation is detected, the shape of the card displayed on the screen gradually changes from a non-rectangular shape to a rectangle.
[0243] Optionally, the implementation of S421 can refer to the relevant description of S414. The difference between S421 and S414 is that in S421, the current angle 2 of each card in the card set is calculated based on the degree of angle change a2; that is, the degree of angle change in S414 can be replaced with the degree of angle change a2 to obtain the current angle 2 of each card.
[0244] S422, The Angle Manager sends the current angle 2 corresponding to each card identifier to the View Architecture Module.
[0245] For example, after calculating the current angle 2 of each card in the card set, the angle manager can send the current angle 2 corresponding to each card identifier to the layout manager.
[0246] For example, card identifiers include identifier 1, identifier 2, identifier 3, and identifier 4; identifier 1 identifies card 1, and the current angle 2 of card 1 is C5 degrees; identifier 2 identifies card 2, and the current angle 2 of card 2 is C6 degrees; identifier 3 identifies card 3, and the current angle 2 of card 3 is C7 degrees; identifier 4 identifies card 4, and the current angle 2 of card 4 is C8 degrees; the angle manager sends information to the layout manager, which may include: identifier 1 - C5 degrees, identifier 2 - C6 degrees, identifier 3 - C7 degrees, and identifier 4 - C8 degrees.
[0247] S423、The View framework module draws the card display interface of the current frame according to the card identifier, the order of the card identifier, the content information of the card, the position information of the card, and the current angle 2 of the card.
[0248] Optionally, after the View framework module draws the card display interface of the current frame, the View framework module can trigger the display screen of the electronic device to display the card display interface of the current frame.
[0249] For example, as shown in Figure 7 , the animation effect framework module can control the View framework module to draw the card display interface of the current frame according to the card identifier of each card in the card set, the order of the card identifier, the content information of the card, the position information of the card, and the current angle 2 of the card; the View framework module can trigger the display screen of the electronic device to display multiple frames of card display interfaces, that is, display the animation effect of the card set; in the scheme of the present application, the View framework module can obtain the position information of the card to realize the animation effect of the simultaneous stacking effect of the card at the top and the bottom of the display screen; in addition, the View framework module can obtain the current angle 2 of each card to realize the effect of the change of the angle of the card based on the current angle 2 of each card.
[0250] In the embodiments of the present application, on the one hand, when the multiple cards in the card set are displayed in the electronic device, the animation effect of the simultaneous stacking effect of the card at the top and the bottom of the display screen can be realized, so that the user can efficiently obtain the information of one or more cards, and the user experience is improved; on the other hand, in the embodiments of the present application, the angle information of the multiple cards in the card set can be managed by one angle manager, which can save the resources of the electronic device to a certain extent.
[0251] For example, the method for displaying a card shown in Figure 8 manages the angle information of the multiple cards in the card set by one angle manager; optionally, in an implementation manner, the card set control manager can include multiple angle managers, and one angle manager in the multiple angle managers is used to manage the angle information of one card in the card set; for details of the implementation manner of calculating the current angle of the card, refer to the related description in Figure 10 , which will not be described here.
[0252] Figure 7 is a schematic flowchart of a method for displaying a card provided by the embodiments of the present application. The method can be executed by the software architecture of the electronic device shown in Figure 3 ; the method includes S510 to S540, which will be described in detail below.
[0253] S510, detecting a first operation on a card display area.
[0254] The card display area displays the first card, and the card display area includes multiple cards, with the first card covering the other cards in the multiple cards.
[0255] Optionally, the first card completely covers all the other cards in the set of cards except the first card; such as Figure 3 As shown in (a), the first card can be card 102. If the first card completely covers the other cards in the multiple cards, only the first card is displayed in the card display area, that is, only card 102 is displayed in the card display area.
[0256] Optionally, the first card may partially cover the other cards in a plurality of cards.
[0257] For example, such as Figure 4 As shown in (a), the first card can be card 102; the card display area can be the display area where card 102 is located; the first operation can be the operation that triggers the card set to change from a stacked state to an unfolded state; for example, the first operation can be an upward swipe operation, a long press operation, or other operations.
[0258] S520, in response to the first operation, displays the first interface.
[0259] The first interface displays some of the cards from multiple cards, including the first card and the second card.
[0260] For example, the first card and the second card can be different cards; for instance, according to the display order from top to bottom, the first card can refer to the first card that displays the complete card content information; the second card can be any card located below the first card.
[0261] Optionally, the first interface includes a first area and a second area, the first area displays a first card, and the second area displays at least two cards from a plurality of cards, the first area being the top display area of the display screen and the second area being the bottom display area of the display screen.
[0262] It should be understood that the first area may refer to the display area at a preset distance from the center of the display screen in the first direction; the second area may refer to the display area at a preset distance from the center of the display screen in the opposite direction to the first direction.
[0263] For example, such as Figure 8 As shown in (b), the first area can refer to the display area where card 1 and card 2 are located; the second area can refer to the display area where card 3 and card 4 are located.
[0264] S530, A second operation on the first interface has been detected.
[0265] Exemplarily, the second operation can include a touch operation, a sliding operation or a finger-lifting operation on the display screen.
[0266] It should be noted that the finger-lifting operation can refer to an operation as shown in S417. Figure 3
[0267] S540, in response to the sliding operation, displaying a second interface.
[0268] The second interface includes a second card, the second card has a first inclination angle, the first inclination angle is different in different positions of the first interface, and the first inclination angle is used to represent the angle of the second card turning inwards the display screen.
[0269] Optionally, at least two cards are displayed in the first area and / or the second area of the second interface.
[0270] Exemplarily, at least two cards are displayed in the first area of the second interface, and one card is displayed in the second area; or, in response to the sliding operation, the second interface is displayed, at least two cards are displayed in the first area of the second interface, and at least two cards are displayed in the second area; or, in response to the sliding operation, the second interface is displayed, one card is displayed in the first area of the second interface, and at least two cards are displayed in the second area.
[0271] Optionally, the display shape of the at least two cards displayed in the first area and / or the second area of the second interface is a first shape, and the first shape can be a quadrilateral other than a rectangle; for example, the first shape can be a trapezoid.
[0272] Exemplarily, as shown in (c) of FIG. 13, the second area of the second interface displays card 34 and card 35; wherein the display shape of the card 34 and the card 35 is the first shape. Figure 4 Exemplarily, as shown in (a) of FIG. 13, the first area of the second interface displays card 31 and card 32; the second area of the second interface displays card 35 and card 36; wherein the display shape of the card 31 and the card 32 is the first shape; the display shape of the card 35 and the card 36 is the first shape.
[0273] Figure 4 Exemplarily, as shown in (c) of FIG. 13, the first area of the second interface displays card 32 and card 33; wherein the display shape of the card 32 and the card 33 is the first shape.
[0274] Exemplarily, as shown in (c) of FIG. 13, the first area of the second interface displays card 32 and card 33; wherein the display shape of the card 32 and the card 33 is the first shape. Figure 4
[0275] Optionally, in an implementation, if at least two cards are displayed in the first region and the second region of the second interface, the display shape of the at least two cards displayed in the first region is mirror-symmetrical to the display shape of the at least two cards displayed in the second region.
[0276] For example, as shown in (a) of FIG. 31, the first region of the second interface displays card 31 and card 32; the second region of the second interface displays card 35 and card 36; wherein the display shape of card 31 and card 32 is non-rectangular; the display shape of card 35 and card 36 is non-rectangular, and the first region and the second region are mirror-symmetrical with the center position of the display screen as the axis of symmetry. Figure 8
[0277] Optionally, in an implementation, the second operation includes a touch operation and a sliding operation, and in response to the second operation, the second interface is displayed, including:
[0278] In response to the touch operation, the state of the timer is updated and a first angle coefficient is obtained, the first angle coefficient being related to the state of the timer; in response to the sliding operation, distance information of the sliding operation is obtained; according to the distance information of the sliding operation, position information of each card in the plurality of cards is obtained, the position information of each card in the plurality of cards including position information of a second card; according to the first angle coefficient and the position information of the second card, a first tilt angle is obtained; and according to the first tilt angle and the position information of each card in the plurality of cards, the second interface is displayed.
[0279] It should be understood that in the embodiments of the present application, the sliding distance of the sliding operation on the first interface is different, and the position information of the card in the first interface is different; the position information of the card changes with the sliding distance of the sliding operation; the tilt angle of the card is different when the position information of the card is different; and the tilt angle of the card changes with the position information of the card.
[0280] For example, the sliding distance of the sliding operation is the cumulative sliding total distance as shown in S411 of FIG. 41; the sliding coefficient can be the sliding coefficient a as shown in FIG. 42; see the related description of FIGS. 41 and 42, which will not be repeated here. Figure 9 Figure 8 Figure 9 Figure 8
[0281] It should be noted that if one sliding operation on the first interface is detected, the distance information of the sliding operation is the sliding distance of the one sliding operation; if two sliding operations on the first interface are detected, the distance information of the sliding operation is the total distance of the two sliding operations; if multiple sliding operations on the first interface are detected, the distance of the sliding operation is the total distance of the multiple sliding operations; the distance information of the sliding operation can be the cumulative sliding total distance as shown in S411 of FIG. 41. Figure 8
[0282] In the embodiments of the present application, in response to the sliding operation, distance information of the sliding operation can be acquired; a sliding coefficient can be obtained according to the distance information of the sliding operation; and position information of each card in the plurality of cards can be obtained based on the sliding coefficient, and the second interface can be displayed according to the position information of each card.
[0283] It should be understood that, in the scheme of the present application, when the plurality of cards in the first interface in the unfolded state respond to the sliding operation, the motion speed of the current card is less than the motion speed of the next card of the current card in the order from top to bottom of the display screen; in the embodiments of the present application, the card stacking display effect of the first region and / or the second region in the second interface can be realized through the sliding coefficient.
[0284] Exemplarily, the first inclination angle can refer to the current angle 1 as shown in S414 in Figure 9 .
[0285] Optionally, in an implementation manner, the sliding coefficient is obtained according to the distance information of the sliding operation, comprising:
[0286] The sliding coefficient is obtained according to the distance information of the sliding operation, card height information and first interval information; wherein the card height information is used to represent the height of each card in the plurality of cards, and the first interval information is used to represent the interval between two cards displaying complete card content information in the first interface.
[0287] Exemplarily, as shown in (a) in Figure 9 , the card height information can refer to the height of a single card h2; the first card interval information can refer to the visible card interval h3; the sliding coefficient a = [h%(h2+h3)] / (h2+h3); wherein h represents the total accumulated sliding distance of the detected sliding operation; h2 represents the height of a single card; h3 represents the visible card interval; % represents the modulo operation; optionally, see the related description of Figure 9 , which will not be described here.
[0288] Optionally, in an implementation manner, the method further comprises:
[0289] The identification information of the second card is obtained according to the distance information of the sliding operation and the sliding coefficient, and the second card is a card displaying complete card content information in the first region of the second interface.
[0290] For example, the second card can refer to the first completely visible card as shown in (a) in 9; exemplarily, the card identification n of the first completely visible card = [h / (h2+h3)]; wherein h represents the total accumulated sliding distance of the detected sliding operation; h2 represents the height of a single card; h3 represents the visible card interval; [] represents the upward rounding operation.
[0291] Optionally, in an implementation, the position information of each card in the plurality of cards is obtained according to the sliding coefficient, including:
[0292] The position information of the second card is obtained according to the sliding coefficient, the card height information, the first interval information, the second interval information, and the first stack quantity information; wherein the second interval information is used to represent the interval between two cards displaying partial card content information in the first region or the second region; and the first stack quantity information is used to represent the number of cards in the first region except the second card.
[0293] For example, as shown in FIG. 1(a), the sliding coefficient is a, the card height information can be the height of a single card h2, the first card interval information can be the visible card interval h3, the second interval information can be the stack interval h1, and the first stack quantity information can be the number of stack levels, i.e., the number of cards stacked in the first region. Figure 9 Figure 8 As shown in FIG. 1(a), the first region is the top display region, and the number of stacked cards is 3.
[0294] For example, the position of the second card = K1*h1+(h2+h3)*(1-a); wherein K1 represents the number of stack levels in the top display region; h1 represents the stack card interval; h2 represents the height of a single card; h3 represents the visible card interval; and a represents the sliding coefficient.
[0295] Optionally, in an implementation, the method further includes:
[0296] The position information of at least one third card is obtained according to the position information of the second card, the first interval information, the card height information, and the card identification information, the third card being used to represent a card displaying complete card content information in the second interface except the second card, and the at least one third card including a target third card, the target third card being used to represent a card displaying complete card content information in the second region of the second interface;
[0297] The position information of a fourth card is obtained according to the position information of the target third card, the card height information, the card identification information, the second interval information, and the second stack quantity information, the second stack quantity information being used to represent the number of cards in the second region except the target third card, and the fourth card being used to represent a card in the second region of the second interface except the target third card;
[0298] The position information of a fifth card is obtained according to the first stack quantity information, the second interval information, and the card identification information, the fifth card being used to represent a card in the first region of the second interface except the second card.
[0299] Exemplarily, the at least one third card can refer to other fully visible cards except the first fully visible card, such as Figure 8 As shown in (a) of FIG. 6, the at least one third card can include a card corresponding to the card identification n+1, a card corresponding to the card identification n+2, a card corresponding to the card identification n+3, and a card corresponding to the card identification m; the target third card can refer to the card corresponding to the card identification m; the fourth card can refer to the stacked cards in the bottom display area of the display screen; for example, the fourth card includes the card corresponding to the card identification m+1, the card corresponding to the card identification m+2, and the card corresponding to the card identification m+3; the fifth card can refer to the stacked cards in the top display area of the display screen; for example, the fifth card includes the card corresponding to the card identification n-1, the card corresponding to the card identification n-2, and the card corresponding to the card identification n-3.
[0300] Exemplarily, the position information of the third card = (card identification of the current card-card identification of the second card)*(h2+h3)+position information of the second card; wherein h2 represents the height of a single card; and h3 represents the visible card interval.
[0301] Exemplarily, the position information of the fourth card = position information of the target third card+(h2+h3)*a+(card identification of the current card-card identification of the target third card-a)*K2; wherein K2 represents the number of stacked levels in the bottom display area of the display screen; h2 represents the height of a single card; h3 represents the visible card interval; and a represents the sliding coefficient.
[0302] Exemplarily, the position information of the fifth card = K1*h1-(card identification of the second card-card identification of the current card-1+a)*h1; wherein K1 represents the number of stacked levels in the top display area of the display screen; h1 represents the stacked card interval; and a represents the sliding coefficient.
[0303] Optionally, in an implementation, the first inclination angle is obtained according to the first angle coefficient and the position information of the second card, comprising:
[0304] The first angle information is obtained according to the position information of the second card, the first angle being used to represent the maximum distortion angle of the second card; and the first inclination angle is obtained according to the first angle coefficient and the first angle information.
[0305] Exemplarily, the first angle = f(y-axis coordinate value of the card center); see the related description of S414 in FIG. 4, which will not be repeated here. Figure 8
[0306] Optionally, in an implementation, the first angle and the position information of the second card are in a linear relationship.
[0307] Optionally, in an implementation, the initial value of the first angle coefficient is 0 and the maximum value is 1; after detecting the preset time length of the touch operation, the value of the first angle coefficient is 1.
[0308] Exemplarily, for example, within the preset time length of detecting the touch operation on the first interface, the range of the angle change degree a1 is 0% to 100%.
[0309] Optionally, in an implementation, the method further comprises:
[0310] detecting a finger-up operation on the second interface; in response to the finger-up operation, updating the state of the timer and obtaining a second angle coefficient, the second angle coefficient being related to the state of the timer; obtaining a second tilt angle according to the second angle coefficient and position information of the second card; and displaying a third interface according to the second tilt angle and position information of each card in the plurality of cards at the current time.
[0311] Exemplarily, the second angle coefficient can refer to the angle change degree a2 as shown in S421 of Figures 1 to 10 Exemplarily, the second tilt angle can refer to the current angle 2 as shown in S422 of Figure 11
[0312] Optionally, in an implementation, obtaining the second tilt angle according to the second angle coefficient and the position information of the second card comprises:
[0313] obtaining information of a first angle according to the position information of the second card at the current time, the first angle being used to represent the maximum distortion angle of the second card; and obtaining the second tilt angle according to the second angle coefficient and the information of the first angle.
[0314] Optionally, in an implementation, the initial value of the second angle coefficient is 1 and the maximum value is 0; after detecting the preset time length of the finger-up operation, the value of the second angle coefficient is 0.
[0315] Exemplarily, for example, within the preset time length of detecting the finger-up operation on the first interface, the range of the angle change degree a2 is 100% to 0%; wherein, the finger-up operation can refer to the finger-up operation.
[0316] Optionally, in the embodiments of the present application, the electronic device comprises an application framework layer, the application framework layer comprising an angle manager, the angle manager comprising a timer, and the angle manager being used to manage the tilt angles of cards; one angle manager can be used to manage the tilt angles of a plurality of cards in a card set, and managing the tilt angles of the plurality of cards by one angle manager can save the resources of the electronic device to a certain extent.
[0317] Optionally, in the embodiments of the present application, the electronic device comprises an application framework layer, the application framework layer comprises an angle manager, the angle manager comprises a timer, and the angle manager is configured to manage the tilt angle of the card.
[0318] In the embodiments of the present application, the first interface can be an interface in which the card set is in an unfolded state; the second operation on the first interface is detected; and in response to the second operation, the second interface is displayed, the second card in the second interface is in a different position in the first interface, and the first tilt angle is different; that is, in the scheme of the present application, when the card in the card set in the unfolded state is displayed, the position of the second card displayed in the second interface changes, and the first tilt angle of the second card also changes; so that the card displayed in the second display interface changes accordingly based on the second operation of the user, so that the display effect of the card is better, and the user experience is improved. It should be understood that the above examples are intended to help those skilled in the art to understand the embodiments of the present application, and are not intended to limit the embodiments of the present application to the specific values or specific scenarios exemplified. Those skilled in the art can obviously make various equivalent modifications or changes based on the above examples, and such modifications or changes also fall within the scope of the embodiments of the present application.
[0319] The above is described in combination with Figure 12 The method for displaying a card provided by the embodiments of the present application is described in detail; the following will be described in combination with Figure 11 With Figure 12 The device embodiments of the present application are described in detail. It should be understood that the device in the embodiments of the present application can perform various methods of the foregoing embodiments of the present application, that is, the specific working processes of the following various products can be referred to the corresponding processes in the foregoing method embodiments.
[0320] Figure 12Fig. 1 is a structural schematic diagram of an electronic device provided by an embodiment of the present application. The electronic device 100 comprises a processing module 110 and a display module 120; wherein the processing module 110 is configured to: detect a first operation on a card display area, the card display area displaying a first card, the card display area comprising a plurality of cards, the first card covering other cards of the plurality of cards except the first card; and the display module 120 is configured to: in response to the first operation, display a first interface, the first interface displaying part of the plurality of cards, the part of the plurality of cards comprising the first card and a second card.
[0321] Optionally, as an embodiment, the first interface comprises a first area and a second area, the first area displaying the first card, and the second area displaying at least two cards of the part of the plurality of cards.
[0322] Optionally, as an embodiment, the second interface displays at least two cards in the first area and / or the second area.
[0323] Optionally, as an embodiment, the second operation comprises a touch operation and a sliding operation, and the processing module 610 is specifically configured to:
[0324] in response to the touch operation, updating a state of a timer and obtaining a first angle coefficient, the first angle coefficient being related to the state of the timer;
[0325] in response to the sliding operation, obtaining distance information of the sliding operation;
[0326] obtaining position information of each card of the plurality of cards according to the distance information of the sliding operation, the position information of each card of the plurality of cards comprising position information of the second card;
[0327] obtaining the first inclination angle according to the first angle coefficient and the position information of the second card;
[0328] displaying the second interface according to the first inclination angle and the position information of each card of the plurality of cards.
[0329] Optionally, as an embodiment, the processing module 610 is specifically configured to:
[0330] According to the distance information of the sliding operation, a sliding coefficient is obtained, the sliding coefficient being used to represent a percentage of moving one card from a current card position to a previous card position of the current card position;
[0331] According to the sliding coefficient, position information of each card in the plurality of cards is obtained.
[0332] Optionally, as an embodiment, the processing module 610 is specifically used for:
[0333] According to the distance information of the sliding operation, card height information and first interval information, the sliding coefficient is obtained; wherein the card height information is used to represent a height of each card in the plurality of cards, and the first interval information is used to represent an interval between two cards displaying complete card content information in the first interface.
[0334] Optionally, as an embodiment, the second card is a card displaying complete card content information in the first region of the second interface, and the processing module 610 is further used for:
[0335] According to the distance information of the sliding operation and the sliding coefficient, identification information of a second card is obtained.
[0336] Optionally, as an embodiment, the processing module 610 is specifically used for:
[0337] According to the sliding coefficient, the card height information, the first interval information, second interval information and first stack quantity information, position information of the second card is obtained; wherein the second interval information is used to represent an interval between two cards displaying partial card content information in the first region or the second region; and the first stack quantity information is used to represent a quantity of cards in the first region except the second card.
[0338] Optionally, as an embodiment, the processing module 610 is further used for:
[0339] According to the position information of the second card, the first interval information, the card height information and card identification information, position information of at least one third card is obtained, the third card being used to represent a card displaying complete card content information in the second interface except the second card, and the at least one third card including a target third card, the target third card being used to represent a card displaying complete card content information in the second region of the second interface;
[0340] According to the position information of the target third card, the card height information, the card identification information, the second interval information and the second stack quantity information, fourth card position information is obtained, the second stack quantity information is used to represent the number of cards in the second region except the target third card, and the fourth card is used to represent a card in the second region of the second interface except the target third card.
[0341] According to the first stack quantity information, the second interval information and the card identification information, fifth card position information is obtained, and the fifth card is used to represent a card in the first region of the second interface except the second card.
[0342] Optionally, as an embodiment, the processing module 610 is specifically configured to:
[0343] According to the position information of the second card, information of a first angle is obtained, and the first angle is used to represent the maximum distortion angle of the second card.
[0344] According to the first angle coefficient and the information of the first angle, the first tilt angle is obtained.
[0345] Optionally, as an embodiment, the first angle and the position information of the second card are in a linear relationship.
[0346] Optionally, as an embodiment, the initial value of the first angle coefficient is 0 and the maximum value is 1; after detecting the preset time length of the touch operation, the value of the first angle coefficient is 1.
[0347] Optionally, as an embodiment, the processing module 610 is further configured to:
[0348] Detecting a finger lifting operation on the second interface;
[0349] In response to the finger lifting operation, updating the state of the timer and obtaining a second angle coefficient, the second angle coefficient being related to the state of the timer;
[0350] According to the second angle coefficient and the position information of the second card, a second tilt angle is obtained.
[0351] According to the second tilt angle and the position information of each card in the plurality of cards at the current time, a third interface is displayed.
[0352] Optionally, as an embodiment, the processing module 610 is specifically configured to:
[0353] According to the position information of the second card at the current time, information of a first angle is obtained, the first angle being used to represent a maximum distortion angle of the second card.
[0354] According to the second angle coefficient and the information of the first angle, the second tilt angle is obtained.
[0355] Optionally, as an embodiment, an initial value of the second angle coefficient is 1 and a maximum value of the second angle coefficient is 0; after a preset time length of the lifting-finger operation is detected, the second angle coefficient is 0.
[0356] Optionally, as an embodiment, the first card completely covers other cards of the plurality of cards except the first card.
[0357] It should be noted that the electronic device 600 is embodied in the form of functional units. The term "module" herein can be implemented in the form of software and / or hardware, and no specific limitation is made.
[0358] For example, the "module" can be a software program, a hardware circuit or a combination of both, which implements the above functions. The hardware circuit can include an application specific integrated circuit (ASIC), an electronic circuit, a processor (such as a shared processor, a dedicated processor or a group processor, etc.) and a memory for executing one or more software or firmware programs, a combination logic circuit and / or other suitable components supporting the described functions.
[0359] Therefore, the units of each example described in the embodiments of the present application can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether the functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. A person skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the present application.
[0360] Figure 12 A hardware system suitable for the electronic device of the present application is shown.
[0361] The electronic device 100 can be a mobile phone, a smart television, a tablet computer, a wearable electronic device, a vehicle-mounted electronic device, an augmented reality (AR) device, a virtual reality (VR) device, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, a personal digital assistant (PDA), a projector, or the like. The embodiments of the present application do not limit the specific type of the electronic device 100.
[0362] The electronic device 100 can 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, a headset interface 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 can include a pressure sensor 180A, a gyroscope sensor 180B, a barometric 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.
[0363] It should be noted that, Figure 12 The structures shown do not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 can include more or fewer components than those shown, or the electronic device 100 can include a combination of some of the components shown, or the electronic device 100 can include sub-components of some of the components shown. Figure 12 The structures shown do not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 can include more or fewer components than those shown, or the electronic device 100 can include a combination of some of the components shown, or the electronic device 100 can include sub-components of some of the components shown. Figure 12 The structures shown do not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 can include more or fewer components than those shown, or the electronic device 100 can include a combination of some of the components shown, or the electronic device 100 can include sub-components of some of the components shown. Figure 12 The structures shown do not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 can include more or fewer components than those shown, or the electronic device 100 can include a combination of some of the components shown, or the electronic device 100 can include sub-components of some of the components shown. The components shown can be implemented in hardware, software, or a combination of software and hardware.
[0364] The processor 110 can include one or more processing units. For example, the processor 110 can include at least one of the following processing units: an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, a neural-network processing unit (NPU). Among them, different processing units can be independent devices or integrated devices.
[0365] The controller can generate operation control signals according to the instruction operation code and the timing signal, and complete the control of fetching and executing instructions.
[0366] The processor 110 can also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory can save instructions or data that have just been used or recycled by the processor 110. If the processor 110 needs to use the instructions or data again, it can be directly called from the memory. This avoids repeated access and reduces the waiting time of the processor 110, thereby improving the efficiency of the system.
[0367] For example, in the embodiments of the present application, the processor 110 can perform: detecting a first operation on a card display area, the first card being displayed in the card display area, the card display area including a plurality of cards, the first card covering other cards of the plurality of cards except the first card; in response to the first operation, displaying a first interface, the first interface displaying part of the plurality of cards, the part of the plurality of cards including the first card and a second card; detecting a second operation on the first interface; in response to the second operation, displaying a second interface, the second interface including the second card, the second card having a first inclination angle, the first inclination angle being different at different positions of the second card in the first interface, the first inclination angle being used to represent an angle of the second card being turned inwardly to the display screen.
[0368] The connection relationship between the modules shown is only illustrative and does not constitute a limitation on the connection relationship between the modules of the electronic device 100. Alternatively, the modules of the electronic device 100 can also use a combination of the above-mentioned various connection modes.
[0369] The wireless communication function of the electronic device 100 can be implemented by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor, and the baseband processor, etc.
[0370] The antenna 1 and the antenna 2 are used for transmitting and receiving electromagnetic wave signals. Each antenna in the electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be multiplexed to improve the utilization of the antennas. For example, the antenna 1 can be multiplexed as a diversity antenna of a wireless local area network. In some other embodiments, the antennas can be used in combination with a tuning switch.
[0371] The electronic device 100 can implement the display function by the GPU, the display screen 194, and the application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 can include one or more GPUs that execute program instructions to generate or change display information.
[0372] Illustratively, the motor 191 can generate vibration. The motor 191 can be used for incoming call prompt, and also can be used for touch feedback. The motor 191 can generate different vibration feedback effects for touch operations acting on different application programs. The motor 191 can also generate different vibration feedback effects for touch operations acting on different areas of the display screen 194. Different application scenarios (for example, time reminder, receiving information, alarm clock, and game) can correspond to different vibration feedback effects. The touch vibration feedback effect can also support customization.
[0373] Illustratively, the display screen 194 can be used to display images or videos.
[0374] Illustratively, the electronic device 100 can implement the shooting function by the ISP, the camera 193, the video codec, the GPU, the display screen 194, and the application processor, etc.
[0375] Illustratively, the ISP is used to process the data fed back by the camera 193. For example, when taking a photo, the shutter is opened, the light is transmitted to the camera photosensitive element through the lens, the light signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to the ISP for processing, and converts it into an image visible to the naked eye. The ISP can optimize the noise, brightness, and color of the image by algorithm, and the ISP can also optimize the exposure and color temperature of the shooting scene, etc. In some embodiments, the ISP can be arranged in the camera 193.
[0376] The camera 193 is configured to capture still images or videos. An object projects an optical image through a lens to a photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, which is then passed to an ISP for conversion into a digital image signal. The ISP outputs the digital image signal to a DSP for processing. The DSP converts the digital image signal into an image signal in a standard red green blue (RGB), YUV, or the like format. In some embodiments, the electronic device 100 can include one or N cameras 193, where N is a positive integer greater than one.
[0377] Exemplarily, the gyroscope sensor 180B can be configured to determine the motion posture of the electronic device 100. In some embodiments, the angular velocity of the electronic device 100 around three axes (i.e., the x-axis, the y-axis, and the z-axis) can be determined by the gyroscope sensor 180B. The gyroscope sensor 180B can be used for anti-shake shooting. For example, when the shutter is pressed, the gyroscope sensor 180B detects the angle of shaking of the electronic device 100, calculates the distance that needs to be compensated by the lens module according to the angle, and lets the lens offset the shaking of the electronic device 100 by reverse movement to achieve anti-shake. The gyroscope sensor 180B can also be used for scenarios such as navigation and motion sensing games.
[0378] Exemplarily, in the embodiments of the present application, the gyroscope sensor 180B can be used to collect shaking information, which can be used to represent the pose change of the electronic device during shooting.
[0379] Exemplarily, the acceleration sensor 180E can detect the magnitude of acceleration of the electronic device 100 in each direction (generally the x-axis, the y-axis, and the z-axis). When the electronic device 100 is stationary, the magnitude and direction of gravity can be detected. The acceleration sensor 180E can also be used to identify the posture of the electronic device 100, as an input parameter for landscape / portrait screen switching and pedometer applications.
[0380] Exemplarily, the distance sensor 180F is configured to measure distance. The electronic device 100 can measure distance by infrared or laser. In some embodiments, for example in a shooting scenario, the electronic device 100 can use the distance sensor 180F to measure distance to achieve fast focusing.
[0381] Exemplarily, the ambient light sensor 180L is used to sense ambient light brightness. The electronic device 100 can adaptively adjust the display screen 194 brightness according to the sensed ambient light brightness. The ambient light sensor 180L can also be used to automatically adjust white balance when taking photos. The ambient light sensor 180L can also cooperate with the proximity light sensor 180G to detect whether the electronic device 100 is in a pocket to prevent accidental touch.
[0382] Optionally, the present application also provides a computer program product, which, when executed by a processor, implements the method of displaying a card in any method embodiment of the present application.
[0383] Optionally, the computer program product can be stored in a memory, for example, a program, which is finally converted into an executable object file capable of being executed by the processor through preprocessing, compiling, assembling, and linking, etc.
[0384] Optionally, the present application also provides a computer readable storage medium, which stores a computer program, which, when executed by a computer, implements the method of any method embodiment of the present application. The computer program can be a high-level language program or an executable target program.
[0385] The computer readable storage medium is, for example, a memory. The memory can be a volatile memory or a non-volatile memory, or the memory can include both volatile and non-volatile memory. The non-volatile memory can be, for example, read-only memory (ROM), programmable ROM (PROM), erasable PROM (EPROM), electrically EPROM (EEPROM), or flash memory. The volatile memory can be, for example, random access memory (RAM), which is used as external cache. By way of example, and not limitation, many forms of RAM are available, for example, static RAM (SRAM), dynamic RAM (DRAM), synchronous dynamic RAM (SDRAM), double data rate SDRAM (DDR SDRAM), enhanced SDRAM (ESDRAM), Synchlink DRAM (SLDRAM), and direct rambus RAM (DR RAM).
[0386] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the above-described devices and apparatuses and the generated technical effects can refer to the corresponding processes and technical effects in the foregoing method embodiments, and will not be described here.
[0387] In several embodiments provided in the present application, the disclosed system, device and method can be implemented in other ways. For example, some features of the above-described method embodiments can be omitted or not performed. The above-described device embodiments are merely illustrative, and the division of units is merely a logical function division. In actual implementation, another division manner can be used, and multiple units or components can be combined or integrated into another system. In addition, the coupling between units or the coupling between components can be direct coupling or indirect coupling, and the above-mentioned coupling includes electrical, mechanical or other forms of connection.
[0388] It should be understood that, in various embodiments of the present application, the size of the serial number of each process does not mean the execution order, and the execution order of each process should be determined according to its function and inherent logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.
[0389] In addition, the terms "system" and "network" are often used interchangeably herein. The term "and / or", herein merely describes an associated relationship between associated objects, which means that there can be three relationships, for example, A and / or B, which can represent three cases: A exists alone, A and B exist together, and B exists alone. In addition, the character " / " generally represents an "or" relationship between the front and back associated objects.
[0390] In summary, the above is only a preferred embodiment of the technical scheme of the present application, and is not used to limit the protection scope of the present application. Any modification, equivalent replacement, improvement, etc. made within the spirit and principles of the present application shall be included in the protection scope of the present application.
Claims
1. A method for displaying a card, characterized in that, include: A first operation on a card display area is detected, in which a first card is displayed, and the card display area includes multiple cards, with the first card covering the other cards in the multiple cards excluding the first card. In response to the first operation, a first interface is displayed, in which a portion of the plurality of cards are displayed, including the first card and the second card; A second operation on the first interface was detected; In response to the second operation, a second interface is displayed, the second interface including the second card, the second card having a first tilt angle, the first tilt angle being different at different positions of the second card in the second interface, the first tilt angle being used to characterize the angle at which the second card is flipped into the display screen; The second operation includes touch operation and swipe operation. The response to the second operation, displaying the second interface, includes: In response to the touch operation, the state of the timer is updated and a first angle coefficient is obtained, the first angle coefficient being related to the state of the timer; In response to the sliding operation, the distance information of the sliding operation is obtained; Based on the distance information of the sliding operation, the position information of each card in the plurality of cards is obtained, and the position information of each card in the plurality of cards includes the position information of the second card; The first tilt angle is obtained based on the first angle coefficient and the position information of the second card; The second interface is displayed based on the first tilt angle and the position information of each card among the plurality of cards.
2. The method as described in claim 1, characterized in that, The first interface includes a first area and a second area, the first area displays the first card, and the second area displays at least two cards from the partial card set.
3. The method as described in claim 2, characterized in that, At least two cards are displayed in the first and / or second areas of the second interface.
4. The method as described in claim 3, characterized in that, The step of obtaining the position information of each card among the plurality of cards based on the distance information of the sliding operation includes: Based on the distance information of the sliding operation, a sliding coefficient is obtained. The sliding coefficient is used to characterize the percentage by which a card moves from its current position to the previous position of the current card. Based on the sliding coefficient, the position information of each card among the plurality of cards is obtained.
5. The method as described in claim 4, characterized in that, The step of obtaining the sliding coefficient based on the distance information of the sliding operation includes: The sliding coefficient is obtained based on the distance information, card height information, and first interval information of the sliding operation; wherein, the card height information is used to characterize the height of each card among the plurality of cards, and the first interval information is used to characterize the interval between two cards displaying complete card content information in the first interface.
6. The method as described in claim 5, characterized in that, The second card is the card that displays complete card content information in the first area of the second interface, and also includes: The identification information of the second card is obtained based on the distance information of the sliding operation and the sliding coefficient.
7. The method as described in claim 6, characterized in that, The step of obtaining the position information of each card among the plurality of cards based on the sliding coefficient includes: The position information of the second card is obtained based on the sliding coefficient, the card height information, the first interval information, the second interval information, and the first stacking quantity information; wherein, the second interval information is used to characterize the interval between two cards displaying partial card content information in the first area or the second area; the first stacking quantity information is used to characterize the number of cards in the first area other than the second card.
8. The method as described in claim 7, characterized in that, Also includes: Based on the position information of the second card, the first interval information, the card height information, and the card identification information, the position information of at least one third card is obtained. The third card is used to represent the card in the second interface that displays complete card content information other than the second card. The at least one third card includes a target third card, which is used to represent the card in the second area of the second interface that displays complete card content information. Based on the location information of the target third card, the card height information, the card identification information, the second interval information, and the second stacking quantity information, the location information of the fourth card is obtained. The second stacking quantity information is used to represent the number of cards in the second area other than the target third card, and the fourth card is used to represent the cards in the second area of the second interface other than the target third card. Based on the first stack quantity information, the second interval information, and the card identification information, the position information of the fifth card is obtained. The fifth card is used to represent the cards other than the second card in the first area of the second interface.
9. The method as described in claim 3, characterized in that, The step of obtaining the first tilt angle based on the first angle coefficient and the position information of the second card includes: Based on the position information of the second card, the information of the first angle is obtained, and the first angle is used to characterize the maximum distortion angle of the second card; The first tilt angle is obtained based on the information of the first angle coefficient and the first angle.
10. The method as described in claim 9, characterized in that, The first angle and the position information of the second card are linearly related.
11. The method as described in claim 9, characterized in that, The initial value of the first angle coefficient is 0 and the maximum value is 1; after a preset duration of the touch operation is detected, the value of the first angle coefficient is 1.
12. The method as described in claim 9, characterized in that, Also includes: A finger lift operation on the second interface was detected; In response to the finger lifting operation, the state of the timer is updated and a second angle coefficient is obtained, the second angle coefficient being related to the state of the timer; The second tilt angle is obtained based on the second angle coefficient and the position information of the second card; Based on the second tilt angle and the position information of each card among the multiple cards at the current moment, a third interface is displayed.
13. The method as described in claim 12, characterized in that, The step of obtaining the second tilt angle based on the second angle coefficient and the position information of the second card includes: Based on the current position information of the second card, the information of the first angle is obtained, and the first angle is used to characterize the maximum distortion angle of the second card; The second tilt angle is obtained based on the information of the second angle coefficient and the first angle.
14. The method as described in claim 12, characterized in that, The initial value of the second angle coefficient is 1 and the maximum value is 0; after a preset duration of the finger-lifting operation is detected, the value of the second angle coefficient is 0.
15. The method according to any one of claims 1 to 3, characterized in that, The first card completely covers all the other cards in the plurality of cards except the first card.
16. An electronic device, characterized in that, The electronic device includes a module for performing the method of the display card as described in any one of claims 1 to 15.
17. An electronic device, characterized in that, include: One or more processors and memory; The memory is coupled to the one or more processors, the memory being used to store computer program code, the computer program code including computer instructions, the one or more processors invoking the computer instructions to cause the electronic device to perform the display card method as described in any one of claims 1 to 15.
18. A chip system, characterized in that, The chip system is applied to an electronic device, the chip system including one or more processors, the processors being configured to invoke computer instructions to cause the electronic device to perform the display card method as described in any one of claims 1 to 15.
19. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by an electronic device, causes the electronic device to perform the method of the display card according to any one of claims 1 to 15.
Citation Information
Patent Citations
Method, system and mobile terminal for displaying application icons
CN101957714A