List message deletion method and electronic device

Abstract

The application discloses a list message deletion method and an electronic device, including: displaying a first list, the first list including a first list message; in response to a first sliding operation on the first list message, displaying a sliding box corresponding to the first list message; the sliding box including a deletion icon, the deletion icon including a first deletion figure and a second deletion figure; in response to a second sliding operation on the first list message, elastically stretching the length of the sliding box; when the length of the sliding box does not reach a first threshold, the position of the deletion icon moves with the increase of the length of the sliding box; the angle between the first deletion figure and the second deletion figure increases with the rotation of the first deletion figure around a rotation axis; when the length of the sliding box reaches or exceeds the first threshold, the position of the deletion icon moves to the center of the sliding box; when the second sliding operation ends, the first list message in the first list is deleted. In the embodiment of the application, the operation experience of the user can be improved.

Description

Technical Field

[0001] The present application relates to the field of terminal technology, and in particular to a method for deleting list messages and an electronic device. Background Art

[0002] Currently, many applications installed on electronic devices can display information to users in the form of lists, such as text message lists, notification lists, file lists, video lists, chat information lists, note lists, etc.

[0003] Users often clean up some unnecessary list information. For example, a user can press and hold to call out the delete control for a certain list information, and then click the delete control to delete the corresponding list information; a user can swipe left to call out the delete icon, and then click the delete icon to delete the corresponding list information, etc. However, in the above process, the electronic device cannot dynamically remind the user of the role and function of the relevant operation during the user's touch operation, resulting in a poor user operation experience. Summary of the Invention

[0004] The embodiments of the present application disclose a method for deleting list messages and an electronic device, which can improve the user's operating experience.

[0005] In a first aspect, the present application provides a method for deleting a list message, the method being applied to an electronic device, the method comprising: displaying a first list, the first list including a first list message, the first list not including a sliding box corresponding to the first list message; in response to a first sliding operation on the first list message, displaying a sliding box corresponding to the first list message; the sliding box including a delete icon, the delete icon including a first deletion graphic and a second deletion graphic, the angle between the first deletion graphic and the second deletion graphic being 0; in response to a second sliding operation on the first list message, elastically stretching the length of the sliding box; when the length of the sliding box does not reach a first threshold, the position of the delete icon moves as the length of the sliding box increases; as the length of the sliding box increases, the angle between the first deletion graphic and the first deletion graphic increases as the first deletion graphic rotates around a rotation axis, and the second deletion graphic remains stationary; when the length of the sliding box reaches or exceeds the first threshold, the position of the delete icon moves toward the center of the sliding box, the size of the delete icon increases, and the angle between the first deletion graphic and the second deletion graphic remains unchanged; when the second sliding operation ends, deleting the first list message in the first list, the end of the second sliding operation being when the user releases the hand and the length of the sliding box reaches or exceeds the first threshold.

[0006] Among them, the deletion icon can be a graphic of a trash can, and the first deletion graphic in the deletion icon can be the lid of the trash can; the second deletion graphic can be the body of the trash can. When the angle between the first deletion graphic and the first deletion graphic in the trash can becomes larger, the angle between the body of the trash can and the lid becomes larger. In the process of the angle becoming larger, the body of the trash can does not rotate, and the lid of the trash can rotates with a point on the right side of the lid as the axis (i.e., the rotation axis). Of course, it can also be other graphics, without limitation. In addition, when the length of the sliding box reaches or exceeds the first threshold, the angle between the first deletion graphic and the second deletion graphic remains unchanged, and the lid of the trash can no longer rotates and maintains the current maximum opening angle. The first sliding operation refers to the first operation in the embodiment of the present application; the second sliding operation refers to the second operation in the embodiment of the present application. The length of the sliding box is the horizontal length of the sliding box. For details, please refer to Figure 4 The second sliding operation is generally performed in the same direction as the first sliding operation.

[0007] In an embodiment of the present application, based on the user's second operation, the position of the sliding box and icon in the second list screen can be flexibly changed, the opening angle of the trash can can also be flexibly changed, and the transparency of the icon can be changed, so that the dynamic effect of the interface can more clearly indicate the current user's operation, which can improve the user's operating experience and sensory experience.

[0008] In a possible implementation manner, deleting the first list message in the first list specifically includes:

[0009] After the size of the delete icon remains unchanged, the length of the sliding frame increases to the screen width, the position of the delete icon is at the center of the sliding frame, and the transparency of the delete icon becomes maximum, the first list message in the first list is deleted.

[0010] In an embodiment of the present application, when the length of the sliding frame exceeds a first threshold, after the user releases the sliding frame, the sliding frame can automatically expand and cover the width of the screen, and then the list message can disappear, thereby achieving the effect of deletion. In this way, the sliding frame interface can naturally transition from stretching to covering and then to deletion. The continuous dynamic change can remind the user of the function corresponding to the current operation, thereby improving the user's operating experience.

[0011] In one possible implementation, the sliding box also includes other function icons. When the length of the sliding box does not reach the first threshold, the distance between the delete icon and the other function icons increases as the length of the sliding box increases; when the length of the sliding box reaches or exceeds the first threshold, the transparency of the other function icons increases.

[0012] Among them, other function icons include other icons that appear in the sliding box except the delete icon, and their number is not limited. For example, Figure 4 The favorite icon and read icon shown in (B) in the figure.

[0013] In an embodiment of the present application, along with the user's second sliding operation, other function icons can also produce corresponding changes, so that sliding to the left can trigger the deletion function, while other functions are not executed. Therefore, the transparency of other function icons increases until it disappears, so that the dynamic effect of the interface can more clearly indicate the current user's operation, which can improve the user's operating experience.

[0014] In one possible implementation, when the second sliding operation is not completed and the length of the sliding box has not reached the first threshold, the distance between the deletion icon and the other function icons decreases as the length of the sliding box decreases, and the angle between the first deletion graphic and the second deletion graphic decreases as the length of the sliding box decreases.

[0015] In an embodiment of the present application, when the length of the sliding frame is within a first threshold, when the user slides right, the distance between the two icons can be elastically contracted, and the angle formed by the two graphics in the icon can also be elastically contracted. In this way, the display of the icons during both left and right swiping is similar to the process of stretching a spring, giving the user a better visual experience. In addition, swiping right means that the user does not perform the deletion operation, and the corresponding icon animation changes can remind the user of the corresponding effect, thereby improving the user's operation experience.

[0016] In one possible implementation, after the second sliding operation is completed and the length of the sliding box has not reached the first threshold, the length of the sliding box rebounds and becomes smaller, the distance between the deletion icon and the other function icons rebounds and becomes smaller, and the angle between the first deletion graphic and the second deletion graphic rebounds and shrinks; the length of the sliding box after the rebound is the initial length, the distance between the deletion icon and the other function icons after the rebound is the initial distance, and the angle between the first deletion graphic and the second deletion graphic after the rebound is 0.

[0017] In the embodiment of the present application, if the user lets go of the sliding frame (or releases their hand) before the sliding frame reaches the first threshold, the sliding frame and the icons therein rebound to their initial positions. This process is similar to the rebound process of a spring after someone pulls on it and lets go, and the movement of the icons is similar to the rebound process of several points on the spring. In this way, within the range of the first threshold, if the user lets go while sliding, the user interface display can present a spring rebound effect, which can improve the user experience.

[0018] In a possible implementation, elastically stretching the length of the sliding frame specifically includes: starting at time T1, when a second sliding operation is received, the initial length of the sliding frame is H(T1); if the second sliding operation is not completed, the length of the sliding frame at the current time Tx is H(Tx); from time T1 to time Tx, the elastically stretched length of the sliding frame is H(Tx)-H(T1):

[0019] H(Tx)-H(T1)=rate·(P(Tx)-P(T1))

[0020] Wherein, the T1 moment is the start moment of the second sliding operation, the P(T1) is the position of the user touch point at the T1 moment; the Tx moment is any moment in the current second sliding operation, the P(Tx) is the position of the user touch point at the current moment Tx; the rate is the stretching rate, rate = e -α·m / L(A) , α is the damping coefficient, m is the length of the sliding frame stretched in the previous frame, and L(A) is the screen width.

[0021] In the embodiment of the present application, due to the characteristics of the stretching curve, the longer the stretching length is, the more difficult it is to continue stretching. In this way, during the user's stretching process, the stretching effect of the sliding frame can be similar to the stretching effect of a spring, thereby improving the user's sensory experience.

[0022] In a possible implementation, the distance between the delete icon and the other function icons increases as the length of the sliding box increases, specifically including: at the time T1, the position of the delete icon is D(T1); when the length of the sliding box does not reach the first threshold at the current time T2, the position of the delete icon is D(T2); from the time T1 to the time T2, the length of the position change of the delete icon D is D(T2)-D(T1):

[0023] D(T2)-D(T1)=rate·(P(T2)–P(T1))·0.1·(Index(D)+1)

[0024] At the time T1, the position of the other function icon is A(T1); at the time T2, the position of the other function icon is A(T2); from the time T1 to the time T2, the length of the position change of the other function icon A is A(T2)-A(T1):

[0025] A(T2)-A(T1)=rate·(P(T2)–P(T1))·0.1·(Index(A)+1)

[0026] Wherein, the time T2 is the time when the length of the sliding box in the current second sliding operation does not reach the first threshold, Index() represents the position index of the corresponding icon from right to left, Index(D) represents the position index of the delete icon, and Index(A) represents the position index of the other function icon;

[0027] As the length of the sliding frame increases, the angle between the first deletion graphic and the second deletion graphic increases as the first deletion graphic rotates around the rotation axis, specifically including: at time T1, the angle between the first deletion graphic and the second deletion graphic is 0, and at time T2, the angle between the first deletion graphic and the second deletion graphic is Open (D):

[0028] Open(D)=MaxAngle·rate·(P(T2)-P(T1)) / Thr

[0029] The MaxAngle is the maximum angle between the first deletion graphic and the second deletion graphic; and the Thr is the length of the sliding box changed from the initial length to the first threshold.

[0030] In the embodiments of the present application, the other function icon A can be the Favorites icon C and / or the Read icon B described in the following embodiments, or other icons, without limitation. In the embodiments of the present application, the stretch displacement of each icon is determined by the user's displacement on the screen, the icon's position index, and the stretch rate. The larger the position index, the greater the stretch displacement. That is, the stretch displacement of the Read icon is greater than that of the Favorites icon, which in turn is greater than that of the Delete icon. This allows the icon's displacement to resemble the effect of a spring stretching during the user's stretching, thereby enhancing the user's sensory experience. As the user swipes left, the trash can gradually opens, indicating that the left swipe will trigger the deletion of the list item. This not only alerts the user to the relevant deletion function triggered by the operation, but also provides a better user experience through the dynamic expansion of the trash can. Furthermore, since the display of each icon in the sliding frame is calculated using the aforementioned stretch displacement formula, the corresponding angle of the Delete icon is also derived from the angle of the trash can's opening. Therefore, the position and angle of the icons can be determined directly using the relevant formula, resulting in higher calculation efficiency and faster processing speed.

[0031] In a possible implementation, the transparency of the other function icons increases, specifically including: at time T3, the length of the sliding box just reaches the first threshold; at the current time T4, when the length of the sliding box reaches or exceeds the first threshold, the transparency and translucency Alpha(A) of the other function icons meet the coordinates:

[0032] ((T4-T3) / duration_A,1-Alpha(A))

[0033] Wherein, the coordinate ((T4-T3) / duration_A, 1-Alpha(A)) satisfies the Bezier curve, and the duration_A is the execution duration of the transparency change animation;

[0034] The position of the delete icon moves toward the center of the sliding frame, specifically including: at the time T3, the position of the delete icon is D(T3); at the time T4, the position of the delete icon D(T4) satisfies the coordinates:

[0035] ((T4-T3) / duration_X,D(T4) / (H(T4) / 2-D(T3)))

[0036] Wherein, the coordinates ((T4-T3) / duration_X, D(T4) / (H(T4) / 2-D(T3))) satisfy the Bezier curve, the duration_X is the execution duration of the dynamic effect of the position change, and the H(T4) is the length of the sliding frame at the time T4;

[0037] The size of the delete icon increases, specifically including: at the time T3, the original size of the delete icon is S; at the time T4, the scale size S(T4) of the delete icon satisfies the coordinates:

[0038] ((T4-T3) / duration_S,S(T4) / S-1)

[0039] The coordinates ((T4-T3) / duration_S, S(T4) / S-1) satisfy the Bezier curve, and the duration_S is the execution duration of the animation effect of the scale change of the deletion icon.

[0040] In an embodiment of the present application, when the length of the sliding box exceeds the first threshold, the electronic device can adjust the transparency of other function icons based on the Bezier curve, adjust the position and size of the delete icon, so as to prompt the user that the operation of deleting the list information is currently being performed, and at the same time, it can also improve the user's operating experience and sensory effect. In addition, since the position, transparency and size of each icon in the sliding box are all calculated by substituting the above-mentioned Bezier curve, the calculation process can directly call the relevant curve, making the calculation more efficient and faster. Efficient processing can support the display of the interface and avoid display freezes, thereby improving the user experience.

[0041] In a possible implementation, the transparency of the other function icons increases, specifically including: at time T3, the length of the sliding box just reaches the first threshold; at the current time T4, when the length of the sliding box reaches or exceeds the first threshold, the transparency and translucency Alpha (A) of the other function icons are:

[0042] Alpha(A)=1-(T4-T3) / duration_A

[0043] or

[0044] Alpha(A)=1-((T4-T3) / duration_A) 2

[0045] Wherein, duration_A is the duration of the transparency change animation;

[0046] The position of the delete icon moves toward the center of the sliding frame, specifically including: at the time T3, the position of the delete icon is D(T3); at the time T4, the position of the delete icon is D(T4):

[0047] D(T4)=(H(T4) / 2-D(T3))·(T4-T3) / duration_X

[0048] Wherein, duration_X is the execution duration of the position change animation, and H(T4) is the length of the sliding frame at the time T4;

[0049] The size of the delete icon becomes larger, specifically including: at the time T3, the original size of the delete icon is S; at the time T4, the size of the delete icon is S(T4):

[0050] S(T4)=(S_Max-S)·(T4-T3) / duration_S

[0051] The duration_S is the duration of the animation effect of the delete icon scale change, and the S_Max is the maximum size of the delete icon.

[0052] In an embodiment of the present application, the electronic device can adjust the transparency of other function icons based on a specific function, adjust the position and size of the delete icon, so as to prompt the user that the operation of deleting the list information is currently being performed, and at the same time, it can also improve the user's operating experience and sensory effect. In addition, since the position, transparency and size of each icon in the sliding box are displayed through the above-mentioned substitution calculation, the calculation process is more efficient and concise. Efficient processing can support the display of the interface and avoid display freezes, thereby improving the user experience.

[0053] In a possible implementation, the length of the sliding frame rebounds and becomes smaller, specifically including: at time T1 when the second sliding operation starts, the initial length of the sliding frame is H(T1); at time T2, if the length of the sliding frame does not reach the first threshold, the second sliding operation is ended; from the end of the second sliding operation to the current time T2", a time period t=T2"-T2 has passed; at the current time T2", the length of the sliding frame is H(T2"); from the time T1 to the current time T2", the stretched length of the sliding frame is x=H(T2")-H(T1); the stretched length satisfies the differential equation with t:

[0054]

[0055] Among them, β represents the spring damping, θ represents the stiffness of the spring, and β 2 =θ 2 ;

[0056] The distance between the delete icon and the other function icons rebounds and becomes smaller, specifically including: at the time T1, the position of the delete icon is D(T1); at the current time T2″, the position of the delete icon is D(T2″); from the time T1 to the current time T2″, the stretching length D(T2″)-D(T1) of the delete icon D position is:

[0057] D(T2″)-D(T1)=x(T2″)·0.1·(Index(D)+1)

[0058] At the time T1, the position of the other function icon is A(T1); at the current time T2″, the position of the other function icon is A(T2″); from the time T1 to the current time T2″, the stretching length of the other function icon position A(T2″)-A(T1) is:

[0059] A(T2")-A(T1)=x(T2")·0.1·(Index(A)+1)

