Dynamic effect display method and device

Abstract

An embodiment of the present application provides a dynamic effect display method and device, which relate to the technical field of terminals. The method includes: in response to a first operation, when the terminal device is in the locked screen state, the terminal device generates a first dynamic effect in a first interface, the first interface corresponds to a first view tree, in the first view tree, the parent views of at least one first element are all the first view, and the parent view of the first view is the second view; or, in response to the first operation, when the terminal device is in the unlocked state, the terminal device generates a second dynamic effect in a second interface, the second interface corresponds to a second view tree, in the second view tree, the parent views of at least one second element are all the third view, and the parent view of the third view is the fourth view, wherein the name of the first view is the same as the name of the third view, and the name of the second view is the same as the name of the fourth view, so that the terminal device can implement two dynamic effects under one layout structure, enriching the user experience.

Description

Technical Field

[0001] This application relates to the technical field of terminals, and in particular, to a dynamic effect display method and device. Background Art

[0002] With the popularization and development of the Internet, people's functional requirements for terminal devices have become increasingly diverse. For example, in order to prompt the user to view the message content received by the terminal device, the terminal device can display the received message in the lock screen interface or the downward sliding notification bar.

[0003] Generally, when the terminal device displays the message content in the lock screen interface, when the terminal device receives a sliding operation of the user on any message, the terminal device can unlock the terminal device; or, when the terminal device displays any message in the notification bar, when the terminal device receives a sliding operation of the user on any message, the terminal device can translate the message in the notification bar according to the sliding direction.

[0004] However, in response to the trigger operation of the user on the interface where the lock screen or the notification bar is located, the above interface display method is relatively single, resulting in an insufficiently rich user experience. Summary of the Invention

[0005] Embodiments of this application provide a dynamic effect display method and device, enabling the terminal device to implement two dynamic effects under the same layout architecture, that is, display a fade-in dynamic effect when the terminal device is in the locked state, and display a chain dynamic effect when the terminal device is in the unlocked state, enriching the user's usage experience.

[0006] In a first aspect, embodiments of this application provide a dynamic effect display method, the method including: the terminal device receives a first operation; in response to the first operation, when the terminal device is in the locked state, the terminal device generates a first dynamic effect in a first interface, the first interface includes at least one first element, the first interface corresponds to a first view tree, in the first view tree, the parent view of at least one first element is the first view, the parent view of the first view is the second view, in the first dynamic effect, the terminal device performs a reduction and a downward translation on at least one first element; or, in response to the first operation, when the terminal device is in the unlocked state, the terminal device generates a second dynamic effect in a second interface, the second interface includes at least one second element, the second interface corresponds to a second view tree, in the second view tree, the parent view of at least one second element is the third view, the parent view of the third view is the fourth view, in the second dynamic effect, the terminal device performs an upward or downward translation on at least one first element, and the size of at least one second element remains unchanged, where the name of the first view is the same as the name of the third view, and the name of the second view is the same as the name of the fourth view.

[0007] Among them, the first dynamic effect can be the gradual change dynamic effect described in the embodiments of the present application, and the second effect can be the chain dynamic effect described in the embodiments of the present application.

[0008] In this way, since the name of the first view is the same as that of the third view, and the name of the second view is the same as that of the fourth view, the layout structure composed of at least one first element is consistent with the layout structure composed of at least one second element. Furthermore, when the terminal device receives a first operation on the first interface in the locked screen state, the terminal device can display the first dynamic effect on the locked screen interface, or when the terminal device receives a first operation on the first interface in the unlocked state, the terminal device can also display the second dynamic effect in the pull-down notification interface after unlocking, so that the terminal device can implement two dynamic effects under the same layout structure, enriching the user experience.

[0009] In a possible implementation manner, the first view tree is mounted under the first window, the second view tree is mounted under the second window, and the name of the first window is the same as that of the second window.

[0010] Among them, since there are different views in the first view tree or the second view tree, the first view tree and the second view tree can be different, but both view trees can be mounted under the same window, and the name of the same window can be NotificationShade described in the embodiments of the present application.

[0011] In this way, when the name of the first view is the same as that of the third view, the name of the second view is the same as that of the fourth view, and the first view tree and the second view tree are mounted under the same window, the terminal device can consider that the first view tree and the second view tree belong to the same layout structure, further ensuring the accurate recognition of the layout structure.

[0012] In a possible implementation manner, the duration of the first dynamic effect includes: a first moment and a second moment, the second moment is after the first moment, and at least one of the first elements includes: a third element, and the third element satisfies one or more of the following: the display ratio of the third element at the first moment is greater than the display ratio of the third element at the second moment, the transparency of the third element at the first moment is greater than the transparency of the third element at the second moment, or the first distance is less than the second distance, where the first distance is the distance between the third element and a first preset position at the first moment, the second distance is the distance between the third element and the first preset position at the second moment, and the first preset position is the top position of the display screen or the top position of the first view.

[0013] In this way, when the message is collapsed, the third element can present an animation effect in which the element gradually shrinks, the transparency gradually decreases, and it gradually moves downward by setting the transparency, display ratio, and the distance from the first preset position, bringing a better visual experience to the user.

[0014] In a possible implementation, at least one first element includes: a fourth element, the third element is located above the fourth element, and at the first moment or the second moment, the transparency of the third element is greater than the transparency of the fourth element, and / or the display ratio of the third element is greater than the display ratio of the fourth element.

[0015] In this way, even when there are multiple elements on the lock screen interface, these multiple elements can be collapsed respectively by setting the transparency, display ratio, and the distance from the first preset position, and the transparency and display ratio of the multiple elements at the same moment can be different, enabling the user to clearly perceive the changes of each element among the multiple elements when the message is collapsed.

[0016] In a possible implementation, the terminal device performs shrinking and downward translation on at least one first element, including: after a first time threshold for performing shrinking and downward translation on the fourth element, the terminal device performs shrinking and downward translation on the third element.

[0017] In this way, through the setting of the first time threshold among the elements, multiple elements can collapse the message in sequence, presenting an animation effect of the message gradually collapsing, bringing a better visual experience to the user.

[0018] In a possible implementation, the first interface includes a message list, the message list includes a third element and a fourth element, the third element is the first element at the top of the message list, and the method further includes: after a second time threshold for performing shrinking and downward translation on the third element, the terminal device displays a first control, the first control is a message prompt control, and the second time threshold is greater than the first time threshold.

[0019] In this way, the terminal device can display the message prompt control during the process of collapsing the message, enabling the interface to present an effect that the message is collapsed into the message prompt control in sequence.

[0020] In a possible implementation, after the terminal device generates a first animation effect in the first interface, the method further includes: the terminal device receives a second operation on the first interface; in response to the second operation, when the terminal device is in the locked screen state, the terminal device generates a third animation effect, and in the third animation effect, the terminal device performs enlarging and upward translation on at least one first element.

[0021] In this way, after the message is collapsed, the terminal device can also perform an animation effect of expanding the message based on the second operation, facilitating the user to view the specific content in the message.

[0022] In a possible implementation, the duration of the third animation effect includes: a third moment and a fourth moment, the fourth moment being after the third moment. At least one of the first elements includes: a fifth element, and the fifth element satisfies one or more of the following: the display ratio of the fifth element at the third moment is less than the display ratio of the fifth element at the fourth moment, the transparency of the fifth element at the third moment is less than the transparency of the fifth element at the fourth moment, or a first distance is greater than a second distance, where the first distance is the distance between the fifth element and a first preset position at the third moment, and the second distance is the distance between the fifth element and the first preset position at the fourth moment.

[0023] In this way, the fifth element can present an animation effect of gradually increasing in size, gradually increasing in transparency, and gradually moving upward by setting the transparency, display ratio, and the distance from the first preset position when the message is expanded, bringing a good visual experience to the user.

[0024] In a possible implementation, at least one of the first elements includes: a sixth element, the fifth element being located above the sixth element. At the third moment or the fourth moment, the transparency of the fifth element is greater than the transparency of the sixth element, and / or the display ratio of the fifth element is greater than the display ratio of the sixth element.

[0025] In this way, even when the collapsed message includes multiple elements, the multiple elements can be expanded respectively by setting the transparency, display ratio, and the distance from the first preset position, and the transparency and display ratio of the multiple elements at the same moment can be different, enabling the user to clearly perceive the changes of each element among the multiple elements when the message is expanded.

[0026] In a possible implementation, the terminal device performs magnification and upward translation on at least one of the first elements, including: after a first time threshold for performing magnification and upward translation on the fifth element, the terminal device performs magnification and upward translation on the sixth element.

[0027] In this way, through the setting of the first time threshold between elements, multiple elements can be expanded in sequence for the message, presenting an animation effect of the message gradually expanding, bringing a good visual experience to the user.

[0028] In a possible implementation, the first interface further includes a first control, the first control is a message prompt control, the first interface includes a message list, the message list includes a fourth element and a fifth element, the fifth element is the first element at the bottom of the message list, and the method further includes: after a third time threshold for canceling the display of the first control, the terminal device performs magnification and upward translation on the fifth element, and the third time threshold is greater than the first time threshold.

[0029] In this way, the terminal device can display the message prompt control before the message is expanded, so that the interface can present the specific content in the message to the greatest extent, and reduce the occlusion of the interface by the display of the message prompt control.

[0030] In a possible implementation, the second operation is a trigger operation for the first control.

[0031] In this way, when the terminal device receives the release operation in the trigger operation for the first control by the user, a first dynamic effect can be generated. It can be understood that when the terminal device receives the press operation or the slide operation in the trigger operation for the first control by the user, the terminal device may not execute the processing logic of the dynamic effect.

[0032] In a possible implementation, the first operation is a trigger operation for the blank position in the first interface.

[0033] In this way, since the first operation can be a trigger operation for the blank position in the first interface, the setting of the first operation is more convenient for the user to fold up the message at any time, so that the interface can present the wallpaper content to the greatest extent.

[0034] In a possible implementation, in response to a first operation, when the terminal device is in the locked screen state, the terminal device generates a first dynamic effect in a first interface, including: in response to the first operation, when the terminal device is in the locked screen state, the terminal device determines that at least one first element moves from a first position to a second position; the terminal device obtains a first parameter of at least one first element in the first position and a second parameter of at least one first element in the second position, where the first parameter includes one or more of the following: the position of each element in the at least one first element in the first position, the display ratio of each element in the at least one first element in the first position, or the transparency of each element in the at least one first element in the first position, and the second parameter includes one or more of the following: the position of each element in the at least one first element in the second position, the display ratio of each element in the at least one first element in the second position, or the transparency of each element in the at least one first element in the second position; the terminal device obtains a third parameter according to the first parameter, the second parameter, and at least one preset dynamic effect curve, where the third parameter includes one or more of the following: the position of each element in the at least one first element within a first time range, the transparency of each element in the at least one first element within the first time range, or the display ratio of each element in the at least one first element within the first time range, and the first time range is the time range for at least one first element to move from the first position to the second position; the terminal device generates the first dynamic effect by using the third parameter.

[0035] In this way, the terminal device can implement the dynamic effect drawing for any element according to at least one preset dynamic effect curve, so that multiple elements in the interface can present a gradual dynamic effect of shrinking or enlarging in sequence.

[0036] In a possible implementation, the duration of the second dynamic effect includes: a fifth moment and a sixth moment, the sixth moment is after the fifth moment, and at least one second element includes: a seventh element, an eighth element, and a ninth element, the seventh element is above the eighth element, and the eighth element is above the ninth element. At the fifth moment, the interval between the seventh element and the eighth element is a first value, and the interval between the eighth element and the ninth element is a second value. At the sixth moment, the interval between the seventh element and the eighth element is a third value, and the interval between the eighth element and the ninth element is a fourth value. The first value is different from the third value, and the second value is different from the fourth value.

[0037] In this way, the terminal device can make multiple elements present a chained dynamic effect by the change of the gap between adjacent elements at two moments.

[0038] In a possible implementation, the first operation is an operation on the eighth element. In the second animation effect, the stiffness coefficient corresponding to the eighth element is greater than that corresponding to the ninth element, the damping coefficient corresponding to the eighth element is greater than that corresponding to the ninth element, the stiffness coefficient corresponding to the eighth element is greater than that corresponding to the seventh element, the damping coefficient corresponding to the eighth element is greater than that corresponding to the seventh element, the time when the eighth element moves to the fourth position is earlier than the time when the ninth element moves to the fourth position, and the time when the eighth element moves to the fourth position is earlier than the time when the seventh element moves to the fourth position.

[0039] Among them, the eighth element may be the control node described in the embodiments of the present application.

[0040] In this way, the terminal device can set different stiffness coefficients and different damping coefficients for different elements, so that when the terminal device detects the first operation of the user, spring animation effects with different strengths can be presented for each node, and a chain animation effect can be presented longitudinally with the control node as the center and other nodes.

[0041] In a possible implementation, when the first operation is an upward sliding operation on the eighth element and the first value is the same as the second value, the third value is less than the first value, and the fourth value is greater than the second value; or when the first operation is a downward sliding operation on the eighth element and the first value is the same as the second value, the third value is greater than the first value, and the fourth value is less than the second value.

[0042] In this way, regardless of whether the first operation is an upward sliding operation or a downward sliding operation, the terminal device can move the element according to the direction of the sliding operation, and present a chain animation effect of sequential movement of the nodes through the change of the gap between adjacent elements.

[0043] In a possible implementation, the first operation is a sliding operation on the eighth element among at least one second element. In response to the first operation, when the terminal device is in the unlocked state, the terminal device generates a second animation effect in the second interface, including: in response to the first operation, when the terminal device is in the unlocked state, the terminal device determines that at least one second element moves from the third position to the fourth position; the terminal device determines the position of each element in at least one second element in the second time range according to the fourth parameter, and the fourth parameter includes: the position of each element in at least one second element in the third position, the position of each element in at least one second element in the fourth position, the time of at least one second element in the third position, the sliding speed of each element in at least one second element, the stiffness coefficient of each element in at least one second element, and the damping coefficient of each element in at least one second element; the terminal device generates a second animation effect by using the position of each element in at least one second element in the second time range.

[0044] In this way, the terminal device can make each node present different moving effects in the second special effect by setting the stiffness coefficients corresponding to different nodes and the damping coefficients corresponding to different nodes, and the movements of all nodes together constitute a chain special effect.

[0045] In a possible implementation, after the terminal device generates the second special effect in the second interface, the method further includes: the terminal device receives a third operation on the second interface, and the third operation is a release operation on the eighth element; in response to the third operation, when the terminal device is in an unlocked state, the terminal device generates a fourth special effect. In the fourth special effect, the terminal device performs an upward or downward translation on at least one first element, and the sizes of at least one second element remain unchanged.

[0046] In this way, when the terminal device responds to the operation of the user releasing the eighth element, the interface can also present a chain special effect through the movement of the released nodes.

[0047] In a possible implementation, in response to the third operation, when the terminal device is in an unlocked state, the terminal device generates a fourth special effect, including: in response to the third operation, when the terminal device is in an unlocked state, the terminal device determines that at least one second element moves from the fourth position to the fifth position; when the terminal device determines that the interface scroll value corresponding to the fifth position is greater than 0 and less than the maximum scroll value, the terminal device determines the release speed; wherein, the release speed is the speed generated when the eighth element is released, the interface scroll value is the distance that at least one second element moves compared to the first position, and the maximum scroll value is determined based on the height of each element in at least one second element, the gap between adjacent elements, and the height of the third view; the terminal device determines the position of each element in at least one second element within the third time range according to the fifth parameter, and the fifth parameter includes: the position of each element in at least one second element in the fourth position, the position of each element in at least one second element in the fifth position, the time of at least one second element in the fourth position, the release speed of each element in at least one second element, the stiffness coefficient of each element in at least one second element, and the damping coefficient of each element in at least one second element; the terminal device generates the fourth special effect by using the position of each element in at least one second element within the third time range.

[0048] In this way, since the interface scroll value of the terminal device at the fifth position is greater than 0 and less than the maximum scroll value, and at this time the terminal device is not in a rebound state, the terminal device can calculate the release speed generated when the eighth element is released, and further determine the position of each element in at least one second element at the fifth position, so that the interface can present a chain special effect in response to the release speed.

