Method, device, equipment and storage medium for implementing pull-down refresh animation

Abstract

An embodiment of the present application proposes a method, apparatus, device and storage medium for implementing a pull-down refresh animation, the method comprising: displaying a first interface on a display interface, the first interface comprising a first display area for displaying a pull-down refresh control; forming a second display area for displaying an animation in the first display area when a pull-down start operation and a continuous pull-down operation of the pull-down refresh control are detected in the first display area; playing a first preset animation in the second display area when a pull-down distance corresponding to the continuous pull-down operation is greater than or equal to a first preset threshold; playing a second preset animation in the second display area after the first preset animation ends; displaying a second interface on the display interface when a pull-down end operation of the pull-down refresh control is detected in the first display area.

Description

Technical Field

[0001] The present application relates to interface display technology, and in particular to a method, apparatus, device and computer storage medium for implementing a pull-down refresh animation. Background Art

[0002] In the related art, the pull-down state of the pull-down refresh control directly depends on the user's pull-down gesture, and the user's gesture is a subjective operation. The user may cancel the gesture before the pull-down gesture reaches the control refresh threshold, or change it to an up-swipe gesture after reaching the threshold; the user's gesture operation directly causes the switching of the pull-down state to be relatively arbitrary, so the animation that depends on the pull-down state will have discontinuity problems during the switching process of the two parts of the animation. Summary of the Invention

[0003] The embodiments of the present application are intended to provide a method, apparatus, device, and computer storage medium for implementing a pull-down refresh animation.

[0004] In the first aspect, an embodiment of the present application provides a method for implementing a pull-down refresh animation, characterized in that it includes: displaying a first interface on a display interface, the first interface including a first display area for displaying a pull-down refresh control; when the first display area detects a pull-down start operation on the pull-down refresh control and a continuous pull-down operation on the pull-down refresh control, forming a second display area for displaying an animation in the first display area; when the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to a first preset threshold, playing a first preset animation in the second display area; after the first preset animation ends, playing a second preset animation in the second display area; when the first display area detects a pull-down end operation on the pull-down refresh control, displaying a second interface on the display interface.

[0005] In second aspect, an embodiment of the present application provides an implementation device of a pull-down refresh animation, comprising: a first display module for displaying a first interface on a display interface, the first interface comprising a first display area for displaying a pull-down refresh control; a detection module for detecting a pull-down start operation on the pull-down refresh control in the first display area; a formation module for forming a second display area for displaying an animation in the first display area when a pull-down start operation on the pull-down refresh control and a continuous pull-down operation on the pull-down refresh control are detected in the first display area; a first playback module for playing a first preset animation in the second display area when a pull-down distance corresponding to the continuous pull-down operation is greater than or equal to a first preset threshold; a second playback module for playing a second preset animation in the second display area after the first preset animation ends; and a second display module for displaying a second interface on the display interface when a pull-down end operation on the pull-down refresh control is detected in the first display area.

[0006] On the third aspect, the embodiment disclosed in the present application also provides a device for implementing a pull-down refresh animation, including a memory and a processor, wherein the memory stores a computer program that can be run on the processor, and is characterized in that when the processor executes the computer program, it implements the steps in the method for implementing the pull-down refresh animation described in any one of the above items.

[0007] In a fourth aspect, an embodiment of the present application further provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps in any of the above-mentioned methods for implementing the pull-down refresh animation.

[0008] In an embodiment of the present application, when the first display area displaying the pull-down refresh control detects the start pull-down operation of the pull-down refresh control and the continuous pull-down operation of the pull-down refresh space, a second display area for displaying the animation is formed in the first display area; when the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to the first preset threshold, the first preset animation is played in the second display area, and after the first preset animation is finished, the second preset animation is played in the second display area; therefore, the play of the first preset animation is determined according to the pull-down distance corresponding to the continuous pull-down operation, and the second preset animation is automatically played after the first preset animation is finished, and it does not directly depend on the user's pull-down gesture, that is, it does not depend on the state of the pull-down refresh control. Even if the user's gesture operation is relatively casual, the play of the first preset animation and the second preset animation will not have any discontinuity problems, and the animation effect during the pull-down process of the pull-down refresh control is relatively smooth.

[0009] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] The drawings herein are incorporated into and constitute a part of the specification. These drawings illustrate embodiments consistent with the present application and, together with the specification, are used to illustrate the technical solutions of the present application.

[0011] Figure 1A This is a schematic diagram of a display interface of a pull-down refresh control in a waiting state in the related art;

[0012] Figure 1B This is a schematic diagram of the display interface of the pull-down refresh control in the refresh preparation state in the related art;

[0013] Figure 1C This is a schematic diagram of the display interface of the pull-down refresh control in the refreshing state in the related art;

[0014] Figure 1D Schematic diagram of a display interface of a pull-down refresh control in the related art when the refresh is complete and the refresh result is a successful refresh;

[0015] Figure 2A This is a schematic diagram of the display effect of the first part of the animation in the related art;

[0016] Figure 2B This is a schematic diagram of the display effect of the second part of the animation in the related art;

[0017] Figure 3 A flowchart of a method for implementing a pull-down refresh animation provided in an embodiment of the present application;

[0018] Figure 4 A flowchart of another method for implementing a pull-down refresh animation provided in an embodiment of the present application;

[0019] Figure 5 A flowchart of another method for implementing a pull-down refresh animation provided in an embodiment of the present application;

[0020] Figure 6 A flowchart of a method for implementing a pull-down refresh animation provided in an embodiment of the present application;

[0021] Figure 7 A flowchart of another method for implementing a pull-down refresh animation provided in an embodiment of the present application;

[0022] Figure 8 A flowchart of another method for implementing a pull-down refresh animation provided in an embodiment of the present application;

[0023] Figure 9A flowchart for implementing an animation reset activity provided in an embodiment of the present application;

[0024] Figure 10 A flowchart of an activity implementation for canceling a pull-down operation before a pull-down refresh reaches an animation playback threshold provided by an embodiment of the present application;

[0025] Figure 11 A flowchart of an activity implementation of canceling a pull-down operation before a pull-down refresh reaches a refresh threshold provided by an embodiment of the present application;

[0026] Figure 12 A flowchart of an activity implementation of canceling a pull-down operation after a pull-down refresh reaches a control refresh threshold provided by an embodiment of the present application;

[0027] Figure 13 A flowchart of an activity implementation of a pull-down refresh triggering refresh state provided in an embodiment of the present application;

[0028] Figure 14 A flowchart for implementing pull-down refresh animation playback provided in an embodiment of the present application;

[0029] Figure 15 A flowchart for implementing an animation playback activity provided in an embodiment of the present application;

[0030] Figure 16 A flowchart for implementing the playback switching activity of animation 1 and animation 2 provided in an embodiment of the present application;

[0031] Figure 17 A schematic diagram of the overall animation effect of animation 1 and animation 2 provided in an embodiment of the present application;

[0032] Figure 18 A schematic diagram of the structure of a device for implementing a pull-down refresh animation provided in an embodiment of the present application;

[0033] Figure 19 A schematic diagram of the composition structure of a device for implementing a pull-down refresh animation provided in an embodiment of the present application. DETAILED DESCRIPTION

[0034] The present application will be further described in detail below in conjunction with the accompanying drawings and examples. It should be understood that the embodiments provided herein are merely intended to explain the present application and are not intended to limit the present application. In addition, the embodiments provided below are partial embodiments for implementing the present application, rather than providing all embodiments for implementing the present application. In the absence of conflict, the technical solutions described in the embodiments of the present application may be implemented in any combination.