[0060] Wherein, the x(T2") is x at T2" time; Index() represents the position index of corresponding icon from right to left, the Index(D) represents the position index of the delete icon, and the Index(A) represents the position index of the other function icon.

[0061] The included angle between the first delete figure and the second delete figure rebounds and shrinks, specifically comprising: at the current T2" time, the included angle Open(D) between the first delete figure and the second delete figure is:

[0062] Open(D)=MaxAngle·x(T2") / Thr

[0063] Wherein, the MaxAngle is the maximum angle between the first delete figure and the second delete figure, and the Thr is the change length of the length of the sliding box from T1 time to the first threshold value.

[0064] In the embodiments of the present application, in the case that the user releases his hand (or leaves his hand) before the sliding box reaches T3 time, the sliding box and the icons in it rebound to the initial position, which is like the rebound process of a spring after someone releases his hand. The movement of the above-mentioned icons is like the rebound process of some points on the spring. In this way, within the range of the first threshold value, the user releases his hand during the sliding process, and the display of the user interface can present the dynamic effect of the spring rebound, which can improve the user operation experience. In addition, since the display of each icon in the sliding box is calculated by the above-mentioned rebound displacement formula, and the corresponding included angle of the delete icon is obtained by the above-mentioned angle of the trash can opening, the position and angle of the icon can be directly called by the related formula, so that the calculation efficiency is higher and the speed is faster. Efficient processing can support the display of the interface and avoid the lag of the display, so as to improve the user experience.

[0065] In a second aspect, the present application provides an electronic device, comprising: a touch screen, one or more processors and one or more memories, the one or more memories are used to store computer program code, the computer program code comprises computer instructions, when the one or more processors execute the computer instructions, so that the electronic device executes:

[0066] A first list is displayed, wherein the first list includes a first list message and the first list does not include a sliding box corresponding to the first list message; in response to a first sliding operation on the first list message, a sliding box corresponding to the first list message is displayed; the sliding box includes a delete icon, the delete icon includes a first delete graphic and a second delete graphic, and the angle between the first delete graphic and the second delete graphic is zero; in response to a second sliding operation on the first list message, the length of the sliding box is elastically stretched; when the length of the sliding box does not reach a first threshold, the position of the delete icon moves as the length of the sliding box increases; as the length of the sliding box increases, the angle between the first delete graphic and the first delete graphic increases as the first delete graphic rotates around a rotation axis, while the second delete graphic remains stationary; when the length of the sliding box reaches or exceeds the first threshold, the position of the delete icon moves toward the center of the sliding box, the size of the delete icon increases, and the angle between the first delete graphic and the second delete graphic remains unchanged; when the second sliding operation ends, the first list message in the first list is deleted, and the end of the second sliding operation refers to when the user releases the hand and the length of the sliding box reaches or exceeds the first threshold.

[0067] Among them, the deletion icon can be a graphic of a trash can, and the first deletion graphic in the deletion icon can be the lid of the trash can; the second deletion graphic can be the body of the trash can. When the angle between the first deletion graphic and the first deletion graphic in the trash can becomes larger, the angle between the body of the trash can and the lid becomes larger. In the process of the angle becoming larger, the body of the trash can does not rotate, and the lid of the trash can rotates with a point on the right side of the lid as the axis (i.e., the rotation axis). Of course, it can also be other graphics, without limitation. In addition, when the length of the sliding frame reaches or exceeds the first threshold, the angle between the first deletion graphic and the second deletion graphic remains unchanged, and the lid of the trash can no longer rotates and maintains the current maximum opening angle. The first sliding operation refers to the first operation in the embodiment of the present application; the second sliding operation refers to the second operation in the embodiment of the present application.

[0068] In an embodiment of the present application, based on the user's second operation, the position of the sliding box and icon in the second list screen can be flexibly changed, the opening angle of the trash can can also be flexibly changed, and the transparency of the icon can be changed, so that the dynamic effect of the interface can more clearly indicate the current user's operation, which can improve the user's operating experience and sensory experience.

[0069] In a possible implementation, deleting the first list message in the first list is specifically performed:

[0070] After the size of the delete icon remains unchanged, the length of the sliding frame increases to the screen width, the position of the delete icon is at the center of the sliding frame, and the transparency of the delete icon becomes maximum, the first list message in the first list is deleted.

[0071] In an embodiment of the present application, when the length of the sliding frame exceeds a first threshold, after the user releases the sliding frame, the sliding frame can automatically expand and cover the width of the screen, and then the list message can disappear, thereby achieving the effect of deletion. In this way, the sliding frame interface can naturally transition from stretching to covering and then to deletion. The continuous dynamic change can remind the user of the function corresponding to the current operation, thereby improving the user's operating experience.

[0072] In one possible implementation, the sliding box also includes other function icons. When the length of the sliding box does not reach the first threshold, the distance between the delete icon and the other function icons increases as the length of the sliding box increases; when the length of the sliding box reaches or exceeds the first threshold, the transparency of the other function icons increases.

[0073] Among them, other function icons include other icons that appear in the sliding box except the delete icon, and their number is not limited. For example, Figure 4 The favorite icon and read icon shown in (B) in the figure.

[0074] In an embodiment of the present application, along with the user's second sliding operation, other function icons can also produce corresponding changes, so that sliding to the left can trigger the deletion function, while other functions are not executed. Therefore, the transparency of other function icons increases until it disappears, so that the dynamic effect of the interface can more clearly indicate the current user's operation, which can improve the user's operating experience.

[0075] In one possible implementation, when the second sliding operation is not completed and the length of the sliding box has not reached the first threshold, the distance between the deletion icon and the other function icons decreases as the length of the sliding box decreases, and the angle between the first deletion graphic and the second deletion graphic decreases as the length of the sliding box decreases.

[0076] In an embodiment of the present application, when the length of the sliding frame is within a first threshold, when the user slides right, the distance between the two icons can be elastically contracted, and the angle formed by the two graphics in the icon can also be elastically contracted. In this way, the display of the icons during both left and right swiping is similar to the process of stretching a spring, giving the user a better visual experience. In addition, swiping right means that the user does not perform the deletion operation, and the corresponding icon animation changes can remind the user of the corresponding effect, thereby improving the user's operation experience.

[0077] In one possible implementation, after the second sliding operation is completed and the length of the sliding box has not reached the first threshold, the length of the sliding box rebounds and becomes smaller, the distance between the deletion icon and the other function icons rebounds and becomes smaller, and the angle between the first deletion graphic and the second deletion graphic rebounds and shrinks; the length of the sliding box after the rebound is the initial length, the distance between the deletion icon and the other function icons after the rebound is the initial distance, and the angle between the first deletion graphic and the second deletion graphic after the rebound is 0.

[0078] In the embodiment of the present application, if the user lets go of the sliding frame (or releases their hand) before the sliding frame reaches the first threshold, the sliding frame and the icons therein rebound to their initial positions. This process is similar to the rebound process of a spring after someone pulls on it and lets go, and the movement of the icons is similar to the rebound process of several points on the spring. In this way, within the range of the first threshold, if the user lets go while sliding, the user interface display can present a spring rebound effect, which can improve the user experience.

[0079] In one possible implementation, the length of the sliding frame is elastically stretched. Specifically, the following steps are performed: starting at time T1, when a second sliding operation is received, the initial length of the sliding frame is H(T1); if the second sliding operation is not completed, the length of the sliding frame at the current time Tx is H(Tx); from time T1 to time Tx, the elastically stretched length of the sliding frame is H(Tx)-H(T1):

[0080] H(Tx)-H(T1)=rate·(P(Tx)-P(T1))

[0081] Wherein, the T1 moment is the start moment of the second sliding operation, the P(T1) is the position of the user touch point at the T1 moment; the Tx moment is any moment in the current second sliding operation, the P(Tx) is the position of the user touch point at the current moment Tx; the rate is the stretching rate, rate = e -α·m / L(A) , α is the damping coefficient, m is the length of the sliding frame stretched in the previous frame, and L(A) is the screen width.

[0082] In the embodiment of the present application, due to the characteristics of the stretching curve, the longer the stretching length is, the more difficult it is to continue stretching. In this way, during the user's stretching process, the stretching effect of the sliding frame can be similar to the stretching effect of a spring, thereby improving the user's sensory experience.

[0083] In a possible implementation, the distance between the delete icon and the other function icons increases as the length of the sliding box increases, specifically including: at the time T1, the position of the delete icon is D(T1); when the length of the sliding box does not reach the first threshold at the current time T2, the position of the delete icon is D(T2); from the time T1 to the time T2, the length of the position change of the delete icon D is D(T2)-D(T1):

[0084] D(T2)-D(T1)=rate·(P(T2)–P(T1))·0.1·(Index(D)+1)

[0085] At the time T1, the position of the other function icon is A(T1); at the time T2, the position of the other function icon is A(T2); from the time T1 to the time T2, the length of the position change of the other function icon A is A(T2)-A(T1):

[0086] A(T2)-A(T1)=rate·(P(T2)–P(T1))·0.1·(Index(A)+1)

[0087] Wherein, the time T2 is the time when the length of the sliding box in the current second sliding operation does not reach the first threshold, Index() represents the position index of the corresponding icon from right to left, Index(D) represents the position index of the delete icon, and Index(A) represents the position index of the other function icon;

[0088] As the length of the sliding frame increases, the angle between the first deletion graphic and the second deletion graphic increases as the first deletion graphic rotates around the rotation axis, specifically including: at time T1, the angle between the first deletion graphic and the second deletion graphic is 0, and at time T2, the angle between the first deletion graphic and the second deletion graphic is Open (D):

[0089] Open(D)=MaxAngle·rate·(P(T2)-P(T1)) / Thr

[0090] The MaxAngle is the maximum angle between the first deletion graphic and the second deletion graphic; and the Thr is the length of the sliding box changed from the initial length to the first threshold.

[0091] In the embodiments of the present application, the other function icon A can be the Favorites icon C and / or the Read icon B described in the following embodiments, or other icons, without limitation. In the embodiments of the present application, the stretch displacement of each icon is determined by the user's displacement on the screen, the icon's position index, and the stretch rate. The larger the position index, the greater the stretch displacement. That is, the stretch displacement of the Read icon is greater than that of the Favorites icon, which in turn is greater than that of the Delete icon. This allows the icon's displacement to resemble the effect of a spring stretching during the user's stretching, thereby enhancing the user's sensory experience. As the user swipes left, the trash can gradually opens, indicating that the left swipe will trigger the deletion of the list item. This not only alerts the user to the relevant deletion function triggered by the operation, but also provides a better user experience through the dynamic expansion of the trash can. Furthermore, since the display of each icon in the sliding frame is calculated using the aforementioned stretch displacement formula, the corresponding angle of the Delete icon is also derived from the angle of the trash can's opening. Therefore, the position and angle of the icons can be determined directly using the relevant formula, resulting in higher calculation efficiency and faster processing speed.

[0092] In a possible implementation, the transparency of the other function icons increases, specifically including: at time T3, the length of the sliding box just reaches the first threshold; at the current time T4, when the length of the sliding box reaches or exceeds the first threshold, the transparency and translucency Alpha(A) of the other function icons meet the coordinates:

[0093] ((T4-T3) / duration_A,1-Alpha(A))

[0094] Wherein, the coordinate ((T4-T3) / duration_A, 1-Alpha(A)) satisfies the Bezier curve, and the duration_A is the execution duration of the transparency change animation;

[0095] The position of the delete icon moves toward the center of the sliding frame, specifically including: at the time T3, the position of the delete icon is D(T3); at the time T4, the position of the delete icon D(T4) satisfies the coordinates:

[0096] ((T4-T3) / duration_X,D(T4) / (H(T4) / 2-D(T3)))

[0097] The coordinates ((T4-T3) / duration_X, D(T4) / (H(T4) / 2-D(T3))) satisfy the Bezier curve, duration_X is the dynamic effect execution time length of the position change, and H(T4) is the length of the sliding box at the T4 moment.

[0098] The size of the delete icon is increased, specifically including: at the T3 moment, the original size of the delete icon is S; and at the T4 moment, the size S(T4) of the delete icon satisfies the coordinates:

[0099] ((T4-T3) / duration_S, S(T4) / S-1)

[0100] The coordinates ((T4-T3) / duration_S, S(T4) / S-1) satisfy the Bezier curve, and duration_S is the dynamic effect execution time length of the size change of the delete icon.

[0101] In the embodiments of the present application, in the case where the length of the sliding box exceeds the first threshold value, the electronic device can adjust the transparency of the other function icons, the position and size of the delete icon based on the Bezier curve, so as to prompt the user that the operation of deleting the list information is currently being performed, and improve the operation experience and sensory effect of the user. In addition, since the positions, transparencies and sizes of the icons in the sliding box are calculated by substituting the above-mentioned Bezier curve, the calculation process can directly call the related curve, so that the calculation efficiency is higher and the speed is faster. Efficient processing can support the display of the interface and avoid the lag of the display, so as to improve the experience of the user.

[0102] In a possible implementation, the transparency of the other function icons is increased, specifically including: at the T3 moment, the length of the sliding box just reaches the first threshold value; and in the case where the length of the sliding box reaches or exceeds the first threshold value at the current T4 moment, the transparency and semi-transparency Alpha(A) of the other function icons is:

[0103] Alpha(A)=1-(T4-T3) / duration_A

[0104] or

[0105] Alpha(A)=1-((T4-T3) / duration_A) 2

[0106] duration_A is the dynamic effect execution time length of the transparency change;

[0107] The position of the delete icon moves toward the center of the sliding frame, specifically including: at the time T3, the position of the delete icon is D(T3); at the time T4, the position of the delete icon is D(T4):

[0108] D(T4)=(H(T4) / 2-D(T3))·(T4-T3) / duration_X

[0109] Wherein, duration_X is the execution duration of the position change animation, and H(T4) is the length of the sliding frame at the time T4;

[0110] The size of the delete icon becomes larger, specifically including: at the time T3, the original size of the delete icon is S; at the time T4, the size of the delete icon is S(T4):

[0111] S(T4)=(S_Max-S)·(T4-T3) / duration_S

[0112] The duration_S is the duration of the animation effect of the delete icon scale change, and the S_Max is the maximum size of the delete icon.

[0113] In an embodiment of the present application, the electronic device can adjust the transparency of other function icons based on a specific function, adjust the position and size of the delete icon, so as to prompt the user that the operation of deleting the list information is currently being performed, and at the same time, it can also improve the user's operating experience and sensory effect. In addition, since the position, transparency and size of each icon in the sliding box are displayed through the above-mentioned substitution calculation, the calculation process is more efficient and concise. Efficient processing can support the display of the interface and avoid display freezes, thereby improving the user experience.

[0114] In a possible implementation, the length of the sliding frame rebounds and becomes smaller, specifically including: at time T1 when the second sliding operation starts, the initial length of the sliding frame is H(T1); at time T2, if the length of the sliding frame does not reach the first threshold, the second sliding operation is ended; from the end of the second sliding operation to the current time T2", a time period t=T2"-T2 has passed; at the current time T2", the length of the sliding frame is H(T2"); from the time T1 to the current time T2", the stretched length of the sliding frame is x=H(T2")-H(T1); the stretched length satisfies the differential equation with t:

[0115]

[0116] Among them, β represents the spring damping, θ represents the stiffness of the spring, and β2 =θ 2 ;

[0117] The distance between the delete icon and the other function icons rebounds and becomes smaller, specifically including: at the time T1, the position of the delete icon is D(T1); at the current time T2″, the position of the delete icon is D(T2″); from the time T1 to the current time T2″, the stretching length D(T2″)-D(T1) of the delete icon D position is:

[0118] D(T2″)-D(T1)=x(T2″)·0.1·(Index(D)+1)

[0119] At the time T1, the position of the other function icon is A(T1); at the current time T2″, the position of the other function icon is A(T2″); from the time T1 to the current time T2″, the stretching length of the other function icon position A(T2″)-A(T1) is:

[0120] A(T2″)-A(T1)=x(T2′′)·0.1·(Index(A)+1)

[0121] Wherein, x(T2″) is x at time T2″; Index() represents the position index of the corresponding icon from right to left, Index(D) represents the position index of the delete icon, and Index(A) represents the position index of the other function icons;

[0122] The angle between the first deletion pattern and the second deletion pattern rebounds and shrinks, specifically including: at the current time T2″, the angle Open (D) between the first deletion pattern and the second deletion pattern is:

[0123] Open(D)=MaxAngle·x(T2″) / Thr

[0124] The MaxAngle is the maximum angle between the first deletion graphic and the second deletion graphic, and the Thr is the length of the sliding box from the time T1 to the first threshold.