[0049] In a possible implementation, in response to a third operation, when the terminal device is in an unlocked state, the terminal device generates a fourth animation effect, including: in response to the third operation, when the terminal device is in an unlocked state, the terminal device determines that at least one second element moves from a fourth position to a fifth position; when the terminal device determines that the interface scroll value at the fifth position is less than 0 or the interface scroll value is greater than the maximum scroll value, the terminal device determines the position of each element in at least one second element within a third time range according to a sixth parameter, where the sixth parameter includes: the position of each element in at least one second element at the fourth position, the position of each element in at least one second element at the fifth position, the time of at least one second element at the fourth position, the stiffness coefficient of each element in at least one second element, and the damping coefficient of each element in at least one second element, the interface scroll value is the distance that at least one second element moves relative to the first position, and the maximum scroll value is determined based on the height of each element in at least one second element, the gap between adjacent elements, and the height of the third view; the terminal device generates a fourth animation effect using the position of each element in at least one second element within the third time range.

[0050] In this way, when the terminal device determines that the interface scroll value is less than 0 or the interface scroll value is greater than the maximum scroll value, the terminal device is in a rebound state. At this time, the terminal device can overslide upward or downward. In response to the user's release operation, the terminal device can also present a chain animation effect through the calculation of the positions of each element in the upward overslide or downward overslide state.

[0051] Second aspect, an embodiment of the present application provides an animation display device. The device includes a receiving unit and a processing unit. The receiving unit is configured to receive a first operation. In response to the first operation, when the terminal device is in the locked screen state, the processing unit is configured to generate a first animation. The first interface includes at least one first element. The first interface corresponds to a first view tree. In the first view tree, the parent views of at least one first element are all the first view. The parent view of the first view is the second view. In the first animation, the terminal device performs a reduction and a downward translation on at least one first element. Alternatively, in response to the first operation, when the terminal device is in the unlocked state, the processing unit is further configured to generate a second animation in a second interface. The second interface includes at least one second element. The second interface corresponds to a second view tree. In the second view tree, the parent views of at least one second element are all the third view. The parent view of the third view is the fourth view. In the second animation, the terminal device performs an upward or downward translation on at least one first element, and the sizes of at least one second element remain unchanged. Wherein, the name of the first view is the same as the name of the third view, and the name of the second view is the same as the name of the fourth view.

[0052] Third aspect, an embodiment of the present application provides a terminal device, including a processor and a memory. The memory is used to store code instructions. The processor is used to run the code instructions so that the terminal device executes the method described in the first aspect or any implementation manner of the first aspect.

[0053] Fourth aspect, an embodiment of the present application provides a computer-readable storage medium. The computer-readable storage medium stores instructions. When the instructions are executed, the computer is caused to execute the method described in the first aspect or any implementation manner of the first aspect.

[0054] Fifth aspect, a computer program product includes a computer program. When the computer program is run, the computer is caused to execute the method described in the first aspect or any implementation manner of the first aspect.

[0055] It should be understood that the second to fifth aspects of the present application correspond to the technical solutions of the first aspect of the present application. The beneficial effects obtained by each aspect and the corresponding feasible implementation manners are similar and will not be elaborated herein. Description of the Drawings

[0056] Figure 1 It is a schematic diagram of the principle of a stiffness coefficient provided by an embodiment of the present application;

[0057] Figure 2 It is a schematic diagram of a scenario provided by an embodiment of the present application;

[0058] Figure 3Another scenario schematic diagram provided by the embodiments of the present application;

[0059] Figure 4 A schematic diagram of the hardware structure of a terminal device provided by the embodiments of the present application;

[0060] Figure 5 A schematic diagram of the software structure of a terminal device provided by the embodiments of the present application;

[0061] Figure 6 A schematic diagram of an interface for dynamic effect display in an unlocked state provided by the embodiments of the present application;

[0062] Figure 7 A schematic diagram of an interface for dynamic effect display in a locked screen state provided by the embodiments of the present application;

[0063] Figure 8 A schematic diagram for explaining an interface and the corresponding view tree in an unlocking scenario provided by the embodiments of the present application;

[0064] Figure 9 A schematic diagram for explaining an interface and the corresponding view tree in a locked screen scenario provided by the embodiments of the present application;

[0065] Figure 10 A schematic diagram of a flowchart of a method for displaying a chain dynamic effect in a notification interface provided by the embodiments of the present application;

[0066] Figure 11 A schematic diagram for explaining a scrolling value provided by the embodiments of the present application;

[0067] Figure 12 A schematic diagram of a flowchart of a method for dynamic effect display after receiving a release event provided by the embodiments of the present application;

[0068] Figure 13 A schematic diagram of a flowchart of another method for dynamic effect display after receiving a release event provided by the embodiments of the present application;

[0069] Figure 14 A schematic diagram of an interface for over-sliding at the top or bottom provided by the embodiments of the present application;

[0070] Figure 15 A schematic diagram of a flowchart of a method for displaying a gradual change dynamic effect in a locked screen interface provided by the embodiments of the present application;

[0071] Figure 16 A schematic diagram for explaining message time delay provided by the embodiments of the present application;

[0072] Figure 17 A schematic diagram of a flowchart of a method for dynamic effect display provided by the embodiments of the present application;

[0073] Figure 18 Schematic structural diagram of a dynamic effect display device provided by an embodiment of the present application;

[0074] Figure 19 Schematic hardware structure diagram of another terminal device provided by an embodiment of the present application. Specific implementation manners

[0075] For the convenience of clearly describing the technical solutions of the embodiments of the present application, the terms involved in the solutions are explained in the embodiments of the present application:

[0076] 1. Spring physical dynamic effect

[0077] The spring physical dynamic effect (or called spring dynamic effect) can simulate the spring deformation effect. The spring elastic force has two attributes: damping coefficient and stiffness coefficient. In the animation displayed based on the spring characteristics, the displacement and velocity corresponding to each frame are calculated according to the spring elastic force applied to each frame (through time and displacement).

[0078] 2. Chain

[0079] The chain can be understood as a dynamic effect formed by combining several independent spring dynamic effects together.

[0080] For example, each element (or called message, notification, item, or card, etc.) in the list is a node. When dragging one of the nodes, this node moves first, and then is gradually transmitted to the adjacent nodes one by one, forming a chain effect similar to several springs connected together.

[0081] 3. Rigidity coefficient and damping coefficient

[0082] The rigidity coefficient, or also called stiffness, can refer to the magnitude of the force required to apply per unit deformation of the spring.

[0083] Exemplarily, Figure 1 Schematic diagram of the principle of a rigidity coefficient provided by an embodiment of the present application. Figure 1 In [diagram], a can be the schematic diagram of the process of dragging the little person below the spring when the rigidity coefficient is large, so that the spring deforms and then recovers. Figure 1 In [diagram], b can be the schematic diagram of the process of dragging the little person below the spring when the rigidity coefficient is small, so that the spring deforms and then recovers.

[0084] As Figure 1 shown in a of [diagram], the spring can achieve the spring dynamic effect during the process from moment A to moment F. As Figure 1 shown in b of [diagram], the spring can achieve the spring dynamic effect during the process from moment A to moment H. It can be understood that the greater the rigidity coefficient, the less time the spring takes to return from the maximum amplitude to the equilibrium state.

[0085] The damping coefficient can refer to the damping force of a spring during vibration. The damping force can also be understood as frictional force, fluid resistance, etc. The larger the damping coefficient, the easier it is for the spring to return to the equilibrium position. The smaller the damping coefficient, the easier it is for the spring to "oscillate".

[0086] In the embodiments of the present application, terms such as "first" and "second" are used to distinguish identical or similar items with basically the same functions and effects. For example, the first value and the second value are only used to distinguish different values, and do not limit their order. Those skilled in the art can understand that terms such as "first" and "second" do not limit the quantity and execution order, and "first", "second", etc. do not necessarily limit to being different.

[0087] It should be noted that in the present application, words such as "exemplary" or "for example" are used to indicate examples, illustrations or explanations. Any embodiment or design solution described as "exemplary" or "for example" in the present application should not be construed as being more preferred or having more advantages than other embodiments or design solutions. Rather, the use of words such as "exemplary" or "for example" is intended to present relevant concepts in a specific manner.

[0088] In the present application, "at least one" means one or more, and "a plurality" means two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships can exist. For example, A and / or B can represent: A exists alone, A and B exist simultaneously, and B exists alone, where A and B can be singular or plural. The character " / " generally represents an "or" relationship between the associated objects before and after. "At least one (item)" or its similar expression refers to any combination of these items, including any combination of single item (item) or plural items (items). For example, at least one (item) of a, b, or c can represent: a, b, c, a and b, a and c, b and c, or a, b, and c, where a, b, and c can be single or multiple.

[0089] Exemplarily, Figure 2 is a schematic diagram of a scenario provided for the embodiments of the present application. In Figure 2 the corresponding embodiment, taking the terminal device as a mobile phone as an example for illustration, this example does not limit the embodiments of the present application.

[0090] When the terminal device receives multiple messages, it can display an interface as shown in Figure 2 a in the lock screen interface. The lock screen interface can include at least one notification message, such as a taxi ride message, a software update message, an information message, and a weather message, etc.

[0091] When the terminal device receives an operation by the user to unlock the terminal device, the terminal device may display the desktop or other application interfaces. Among them, when the operation to unlock the terminal device is a long - press operation on the fingerprint identifier in the interface shown in a of Figure 2 or a swipe operation on any element in the interface shown in a of Figure 2 , the terminal device may display the interface before the screen lock, such as the interface shown in b of Figure 2 . The interface shown in b of Figure 2 may be the desktop of the terminal device. In possible implementation manners, Figure 2 the interface shown in b of Figure 2 may also be other application interfaces, which are not limited in the embodiments of the present application. Or, when the operation to unlock the terminal device is a click operation on any element in the interface shown in a of

[0092] , the terminal device may unlock the terminal device and display the application interface corresponding to the element.

[0093] It can be understood that in the case where at least one element is displayed in the lock - screen interface, the terminal device may unlock the terminal device when receiving a trigger operation by the user on any element.

[0094] Exemplarily, Figure 3 is another schematic diagram of a scenario provided by the embodiments of the present application.

[0095] In one implementation, after the terminal device is unlocked, when the terminal device receives an operation by the user to open the notification bar, it may display the interface shown in a of Figure 3 . This interface may be referred to as a pull - down notification interface, and the operation to open the notification bar may be a swipe operation from top to bottom along the upper - left corner of the terminal device. Among them, Figure 3 the message content displayed in the interface shown in a of Figure 2 may be similar to that in the interface shown in a of Figure 3 , and

[0096] the interface shown in b of Figure 3 may contain more message content, such as network acceleration messages and other content. Figure 3 In the interface shown in a of Figure 3 , when the terminal device receives a trigger of the information message 301 by the user and a swipe - up operation without releasing the hand, the terminal device may move the elements in the interface shown in a of Figure 3During the process of the elements in the interface shown in a being translated upward as a whole, the intervals between adjacent elements remain unchanged, and the moving speeds of the elements are consistent. It can be understood that the elements are in a uniform motion state.

[0097] In another implementation, after the terminal device is unlocked, when the terminal device receives an operation from the user to open the control center, it can display an interface as shown in Figure 3 c in. The operation to open the control center can be a sliding operation from top to bottom along the upper right corner of the terminal device, etc. Figure 3 The interface shown in c can include multiple elements, such as multitasking card 1, music card, ringtone card, card for adjusting volume, card for adjusting screen brightness, including multitasking card 2, intelligent connection card, control card corresponding to device 1, and control card corresponding to device 2, etc. In the embodiments of the present application, Figure 3 the content displayed in the interface shown in c is not limited. Among them, multitasking card 1 is used to adjust the state of at least one device among WIFI, Bluetooth, SIM card, and personal hotspot.

[0098] Such as Figure 3 When the terminal device receives an operation from the user to trigger the intelligent connection card 302 and slide upward without releasing the hand in the interface shown in c, the terminal device can Figure 3 translate the elements in the interface shown in c upward as a whole, and then display an interface as shown in Figure 3 d in. During Figure 3 the process of the elements in the interface shown in c being translated upward as a whole, the intervals between adjacent elements remain unchanged, the moving speeds of the elements are consistent, and the elements are in a uniform motion state.

[0099] Compared with Figure 3 the interface shown in c, Figure 3 the interface shown in d can include a control card corresponding to device 3 and a control card corresponding to device 4, and cancel the display of function controls such as WIFI, Bluetooth, and SIM card in multitasking card 1.

[0100] It can be understood that when the terminal device receives a sliding operation from the user on any element in the interface shown in a (or Figure 3 c in Figure 3 ), the terminal device can translate the elements in the list uniformly according to the direction of the sliding operation.

[0101] The above Figure 2 The elements in the interface shown in a can form a layout structure. Figure 3 The elements in the interface shown in a can form a layout structure, and Figure 3The elements in the interface shown in c can form a layout structure, and the layout structures in the three interfaces are the same. For the specific description of the same layout structure, reference can be made to Figure 8 and Figure 9 the corresponding embodiments, which will not be elaborated here.

[0102] Combined with Figure 2 and Figure 3 the corresponding embodiments, when the terminal device is in the locked screen state, the movement of elements cannot be achieved based on the sliding operation of the user on any element in the locked screen interface; when the terminal device is in the unlocked state, the elements can be translated at a uniform speed based on the sliding operation of the user on any element in the control center or notification bar.

[0103] However, regardless of whether the terminal device is in the locked screen state or the unlocked state, the elements in the terminal device cannot present vivid effects based on the sliding operation of the user, resulting in an insufficiently rich user experience.

[0104] In view of this, the embodiments of the present application provide an animation display method, enabling the terminal device to implement two animations under one layout structure, that is, to display a fade-in animation when the terminal device is in the locked screen state and a chain animation when the terminal device is in the unlocked state, enriching the user experience.

[0105] It can be understood that the above terminal device can also be referred to as a terminal, (terminal), user equipment (UE), mobile station (MS), mobile terminal (MT), etc. The terminal device can be a mobile phone, smart TV, wearable device, tablet computer (Pad), computer with wireless transceiver function, virtual reality (VR) terminal device, augmented reality (AR) terminal device, wireless terminal in industrial control, wireless terminal in self-driving, wireless terminal in remote medical surgery, wireless terminal in smart grid, wireless terminal in transportation safety, wireless terminal in smart city, wireless terminal in smart home, and so on. The embodiments of the present application do not limit the specific technologies and specific device forms adopted by the terminal device.

[0106] Therefore, in order to better understand the embodiments of the present application, the structure of the terminal device in the embodiments of the present application will be introduced below. Exemplarily, Figure 4 It is a schematic diagram of the hardware structure of a terminal device provided by an embodiment of the present application.

[0107] The terminal device 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, antenna 1, antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone interface 170D, a sensor module 180, a button 190, an indicator 192, a camera 193, and a display screen 194, etc.

[0108] Among them, the sensor module 180 may include one or more of the following: a pressure sensor, a gyroscope sensor, a barometric pressure sensor, a magnetic sensor, an acceleration sensor, a distance sensor, a proximity light sensor, a fingerprint sensor, a temperature sensor, a touch sensor, an ambient light sensor, or a bone conduction sensor, etc. There is no specific limitation in the embodiments of the present application.

[0109] It can be understood that the structure schematically shown in the embodiments of the present application does not constitute a specific limitation on the terminal device. In other embodiments of the present application, the terminal device may include more or fewer components than shown in the figure, or combine certain components, or split certain components, or have different component arrangements. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0110] The processor 110 may include one or more processing units. Among them, different processing units may be independent devices or integrated in one or more processors. A memory may also be provided in the processor 110 for storing instructions and data.

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

[0112] The charging management module 140 is used to receive charging input from a charger. Among them, the charger may be a wireless charger or a wired charger. The power management module 141 is used to connect the charging management module 140 and the processor 110.

[0113] The wireless communication function of the terminal device can be implemented by Antenna 1, Antenna 2, Mobile Communication Module 150, Wireless Communication Module 160, Modulation and Demodulation Processor, Baseband Processor, etc.

[0114] Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals. The antennas in the terminal device can be used to cover single or multiple communication frequency bands. Different antennas can also be multiplexed to improve the utilization rate of the antennas.

[0115] Mobile Communication Module 150 can provide solutions for wireless communications such as 2G / 3G / 4G / 5G applied to the terminal device. Mobile Communication Module 150 can include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc. Mobile Communication Module 150 can receive electromagnetic waves by Antenna 1, perform filtering, amplification and other processing on the received electromagnetic waves, and transmit them to the Modulation and Demodulation Processor for demodulation.

[0116] Wireless Communication Module 160 can provide solutions for wireless communications such as wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), etc. applied to the terminal device.

[0117] The terminal device realizes the display function through the GPU, Display Screen 194, Application Processor, etc. The GPU is a microprocessor for image processing, connected to Display Screen 194 and the Application Processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering.

