Method and apparatus for displaying interface elements, device, medium, and product
Patent Information
- Application Number
- PCT/CN2025/079067
- Authority / Receiving Office
- WO · WO
- Patent Type
- Applications
- Current Assignee / Owner
- Filing Date
- 2025-02-25
- Publication Date
- 2026-09-03
Smart Images
Figure CN2025079067_03092026_PF_FP_ABST
Abstract
Description
Methods, apparatus, devices, media, and products for displaying interface elements Technical Field
[0001] The embodiments of this disclosure generally relate to the field of user interaction, and specifically to methods, apparatuses, devices, media, and program products for displaying interface elements. Background Technology
[0002] Currently, many factors influence the actual user experience during user interaction. User interfaces contain numerous elements, some used for display and interaction with user-related actions, others merely serving as decoration, and still others appearing only after a specific action or target object is performed, potentially displaying in association with that target object to enhance the user experience.
[0003] Nowadays, user interaction is receiving increasing attention, and visually appealing interface elements and excellent interactive experiences have become a popular trend. Among these, user interface design has become a crucial element. A well-designed user interface can create a more immersive experience and increase user retention. Therefore, effective user interface design and improved user experience are becoming increasingly important. Summary of the Invention
[0004] Embodiments of this disclosure provide a method, apparatus, device, medium, and program product for displaying interface elements.
[0005] According to a first aspect of this disclosure, a method for displaying interface elements is provided. The method includes acquiring the performance of a target device, the user interface of which can be used to display the interface elements. The method further includes associating target attributes of the interface elements with a first curve for rendering an animation effect in response to the performance falling below a threshold performance. The method also includes determining a display duration of the interface elements relative to the first curve based on multiple parameters of a second curve for rendering the animation effect. The method further includes displaying the interface elements based on the first curve and the display duration.
[0006] In a second aspect of this disclosure, an apparatus for displaying interface elements is provided. The apparatus includes a performance acquisition module configured to acquire the performance of a target device, the user interface of which can be used to display the interface elements; a target attribute association module configured to associate a target attribute of the interface elements with a first curve used to render an animation effect in response to the performance being below a threshold performance; a display duration determination module configured to determine a display duration of the interface elements relative to the first curve based on multiple parameters of the second curve used to render the animation effect; and an interface element display module configured to display the interface elements based on the first curve and the display duration.
[0007] In a third aspect of this disclosure, an electronic device is provided, including at least one processor; and a storage device for storing at least one program, which, when executed by the at least one processor, causes the at least one processor to implement the method according to the first aspect of this disclosure.
[0008] In a fourth aspect of this disclosure, a computer-readable storage medium is provided having a computer program stored thereon that, when executed by a processor, implements the method according to a first aspect of this disclosure.
[0009] In a fifth aspect of this disclosure, a computer program product is provided. This computer program product includes a computer program that, when executed by a processor, implements the method according to a first aspect of this disclosure.
[0010] It should be understood that the content described in this section is not intended to limit the key or essential features of the embodiments of this disclosure, nor is it intended to restrict the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description
[0011] The above and other objects, features and advantages of this disclosure will become more apparent from the accompanying drawings, in which like reference numerals generally denote like parts.
[0012] Figure 1 illustrates a schematic diagram of an example environment in which some embodiments of the present disclosure may be implemented;
[0013] Figure 2 illustrates a schematic diagram of an example method for displaying interface elements according to some embodiments of the present disclosure;
[0014] Figure 3 illustrates a schematic diagram of an example of a flowchart for displaying interface elements according to some embodiments of the present disclosure;
[0015] Figure 4 illustrates a schematic diagram of example code for determining display duration according to some embodiments of the present disclosure;
[0016] Figure 5 illustrates a schematic diagram of an example of fitting a second curve to a first curve according to some embodiments of the present disclosure;
[0017] Figure 6 illustrates a schematic diagram of example code for optimizing a first curve according to some embodiments of the present disclosure;
[0018] Figure 7 illustrates a schematic diagram of an example comparison of a first curve before and after optimization according to some embodiments of the present disclosure;
[0019] Figure 8 illustrates a schematic block diagram of an apparatus for displaying interface elements according to some embodiments of the present disclosure;
[0020] Figure 9 illustrates a schematic block diagram of an example device suitable for implementing various embodiments of the present disclosure.
[0021] In the various figures, the same or corresponding reference numerals indicate the same or corresponding parts. Detailed Implementation
[0022] It is understood that the data involved in this technical solution (including but not limited to the data itself, the acquisition or use of the data) shall comply with the requirements of relevant laws, regulations and related provisions.
[0023] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.
[0024] For example, upon receiving a user's proactive request, a prompt message is sent to the user to explicitly inform them that the requested operation will require the acquisition and use of the user's personal information. This allows the user to independently choose whether to provide personal information to the software or hardware, such as the electronic device, application, server, or storage medium performing the operations of this disclosed technical solution, based on the prompt message.
[0025] As an optional but non-limiting implementation, in response to a user's active request, sending a prompt message to the user can be done via a pop-up window, where the prompt message can be presented in text format. Furthermore, the pop-up window can also include a selection control allowing the user to choose "agree" or "disagree" to provide personal information to the electronic device.
[0026] It is understood that the above notification and user authorization process are merely illustrative and do not constitute a limitation on the implementation of this disclosure. Other methods that comply with relevant laws and regulations may also be applied to the implementation of this disclosure.
[0027] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.
[0028] In the description of embodiments of this disclosure, the term "comprising" and similar terms should be understood as open-ended inclusion, i.e., "including but not limited to". The term "based on" should be understood as "at least partially based on". The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment". The terms "first", "second", etc., may refer to different or the same objects. Other explicit and implicit definitions may also be included below.
[0029] In modern user experience design, animation and transitions are crucial for enhancing the smoothness and visual appeal of user interfaces. Spring animation and Bezier curves are two commonly used animation interpolation methods, each suitable for different scenarios. Spring animation simulates the physical properties of a spring to generate natural, dynamic animation effects, making it suitable for interactive scenarios that emphasize a sense of physics. Bezier curves, on the other hand, define the animation trajectory using control points, offering a highly controllable and computationally efficient interpolation method.
[0030] However, in practical applications, Spring animations have high computational complexity, especially when performing related calculations on low-performance devices, which may lead to frame drops and animation stuttering, affecting the user experience. Furthermore, the calculations using Spring animations require generating natural and dynamic animation effects with strong physicality, thus placing certain demands on device performance. While Bézier curves are suitable for scenarios with relatively high performance requirements, currently, in user interface animation design, the two commonly used interpolation methods mentioned above are prone to frame drops and stuttering on devices with poor performance, significantly impacting the user experience.
[0031] To address at least the aforementioned and other potential problems, embodiments of this disclosure propose a method for displaying interface elements. In this method, a computing device first acquires its performance data. The device's user interface can then be used to display the interface elements. Furthermore, after determining that the performance is below a threshold, a target attribute of the interface element is associated with a first curve used to render an animation effect. Then, based on multiple parameters of a second curve used to render the animation effect, a display duration of the interface element relative to the first curve is determined. Finally, the computing device can display the interface element based on the first curve and the display duration. This method associates the attributes of the interface element with the first curve and uses the animation duration of the second curve to control the attribute display process, enabling the generation of an animation effect that more closely resembles the second curve using the first curve, reducing resource consumption, and improving the user experience.
[0032] It is understood that this disclosure is only described in conjunction with relevant embodiments and is not intended to limit the scope of protection of this disclosure. Any technical solutions in other disclosures that fall within the scope of protection of this disclosure should be protected.
[0033] Embodiments of the present disclosure will now be described in further detail with reference to the accompanying drawings. Figure 1 illustrates an example environment in which the devices and / or methods of the embodiments of the present disclosure may be implemented. In environment 100, computing device 102 can detect its performance. Additionally, computing device 102 can also acquire attribute information of interface elements in the user interface.
[0034] Examples of computing device 102 include, but are not limited to, personal computers, server computers, handheld or laptop devices, mobile devices (such as mobile phones, personal digital assistants (PDAs), media players, etc.), multiprocessor systems, consumer electronics, minicomputers, mainframe computers, and distributed computing environments that include any of the above systems or devices.
[0035] As shown in Figure 1, the computing device 102 can detect its own performance 106. The performance 106 of the computing device 102 can be determined based on some parameters of the computing device 102. For example, it can be determined based on parameters such as the temperature information, power consumption information, and processor utilization of the computing device 102.
[0036] User interface 112 is used to display interface element 114. It should be noted that the type of interface element 114 can be any element suitable for display in user interface 112, and this application does not impose any restrictions. In one example, interface element 114 can be used for interaction. In another example, interface element 114 cannot be used for interaction.
[0037] Next, after obtaining the performance 106 of the target device, the computing device 102 compares the obtained performance 106 with a threshold performance. Based on the comparison result, the computing device 102 further processes the interface element 114. The interface element 114 may include a target attribute 116, which may be represented using curves. In some embodiments, the target attribute 116 may include at least one of the following: displacement, transparency, and scaling.
[0038] For example, when performance 106 is below a threshold performance, it can be determined that the target device is currently in a low-performance state. In this case, computing device 102 can associate the target attribute 116 in the interface element with the first curve 118. The first curve 118 is used to render animation effects, such as the animation effects of interface element 114. For example, the first curve 118 can be a Bézier curve or any other suitable curve.
[0039] Then, the computing device 102 can acquire multiple parameters 110 of the second curve 108 used to present the animation effect, and can then determine the display duration 104 of the interface element 114 when it is dynamically displayed through the first curve 118 based on the multiple parameters 110. For example, the second curve can be an elastic curve or any suitable curve, and the elastic curve can also be called an elastic animation curve.
[0040] It should be noted that the first curve 118 is different from the second curve 108, and the computational complexity of the first curve 118 is lower than that of the second curve 108. In other words, the presentation of the first curve 118 in the user interface 112 places lower demands on the performance 106 of the target device compared to the presentation of the second curve 108 in the user interface.
[0041] Additionally, the method for calculating the display duration 104 for the first curve 118 using multiple parameters 110 can be defined by the user, and this application does not impose any restrictions on it. In one example, the display duration 104 can be 300 milliseconds. In another example, the display duration 104 can be 500 milliseconds.
[0042] Finally, the computing device 102 displays the interface element 114 based on the first curve 118 and the display duration 104. The computing device 102 displays the interface element 114 in the user interface 112 based on the display duration 104 determined using multiple parameters 110 in the second curve 108 and in combination with the first curve 118.
[0043] In one example, the first curve 118 can be displayed in a monotonic manner; for example, the first curve 118 can be displayed in a monotonically increasing manner. In another example, the start and end points of the first curve 118 can be a certain distance apart.
[0044] This method associates the attributes of interface elements with a first curve and uses the animation duration of a second curve to control the display process of the attributes. This allows the first curve to generate an animation effect that is closer to the second curve, reducing resource consumption and improving the user interaction experience.
[0045] The foregoing description, with reference to FIG1, illustrates an example environment in which some embodiments of the present disclosure's devices and / or methods may be implemented. The following description, with reference to FIG2, illustrates an example method 200 for displaying interface elements according to some embodiments of the present disclosure. This example method can be executed by the computing device 102 in FIG1 or any suitable computing device.
[0046] As shown in Figure 2, in example method 200, at box 202, the performance of a target device is obtained, and the user interface of the target device can be used to display interface elements. For example, computing device 102 is the target device, and it can obtain its own performance.
[0047] In some embodiments, the performance 106 of the target device can be determined based on some parameters of the target device. In one example, the computing device 102 can determine the performance 106 of the target device based on the temperature information of the target device. In another example, the computing device 102 can determine the performance 106 of the target device based on the power consumption information of the target device. In yet another example, the computing device 102 can determine the performance 106 of the target device based on the processor utilization rate of the target device. In yet another example, the computing device 102 can determine the performance 106 of the target device based on two or more parameters selected from the temperature information, power consumption information, and processor utilization rate of the target device. The above examples are merely for describing this disclosure and are not intended to specifically limit this disclosure. Those skilled in the art can set which parameters of the target device to use to calculate performance as needed.
[0048] In some embodiments, the user interface 112 may be used to display interface elements 114. The type of interface element 114 may be any element suitable for display in the user interface 112. In one example, interface element 114 may be interactive. In another example, interface element 114 may not be interactive. In yet another example, interface element 114 may become interactive by receiving an operation on interface element 114, for example, interface element 114 becomes interactive after receiving a long press operation.
[0049] Next, at box 204, in response to the performance falling below the threshold performance, the target attribute of the interface element is associated with a first curve used to render the animation effect.
[0050] In some embodiments, after obtaining the performance 106 of the target device, the computing device 102 also obtains a threshold performance, then compares the obtained performance 106 with the threshold performance, and then the computing device 102 can further process the interface element 114 based on the result of the comparison between the performance 106 and the threshold performance.
[0051] Once it is determined that performance 106 is below a threshold performance, computing device 102 further determines multiple control points of the first curve 118 and uses these control points to fit the second curve 108. Additionally, the target attribute 116 corresponding to interface element 114 is associated with the first curve 118 having multiple control points.
[0052] In some embodiments, the computing device 102 further determines the start and end points of the first curve 118, and then further determines a first slope for the start point and a second slope for the end point. Furthermore, the computing device 102 adjusts the first and second slopes based on a threshold slope. In this case, the computing device 102 adjusts the first or second slope by comparing the values of the first slope and the threshold slope, or by comparing the values of the second slope and the threshold slope. When the first slope is greater than or equal to the threshold slope, or the second slope is greater than or equal to the threshold slope, the slope of the curve is not adjusted.
[0053] For example, when the first slope is less than the threshold slope, the first slope is adjusted by adjusting the coordinates of the starting point of the first curve 118. Taking the coordinates of the starting point of the first curve 118 in the coordinate system as (x1, y1) as an example, when the first slope is less than the threshold slope, the first slope is adjusted by adjusting the values of x1 and y1 at the starting point (x1, y1) of the first curve 118. In one example, the values of x1 and y1 can be equal. In another example, the values of x1 and y1 can be unequal.
[0054] In addition to adjusting the first slope using a threshold slope, the second slope can also be adjusted using a threshold slope. For example, taking the coordinates of the endpoint of the first curve 118 in the coordinate system as (x2, y2), when the second slope is less than the threshold slope, the second slope is adjusted by adjusting the values of x2 and y2 at the endpoint (x2, y2) of the first curve 118. In one example, the values of x2 and y2 can be equal. In another example, the values of x2 and y2 can be unequal. Additionally, the values of x1, x2, y1, and y2 are all within the range of 0 to 1.
[0055] In some embodiments, x1 in the starting coordinates and x2 in the ending coordinates correspond to values on the first coordinate axis, and y1 in the starting coordinates and y2 in the ending coordinates correspond to values on the second coordinate axis. x1 in the starting coordinates is a first value corresponding to the first coordinate axis, and x2 in the ending coordinates is a second value corresponding to the first coordinate axis. Furthermore, y1 in the starting coordinates corresponds to a third value on the second coordinate axis, and y2 in the ending coordinates corresponds to a fourth value on the second coordinate axis.
[0056] After determining the first and second values of the start and end points on the first coordinate axis, it is further determined whether the start and end points conflict on the first coordinate axis. Conflicts can be determined by checking if the sum of the x1 value of the start point coordinate and the x2 value of the end point coordinate is greater than 1.
[0057] If the sum of the starting point coordinate x1 and the ending point coordinate x2 is greater than 1, the first and second values need to be adjusted so that the first value decreases and the second value increases. It is understood that the method for adjusting the first and second values can be set by the user as needed, and this application does not impose any restrictions on it.
[0058] Furthermore, if the third value determined by the computing device 102 is greater than the fourth value, the third and fourth values will be further adjusted so that the adjusted third value is less than the adjusted fourth value. Additionally, after adjustment, the x1 and y1 values of the starting point coordinates are both less than the x2 and y2 values of the adjusted ending point coordinates.
[0059] In some embodiments, the multiple control points corresponding to the first curve 118 can also be used to adjust the positions of the start and end points of the first curve 118. For example, the positions of the start and end points of the first curve 118 can be further adjusted by adjusting the positions of the control points.
[0060] In some embodiments, when the performance 106 obtained by the computing device 102 is greater than the threshold performance, the target attribute 116 of the interface element 114 is directly associated with the second curve 108, and the interface element 114 is displayed in the user interface 112 using the second curve 108.
[0061] Then, at box 206, the display duration of the interface element for the first curve is determined based on multiple parameters of the second curve used to render the animation effect.
[0062] It should be noted that the first curve 118 is different from the second curve 108, and the computational complexity of the second curve 108 is higher than that of the first curve 118. In other words, the presentation of the second curve 108 in the user interface 112 places higher demands on the performance 106 of the target device compared to the presentation of the first curve 118 in the user interface. Additionally, the first curve 118 is a Bézier curve, while the second curve 108 is an elastic curve.
[0063] In some embodiments, the second curve 108 includes a plurality of parameters 110, which can be used to determine the display duration 104 of the interface element 114 relative to the first curve 118. In one example, the display duration 104 may be 400 milliseconds. In another example, the display duration 104 may be 600 milliseconds.
[0064] Finally, at box 208, the interface element is displayed based on the first curve and the display duration. By determining the display duration 104, the interface element can be fully displayed in the user interface 112 within the display duration 104 using the first curve, thereby animates the first curve 118 to approximate the second curve 108 in the user interface 112.
[0065] This method associates the attributes of interface elements with a first curve and uses the animation duration of a second curve to control the display process of the attributes. This allows the first curve to generate an animation effect that is closer to the second curve, reducing resource consumption and improving the user interaction experience.
[0066] The above description, with reference to FIG2, illustrates an example method for displaying interface elements according to some embodiments of the disclosure. The following description, with reference to FIG3, illustrates an example flowchart for displaying interface elements according to some embodiments of the present disclosure.
[0067] As shown in Example 300 of Figure 3, when the process starts at 302, the computing device 102 first performs performance monitoring on the target device at 304, and then further determines at 306 whether the device performance meets the standard after the performance monitoring at 304.
[0068] If the performance meets the target, i.e., exceeds the threshold performance, the target attribute of the interface element is directly associated with the elastic curve used to display the elastic animation 308. After animation rendering 316, the interface element is displayed on the user interface. Then the entire process 318 ends.
[0069] If the performance does not meet the standard, that is, the performance is less than the threshold performance, the computing device 102 first associates the target attribute of the interface element with the Bézier curve 310. Then the computing device 102 will also calculate the animation duration 312. The calculation of the animation duration is determined by using multiple parameters in the elastic curve corresponding to the elastic animation 308.
[0070] After determining the animation duration, the control points of the Bézier curve will be further adjusted at point 314 to further adjust the starting and ending points of the Bézier curve, as well as the slope of the starting and ending points.
[0071] Finally, the animation is rendered at point 316, the corresponding interface elements are displayed on the user interface, and the entire process ends at point 318.
[0072] The above description, with reference to Figure 3, is a schematic diagram of an example flowchart for displaying interface elements according to some embodiments of the disclosure. The following description, with reference to Figure 4, is a schematic diagram of example code for determining display duration according to some embodiments of the present disclosure.
[0073] As shown in Figure 4, in Example 400, param sttifness in Example Code 402 represents the elastic coefficient in the elastic curve, and param damping represents the damping coefficient in the elastic curve.
[0074] The computing device 102 can calculate the animation duration using the formula for calculating animation duration in example code 402. For example, it can calculate the base time using the elasticity coefficient. Then, it can determine the correction factor for the damping effect using the elasticity coefficient and the damping coefficient, and finally multiply the calculated base time by the correction factor to obtain the final animation duration.
[0075] This method uses Bézier curves to fit elastic curves and the animation duration of the elastic curves to control the generation process of Bézier curves, making the downgraded Bézier curves closer to the effect of elastic animations and improving the user experience during interaction.
[0076] The above description, with reference to FIG. 4, illustrates example code for determining display duration according to some embodiments of the disclosure. The following description, with reference to FIG. 5, illustrates an example of fitting a second curve to a first curve according to some embodiments of the present disclosure. This example can be executed by the computing device 102 in FIG. 1 or any suitable device.
[0077] As shown in Figure 5, in Example 500, there are curve coordinate graphs 502, 504, and 506. The upper graph in these three sets represents the elastic curve, while the lower graph is generated by fitting the elastic curve to a Bézier curve. The four parameters of the Bézier curve are 0.33, 0.86, 0.2, and 1, respectively.
[0078] In the curve coordinate graph 502, the elastic coefficient is 200 and the damping coefficient is 20. Therefore, the calculated animation duration is 420ms. The calculated animation parameters can be used to associate the target attributes of the interface elements with the Bézier curve to fit the elastic curve.
[0079] In the curve coordinate graph 504, the elasticity coefficient is 300 and the damping coefficient is 30. Therefore, the calculated animation duration is 338ms. The calculated animation parameters can be used to associate the target attributes of the interface elements with the Bézier curve to fit the elasticity curve.
[0080] In the curve coordinate graph 506, the elasticity coefficient is 500 and the damping coefficient is 36. Therefore, the calculated animation duration is 251ms. The calculated animation parameters can be used to associate the target attributes of the interface elements with the Bézier curve to fit the elasticity curve.
[0081] The four parameters of the Bézier curve selected above are merely examples and not specific limitations of this disclosure. Those skilled in the art can select appropriate parameters based on the following requirements. For example, when selecting some of the four parameters of the Bézier curve, there is a certain range of values. In one example, the first parameter's range is no more than 0.5, the second parameter has no range, the third parameter's range is no more than 0.4, and the fourth parameter's value is 1.
[0082] The above description, with reference to Figure 5, illustrates an example of fitting a second curve to a first curve according to some embodiments of the disclosure. The following description, with reference to Figure 6, illustrates example code for optimizing the first curve according to some embodiments of the present disclosure.
[0083] When Bézier curves are too steep, the animation can change drastically, potentially causing frame drops on low-end devices. The following section describes how to adjust the control points of the Bézier curve to optimize its shape, making it smoother and thus improving animation performance on low-end devices.
[0084] As shown in Figure 6, Example 600 illustrates sample code for optimizing a first curve or a Bézier curve. In this sample code, the x-coordinates (x1, x2) of the start and end points of the Bézier curve, and the y-coordinates (y1, y2) of the end points, are first obtained. For ease of description, x1, x2, y1, and y2 are referred to as the first value, second value, third value, and fourth value, respectively. Furthermore, the maximum adjustment range of the Bézier curve on the y-axis is determined to be 0.3, and the threshold slope or minimum slope of the start and end points is determined to be 0.35.
[0085] Then, at #1 in the example code, the x-axis conflict is handled. If it is determined that the sum of the values of the starting point coordinate x1 and the ending point coordinate x2 is greater than 1, the first and second values need to be adjusted so that the first value decreases and the second value increases.
[0086] In example code #2, further adjust the slope of the starting point and the third value. If the slope of the starting point is less than the threshold slope of 0.35, then adjust the slope of the starting point. For example, adjust the slope of the third value and the starting point to make the curve smoother.
[0087] At #3 in the example code, further adjust the slope of the endpoint and the fourth value. Similar to the #2 section of the example code, if the slope of the endpoint is less than the threshold slope of 0.35, adjust the slope of the endpoint. For example, adjust the slope of the fourth value and the endpoint to make the curve smoother.
[0088] In addition to maintaining the smoothness of the curve, it is also necessary to maintain the monotonicity of the curve. At #4 in the example code, the third and fourth values are further adjusted. If the third value is greater than the fourth value, the third and fourth values are adjusted so that the adjusted third value is less than the adjusted fourth value.
[0089] This method uses Bézier curves to fit elastic curves and the animation duration of the elastic curves to control the generation process of Bézier curves. This makes the degraded Bézier curves closer to the effect of elastic animations. Furthermore, the control points of the Bézier curves are adjusted and optimized to make them smoother and maintain monotonicity, thereby improving the user experience during interaction.
[0090] The above description, with reference to Figure 6, illustrates example code for optimizing the first curve according to some embodiments of the disclosure. The following description, with reference to Figure 7, illustrates an example comparison of the first curve before and after optimization according to some embodiments of the present disclosure.
[0091] As shown in Figure 7, in Example 700, there are multiple coordinate graphs, including coordinate graph 702, coordinate graph 704, coordinate graph 706, coordinate graph 708, coordinate graph 710, and coordinate graph 712. Furthermore, the coordinate values of the x and y coordinates of the starting and ending points of the curves are all within the range of 0 to 1.
[0092] Each coordinate graph includes two curves: the dashed curve represents the curve before adjustment and optimization, and the solid curve represents the curve after adjustment and optimization. It can be seen that the curves before optimization are all quite steep, appearing uneven, and their monotonicity is not readily apparent.
[0093] The adjusted and optimized curve appears smoother and has better continuity compared to the original curve, and the monotonicity of the curve can also be seen intuitively.
[0094] As shown in Figure 8, the device 800 includes a performance acquisition module 802 configured to acquire the performance of a target device, the user interface of which can be used to display interface elements; a target attribute association module 804 configured to associate the target attributes of the interface elements with a first curve used to render animation effects in response to performance falling below a threshold performance; a display duration determination module 806 configured to determine the display duration of the interface elements relative to the first curve based on multiple parameters of a second curve used to render animation effects; and an interface element display module 808 configured to display the interface elements based on the first curve and the display duration.
[0095] In some embodiments, the target attribute association module 804 includes: a plurality of control point determination module configured to determine a plurality of control points of a first curve for fitting a second curve; and a target attribute association module configured to associate a target attribute with a first curve having a plurality of control points.
[0096] In some embodiments, the display duration determination module 806 includes: an elastic parameter and damping parameter determination module configured to determine an elastic parameter and a damping parameter included in a plurality of parameters; and a display duration determination module configured to determine the display duration of the interface element for the first curve based on the elastic parameter and the damping parameter.
[0097] In some embodiments, the apparatus 800 further includes: a first curve start and end point determination module configured to determine the start and end points of the first curve; a first slope and a second slope determination module configured to determine a first slope for the start point and a second slope for the end point; and a first slope and a second slope adjustment module configured to determine an adjustment to the first slope and the second slope based on a threshold slope.
[0098] In some embodiments, the apparatus 800 further includes: a first value and a second value determination module configured to determine a first value of the starting point relative to a first coordinate axis and a second value of the ending point relative to the first coordinate axis; a starting point and ending point conflict determination module configured to determine whether the starting point and the ending point conflict on the first coordinate axis based on the first value and the second value; and a first value and a second value adjustment module configured to adjust the first value and the second value in response to determining that the starting point and the ending point conflict on the first coordinate axis.
[0099] In some embodiments, the first slope and second slope adjustment modules include: a first slope determination module configured to determine whether the first slope is less than a threshold slope; and a starting point coordinate value adjustment module configured to adjust the first slope by adjusting the coordinate value of the starting point in response to the first slope being less than the threshold slope.
[0100] In some embodiments, the first slope and second slope adjustment modules further include: a second slope determination module configured to determine whether the second slope is less than a threshold slope; and an endpoint coordinate value adjustment module configured to adjust the second slope by adjusting the coordinate value of the endpoint in response to the second slope being less than the threshold slope.
[0101] In some embodiments, the first slope and second slope adjustment modules further include: a third value and a fourth value determination module configured to determine a third value of the starting point relative to the second coordinate axis and a fourth value of the ending point relative to the second coordinate axis; and a third value and a fourth value adjustment module configured to adjust the third value and the fourth value in response to the third value being greater than the fourth value, such that the adjusted third value is less than or equal to the adjusted fourth value.
[0102] In some embodiments, the apparatus 800 further includes: a target attribute association module configured to associate a target attribute of an interface element with a second curve in response to a performance being greater than or equal to a threshold performance; and an interface element display module configured to display the interface element based on the second curve.
[0103] In some embodiments, the apparatus 800 further includes: determining the performance of the target device based on at least one of the following: temperature information of the target device, power consumption information of the target device, and processor utilization of the target device.
[0104] In some embodiments, the first curve is a Bézier curve and the second curve is an elastic curve, and the computational complexity of the first curve is less than that of the second curve.
[0105] In some embodiments, the target attribute includes at least one of the following: displacement, transparency, and scaling.
[0106] Figure 9 shows a schematic block diagram of an example device 900 that can be used to implement embodiments of the present disclosure. The computing device 102 in Figure 1 can be implemented using device 900. As shown, device 900 includes a central processing unit (CPU) 901, which can perform various appropriate actions and processes according to computer program instructions stored in read-only memory (ROM) 902 or loaded from storage unit 908 into random access memory (RAM) 903. Various programs and data required for the operation of device 900 may also be stored in RAM 903. CPU 901, ROM 902, and RAM 903 are interconnected via bus 904. Input / output (I / O) interface 905 is also connected to bus 904.
[0107] Multiple components in device 900 are connected to I / O interface 905, including: input unit 906, such as keyboard, mouse, etc.; output unit 907, such as various types of monitors, speakers, etc.; storage unit 908, such as disk, optical disk, etc.; and communication unit 909, such as network card, modem, wireless transceiver, etc. Communication unit 909 allows device 900 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.
[0108] The various processes and handling described above, such as method 200 and examples 300 to 700, can be executed by processing unit 901. For example, in some embodiments, method 200 and examples 300 to 700 can be implemented as computer software programs tangibly contained in a machine-readable medium, such as storage unit 908. In some embodiments, part or all of the computer program can be loaded and / or installed on device 900 via ROM 902 and / or communication unit 909. When the computer program is loaded into RAM 903 and executed by CPU 901, one or more actions of example methods 200 and examples 300 to 700 described above can be performed.
[0109] This disclosure can be a method, apparatus, system, and / or computer program product. A computer program product may include a computer-readable storage medium having computer-readable program instructions loaded thereon for performing various aspects of this disclosure.
[0110] Computer-readable storage media can be tangible devices capable of holding and storing instructions for use by an instruction execution device. Computer-readable storage media can be, for example—but not limited to—electrical storage devices, magnetic storage devices, optical storage devices, electromagnetic storage devices, semiconductor storage devices, or any suitable combination of the foregoing. More specific examples (a non-exhaustive list) of computer-readable storage media include: portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), static random access memory (SRAM), portable compact disc read-only memory (CD-ROM), digital multifunction disc (DVD), memory sticks, floppy disks, mechanical encoding devices, such as punch cards or recessed protrusions storing instructions thereon, and any suitable combination of the foregoing. The computer-readable storage media used herein are not to be construed as transient signals themselves, such as radio waves or other freely propagating electromagnetic waves, electromagnetic waves propagating through waveguides or other transmission media (e.g., light pulses through fiber optic cables), or electrical signals transmitted through wires.
[0111] The computer-readable program instructions described herein can be downloaded from computer-readable storage media to various computing / processing devices, or downloaded via a network, such as the Internet, local area network, wide area network, and / or wireless network, to an external computer or external storage device. The network may include copper transmission cables, fiber optic transmission, wireless transmission, routers, firewalls, switches, gateway computers, and / or edge servers. A network adapter card or network interface in each computing / processing device receives the computer-readable program instructions from the network and forwards them to the computer-readable storage media in the respective computing / processing device.
[0112] Computer program instructions used to perform the operations of this disclosure may be assembly instructions, instruction set architecture (ISA) instructions, machine instructions, machine-dependent instructions, microcode, firmware instructions, status setting data, or source code or object code written in any combination of one or more programming languages, including object-oriented programming languages such as Smalltalk, C++, etc., and conventional procedural programming languages such as the "C" language or similar programming languages. The computer-readable program instructions may execute entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or may be connected to an external computer (e.g., via the Internet using an Internet service provider). In some embodiments, electronic circuitry, such as programmable logic circuitry, field-programmable gate arrays (FPGAs), or programmable logic arrays (PLAs), is personalized by utilizing the status information of the computer-readable program instructions to implement various aspects of this disclosure.
[0113] Various aspects of this disclosure are described herein with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this disclosure. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer-readable program instructions.
[0114] These computer-readable program instructions can be provided to a processing unit of a general-purpose computer, a special-purpose computer, or other programmable data processing apparatus to produce a machine such that, when executed by the processing unit of the computer or other programmable data processing apparatus, they create means for implementing the functions / actions specified in one or more blocks of the flowchart and / or block diagram. These computer-readable program instructions can also be stored in a computer-readable storage medium that causes a computer, programmable data processing apparatus, and / or other device to operate in a particular manner. Thus, the computer-readable medium storing the instructions comprises an article of manufacture that includes instructions for implementing aspects of the functions / actions specified in one or more blocks of the flowchart and / or block diagram.
[0115] Computer-readable program instructions may also be loaded onto a computer, other programmable data processing apparatus, or other device to cause a series of operational steps to be performed on the computer, other programmable data processing apparatus, or other device to produce a computer-implemented process, thereby causing the instructions executed on the computer, other programmable data processing apparatus, or other device to perform the functions / actions specified in one or more boxes of a flowchart and / or block diagram.
[0116] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of the present disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of an instruction containing one or more executable instructions for implementing a specified logical function. In some alternative implementations, the functions marked in the blocks may occur in a different order than those shown in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, may be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.
[0117] The various embodiments of this disclosure have been described above. These descriptions are exemplary and not exhaustive, nor are they limited to the disclosed embodiments. Many modifications and variations will be apparent to those skilled in the art without departing from the scope and spirit of the described embodiments. The terminology used herein is chosen to best explain the principles, practical application, or technical improvements to the embodiments in the market, or to enable others skilled in the art to understand the embodiments disclosed herein.
Claims
1. A method for displaying interface elements, comprising: The performance of the target device is obtained, and the user interface of the target device can be used to display interface elements; In response to the performance falling below a threshold performance, the target attribute of the interface element is associated with a first curve used to render the animation effect; Based on multiple parameters of the second curve used to render the animation effect, the display duration of the interface element relative to the first curve is determined; as well as The interface elements are displayed based on the first curve and the display duration.
2. The method of claim 1, wherein associating the target attribute of the interface element with a first curve for rendering the animation effect comprises: Determine multiple control points for the first curve to fit the second curve; as well as The target attribute is associated with a first curve having the plurality of control points.
3. The method according to claim 1, wherein determining the display duration of the interface element for the first curve includes: Determine the elastic and damping parameters included in the plurality of parameters; as well as Based on the elasticity parameter and the damping parameter, the display duration of the interface element for the first curve is determined.
4. The method according to claim 1, further comprising: Determine the start and end points of the first curve; Determine a first slope with respect to the starting point and a second slope with respect to the ending point; as well as Based on the threshold slope, adjustments to the first slope and the second slope are determined.
5. The method according to claim 4, further comprising: Determine a first value for the starting point relative to the first coordinate axis and a second value for the ending point relative to the first coordinate axis; Based on the first value and the second value, determine whether the starting point and the ending point conflict on the first coordinate axis; and In response to the determination that the start point and the end point conflict on the first coordinate axis, the first value and the second value are adjusted.
6. The method of claim 4, wherein determining the adjustment of the first slope and the second slope based on the threshold slope comprises: Determine whether the first slope is less than the threshold slope; as well as In response to the first slope being less than the threshold slope, the first slope is adjusted by adjusting the coordinate value of the starting point.
7. The method of claim 6, wherein determining the adjustment of the first slope and the second slope based on the threshold slope further comprises: Determine whether the second slope is less than the threshold slope; as well as In response to the second slope being less than the threshold slope, the second slope is adjusted by adjusting the coordinate value of the endpoint.
8. The method according to claim 7, further comprising: Determine the third value of the starting point relative to the second coordinate axis and the fourth value of the ending point relative to the second coordinate axis; as well as In response to the third value being greater than the fourth value, the third value and the fourth value are adjusted such that the adjusted third value is less than the adjusted fourth value.
9. The method according to claim 1, further comprising: In response to the performance being greater than or equal to the threshold performance, the target attribute of the interface element is associated with the second curve; as well as The interface elements are displayed based on the second curve.
10. The method according to claim 1, further comprising: The performance of the target device is determined based on at least one of the following: The target device's temperature information, power consumption information, and processor utilization rate.
11. The method according to claim 1, wherein the first curve is a Bézier curve, the second curve is an elastic curve, and the computational complexity of the first curve is less than that of the second curve.
12. The method of claim 1, wherein the target attribute includes at least one of the following: displacement, transparency, and scaling.
13. An apparatus for displaying interface elements, comprising: A performance acquisition module is configured to acquire the performance of a target device, wherein the user interface of the target device can be used to display interface elements. The target attribute association module is configured to associate the target attribute of the interface element with a first curve used to render the animation effect in response to the performance falling below a threshold performance. The display duration determination module is configured to determine the display duration of the interface element for the first curve based on multiple parameters of the second curve used to present the animation effect; as well as The interface element display module is configured to display the interface elements based on the first curve and the display duration.
14. An electronic device comprising: At least one processor; as well as A storage device for storing at least one program, which, when executed by the at least one processor, causes the at least one processor to implement the method according to any one of claims 1-12.
15. A computer-readable storage medium having a computer program stored thereon, the computer program implementing the method according to any one of claims 1-12 when executed by a processor.
16. A computer program product comprising a computer program that, when executed by a processor, implements the method according to any one of claims 1-12.