[0125] In the embodiments of the present application, in the case that the user releases the hand (or the hand is away) before the sliding box reaches the T3 moment, the sliding box and the icons in the sliding box rebound to the initial position, which is similar to the rebound process of a spring after a person releases the spring, and the movement of the icons is similar to the rebound process of some points on the spring. Thus, in the range of the first threshold, the user releases the hand during the sliding process, and the display of the user interface can present the dynamic effect of the spring rebound, which can improve the user operation experience. In addition, since the display of each icon in the sliding box is calculated by the rebound displacement formula, and the corresponding angle of the deleted icon is obtained by the opening angle of the trash can, the position and angle of the icon can be directly called to related formula, so that the calculation efficiency is higher and the speed is faster. Efficient processing can support the display of the interface, avoid the lag of the display, and thus improve the user experience.

[0126] In a third aspect, the present application provides an electronic device, comprising a touch screen, one or more processors and one or more memories. The one or more processors are coupled with the touch screen, a camera, and the one or more memories, and the one or more memories are configured to store computer program codes, the computer program codes comprising computer instructions, which, when executed by the one or more processors, cause the electronic device to perform the list message deletion method in any possible implementation manner of any of the aspects.

[0127] In a fourth aspect, the present application provides an electronic device, comprising one or more function modules. The one or more function modules are configured to perform the list message deletion method in any possible implementation manner of any of the aspects.

[0128] In a fifth aspect, the embodiments of the present application provide a computer storage medium, comprising computer instructions, which, when executed on an electronic device, cause the electronic device to perform the list message deletion method in any possible implementation manner of any of the aspects.

[0129] In a sixth aspect, the embodiments of the present application provide a computer program product, which, when executed on a computer, causes the computer to perform the list message deletion method in any possible implementation manner of any of the aspects. BRIEF DESCRIPTION OF DRAWINGS

[0130] Figure 1 is a user interface schematic diagram of the short message list deletion provided by the embodiments of the present application;

[0131] Figure 2 is a user interface schematic diagram of the notification list deletion provided by the embodiments of the present application;

[0132] Figure 3is a user interface schematic diagram of chat list deletion provided by an embodiment of the present application;

[0133] Figure 4 is a user interface schematic diagram of a group of short messages provided by an embodiment of the present application;

[0134] Figure 5 is a user interface schematic diagram of another group of short messages provided by an embodiment of the present application;

[0135] Figure 6 is a user interface schematic diagram of still another group of short messages provided by an embodiment of the present application;

[0136] Figure 7 is a user interface schematic diagram of still another group of short messages provided by an embodiment of the present application;

[0137] Figure 8 is a method flow schematic diagram of list message deletion provided by an embodiment of the present application;

[0138] Figure 9 is a software structure schematic diagram of an electronic device 100 provided by an embodiment of the present application;

[0139] Figure 10 is a method flow schematic diagram of another list message deletion provided by an embodiment of the present application;

[0140] Figure 11 is a hardware structure schematic diagram of an electronic device 100 provided by an embodiment of the present application. DETAILED DESCRIPTION

[0141] The technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the drawings. In the description of the embodiments of the present application, unless otherwise specified, “ / ” represents the meaning of or, for example, A / B can represent A or B; the “and / or” in the text only describes the association relationship of the associated objects, which means that there can be three relationships, for example, A and / or B, which means that there are three cases of A alone, A and B together, and B alone. In addition, in the description of the embodiments of the present application, “multiple” means two or more than two.

[0142] Hereinafter, the terms “first” and “second” are only used for description purposes, and cannot be understood as implying or suggesting relative importance or implicitly indicating the number of indicated technical features. Therefore, the features defined with “first” and “second” can explicitly or implicitly include one or more features, and in the description of the embodiments of the present application, unless otherwise specified, the meaning of “multiple” is two or more than two.

[0143] The embodiments of the present application disclose a list message deletion method and an electronic device, which can improve the operation experience of users.

[0144] The following first introduces some related concepts involved in the embodiments of this application.

[0145] A Bezier curve, also known as a Bezier curve or Bézier curve, is a mathematical curve used in two-dimensional graphics applications. Common vector graphics software uses it to accurately draw curves. A Bezier curve consists of line segments and nodes. Nodes are draggable fulcrums, and line segments are like stretchable rubber bands. The pen tool we see on drawing tools is used to create this type of vector curve. A Bezier curve's shape, or degree of curvature, is entirely determined by its control points. N control points correspond to a Bezier curve of order n-1, and it can be drawn recursively.

[0146] Given control points P0 and P1, a first-order Bezier curve:

[0147] P(θ)=(1-θ)P0+θP1

[0148] Given control points P0, P1, and P2, a second-order Bezier curve is:

[0149] P(θ)=(1-θ) 2 P0+2t(1-θ)P1+θ 2 P2

[0150] Given control points P0, P1, P2, and P3, a third-order Bezier curve is:

[0151] P(θ)=(1-θ) 3 P0+3θ(1-θ) 2 P1+3θ 2 (1-θ)P2+θ 3 P3

[0152] The value of θ above ranges from 0 to 1, representing the proportion of the entire curve. From order 0 to n, the coefficient pattern above is a permutation and combination of values, which can also be calculated using Pascal's triangle. It should be noted that higher-order Bezier curves exist, but I will not elaborate on them here.

[0153] The coordinates P(T, V) are the coordinate points that satisfy the Bezier curve, where T and θ, as well as V and θ, have a certain relationship. Taking the third-order Bezier curve as an example, assuming the control points are P0 = (0, 0), P1 = (0.4, 0), P2 = (0.2, 1), and P3 = (1, 1), we can get:

[0154] T=1.2θ(1-θ) 2 +0.6θ 2 (1-θ)+θ 3

[0155] V=3θ2 (1-θ)+θ 3

[0156] The following describes the application scenarios involved in the embodiments of this application.

[0157] Smartphones, tablets, smart bracelets and other electronic devices are commonly used in daily life. These electronic devices can display content information for users in the form of lists. For example, the file list of the file manager, the information list of SMS messages, the itinerary list of the memo, the contact list of the phone, the notification bar list of the notification center and the chat list of social software, etc. Users can clean up the contents of these lists from time to time. Among them, a list includes one or more information items (or called items, messages or list messages). Deleting information items in the list is a way for users to organize information.

[0158] The following describes several specific scenarios for deleting user lists.

[0159] Scenario 1: Deleting the SMS list.

[0160] Users can click to delete a text message in the text message list.

[0161] Figure 1 This is a user interface diagram for deleting a short message list disclosed in an embodiment of the present application. Figure 1 As shown in (A), the electronic device can display the interface diagram 101 of the notification information of the text message. Figure 1 The notification information user interface shown in (A) displays one or more SMS abbreviations, each of which corresponds to a SMS message. These multiple SMS abbreviations constitute a SMS list. The displayed SMS abbreviations may include SMS messages from email notifications, SMS messages from XX Hospital, SMS messages from XX Bank, SMS messages from 10689..., SMS messages from packages, SMS messages from XX Technology, and SMS messages from 10694... If the user needs to delete the SMS messages from XX Hospital (the SMS messages in the second row of the list), the user can swipe left on the list image of the SMS messages from XX Hospital.

[0162] like Figure 1 As shown in (B) in FIG, in response to the user's operation, the electronic device may display a user interface 102. The text message from XX Hospital in the user interface 102 may display a delete icon 1021. The delete icon 1021 may be a trash can icon. The user may click on the delete icon 1021.

[0163] like Figure 1As shown in (C), in response to the above-mentioned user clicking the delete icon 1021, the electronic device can display the user interface 103. The user interface 103 may include a pop-up interface 1031, which can display a question message for prompting the user: "Are you sure you want to delete this text message?" and option information (option control) "Exit" and "OK". Among them, the "Exit" control is used to cancel and exit the current deletion operation; the "OK" control is used to confirm the deletion operation. The user can click the above-mentioned "OK" control to delete. In addition, the selected text messages in the user interface 103 (the text messages from XX Hospital can be the text messages selected to be deleted) are marked, for example, the color of the list of this text message is deepened to gray.

[0164] like Figure 1 As shown in (D) in the figure, in response to the user clicking the "OK" control, the electronic device may display user interface 104. The text message from XX Hospital has been deleted from user interface 104 and replaced based on the number of times it was received. The displayed text messages, from top to bottom, include an email notification message, a message from XX Bank, a message from 10689..., a message about a package, a message from XX Technology, a message from 10694..., and information about another package.

[0165] like Figure 1 In the user interfaces shown in (A) to (D), when deleting text messages, the user needs to first swipe left to call out the delete icon. After clicking the delete icon, the user needs to move their hand to the bottom of the screen and click OK in the pop-up interface to delete the text message. The overall range of user gestures is large, the operation process is inconvenient, and the user experience is poor. In addition, during the user deletion operation, the user screen is adjusted in sequence. During the operation, there is no interface change to remind the user of the effect and function of the current operation, resulting in a poor screen effect.

[0166] Scenario 2: The notification bar list is deleted.

[0167] The user clicks to delete a notification message in the notification bar list.

[0168] Figure 2 This is a user interface diagram of a notification list deletion disclosed in an embodiment of the present application. Figure 2 As shown in (A) of FIG, the electronic device may display user interface 201, which may include multiple notification information thumbnails. These multiple notification information thumbnails may include weather notifications and message notifications. The weather notification may display "Beijing is cloudy with light rain," while the message information may indicate "Xiao Zhang sent a message saying 'OK'." If the user needs to delete the weather notification, they can swipe left on the list icon of the weather notification.

[0169] like Figure 2As shown in (B) in FIG, in response to the user's left swipe operation, the electronic device may display user interface 202. The weather notification list in user interface 202 may display a delete icon 2021 and a read icon 2022. The delete icon 2021 may be a trash can icon. The user may click the delete icon 2021.

[0170] like Figure 2 As shown in (C) in FIG, in response to the user clicking the delete icon 2021, the electronic device may display the user interface 203. The user interface 203 no longer includes the weather notification, but only includes the information notification.

[0171] like Figure 2 In the user interfaces shown in (A) to (C), to delete a notification, the user must first swipe left to reveal the delete and read icons, then tap the delete icon to delete the notification. The only changes to the icon during the entire user process are changes to the UI at the start and end of the operation. There are no animations to remind the user of the current action, resulting in a poor user experience and visual quality.

[0172] Scenario 3: Deletion of chat list in social software.

[0173] The user clicks to delete a chat entry in the chat list.

[0174] Figure 3 This is a user interface diagram of a chat list deletion disclosed in an embodiment of the present application. Figure 3 As shown in (A) of FIG, the electronic device may display a user interface 301, which includes multiple chat message abbreviations. These multiple chat message abbreviations may include email reminder messages, subscription account messages, MAC messages, Cindy's messages, Xiao Zhang's messages, and Xiao Li's messages. If the user needs to delete the MAC message, the user can long press the MAC chat list.

[0175] like Figure 3 As shown in (B) of FIG. 3 , in response to the user's long press operation, the electronic device may display user interface 302. User interface 302 may display a pop-up window 3021. Pop-up window 3021 may include a control for deleting the message, a control for not displaying the message, a control for pinning the message, and a control for marking the message as read. The user may click on the control for deleting the message.

[0176] like Figure 3As shown in (C) of FIG. 3, in response to the operation of the user clicking to delete the information control, the electronic device can display the user interface 303. The user interface 303 no longer includes the message of MAC, and the messages after the message of MAC are moved up by one position. The messages included in the user interface 303 are the message of the mailbox reminder, the message of the subscription number, the message of Cindy, the message of Xiao Zhang, the message of Xiao Li, and the message of Xiao Ming.

[0177] As shown in the user interfaces (A)-(C) of FIG. 3, the operation of the user in the process of deleting the chat list needs to first long press the call-out pop-up box 3021, and then click the delete information control in the pop-up box 3021 to delete the corresponding message. Because the user interface changes before and after the operation of the user, the user cannot be reminded during the operation of the user, and the sensory experience and operation experience of the user are poor. Figure 3

[0178] It should be noted that the above three scenarios are only illustratively described for the scenario of deleting a list, and there are also examples of deleting a list such as a memo, a file list, and a news list, which are not limited.

[0179] In the above three embodiments, the user deletes a list message according to the prompt of the text or the picture. However, the text and the picture in the list screen are static, do not change based on the operation of the user, and do not provide the user with a corresponding prompt during the operation of the user. The dynamic effect displayed by the electronic device is poor, and the operation experience of the user is poor.

[0180] The following describes in detail a method for deleting a list message provided by an embodiment of the present application with reference to the accompanying drawings.

[0181] In the embodiment of the present application, when it is necessary to delete a list message, the user can first call out a sliding box of the list by left sliding, and the sliding box can include an icon with a corresponding function, that is, the user interface of the electronic device can display an icon of a function that the user can use. For example, a delete icon (a garbage can icon) and other function icons. The other function icons are, for example, a collection icon and a read icon. Then the user can continue to left slide, and the delete icon, the collection icon, and the read icon can move left with the left sliding of the user. Within a certain moving range, with the left sliding of the user, the barrel body and the lid of the garbage can of the delete icon can open a certain angle. When the user slides beyond the moving range, the transparent image of the other function icons of the electronic device gradually increases until it disappears, and the delete icon can slide to the middle position of the list and become larger. At this time, the electronic device can directly delete the list message. In this way, during the process of deleting the icon by the user, the dynamic effect of the icon often changes, so that the visual experience of the user is better. ​

[0182] The following combination Figure 4 Describes the process of a user calling out a function icon through a first operation.

[0183] For example, Figure 4 This is a user interface diagram of a group of text messages disclosed in an embodiment of the present application.

[0184] like Figure 4 As shown in (A) of FIG, the electronic device displays a user interface 410 of notification information in a text message application. The user interface 410 may include multiple text message abbreviation items, wherein each text message abbreviation item may correspond to a list message, and each list message may correspond to a message box. For a detailed description, please refer to FIG. Figure 1 The description of the user interface 101 shown in (A) in the figure is omitted for brevity. The user can perform a left swipe operation (first operation) on the XX hospital message (first list message) with a left swipe. For example, at time T0, the user can press and hold the touch point with a finger and swipe to the left. In this embodiment of the present application, the message box displayed for the first list message is referred to as a list box, that is, a list box 411 for the XX hospital message.

[0185] like Figure 4 As shown in (B) in the figure, in response to the above-mentioned first operation, the electronic device may display a user interface 420 based on the above-mentioned first operation, and a sliding box 422 (the sliding box at this time is the initial sliding box) and a list box 421 may be displayed on the right side of the list corresponding to XX Hospital in the user interface 420. The sliding box 422 may include a delete icon 4221. In some embodiments, the sliding box 422 may also include one or more other function icons such as a favorites icon 4222 and a read icon 4223. The sum of the length of the sliding box 422 and the length of the list box 421 is the screen width. The right border of the sliding box 422 coincides with the screen border of the electronic device, and the left border of the sliding box 422 (that is, the right border of the list box 421) can slide following the position change of the user's touch point, that is, as the user's touch point slides to the left, the border (also referred to as the boundary) where the sliding box 422 and the list box 421 coincide with each other moves to the left. It can be understood that in the process of changing from user interface 410 to user interface 420, as the user's touch position changes, the sliding box 422 corresponding to XX Hospital in the user interface goes from not displaying to partially displaying the left, and then to fully displaying (i.e., displaying the initial sliding box); the list box 421 goes from fully displaying to partially not displaying the left, that is, sliding to the left as a whole.

[0186] During the first operation, after the sliding box becomes longer, when the length of the sliding box is greater than or equal to a certain threshold, the user releases the sliding box and the sliding box displays as follows: Figure 4the sliding box shown in (B) in FIG. 1C; in the case where the length of the sliding box is less than the certain threshold, the user releases the hand, and the sliding box displays the sliding box shown in (A) in FIG. 1C, that is, the initial sliding box can be called out only when the length of the sliding box is greater than or equal to the certain threshold. Figure 4

[0187] It should be noted that the display mode of the short message list described above is only an exemplary list, and can also be a notification list, a chat information list, a file list, a note list, a task list, etc., without limitation.

[0188] Based on the above embodiment, the electronic device can call out the delete icon and other function icons through the first operation. In this way, a channel can be provided for the user to delete the list information, thereby completing the deletion of the list information.