[0035] It should be noted that, in the embodiments of the present application, the terms "comprise", "include" or any other variants thereof are intended to cover non-exclusive inclusion, so that a method or apparatus comprising a series of elements includes not only the elements explicitly stated, but also other elements not explicitly listed, or also includes elements inherent to the implementation of the method or apparatus. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the presence of other related elements (such as steps in the method or units in the apparatus, for example, a unit may be a portion of a circuit, a portion of a processor, a portion of a program or software, etc.) in the method or apparatus comprising the element.

[0036] The term "and / or" herein simply describes an association relationship between associated objects, indicating that three possible relationships exist. For example, "U and / or W" can represent three situations: the existence of U alone, the existence of both U and W, and the existence of W alone. Furthermore, the term "at least one" herein represents any combination of at least two of any one or more of a plurality of items. For example, "at least one of U, W, and V" can represent any one or more elements selected from the set consisting of U, W, and V.

[0037] The pull-down refresh control is an extended function of the list in the mobile application APP. It supports users to pull down the list to update the data in the list. The animation state can be directly controlled by the pull-down state of the pull-down refresh control.

[0038] Pull-down refresh control generally has 5 states: waiting, ready to refresh, refreshing, refresh completed and refresh failed. These 5 states are determined by the user's pull-down gesture and the refresh result. Initially, the pull-down refresh control is in the waiting state, such as Figure 1A As shown, the waiting state corresponds to image 11; when the user starts the pull-down operation and the pull-down distance reaches the control refresh threshold, the control enters the ready-to-refresh state, as shown in FIG. Figure 1B As shown, the ready to refresh state corresponds to image 12; the user releases the gesture, and the control triggers the refreshing state, as shown in Figure 1C As shown, the refreshing state corresponds to image 13; in the refreshing state, the pull-down refresh control waits for the refresh result to be returned. If the refresh result is successful, the refresh completion state of the pull-down refresh control is triggered, as shown in FIG. Figure 1D As shown, the refresh completion state corresponds to image 14; if the refresh result is failure, the refresh failure state is triggered, and then the control is reset to the waiting state to respond to the next interaction. In one embodiment, images 11, 12, 13 and 14 are preset still images or animations.

[0039] In related technologies, pull-down animations are generally divided into two parts: the first part is the animation that responds to the user's pull-down gesture, and the second part is the animation that informs the user that the page is responding. Generally speaking, the effects of the first part are quite diverse. For example, the animation effect can play according to the pull-down distance, play all at once, or play in a loop, etc., while the second part of the animation effect is generally only played in a loop and is kept in the refresh state at least when the pull-down refresh control is in the refresh state, to prevent users from mistakenly thinking that the interface is stuck and exiting.

[0040] Take the pull-down refresh control named 1 as an example. Figure 2A and 2B As shown, the first part of the animation is played all at once, showing the effect from closing the box to the appearance of the smiley face; the second part of the animation loops to play the box flashing and the smiley face blinking effects.

[0041] The related art involves playing the first animation portion after the pull-down refresh control is partially displayed. When the pull-down refresh control is in the refreshing state, the second animation portion begins playing in a loop until the control state is reset after the refresh is complete. This technique suffers from the drawback of inflexible animation playback, and the animation switching process is not smooth when the pull-down refresh control is pulled down.

[0042] Based on the above technical problems, the embodiment of the present application provides a method for implementing a pull-down refresh animation, such as Figure 3 As shown, the implementation method may include:

[0043] Step S301: displaying a first interface on a display interface, wherein the first interface includes a first display area for displaying a pull-to-refresh control.

[0044] In one possible implementation, the display interface may be a display interface of a mobile phone terminal, or a display interface of another device such as an iPad, a personal computer, etc. The first interface may be the interface currently displayed on the display interface, and a pull-to-refresh control may be displayed in the first display area of ​​the first interface.

[0045] In one example, the first display area of ​​the pull-down refresh control may be a partial area on the first interface. For example, for the first interface displaying a shopping cart, the first display area displaying the pull-down refresh control may be all areas below the shopping cart name identification display bar.

[0046] Step S302: when the first display area detects a pull-down start operation and a continuous pull-down operation on the pull-down refresh control, a second display area for displaying an animation is formed in the first display area.

[0047] Here, the pull-down start operation on the pull-down refresh control may be a selection operation on the pull-down refresh control; of course, the selection operation may be selecting any position in the first display area by holding the finger.

[0048] It is understandable that the second display area may be an area above the first display area that is vacant when the list corresponding to the pull-down refresh control in the first display area moves downward as the user continues to pull down the pull-down refresh control.

[0049] In one possible embodiment, when the first display area detects the start of the pull-down operation on the pull-down refresh control and the continued pull-down operation on the pull-down refresh control, a second display area for displaying the animation is formed in the first display area. The user can select and continue to pull down at any position in the first display area. The pull-down refresh animation implementation device detects the selection operation and the continued pull-down operation on the pull-down refresh control, and moves the list corresponding to the pull-down refresh control in the first display area downward, thereby leaving part of the area above the first display area empty, and the part of the area is used to display the animation.

[0050] Step S303: When the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to a first preset threshold, playing a first preset animation in the second display area.

[0051] Here, the first preset animation may be the initial animation displayed by the pull-down refresh control according to user needs or preferences along with the pull-down operation; here, the first preset animation is not specifically limited, and the first preset animation may be any animation expressing welcome.

[0052] In one example, the first preset threshold can be any threshold within a threshold range determined based on user habits and the size of the display interface, to facilitate user interface operation. For example, the first preset threshold can be any distance value between 1.5 cm and 2 cm. The first preset threshold can also be an animation playback threshold, used to determine whether animation playback can begin.

[0053] It is understood that before the first preset animation is played in the second display area, the static state of the first preset animation needs to be displayed first. In one possible implementation, the static state of the first preset animation can be gradually displayed as the user continues to pull down. When the continuous downward pull distance reaches a first preset threshold, the static state of the first preset animation is completely displayed.

[0054] In some possible implementations, when the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to the first preset threshold, the first preset animation is played in the second display area. It can be that when the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to the first preset threshold, the static state of the first preset animation is fully displayed, and after the static state of the first preset animation is fully displayed, the first preset picture starts to be played in the second display area.

[0055] Step S304: After the first preset animation is finished playing, a second preset animation is played in the second display area.

[0056] In one example, the second preset animation may be any looping animation indicating that the pull-to-refresh control is in the process of refreshing. The second preset animation may be selected and determined according to user needs and application scenarios.

[0057] In a possible implementation, after the first preset animation is finished playing, the second preset animation is played in the second display area. This may be done by starting to loop the second preset animation in the second display area after the first preset animation is finished playing.

[0058] Step S305: When the first display area detects that the pull-down end operation on the pull-to-refresh control is completed, the second interface is displayed on the display interface.

[0059] Here, the second interface may be the original interface of the display interface or the refreshed interface, and it needs to be determined based on whether the pull-down refresh control has completed refreshing when the pull-down operation ends.

[0060] In a possible embodiment, when the first display area detects the end of the pull-down operation on the pull-down refresh control, the second interface is displayed on the display interface. It can be that when the first display area detects the end of the pull-down operation on the pull-down refresh control and the pull-down refresh control has been refreshed, it is determined that the refreshed interface is displayed on the display interface.