[0118] Display Screen 194 is used to display images, videos, etc. Display Screen 194 includes a display panel. In some embodiments, the terminal device may include 1 or N Display Screens 194, where N is a positive integer greater than 1.

[0119] The terminal device can realize the shooting function through the ISP, Camera 193, Video Codec, GPU, Display Screen 194, Application Processor, etc.

[0120] Camera 193 is used to capture static images or videos. In some embodiments, the terminal device may include 1 or N Cameras 193, where N is a positive integer greater than 1.

[0121] The external memory interface 120 can be used to connect to an external memory card, such as a Micro SD card, to implement the storage capacity expansion of the terminal device. The external memory card communicates with the processor 110 through the external memory interface 120 to implement the data storage function. For example, files such as music and videos are saved in the external memory card.

[0122] The internal memory 121 can be used to store computer-executable program codes, and the executable program codes include instructions. The internal memory 121 can include a program storage area and a data storage area.

[0123] The terminal device can implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor, etc. For example, music playback, recording, etc.

[0124] The audio module 170 is used to convert digital audio information into an analog audio signal for output, and is also used to convert analog audio input into a digital audio signal. The speaker 170A, also known as a "loudspeaker", is used to convert an audio electrical signal into a sound signal. The terminal device can listen to music or hands-free calls through the speaker 170A. The receiver 170B, also known as a "handset", is used to convert an audio electrical signal into a sound signal. When the terminal device answers a call or a voice message, the voice can be listened to by placing the receiver 170B close to the human ear. The headphone jack 170D is used to connect a wired headphone. The microphone 170C, also known as a "microphone" or "transmitter", is used to convert a sound signal into an electrical signal. In the embodiments of the present application, the terminal device can be provided with one microphone 170C.

[0125] The pressure sensor is used to sense pressure signals and can convert the pressure signals into electrical signals. In some embodiments, the pressure sensor can be disposed on the display screen 194. The gyroscope sensor can be used to determine the motion posture of the terminal device. The barometric pressure sensor is used to measure barometric pressure. The magnetic sensor includes a Hall sensor. The acceleration sensor can detect the magnitude of the acceleration of the terminal device in various directions (generally three axes). The distance sensor is used to measure distance. The proximity light sensor can include, for example, a light-emitting diode (LED) and a light detector, such as a photodiode. The ambient light sensor is used to sense the ambient light brightness. The fingerprint sensor is used to collect fingerprints. The temperature sensor is used to detect temperature. The touch sensor, also known as a "touch control device". The bone conduction sensor can acquire vibration signals.

[0126] The touch sensor can be disposed on the display screen 194, and the touch sensor and the display screen 194 form a touch screen, also known as a "touch control screen".

[0127] The button 190 includes a power-on button, volume buttons, etc. The button 190 can be a mechanical button or a touch button. The terminal device can receive button inputs and generate key signal inputs related to the user settings and function controls of the terminal device. The indicator 192 can be an indicator light, which can be used to indicate the charging state, power change, and can also be used to indicate messages, missed calls, notifications, etc.

[0128] The software system of the terminal device can adopt a layered architecture, event-driven architecture, microkernel architecture, microservices architecture, cloud architecture, etc., which will not be elaborated here.

[0129] Exemplarily, Figure 5 is a schematic diagram of the software structure of a terminal device provided by an embodiment of the present application. As Figure 5 shown, the layered architecture divides the software into several layers, and each layer has a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the android system is divided into multiple layers, from top to bottom are the application (APP) layer, application framework layer, hardware abstraction layer (HAL), and kernel layer, etc. The embodiments of the present application do not limit this.

[0130] The application layer can include a series of application packages. The application layer can include one or more of the following: Notification Stack Scroll Layout, Velocity Tracker, notification position calculation class, scrolling management class (Scoller), animation engine - physical animation node, fling animation interpolator, lock screen scene animation execution module, lock screen scene animation parameter calculation module, lock screen notification attribute calculation module, or message status detection module, etc. The embodiments of the present application do not limit this.

[0131] The notification layout module is used to monitor the touch events received by the terminal device and obtain the information corresponding to the touch events. Among them, the touch events can include one or more of the following: action_down, action_move, or action_up, etc. The information corresponding to the touch events can include one or more of the following: the time when the touch event is generated, the event type of the touch event, or the coordinates of the touch event, etc.

[0132] The scrolling speed calculation class is used to receive the information corresponding to the touch events and calculate the speed based on the information corresponding to at least two touch events.

[0133] The notification position calculation class is used to identify the locked or unlocked state of the device and obtain updated positions from different modules according to the locked or unlocked state.

[0134] The scrolling management class is used to determine the stiffness coefficient corresponding to each node and the damping coefficient corresponding to each node according to the control node, where the stiffness coefficient of the control node is greater than that of other nodes, and the damping coefficient of the control node is greater than that of other nodes.

[0135] The animation engine - physical animation node is used to determine the position of any node in the interface according to the scrolling value (or called node scrolling value).

[0136] The fling animation interpolator is used to determine the final position of the node sliding in the scenario where the user releases the slide, and the final position of the slide can be reflected by the scrolling value after release.

[0137] The locked - screen scene animation calculation module is used to determine the change situation of the position offset of each node, the change situation of the transparency of each node, and the change situation of the display ratio of each node according to different animation curves.

[0138] The locked - screen notification attribute calculation module is used to determine the final position offset of each node, the final transparency of each node, and the final display ratio of each node according to the message change state.

[0139] The message state detection module is used to detect the message change state.

[0140] The application framework layer provides application programming interfaces (APIs) and programming frameworks for the applications in the application layer. The application framework layer includes some predefined interfaces. The application framework layer may include modules such as the display composition system (surface flinger).

[0141] The display composition system is used to perform layer drawing using the parameters returned by the notification layout module, and the display composition system is used to perform layer drawing according to the Animator. Further, the display composition system can synthesize each layer and send the synthesized image to the hardware composition processor (HWC).

[0142] In some embodiments, the application framework layer may include a window manager, a content provider, a resource manager, a view system, a notification manager, etc. Figure 5 (not shown in the figure).

[0143] Among them, the window manager is used to manage window programs. The window manager can obtain the display screen size, determine whether there is a status bar, lock the screen, touch the screen, drag the screen, capture the screen, etc. The content provider is used to store and obtain data, and make this data accessible to application programs. The data may include videos, images, audio, dialed and answered calls, browsing history and bookmarks, phone books, etc. The view system includes visual controls, such as controls for displaying text, controls for displaying pictures, etc. The view system can be used to build application programs. The display interface can be composed of one or more views. For example, a display interface including a text message notification icon may include a view for displaying text and a view for displaying pictures. The resource manager provides various resources for application programs, such as localized strings, icons, pictures, layout files, video files, and so on.

[0144] The purpose of the hardware abstraction layer is to abstract the hardware, and can provide a unified interface for querying hardware devices for upper-layer applications, or can also provide data storage services for upper-layer applications. The hardware abstraction layer may include modules such as a hardware composer (HWC).

[0145] The hardware composer is used to process the images received from the display composition system, and send the processed images to modules such as the display driver to implement the display of the images.

[0146] The kernel layer is the layer between the hardware and the software. The kernel layer is used to drive the hardware to make the hardware work. The kernel layer may include one or more of the following: display driver, camera driver, audio driver, sensor driver.

[0147] In the embodiments of the present application, the layers involved in the software architecture and the modules included in the layers are not specifically limited.

[0148] The following uses specific embodiments to describe in detail the technical solutions of the present application and how the technical solutions of the present application solve the above technical problems. These several specific embodiments below can be implemented independently or in combination with each other, and the same or similar concepts or processes may not be described again in some embodiments.

[0149] The embodiments of the present application provide a dynamic effect display method, enabling the terminal device to implement two dynamic effects under the same layout architecture, that is, when the terminal device is in the locked screen state, a gradient dynamic effect is displayed (see Figure 7 the corresponding embodiment), and when the terminal device is in the unlocked state, a chain dynamic effect is displayed (see Figure 6 the corresponding embodiment).

[0150] Exemplarily, Figure 6 is a schematic diagram of the interface for dynamic effect display in the unlocked state provided by the embodiments of the present application.

[0151] The terminal device displays the interface as shown in Figure 6 a in the figure. When the terminal device receives a user's trigger on a weather message and a downward sliding operation (the user can keep holding the finger at this time), the terminal device can successively display Figure 6 the interface shown in b in the figure, Figure 6 the interface shown in c in the figure, and Figure 6 the interface shown in d in the figure.

[0152] As Figure 6 shown in a in the figure, the intervals between adjacent messages are consistent. For example, the interval can be 601.

[0153] During the process that the terminal device gradually changes from the interface shown in Figure 6 a in the figure to the interface shown in Figure 6 b in the figure, in response to the user's sliding operation on the weather message, the terminal device can move the weather message to the position where the user's sliding operation ends. And during the movement of the weather message, there may be a situation where the interval between the weather message and the information message above is 602, and the interval between the weather message and the call recording message below is 603. Among them, the value of 602 is greater than the value of 601, and the value of 603 is less than the value of 601.

[0154] During the process that the terminal device gradually changes from the interface shown in Figure 6 b in the figure to the interface shown in Figure 6 c in the figure, when the weather message moves to a specified position, the terminal device can successively move the information message and the call recording message adjacent to the weather message, and then move the software update message and the network acceleration message. For example, during the process that the information message moves to a 601 interval from the weather message, the interval between the information message and the software update message above gradually increases. During the process that the call recording message moves to a 601 interval from the weather message, the interval between the call recording message and the network acceleration message below gradually decreases.

[0155] Among them, during the movement of the elements, the rigidity coefficient corresponding to the weather message is greater than the rigidity coefficient corresponding to the information message (or the call recording message), and the damping coefficient corresponding to the weather message is greater than the damping coefficient corresponding to the information message (or the call recording message), so that the displacement and speed during the movement of the weather message are different from the displacement and speed during the movement of the information message (or the call recording message). For example, the moving speed of the weather message is greater than the moving speed of the information message (or the call message), and the movement process between the two messages presents a chain dynamic effect.

[0156] During the process that the terminal device gradually changes from the interface shown in Figure 6 c in the figure to Figure 6During the process of the interface shown as d, the software update message gradually moves downward to a position 601 away from the information message, and the network acceleration message gradually moves downward to a position 601 away from the call recording.

[0157] Among them, during the movement of the elements, the stiffness coefficient corresponding to the information message is greater than the stiffness coefficient corresponding to the software update message (or network acceleration message), and the damping coefficient corresponding to the information message is greater than the damping coefficient corresponding to the software update message (or network acceleration message), so that the displacement and speed during the movement of the information message are different from those during the movement of the software update message (or network acceleration message). For example, the speed of movement of the information message is greater than the speed of movement of the software update message (or network acceleration message), and the movement process between the two messages presents a chain dynamic effect.

[0158] It can be understood that in response to the user's sliding operation on any element in the control center, the movement modes of the elements in the control center are the same as those described in the Figure 6 corresponding embodiments and will not be elaborated here.

[0159] Based on this, the terminal device can make the elements present a chain dynamic effect of sequential movement centered on the element where the triggering operation is located by adjusting the physical coefficients corresponding to the elements. For example, when dragging one of the elements, this element moves first, and then is successively transmitted to adjacent elements, forming a chain effect similar to several springs connected together.

[0160] When the terminal device is in the locked screen state, the terminal device can, based on the user's trigger on the locked screen interface, implement the dynamic effects of sequential folding and sequential expansion of the elements (see the Figure 7 corresponding embodiments).

[0161] Exemplarily, Figure 7 is a schematic diagram of an interface for dynamic effect display in the locked screen state provided by an embodiment of the present application.

[0162] The terminal device displays the locked screen interface shown as a in Figure 7 . When the terminal device receives a trigger operation from the user on the blank area, the terminal device can sequentially display the interface shown as b in Figure 7 and the interface shown as c in Figure 7 .

[0163] When the terminal device gradually changes from the interface shown as a in Figure 7 to Figure 7In the process of the interface shown in c in the figure, each message in the message list follows the rule that the display ratio of each message gradually decreases, each message gradually moves downward, and the transparency of each message gradually decreases. Among them, the display ratio can change from 1 to 0 (or 0.2) and other values, and the transparency can change from 1 to 0 and other values.

[0164] For example, when the message list includes at least two messages, such as a weather message and an information message, and the terminal device retracts the two messages, the display ratio of the weather message is smaller than the display ratio of the information message at a certain moment, and / or the transparency of the weather message may be smaller than the transparency of the information message. In the process of retracting the messages, the order of changing the messages in the message list may start from bottom to top, for example, the weather message at the bottom of the message list is first changed, and 20 milliseconds after the change, the information message on the upper side of the weather message is changed, and the change interval between adjacent messages may be 20 milliseconds.

[0165] In a possible implementation, the terminal device may also display the following information during the process of folding the element: Figure 7 In the message prompt control shown in c in FIG. 4 , four notifications can be displayed in the message prompt control.

[0166] It is understandable that after the message is closed, the terminal device can display the wallpaper content to the maximum extent to improve the experience of viewing the lock screen interface.

[0167] like Figure 7 In the interface shown in c in FIG. 1 , when the terminal device receives a click operation on the message prompt control by the user, the terminal device can first collapse the message prompt control, and then expand the four notifications in sequence, so that the terminal device displays the four notifications in sequence. Figure 7 The interface shown in b and Figure 7 The interface shown in a in the figure is shown in the figure, and the process of expanding the message is the opposite of the process of shrinking the message, which will not be repeated here. The specific implementation of the process of expanding the message and the process of shrinking the message can be found in Figure 15 The corresponding embodiments will not be described in detail here.

[0168] Possible implementations include Figure 7 In the interface shown in c in the figure, when the terminal device detects a new message, the terminal device can pop up the new message and display the following Figure 7 In the interface shown in d in FIG. 1 , a new message can be displayed on the upper side of the message prompt control. The new message can be folded into the message prompt control after being displayed for 5 seconds. In this scenario, the 4 notifications in the message prompt control can be replaced with 5 notifications.

[0169] When the terminal device receives another new message while displaying a new message, the terminal device can display the other new message above the new message. Since the number of messages displayed on the lock screen interface is limited, when the terminal device receives multiple new messages in sequence, the terminal device can display the most recently received message on the lock screen interface in chronological order, and collect the messages that cannot be displayed on the lock screen interface into the message prompt control. The content displayed in the message prompt control can be adjusted according to the number of collected messages.

[0170] Based on this, in response to the user's trigger operation, the terminal device can present a gradual animation effect of the messages being sequentially collapsed or the messages being sequentially expanded on the lock screen interface.

[0171] Based on Figure 6 and Figure 7 the corresponding embodiments, the terminal device described in the embodiments of the present application can implement two animation effects under the same layout architecture. For example Figure 3 the interface shown in a of Figure 7 and the interface shown in a of

[0172] can belong to the same layout structure. The layout structure can be reflected by the view and the view tree. The view tree of the interface in the unlocking scenario can be referred to the description in the corresponding embodiments of Figure 8 and the view tree of the interface in the lock screen scenario can be referred to the description in the corresponding embodiments of Figure 9 the corresponding embodiments.

[0173] Exemplarily, Figure 8 is a schematic diagram of an interface in the unlocking scenario and the corresponding view tree provided by the embodiments of the present application. The content displayed in the interface shown in a of Figure 8 is the same as the content displayed in the interface shown in a of Figure 3 and will not be elaborated here.

[0174] Referring to Figure 8 the drop-down notification interface shown in a of

[0175] Figure 8 this interface may include at least one element, that is, this interface may include one or more of the following: information indicating the current time, information indicating the current date, a control for opening the notification settings, a taxi travel message, a software update message, an information message, or a control for deleting the message in the drop-down notification interface (or referred to as a delete control), etc.Any element in the interface shown in a can correspond to a view in the view tree. The view tree can be regarded as a tree structure, and the view tree corresponds to the content displayed in the interface. A view in the view tree represents a drawable space block of a user interface component. Each view occupies a rectangular area on the display screen, and in this rectangular area, this view object is responsible for graphic drawing and event handling.

[0176] For example, a software update message can be a view, called software update message view802 (or simply view802 for short). Since more content can also be displayed in the software update message, view802 can be understood as a view set. For example, the view802 can also include sub-views. The sub-views of view802 include one or more of the following: view803 for indicating the message name, view804 for indicating the message generation time, view805 corresponding to the control for expanding the message, view806 for indicating the main content in the message, or view807 for indicating the specific content in the message, etc.