[0189] According to the above embodiment, in the case where the first operation of the user is obtained, the electronic device can display a sliding box in response to the first operation. The sliding box can include the delete icon and other function icons. The first operation can be an operation of sliding a list box of a certain list information in a first list interface to the left, or an operation of clicking the list box of the certain list information in the first list interface. The specific operation mode is not limited by the gesture of the user operation. The first list interface is a list interface of the current user, and the first list interface includes at least one list information. For example, the first list interface can be one of a short message list interface, a file list interface, a notification list interface, a memo list interface, a chat list interface of a social software, and a contact list interface. The first list interface is not limited to a list interface of a certain application. The delete icon can be a trash can icon, which can include a body of the trash can and a cover of the trash can. The other function icons can include one or more of a collection icon, a forwarding icon, a read icon, an unread icon, and a top icon. The collection icon can be used to collect the corresponding list information. The forwarding icon can be used to forward the corresponding list information. The read icon can be used to mark the corresponding list information as read information. The unread icon can be used to mark the corresponding list information as unread information. The top icon can place the corresponding list information at the top of the current list interface, i.e., set it as the first information. The other function icons can also include other function icons, without limitation.

[0190] ​In a case where the second operation of the user is acquired, in response to the second operation, the length of the sliding box displayed in the user interface of the electronic device can continue to increase, and the sliding box can include the delete icon and the other function icon described above. In a case where the length of the sliding box is less than (less than or equal to) the first threshold value, the positions of the delete icon and the other function icon can be elastically stretched as the user touch position slides to the left. The barrel body and the barrel cover of the trash can in the delete icon can open the mouth. In a case where the length of the sliding box is greater than or equal to (greater than) the first threshold value, the transparency of the other function icon can start to increase and gradually disappear as the user touch position slides to the left, and the delete icon can also move to the center position of the sliding box and become larger.

[0191] The first operation and the second operation can be the same operation or different operations. In a case where the first operation and the second operation are the same operation, the user performs a sliding operation on the first list message in (A) of Figure 4 , and the length of the sliding box increases as the sliding operation, and in a case where the length of the sliding box is less than the initial length, the sliding operation is referred to as the first operation; in a case where the length of the sliding box is greater than or equal to the initial length, the sliding operation is referred to as the second operation. When the first operation and the second operation are the same operation, the user's finger does not leave the phone screen.

[0192] In a case where the first operation and the second operation are different operations, the first operation is a left sliding operation performed by the user in the figure shown in (A) of Figure 4 , and the user leaves the hand, and the first operation ends. In response to the first operation, the electronic device can display (B) of Figure 4 . The second operation is a left sliding operation performed by the user on the first list message in the figure of (B) of Figure 4 , and in response to the second operation, the electronic device can display (A), (B) of Figure 5 , and (A) of Figure 6 . The user leaves the hand, and the second operation ends. The electronic device can display the user interface based on the length of the sliding box when the user leaves the hand, and specific reference can be made to the descriptions of the sliding box rebound and the automatic covering of the sliding box described above, and no further description is made. In addition, the first threshold value can be a preset length, for example, 2 / 3 of the width of the screen width.

[0193] The following describes the display of the user interface as the user touch position slides to the left (the second operation) in a case where the length of the sliding box is less than (less than or equal to) the first threshold value in combination with Figure 5 .

[0194] Exemplarily, in a case where the electronic device displays the user interface shown in (B) of Figure 4 at T1, the user can perform the second operation.Figure 5 This is a schematic diagram of a user interface for another group of text messages disclosed in an embodiment of the present application.

[0195] like Figure 5 As shown in (A), in response to the user's sliding operation to the left (second operation), the electronic device can display a user interface 510. The user interface 510 is a schematic diagram of the user interface displayed by the electronic device at time T2. Among them, time T2 can be a moment between time T1 and time T3, that is, the length of the sliding box 511 at time T2 is greater than the length at time T1 (the length of the initial sliding box 422), but at the same time has not reached the length of the sliding box at time T3 (the length of the first threshold). At this time, the delete icon 5111, the favorite icon 5112 and the read icon 5113 are all elastically stretched to the left, but have not yet reached the maximum stretching distance (that is, the stretching distance corresponding to each icon at time T3), and the body and lid of the trash can in the delete icon 5111 can be opened, but have not reached the maximum opening angle MaxAngle.

[0196] As the user slides the touch position to the left, the left border of the sliding box may reach the first threshold. Figure 5 As shown in (B), in response to the user's left swipe operation (also the second operation, the process from T1 to T2 and then to T3 is always swiping left, and the user's hand has not been released, which are all different stages of the second operation), the electronic device can display user interface 520. User interface 520 can be a sliding box 521 in which the first threshold is reached. The delete icon 5211, the favorite icon 5212, and the read icon 5213 in the sliding box 521 are all elastically stretched to the right to the maximum stretching distance, and at the same time, the trash can body and lid can be opened to the maximum opening angle MaxAngle.

[0197] It should be noted that when the angle between the trash can body and lid is maximized, the trash can body does not rotate, only the lid rotates. That is, the lid can rotate about a point on the right side of the lid, increasing the angle between the trash can body and lid. This is more consistent with the process of people lifting the lid to throw away garbage, thereby improving the user experience.

[0198] The following specifically describes the process in which, when the length of the sliding box is less than (less than or equal to) the first threshold, the length of the sliding box is elastically stretched from the initial sliding box length to the first threshold in response to the user's left sliding operation (second operation).

[0199] In a possible implementation, the electronic device may determine the displacement of the left frame of the sliding frame based on the displacement of the touch point sliding to the left. Assuming that the time when the second operation starts is time T1, at this time, the interface displayed by the electronic device may be as follows: Figure 4 As shown in (B), under the second operation (Figure 5 As shown in (A) and (B) in the figure), the stretching length of the sliding frame is:

[0200] H(T2)-H(T1)=rate·(P(T2)-P(T1)).

[0201] Among them, P(T1) is the position of the user touch point at the start time T1 of the left swipe, and P(T2) is the position of the user touch point at the current time T2. H(T1) is the length of the sliding box at the start time T1 of the left swipe, that is, the length of the initial sliding box; H(T2) is the length of the sliding box at the current time T2. H(T2)-H(T1) is the displacement of the left border of the sliding box from time T1 to time T2, which is also the distance the length of the sliding box increases, and also the distance the length of the list box decreases. Among them, the stretching length is the length of the sliding box increased from the moment the second operation starts to the moment of the current second operation.

[0202] In addition, rate is the elongation rate, rate = e -α·m / L(A) (i.e. stretching curve). Wherein, α is the damping coefficient, and α can be a set constant, for example, α=2. L(A) is the screen width, which represents the maximum distance that the sliding frame can be stretched. m is the length H(T2)′-H(T1) of the stretching of the sliding frame of the previous frame, and H(T2)′ is the length of the sliding frame at the corresponding moment of the previous frame at the current moment T2. The electronic device can display the user screen periodically, for example, once every few milliseconds. The electronic device can calculate the stretching rate based on the current (T2 moment) m. According to the calculation formula of the stretching curve, it can be found that the stretching curve has the characteristic that the larger the stretching distance m, the smaller the stretching rate rate, that is, the larger the stretching distance m, the more difficult it is to stretch.

[0203] The following is a detailed description of the case where the length of the sliding frame is less than the first threshold (H(T2)-H(T1) <Thr或者H(T2)-H(T1)≤Thr(Thr为第一阈值减去初始滑动框长度的值)),响应于用户的左滑操作(第二操作),删除图标和其他功能图标的位置可以弹性拉伸。

[0204] In a possible implementation, assuming that the second operation starts at time T1, the user interface displayed by the electronic device may be as follows: Figure 4As shown in (B), the position of the delete icon 4221 is D(T1), the position of the favorite icon 4222 is C(T1), and the position of the read icon 4223 is B(T1). The position of the delete icon 4221 is represented by D, the position of the favorite icon 4222 is represented by C, and the position of the read icon 4223 is represented by B. When the length of the user's touch sliding frame does not exceed the first threshold, as the touch point slides to the left, the delete icon, favorite icon, and read icon are all elastically stretched to the left.

[0205] Among them, such as Figure 5 As shown in (A), during the period from time T1 to time T2, the stretching length D(T2)-D(T1) of the deleted icon position is:

[0206] D(T2)-D(T1)=rate*(P(T2)–P(T1))*0.1*(Index(D)+1)

[0207] The stretching length of the favorite icon position C(T2)-C(T1) is:

[0208] C(T2)-C(T1)=rate*(P(T2)–P(T1))*0.1*(Index(C)+1)

[0209] The stretch length of the read icon position B(T2)-B(T1) is:

[0210] B(T2)-B(T1)=rate*(P(T2)–P(T1))*0.1*(Index(B)+1)

[0211] Among them, D(T2) is the position of the delete icon at time T2; C(T2) is the position of the favorite icon at time T2; B(T2) is the position of the read icon at time T2. Index() represents the position index of the corresponding icon from right to left. In the embodiment of the present application, the position index of the delete icon D is 1, the position index of the favorite icon C is 2, and the position index of the read icon C is 3. It should be noted that the number of icons in this application is 3 as an example, and the number of icons in the sliding box is not limited. P represents the position where the user touches the screen of the electronic device, wherein P(T1) is the position where the user touches the electronic device at time T1, and P(T2) is the position where the user touches the electronic device at time T2. rate is the stretching rate. Please refer to the above description for details and will not be elaborated on.

[0212] The stretch length is the length of the icon's center position sliding to the left from the start time T1 of the second operation to the current time T2 of the second operation. For example, at time T1, the electronic device receives the second operation and displays Figure 4In the user interface 420 shown in (B), the delete icon is at position D (T1). During the second operation, if the length of the sliding box is less than or equal to the first threshold, as shown in FIG. Figure 5 As shown in (A) in the figure, the delete icon slides to the left, and the position is D(T2). The stretching displacement of the delete icon is D(T2)-D(T1), that is, the length of the delete icon changing to the left in the horizontal direction.

[0213] It can be seen from the above-mentioned calculation process of the stretching displacement of the three icons that the stretching displacement of each icon is determined by the displacement of the user on the screen, the position index of the icon and the stretching rate. Among them, the larger the position index, the larger the stretching displacement, that is, the closer the icon in the sliding box 422 is to the list box 421, the longer the stretching length. For example, the stretching displacement of the read icon 4223 is greater than the stretching displacement of the favorite icon 4222, and the stretching displacement of the favorite icon 4222 is greater than the stretching displacement of the delete icon 4221. In addition, due to the characteristics of the stretching curve, the longer the stretching length, the more difficult it is to continue stretching. In this way, the displacement effect of the icon during the user's stretching process can be similar to the spring stretching effect, thereby improving the user's sensory experience.

[0214] The following describes in detail that, when the length of the sliding box is less than the first threshold, in response to the user's left sliding operation (second operation), the delete icon stretches and moves while the lid of the trash can opens slightly.

[0215] In a possible implementation, at time T1, Figure 4 As shown in (B) in the figure, the trash can in the delete icon has not yet opened, that is, the angle between the trash can body and the lid is 0 degrees. As the electronic device senses that the user's touch point moves to the left, at time T2, as Figure 5 As shown in (A), the opening angle of the trash can lid is Open (D):

[0216] Open(D)=MaxAngle·rate·(P(T2)-P(T1)) / Thr

[0217] Where MaxAngle is the maximum angle of the trash can lid, for example, 30 degrees. Thr is the length of the sliding box that increases when the user slides the sliding box from the initial sliding box to the touch point at the first threshold. That is, from time T1 when the user drags the sliding box to time T3, the length of the sliding box increases from H(T1) to the length of the first threshold H(T3). At time T3, if Figure 5As shown in (B) of FIG. 6, Thr = H(T3)-H(T1), the trash can is opened to the maximum angle MaxAngle. In addition, rate, P(T2) and P(T1) can refer to the above description, and will not be repeated. The opening angle is the angle between the barrel body and the barrel cover of the trash can. The opening angle of the trash can becomes larger, the barrel body of the trash can remains unchanged, and the barrel cover of the trash can rotates around the right point as the axis, so that the opening angle becomes larger.

[0218] As can be seen from the above process of opening the trash can of the delete icon, as the user slides to the left, the trash can gradually opens, indicating that the left sliding operation will trigger the deletion of the list information. In this way, on the one hand, it can prompt the user to operate the related deletion function, and on the other hand, through the dynamic micro-opening of the trash can, it can bring better operation experience to the user. In addition, since the display of each icon in the sliding box is calculated by the above stretching displacement formula, the corresponding angle of the delete icon is also obtained by the above opening angle of the trash can, so that the position and angle of the icon can be directly called to related formula, so that the calculation efficiency is higher and the speed is faster. Efficient processing can support the display of the interface to avoid the lag of the display, so as to improve the user experience.

[0219] When the length of the sliding box is in the range of the initial sliding box length to the first threshold length, that is, from T1 time to T3 time, the user can also slide to the right at a certain T2 time. The following describes the specific display of the list information when the user slides to the right before the sliding box reaches the first threshold in the second operation:

[0220] In the above process of the second operation, before the sliding box reaches the first threshold, the user changes the sliding direction and slides to the right. For example, in the above Figure 5 As shown in (A) of FIG. 6, the user slides to the right, and the sliding box can be tightened. At this time, the current time is T2' time, and the length change of the sliding box can refer to the change of the sliding box in the left sliding case:

[0221] H(T2')-H(T1) = rate·(P(T2')-P(T1))

[0222] Where P(T2') is the position of the touch point at the current time when the user slides to the right, and H(T2') is the length of the sliding box at the current time when the user slides to the right. Other parameters are described in detail, which can refer to the description of the left sliding process above, and will not be repeated.

[0223] At the same time, as the touch point slides to the right, the delete icon, the collection icon and the read icon are all elastically tightened to the right. At T2' time, the tightening displacement D(T2')-D(T1) of the delete icon is:

[0224] D(T2′)-D(T1)=rate*(P(T2′)–P(T1))*0.1*(Index(D)+1)

[0225] The compact displacement of the favorite icon C(T2)-C(T1) is:

[0226] C(T2′)-C(T1)=rate*(P(T2′)–P(T1))*0.1*(Index(C)+1)

[0227] The compressed displacement of the read icon B(T2)-B(T1) is:

[0228] B(T2′)-B(T1)=rate*(P(T2′)–P(T1))*0.1*(Index(B)+1)

[0229] Where D(T2′) is the position of the delete icon at time T2′; C(T2′) is the position of the favorite icon at time T2′; and B(T2′) is the position of the read icon at time T2′. For a detailed description of other parameters, please refer to the description of the above process and will not be repeated here.

[0230] At the same time, as the touch point slides to the right, the angle between the body and lid of the trash can with the delete icon decreases. At time T2′, the opening angle of the trash can is:

[0231] Open(D)=MaxAngle·rate·(P(T2′)-P(T1)) / Thr

[0232] The specific meaning of the above opening angle formula can be referred to the above related description and will not be elaborated on again.

[0233] It should be noted that when the user slides to the right before the sliding box reaches the T3 moment, the changes in the sliding box and icons displayed by the electronic device are exactly the opposite of the stretching process. This process is like the stretching and contraction process of a spring when someone pulls it, and the movement of the above-mentioned icon positions is like the stretching and contraction process of certain points on the spring. In addition, the above-mentioned elastic stretching and contraction process may be repeated, and you can refer to the above content and will not elaborate on it. In this way, within the range of the first threshold, the display of the user interface can present the dynamic effect of spring expansion and contraction during the user's sliding process. In addition, the opening angle of the trash can can remind the user that the current operation is a deletion operation, which can improve the user's operating experience.

[0234] In the length of the sliding frame is in the range of the initial sliding frame length to the first threshold length, that is, from T1 time to T3 time, the user can also hand off (hand off the screen) at a certain T2 time, that is, the electronic device cannot detect the touch point, and the specific display of the list information is described below when the sliding frame has not reached the first threshold value in the second operation:

[0235] In the process of the above-mentioned second operation, the user releases the hand before the sliding frame reaches the first threshold value, that is, no longer touches. For example, at the time shown in (A) of the above-mentioned Figure 5 The user releases the hand, and the sliding frame can rebound to the position of the initial sliding frame. At this time, the current time is T2" time, and the distance x between the left frame of the sliding frame and the left frame of the initial sliding frame satisfies the differential equation:

[0236]

[0237] Where β represents the spring damping, θ represents the rigidity of the spring, and β 2 = θ 2 , β and θ can be preset constants, for example, θ = 18. Where t is the time elapsed after the hand is released, that is, t = T2"-T2 (assuming the hand is released at T2 time). x is the stretching distance of the icon area at T2" time, that is, the difference between the length of the current sliding frame and the length of the initial sliding frame, x = H(T2")-H(T1).

[0238] At the same time, the delete icon, the favorite icon and the read icon all rebound to the right. At T2" time, the stretching length D(T2")-D(T1) of the delete icon position is:

[0239] D(T2")-D(T1) = x(T2")·0.1·(Index(D)+1)

[0240] The stretching length C(T2")-C(T1) of the favorite icon position is:

[0241] C(T2")-C(T1) = x(T2")·0.1·(Index(C)+1)

[0242] The stretching length B(T2")-B(T1) of the read icon position is:

[0243] B(T2")-B(T1) = x(T2")·0.1·(Index(B)+1)

[0244] Wherein, x(T2") is the stretching distance of the icon area at T2" time, i.e. x in the above differential equation. Other parameters refer to the above related description, and will not be repeated. The stretching length of the icon position is the stretching length of the icon displacement at a certain time after the user releases the hand compared with the T1 time (the second operation start time). For example, the user releases the hand at T2 time, and the current T2" time, as shown in (A) of Figure 5 , the position of the deletion icon 5111 is D(T2"), and the initial position can be as shown in (B) of Figure 4 , the initial position of the deletion icon 4221 is D(T1), and the rebound displacement of the deletion icon is D(T2")-D(T1) relative to the initial length, i.e. the length of the icon stretched horizontally to the left.

[0245] At the same time, the angle between the body and the cover of the trash can of the deletion icon is reduced to 0 degrees. At T2" time, the opening angle of the deletion icon trash can is:

[0246] Open(D) = MaxAngle x (T2") / Thr

[0247] Wherein, the specific meaning of the above opening angle formula can refer to the above related description, and will not be repeated.

[0248] After a period of time, x is equal to 0, the stretching length of the sliding box is 0, at this time, the sliding box becomes the initial length (the length at T1 time), the position of the icon becomes the position at T1 time, and the opening of the trash can is 0.

[0249] It should be noted that in the case that the user releases the hand (or leaves the hand) before the sliding box reaches T3 time, the sliding box and the icons therein rebound to the initial position. This process is like the rebound process of a spring after someone releases the hand, and the movement of the above icons is like the rebound process of several points on the spring. In this way, within the range of the first threshold, the user releases the hand during the sliding process, and the display of the user interface can present the spring rebounding effect, which can improve the user operation experience. In addition, since the display of each icon in the sliding box is calculated by the above rebound displacement formula, and the corresponding angle of the deletion icon is obtained by the above opening angle of the trash can, the position and angle of the icon can be directly determined by calling the related formula, which makes the calculation more efficient and faster. Efficient processing can support the display of the interface and avoid the lag of the display, thereby improving the user experience.

[0250] The above process of the user releasing the hand or sliding to the right can be shown in the process from (A) of Figure 5 to (B) of Figure 4 , which is opposite to the left sliding process, and will not be repeated.

[0251] The following combination Figure 6 This describes the display of the user interface as the user touches the position and continues to slide to the left when the length of the sliding box is greater than or equal to (greater than) the first threshold (H(T2)-H(T1)>hr or H(T2)-H(T1)≥Thr).

[0252] For example, at time T3 Figure 5 In the case of the user interface shown in (B), the user can continue to slide the application list to the left (continue the second operation). Figure 6 This is another diagram of a user interface for text messages disclosed in this embodiment. Figure 6 As shown in (A) in the figure, in response to the user sliding to the left (second operation), the electronic device can display the user interface 610. The T4 moment corresponding to the user interface 610 is a moment within 50ms after the T3 moment. At this time, the transparency of the favorite icon 6112 and the read icon 6112 in the sliding box 611 increases, but has not completely disappeared. The delete icon 6111 begins to move and grow, but has not yet moved to the center of the sliding box 611. The size of the delete icon 6111 also becomes the largest. As time goes by, as Figure 6 As shown in (B) in FIG, the electronic device may display a user interface 620. The time T4 corresponding to the user interface 620 is a time within 50ms to 200ms after the time T3. At this time, the favorite icon and the read icon in the sliding box 621 are completely gone, and the delete icon 6211 moves further and becomes larger, but has not yet moved to the center of the sliding box 621. As time goes by, as Figure 6 As shown in (C) of FIG, the electronic device may display user interface 630. Time T4 corresponding to user interface 630 is 200ms after time T3. Delete icon 6311 further moves to the center of sliding frame 631, and the size of delete icon 6311 becomes maximum. Thereafter, the width of the sliding frame may continue to increase until it covers the width of the screen.

[0253] It should be noted that the above Figure 6 The specific time period between time T3 and time T4 is for illustration only and is not intended to be limiting.

[0254] When the length of the sliding box exceeds the first threshold range, the specific display method of the list information is described below:

[0255] As described in detail below, when the length of the sliding box is greater than or equal to (greater than) the first threshold, in response to a left sliding operation (second operation) by the user, the length of the sliding box is elastically stretched.

[0256] In one possible implementation, after the length of the sliding box exceeds the first threshold length, when the user continues to slide to the left, the sliding box may slide to the left, and the length of the sliding box continues to expand. When the user continues to slide to the left and then to the right, the length of the sliding box first expands and then shrinks. The above-mentioned left and right sliding processes may be repeated, and the specific process is not limited. At this time, the electronic device can trigger deletion. Specifically, the current moment is moment T4, and moment T4 is the moment after moment T3. At this time, when the user touches the sliding box for the second operation, the change in length is also H(T4)-H(T1)=rate·(P(T4)-P(T1)). P(T4) is the position of the user touch point at the current moment T4, and H(T4) is the length of the sliding box at the current moment T4. And the length of the sliding box at moment T4 is greater than (or greater than or equal to) the first threshold, that is, H(T4)-H(T1)> or ≥Thr.

[0257] In another possible implementation, after the length of the sliding box exceeds a first threshold length, the user may release the sliding box. After the user releases the sliding box, the sliding box may automatically slide to the left until its length is equal to the screen width.

[0258] At this time, the user releases the finger at time T4, and the sliding frame automatically covers the entire screen width from time T4. The length change of the sliding frame can use a Bezier curve, for example:

[0259] P(θ)=(1-θ) 3 P0+3θ(1-θ) 2 P1+3θ 2 (1-θ)P2+θ 3 P3

[0260] The coordinates that satisfy the curve are P[T,V]. P0, P1, P2, and P3 are control points. The control points can be set in advance, for example, P0 = (0, 0), P1 = (0.2, 0), P2 = (0.2, 1), and P3 = (1, 1).

[0261] At time T5 after releasing the hand, the length of the sliding frame H(T5) at time T5 satisfies the coordinates ((T5-T4) / duration,H(T5) / (L(A) / 2-H(T4)))) where duration is the dynamic execution duration for the sliding frame to automatically cover the screen width, L(A) is the screen width, and H(T4) is the length of the sliding frame at time T4.

[0262] The dynamic execution duration of the sliding frame automatically covering the screen width is:

[0263] duration=TextArea(T4) / TextArea(T1)·maxDuration

[0264] Among them, maxDuration is the maximum duration of the animation execution, that is, the time from the start of the second operation to the sliding box sliding to the left, its length is the full width of the screen, for example, 256ms. TextArea(T4) is the length of the list box at the moment of release T4, that is, TextArea(T4) = L(A) - H(T4), TextArea(T1) is Figure 4 The length of the list box at time T1 corresponding to (B) in the figure is TextArea(T1)=L(A)-H(T1), where L(A) is the screen width.

[0265] Optionally, during the process of determining the automatic dynamic change, the electronic device may uniformly extend the left border of the sliding box to the full screen width based on the current list length TextArea(T4) and the execution duration duration. The sliding speed of the left border of the sliding box is: TextArea(T4) / duration. Extending the screen width may also be achieved based on other methods, without limitation.

[0266] The following specifically describes that when the user swipes left (the second operation) and the length of the sliding box exceeds the first threshold, in response to the user's left swipe operation (the second operation), the transparency of other function icons can begin to increase until they gradually disappear, and at the same time, the position of the deletion icon D moves toward the center and has a size enlargement effect.

[0267] In one possible implementation, the body and lid of the trash can with the delete icon remain at their maximum opening angle (MaxAngle), while the transparency of other function icons (i.e., the favorites icon B and the read icon C) begins to change based on a Bezier curve. Simultaneously, the delete icon D moves toward the center and increases in size based on the Bezier curve.

[0268] At time T4, the change of the transparent image and the change of the displacement of the delete icon can use a Bezier curve, for example:

[0269] P(θ)=(1-θ) 3 P0+3θ(1-θ) 2 P1+3θ 2 (1-θ)P2+θ 3 P3

[0270] The coordinates that satisfy the curve are P[T,V]. P0, P1, P2, and P3 are control points. The control points can be set in advance, for example, P0 = (0, 0), P1 = (0.2, 0), P2 = (0.2, 1), and P3 = (1, 1).

[0271] At T4, if Figure 6As shown in (A), the transparency and translucency Alpha (B) of the collection icon meet the coordinates:

[0272] ((T4-T3) / duration_A,1-Alpha(B))

[0273] Among them, 1-Alpha(B) is T in the above-mentioned Bezier curve, (T4-T3) / duration_A is V in the Bezier curve, that is, the coordinate ((T4-T3) / duration_A, 1-Alpha(B)) satisfies the above-mentioned Bezier curve.

[0274] At time T4, the transparency and translucency Alpha (C) of the favorites icon satisfy the coordinates:

[0275] ((T4-T3) / duration_A,1-Alpha(C))

[0276] Where 1-Alpha(C) is T in the aforementioned Bezier curve, and (T4-T3) / duration_A is V in the Bezier curve. That is, the coordinate ((T4-T3) / duration_A, 1-Alpha(C)) satisfies the aforementioned Bezier curve. In the aforementioned transparency and translucency coordinates, duration_A represents the duration of the transparency change animation, for example, 50ms. T4 is the current time, and T3 is the time when the length of the sliding frame equals the first threshold.

[0277] The delete icon can also be moved to the center of the sliding frame. At time T4, Figure 6 As shown in (A), (B) and (C), the position D (T4) of the deleted icon satisfies the coordinates:

[0278] ((T4-T3) / duration_X,D(T4) / (H(T4) / 2-D(T3)))

[0279] Among them, D(T4) / (L(T4) / 2-D(T3)) is the T in the above-mentioned Bezier curve, and (T4-T3) / duration_X is the V in the Bezier curve, that is, the coordinates ((T4-T3) / duration_X, D(T4) / (H(T4) / 2-D(T3))) satisfy the above-mentioned Bezier curve. In the above-mentioned position coordinates, duration_X represents the execution duration of the position change animation, for example, 200ms. D(T4) is the position of the delete icon at the current moment (T4 moment), and D(T3) is the position of the delete icon at T3 moment. H(T4) is the length of the sliding box at the current moment.

[0280] The delete icon becomes larger at the same time. At time T4, Figure 6As shown in (A), (B) and (C), the scale size S(T4) of the delete icon satisfies the coordinates:

[0281] ((T4-T3) / duration_S,S(T4) / S-1)

[0282] Among them, S(T4) / S-1 is T in the above-mentioned Bezier curve, (T4-T3) / duration_S is V in the Bezier curve, that is, the coordinates ((T4-T3) / duration_S, S(T4) / S-1) satisfy the above-mentioned Bezier curve. Duration_S is the execution duration of the deletion icon scale change effect, for example, 200ms. S is the original size of the deletion icon D, that is, the size at time T3. It should be noted that the above-mentioned duration_A, duration_X and duration_S can be equal or unequal, without limitation.

[0283] It should be noted that the above-mentioned Bezier curve is merely an example description, and may also be based on Bezier curves of other orders without limitation.

[0284] During the user's second operation, if the length of the sliding box is greater than the first threshold, the sliding box slides to the right. As the sliding box decreases in length, the transparency of other function icons decreases, the position of the delete icon slides to the right, and the size of the delete icon decreases. In the embodiment of the present application, the change process is exactly the opposite of the change process of the Bezier curve described above, and will not be described in detail.

[0285] In the above-mentioned embodiment, when the length of the sliding box exceeds the first threshold, the electronic device can adjust the transparency of other function icons based on the Bezier curve, adjust the position and size of the delete icon, so as to prompt the user that the operation of deleting the list information is currently being performed, and at the same time, it can also improve the user's operating experience and sensory effect. In addition, since the position, transparency and size of each icon in the sliding box are all calculated by substituting the above-mentioned Bezier curve, the calculation process can directly call the relevant curve, making the calculation more efficient and faster. Efficient processing can support the display of the interface and avoid display freezes, thereby improving the user experience.

[0286] In another possible implementation, the transparency of other function icons (ie, the favorites icon B and the read icon C) changes based on a specific function curve, while the delete icon D moves toward the center based on the specific curve and is enlarged in size.

[0287] First, if Figure 6 As shown in (A) in the figure, the transparency changes of other function icons are explained below:

[0288] At time T4 within duration_A after time T3, the transparency and translucency Alpha (B) of the favorites icon and the transparency and translucency Alpha (C) of the read icon can change linearly or nonlinearly:

[0289] 1. Linear transparency and translucency transformation:

[0290] Alpha(B)=Alpha(C)=1-(T4-T3) / duration_A

[0291] 2. Non-linear transparency and translucency transformation:

[0292] Alpha(B)=Alpha(C)=1-((T4-T3) / duration_A) 2

[0293] The above-mentioned changes in transparency and translucency may increase linearly. At time T4 outside the duration_A time period after time T3, the transparency of the icon remains at the maximum, that is, other function icons have disappeared.

[0294] Secondly, if Figure 6 As shown in (A), (B) and (C) in the figure, the following describes the position changes of the delete icon:

[0295] At time T4 within the duration_X period after time T3, delete the icon's position D(T4):

[0296] D(T4)=(H(T4) / 2-D(T3))·(T4-T3) / duration_X

[0297] Where L(T4) is the length of the sliding frame at time T4. D(T3) is the position of the delete icon at time T3. During the duration_X period, the delete icon can continue to move toward the center of the sliding frame.

[0298] At time T4, which is outside the duration_X period after time T3, the position of the delete icon is D(T4) = H(T4) / 2, that is, the delete icon can be kept at the center of the sliding frame. As the user slides or releases the sliding frame, the sliding frame expands to the full width of the screen. If the length of the sliding frame is the screen width, and the current time is T5, D(T5) = H(T5) / 2 = L(A) / 2, where L(A) is the screen width.

[0299] Finally, if Figure 6 As shown in (A), (B), and (C) in the figure, the following describes the size changes of the delete icon:

[0300] At time T4 within duration_S after time T3, the size of the delete icon is S(T4):

[0301] S(T4)=(S_Max-S)·(T4-T3) / duration_S

[0302] Where S_Max is the maximum size of the delete icon, and S is the initial size of the delete icon, i.e., the size of the delete icon during the time period T3 and before. The size of S_Max can be preset, for example, S_Max is 1.1 times S. During the duration_S period after T3, the delete icon can continue to grow until it reaches S_Max. During the duration_S period after T3, the delete icon remains at its maximum size S_Max.

[0303] During the user's second operation, if the length of the sliding box is greater than the first threshold, the sliding box slides to the right. As the sliding box shrinks, the transparency of other function icons decreases, the position of the delete icon slides to the right, and the size of the delete icon decreases. In this embodiment of the application, the change process is exactly the opposite of the change process of the other specific functions described above, and will not be described in detail.

[0304] In the above implementation, the electronic device can adjust the transparency of other function icons based on a specific function, adjust the position and size of the delete icon, so as to prompt the user that the operation of deleting the list information is currently being performed, and at the same time improve the user's operating experience and sensory effect. In addition, since the position, transparency and size of each icon in the sliding box are displayed through the above-mentioned substitution calculation, the calculation process is more efficient and concise. Efficient processing can support the display of the interface and avoid display freezes, thereby improving the user experience.

[0305] It should be noted that in the embodiments of this application, Alpha() refers to the alpha channel. The alpha channel refers to the transparency and translucency of an image, indicating whether the new element completely covers the background when the images are superimposed. For example, 0 represents no coverage, indicating complete transparency; 1 represents complete coverage, indicating complete opacity. In other words, the alpha value can reflect the transparency and opacity of the image to a certain extent.

[0306] When the sliding frame of the electronic device is stretched to the full screen width at time T5, the transparency of the delete icon begins to increase until it disappears. During the period after time T5, the delete icon is located at the center of the sliding frame and its size remains at the maximum S_Max.

[0307] In one possible implementation, the transparency of the delete icon may increase linearly over a certain period of time until it disappears, or may increase and disappear according to the aforementioned Nessel curve, without limitation.

[0308] For example, at time T4 Figure 6 In the case of the user interface shown in (C), the user can continue to slide the application list to the left (continue the second operation) or let go. Figure 6 As shown in (D) in FIG, the electronic device may display a user interface 640. The user interface 640 corresponds to time T5, that is, the length of the sliding box covers the width of the screen. At this time, the transparency of the delete icon 6411 in the sliding box 641 begins to change (has not changed yet). As time goes by, as Figure 6 As shown in (E) in FIG. 6 , the electronic device may display the user interface 650. The transparency of the delete icon 6511 in the user interface 650 increases, but the delete icon 6511 has not completely disappeared. Then, at time T6, as shown in FIG. Figure 6 As shown in (F), the electronic device can display the user interface 660. At the time T6 corresponding to the user interface 660, the sliding box and the delete icon therein disappear, and the list information of XX Hospital is successfully deleted, and the subsequent short message list is filled upwards. For detailed description, please refer to Figure 1 The relevant description of (D) in FIG is omitted here.

[0309] Figure 7 This is another user interface diagram of a group of text messages disclosed in the embodiment of the present application. In order to more clearly understand the changes in the user screen brought about by the user's operation, the screen corresponding to the first list message (for example, the text message of XX Hospital) in the user screen is intercepted for illustration.

[0310] like Figure 7 As shown in (A) to (F), at time T0, the electronic device can display Figure 7 In the user interface shown in (A), the user screen includes a complete list box 701 corresponding to the first list message. In response to the user's first operation (left sliding operation), the electronic device can call out the sliding box 711. After the first operation is completed, the electronic device can display Figure 7 At this time, the left boundary of the sliding box 711 coincides with the right boundary of the list box 701. At this time, the user screen includes a portion of the list box corresponding to the first list message.

[0311] At time T1, the electronic device responds to the user's second operation and may display the following Figure 7 The user interface shown in (B) in FIG. This is the moment when the second operation starts, so the user screen displayed by the electronic device is the same as the user screen after the first operation. For details, please refer to stepFigure 4 The description of (B) in FIG. 10D is not repeated. It is to be noted that the time T1 when the second operation starts can be the same as the time when the first operation ends, or the time T1 when the second operation starts is later than the time when the first operation ends.

[0312] As time goes on, the user can continue the second operation, at the time T2 when the length of the sliding box is less than the first threshold, as shown in (C) of FIG. 10E. Figure 7 The electronic device can display a user interface as shown in (C) of FIG. 10E. The user interface can include a sliding box 721, which is elastically stretched to the left as the user slides to the left, i.e., the length of the sliding box becomes larger. The positions of the delete icon 7211, the collect icon 7212, and the read icon 7213 in the sliding box 721 can be elastically stretched to the left. The opening angle of the delete icon 7211 gradually becomes smaller (the included angle between the body of the trash can and the lid).

[0313] The user continues the second operation, at the time T3 when the length of the sliding box 721 is equal to the first threshold, as shown in (D) of FIG. 10F. Figure 7 At this time, the sliding box 721 is updated to a sliding box 731 as shown in (D) of FIG. 10F. The length of the sliding box 731 is equal to the first threshold, the opening angle of the delete icon 7311 becomes maximum, and the positions of the delete icon 7311, the collect icon 7312, and the read icon 7313 are elastically stretched to the left to the maximum.

[0314] After the second operation continues, at the time T4 when the length of the sliding box is greater than the first threshold, the electronic device can display a user interface as shown in (E) of FIG. 10G. Figure 7 At this time, the length of the sliding box 741 is stretched to be longer as the second operation continues. The transparency of the collect icon 7412 and the read icon 7413 becomes larger, but the positions remain unchanged. The position of the delete icon 7411 slides to the left (moves to the center position of the sliding box 741), the opening remains maximum, and the size becomes larger. At the time T4, if the user releases the hand, the second operation ends. As time goes on, the length of the sliding box 741 becomes larger, and the transparency of the collect icon 7412 and the read icon 7413 becomes larger until they disappear.

[0315] At the time T5, the electronic device displays a user interface as shown in (F) of FIG. 10H. Figure 7 At this time, the position of the delete icon 7511 moves to the center position of the sliding box 751, and then the length of the sliding box 751 continues to become larger until it covers the screen width (for details, refer to (D) of FIG. 10I). Figure 6 Figure 6 ​At time T6, the electronic device has deleted the sliding box displayed for the first list message, that is, the sliding box for XX Bank (first list message) has disappeared, that is, the electronic device has completed deletion of the first list message.

[0316] It should be noted that the first operation starts at time T0 and ends at a time between time T0 and time T1; the second operation starts at time T1 and ends at time T4. Figure 7 The user's sliding situation is only one possible situation in the embodiment of the present application and is not limited.

[0317] Therefore, to address the above-mentioned problems in the prior art, embodiments of the present application provide a method for deleting list messages. In this method, an electronic device may display a first list screen based on a user's first left swipe. The first list screen may include an initial sliding frame that includes a delete icon and other function icons. Subsequently, the user applies a second left swipe to the electronic device. In response to the second left swipe, the electronic device may display a second list screen. The second list screen may include a sliding frame whose length can be elastically stretched. When the length of the sliding frame is greater than the length of the initial sliding frame and less than (less than or equal to) a first threshold, the angle between the trash can body and lid can be elastically changed (the delete icon is displayed as a trash can graphic), and the positions of the delete icon and other function icons can also be elastically changed. When the user releases their hand, the sliding frame and the icons within it rebound, and the trash can closes. When the length of the sliding frame exceeds the first threshold, the transparency of the other function icons increases, the delete icon moves to the center of the sliding frame, and the size of the delete icon increases. When the user releases their hand, the sliding frame automatically covers the width of the screen, and the delete icon gradually disappears, thereby deleting the corresponding list message. In this way, based on the user's second operation, the sliding box and icon position in the second list screen can be flexibly changed, the opening angle of the trash can can also be flexibly changed, and the icon transparency changes, so that the dynamic effect of the interface can more effectively remind the user of the deletion function corresponding to the current operation, thereby improving the user's operation experience and sensory experience.

[0318] The following describes in detail a method for deleting a list message provided by an embodiment of the present application in conjunction with the accompanying drawings. The method provided by the embodiment of the present application can be applied to Figure 1 In the scenario of the electronic device shown, the method can be executed by the electronic device. Figure 8 This is a flowchart of a method for deleting list messages provided by an embodiment of the present application. Figure 8 As shown, the method may include but is not limited to Figure 8 The steps shown in:

[0319] S801. The electronic device displays a list screen in response to a first operation on a first list message.

[0320] The list screen includes at least a list box and a sliding box for the first list message, and the sliding box may include a delete icon and other function icons. At this time, the list screen may be the first list screen. The total length of the sliding box and the list box is the screen width. The delete icon may include a first delete graphic and a second delete graphic, wherein the delete icon may be a trash can, the first delete graphic may be the body of the trash can, and the second delete graphic may be the lid of the trash can. At this time, the angle between the first delete graphic and the second delete graphic is 0 degrees. The number of other function icons may be 1 or more. For example, other function icons may include one or more of favorite icons, read icons, top icons, forwarding icons, sharing icons, and unread icons. The list screen may be one of a text message list screen, a chat list screen of a social software, a file list screen, a notification list screen, a note list screen, a memo list screen, and the like. The first operation is a left swipe operation. The current sliding box is the initial sliding box, and the length of the sliding box is the initial length. For details, please refer to Figure 4 The relevant description of (B) in FIG is omitted here.

[0321] It should be noted that, before the first operation, the electronic device may display a third list screen, which does not include a sliding box but only a list box. Figure 4 Related description of (A) in .

[0322] S802: In response to a second operation on the first list message, the electronic device elastically stretches the length of the sliding box in the list screen based on changes in the touch point of the second operation.

[0323] The second list screen includes the first list screen. The sliding box is a sliding box for the first list screen. The sliding box includes the delete icon and other function icons.

[0324] Among them, the second operation can be a left swipe operation, which can include a variety of specific situations, that is, the second operation can be a swipe to the left, or a swipe to the left first and then to the right, or a swipe to the left first and then hold down without sliding... At this time, the touch point position at the start moment (T1 moment) of the user's second operation is to the right of the touch point position at the end moment, that is, the user's second operation is an overall left swipe. When the electronic device is still able to detect the touch point, the sliding frame can be elastically stretched based on the position of the user's touch point. At the current Tx moment, the electronic device can detect the user's second operation. At the current Tx moment, the length of the sliding frame increased by the length of the initial sliding frame (that is, the stretched length of the left border of the sliding frame) is:

[0325] H(Tx)-H(T1)=rate·(P(Tx)-P(T1))

[0326] Where Tx is the time after T1, H(Tx) is the length of the sliding frame at the current moment, and P(Tx) is the position at which the user touches the electronic device screen, i.e., the location of the touch point. H(T1), P(T1), and the stretch rate rate can be referred to the descriptions of T2, T2′, T2″, and T4 above and are not repeated here.

[0327] S803: The electronic device determines whether the sliding box is within the first threshold. If so, execute S804; otherwise, execute S806.

[0328] When the electronic device receives the second operation, it can determine whether the current sliding box is within the first threshold, that is, the electronic device can determine whether the length of the sliding box is greater than the length of the initial sliding box and less than (less than or equal to) the first threshold. If the length of the sliding box is within the threshold distance range, execute S804; if the length of the sliding box exceeds the threshold distance, execute S806.

[0329] S804. When the sliding box is within the range of the first threshold, the electronic device responds to the second operation, and the positions of the delete icon and other function icons are elastically changed, and the angle between the trash can body and the lid of the delete icon is elastically changed.

[0330] During the second operation, the sliding box of the second list screen can be elastically stretched. When the length of the sliding box is greater than (greater than or equal to) the initial sliding box and less than (less than or equal to) the first threshold, the position of the delete icon and other function icons in the sliding box can be elastically changed, that is, when the touch point moves to the left, the position elasticity increases; when the touch point moves to the right, the position elasticity decreases. At the same time, the angle between the body and lid of the delete icon trash can will also change elastically, that is, when the touch point moves to the left, it opens elastically; when the touch point moves to the right, it closes elastically. The elastic changes of the specific icon position and the trash can angle can be referred to the corresponding descriptions at time T2 and time T2′, and will not be repeated here.

[0331] S805. In the case of the second operation, the electronic device responds to the end operation, the sliding frame rebounds, the positions of the delete icon and other function icons rebound, and the angle between the body and lid of the delete icon trash can is closed.

[0332] When the sliding box is within the range of the first threshold, the electronic device cannot detect the touch point (such as the user's hand is released), and the sliding box can rebound to the right in the second list screen. The rebound process can refer to the above differential equation at the T2″ moment, which will not be elaborated. The positions of the delete icon and other function icons can also rebound to the right. The rebound process can refer to the above description of the tightening of the positions of the delete icon, favorites icon and read icon at the T2″ moment. The angle between the body of the trash can with the delete icon and the lid is reduced until it is closed. The angle between the body of the trash can and the lid is reduced to 0 degrees. For details, please refer to the above description of the opening angle of the trash can with the delete icon at the T2″ moment. The description will not be elaborated.

[0333] S806: When the sliding frame exceeds the range of the first threshold, the electronic device responds to the second operation by increasing the transparency of other function icons, moving the delete icon to the center of the sliding frame, and increasing the size of the delete icon.

[0334] When the length of the sliding box is greater than (greater than or equal to) the first threshold, the transparency of other function icons increases, the delete icon moves to the center of the sliding box, and the size of the delete icon increases. For details, please refer to the above content on the changes in icon position and transparency based on Bezier curves, linear and nonlinear functions at time T4, that is, Figure 6 The relevant description in is omitted here.

[0335] S807: When the second operation is ended, the electronic device automatically covers the screen width by sliding the frame in response to the end of the operation.

[0336] The specific process of step S807 can refer to the content of the covering process of the sliding box after the user lets go of the hand at time T4, and no further details are given. In addition, when the sliding box is still in the range beyond the first threshold, the changes in the position and transparency of the icons in the sliding box are the same as the process in step S806, and no further details are given. When the sliding box automatically covers the full width of the screen, the transparency of the delete icon gradually increases until it disappears, after which the corresponding first list message disappears, and the deletion is completed. For details, please refer to the above Figure 7 The corresponding descriptions are omitted here.

[0337] In an embodiment of the present application, the electronic device can display a first list screen based on a first operation, and call out the delete icon and other function icons in the sliding box. Afterwards, the user can continue to apply a second operation to the electronic device, and the electronic device responds to the second operation by displaying a second list screen, wherein the sliding box in the second list screen elastically stretches as the user slides, and the position of the icon is also elastically stretched when the first threshold is not exceeded, and the trash can opens elastically; when the user lets go, it rebounds immediately. When the first threshold is not exceeded, the other function icons gradually disappear, and the delete icon can be moved to the center of the sliding box; when the user lets go, the sliding box covers the width of the screen until the list information is deleted. In this way, based on the user's second operation, the position of the sliding box and the icon in the second list screen can be elastically changed, the opening angle of the trash can can also be elastically changed, and the transparency of the icon can be changed, so that the dynamic effect of the interface can more clearly indicate the current user's operation, which can improve the user's operation experience and sensory experience.

[0338] Figure 9 A schematic diagram of the software structure of an electronic device 100 provided in an embodiment of the present application.

[0339] A layered architecture divides software into several layers, each with distinct roles and responsibilities. Layers communicate with each other via software interfaces. In some embodiments, the system is divided into four layers: application layer, application framework layer, runtime and system libraries, and kernel layer.

[0340] The application layer can include a series of application packages. Figure 9 As shown, the application package can include SMS, memo, file manager, news, notification bar, gallery, call, navigation and video, etc.

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

[0342] The application framework layer may include a user interface kit (UI Kit), which may include a stretching animation unit, a menu micro-animation unit, a menu object unit, a menu attribute configuration interface unit, an animation monitoring interface, and a slide-to-delete unit.

[0343] Among them, the stretching animation unit is used to determine the animation parameters of the list box sliding box, such as the length of the sliding box, the stretching length, the rebound displacement, etc.

[0344] The menu micro-animation unit is used to determine the animation parameters of the delete icon and other function icons, such as the position and transparency of the delete icon and other function icons, and the opening angle between the body and lid of the delete icon trash can. Specifically, it can be divided into the delete icon animation parameters and other function icon animation parameters. Among them, the delete icon animation parameters may include stretching displacement, rebound displacement, trash can opening angle, and trash can size change. Other function icon animation parameters may include stretching displacement, icon transparency, and rebound displacement. It should be noted that in different situations, the specific parameters obtained by the menu micro-animation unit are different.

[0345] The menu object unit is used to draw the list box, slide box, delete icon and other function icons based on the above-mentioned list box, slide box animation parameters, as well as the delete icon and other function icons animation parameters.

[0346] The menu attribute configuration interface is used to provide configuration icon resources, etc. to the application.

[0347] The dynamic monitoring interface unit is used to monitor the animation callback screen, specifically to monitor the execution status of the sliding box and the animation of the deletion icon and other icons in the sliding box.

[0348] The slide-to-delete unit receives trigger events from the menu attribute configuration interface, the stretch animation implementation, and the dynamic monitoring interface unit. This controls the menu micro-animation unit and the stretch animation unit to determine animation parameters, and controls the menu object unit to draw icons, list boxes, and slide boxes based on the animation parameters. This creates an interface animation process. The slide control unit can be constructed using AAR controls.

[0349] like Figure 9 As shown, the application framework layer may also include a location manager (Location Based Services, LBS), a window manager, a phone manager, a resource manager, a notification manager, a content provider, and a network manager.

[0350] The location manager is used to obtain the current location of the electronic device, for example, obtaining the current global positioning system (GPS) data, wireless fidelity (Wi-Fi) positioning data, and cell base station positioning data.

[0351] The window manager is used to manage window programs. The window manager can obtain the display size, determine whether there is a status bar, lock the screen, take screenshots, etc.

[0352] Content providers are used to store and retrieve data and make it accessible to applications. The data may include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

[0353] The view system includes visual controls, such as those for displaying text and images. The view system is used to build applications. A display interface can consist of one or more views. For example, a display interface containing a text notification icon might include a view for displaying text and a view for displaying images.

[0354] The phone manager is used to provide communication functions of the electronic device 100, such as management of call status (including answering, hanging up, etc.).

[0355] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0356] The Notification Manager allows applications to display notifications in the status bar. These messages can be displayed briefly and then disappear automatically without user interaction. For example, the Notification Manager is used to notify users of completed downloads and message reminders. The Notification Manager can also display notifications in the top status bar of the system as icons or scrolling text. For example, notifications from applications running in the background can also appear on the screen in the form of a conversational interface. Examples include text messages in the status bar, beeping, vibrating electronic devices, and flashing indicator lights.

[0357] The network manager is used to obtain the network status of the electronic device, that is, to obtain the current network status of WiFi and mobile cellular networks based on the network connection status of the electronic device.

[0358] The runtime includes the core library and the virtual machine. The runtime is responsible for system scheduling and management.

[0359] The core library consists of two parts: one part is the functional functions that need to be called by the programming language (for example, Java language), and the other part is the core library of the system.

[0360] The application layer and application framework layer run in a virtual machine. The virtual machine executes application layer and application framework layer programming files (for example, Java files) as binary files. The virtual machine performs functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.

[0361] The system library can include a plurality of functional modules. For example, a surface manager, media libraries, a 3D graphics processing library (e.g., OpenGL ES), a 2D graphics engine (e.g., SGL), etc.

[0362] The surface manager is used to manage the display subsystem and provides 2-Dimensional (2D) and 3-Dimensional (3D) layer fusion for a plurality of applications.

[0363] The media libraries support a plurality of commonly used audio, video format playback and recording, and static image files, etc. The media libraries can support a plurality of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0364] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, composition, and layer processing, etc.

[0365] The 2D graphics engine is a drawing engine for 2D drawing.

[0366] The kernel layer is a layer between hardware and software. The kernel layer at least includes a display driver, a camera driver, an audio driver, a sensor driver, and a virtual card driver.

[0367] It should be noted that the user interface accessory described above can be compatible with different systems, such as Magic 5.0 and Magic 6.0. Therefore, the left swipe deletion animation provided by the user interface accessory can be implemented in different systems of the electronic device without limitation.

[0368] The following will be described in detail Figure 9 , a list message deletion method provided by an embodiment of the present application. Figure 10 is another list message deletion method provided by an embodiment of the present application, as shown in Figure 10 , the method can include but is not limited to the steps shown in Figure 10 :

[0369] S1001, the first application receives a second operation.

[0370] The first application can be an application in the application layer of the electronic device. The first application can be a short message, a chat software, a notification bar, a file management list, a memo, etc. capable of displaying a list message. The user interface can include at least a first list message. The first list message can be one of a plurality of list messages. At this time, the user interface can display a sliding box and a list box for the first list message, for details, refer to Figure 4As shown in (B) in FIG. 1 , the user may slide leftwards for the first list message, and the electronic device detects the user's left sliding operation, which may be referred to as a second operation.

[0371] Among them, the specific description of S1001 can be referred to S802 and will not be repeated here.

[0372] S1002: The first application sends a second operation event to the slide deletion unit.

[0373] When the electronic device obtains the second operation, it can send the corresponding second operation event to the slide deletion unit. The second operation event is used to express that the second operation has been received. When the electronic device displays the user interface of the first application, the user slides to the left. That is, at this time, after the first operation, the electronic device has displayed Figure 4 In the case of the user interface in (B), the user continues to slide to the left. For details, please refer to Figure 5 The relevant description is omitted here.

[0374] The slide deletion unit may monitor the current touch event, ie, the second operation event, through the above-mentioned menu attribute interface and dynamic monitoring interface.

[0375] S1003: Determine a parameter acquisition instruction based on the real-time length of the sliding frame and the hand release event.

[0376] When the sliding deletion unit monitors the second operation event through the menu attribute interface and the dynamic monitoring interface, the parameter acquisition instruction can be determined based on the length of the sliding box and the hand release event.

[0377] Among them, the parameter acquisition instruction may include an icon parameter acquisition instruction and a sliding box parameter acquisition instruction. Among them, the icon parameter acquisition instruction may include one or more of an icon stretching instruction, a trash can opening instruction, an icon rebound instruction, a trash can opening rebound instruction, other function icon transparency instructions, a deletion icon center movement instruction, and a deletion icon size enlargement instruction. The sliding box parameter acquisition instruction may include one or more of a sliding box rebound instruction and or a sliding box stretching instruction. The sliding deletion unit may monitor the current hand-off event through a dynamic monitoring interface. When the user releases the hand during the second operation, the sliding deletion unit may detect the hand-off event; otherwise, it cannot be detected. When no hand-off event is detected, the parameter acquisition instruction may include a sliding box stretching instruction.

[0378] The sliding deletion unit may determine a parameter acquisition instruction based on the hand release event and the length of the sliding box.

[0379] The sliding deletion unit can obtain the length of the current sliding frame from the stretching animation unit, and then determine whether the current sliding frame is within the first threshold range. When the sliding deletion unit determines that no hand-off event is detected and the sliding frame is within the first threshold range, the parameter acquisition instruction may include an icon stretching instruction and a trash can opening instruction (including a sliding frame stretching instruction at the same time); when the sliding deletion unit determines that a hand-off event is detected and the sliding frame is within the first threshold range, the parameter acquisition instruction may include an icon rebound instruction, a trash can opening rebound instruction, and a sliding frame rebound instruction; when the sliding frame is outside the first threshold range, the parameter acquisition instruction may include other function icon transparency instructions, deletion icon center movement instructions, and deletion icon size enlargement instructions (excluding the sliding frame stretching instruction when the hand-off event is detected; including it when it is not detected).

[0380] In the above description, under different circumstances of the sliding frame and the user's touch, the parameter acquisition instructions sent by the sliding deletion unit to the menu micro-animation unit and the stretching animation unit are different. For specific circumstances, please refer to the above Figure 8 ,as well as Figure 4- Figure 7 The relevant description is omitted here.

[0381] The hand release event can be described in S805 and S807, and the real-time length of the sliding frame can be described in S802 regarding the elastic stretching of the sliding frame.

[0382] S1004. The slide deletion unit sends an icon parameter acquisition instruction to the menu micro-motion effect unit.

[0383] The slide deletion unit sends an icon parameter acquisition instruction to the menu micro-motion effect unit, and correspondingly, the menu micro-motion effect unit receives the icon parameter acquisition instruction from the slide deletion unit.

[0384] S1005. The menu micro-animation effect unit determines the animation parameters of the icon based on the icon parameter acquisition instruction.

[0385] When the menu micro-animation effect unit receives the icon parameter acquisition instruction from the slide deletion unit, the animation effect parameters of the icon can be determined.

[0386] Icon animation parameters may include one or more of the following: the position of the delete icon and other function icons, the trash can opening angle obtained by the trash can opening instruction, and the size of the delete icon becoming larger. Specifically, there are three possible scenarios:

[0387] In one possible case, the parameter acquisition instruction may include an icon stretching instruction and a trash can opening instruction. The menu micro-animation unit may determine the positions of the delete icon and other function icons based on the icon stretching instruction; and obtain the trash can opening angle based on the trash can opening instruction. For details, please refer to step S804, and Figure 5 The relevant description in is omitted here.

[0388] In another possible case, the parameter acquisition instruction may include an icon rebound instruction and a trash can opening rebound instruction. The menu micro-animation unit may determine the position of the delete icon and other function icons based on the icon rebound instruction; and the opening angle of the trash can based on the trash can opening rebound instruction. For details, please refer to steps S805 and Figure 5 The relevant description in is omitted here.

[0389] In another possible case, the parameter acquisition instruction may include an instruction to make other function icons transparent, an instruction to move the center of the delete icon, and an instruction to increase the size of the delete icon. The menu micro-animation unit may determine the transparency of other function icons based on the instruction to make other function icons transparent; determine the position of the delete icon based on the instruction to move the center of the delete icon; and determine the size of the delete icon based on the instruction to increase the size of the delete icon. For details, please refer to steps S806 and Figure 6 The relevant description is omitted here.

[0390] The process of determining the length of the sliding box, the position of the delete icon and other function icons, the angle of the delete icon trash can, the transparent image of other function icons, etc. can refer to the above Figure 8 Description and Figure 5 、 Figure 6 and Figure 7 .

[0391] S1006. The menu micro-animation unit sends the icon's animation parameters to the menu object unit.

[0392] When the menu micro-animation unit determines the animation parameters of the icon, it can send the animation parameters of the icon to the menu object unit. Correspondingly, the menu object unit can receive the animation parameters of the icon from the menu micro-animation unit.

[0393] S1007. The sliding deletion unit sends a sliding frame parameter acquisition instruction to the stretching animation effect unit.

[0394] After the slide delete unit obtains the slide box parameter acquisition instruction, it can send the slide box parameter acquisition instruction to the stretch animation unit. Correspondingly, the stretch animation unit can receive the slide box parameter acquisition instruction from the slide delete unit.

[0395] S1008. The stretching animation effect unit determines the animation effect parameters of the sliding frame based on the sliding frame parameter acquisition instruction.

[0396] When the menu micro-animation effect unit receives the sliding frame parameter acquisition instruction from the sliding deletion unit, the motion effect parameters of the sliding frame can be determined.

[0397] The animation parameters of the slider can include the slider stretch length or the slider length. There are two possible cases:

[0398] In one possible case, when the sliding frame parameter acquisition instruction includes a sliding frame stretching instruction, the stretching animation unit can determine the length of the sliding frame based on the current user's touch point, the touch point at time T1, and the stretching rate. For details, please refer to Figure 5- Figure 8 , and the related description in S802 are omitted for brevity.

[0399] In another possible case, when the sliding frame parameter acquisition instruction includes a sliding frame rebound instruction, the stretching animation unit can determine the stretching length of the sliding frame based on the user's release time and the current time. Figure 5- Figure 8 , and the related description in S802 are omitted for brevity.

[0400] In another possible case, when the sliding frame parameter acquisition instruction includes a sliding frame automatic covering instruction, the stretching animation unit may be based on the covering rate, etc. For details, please refer to S806 and will not be described in detail.

[0401] The process of determining the length of the sliding frame or the stretched length of the sliding frame can refer to the above Figure 8 Description and Figure 5 、 Figure 6 and Figure 7 .

[0402] S1009. The stretching animation unit sends the animation parameters of the sliding frame to the menu object unit.

[0403] When the stretching animation unit obtains the animation parameters of the sliding frame, it can send the animation parameters of the sliding frame to the menu object unit. Correspondingly, the menu object unit can receive the animation parameters of the sliding frame from the stretching animation unit.

[0404] S1010: The menu object unit draws a sliding box based on the dynamic effect parameters of the column sliding box, and draws an icon based on the dynamic effect parameters of the icon.

[0405] The menu object unit can draw a sliding box based on the dynamic effect parameters of the column sliding box, and draw an icon based on the dynamic effect parameters of the icon. The drawn icons include a delete icon and other function icons.

[0406] It should be noted that in the embodiment of the present application, the execution order of S1004 and S1007 is not limited. S1004 can be executed first and then S1007, or S1007 can be executed first and then S1004. S1004-S1006 need to be executed in sequence, and S1007-S1009 also need to be executed in sequence. When the menu object unit obtains either the animation parameters of the sliding box or the animation parameters of the icon, S1010 can be executed accordingly.

[0407] Figure 11 A schematic diagram of the hardware structure of an electronic device 100 provided in an embodiment of the present application.

[0408] The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a Universal Serial Bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a Subscriber Identification Module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0409] It should be understood that the structure illustrated in the embodiments of the present invention does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown, or may combine or separate certain components, or arrange the components differently. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

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

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

[0412] Processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 110 is a cache memory. This memory can store instructions or data that have just been used or are being recycled by processor 110. If processor 110 needs to use the same instruction or data again, it can directly access the memory. This avoids duplicate accesses, reduces processor 110 latency, and thus improves system efficiency.

[0413] In some embodiments, the processor 110 may include one or more interfaces. The USB interface 130 is an interface that complies with USB standards and specifications, and may specifically be a Mini USB interface, a Micro USB interface, a USB Type-C interface, or the like. The USB interface 130 can be used to connect a charger to charge the electronic device 100, or to transfer data between the electronic device 100 and peripheral devices. It can also be used to connect headphones to play audio. This interface can also be used to connect to other electronic devices 100, such as AR devices.

[0414] The charging management module 140 is configured to receive charging input from a charger. While charging the battery 142 , the charging management module 140 can also provide power to the electronic device 100 through the power management module 141 .

[0415] The power management module 141 is configured to connect the battery 142 and the charging management module 140 to the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140 to power the processor 110, the internal memory 121, the external memory, the display screen 194, the camera 193, and the wireless communication module 160, etc.

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

[0417] The antenna 1 and the antenna 2 are configured to transmit and receive electromagnetic wave signals. Each antenna in the electronic device 100 can be configured to cover a single or multiple communication frequency bands. Different antennas can also be multiplexed to improve the utilization of the antennas.

[0418] The mobile communication module 150 can provide a solution including 2G / 3G / 4G / 5G wireless communication applied to the electronic device 100. The mobile communication module 150 can include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, and perform filtering, amplification, etc. on the received electromagnetic waves, and transmit the processed electromagnetic waves to the modem processor for demodulation. The mobile communication module 150 can also amplify the signals modulated by the modem processor, and convert the amplified signals into electromagnetic waves radiated by the antenna 1.

[0419] The modem processor can include a modulator and a demodulator. The modulator is configured to modulate a low-frequency baseband signal to be transmitted into a medium-high frequency signal. The demodulator is configured to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. The low-frequency baseband signal processed by the baseband processor is transmitted to the application processor. The application processor outputs the sound signal through the audio device (not limited to the speaker 170A, the microphone 170B, etc.), or displays the image or video through the display screen 194.

[0420] The wireless communication module 160 can provide wireless communication solutions including Wireless Local Area Networks (WLAN) (such as Wireless Fidelity (Wi-Fi) network), Bluetooth (BT), Global Navigation Satellite System (GNSS), Frequency Modulation (FM), Near Field Communication (NFC), Infrared (IR), etc., which are applied to the electronic device 100. The wireless communication module 160 can be one or more devices that integrate at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, frequency modulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, frequency modulate it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0421] In some embodiments, antenna 1 of electronic device 100 is coupled to mobile communication module 150 , and antenna 2 is coupled to wireless communication module 160 , so that electronic device 100 can communicate with the network and other devices through wireless communication technology.