[0061] In an embodiment of the present application, when the first display area displaying the pull-down refresh control detects the start pull-down operation of the pull-down refresh control and the continuous pull-down operation of the pull-down refresh space, a second display area for displaying the animation is formed in the first display area; when the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to the first preset threshold, the first preset animation is played in the second display area, and after the first preset animation is finished, the second preset animation is played in the second display area; therefore, the play of the first preset animation is determined according to the pull-down distance corresponding to the continuous pull-down operation, and the second preset animation is automatically played after the first preset animation is finished, and it does not directly depend on the user's pull-down gesture, that is, it does not depend on the state of the pull-down refresh control. Even if the user's gesture operation is relatively casual, the play of the first preset animation and the second preset animation will not have any discontinuity problems, and the animation effect during the pull-down process of the pull-down refresh control is relatively smooth.

[0062] Figure 4 A flowchart of another method for implementing a pull-down refresh animation provided in an embodiment of the present application is shown in FIG. Figure 4 As shown, the process may include:

[0063] Step S401: displaying a first interface on a display interface, wherein the first interface includes a first display area for displaying a pull-down refresh control.

[0064] Step S402: when the first display area detects a pull-down start operation and a continuous pull-down operation on the pull-down refresh control, a second display area for displaying an animation is formed in the first display area.

[0065] Step S403: When the pull-down distance corresponding to the pull-down operation is greater than or equal to a first preset threshold, it is determined whether the first preset animation has started to be played, and a first determination result is obtained.

[0066] In one possible implementation, when the pull-down distance corresponding to the pull-down operation is greater than or equal to a first preset threshold, it is determined whether the first preset animation has started to play, and a first judgment result is obtained. It can be that when the pull-down distance corresponding to the pull-down operation is greater than or equal to the first preset threshold, it is determined whether the pull-down animation refresh implementation device has started to play the first preset animation, and a judgment result of whether the first preset animation has started to play is obtained.

[0067] Step S404: When the first judgment result is that the first preset animation has started playing, no operation is performed.

[0068] Here, not performing any operation may mean that the playback module corresponding to the implementation device for pulling down the animation to refresh continues to play the first preset animation.

[0069] Step S405: when the first judgment result is that the first preset animation has not started playing, start playing the first preset animation.

[0070] Step S406: After the first preset animation finishes playing, the first preset animation is hidden.

[0071] In a possible implementation, after the first preset animation is finished playing, hiding the first preset animation may include hiding the playing portion of the first preset animation in the second display area after the first preset animation is finished playing.

[0072] Step S407: Start looping and playing the second preset animation in the second display area.

[0073] Step S408: When the first display area detects that the pull-down end operation on the pull-down refresh control has been completed, it is determined whether the pull-down refresh control has been refreshed, and a second determination result is obtained.

[0074] Here, the pull-down ending operation can be when the next operation of the pull-down operation is not a pull-down operation, for example, when the next operation is an upward swipe operation, and the operation corresponding to the point with the largest pull-down distance corresponding to the continued pull-down operation is the pull-down ending operation. Of course, after the pull-down operation is completed, the user may release the hand and no user operation is detected in the first display area. In this case, the pull-down ending operation is also the operation corresponding to the point with the largest pull-down distance corresponding to the continued pull-down operation.

[0075] In one example, there are two second judgment results: one is that the pull-to-refresh control has completed refreshing, and the other is that the pull-to-refresh control has not completed refreshing. The pull-to-refresh control's incomplete refreshing may be a situation where the pull-to-refresh control is terminated when the pull-down distance corresponding to the continued pull-down operation does not reach a first preset threshold; or other situations where the refresh is not completed.

[0076] Step S409: Displaying a second interface on the display interface according to the second judgment result.

[0077] Here, the second interface may include a refreshed display interface or the first interface.

[0078] In a possible embodiment, based on the second judgment result, the second interface is displayed on the display interface. When the refresh is completed, the refreshed new interface is displayed on the display interface, or when the refresh is not completed, the first interface is displayed on the display interface. The first interface here is the interface before the user pulls down the refresh space.

[0079] In an embodiment of the present application, a first judgment result is obtained by determining whether the first preset animation has started to play when the pull-down distance corresponding to the pull-down operation is greater than or equal to a first preset threshold; if the first judgment result is that the first preset animation has started to play, no operation is performed; if the first judgment result is that the first preset animation has not started to play, the first preset animation is started to play, so as to ensure the smooth playback of the first preset animation; by hiding the first preset animation after the first preset animation is finished playing; and starting to play the second preset animation in a loop in the second display area, the animation can be played in the same display area to remind the user of the status of the pull-down refresh control at the current moment; by determining whether the pull-down refresh control has been refreshed when the pull-down end operation of the pull-down refresh control is detected in the first display area, a second judgment result is obtained; and according to the second judgment result, the second interface is displayed on the display interface, so that the second interface displayed on the display interface meets the needs of the user.

[0080] Figure 5 A flowchart of another method for implementing a pull-down refresh animation provided in an embodiment of the present application is shown as follows: Figure 5 As shown, the process may include:

[0081] Step S501: displaying a first interface on a display interface, wherein the first interface includes a first display area for displaying a pull-to-refresh control.

[0082] Step S502: when the first display area detects a pull-down start operation and a continuous pull-down operation on the pull-down refresh control, a second display area for displaying an animation is formed in the first display area.

[0083] Step S503: When the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to a first preset threshold, playing a first preset animation in the second display area.

[0084] Step S504: After the first preset animation is finished playing, a second preset animation is played in the second display area.

[0085] Step S505: When the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to the second preset threshold, and the pull-down end operation of the pull-down refresh control is detected in the first display area, determine whether there are other operations on the pull-down refresh control after the pull-down end operation, and obtain a third judgment result; the second preset threshold is greater than the first preset threshold.

[0086] Here, the second preset threshold value may be any threshold value within a threshold range determined based on the first preset threshold value, the size of the display interface, and user habits. For example, the first preset threshold value may be any distance value between 2.5 centimeters and 3 centimeters. The second preset threshold value may be a refresh threshold value of the pull-to-refresh control. The pull-to-refresh control may enter the refreshing state only when the pull-down distance corresponding to a continued pull-down operation is detected to be greater than or equal to the second threshold value.

[0087] In one example, the other operation may be any operation other than the pull-down operation, for example, the other operation may be a swipe-up start operation, or a swipe-left or swipe-right operation. Here, the other operation does not include a pull-down end operation of the pull-down refresh control.

[0088] It can be understood that the third judgment result includes two results. One is that there are other operations on the pull-down refresh control after the pull-down operation is completed; the other is that there are no other operations on the pull-down refresh control after the pull-down operation is completed, that is, the user releases his finger, and the device implementing the pull-down refresh animation cannot detect any user operation in the first display area.

[0089] In one possible embodiment, when the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to a second preset threshold value, and when the first display area detects the end of the pull-down operation on the pull-down refresh control, it is determined whether there are other operations on the pull-down refresh control after the end of the pull-down operation, and a third judgment result is obtained. It can be that when the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to the refresh threshold value of the pull-down refresh control, the pull-down refresh control enters a ready-to-refresh state, and when the first display area detects the end of the pull-down operation on the pull-down refresh control, it is determined whether there is an up-slide start operation on the pull-down refresh control after the end of the pull-down operation, and a third judgment result is obtained.