[0177] View802 can be a sub-view included in view801, or can be understood that view801 is the parent view of view802. View801 can also include other sub-views in addition to view802, such as taxi ride message view808 (or simply view808 for short), information message view809 (or simply view809 for short), etc. This is not limited in the embodiments of the present application.

[0178] The rectangular area corresponding to view801 can be a part of the display screen. Therefore, view801 can be understood as a sub-view included in the parent view800, and the rectangular area corresponding to this view800 can include the area occupied by the display screen.

[0179] The Figure 8 View tree corresponding to the interface shown in a in this can be referred to Figure 8 The interface shown in b in this.

[0180] Such as Figure 8 In the interface shown in b in this, the sub-views of view800 can be view801, etc., the sub-views of view801 can be view808, view802, and view809, etc., and the sub-views of view802 can be view803, view804, view805, view806, and view807, etc.

[0181] Exemplarily,Figure 9 A schematic diagram of an explanation interface and the corresponding view tree in the lock screen scenario provided by an embodiment of the present application, Figure 9 The interface shown in a of Figure 7 has the same content as the interface shown in a of

[0182] Figure 9 Any element in the interface shown in a of

[0183] can correspond to a view in the view tree. For example, a software update message can be a view, called the software update message view902 (or simply view902 for short). The sub-views of this view902 can include one or more of the following: a view903 for indicating the message name, a view904 for indicating the message generation time, a view905 corresponding to the control for expanding the message, a view906 for indicating the main content in the message, or a view907 for indicating the specific content in the message, etc.

[0184] View902 can be a sub-view included in view901, or it can be understood that view901 is the parent view of view902. View901 can also include other sub-views in addition to view902, such as a taxi ride message view908 (or simply view908 for short), an information message view909 (or simply view909 for short), etc., which are not limited in the embodiments of the present application.

[0185] The Figure 9 view tree corresponding to the interface shown in a of Figure 9 can be seen in the interface shown in b of

[0186] Such as Figure 9 in the interface shown in b of

[0187] Combined with the above Figure 8 corresponding embodiments and Figure 9For the corresponding embodiments, the parent view of view802 (or view808 or view809) is view801, and the parent view of view801 is view800; the parent view of view902 (or view908 or view909) is view901, and the parent view of view901 is view900.

[0188] It can be understood that since the name of view801 is the same as that of view901, and the name of view800 is the same as that of view900, it can be considered that Figure 8 the interface shown in a of Figure 9 belongs to the same layout structure as the interface shown in a of

[0189] Figure 8 the view tree of the interface shown in b of Figure 9 is mounted under the second window, and the view tree of the interface shown in b of

[0190] Figure 9 is mounted under the first window. The names of the first window and the second window are the same, and the window name can be NotificationShade. Figure 8 There is at least one same message in the interface shown in a of Figure 9 and the interface shown in a of Figure 8 For example, the taxi ride message in the interface shown in a of

[0191] is the same as the taxi ride message in the interface shown in a of

[0192] For example, the content displayed in the taxi ride messages in the two interfaces is the same, and the height of the taxi ride messages is the same. It can be understood that view801 (or view901) can carry all the messages in the message list, and there may be a certain distance between the top position of view801 (or view901) and the top position of the display screen. In a possible implementation, there may also be a layer of first target view between view801 and view800, such that the first target view is the parent view of view800, and view800 is the parent view of the first target view; similarly, there may also be a layer of second target view between view901 and view900, such that the second target view is the parent view of view900, and view900 is the parent view of the second target view. The name of the first target view is the same as that of the second target view. Therefore, in the embodiments of the present application, the number of view layers between view801 and view800, and the number of view layers between view901 and view900 are not limited.

[0193] Figure 8 the positions of view801 and view800 in Figure 9 the positions of view901 and view900 in Figure 8 or Figure 9 the view tree provided in

[0194] Based on this, the messages in the pull-down notification interface in the unlocked state and the messages in the lock screen interface in the locked state belong to the same layout structure, and the terminal device can implement two kinds of dynamic effects under the same layout architecture.

[0195] In Figure 6 based on the corresponding embodiments, the embodiments of the present application will describe the specific manner of implementing the chained dynamic effect.

[0196] Exemplarily, Figure 10 is a schematic flow chart of a method for displaying a chained dynamic effect in the notification interface provided by the embodiments of the present application. In Figure 10 the corresponding embodiments, a notification layout module, a scrolling management class, a scrolling speed calculation class, a dynamic effect engine - physical dynamic effect node, and a notification position calculation class can be set in the terminal device.

[0197] As Figure 10 shown, the method for displaying a chained sliding dynamic effect in the notification interface may include the following steps:

[0198] S1001. When the notification layout module detects a press event and the terminal device is in the unlocked state, the notification layout module records the information corresponding to the press event.

[0199] The information corresponding to the press event may include: the first coordinate corresponding to the press event, the first time point corresponding to the press event, and the event type corresponding to the press event (such as the down type), etc. Among them, the first coordinate may include: the ordinate corresponding to the press event.

[0200] Exemplarily, when the terminal device displays the interface shown in Figure 3 a in Figure 3In the case of the interface shown as c, when the terminal device receives the operation of the user pressing the touch screen, the touch sensor in the terminal device hardware receives the pressing operation, and the corresponding hardware interrupt is sent to the kernel layer. The kernel layer processes the pressing operation into a pressing event, and the pressing event can carry information such as the first coordinate corresponding to the pressing event, the first time point corresponding to the pressing event, and the event type of the pressing event (such as the down type). Further, the kernel layer transmits the pressing event to each module receiving the event through the application framework layer. For example, in the notification layout module, the notification layout module detects the pressing event.

[0201] The process of the terminal device determining whether it is currently in the unlocked state can refer to the steps shown in S1501 and will not be elaborated here.

[0202] S1002. The scrolling speed calculation class obtains the information corresponding to the pressing event from the notification layout module.

[0203] S1003. The scrolling speed calculation class records the information corresponding to the pressing event.

[0204] S1004. When the notification layout module detects a sliding event and the terminal device is in the unlocked state, the notification layout module records the information corresponding to the sliding event and determines whether the sliding distance exceeds the sliding threshold.

[0205] The information corresponding to the sliding event may include information such as the second coordinate corresponding to the sliding event, the second time point corresponding to the sliding event, and the event type of the sliding event (such as the move type). Among them, the second coordinate may include the ordinate corresponding to the sliding event.

[0206] The specific process of the notification layout module detecting the sliding event can refer to the process description of the notification layout module detecting the pressing event in S1001 and will not be elaborated here.

[0207] The sliding threshold can be understood as a distance threshold. The notification layout module can obtain the first coordinate and the second coordinate by detecting the event type, determine the sliding distance using the first coordinate and the second coordinate, and the sliding threshold can be preset in the notification layout module. When the sliding distance detected by the notification layout module exceeds the sliding threshold, the notification layout module can execute the steps shown in S1007, or when the notification layout module determines that the sliding distance does not exceed the sliding threshold, the notification layout module can continue to detect the sliding event and execute the steps shown in S1004 based on the newly detected sliding event.

[0208] S1005. The scrolling speed calculation class obtains the information corresponding to the sliding event from the notification layout module.

[0209] S1006. The scrolling speed calculation class records the information corresponding to the sliding event.

[0210] S1007. When the notification layout module determines that the sliding distance exceeds the sliding threshold, the notification layout module sets a drag marker.

[0211] The drag marker is used to indicate that the current sliding operation is a vertical sliding operation for an element. It can be understood that since multiple sliding operations can be received in the notification layout module, such as a left or right sliding operation for any element, etc., the notification layout module can determine that the current sliding operation is a vertical sliding operation for an element by setting the drag marker, and perform subsequent processing on the currently received sliding operation, so that each node in the interface can move according to the user's sliding operation.

[0212] S1008. The notification layout module sets a control node according to the second coordinate.

[0213] Exemplarily, the notification layout module can determine which node the second coordinate is in, set the node where the second coordinate is located as the control node, and send the identifier of the control node to the notification layout module. For example, when the notification layout module determines that the second coordinate is located in the third message (such as the identifier is 3) in the message list, the notification layout module can determine that the identifier 3 is the control node and send the identifier 3 to the notification layout module. In the embodiments of the present application, the identifiers of the nodes are not limited.

[0214] S1009. The scroll management class obtains the control node from the notification layout module.

[0215] S1010. The scroll management class updates the stiffness coefficient and damping coefficient of the control node, as well as the stiffness coefficient and damping coefficient of other nodes.

[0216] The scroll management class can maintain a message list and update the corresponding stiffness coefficient and damping coefficient of each node in the message list according to a preset rule. For example, the scroll management class can preset the first stiffness coefficient of the control node (identifier is 3) and the first damping coefficient of the control node. For example, the value of the first stiffness coefficient of the control node can be a value such as 900 Newtons / meter, and the value of the first damping coefficient of the control node can be a value such as 30 Newton·seconds / meter, and the first stiffness coefficient can be greater than the stiffness coefficient of any other node, and the first damping coefficient can be greater than the damping coefficient of any other node.

[0217] The values of the stiffness coefficient and damping coefficient of other nodes can be determined according to the positional relationship between the other node and the control node. For example, when the distance between the other node and the control node is smaller, the difference between the stiffness coefficient of the other node and the first stiffness coefficient is smaller, and the difference between the damping coefficient of the other node and the first damping coefficient is smaller.

[0218] Exemplarily, Table 1 is a schematic table for setting a stiffness coefficient and a damping coefficient. Table 1 can be sorted in the order from top to bottom of the message list. Identifier 1 represents the first message in the message list, identifier 2 represents the second message in the message list, and so on. Taking the message list including 5 messages as an example for illustration.

[0219] Table 1 is a schematic table for setting a stiffness coefficient and a damping coefficient

[0220] Message list Stiffness coefficient Damping coefficient 1 Third stiffness coefficient Third damping coefficient 2 Second stiffness coefficient Second damping coefficient 3 (control node) First stiffness coefficient First damping coefficient 4 Second stiffness coefficient Second damping coefficient 5 Third stiffness coefficient Third damping coefficient

[0221] As shown in Table 1, the node corresponding to identifier 3 is the control node. The stiffness coefficient indicated by identifier 2 (or identifier 4) is the second stiffness coefficient, and the second stiffness coefficient is less than the first stiffness coefficient; the damping coefficient indicated by identifier 2 (or identifier 4) is the second damping coefficient, and the second damping coefficient is less than the first damping coefficient; the stiffness coefficient indicated by identifier 1 (or identifier 5) is the third stiffness coefficient, and the third stiffness coefficient is less than the second stiffness coefficient; the damping coefficient indicated by identifier 1 (or identifier 5) is the third damping coefficient, and the third damping coefficient is less than the second damping coefficient.

[0222] In a possible implementation, the stiffness coefficient of identifier 2 and the stiffness coefficient of identifier 4 may be different, and it is necessary to ensure that the stiffness coefficient of identifier 2 is less than the first stiffness coefficient and the stiffness coefficient of identifier 4 is less than the first stiffness coefficient. The damping coefficient of identifier 2 and the damping coefficient of identifier 4 may be different, and it is necessary to ensure that the damping coefficient of identifier 2 is less than the first damping coefficient and the damping coefficient of identifier 4 is less than the first damping coefficient. The stiffness coefficient of identifier 1 and the stiffness coefficient of identifier 5 may be different, and it is necessary to ensure that the stiffness coefficient of identifier 1 is less than the stiffness coefficient of identifier 2 and the stiffness coefficient of identifier 5 is less than the stiffness coefficient of identifier 4. The damping coefficient of identifier 1 and the damping coefficient of identifier 5 may be different, and it is necessary to ensure that the damping coefficient of identifier 1 is less than the damping coefficient of identifier 2 and the damping coefficient of identifier 5 is less than the damping coefficient of identifier 4. The embodiments of the present application do not make any limitation on this.

[0223] It can be understood that the terminal device can set different stiffness coefficients and different damping coefficients for different nodes, so that when the terminal device detects a sliding operation of the user on the message list, different spring dynamic effects with different strengths can be presented for each node, and with the control node as the center, other nodes can present a chain dynamic effect longitudinally.

[0224] S1011. The notification layout module obtains the sliding speed from the rolling speed calculation class.

[0225] S1012. The rolling speed calculation class calculates the sliding speed.

[0226] The sliding speed can be calculated based on the information corresponding to the recorded press event and the information corresponding to the sliding event.

[0227] S1013. The scrolling speed calculation class returns the sliding speed to the notification layout module.

[0228] S1014. The scrolling management class obtains the message for indicating the start of scrolling from the notification layout module.

[0229] The message for indicating the start of scrolling may include: sliding speed, scrolling value, and scrolling change amount.

[0230] The scrolling value can be used to characterize the vertical movement of the message in the interface. For example, the scrolling value can be understood as the distance between the top position of the uppermost node in the message list and the top position of the parent view of the node.

[0231] It can be understood that the scrolling value can also be understood as the vertical distance that the node moves in the interface compared to the initial position, and the initial position can be the position where the node in the interface has not scrolled.

[0232] Exemplarily, Figure 11 FIG. is a schematic diagram for explaining the scrolling value provided by an embodiment of the present application.

[0233] As Figure 11 shown in a of, the message list includes node 1 and node 2. Node 1 is the uppermost node in the message list, the height of node 1 is 100, the height of node 2 is 200, and the gap distance between node 1 and node 2 can be 20. The rectangular area outside node 1 and node 2 can be understood as the rectangular area where the parent view of node 1 (or node 2) is located.

[0234] As Figure 11 shown in a of, the scrolling value is 0, that is, the distance between the top position of node 1 and the top position of the parent view is 0.

[0235] When the terminal device receives an upward sliding operation by the user on node 1, causing node 1 to move out of the top position of the parent view and the moving out distance is 40, Figure 11 the corresponding scrolling value in b of can be 40.

[0236] It can be understood that different interfaces can correspond to different scrolling values. As Figure 3 shown in a of the interface, the scrolling value is different from the scrolling value in the interface shown in b of. Figure 3 shown in b of.

[0237] As Figure 3In the interface shown in a, the taxi ride message is the topmost node in the message list. When the node scrolls upward, the scroll value is the distance between the top position of the topmost node in the message list and the top position of the parent view of the node when the top position of the topmost node in the message list moves out of the top position of the parent view. At this time, the scroll value is positive. When the node scrolls downward, the scroll value can be the negative value of the distance between the top position of the topmost node in the message list and the top position of the parent view of the node. At this time, the scroll value is negative.

[0238] The scroll change amount can be the change amount of the scroll value between two sliding operations.

[0239] S1015. The animation engine - physical animation node obtains the final scroll value from the scroll management class.

[0240] The final scroll value can indicate the position where the scroll finally arrives. The final scroll value can be understood as a scroll value, that is, the scroll value calculated when the terminal device responds to the sliding operation. For example, the final scroll value can be determined based on the sum of the scroll value and the scroll change amount.

[0241] It can be understood that since the interval between adjacent nodes can be the same and meet the preset interval value when the scroll ends, the terminal device can determine the position of each node in the terminal device respectively through the final scroll value and the arrangement of the nodes.

[0242] S1016. The scroll management class obtains the message used to indicate the calculation of the scroll value corresponding to each frame of each node from the notification layout module.

[0243] The scroll value corresponding to any node in a certain frame can be understood as: the scroll value of the any node at a first time interval from the scroll start time. The scroll start time can be the second time point described in S1004.

[0244] S1017. The scroll management class instructs the animation engine - physical animation node to update the control node and other nodes in sequence.

[0245] Exemplarily, the animation engine - physical animation node can obtain the scroll start position, the scroll start time, the target scroll position, and the scroll start speed; and then determine the scroll value of the node after any time interval based on the physical parameters of each node (including the damping coefficient and the stiffness coefficient), the scroll start position, the target scroll position, and the scroll start speed.

[0246] Among them, the starting position of the scroll can be understood as a scroll value, that is, the scroll value corresponding to the interface before the terminal device receives the sliding operation; the value of the target scroll position can be the final scroll value described in S1015; the starting time of the scroll can be the second time point described in S1004; the starting speed of the scroll can be the sliding speed described in S1011, and the starting speed of the control node can be 0; the physical parameters of each node can be obtained from the scroll management class, and the scroll management class can send the physical parameters of each node to the animation engine - physical animation node before S1017.

[0247] The scroll value at a first time interval away from the starting time of the scroll can be:

[0248] Ce R1 *The first time interval + Ce R2 *The first time interval + the target scroll position

[0249] Among them, CMK = damping coefficient * damping coefficient - 4 * stiffness coefficient

[0250]

[0251]

[0252] D = starting position of the scroll - target scroll position

[0253] C = D - (starting speed of the scroll - (R1 * D)) / (R2 - R1)

[0254] Based on this, the terminal device can make other nodes present a spring animation effect following the sliding of the control node by setting the physical parameters of other nodes.

[0255] It can be understood that based on the above calculation of the scroll value, the animation engine - physical animation node updates the change situation of the nodes in turn according to the values of the control node and other nodes. For example, when the control node is 3 and there are 5 nodes including 12345 in the message list, the animation engine - physical animation node first updates the notification node, and then updates other nodes in ascending order of the distance between other nodes and the control node. For example, after updating node 3, it updates the nodes above the control node, such as node 2 and node 1, and then updates the nodes below the control node, node 4 and node 5.

[0256] In a possible implementation, after the terminal device calculates the scroll values corresponding to each node, it can determine whether the scroll values satisfy a first numerical range. The maximum value in the first numerical range can be the maximum scroll value, and the minimum value in the first numerical range can be the minimum scroll value. Among them, the minimum scroll value is greater than 0, and the value of the maximum scroll value can be referred to Figure 12The corresponding description. It can be understood that the terminal device can ensure the rationality of the scrolling value through the first numerical range.

[0257] S1018. The notification layout module obtains the message indicating whether the scrolling ends from the scrolling management class.

[0258] The message indicating whether the scrolling ends may include: the scrolling values respectively corresponding to each node in the current frame.

[0259] The scrolling management class can determine that the scrolling ends when it detects that the scrolling values respectively corresponding to each node obtained in the current frame are all the same as the final scrolling value, and execute the steps shown in S1019, or execute the steps shown in S1020 when the scrolling management class determines that the scrolling has not ended.

[0260] In a possible implementation manner, the animation engine - physical animation node can generate the scrolling values respectively corresponding to each node frame by frame, determine whether the scrolling ends, and further send the message indicating whether the scrolling ends to the notification layout module through the scrolling management class.

[0261] S1019. When the notification layout module determines that the scrolling has ended, it updates the scrolling values of each node in the current frame.

[0262] S1020. When the notification layout module determines that the scrolling has not ended, it periodically checks whether the scrolling ends in the next frame.

[0263] The method for checking whether the scrolling ends can refer to the description in S1018, which will not be elaborated here.

[0264] S1021. The scrolling management class obtains the position offsets of each node from the notification position calculation class.

[0265] The position offset of any node can be the distance from the top position of the node to the top position of the parent View.

[0266] S1022. The animation engine - physical animation node obtains the scrolling values corresponding to each node from the notification position calculation class.

[0267] S1023. The animation engine - physical animation node determines the position offsets of each node according to the scrolling values corresponding to each node, and the notification position calculation class obtains the position offsets of each node from the animation engine - physical animation node.

[0268] The position offset of any node can be the distance between the top position of the node and the top position of the parent View.

[0269] Exemplarily, the position offset of the node = -(control node scrolling value) + coordinate position + (control node scrolling value – current node scrolling value)

[0270] Among them, the coordinate position of any node can be understood as the node height above the node + a fixed spacing, and the fixed spacing can be the spacing between two nodes after the scrolling stops, such as a spacing of 20. For example, when the coordinate position of node 1 is 0, the coordinate position of node 2 is 100 + 20 = 120.

[0271] Combined with Figure 11 As shown in b in

[0272] The position offset of node 1 = -40 + 0 + 0 = -40

[0273] The position offset of node 2 = -40 + 120 + (40 - 30) = 80, where 30 can be understood as the scrolling value of node 2 in the current frame calculated according to the chain effect.

[0274] When the scrolling stops, the scrolling value of node 2 is the same as that of node 1, and at this time their spacing is fixed to the fixed spacing of 20. When the scrolling is in progress, there is a difference between the scrolling value of the control node and the scrolling value of the current node, so the spacing will change. For example, the actually seen spacing may be greater than or less than 20 (due to the chain effect).

[0275] S1024. Notify the layout module to obtain the position offset of each node from the notification position calculation class.

[0276] S1025. Notify the layout module to call the display synthesis system, and use the position offset of each node to perform layer drawing to obtain the first layer.

[0277] Furthermore, the display synthesis system can process the first layer through modules such as a hardware synthesis processor, and display the first image through modules such as a display. The first image includes the first layer.

[0278] In possible implementation manners, the notification layout module can also detect whether the scrolling ends again after S1025. The detection method of whether the scrolling ends can refer to the steps shown in S1018, which will not be elaborated here.

[0279] Based on this, the terminal device can control the movement of the control node and other surrounding nodes based on the user's sliding operation to present a chain dynamic effect.

[0280] In Figure 10 Based on the corresponding embodiment, in possible implementation manners, when the terminal device detects that the user releases the finger and the terminal device is in the unlocked state, it can determine whether it is in the rebound state by judging the scrolling value. When it is determined that the terminal device is not in the rebound state, the terminal device can be based on Figure 12The corresponding embodiment shows the interface after release, or when it is determined that the terminal device is in the rebound state, the terminal device can be based on Figure 13 The corresponding embodiment shows the interface after release.

[0281] Exemplarily, Figure 12 This is a schematic flowchart of an animation display method after receiving a release event provided by an embodiment of the present application. As Figure 12 shown, the terminal device can be provided with: a notification layout module, a scrolling management class, a scrolling speed calculation class, an animation engine - physical animation node, a fling animation interpolator, and a notification position calculation class.

[0282] As Figure 12 shown, the method for displaying a chain sliding animation in the notification interface can include the following steps:

[0283] S1201. When the notification layout module detects a release event and the terminal device is in the unlocked state, the notification layout module records the information corresponding to the release event.

[0284] The notification layout module can obtain the device state from memory or other modules, and when it is determined that the terminal device is in the unlocked state, it executes Figure 12 - Figure 13 the steps shown to implement the display of the chain animation, or when it is determined that the terminal device is in the locked state, it implements the display of the lock screen animation based on Figure 15 the corresponding embodiment.

[0285] The information corresponding to the release event can include: the third coordinate corresponding to the release event, the third time point corresponding to the release event, and the event type corresponding to the release event (such as the up type), etc.

[0286] Among them, the third coordinate can include: the ordinate corresponding to the release event.

[0287] For the specific process of the notification layout module detecting the release event, reference can be made to the process description of the notification layout module detecting the press event in S1001, which will not be elaborated here.

[0288] S1202. The notification layout module determines whether the terminal device is in a state where it can rebound.

[0289] The notification layout module can determine whether it is in the rebound state according to the scroll value. When it is determined that the scroll value is greater than 0 and less than the maximum scroll value, the notification layout module determines that it is not in the rebound state and executes the steps shown in S1203. Among them, the maximum scroll value can be: the sum of the heights of all nodes in the message list and the intervals between adjacent nodes, minus, the height of the rectangular area where the parent view of any node in the message list is located.

[0290] S1203. The notification layout module sends the information corresponding to the release event to the scrolling speed calculation class and obtains the release speed from the scrolling speed calculation class.

[0291] S1204. The scrolling speed calculation class records the information corresponding to the release event and calculates the release speed.

[0292] The release speed can be calculated based on the information corresponding to the press event described in S1002, the information corresponding to the slide event described in S1006, and the information corresponding to the release event described in S1203.

[0293] Exemplarily, the initial value of the variable "speed" is 0, the constant "earliest event position" (generally the position of the press event, or the first coordinate) is obtained, and the constant "earliest event time" (generally the time of the press event, or the first time) is obtained.

[0294] Perform loop calculation, traversing one by one from the latest event to the earliest event:

[0295] Calculate the difference between the position of the current event and the earliest event position, denoted as "current event position", such as the position difference between the release event and the slide event, or the position difference between the slide event and the press event.

[0296] Calculate the difference between the current event time and the "earliest event time", denoted as "current event duration", such as the duration between the release event and the slide event, or the duration between the slide event and the release event.

[0297] Divide "current event position" by "current event duration" to obtain "current speed".

[0298] "Speed" = ("speed" * "last event duration" + "current speed" * "current event duration") / ("current event duration" + "last event duration") to update "speed".

[0299] Update "last event duration" to the current event duration. The returned "speed" is the release speed.

[0300] For example, for 3 events, the positions of the press event, slide event, and release event are 0, 100, and 400 respectively, and the event intervals of the 3 events are all 1s. Final speed calculation: (0 * 0 + (400 / 2) * 2) / (2 + 0) = 200, (200 * 2 + (100 / 1) * 1) / (1 + 2) = 166, then the calculated release speed can be 166.

[0301] S1205. The scrolling speed calculation class returns the release speed to the notification layout module.

[0302] S1206. When the notification layout module determines that the release speed exceeds the second speed threshold, the scrolling management class obtains a message for indicating the start of fling from the notification layout module.

[0303] The message for indicating the start of fling includes: the release speed and the scrolling value.

[0304] In a possible implementation manner, when the notification layout module determines that the release speed is less than or equal to the second speed threshold, the terminal device may execute the steps shown in S1214.

[0305] S1207. The scrolling management class sends the release speed to the fling animation interpolator and obtains the scrolling value after release from the fling animation interpolator.

[0306] S1208. The fling animation interpolator calculates the scrolling value after release based on the release speed.

[0307] The fling animation interpolator can set a coefficient K, which can be understood as physical resistance in physics. When obtaining the scrolling value after release, a release speed needs to be passed in, which can be understood as sliding out horizontally at a release speed and finally how far it can move after being affected by the resistance.

[0308] Exemplarily, calculate the duration. The greater the release speed, the longer the duration. The calculation method is duration = log(velocityThreshold / release speed) / K, where log is the natural logarithm (base e).

[0309] In this way, the release speed and the duration can be mapped to a curve. The greater the release speed, the longer the duration. The scrolling value after release = (release speed / K) * (e K* time - 1).

[0310] Among them, K is generally a negative value, such as -4.2 and other values, and velocityThreshold is generally a value much smaller than the release speed, such as 75 and other values. Therefore, velocityThreshold / release speed is less than 1. The duration is finally a positive number, that is, the greater the release speed, the longer the duration.

[0311] S1209. The fling animation interpolator returns the scrolling value after release to the scrolling management class.

[0312] S1210. The scrolling management class updates the stiffness coefficients of each node and the damping coefficients of each node.

[0313] Before S1210, in order for the scrolling management class to set appropriate physical systems for the control node and other nodes, the notification layout module can pass the control node to the scrolling management class before S1210. The steps for passing the control node can refer to the steps shown in S1009 and will not be elaborated here. Alternatively, the control node can also be passed to the scrolling management class based on S1206, and this is not limited in the embodiments of this application.

[0314] Each node can include: a control node and other nodes except the control node. The control node can be the node corresponding to the third coordinate. The setting of the physical coefficients of the control node and other nodes can refer to the steps shown in S1010 and will not be elaborated here.

[0315] S1211. The scrolling management class obtains a message from the notification layout module for indicating the calculation of the scrolling value corresponding to each frame of each node.

[0316] S1212. The scrolling management class instructs the animation engine - physical animation node to update the control node and other nodes in sequence.

[0317] Exemplarily, the scrolling management class can send the rigidity coefficient of each node, the damping coefficient of each node, the scrolling value after release, and the release speed to the animation engine - physical animation node, so that the animation engine - physical animation node calculates the scrolling change situation of each node. Among them, the calculation method of the scrolling change situation of each node can refer to the steps shown in S1017 and will not be elaborated here.

[0318] S1213. The notification layout module obtains a message from the scrolling management class for indicating whether the scrolling has ended.

[0319] S1214. When the notification layout module determines that the scrolling has ended, it updates the scrolling value of each node in the current frame.

[0320] S1215. When the notification layout module determines that the scrolling has not ended, it periodically checks whether the scrolling has ended in the next frame.

[0321] S1216. The scrolling management class obtains the position offset of each node from the notification position calculation class.

[0322] S1217. The animation engine - physical animation node obtains the scrolling value corresponding to each node from the notification position calculation class.

[0323] S1218. The animation engine - physical animation node determines the position offset of each node according to the scrolling value corresponding to each node, and the notification position calculation class obtains the position offset of each node from the animation engine - physical animation node.

[0324] S1219. The notification layout module obtains the position offsets of each node from the notification position calculation class.

[0325] S1220. The notification layout module calls the display synthesis system to perform layer drawing using the position offsets of each node, and obtains the second layer.

[0326] Among them, for the descriptions in the steps shown in S1211 - S1220, reference can be made to the descriptions in S1016 - S1025, which will not be elaborated here.

[0327] In Figure 10 Based on the corresponding embodiment, in a possible implementation manner, when the terminal device detects that the user releases the finger, according to Figure 13 the corresponding embodiment, perform animation display. Exemplarily, Figure 13 This is a schematic flowchart of another animation display method after receiving a release event provided by an embodiment of the present application.

[0328] S1301. When the notification layout module detects a release event, the notification layout module records the information corresponding to the release event.

[0329] For the information corresponding to the release event, reference can be made to the description in S1201, which will not be elaborated here.

[0330] S1302. The notification layout module determines whether it is in a state where it can rebound.

[0331] When the notification layout module determines that the scroll value is less than 0 or the scroll value is greater than the maximum scroll value, the notification layout module determines that it is in a state where it can rebound and executes the step shown in S1303.

[0332] Among them, the scroll value being less than 0 can be understood as the terminal device being overscrolled at the top, and the scroll value being greater than the maximum scroll value can be understood as the terminal device being overscrolled at the bottom.

[0333] Exemplarily, Figure 14 This is a schematic diagram of an interface in a state of overscrolling at the top or bottom provided by an embodiment of the present application.

[0334] The terminal device displays an interface as shown in Figure 14 a in. When the terminal device receives a sliding operation from top to bottom by the user on the display screen, the terminal device can gradually change from the interface shown in Figure 14 a in to the interface shown in Figure 14 b in, and as the distance between the position where the user slides and the top of the display screen is farther, the area of the blank area (such as the dashed box 1401 shown) at the top of the message list is larger. In this scenario, the scroll value is less than 0, and the terminal device is in a state of overscrolling at the top.

[0335] As shown in Figure 14In the interface shown in a, when the terminal device detects a user's upward sliding operation along the display screen, it can display an interface as shown in Figure 14 c in. Further, when the terminal device receives a user's upward sliding operation along the display screen, the terminal device can Figure 14 gradually transform from the interface shown in c in to Figure 14 the interface shown in d in, and as the distance between the position where the user slides and the bottom of the display screen is farther, the area of the blank area at the bottom of the message list (as shown by the dashed box 1402) is larger. In this scenario, the scroll value is greater than the maximum scroll value, and the terminal device is in an over-sliding state at the bottom.

[0336] S1303. The notification layout module sets the control node to identifier 0 or the control node to the last node in the message list, and notifies the scroll management class.

[0337] When the terminal device is in an over-sliding state at the top, the control node can be the first node in the message list; or, when the terminal device is in an over-sliding state at the bottom, the control node can be the last node in the message list.

[0338] S1304. The scroll management class updates the stiffness coefficient and damping coefficient of each node according to the position of the control node.

[0339] Each node can include the control node and other nodes except the control node. The control node can be the node corresponding to the third coordinate in the release event. The setting of the physical coefficients of the control node and other nodes can refer to the steps shown in S1010, which will not be elaborated here.

[0340] S1305. The scroll management class obtains the final scroll value from the notification layout module.

[0341] When the terminal device is in an over-sliding state at the top, the final scroll value can be 0; or, when the terminal device is in an over-sliding state at the bottom, the final scroll value can be the maximum scroll value.

[0342] S1306. The animation engine - physical animation node obtains the final scroll value from the scroll management class.

[0343] S1307. The scroll management class obtains a message from the notification layout module for indicating the calculation of the scroll value corresponding to each frame of each node.

[0344] S1308. The scroll management class instructs the animation engine - physical animation node to update the control node and other nodes in sequence.

[0345] Exemplarily, the scrolling management class can send the stiffness coefficient of each node, the damping coefficient of each node, the final scrolling value, and the scrolling start speed to the animation engine - physical animation node, so that the animation engine - physical animation node calculates the scrolling change situation of each node. Among them, in S1308, the scrolling start speed can be 0, and the calculation method of the scrolling change situation of each node can refer to the steps shown in S1017, which will not be elaborated here.

[0346] S1309. Notify the layout module to obtain the message indicating whether the scrolling ends from the scrolling management class.