[0422] Electronic device 100 implements display functionality through a GPU, display screen 194, and an application processor. A GPU is a microprocessor for image processing that connects display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. Processor 110 may include one or more GPUs that execute program instructions to generate or modify display information.

[0423] Display screen 194 is used to display images, videos, etc. Display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), organic light-emitting diode (OLED), active-matrix organic light-emitting diode or active-matrix organic light-emitting diode (AMOLED), flexible light-emitting diode (FLED), Mini LED, Micro LED, Micro-OLED, quantum dot light-emitting diode (QLED), etc. In some embodiments, electronic device 100 may include one or N display screens 194, where N is a positive integer greater than 1.

[0424] The electronic device 100 can implement the acquisition function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, and an application processor.

[0425] The ISP processes data fed back by camera 193. For example, when taking a photo, the shutter is opened, light passes through the lens and is transmitted to the camera's photosensitive element. The light signal is converted into an electrical signal, which is then passed to the ISP for processing and converted into a visible image or video. In some embodiments, the ISP can be located within camera 193.

[0426] The camera 193 is used to capture still images or videos. The object generates an optical image through the lens and projects it onto the photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal oxide semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, which is then passed to the ISP for conversion into a digital image or video signal. The ISP outputs the digital image or video signal to the DSP for processing. The DSP converts the digital image or video signal into an image or video signal in a standard format such as RGB or YUV.