[0090] Step S506: Determine the next state of the pull-to-refresh control according to the third judgment result.

[0091] Here, the next state of the pull-to-refresh control represents the state that the pull-to-refresh control enters after the pull-down distance corresponding to the continued pull-down operation is greater than or equal to the second preset threshold and the first display area detects that the pull-down operation on the pull-to-refresh control has ended. It is understandable that the next state may be any one of the refreshing state, refresh preparation state, refresh completion state, or waiting state (animation reset state) of the pull-to-refresh control.

[0092] In one example, the implementation method of determining the next state of the pull-down refresh control based on the third judgment result may be to determine that the next state of the pull-down refresh control is state 1 when the third judgment result is that there are other operations on the pull-down refresh control after the pull-down operation ends, and to determine that the next state of the pull-down refresh control is state 2 when the third judgment result is that there are no other operations on the pull-down refresh control after the pull-down operation ends.

[0093] Step S507: judging whether the pull-down refresh control has completed refreshing according to the next state of the pull-down refresh control, and obtaining a second judgment result.

[0094] In a possible implementation, based on the next state of the pull-down refresh control, it is determined whether the pull-down refresh control has completed refreshing, and a second judgment result is obtained. When the next state of the pull-down refresh control is state 1, the second judgment result is that the refresh of the pull-down refresh control has been completed; when the next state of the pull-down refresh control is state 2, the second judgment result is that the refresh of the pull-down refresh control has not been completed.

[0095] Step S508: When the second judgment result is that the pull-to-refresh control has completed refreshing, the refreshed display interface is displayed on the display interface.

[0096] In some possible implementations, when the first judgment result is that the pull-down refresh control has completed refreshing, the refreshed display interface is displayed on the display interface. The implementation device of the pull-down refresh animation may display the refreshed interface on the display interface when it determines that the pull-down refresh control has completed refreshing.

[0097] Step S509: when the second judgment result is that the pull-to-refresh control has not been refreshed, the first interface is displayed on the display interface.

[0098] In some possible implementations, when the second judgment result is that the pull-down refresh control has not completed the refresh, the first interface is displayed on the display interface. The implementation device of the pull-down refresh animation may display the initial interface on the display interface when it determines that the pull-down refresh control has not completed the refresh.

[0099] In an embodiment of the present application, since the method for determining whether the pull-down refresh control has completed the refresh is: when the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to the second preset threshold value, and when the pull-down end operation of the pull-down refresh control is detected in the first display area, it is determined whether there are other operations on the pull-down refresh control after the pull-down end operation. Therefore, the second judgment result obtained based on whether the refresh is completed can more accurately determine whether the pull-down refresh control has completed the refresh; at the same time, since when the second judgment result is that the pull-down refresh control has completed the refresh, the refreshed display interface is displayed on the display interface; when the second judgment result is that the pull-down refresh control has not completed the refresh, the initial interface is displayed on the display interface, therefore, the displayed interface can better meet the needs of users.

[0100] Figure 6 A flowchart of a method for implementing a pull-down refresh animation is provided in an embodiment of the present application, such as Figure 6 As shown, the process may include:

[0101] Step S601: Display a first interface on a display interface, where the first interface includes a first display area for displaying a pull-to-refresh control.

[0102] Step S602: When the first display area detects a pull-down start operation and a continuous pull-down operation on the pull-down refresh control, a second display area for displaying an animation is formed in the first display area.

[0103] Step S603: When the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to a first preset threshold, playing a first preset animation in the second display area.

[0104] Step S604: After the first preset animation is finished playing, a second preset animation is played in the second display area.

[0105] Step S605: When the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to the second preset threshold, and the pull-down end operation of the pull-down refresh control is detected in the first display area, determine whether there are other operations on the pull-down refresh control after the pull-down end operation, and obtain a third judgment result; the second preset threshold is greater than the first preset threshold.

[0106] Step S606: when the third judgment result is that there is no other operation on the pull-down refresh control, determining that the next state of the pull-down refresh control is a refreshing state.

[0107] In some possible implementations, if the third judgment result is that no other operations have been performed on the pull-to-refresh control, determining that the next state of the pull-to-refresh control is the refreshing state may be determined when the user releases the control and the pull-to-refresh animation implementation device does not detect any other operations on the pull-to-refresh control. It is understandable that if the pull-to-refresh animation implementation device does not detect any other operations on the pull-to-refresh control, the pull-to-refresh control directly enters the refreshing state.

[0108] Step S607: when the next state of the pull-down refresh control is the refreshing state, determining the second judgment result that the refresh of the pull-down refresh control is completed.

[0109] It is understandable that after the pull-down refresh control enters the refreshing state, the pull-down refresh control will continue to refresh until the refresh is completed, regardless of whether a swipe-up operation is detected.

[0110] In one possible implementation, when the next state of the pull-down refresh control is the refreshing state, the second judgment result is determined to be that the refresh of the pull-down refresh control is completed. Alternatively, when the next state of the pull-down refresh control is the refreshing state, the pull-down refresh control continues to refresh until the refresh is completed, and then the second judgment result is determined to be that the refresh of the pull-down refresh control is completed.

[0111] Step S608: When the second judgment result is that the pull-to-refresh control has completed refreshing, the refreshed display interface is displayed on the display interface.

[0112] In an embodiment of the present application, the method for determining whether the pull-down refresh control has completed refreshing is: when the third judgment result is that there are no other operations on the pull-down refresh control, determining that the next state of the pull-down refresh control is the refreshing state; when the next state of the pull-down refresh control is the refreshing state, determining that the pull-down refresh control has completed refreshing, therefore, a second judgment result of the pull-down refresh control completing refreshing can be obtained.

[0113] Figure 7 This is a flowchart of another method for implementing a pull-down refresh animation provided in an embodiment of the present application, such as Figure 7 As shown, the process may include:

[0114] Step S701: Display a first interface on a display interface, where the first interface includes a first display area for displaying a pull-to-refresh control.

[0115] Step S702: When the first display area detects a pull-down start operation and a continuous pull-down operation on the pull-down refresh control, a second display area for displaying an animation is formed in the first display area.

[0116] Step S703: When the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to a first preset threshold, playing a first preset animation in the second display area.

[0117] Step S704: After the first preset animation is finished playing, a second preset animation is played in the second display area.

[0118] Step S705: When the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to the second preset threshold, and the pull-down end operation of the pull-down refresh control is detected in the first display area, determine whether there are other operations on the pull-down refresh control after the pull-down end operation, and obtain a third judgment result; the second preset threshold is greater than the first preset threshold.

[0119] Step S706: When the third judgment result is that there is another operation on the pull-down refresh control, and the other operation is a swipe-up start operation, determine that the next state of the pull-down refresh control is an animation reset state.

[0120] It can be understood that the pull-to-refresh reset state may be the initial state of the pull-to-refresh control, that is, the waiting state.

[0121] In some possible implementations, when the third judgment result is that there are other operations on the pull-down refresh control, and the other operations are swipe-up start operations, the next state of the pull-down refresh control is determined to be the animation reset state. This can be when the user does not take their hand away after the pull-down is completed and continues to swipe upward, and the pull-down refresh animation implementation device detects the swipe-up start operation on the pull-down refresh control, the next state of the pull-down refresh control is determined to be the animation reset state.

[0122] Step S707: when the next state of the pull-down refresh control is the animation reset state, determining that the second judgment result is that the refresh of the pull-down refresh control is not completed.