[0347] S1310. Notify the layout module to update the scrolling value of each node in the current frame when it determines that the scrolling has ended.

[0348] S1311. Notify the layout module to periodically check whether the scrolling ends in the next frame when it determines that the scrolling has not ended.

[0349] S1312. The scrolling management class obtains the position offset of each node from the notification position calculation class.

[0350] S1313. The animation engine - physical animation node obtains the corresponding scrolling value of each node from the notification position calculation class.

[0351] S1314. The animation engine - physical animation node determines the position offset of each node according to the corresponding scrolling value of each node, and the notification position calculation class obtains the position offset of each node from the animation engine - physical animation node.

[0352] S1315. Notify the layout module to obtain the position offset of each node from the notification position calculation class.

[0353] S1316. Notify the layout module to call the display composition system and perform layer drawing using the position offset of each node to obtain the third layer.

[0354] Among them, the descriptions in the steps shown in S1307 - S1316 can refer to the descriptions in S1016 - S1025, which will not be elaborated here.

[0355] Based on this, the terminal device can make the interface present different animations according to different release states of the user.

[0356] In Figure 7 On the basis of the corresponding embodiment, the specific implementation manner of realizing the gradient animation in this application embodiment is described.

[0357] Exemplarily, Figure 15 is a schematic flowchart of a method for displaying a gradient animation in the lock screen interface provided by this application embodiment. In Figure 15In a corresponding embodiment, a notification layout module, a scrolling management class, a scrolling speed calculation class, a dynamic effect engine - physical dynamic effect node, and a notification position calculation class may be provided in the terminal device.

[0358] As Figure 15 shown, the method for displaying a gradient dynamic effect on the lock screen interface may include the following steps:

[0359] It can be understood that before S1501, when the notification layout module detects a press event and the terminal device is in the locked screen state, the notification layout module may ignore the press event and continue to wait for other touch events. And / or, when the notification layout module detects a swipe event and the terminal device is in the locked screen state, the notification layout module may ignore the swipe event and continue to wait for other touch events.

[0360] Exemplarily, the notification layout module may pre - obtain the device state from the memory or other modules, and after obtaining the device state, indicate different states of the device through a flag. For example, flag = 0 may indicate that the terminal device is in the unlocked state, and flag = 1 may indicate that the terminal device is in the locked screen state. Further, the notification layout module may query the flag when detecting any event and perform different steps in different device states. Among them, the value of the flag is only an example and does not constitute a limitation to the embodiments of the present application.

[0361] S1501. When the notification layout module detects a release event and the terminal device is in the locked screen state, the notification layout module sets a lock screen dynamic effect start flag.

[0362] The lock screen dynamic effect start flag is used to indicate that the terminal device is in the state of displaying the lock screen dynamic effect.

[0363] In a possible implementation, when the notification layout module detects a release event and the terminal device is in the locked screen state, the notification layout module may send the release event to the message state detection module, so that the message state detection module determines the message change state, such as determining that the message is in the message collapsed state or the message expanded state.

[0364] When the notification layout module receives a new message and the terminal device is in the locked screen state, the notification layout module may send the new message to the message state detection module, and the message state detection module may also determine the current state as the new message state when detecting the new message.

[0365] The above - mentioned message collapsed state, message expanded state, and new message state enable the terminal device to determine the final position offset of the lock screen notification, determine the final transparency of the lock screen notification, and determine the final display ratio of the lock screen notification in S1505.

[0366] In a possible implementation, when the notification layout module detects a new message, it can also execute the steps shown in S1502 - S1511 below. At this time, S1501 can also be that when the notification layout module detects a release event and the terminal device is in the locked screen state, or detects a new message and the terminal device is in the locked screen state, the notification layout module sets the locked screen animation start flag.

[0367] S1502. The notification position calculation class obtains the message used to indicate the update of the locked screen notification from the notification layout module.

[0368] S1503. The notification position calculation class determines the initial positions of each node and the initial position offsets of each node corresponding to the initial positions.

[0369] The initial position of any node can include: the upper coordinate value and the lower coordinate value of the node, and both the upper coordinate value and the lower coordinate value can be understood as the Y - axis coordinate values.

[0370] The position offset of any node can be understood as the distance between the upper top position of the node and the top position of the display screen of the terminal device (or the distance from the top of the parent view). As Figure 7 shown in a of, the position offset of the taxi ride message can be the distance between the upper side of the taxi ride and the top position of the display screen (or the top position of the parent view), and the position offset of the software update message can be the sum of the position offset of the taxi ride message and the interval between the taxi ride message and the software update message.

[0371] It can be understood that both the initial position of the node and the position offset of the node can be used to locate the position of the node in the locked screen interface.

[0372] The initial position offsets of each node can be understood as the positions of each node in the locked screen interface when each node is in the expanded state. For example, the positions of each node when in the expanded state as shown in a of. It can be understood that even when the terminal device is in the collapsed state as shown in c of, the terminal device can also determine according to the preset rules that each node returns to Figure 7 the position when in the expanded state as shown in a of. Figure 7 Figure 7

[0373] S1504. The locked screen notification attribute calculation module obtains the initial position offsets of each node from the notification position calculation class.

[0374] S1505. The locked screen notification attribute calculation module obtains the message change status from the message status detection module.

[0375] The message change status can be: message collapsed state, message expanded state, or new message state. ​​

[0376] S1506. The lock screen notification attribute calculation module determines the final position offset of each node, the final transparency of each node, and the final display ratio of each node according to the message change status.

[0377] Under different message change statuses, the final position offset of each node, the final transparency of each node, and the final display ratio of each node can be seen in Table 2.

[0378] Table 2 Schematic Diagram of Parameter Settings

[0379]

[0380] Among them, the first preset distance can be understood as Figure 7 the distance between the message prompt control and the top position of the display screen (or the top position of the parent view) shown as c in Figure 7 the distance between any new message and the top position of the display screen (or the top position of the parent view) shown as d in

[0381] A transparency of 0 can be understood as transparent, a transparency of 1 can be understood as opaque, a display ratio of 0 can be understood as the message not being displayed, and a display ratio of 1 can be understood as the message not being scaled.

[0382] It can be understood that the terminal device can determine the final change situation of each node based on S1503 - S1506, and then determine the dynamic effects of each node based on the following S1507 - S1508.

[0383] S1507. The lock screen scene dynamic effect parameter calculation module obtains the final position offset of each node, the final transparency of each node, and the final display ratio of each node from the lock screen notification attribute calculation module.

[0384] S1508. The lock screen scene dynamic effect parameter calculation module determines the position offset of each node at different time points, the transparency of each node at different time points, and the display ratio of each node at different time points.

[0385] The position offset of each node at different time points can achieve a displacement change dynamic effect, the transparency of each node at different time points can achieve a transparency change dynamic effect, and the display ratio of each node at different time points can achieve a display ratio change dynamic effect.

[0386] Exemplarily, the lock screen scene animation parameter calculation module can obtain the current position offsets of each node in the lock screen interface, the current transparency of each node, and the current display ratio of each node. The lock screen scene animation parameter calculation module implements the displacement change animation according to the current position offsets of each node, the final position offsets of each node, and the first animation curve; and implements the transparency change animation according to the current transparency of each node, the final transparency of each node, and the second animation curve; and implements the display ratio change animation according to the current display ratio of each node, the final display ratio of each node, and the third animation curve.

[0387] During the process of message collapse or message expansion, the change situation of any node can be: during the process of implementing the displacement change animation, the time durations for different nodes to move from the current position offset to the final position offset can be the same, the time durations for different nodes to change from the current transparency to the final transparency can be the same, and the time durations for different nodes to change from the current display ratio to the final display ratio can be the same.

[0388] The first animation curve can be a standard curve, the second animation curve can be a sharp curve, and the third animation curve can be a (friction curve). There is no specific limitation in this embodiment of the present application.

[0389] Exemplarily, for example, in the process of implementing the displacement change animation, the terminal device can start from the time point corresponding to the current position offset of the node, and input the time points into the first animation curve at certain time intervals in sequence to obtain the position offset corresponding to the time point, so that the offset position can achieve the change between the current position offset and the final position offset. Among them, the first animation curve can correspond to a preset stiffness coefficient and damping coefficient.

[0390] The animation curves that the terminal device can use can also include one or more of the following: deceleration curve, acceleration curve, extreme deceleration curve, rhythm curve, or smooth curve, etc. There is no limitation in this embodiment of the present application. Among them, different animation curves can correspond to different stiffness coefficients and different damping coefficients, so that the terminal device can present different sliding effects based on different animation curves.

[0391] It can be understood that when a new message is received, the new message can move according to one of the above animation curves, or the new message can also move at a preset speed or acceleration. There is no limitation in this embodiment of the present application.

[0392] In possible implementations, the animation curves used in different message change states may be different. For example, the animation curve used to implement the displacement change animation when the message is collapsed is different from the animation curve used to implement the displacement change animation when the message is expanded. The animation curve used to implement the transparency change animation when the message is collapsed is different from the animation curve used to implement the transparency change animation when the message is expanded. The animation curve used to implement the display ratio change animation when the message is collapsed is different from the animation curve used to implement the display ratio change animation when the message is expanded. In the embodiments of the present application, no specific limitations are made in this regard. In this scenario, the terminal device can display different animations when the message is collapsed and when the message is expanded.

[0393] During the process of message expansion, the terminal device can, in the order of nodes from top to bottom, first implement the animation of the first node located on the upper side in the message list, and then implement the animation of the second node. The time interval between the two animations can be a value such as 20 milliseconds.

[0394] Exemplarily, Figure 16 FIG. is a schematic diagram for explaining the message delay provided by the embodiments of the present application.

[0395] Combined with Figure 7 the interface shown in a in Figure 16 and a in Figure 7 when the message is expanded, the terminal device can, in the order of nodes from top to bottom, first implement the expansion animation of the taxi ride message, and after 20 milliseconds, implement the expansion animation of the software update message. After 20 milliseconds, implement the expansion animation of the information message, and finally implement the expansion animation of the weather message, to obtain

[0396] the interface shown in a in

[0397] During the process of message collapse, the terminal device can, in the order of nodes from bottom to top, first implement the animation of the last node, and then implement the animation of the penultimate node. The time interval between the two animations can be a value such as 20 milliseconds.

[0398] Combined withFigure 7 the interface shown as a in Figure 16 and b in Figure 7 When the messages are collapsed, the terminal device can, in the order from bottom to top of the nodes, first implement the collapse animation effect of the weather message, then implement the collapse animation effect of the information message 20 milliseconds later, then implement the collapse animation effect of the software update 20 milliseconds later, and finally implement the collapse animation effect of the taxi ride message, to obtain

[0399] the interface shown as c in

[0400] Based on this, the lock screen scene animation parameter calculation module can obtain the position offsets of each node at different time points to implement the displacement change animation effect, obtain the transparency of each node at different time points to implement the transparency change animation effect, and obtain the display ratio of each node at different time points to implement the display ratio change animation effect.

[0401] S1510. The notification layout module obtains the position offsets of each node at different time points, the transparency of each node at different time points, and the display ratio of each node at different time points from the lock screen scene animation parameter calculation module.

[0402] S1511. The notification layout module constructs an animation event according to the lock screen animation start flag.

[0403] S1512. The lock screen scene animation execution module obtains the animation event from the notification layout module.

[0404] The animation event may include: the position offsets of each node at different time points, the transparency of each node at different time points, and the display ratio of each node at different time points.

[0405] S1513. The lock screen scene animation execution module constructs an Animator according to the animation event.

[0406] An Animator can be understood as a class for implementing animation effects. An Animator is mainly used to control the change process of a certain value within a period of time. During the execution of the Animator, the terminal device can call the display composition system to perform layer drawing.

[0407] After constructing an Animator in the lock screen scene animation execution module, the display synthesis system can execute the Animator to achieve: drawing a displacement change animation by using the position offsets of each node at different time points, drawing a transparency change animation by using the transparencies of each node at different time points, and drawing a display ratio change animation by using the display ratios of each node at different time points, and synthesizing the displacement change animation, the transparency change animation, and the display ratio change into a gradient animation.

[0408] Furthermore, after the display synthesis system performs layer drawing, the terminal device can implement the processing and display of each frame image in the lock screen animation through modules such as a hardware synthesis processor and a display driver.

[0409] Based on this, the terminal device can implement message expansion and message collapse, etc. based on user operations in the lock screen interface.

[0410] In the above Figure 6 - Figure 16 corresponding embodiment, Figure 17 The following is a schematic flowchart of a method for displaying an animation provided by an embodiment of the present application. As Figure 17 shown, the method for displaying an animation may include the following steps:

[0411] S1701. The terminal device receives a first operation.

[0412] When the first interface may be the interface shown in a of Figure 6 , the first operation may be a sliding operation on any element in the interface shown in a of Figure 6 .

[0413] When the second interface is the interface shown in a of Figure 7 , the first operation may be a triggering operation on the blank area in the interface shown in a of Figure 7 .

[0414] S1702. In response to a first operation, when the terminal device is in the locked screen state, the terminal device generates a first dynamic effect in a first interface. The first interface corresponds to a first view tree. In the first view tree, the parent view of at least one first element is the first view, the parent view of the first view is the second view. In the first dynamic effect, the terminal device performs a reduction and a downward translation on at least one first element; or, in response to the first operation, when the terminal device is in the unlocked state, the terminal device generates a second dynamic effect in a second interface. The second interface corresponds to a second view tree. In the second view tree, the parent view of at least one second element is the third view, the parent view of the third view is the fourth view. In the second dynamic effect, the terminal device performs an upward or downward translation on at least one first element, and the size of at least one second element remains unchanged.

[0415] Among them, the name of the first view is the same as the name of the third view, and the name of the second view is the same as the name of the fourth view.

[0416] The first dynamic effect can be Figure 7 The corresponding fade-in and fade-out dynamic effect. This fade-in and fade-out dynamic effect can be the fade-in and fade-out dynamic effect when a message is collapsed. The first view tree can be seen as shown in b in 9. At least one element can include one or more of the following: Figure 9 The view902, view909 or view908 shown in a in, the first view can be view901, and the second view can be view900.

[0417] The second dynamic effect can be Figure 6 The corresponding chain dynamic effect. The second view tree can be seen as shown in b in 8. At least one element can include one or more of the following: Figure 8 The view802, view809 or view808 shown in a in, the third view can be view801, and the fourth view can be view800.

[0418] It can be understood that since the name of the first view is the same as the name of the third view, and the name of the second view is the same as the name of the fourth view, at least one first element and at least one second element belong to the same layout structure.

[0419] In a possible implementation, the first view tree is mounted under a first window, the second view tree is mounted under a second window, and the name of the first window is the same as the name of the second window.

[0420] The names of both the first window and the second window can be NotificationShade.

[0421] In a possible implementation, the duration of the first animation effect includes: a first moment and a second moment, where the second moment is after the first moment. At least one of the first elements includes: a third element, and the third element satisfies one or more of the following: the display ratio of the third element at the first moment is greater than the display ratio of the third element at the second moment, the transparency of the third element at the first moment is greater than the transparency of the third element at the second moment, or the first distance is less than the second distance.

[0422] Among them, the first distance is the distance between the third element and the first preset position at the first moment, the second distance is the distance between the third element and the first preset position at the second moment, and the first preset position is the top position of the display screen or the top position of the first view.

[0423] See Figure 7 the interface shown in a of Figure 7 When the third element is the taxi ride message shown in a of

[0424] In a possible implementation, at least one of the first elements includes: a fourth element, the third element is located above the fourth element, and at the first moment or the second moment, the transparency of the third element is greater than the transparency of the fourth element, and / or the display ratio of the third element is greater than the display ratio of the fourth element.

[0425] See Figure 7 the interface shown in a of

[0426] During the process of folding up the message, each node presents a gradual change animation effect as shown in Figure 7 b of

[0427] In a possible implementation, the terminal device performs shrinking and downward translation on at least one of the first elements, including: after a first time threshold for performing shrinking and downward translation on the fourth element, the terminal device performs shrinking and downward translation on the third element.

[0428] See Figure 16As shown in b, the first time threshold can be a value such as 20 milliseconds, and when the message is collapsed, the terminal device can first collapse the message at the bottom of the message list and then collapse the message at the top of the message list.

[0429] In a possible implementation, the first interface includes a message list, and the message list includes a third element and a fourth element. The third element is the first element at the top of the message list. The method further includes: after a second time threshold for reducing and translating the third element downward is reached by the terminal device, a first control is displayed. The first control is a message prompt control, and the second time threshold is greater than the first time threshold.