[0427] The digital signal processor is used to process digital signals. In addition to processing digital images or video signals, it can also process other digital signals. For example, when the electronic device 100 selects a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy.

[0428] Video codecs are used to compress or decompress digital video. Electronic device 100 may support one or more video codecs. This allows electronic device 100 to play or record videos in various encoding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, and MPEG4.

[0429] The NPU is a neural network (NN) computing processor that rapidly processes input information and continuously self-learns by drawing on the structure of biological neural networks, such as the transmission patterns between neurons in the human brain. The NPU enables intelligent cognitive applications in electronic device 100, such as image recognition, face recognition, speech recognition, and text comprehension.

[0430] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 via the external memory interface 120 to implement data storage functions. For example, files such as music and videos can be stored on the external memory card.

[0431] The internal memory 121 can be used to store computer executable program code, which includes instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area can store an operating system, an application required for at least one function (such as a sound playback function, an image and video playback function, etc.). The data storage area can store data created during the use of the electronic device 100 (such as audio data, a phone book, etc.).

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

[0433] The audio module 170 is used to convert digital audio information into analog audio signals for output, and is also used to convert analog audio input into digital audio signals.

[0434] The speaker 170A, also called a "horn", is used to convert audio electrical signals into sound signals.

[0435] The receiver 170B, also called a "handset", is used to convert audio electrical signals into sound signals.