[0123] In one possible implementation, when the next state of the pull-down refresh control is the animation reset state, it is determined that the second judgment result is that the refresh of the pull-down refresh control is not completed. It can be that when the next state of the pull-down refresh control is the animation reset state, the pull-down refresh control enters the initial state and determines that the refresh of the pull-down refresh control is completed.

[0124] Step S708: When the second judgment result is that the pull-to-refresh control has not been refreshed, the first interface is displayed on the display interface.

[0125] In an embodiment of the present application, the method for determining whether the pull-down refresh control has completed refreshing is: when the third judgment result is that there are other operations on the pull-down refresh control, and the other operations are swipe-up start operations, the next state of the pull-down refresh control is determined to be the animation reset state; when the next state of the pull-down refresh control is the animation reset state, it is determined that the pull-down refresh control has not completed refreshing, therefore, a second judgment result of the pull-down refresh control not completing refreshing can be obtained.

[0126] Figure 8 A flowchart of another method for implementing a pull-down refresh animation provided in an embodiment of the present application is shown as follows: Figure 8 As shown, the process may include:

[0127] Step S801: Display a first interface on a display interface, where the first interface includes a first display area for displaying a pull-down refresh control.

[0128] Step S802: When the first display area detects a pull-down start operation and a continuous pull-down operation on the pull-down refresh control, a second display area for displaying an animation is formed in the first display area.

[0129] Step S803: When the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to a first preset threshold, playing a first preset animation in the second display area.

[0130] Step S804: After the first preset animation is finished playing, a second preset animation is played in the second display area.

[0131] Step S805: When the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to the second preset threshold, and the pull-down end operation of the pull-down refresh control is detected in the first display area, determine whether there are other operations on the pull-down refresh control after the pull-down end operation, and obtain a third judgment result; the second preset threshold is greater than the first preset threshold.

[0132] Step S806: When the third judgment result is that there are other operations on the pull-down refresh control, and the other operations are swipe-up start operations, determine whether the swipe-up distance corresponding to the continuous swipe-up operation on the pull-down refresh control is greater than or equal to the third preset threshold, and obtain a fourth judgment result.

[0133] Here, the third preset threshold may be a value smaller than the first preset threshold, and the third preset threshold may be determined comprehensively based on the size of the display interface and user habits. For example, the third preset threshold may be any distance value between 1 cm and 1.5 cm. The third preset threshold may be an animation reset threshold for the pull-down refresh control. The pull-down refresh control enters the animation reset state only when it detects that the sliding distance corresponding to the continuous upward sliding operation on the pull-down refresh control is greater than or equal to the third preset threshold.

[0134] In one example, the fourth judgment result may include two types, one is that the sliding distance corresponding to the continuous sliding operation of the pull-down refresh control is greater than or equal to the third preset threshold; the other is that the sliding distance corresponding to the continuous sliding operation of the pull-down refresh control is less than the third preset threshold.

[0135] In some possible implementations, when the third judgment result is that there are other operations on the pull-down refresh control, and the other operations are swipe-up start operations, it is determined whether the swipe-up distance corresponding to the continuous swipe-up operation on the pull-down refresh control is greater than or equal to the third preset threshold value to obtain a fourth judgment result. It can be that when it is determined that there is a swipe-up start operation on the pull-down refresh control, it is determined whether the swipe-up distance corresponding to the continuous swipe-up operation on the pull-down refresh control is greater than or equal to the third preset threshold value to obtain the fourth judgment result.

[0136] Step S807: When the fourth judgment result is that the sliding distance corresponding to the continuous sliding operation is greater than or equal to the third preset threshold, determine that the next state of the pull-to-refresh control is the animation reset state.

[0137] In some possible implementations, when the fourth judgment result is that the sliding distance corresponding to the continuous sliding operation is greater than or equal to the third preset threshold, the next state of the pull-down refresh control is determined to be the animation reset state. It can be that when the sliding distance corresponding to the continuous sliding operation is greater than or equal to the animation reset threshold, the next state of the pull-down refresh control is determined to be the animation reset state.

[0138] Step S808: when the next state of the pull-down refresh control is the animation reset state, determining that the second judgment result is that the refresh of the pull-down refresh control is not completed.

[0139] Step S809: When the second judgment result is that the pull-to-refresh control has not been refreshed, the first interface is displayed on the display interface.

[0140] In an embodiment of the present application, by determining whether the sliding distance corresponding to the continuous sliding operation on the pull-down refresh control is greater than or equal to a third preset threshold when there is a sliding-up start operation on the pull-down refresh control, and when it is determined that the sliding distance corresponding to the continuous sliding operation is greater than or equal to the third preset threshold, determining that the next state of the pull-down refresh control is the animation reset state, it can avoid the user's incorrect sliding action leading to an uncertain state of the pull-down refresh control.

[0141] In one embodiment, from the user's perspective, the pull-down and swipe-up of the list corresponding to the entire pull-down refresh control are free and unobstructed. In order to respond to the user's interaction, several threshold settings are made on the pull-down distance, from short to long: animation reset threshold, animation playback threshold, control refresh threshold, and other conditions are combined to trigger corresponding interactive behaviors.

[0142] In the embodiment of the present application, since the second part of the animation is played in a loop, an animation reset threshold is required to set the animation to an initial static state so that the entire animation process responds to the next pull-down operation of the pull-down refresh control. The reset activity can be seen in the animation reset activity diagram, see Figure 9 If the pull-to-refresh control does not enter the refresh state and the user cancels the pull-to-refresh gesture, the animation reset is triggered after the upward sliding distance reaches the animation reset threshold. For a timing diagram of canceling the pull-to-refresh operation before the pull-to-refresh reaches the playback threshold, see Figure 10 , cancel the pull-down sequence diagram before the pull-down refresh reaches the refresh threshold, see Figure 11 , cancel the pull-down sequence diagram after the pull-down refresh reaches the refresh threshold, see Figure 12 In addition, if the control enters the refresh state, after the refresh is completed, the list corresponding to the pull-down refresh control rolls back to the animation reset threshold, triggering the animation reset. The pull-down refresh triggers the refresh state timing diagram to describe this process. Figure 13 .

[0143] In the embodiment of the present application, the animation is in a static state when it is not fully exposed. Only when the user pulls down to a certain distance (animation playback threshold) does the animation enter the playback process in order to prompt the user to start the animation response. After the animation is played, the switching between the first and second parts and the loop of the second part are managed by the animation itself, and are no longer related to the control state and the pull-down distance. Pull-down to refresh the animation playback timing diagram (see Figure 14 ), animation play activity diagram (see Figure 15 ), animation 1 and animation 2 switch activity diagram (see Figure 16 ) depicts the process.

[0144] In an embodiment of the present application, after the animation starts playing, if the user continues to pull down, the control refresh threshold may be reached. After reaching the control refresh threshold, the user may have two possible operations: the first is to release the finger, and the control will enter the refreshing state. In the refreshing state, the user may forcibly swipe up to refresh the list corresponding to the control to the animation reset threshold, but the animation will only be truly reset after the refresh is completed to prevent the user from pulling down again to see the abnormal animation state; the second operation may be a swipe up operation. At this time, the sliding distance of the list corresponding to the pull-down refresh control will be lower than the control refresh threshold, and the pull-down refresh control will not enter the refreshing state, and the animation reset operation will no longer depend on the control state.