[0430] The first control is a message prompt control, and the second time threshold is a value such as 200 milliseconds.

[0431] See Figure 16 In the interface shown in b, after a period threshold for collapsing the weather message at the top of the message list, the terminal device can start to display the message prompt control.

[0432] In a possible implementation, after the terminal device generates a first animation effect in the first interface, the method further includes: the terminal device receives a second operation on the first interface; in response to the second operation, when the terminal device is in the locked screen state, the terminal device generates a third animation effect, in which the terminal device enlarges and translates at least one first element upward.

[0433] The second operation can be Figure 7 In the interface shown in c, the triggering operation by the user on the message prompt control. The third animation effect can be Figure 7 The corresponding gradual animation effect, which can be the gradual animation effect when the message is expanded.

[0434] In a possible implementation, within the duration of the third animation effect, it includes: a third moment and a fourth moment, with the fourth moment after the third moment. At least one first element includes: a fifth element, and the fifth element satisfies one or more of the following: the display ratio of the fifth element at the third moment is less than the display ratio of the fifth element at the fourth moment, the transparency of the fifth element at the third moment is less than the transparency of the fifth element at the fourth moment, or the first distance is greater than the second distance.

[0435] Wherein, the first distance is the distance between the fifth element and a first preset position at the third moment, and the second distance is the distance between the fifth element and the first preset position at the fourth moment.

[0436] See Figure 7In the interface shown in a in FIG. 1 , the fifth element may be a taxi travel message. As the message is expanded, the display ratio of the taxi travel message gradually increases, the transparency of the taxi travel message gradually increases, and the distance between the taxi travel message and the first preset position gradually decreases.

[0437] In one possible implementation, at least one first element includes: a sixth element, a fifth element is located on the upper side of the sixth element, at the third moment or the fourth moment, the transparency of the fifth element is greater than the transparency of the sixth element, and / or the display ratio of the fifth element is greater than the display ratio of the sixth element.

[0438] See also Figure 7 In the interface shown in a, when the sixth element is a software update message, as the message expands, the terminal device can first expand the taxi travel message and then expand the software update message. Therefore, at a certain moment, the transparency of the taxi travel message is greater than the transparency of the software update message, and the display ratio of the taxi travel message is greater than the display ratio of the software update message.

[0439] During the message expansion process, each node changes its displacement, transparency, and display ratio in turn, presenting the following Figure 7 The gradient effect shown in b.

[0440] In a possible implementation, the terminal device zooms in and translates upward on at least one first element, including: after the terminal device zooms in and translates upward on the fifth element for a first time threshold, the terminal device zooms in and translates upward on the sixth element.

[0441] like Figure 16 In the interface shown in a, the first time threshold can be a value such as 20 milliseconds, and when the message is expanded, the terminal device can first hide the message at the top of the message list (such as the fifth element), and then hide the message at the bottom of the message list (such as the sixth element).

[0442] In a possible implementation, the first interface also includes a first control, which is a message prompt control. The first interface includes a message list, which includes a fourth element and a fifth element, and the fifth element is the first element at the bottom of the message list. The method also includes: after the terminal device cancels the third time threshold for displaying the first control, the fifth element is enlarged and translated upward, and the third time threshold is greater than the first time threshold.

[0443] The first control is a message prompt control, and the third time threshold is a value such as 250 milliseconds.

[0444] See also Figure 16 In the interface shown in a, the terminal device can expand the taxi travel message in the message list after a period of time threshold after the message prompt control is folded.

[0445] In a possible implementation, the second operation is a trigger operation for the first control.

[0446] In a possible implementation, the first operation is a trigger operation for a blank position in the first interface.

[0447] In a possible implementation, in response to the first operation, when the terminal device is in the locked screen state, the terminal device generates a first dynamic effect in the first interface, including: in response to the first operation, when the terminal device is in the locked screen state, the terminal device determines that at least one first element moves from a first position to a second position; the terminal device obtains a first parameter of at least one first element in the first position and a second parameter of at least one first element in the second position, the first parameter includes one or more of the following: the position of each element in at least one first element in the first position, the display ratio of each element in at least one first element in the first position, or the transparency of each element in at least one first element in the first position, the second parameter includes one or more of the following: the position of each element in at least one first element in the second position, the display ratio of each element in at least one first element in the second position, or the transparency of each element in at least one first element in the second position; the terminal device obtains a third parameter according to the first parameter, the second parameter, and at least one preset dynamic effect curve, the third parameter includes one or more of the following: the position of each element in at least one first element within a first time range, the transparency of each element in at least one first element within a first time range, or the display ratio of each element in at least one first element within a first time range, the first time range is the time range for at least one first element to move from the first position to the second position; the terminal device generates the first dynamic effect by using the third parameter.

[0448] The first position may be the position where the message is not folded, and the second position may be the position where the message is folded.

[0449] In a possible implementation, within the duration of the second dynamic effect, there are: a fifth moment and a sixth moment, the sixth moment is after the fifth moment, at least one second element includes: a seventh element, an eighth element, and a ninth element, the seventh element is above the eighth element, the eighth element is above the ninth element, at the fifth moment, the interval between the seventh element and the eighth element is a first value, the interval between the eighth element and the ninth element is a second value, at the sixth moment, the interval between the seventh element and the eighth element is a third value, the interval between the eighth element and the ninth element is a fourth value, the first value is different from the third value, and the second value is different from the fourth value.

[0450] Such as Figure 6For a corresponding embodiment, the seventh element may be an information message, the eighth element may be a weather message, and the ninth element may be a call recording element. In Figure 6 In the shown gradual animation effect, as the user slides, the gap between adjacent elements changes.

[0451] In a possible implementation, the first operation is an operation on the eighth element. In the second animation effect, the stiffness coefficient corresponding to the eighth element is greater than the stiffness coefficient corresponding to the ninth element, the damping coefficient corresponding to the eighth element is greater than the damping coefficient corresponding to the ninth element, the stiffness coefficient corresponding to the eighth element is greater than the stiffness coefficient corresponding to the seventh element, the damping coefficient corresponding to the eighth element is greater than the damping coefficient corresponding to the seventh element, the time when the eighth element moves to the fourth position is earlier than the time when the ninth element moves to the fourth position, and the time when the eighth element moves to the fourth position is earlier than the time when the seventh element moves to the fourth position.

[0452] Among them, the eighth element may be the control node described in the embodiments of the present application. The stiffness coefficient of the control node is greater than the stiffness coefficients of other nodes, and the damping coefficient of the control node is greater than the damping coefficients of other nodes. Refer to the corresponding embodiments in Table 1.

[0453] In the chain animation effect, due to the setting of the stiffness coefficients of each node and the damping coefficients of each node, the control node can move to the specified position first, and then other nodes move to the execution positions.

[0454] In a possible implementation, when the first operation is an upward sliding operation on the eighth element and the first value is the same as the second value, the third value is less than the first value, and the fourth value is greater than the second value.

[0455] Refer to Figure 6 the interface shown in a of. As the weather message slides upward, the distance between the weather message and the information message gradually decreases, and the distance between the weather message and the call recording message gradually increases.

[0456] Or, when the first operation is a downward sliding operation on the eighth element and the first value is the same as the second value, the third value is greater than the first value, and the fourth value is less than the second value.

[0457] Refer to Figure 6 the interface shown in a of to Figure 6 the interface shown in b of. As the weather message slides downward, the distance between the weather message and the information message gradually increases, and the distance between the weather message and the call recording message gradually decreases.

[0458] In a possible implementation, the first operation is a sliding operation on an eighth element among at least one second element. In response to the first operation, when the terminal device is in an unlocked state, the terminal device generates a second dynamic effect in the second interface, including: in response to the first operation, when the terminal device is in an unlocked state, the terminal device determines that at least one second element moves from a third position to a fourth position; the terminal device determines the position of each element among at least one second element in a second time range according to a fourth parameter, where the fourth parameter includes: the position of each element among at least one second element in the third position, the position of each element among at least one second element in the fourth position, the time of at least one second element in the third position, the sliding speed of each element among at least one second element, the rigidity coefficient of each element among at least one second element, and the damping coefficient of each element among at least one second element; the terminal device generates a second dynamic effect by using the position of each element among at least one second element in the second time range.

[0459] The third position may be the position before the sliding operation, and the fourth position may be the position after the sliding operation.

[0460] The position of each element among at least one second element in the third position and the position of each element among at least one second element in the fourth position can both be described by the scroll value in the embodiments of the present application.

[0461] The position of each element among at least one second element in the second time range can be understood as Figure 10 the position offset of each node described in

[0462] In a possible implementation, after the terminal device generates a second dynamic effect in the second interface, the method further includes: the terminal device receives a third operation on the second interface, where the third operation is a release operation on the eighth element; in response to the third operation, when the terminal device is in an unlocked state, the terminal device generates a fourth dynamic effect. In the fourth dynamic effect, the terminal device performs an upward or downward translation on at least one first element, and the size of at least one second element remains unchanged.

[0463] The fourth dynamic effect may be a chain dynamic effect generated in response to the release operation.

[0464] In a possible implementation, in response to a third operation, when the terminal device is in an unlocked state, the terminal device generates a fourth dynamic effect, including: in response to the third operation, when the terminal device is in an unlocked state, the terminal device determines that at least one second element moves from a fourth position to a fifth position; when the terminal device determines that the corresponding interface scroll value at the fifth position is greater than 0 and less than the maximum scroll value, the terminal device determines the release speed; wherein, the release speed is the speed generated when releasing an eighth element, the interface scroll value is the distance that at least one second element moves compared to the first position, and the maximum scroll value is determined based on the height of each element in at least one second element, the gap between adjacent elements, and the height of a third view; the terminal device determines the position of each element in at least one second element within a third time range according to a fifth parameter, and the fifth parameter includes: the position of each element in at least one second element at the fourth position, the position of each element in at least one second element at the fifth position, the time of at least one second element at the fourth position, the release speed of each element in at least one second element, the stiffness coefficient of each element in at least one second element, and the damping coefficient of each element in at least one second element; the terminal device generates a fourth dynamic effect by using the position of each element in at least one second element within the third time range.

[0465] Wherein, the interface scroll value may be the scroll value described in the embodiments of the present application.

[0466] Since the interface scroll value of the terminal device at the fifth position is greater than 0 and less than the maximum scroll value, and at this time the terminal device is not in a rebound state, the release speed generated when releasing the eighth element can be calculated, and further the position of each element in at least one second element at the fifth position can be determined. The process of determining the position of each element in at least one second element within the third time range based on the fifth parameter can be referred to Figure 12 the description of the corresponding embodiment, which will not be elaborated here.

[0467] In a possible implementation, in response to a third operation, when the terminal device is in an unlocked state, the terminal device generates a fourth animation effect, including: in response to the third operation, when the terminal device is in an unlocked state, the terminal device determines that at least one second element moves from a fourth position to a fifth position; when the terminal device determines that the interface scrolling value at the fifth position is less than 0 or the interface scrolling value is greater than the maximum scrolling value, the terminal device determines the position of each element in at least one second element within a third time range according to a sixth parameter, where the sixth parameter includes: the position of each element in at least one second element at the fourth position, the position of each element in at least one second element at the fifth position, the time of at least one second element at the fourth position, the stiffness coefficient of each element in at least one second element, and the damping coefficient of each element in at least one second element, the interface scrolling value is the distance that at least one second element moves relative to the first position, and the maximum scrolling value is determined based on the height of each element in at least one second element, the gap between adjacent elements, and the height of the third view; the terminal device generates a fourth animation effect using the position of each element in at least one second element within the third time range.

[0468] When the terminal device determines that the interface scrolling value is less than 0 or the interface scrolling value is greater than the maximum scrolling value, the terminal device is in a rebounding state. The process of determining the position of each element in at least one second element within a third time range based on the sixth parameter can be referred to Figure 13 the description of the corresponding embodiment, which will not be elaborated here.

[0469] As described above in conjunction with Figure 6 - Figure 17 , the method provided by the embodiments of the present application has been described. Next, the apparatus for executing the above method provided by the embodiments of the present application will be described. As Figure 18 shown, Figure 18 is a schematic structural diagram of an animation effect display apparatus provided by an embodiment of the present application. The animation effect display apparatus may be the terminal device in the embodiment of the present application, or a chip or a chip system within the terminal device.

[0470] As Figure 18 shown, the animation effect display apparatus 1800 may be used in a communication device, a circuit, a hardware component, or a chip. The animation effect display apparatus 1800 includes: a receiving unit 1801 and a processing unit 1802. Among them, the receiving unit 1801 is used to support the step of receiving information for executing the animation effect display method; the processing unit 1802 is used to support the animation effect display apparatus 1800 to execute the step of information processing.

[0471] In a possible implementation, the animation effect display apparatus 1800 may further include a communication unit 1803, and the communication unit 1803 is used to support the animation effect display apparatus 1800 to execute steps such as receiving or sending messages.

[0472] The dynamic effect display devices described in the embodiments of the present application may all include Figure 18 the units described in the corresponding embodiments.

[0473] Specifically, the processing unit 1802 and the receiving unit 1801 may be integrated together, and communication may occur between the processing unit 1802 and the receiving unit 1801.

[0474] In a possible implementation manner, the dynamic effect display device 1800 may further include: a storage unit 1804. Among them, the storage unit 1804 may include one or more memories, and the memory may be a device or a component in one or more devices or circuits for storing programs or data.

[0475] The storage unit 1804 may exist independently and be connected to the processing unit 1802 through a communication bus. The storage unit 1804 may also be integrated with the processing unit 1802.

[0476] Taking the dynamic effect display device 1800 as an example of the chip or chip system of the terminal device in the embodiments of the present application, the storage unit 1804 may store computer-executable instructions for the method of the terminal device, so that the processing unit 1802 executes the method of the terminal device in the above embodiments. The storage unit 1804 may be a register, a cache, or a random access memory (RAM), etc., and the storage unit 1804 may be integrated with the processing unit 1802. The storage unit 1804 may be a read-only memory (ROM) or other types of static storage devices that can store static information and instructions, and the storage unit 1804 may be independent of the processing unit 1802.

[0477] In a possible implementation manner, the dynamic effect display device 1800 may further include: a communication unit 1803. Among them, the communication unit 1803 is used to support the interaction between the dynamic effect display device 1800 and other devices. Exemplarily, when the dynamic effect display device 1800 is a terminal device, the communication unit 1803 may be a communication interface or an interface circuit. When the dynamic effect display device 1800 is a chip or chip system inside a terminal device, the communication unit 1803 may be a communication interface. For example, the communication interface may be an input / output interface, a pin, or a circuit, etc.

[0478] The device in this embodiment can correspondingly be used to execute the steps performed in the above method embodiments, and its implementation principle and technical effects are similar, which will not be elaborated here.

[0479] Figure 19 It is a schematic diagram of the hardware structure of another terminal device provided by the embodiments of the present application.

[0480] The terminal device includes a processor 1901, a communication line 1904, and at least one communication interface ( Figure 19 exemplarily, the communication interface 1903 is taken as an example for illustration).

[0481] The processor 1901 may be a general-purpose central processing unit (CPU), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits for controlling the execution of the program of the solution of the present application.

[0482] The communication line 1904 may include a circuit for transmitting information between the above components.

[0483] The communication interface 1903, using any device such as a transceiver, is used to communicate with other devices or communication networks, such as Ethernet, wireless local area networks (WLAN), etc.

[0484] Possibly, the terminal device may further include a memory 1902.

[0485] The memory 1902 may be a read-only memory (ROM) or other type of static storage device that can store static information and instructions, a random access memory (RAM) or other type of dynamic storage device that can store information and instructions, or an electrically erasable programmable read-only memory (EEPROM), a compact disc read-only memory (CD-ROM), or other optical disc storage, optical disc storage (including compact discs, laser discs, optical discs, digital versatile discs, Blu-ray discs, etc.), magnetic disk storage media, or any other medium that can be used to carry or store the desired program code in the form of instructions or data structures and can be accessed by a computer, but is not limited thereto. The memory may exist independently and be connected to the processor through the communication line 1904. The memory may also be integrated with the processor.

[0486] Wherein, the memory 1902 is used to store computer execution instructions for executing the solution of the present application, and is controlled by the processor 1901 to execute. The processor 1901 is used to execute the computer execution instructions stored in the memory 1902, so as to implement the method provided by the embodiments of the present application.

[0487] Optionally, the computer-executable instructions in the embodiments of the present application may also be referred to as application code, and the embodiments of the present application do not make specific limitations thereon.