[0436] The microphone 170C, also called a "microphone" or "speaker", is used to convert sound signals into electrical signals. The electronic device 100 may be provided with at least one microphone 170C.

[0437] The headphone jack 170D is used to connect a wired headphone.

[0438] The sensor module 180 may include one or more sensors, which may be of the same type or of different types. Figure 11 The sensor module 180 shown is only an exemplary division method. There may be other division methods, which are not limited in this application.

[0439] Pressure sensor 180A is used to sense pressure signals and convert them into electrical signals. In some embodiments, pressure sensor 180A can be located on display screen 194. When a touch operation is applied to display screen 194, electronic device 100 detects the intensity of the touch operation using pressure sensor 180A. Electronic device 100 can also calculate the location of the touch based on the detection signal from pressure sensor 180A. In some embodiments, touch operations applied to the same touch location but with different intensities can correspond to different operation instructions.

[0440] The gyro sensor 180B can be used 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., x, y, and z axes) can be determined by the gyro sensor 180B. The gyro sensor 180B can also be used for image stabilization.

[0441] The air pressure sensor 180C is used to measure air pressure. In some embodiments, the electronic device 100 calculates the altitude using the air pressure value measured by the air pressure sensor 180C to assist in positioning and navigation.

[0442] The magnetic sensor 180D includes a Hall sensor, and the electronic device 100 can use the magnetic sensor 180D to detect the opening and closing of the flip leather case.

[0443] Accelerometer 180E can detect the magnitude of acceleration of electronic device 100 in all directions (generally three axes). When electronic device 100 is stationary, it can detect the magnitude and direction of gravity. It can also be used to identify the posture of electronic device 100, enabling applications such as switching between landscape and portrait modes and pedometers.

[0444] The distance sensor 180F is used to measure distance. The electronic device 100 can measure distance by infrared or laser.

[0445] The proximity light sensor 180G can include, for example, a light-emitting diode (LED) and a light detector, such as a photodiode. The light-emitting diode can be an infrared light-emitting diode. The electronic device 100 emits infrared light outwardly through the light-emitting diode. The electronic device 100 detects infrared reflected light from a nearby object using the photodiode. When sufficient reflected light is detected, it can be determined that there is an object near the electronic device 100. When insufficient reflected light is detected, the electronic device 100 can determine that there is no object near the electronic device 100.

[0446] The ambient light sensor 180L is used to sense ambient light brightness.

[0447] The fingerprint sensor 180H is used to acquire a fingerprint.

[0448] The temperature sensor 180J is used to detect temperature.

[0449] The touch sensor 180K, also referred to as a "touch panel". The touch sensor 180K can be disposed on the display screen 194, and the touch sensor 180K and the display screen 194 together form a touch screen, also referred to as a "touch screen". The touch sensor 180K is used to detect a touch operation acting on or near it. The touch sensor can pass the detected touch operation to the application processor to determine the touch event type. Visual output related to the touch operation can be provided through the display screen 194. In other embodiments, the touch sensor 180K can also be disposed on the surface of the electronic device 100, which is different from the position where the display screen 194 is located.

[0450] The bone conduction sensor 180M can acquire a vibration signal.

[0451] The key 190 includes a power-on key, a volume key, and the like. The key 190 can be a mechanical key. It can also be a touch key. The electronic device 100 can receive a key input and generate a key signal input related to user settings and function control of the electronic device 100.

[0452] The motor 191 can generate a vibration prompt. The motor 191 can be used for incoming call vibration prompts and also for touch vibration feedback. For example, touch operations acting on different applications (such as taking pictures, playing audio, etc.) can correspond to different vibration feedback effects. Touch operations acting on different regions of the display screen 194 can also correspond to different vibration feedback effects. Different application scenarios (such as time reminders, received messages, alarms, games, etc.) can also correspond to different vibration feedback effects. The touch vibration feedback effect can also be customizable.

[0453] The indicator 192 can be an indicator light, which can be used to indicate charging status, power changes, and also to indicate messages, missed calls, notifications, and the like.

[0454] The SIM card interface 195 is used to connect a SIM card. A SIM card can be connected to and disconnected from the electronic device 100 by inserting or removing it from the SIM card interface 195. The electronic device 100 may support one or N SIM card interfaces, where N is a positive integer greater than 1. The electronic device 100 interacts with the network through the SIM card to implement functions such as calls and data communications. In some embodiments, the electronic device 100 uses an eSIM, or embedded SIM card. The eSIM card can be embedded in the electronic device 100 and cannot be separated from the electronic device 100.

[0455] In the embodiment of the present application, the processor 110 can process the first operation and the second operation of the user to determine the length of the sliding box, the position, transparency and size of the delete icon and other function icons. Then, the display screen 194 can display the sliding box and icons based on the calculation results of the processor 110.

[0456] As used in the above embodiments, the term “when…” may be interpreted to mean “if…” or “after…” or “in response to determining…” or “in response to detecting…”, depending on the context. Similarly, the phrases “upon determining…” or “if (stated condition or event) is detected” may be interpreted to mean “if determining…” or “in response to determining…” or “upon detecting (stated condition or event)” or “in response to detecting (stated condition or event)”, depending on the context.

[0457] In the above embodiments, all or part of the embodiments can be implemented by software, hardware, firmware, or any combination thereof. When implemented using software, all or part of the embodiments can be implemented in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiments of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via a wired (e.g., coaxial cable, optical fiber, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) method. The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server or data center that includes one or more available media. The available medium can be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state drive).

[0458] Those skilled in the art will appreciate that all or part of the process steps in the above-described method embodiments can be implemented by a computer program that instructs the relevant hardware to perform the process steps. The program can be stored in a computer-readable storage medium, and when executed, the program can include the process steps in the above-described method embodiments. The aforementioned storage medium includes various media capable of storing program code, such as ROM or random access memory (RAM), magnetic disks, or optical disks.

Claims

1. A method for deleting a list message, characterized in that: The method is applied to an electronic device, and includes: Display a first list, wherein the first list includes first list messages, and the first list messages are located in a list box; In response to a first sliding operation on the first list message, displaying a sliding box corresponding to the first list message and hiding a portion of the list box, wherein the sliding box overlaps with adjacent boundaries of the list box; the sliding box includes a delete icon, the delete icon includes a first delete graphic and a second delete graphic, and the angle between the first delete graphic and the second delete graphic is 0; In response to a second sliding operation on the first list message, elastically stretching the length of the sliding frame; When the length of the sliding box does not reach the first threshold, the position of the deletion icon moves as the length of the sliding box increases; as the length of the sliding box increases, the angle between the first deletion graphic and the second deletion graphic increases as the first deletion graphic rotates around the rotation axis, and the second deletion graphic remains stationary; When the length of the sliding frame reaches or exceeds the first threshold, the position of the deletion icon moves toward the center of the sliding frame, the size of the deletion icon increases, and the angle between the first deletion graphic and the second deletion graphic remains unchanged; When the second sliding operation ends, the size of the delete icon remains unchanged, the length of the sliding frame increases to the screen width, the position of the delete icon is at the center of the sliding frame, and the transparency of the delete icon becomes maximum, then the first list message in the first list is deleted; the end of the second sliding operation refers to the situation where the user releases the hand and the length of the sliding frame reaches or exceeds the first threshold.

2. The method according to claim 1, characterized in that The sliding frame also includes other function icons, When the length of the sliding box does not reach the first threshold, the distance between the delete icon and the other function icons increases as the length of the sliding box increases; When the length of the sliding box reaches or exceeds the first threshold, the transparency of the other function icons increases.

3. The method according to claim 2, characterized in that When the second sliding operation is not completed and the length of the sliding box does not reach the first threshold, the distance between the deletion icon and the other function icons decreases as the length of the sliding box decreases, and the angle between the first deletion graphic and the second deletion graphic decreases as the length of the sliding box decreases.

4. The method according to claim 2 or 3, characterized in that When the second sliding operation is completed and the length of the sliding frame does not reach the first threshold, the length of the sliding frame rebounds and becomes smaller, the distance between the delete icon and the other function icons rebounds and becomes smaller, and the angle between the first deletion graphic and the second deletion graphic rebounds and shrinks; The length of the sliding box after rebound is the initial length, the distance between the deletion icon and the other function icons after rebound is the initial distance, and the angle between the first deletion graphic and the second deletion graphic after rebound is 0.

5. The method according to claim 2 or 3, characterized in that The length of the sliding frame is elastically stretched, specifically comprising: Starting at time T1, the second sliding operation is received, and the initial length of the sliding frame is H(T1); if the second sliding operation is not completed, the length of the sliding frame at the current time Tx is H(Tx); from time T1 to time Tx, the elastically stretched length of the sliding frame is H(Tx)-H(T1): H(Tx)-H(T1)=rate·(P(Tx)-P(T1)) Wherein, the T1 moment is the start moment of the second sliding operation, the P(T1) is the position of the user touch point at the T1 moment; the Tx moment is any moment in the current second sliding operation, the P(Tx) is the position of the user touch point at the current moment Tx; the rate is the stretching rate, rate = e -α·m / L(A) , α is the damping coefficient, m is the length of the sliding frame stretched in the previous frame, and L(A) is the screen width.

6. The method according to claim 5, characterized in that The distance between the delete icon and the other function icons increases as the length of the sliding frame increases, specifically including: At the time T1, the position of the delete icon is D(T1); when the length of the sliding box does not reach the first threshold at the current time T2, the position of the delete icon is D(T2); from the time T1 to the time T2, the length of the position change of the delete icon D is D(T2)-D(T1): D(T2)-D(T1)=rate·(P(T2)–P(T1))·0.1·(Index(D)+1) At the time T1, the position of the other function icon is A(T1); at the time T2, the position of the other function icon is A(T2); from the time T1 to the time T2, the length of the position change of the other function icon A is A(T2)-A(T1): A(T2)-A(T1)=rate·(P(T2)–P(T1))·0.1·(Index(A)+1) Wherein, the time T2 is the time when the length of the sliding box in the current second sliding operation does not reach the first threshold, Index() represents the position index of the corresponding icon from right to left, Index(D) represents the position index of the delete icon, and Index(A) represents the position index of the other function icon; As the length of the sliding frame increases, the angle between the first deletion graphic and the second deletion graphic increases as the first deletion graphic rotates around the rotation axis, specifically including: At the time T1, the angle between the first deletion graphic and the second deletion graphic is 0, and at the time T2, the angle between the first deletion graphic and the second deletion graphic is Open (D): Open(D)=MaxAngle·rate·(P(T2)-P(T1)) / Thr The MaxAngle is the maximum angle between the first deletion graphic and the second deletion graphic; and the Thr is the length of the sliding box changed from the initial length to the first threshold.

7. The method according to claim 5, characterized in that The transparency of the other function icons is increased, specifically including: At time T3, the length of the sliding box just reaches the first threshold; at the current time T4, when the length of the sliding box reaches or exceeds the first threshold, the transparency and translucency Alpha (A) of the other function icons meet the coordinates: ((T4-T3) / duration_A,1-Alpha(A)) Wherein, the coordinate ((T4-T3) / duration_A, 1-Alpha(A)) satisfies the Bezier curve, and the duration_A is the execution duration of the transparency change animation; The position of the delete icon is moved toward the center of the sliding frame, specifically including: At the time T3, the position of the delete icon is D(T3); at the time T4, the position of the delete icon D(T4) satisfies the coordinates: ((T4-T3) / duration_X,D(T4) / (H(T4) / 2-D(T3))) Wherein, the coordinates ((T4-T3) / duration_X, D(T4) / (H(T4) / 2-D(T3))) satisfy the Bezier curve, the duration_X is the execution duration of the dynamic effect of the position change, and the H(T4) is the length of the sliding frame at the time T4; The size of the delete icon becomes larger, specifically including: At the time T3, the original size of the delete icon is S; at the time T4, the scale size S(T4) of the delete icon satisfies the coordinates: ((T4-T3) / duration_S,S(T4) / S-1) The coordinates ((T4-T3) / duration_S, S(T4) / S-1) satisfy the Bezier curve, and the duration_S is the execution duration of the animation effect of the scale change of the deletion icon.

8. The method according to claim 5, characterized in that The transparency of the other function icons is increased, specifically including: At time T3, the length of the sliding box just reaches the first threshold; at the current time T4, when the length of the sliding box reaches or exceeds the first threshold, the transparency and translucency Alpha (A) of the other function icons are: Alpha(A)=1-(T4-T3) / duration_A or Alpha(A)=1-((T4-T3) / duration_A) 2 Wherein, duration_A is the duration of the transparency change animation; The position of the delete icon is moved toward the center of the sliding frame, specifically including: At the time T3, the position of the delete icon is D(T3); at the time T4, the position of the delete icon is D(T4): D(T4)=(H(T4) / 2-D(T3))·(T4-T3) / duration_X Wherein, duration_X is the execution duration of the position change animation, and H(T4) is the length of the sliding frame at the time T4; The size of the delete icon becomes larger, specifically including: at the time T3, the original size of the delete icon is S; at the time T4, the size of the delete icon is S(T4): S(T4)=(S_Max-S)·(T4-T3) / duration_S The duration_S is the duration of the animation effect of the delete icon scale change, and the S_Max is the maximum size of the delete icon.

9. The method according to claim 4, characterized in that The length of the sliding frame rebounds to become smaller, specifically including: At time T1 when the second sliding operation starts, the initial length of the sliding frame is H(T1); at time T2 when the length of the sliding frame does not reach the first threshold, the second sliding operation is ended; from the end of the second sliding operation to the current time T2″, a time period t=T2″-T2 has passed; at the current time T2″, the length of the sliding frame is H(T2″); from the time T1 to the current time T2″, the stretched length of the sliding frame is x=H(T2″)-H(T1); the stretched length satisfies the differential equation with t: Among them, β represents the spring damping, θ represents the stiffness of the spring, and β 2 =θ 2 ; The distance between the delete icon and the other function icon rebounds and becomes smaller, specifically including: At the time T1, the position of the delete icon is D(T1); at the current time T2″, the position of the delete icon is D(T2″); from the time T1 to the current time T2″, the stretching length of the delete icon D position D(T2″)-D(T1) is: D(T2″)-D(T1)=x(T2″)·0.1·(Index(D)+1) At the time T1, the position of the other function icon is A(T1); at the current time T2″, the position of the other function icon is A(T2″); from the time T1 to the current time T2″, the stretching length of the other function icon position A(T2″)-A(T1) is: A(T2″)-A(T1)=x(T2″)·0.1·(Index(A)+1) Wherein, x(T2″) is x at time T2″; Index() represents the position index of the corresponding icon from right to left, Index(D) represents the position index of the delete icon, and Index(A) represents the position index of the other function icons; The angle between the first deleted pattern and the second deleted pattern rebounds and shrinks, specifically comprising: At the current time T2″, the angle Open(D) between the first deletion graphic and the second deletion graphic is: Open(D)=MaxAngle·x(T2″) / Thr The MaxAngle is the maximum angle between the first deletion graphic and the second deletion graphic, and the Thr is the length of the sliding box from the time T1 to the first threshold.

10. An electronic device, characterized in that: include: A touch screen, one or more processors and one or more memories; the one or more processors are coupled to the touch screen and the one or more memories, the one or more memories are used to store computer program code, the computer program code includes computer instructions, and when the one or more processors execute the computer instructions, the electronic device performs the method according to any one of claims 1 to 9.

11. A computer-readable storage medium comprising instructions, characterized in that: When the instructions are executed on an electronic device, the electronic device is caused to execute the method according to any one of claims 1 to 9.

12. A computer program product, characterized in that When the computer program product is run on a computer, the computer is caused to perform the method according to any one of claims 1 to 9.

Images