[0145] In the embodiment of the present application, from the inside of the control, the first part of the animation is a one-time animation, and the second part of the animation is a looping animation. The first part of the animation (animation 1) and the second part of the animation (animation 2) can be a whole. When the list corresponding to the pull-down refresh control slides down to the animation playback threshold, the playback of the entire animation begins. If the list corresponding to the pull-down refresh control slides up to the animation reset threshold before or after the refresh is triggered by the pull-down refresh control, the playback of the entire animation ends and the animation is reset. Here, the first part of the animation is an implementation of the first preset animation, and the second part of the animation is an implementation of the second preset animation.

[0146] like Figure 9 As shown, the steps to implement the animation reset activity of the device by pulling down to refresh animation are:

[0147] Step S901: Slide up to reach the animation reset threshold.

[0148] Here, step S901 may include: in the sliding control part, when the user's sliding distance reaches the animation reset threshold, that is, the pull-down refresh animation implementation device detects that the sliding distance corresponding to the continuous sliding operation reaches the animation reset threshold.

[0149] Step S902: Determine whether the state of the pull-down refresh control is in the refresh preparation state. If so, proceed to step S903; if not, proceed to step S904.

[0150] Step S903: Determine whether the animation has been reset. If so, end the operation. If not, proceed to step S905.

[0151] Here, animation resetting refers to resetting the animation state included in resetting the pull-to-refresh control.

[0152] Step S904: Continue playing the animation and go to step S902.

[0153] Step S905: Reset the animation.

[0154] like Figure 10 As shown, the slide controller represents the component that handles the scrolling logic in the list corresponding to the pull-to-refresh control; the animation controller represents the component that manages the playback status of a specific animation; the steps for canceling the pull-to-refresh operation before the animation playback threshold is reached include:

[0155] Step S1001: Pull-down gesture.

[0156] Here, the pull-down gesture may be a pull-down gesture performed by the user, and the sliding controller performs a corresponding pull-down gesture response according to the pull-down gesture of the user.

[0157] Step S1002: Display.

[0158] Here, the display may be that the first part of the animation is gradually displayed in the second display area of ​​the display interface through the animation controller following the user's pull-down gesture.

[0159] Step S1003: Display the first part of the animation.

[0160] It can be understood that displaying the first part of the animation may refer to completely displaying the first part of the animation in the second display area; and, after the first part of the animation is completely displayed, the first part of the animation will be played.

[0161] Step S1004: Slide upward.

[0162] Here, sliding upward means that the user slides upward directly without taking the hand off the display interface after the pull-down gesture ends; the sliding controller performs a corresponding upward sliding response according to the user's upward sliding gesture.

[0163] Step S1005: Slide to the animation reset threshold.

[0164] Here, the sliding reaching animation reset threshold may be that the user slides up to reach the animation reset threshold, and the device implementing the pull-down refresh animation detects that the sliding distance corresponding to the user's sliding operation reaches the animation reset threshold.

[0165] Step S1006: Animation reset.

[0166] like Figure 11 As shown in the figure, the steps to cancel the pull-down operation before the pull-down refresh reaches the refresh threshold include:

[0167] Step S1101: Pull-down gesture.

[0168] Step S1102: Display.

[0169] Step S1103: Display the first part of the animation.

[0170] Step S1104: The pull-down distance reaches the animation playback threshold.

[0171] Here, the pull-down distance reaching the animation playing threshold may be that the user continues to pull down the guidance distance reaching the animation playing threshold, and the control device for pulling down to refresh the animation detects that the pull-down distance reaches the animation playing threshold.

[0172] Step S1105: Play.

[0173] It can be understood that when the first part of the animation is fully displayed and the pull-down distance reaches the playback threshold, the animation is ready to play.

[0174] Step S1106: Play the first part of the animation.

[0175] Here, the first part of the animation may be played in the second display area on the display interface under control of the animation controller.

[0176] Step S1107: The first part of the animation is finished playing.

[0177] Here, the first part of the animation may be hidden after the animation controller detects that the first part of the animation has finished playing.

[0178] Step S1108: Display the second part of the animation.

[0179] It is understandable that after the first part of the animation is played, the animation controller can control the second part of the animation to be displayed in the second display area of ​​the display interface. Here, the second part of the animation can be fully displayed at one time.

[0180] Step S1109: Play the second part of the animation in a loop.

[0181] Here, the second part of the animation can be played in a loop in the second display area on the display interface through the animation controller.

[0182] Step S1110: Release your finger.

[0183] It is understandable that the user releasing the finger may be that the user's finger leaves the display interface, and the sliding controller cannot detect the user's finger touch operation.

[0184] Step S1111: Slide upwards.

[0185] Step S1112: Slide to the animation reset threshold.

[0186] Step S1113: Animation reset.

[0187] like Figure 12 As shown in the figure, the steps to cancel the pull-down operation after the pull-down refresh reaches the control refresh threshold include:

[0188] Step S1201: Pull-down gesture.

[0189] Step S1202: Display.

[0190] Step S1203: Display the first part of the animation.

[0191] Step S1204: The pull-down distance reaches the playback threshold.

[0192] Step S1205: Play.

[0193] Step S1206: Play the first part of the animation.

[0194] Step S1207: The first part of the animation is played.

[0195] Step S1208: Display the second part of the animation.

[0196] Step S1209: Play the second part of the animation in a loop.

[0197] Step S1210: The pull-down distance reaches the control refresh threshold.

[0198] It is understandable that the pull-down distance reaching the control refresh threshold may be that the user continues to pull down to the control refresh threshold, and the control device of the pull-down refresh animation detects that the pull-down distance reaches the control refresh threshold.

[0199] Step S1211: Prepare to refresh.

[0200] Here, ready to refresh means that the pull-down refresh control enters the ready to refresh state.

[0201] Step S1212: Slide upwards.

[0202] Step S1213: Waiting.

[0203] Here, waiting may mean that the pull-down refresh control is in a waiting state.

[0204] Step S1214: Continue sliding up or release your finger.

[0205] Here, continuing to slide up or releasing the finger may mean that the user continues to slide up or the user releases the finger, and the control device of the pull-down refresh animation detects the continued upward sliding or does not detect the user operation.

[0206] Step S1215: Slide to the animation reset threshold.

[0207] Step S1216: Animation reset.

[0208] like Figure 13 As shown, the active steps of pulling down to refresh to trigger the refresh state include:

[0209] Step S1301: Pull-down gesture.

[0210] Step S1302: Display.

[0211] Step S1303: Display the first part of the animation.

[0212] Step S1304: The pull-down distance reaches the playback threshold.

[0213] Step S1305: Play.

[0214] Step S1306: Play the first part of the animation.

[0215] Step S1307: The first part of the animation is played.

[0216] Step S1308: Display the second part of the animation.

[0217] Step S1309: Play the second part of the animation in a loop.

[0218] Step S1310: The pull-down distance reaches the control refresh threshold.

[0219] Step S1311: Prepare to refresh.

[0220] Step S1312: Release your finger.

[0221] Step S1313: Refresh.

[0222] Here, refresh means that the pull-down refresh control is in the refreshing state.

[0223] Step S1314: Refresh completed.

[0224] Here, the refresh completion may be that the pull-down refresh control refreshes and the refresh return result is obtained.

[0225] Step S1315: Slide upward.

[0226] Step S1316: Slide to the animation reset threshold.

[0227] Step S1317: Animation reset.