[0488] In a specific implementation, as an embodiment, the processor 1901 may include one or more CPUs, such as Figure 19 CPU0 and CPU1 in

[0489] In a specific implementation, as an embodiment, the terminal device may include multiple processors, such as Figure 19 processor 1901 and processor 1905 in . Each of these processors may be a single-core (single-CPU) processor or a multi-core (multi-CPU) processor. The processor here may refer to one or more devices, circuits, and / or processing cores for processing data (such as computer program instructions).

[0490] In the above embodiments, the instructions stored in the memory for the processor to execute may be implemented in the form of a computer program product. Among them, the computer program product may be pre-written in the memory or may be downloaded and installed in the memory in the form of software.

[0491] The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions according to the embodiments of the present application are fully or partially generated. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions may be transmitted from one website, computer, server, or data center to another website, computer, server, or data center in a wired manner (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or a wireless manner (such as infrared, wireless, microwave, etc.). The computer-readable storage medium may be any available medium that the computer can store or a data storage device such as a server or data center including one or more integrated available media. For example, the available medium may include magnetic media (such as floppy disks, hard disks, or magnetic tapes), optical media (such as digital versatile discs (DVDs)), or semiconductor media (such as solid state disks (SSDs)), etc.

[0492] Embodiments of the present application also provide a computer-readable storage medium. The methods described in the above embodiments can be implemented in whole or in part by software, hardware, firmware, or any combination thereof. A computer-readable medium can include a computer storage medium and a communication medium, and can also include any medium that can transfer a computer program from one place to another. A storage medium can be any target medium accessible by a computer.

[0493] As a possible design, a computer-readable medium can include a compact disc read-only memory (CD-ROM), RAM, ROM, EEPROM, or other optical disc storage; a computer-readable medium can include a magnetic disk storage or other magnetic disk storage devices. Moreover, any connecting line can also be appropriately referred to as a computer-readable medium. For example, if software is transmitted using coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies (such as infrared, radio, and microwave) from a website, server, or other remote source, then the coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies such as infrared, radio, and microwave are included in the definition of the medium. As used herein, magnetic disks and optical discs include optical discs (CDs), laser discs, optical discs, digital versatile discs (DVDs), floppy disks, and Blu-ray discs, where magnetic disks typically reproduce data magnetically, while optical discs use lasers to optically reproduce data.

[0494] The above combinations should also be included within the scope of the computer-readable medium. The above is only the specific implementation of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art within the technical scope disclosed by the present invention can easily think of changes or substitutions, which should all be covered within the protection scope of the present invention. Therefore, the protection scope of the present invention should be subject to the protection scope of the claims.

Claims

1. A dynamic effect display method, characterized in that The method includes: The terminal device receives a first operation; In response to the first operation, when the terminal device is in the locked screen state, the terminal device generates a first dynamic effect in a first interface. The first interface includes at least one first element, and the first element includes at least one first sub-element. The first interface corresponds to a first view tree, and the first view tree includes at least one first sub-view. The at least one first sub-view corresponds to the at least one first element one by one. The first sub-element corresponds to a fifth view, and the parent view of the fifth view is the view corresponding to the first element to which the first sub-element belongs. In the first view tree, the parent view of the at least one first element is a first view, and the parent view of the first view is a second view. In the first dynamic effect, the terminal device performs a reduction and a downward translation on the at least one first element. The duration of the first dynamic effect includes a first moment and a second moment, and the second moment is after the first moment. The at least one first element includes a third element. The third element satisfies that a first distance is less than a second distance. The first distance is the distance between the third element and a first preset position at the first moment, and the second distance is the distance between the third element and the first preset position at the second moment. The first preset position is the top position of the first view; Among them, when the notification layout module detects a release event and the terminal device is in the locked screen state, a locked screen dynamic effect start flag is set. The notification position calculation class obtains a message for indicating an update of the locked screen notification from the notification layout module, determines the initial positions of each node, and the initial position offsets of each node corresponding to the initial positions of each node. The locked screen notification attribute calculation module obtains the initial position offsets of each node from the notification position calculation class, obtains the message change state from the message state detection module, and determines the final position offsets, the final transparencies, and the final display ratios of each node according to the message change state. The locked screen scene dynamic effect parameter calculation module determines the position offsets of each node at different time points, the transparencies of each node at different time points, and the display ratios of each node at different time points. The notification layout module obtains the position offsets of each node at different time points, the transparencies of each node at different time points, and the display ratios of each node at different time points from the locked screen scene dynamic effect parameter calculation module, and constructs a dynamic effect event according to the locked screen dynamic effect start flag. The locked screen scene dynamic effect execution module obtains the dynamic effect event from the notification layout module and constructs an Animator according to the dynamic effect event. Each element is a node, and the dynamic effect drawing of any element is realized according to at least one preset dynamic effect curve, so that multiple elements in the interface present a first dynamic effect of successive reduction or enlargement; In response to the first operation, when the terminal device is in an unlocked state, the terminal device determines that the at least one first element moves from a first position to a second position; the terminal device generates a second animation effect in a second interface, the second interface includes at least one second element, the second element includes at least one second sub - element, the second interface corresponds to a second view tree, the second view tree includes at least one second sub - view, the at least one second sub - view corresponds to the at least one second element one by one, the second sub - element corresponds to a sixth view, and the parent view of the sixth view is the view corresponding to the second element to which the sixth sub - element belongs; in the second view tree, the parent view of the at least one second element is a third view, and the parent view of the third view is a fourth view. In the second animation effect, the terminal device performs an upward or downward translation on the at least one first element, and the size of the at least one second element remains unchanged. Wherein, when the notification layout module detects a release event and the terminal device is in an unlocked state, it records the information corresponding to the release event and determines whether the terminal device is in a state of being able to rebound; the notification layout module sends the information corresponding to the release event to the scrolling speed calculation class and obtains the release speed from the scrolling speed calculation class; when the notification layout module determines that the release speed exceeds a second speed threshold, the scrolling management class obtains a message for indicating the start of fling from the notification layout module; the scrolling management class sends the release speed to the fling animation interpolator and obtains the scrolling value after release from the fling animation interpolator; the scrolling management class updates the stiffness coefficient of each node and the damping coefficient of each node; the scrolling management class obtains a message for indicating the calculation of the scrolling value corresponding to each frame of each node from the notification layout module and instructs the animation engine - physical animation node to update the control node and other nodes in sequence; the notification layout module obtains a message for indicating whether the scrolling has ended from the scrolling management class, and when it determines that the scrolling has ended, updates the scrolling value of each node in the current frame; the scrolling management class obtains the position offset of each node from the notification position calculation class; the animation engine - physical animation node obtains the scrolling value corresponding to each node from the notification position calculation class, determines the position offset of each node according to the scrolling value corresponding to each node, and the notification position calculation class obtains the position offset of each node from the animation engine - physical animation node; the notification layout module obtains the position offset of each node from the notification position calculation class, calls the display composition system, and uses the position offset of each node for layer drawing to obtain a second layer; wherein, the movement of the nodes as a whole constitutes a second animation effect. The at least one second element includes an eighth element. After the terminal device generates the second dynamic effect in the second interface, the terminal device receives a third operation on the second interface, and the third operation is a release operation on the eighth element; In response to the third operation, when the terminal device is in an unlocked state, the terminal device determines that the at least one second element moves from a fourth position to a fifth position; When the terminal device determines that the corresponding interface scroll value at the fifth position is greater than 0 and less than the maximum scroll value, the terminal device generates a fourth dynamic effect. In the fourth dynamic effect, the terminal device performs an upward or downward translation on the at least one first element, and the size of the at least one second element remains unchanged; wherein, the interface scroll value is the distance that the at least one second element moves compared to the first position, and the maximum scroll value is determined based on the height of each element in the at least one second element, the gap between adjacent elements, and the height of the third view; Wherein, the name of the first view is the same as the name of the third view, the name of the second view is the same as the name of the fourth view, the first view tree is mounted under the first window, the second view tree is mounted under the second window, the name of the first window is the same as the name of the second window, and any view represents a drawable space block in the interface of the terminal device and occupies a rectangular area in the interface. Within the rectangular area, the view object is responsible for graphic drawing and event handling.

2. The method according to claim 1, wherein The third element also satisfies that the display ratio of the third element at the first moment is greater than the display ratio of the third element at the second moment, and / or, the transparency of the third element at the first moment is greater than the transparency of the third element at the second moment.

3. The method according to claim 2, wherein The at least one first element includes: a fourth element, the third element is located above the fourth element, and at the first moment or the second moment, the transparency of the third element is greater than the transparency of the fourth element, and / or, the display ratio of the third element is greater than the display ratio of the fourth element.

4. The method according to claim 3, wherein When the terminal device performs a shrink and downward translation on the at least one first element, it includes: after a first time threshold for performing a shrink and downward translation on the fourth element, the terminal device performs a shrink and downward translation on the third element.

5. The method according to claim 4, characterized in that, The first interface includes a message list, and the message list includes the third element and the fourth element. The third element is the first element at the top of the message list. The method further includes: After a second time threshold for performing a shrink and downward translation on the third element, the terminal device displays a first control, and the first control is a message prompt control, and the second time threshold is greater than the first time threshold.

6. The method according to any one of claims 2-5, characterized in that, After the terminal device generates a first dynamic effect in the first interface, the method further includes: The terminal device receives a second operation on the first interface; In response to the second operation, when the terminal device is in the locked screen state, the terminal device generates a third dynamic effect, in which the terminal device performs magnification and upward translation on the at least one first element.

7. The method according to claim 6, wherein The duration of the third dynamic effect includes: a third moment and a fourth moment, the fourth moment being after the third moment, and the at least one first element includes: a fifth element. The fifth element satisfies one or more of the following: the display ratio of the fifth element at the third moment is less than the display ratio of the fifth element at the fourth moment, the transparency of the fifth element at the third moment is less than the transparency of the fifth element at the fourth moment, or a first distance is greater than a second distance. Wherein, the first distance is the distance between the fifth element and the first preset position at the third moment, and the second distance is the distance between the fifth element and the first preset position at the fourth moment.

8. The method according to claim 7, characterized in that, The at least one first element includes: a sixth element, the fifth element is located above the sixth element, and at the third moment or the fourth moment, the transparency of the fifth element is greater than the transparency of the sixth element, and / or, the display ratio of the fifth element is greater than the display ratio of the sixth element.

9. The method according to claim 8, wherein The terminal device performing magnification and upward translation on the at least one first element includes: the terminal device performing magnification and upward translation on the sixth element after a first time threshold for performing magnification and upward translation on the fifth element.

10. The method according to claim 9, characterized in that, The first interface further includes a first control, the first control is a message prompt control, the first interface includes a message list, the message list includes a fourth element and a fifth element, the fifth element is the first element at the bottom of the message list, and the method further includes: The terminal device performs magnification and upward translation on the fifth element after a third time threshold for canceling the display of the first control, and the third time threshold is greater than the first time threshold.

11. The method according to claim 10, characterized in that, The second operation is a trigger operation for the first control.

12. The method according to any one of claims 1-5, 7-11, characterized in that, The first operation is a trigger operation for a blank position in the first interface.

13. The method according to any one of claims 1-5, 7-11, characterized in that, The terminal device generating a first dynamic effect in the first interface includes: The terminal device obtains first parameters of the at least one first element at the first position and second parameters of the at least one first element at the second position, the first parameters including one or more of the following: the position of each element in the at least one first element at the first position, the display ratio of each element in the at least one first element at the first position, or the transparency of each element in the at least one first element at the first position, and the second parameters including one or more of the following: the position of each element in the at least one first element at the second position, the display ratio of each element in the at least one first element at the second position, or the transparency of each element in the at least one first element at the second position; The terminal device obtains a third parameter according to a first parameter, a second parameter, and at least one preset motion effect curve. The third parameter includes one or more of the following: the position of each element in the at least one first element within a first time range, the transparency of each element in the at least one first element within the first time range, or the display ratio of each element in the at least one first element within the first time range. The first time range is the time range during which the at least one first element moves from a first position to a second position; The terminal device generates the first motion effect by using the third parameter.

14. The method according to any one of claims 1-5, 7-11, characterized in that, The duration of the second motion effect includes: a fifth moment and a sixth moment, the sixth moment being after the fifth moment. The at least one second element further includes: a seventh element and a ninth element, the seventh element being above the eighth element, and the eighth element being above the ninth element. At the fifth moment, the interval between the seventh element and the eighth element is a first value, and the interval between the eighth element and the ninth element is a second value. At the sixth moment, the interval between the seventh element and the eighth element is a third value, and the interval between the eighth element and the ninth element is a fourth value. The first value is different from the third value, and the second value is different from the fourth value.

15. The method according to claim 14, wherein The first operation is an operation on the eighth element. In the second motion effect, the stiffness coefficient corresponding to the eighth element is greater than the stiffness coefficient corresponding to the ninth element, the damping coefficient corresponding to the eighth element is greater than the damping coefficient corresponding to the ninth element, the stiffness coefficient corresponding to the eighth element is greater than the stiffness coefficient corresponding to the seventh element, the damping coefficient corresponding to the eighth element is greater than the damping coefficient corresponding to the seventh element, the moment when the eighth element moves to the fourth position is earlier than the moment when the ninth element moves to the fourth position, and the moment when the eighth element moves to the fourth position is earlier than the moment when the seventh element moves to the fourth position.

16. The method according to claim 14, wherein When the first operation is an upward sliding operation on the eighth element and the first value is the same as the second value, the third value is less than the first value, and the fourth value is greater than the second value; or when the first operation is a downward sliding operation on the eighth element and the first value is the same as the second value, the third value is greater than the first value, and the fourth value is less than the second value.

17. The method according to claim 14, wherein The first operation is a sliding operation on the eighth element among the at least one second element. In response to the first operation, when the terminal device is in an unlocked state, the terminal device generates a second motion effect in a second interface, including: In response to the first operation, when the terminal device is in an unlocked state, the terminal device determines that the at least one second element moves from a third position to a fourth position; The terminal device determines the position of each of the at least one second element in the second time range according to a fourth parameter, where the fourth parameter includes: the position of each of the at least one second element in the third position, the position of each of the at least one second element in the fourth position, the time of the at least one second element in the third position, the sliding speed of each of the at least one second element, the rigidity coefficient of each of the at least one second element, and the damping coefficient of each of the at least one second element; The terminal device generates the second dynamic effect by using the position of each of the at least one second element in the second time range.

18. The method according to claim 1, wherein When the terminal device determines that the interface scrolling value corresponding to the fifth position is greater than 0 and less than the maximum scrolling value, the terminal device generates a fourth dynamic effect, including: When the terminal device determines that the interface scrolling value corresponding to the fifth position is greater than 0 and less than the maximum scrolling value, the terminal device determines the release speed; where the release speed is the speed generated when releasing the eighth element; The terminal device determines the position of each of the at least one second element in the third time range according to a fifth parameter, where the fifth parameter includes: the position of each of the at least one second element in the fourth position, the position of each of the at least one second element in the fifth position, the time of the at least one second element in the fourth position, the release speed of each of the at least one second element, the rigidity coefficient of each of the at least one second element, and the damping coefficient of each of the at least one second element; The terminal device generates the fourth dynamic effect by using the position of each of the at least one second element in the third time range.

19. The method according to claim 1, characterized in that, When the terminal device determines that the interface scrolling value corresponding to the fifth position is greater than 0 and less than the maximum scrolling value, the terminal device generates a fourth dynamic effect, including: when the terminal device determines that the interface scrolling value at the fifth position is less than 0 or greater than the maximum scrolling value, the terminal device determines the position of each of the at least one second element in the third time range according to a sixth parameter, where the sixth parameter includes: the position of each of the at least one second element in the fourth position, the position of each of the at least one second element in the fifth position, the time of the at least one second element in the fourth position, the rigidity coefficient of each of the at least one second element, and the damping coefficient of each of the at least one second element, the interface scrolling value is the distance that the at least one second element moves relative to the first position, and the maximum scrolling value is determined based on the height of each element in the at least one second element, the gap between adjacent elements, and the height of the third view; The terminal device generates the fourth animation effect by using the position of each of the at least one second element in the third time range.

20. A terminal device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, the terminal device is caused to execute the method according to any one of claims 1-19.

21. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, the computer is caused to execute the method according to any one of claims 1-19.

22. A computer program product, characterized in that, It includes a computer program which, when run, causes a computer to execute the method according to any one of claims 1-19.

Images