[0228] like Figure 14 As shown, the steps of pulling down to refresh the animation include:

[0229] Step S1401: Pull-down gesture.

[0230] Step S1402: Display.

[0231] Step S1403: Display the first part of the animation.

[0232] Step S1404: The pull-down distance reaches the playback threshold.

[0233] Step S1405: Play.

[0234] Step S1406: Play the first part of the animation.

[0235] Step S1407: The first part of the animation is played.

[0236] Step S1408: Display the second part of the animation.

[0237] Step S1409: Play the second part of the animation in a loop.

[0238] like Figure 15 As shown, the steps of animation playback include:

[0239] Step S1501: Pull down to reach the animation playback threshold.

[0240] Here, step S1501 may include: in the sliding control part, when the user pulls down a distance that reaches the animation playback threshold, that is, the pull-down refresh animation implementation device detects that the pull-down distance corresponding to the continuous pull-down operation reaches the animation playback threshold.

[0241] Step S1502: Determine whether the animation has not been played yet. If so, proceed to step S1503; if not, end the operation.

[0242] Here, step S1502 may be that the device implementing the pull-down refresh animation determines whether the animation has not been played.

[0243] Step S1503: Play.

[0244] Here, the playback may be controlled by the animation controller to start playing the first part of the animation.

[0245] like Figure 16 As shown, the steps for switching between animation 1 and animation 2 include:

[0246] Step 1601: Animation 1 plays.

[0247] Here, playing animation 1 includes playing animation 1 and determining whether animation 1 has been played. If so, proceed to step S1602. If not, continue playing animation 1 and then re-enter step 1601.

[0248] Step 1602: Hide.

[0249] Here, hiding means that the implementation device of the pull-down refresh animation hides animation 1 in the second display area;

[0250] Step 1603: Display.

[0251] Here, displaying refers to displaying the animation 2 in the second display area. It can be understood that the animation 2 can be displayed at one time.

[0252] Step 1604: Animation 2 plays.

[0253] Here, playing animation 2 means playing animation 2 and determining whether it is reset. If so, ending the animation playing; if not, continuing to play animation 2.

[0254] Figure 17 This is a schematic diagram of the overall animation effect of animation 1 and animation 2 provided in the embodiment of the present application; Figure 17 As shown, Animation 1 and Animation 2 can be regarded as one animation, and the animation itself maintains the transition between the two parts.

[0255] Figure 18 A device for implementing a pull-down refresh animation is provided in the embodiment of the present application, such as Figure 18 As shown, the device may include:

[0256] A first display module 1801 is configured to display a first interface on a display interface, where the first interface includes a first display area for displaying a pull-to-refresh control;

[0257] A forming module 1802 is configured to form a second display area for displaying an animation in the first display area when a pull-down start operation and a continuous pull-down operation on the pull-down refresh control are detected in the first display area;

[0258] A first playing module 1803 is configured to play a first preset animation in the second display area when the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to a first preset threshold;

[0259] The second playing module 1804 is configured to play a second preset animation in the second display area after the first preset animation is played;

[0260] The second display module 1805 is configured to display a second interface on the display interface when the first display area detects that the pull-down end operation on the pull-to-refresh control has been completed.

[0261] In one embodiment, the first playback module 1803 is used to determine whether the first preset animation has started playing when the pull-down distance corresponding to the pull-down operation is greater than or equal to the first preset threshold, and obtain a first judgment result; if the first judgment result is that the first preset animation has not started playing, start playing the first preset animation.

[0262] In one embodiment, the second playing module 1804 is configured to hide the first preset animation after the first preset animation is finished playing; and start looping the second preset animation in the second display area.

[0263] In one embodiment, the second display module 1805 is used to determine whether the pull-down refresh control has completed refreshing when the first display area detects the end of the pull-down operation on the pull-down refresh control, and obtain a second judgment result; based on the second judgment result, the second interface is displayed on the display interface.

[0264] In one embodiment, the second interface includes a refreshed display interface or the first interface, and the second display module 1805 is used to display the refreshed display interface of Sohu on the display interface when the second judgment result is that the pull-down refresh control has been refreshed; and to display the first interface on the display interface when the first judgment result is that the pull-down refresh control has not been refreshed.

[0265] In one embodiment, the second display module 1805 is used to determine whether there are other operations on the pull-down refresh control after the pull-down end operation when the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to the second preset threshold and the pull-down end operation of the pull-down refresh control is detected in the first display area, and obtain a third judgment result; the second preset threshold is greater than the first preset threshold; determine the next state of the pull-down refresh control according to the third judgment result; and determine whether the pull-down refresh control has completed refreshing according to the next state of the pull-down refresh control to obtain the second judgment result.

[0266] In one embodiment, the second display module 1805 is used to determine that the next state of the pull-down refresh control is a refreshing state when the third judgment result is that there is no other operation on the pull-down refresh control; when the next state of the pull-down refresh control is the refreshing state, determine that the second judgment result is that the refresh of the pull-down refresh control is completed, and obtain the first judgment result.

[0267] In one embodiment, the second display module 1805 is used to determine that the next state of the pull-down refresh control is the animation reset state when the third judgment result is that there are other operations on the pull-down refresh control and the other operations are swiping up to start operations; and when the next state of the pull-down refresh control is the animation reset state, determine that the second judgment result is that the refresh of the pull-down refresh control is not completed.

[0268] In one embodiment, the second display module 1805 is used to determine whether the sliding distance corresponding to the continuous sliding up operation on the pull-down refresh control is greater than or equal to the third preset threshold when the third judgment result is that there are other operations on the pull-down refresh control and the other operations are sliding up to start operations, to obtain a fourth judgment result; when the fourth judgment result is that the sliding distance corresponding to the continuous sliding up operation is greater than or equal to the third preset threshold, determine that the next state of the pull-down refresh control is the animation reset state.

[0269] In actual applications, the first display module 1801, the formation module 1802, the first playback module 1803, the second playback module 1804 and the second display module 1805 can be implemented using the processor in the device for implementing the pull-down refresh animation. The above-mentioned processor can be at least one of ASIC, DSP, DSPD, PLD, FPGA, CPU, controller, microcontroller, and microprocessor.

[0270] In addition, the functional modules in this embodiment may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated units may be implemented in the form of hardware or software functional modules.

[0271] If the integrated unit is implemented as a software functional module and is not sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this embodiment, or the portion that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which can be a personal computer, server, or network device, etc.) or a processor to execute all or part of the steps of the method described in this embodiment. The aforementioned storage medium includes various media that can store program code, such as a USB flash drive, a mobile hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0272] Generally speaking, the computer program instructions corresponding to the implementation method of a pull-down refresh animation in this embodiment can be stored on a storage medium such as a CD, a hard disk, or a USB flash drive. When the computer program instructions corresponding to the implementation method of a pull-down refresh animation in the storage medium are read or executed by a pull-down refresh animation implementation device, any one of the pull-down refresh animation implementation methods of the aforementioned embodiments is implemented.

[0273] Based on the same technical concept as the above embodiment, see Figure 19 , which shows a schematic diagram of the composition structure of a device for implementing a pull-down refresh animation provided by an embodiment of the present application, which may include: a memory 1901 and a processor 1902; wherein,

[0274] The memory 1901 is used to store computer programs and data;

[0275] The processor 1902 is configured to execute the computer program stored in the memory to implement any one of the pull-to-refresh animation implementation methods of the aforementioned embodiments.

[0276] In actual applications, the above-mentioned memory 1901 can be a volatile memory (volatile memory), such as RAM; or a non-volatile memory (non-volatile memory), such as ROM, flash memory, hard disk drive (HDD) or solid-state drive (SSD); or a combination of the above types of memory, and provide instructions and data to the processor 1902.

[0277] The processor 1902 may be at least one of an ASIC, a DSP, a DSPD, a PLD, an FPGA, a CPU, a controller, a microcontroller, and a microprocessor. It is understood that for different augmented reality cloud platforms, the electronic device used to implement the above processor functions may also be other, and this embodiment of the application is not limited thereto.

[0278] In some embodiments, the functions or modules included in the device provided in the embodiments of the present application can be used to execute the method described in the above method embodiments. Its implementation can refer to the description of the above method embodiments. For the sake of brevity, it will not be repeated here.

[0279] The above description of the various embodiments tends to emphasize the differences between the various embodiments. The same or similar aspects can be referenced with each other and will not be repeated herein for the sake of brevity.

[0280] The methods disclosed in the various method embodiments provided in this application can be arbitrarily combined without conflict to obtain new method embodiments.

[0281] The features disclosed in the various product embodiments provided in this application can be arbitrarily combined without conflict to obtain new product embodiments.

[0282] The features disclosed in the various method or device embodiments provided in this application can be arbitrarily combined without conflict to obtain new method embodiments or device embodiments.

[0283] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus the necessary general hardware platform, and of course can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for enabling a terminal (which can be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in each embodiment of the present application.

[0284] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned implementation methods. The above-mentioned implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.

Claims

1. A method for implementing a pull-down refresh animation, characterized in that: include: Displaying a first interface on a display interface, wherein the first interface includes a first display area for displaying a pull-to-refresh control; forming a second display area for displaying an animation in the first display area when the first display area detects a pull-down start operation and a continuous pull-down operation on the pull-down refresh control; When the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to a first preset threshold, playing a first preset animation in the second display area; The first preset animation is the initial animation displayed by the pull-down refresh control when the pull-down operation is performed; After the first preset animation is finished playing, a second preset animation is played in the second display area; the second preset animation represents a looping animation in which the pull-to-refresh control is refreshing; the first preset animation and the second preset animation are a whole; When the first display area detects that the pull-down end operation of the pull-down refresh control is completed, the second interface is displayed on the display interface.

2. The method according to claim 1, characterized in that The playing of the first preset animation in the second display area when the pull-down distance corresponding to the continuous pull-down operation is greater than or equal to a first preset threshold includes: If the pull-down distance corresponding to the pull-down operation is greater than or equal to the first preset threshold, determining whether the first preset animation has started to play, and obtaining a first determination result; When the first judgment result is that the first preset animation has not started playing, the first preset animation starts playing.

3. The method according to claim 1, characterized in that Playing the second preset animation in the second display area after the first preset animation is finished playing includes: After the first preset animation finishes playing, hiding the first preset animation; The second preset animation starts to be played in a loop in the second display area.

4. The method according to claim 1, wherein The step of displaying a second interface on the display interface when a pull-down end operation on the pull-to-refresh control is detected in the first display area includes: When the first display area detects that the pull-down end operation of the pull-down refresh control has been completed, determining whether the pull-down refresh control has been refreshed, and obtaining a second determination result; According to the second judgment result, the second interface is displayed on the display interface.

5. The method according to claim 4, characterized in that The second interface includes a refreshed display interface or the first interface, and displaying the second interface on the display interface according to the second judgment result includes: If the second judgment result is that the pull-to-refresh control has completed refreshing, displaying the refreshed display interface on the display interface; When the second judgment result is that the pull-to-refresh control has not been refreshed, the first interface is displayed on the display interface.

6. The method according to claim 4, characterized in that The step of determining whether the pull-down refresh control has been refreshed when the pull-down end operation on the pull-down refresh control is detected in the first display area, and obtaining a second determination result includes: If the pull-down distance corresponding to the continued pull-down operation is greater than or equal to a second preset threshold, and a pull-down end operation on the pull-to-refresh control is detected in the first display area, determining whether there is another operation on the pull-to-refresh control after the pull-down end operation, and obtaining a third determination result; the second preset threshold is greater than the first preset threshold; Determining a next state of the pull-to-refresh control according to the third judgment result; According to the next state of the pull-down refresh control, it is determined whether the pull-down refresh control has completed refreshing, and the second determination result is obtained.

7. The method according to claim 6, characterized in that Determining the next state of the pull-to-refresh control according to the third judgment result includes: if the third judgment result is that there is no other operation on the pull-to-refresh control, determining that the next state of the pull-to-refresh control is a refreshing state; The step of determining whether the pull-down refresh control has completed refreshing based on the next state of the pull-down refresh control to obtain the second judgment result includes: when the next state of the pull-down refresh control is the refreshing state, determining that the second judgment result is that the pull-down refresh control has completed refreshing.

8. The method according to claim 6, characterized in that Determining the next state of the pull-to-refresh control according to the third judgment result includes: if the third judgment result is that there is another operation on the pull-to-refresh control, and the other operation is a swipe-up start operation, determining that the next state of the pull-to-refresh control is an animation reset state; The determining whether the pull-down refresh control has completed refreshing based on the next state of the pull-down refresh control to obtain the second judgment result includes: when the next state of the pull-down refresh control is the animation reset state, determining that the second judgment result is that the pull-down refresh control has not completed refreshing.

9. The method according to claim 8, characterized in that When the third judgment result is that there is another operation on the pull-to-refresh control, and the other operation is a swipe-up start operation, determining that the next state of the pull-to-refresh control is an animation reset state includes: If the third judgment result is that the other operation on the pull-down refresh control exists and the other operation is a swipe-up start operation, determining whether a swipe-up distance corresponding to the continuous swipe-up operation on the pull-down refresh control is greater than or equal to a third preset threshold, thereby obtaining a fourth judgment result; When the fourth judgment result is that the sliding distance corresponding to the continuous sliding operation is greater than or equal to the third preset threshold, it is determined that the next state of the pull-to-refresh control is the animation reset state.

10. A device for implementing a pull-down refresh animation, characterized in that: include: A first display module is configured to display a first interface on a display interface, wherein the first interface includes a first display area for displaying a pull-to-refresh control; a forming module, configured to form a second display area for displaying an animation in the first display area when a pull-down start operation and a continuous pull-down operation on the pull-down refresh control are detected in the first display area; a first playing module, configured to play a first preset animation in the second display area when a pull-down distance corresponding to the continuous pull-down operation is greater than or equal to a first preset threshold; The first preset animation is the initial animation displayed by the pull-down refresh control when the pull-down operation is performed; A second playback module is configured to play a second preset animation in the second display area after the first preset animation ends; the second preset animation represents a looping animation in which the pull-to-refresh control is refreshing; the first preset animation and the second preset animation are a whole; The second display module is configured to display a second interface on the display interface when the first display area detects that a pull-down end operation on the pull-to-refresh control has been completed.

11. A device for implementing a pull-down refresh animation, comprising a memory and a processor, wherein the memory stores a computer program that can be run on the processor, characterized in that: When the processor executes the computer program, the steps in the method for implementing the pull-down refresh animation according to any one of claims 1 to 9 are implemented.

12. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for implementing the pull-down refresh animation according to any one of claims 1 to 9 are implemented.

Images