US-12625606-B2 - Animation effect linkage of ui elements

Abstract

M user interface UI elements are displayed on a screen of the electronic device, where M is a positive integer greater than 1. Dragging performed on a first UI element in the M UI elements is detected. In response to the dragging, each of N UI elements on the screen is enabled to move with a corresponding animation effect, where N is a positive integer ranging from 1 to M−1. The enabling the N UI elements to move with corresponding animation effects includes: determining a distance between the first UI element and a second UI element on the UI; determining an animation effect of movement of the second UI element based on the distance; and enabling the second UI element to move with the animation effect, to visually indicate that the second UI element moves with the first UI element.

Inventors

• Chao Bian

Assignees

• HUAWEI TECHNOLOGIES CO., LTD.

Dates

Publication Date

20260512

Application Date

20220401

Priority Date

20210420

Claims (20)

1. 1 . A method, comprising: displaying M user interface (UI) elements on a screen of an electronic device, wherein M is a positive integer greater than 1; detecting dragging performed on a first UI element in the M UI elements; and in response to the dragging, enabling each of N UI elements on the screen to move with corresponding animation effects, wherein: N is a positive integer ranging from 1 to M−1, and enabling the N UI elements to move with the corresponding animation effects comprises: determining a first animation effect of movement of the first UI element in response to the dragging; determining a distance between the first UI element and a second UI element, the second UI element being in the N UI elements; determining a second animation effect of movement of the second UI element in response to the dragging based on the first animation effect, the distance, and a size of the second UI element, wherein determining the second animation effect of the movement of the second UI element in response to the dragging based on the distance comprises determining a duration that the movement of the second UI element continues after the dragging ends based on the distance; determining a third animation effect of movement of a third UI element in response to the dragging, the third UI element being in the N UI elements, and wherein determining the second animation effect of the movement of the second UI element based on the size of the second UI element comprises determining the second animation effect is different from the third animation effect in response to the size of the second UI element being different than a size of the third UI element; and enabling the second UI element to move with the second animation effect and the third UI element to move with the third animation effect, to visually indicate that the second UI element and the third UI element move with the first UI element.
2. 2 . The method according to claim 1 , wherein determining the distance comprises: determining a first reference point of the first UI element and a second reference point of the second UI element; and determining the distance between the first reference point and the second reference point.
3. 3 . The method according to claim 1 , wherein determining the distance comprises: determining a first reference point of the first UI element; determining, from a plurality of circles that each use the first reference point as a center and that have respective radii, a target circle that intersects with the second UI element and has a smallest radius; and determining the smallest radius of the target circle as the distance.
4. 4 . The method according to claim 1 , wherein determining the distance comprises: determining a horizontal spacing between the first UI element and the second UI element; determining a vertical spacing between the first UI element and the second UI element; and determining the distance based on any one of the following: at least one of the horizontal spacing and the vertical spacing; or a direction from a second reference point of the second UI element to a first reference point of the first UI element and at least one of the horizontal spacing and the vertical spacing.
5. 5 . The method according to claim 1 , further comprising: determining an impact area of the first UI element based on a size of the first UI element; and determining UI elements that are in the M UI elements and that are in the impact area as the N UI elements.
6. 6 . The method according to claim 1 , further comprising: determining M−1 UI elements in the M UI elements other than the first UI element as the N UI elements.
7. 7 . The method according to claim 1 , wherein: determining the second animation effect of the movement of the second UI element in response to the dragging is based on: the first animation effect, the distance, the size of the second UI element, and a size of the first UI element, wherein the second animation effect indicates a first linkage impact between the first UI element and the second UI element, and wherein the first linkage impact between the first UI element and the second UI element is inversely proportional to the size of the second UI element and directly proportional to the size of the first UI element.
8. 8 . The method according to claim 7 , wherein the first animation effect of the movement of the first UI element is determined based on a predefined curve in which a displacement changes over time.
9. 9 . The method according to claim 8 , wherein the predefined curve is a Bessel curve or an elastic force curve.
10. 10 . The method according to claim 1 , wherein enabling the second UI element to move with the second animation effect comprises: determining a direction of the dragging; and enabling the second UI element to move, in association with the direction, with the second animation effect.
11. 11 . The method according to claim 1 , wherein enabling the second UI element to move with the second animation effect comprises: determining a delay time from a start of the dragging based on the distance; and in response to the dragging, enabling the second UI element to move with the second animation effect after the delay time.
12. 12 . An electronic device, comprising: one or more processors; and a memory coupled to the processor and storing instructions which, when executed by the one or more processors, cause the electronic device to perform operations of: displaying M user interface (UI) elements on a screen of the electronic device, wherein M is a positive integer greater than 1; detecting dragging performed on a first UI element in the M UI elements; and in response to the dragging, enabling each of N UI elements on the screen to move with corresponding animation effects, wherein: N is a positive integer ranging from 1 to M−1, and enabling the N UI elements to move with the corresponding animation effects comprises: determining a first animation effect of movement of the first UI element in response to the dragging; determining a distance between the first UI element and a second UI element, the second UI element being in the N UI elements; determining a second animation effect of movement of the second UI element in response to the dragging based on the first animation effect, the distance, and a size of the second UI element, wherein determining the second animation effect of the movement of the second UI element in response to the dragging based on the distance comprises determining a duration that the movement of the second UI element continues after the dragging ends based on the distance; determining a third animation effect of movement of a third UI element in response to the dragging, the third UI element being in the N UI elements, and wherein determining the second animation effect of the movement of the second UI element based on the size of the second UI element comprises determining the second animation effect is different from the third animation effect in response to the size of the second UI element being different than a size of the third UI element; and enabling the second UI element to move with the second animation effect and the third UI element to move with the third animation effect, to visually indicate that the second UI element and the third UI element move with the first UI element.
13. 13 . The electronic device according to claim 12 , wherein determining the distance comprises: determining a first reference point of the first UI element and a second reference point of the second UI element; and determining the distance between the first reference point and the second reference point.
14. 14 . The electronic device according to claim 12 , wherein determining the distance comprises: determining a first reference point of the first UI element; determining, from a plurality of circles that each use the first reference point as a center and that have respective radii, a target circle that intersects with the second UI element and has a smallest radius; and determining the smallest radius of the target circle as the distance.
15. 15 . The electronic device according to claim 12 , wherein determining the distance comprises: determining a horizontal spacing between the first UI element and the second UI element; determining a vertical spacing between the first UI element and the second UI element; and determining the distance based on any one of the following: at least one of the horizontal spacing and the vertical spacing; or a direction from a second reference point of the second UI element to a first reference point of the first UI element and at least one of the horizontal spacing and the vertical spacing.
16. 16 . The electronic device according to claim 12 , wherein the operations further comprising: determining an impact area of the first UI element based on a size of the first UI element; and determining UI elements that are in the M UI elements and that are in the impact area as the N UI elements.
17. 17 . A non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores instructions which, when executed by an electronic device, cause the electronic device to perform operations of: displaying M user interface (UI) elements on a screen of the electronic device, wherein M is a positive integer greater than 1; detecting dragging performed on a first UI element in the M UI elements; and in response to the dragging, enabling each of N UI elements on the screen to move with corresponding animation effects, wherein: N is a positive integer ranging from 1 to M- 1 , and enabling the N UI elements to move with the corresponding animation effects comprises: determining a first animation effect of movement of the first UI element in response to the dragging; determining a distance between the first UI element and a second UI element, the second UI element being in the N UI elements; determining a second animation effect of movement of the second UI element in response to the dragging based on the first animation effect, the distance, and a size of the second UI element, wherein determining the second animation effect of the movement of the second UI element in response to the dragging based on the distance comprises determining a duration that the movement of the second UI element continues after the dragging ends based on the distance; determining a third animation effect of movement of a third UI element in response to the dragging, the third UI element being in the N UI elements, and wherein determining the second animation effect of the movement of the second UI element based on the size of the second UI element comprises determining the second animation effect is different from the third animation effect in response to the size of the second UI element being different than a size of the third UI element; and enabling the second UI element to move with the second animation effect and the third UI element to move with the third animation effect, to visually indicate that the second UI element and the third UI element move with the first UI element.
18. 18 . The non-transitory computer-readable storage medium according to claim 17 , wherein determining the distance comprises: determining a first reference point of the first UI element and a second reference point of the second UI element; and determining the distance between the first reference point and the second reference point.
19. 19 . The non-transitory computer-readable storage medium according to claim 17 , wherein determining the distance comprises: determining a first reference point of the first UI element; determining, from a plurality of circles that each use the first reference point as a center and that have respective radii, a target circle that intersects with the second UI element and has a smallest radius; and determining the smallest radius of the target circle as the distance.
20. 20 . The non-transitory computer-readable storage medium according to claim 17 , wherein determining the distance comprises: determining a horizontal spacing between the first UI element and the second UI element; determining a vertical spacing between the first UI element and the second UI element; and determining the distance based on any one of the following: at least one of the horizontal spacing and the vertical spacing; or a direction from a second reference point of the second UI element to a first reference point of the first UI element and at least one of the horizontal spacing and the vertical spacing.

Description

CROSS REFERENCE TO RELATED APPLICATIONS This application is a National Stage of International Application No. PCT/CN2022/084921, filed on Apr. 1, 2022, which claims priority to Chinese Patent Application No. 202110426820.7, filed on Apr. 20, 2021. Both of the aforementioned applications are hereby incorporated by reference in their entireties. TECHNICAL FIELD The present disclosure generally relates to the field of information technologies, and in particular, to a graphical interface display method, an electronic device, a computer-readable storage medium, and a computer program product. BACKGROUND With the development of information technologies, various types of electronic devices are equipped with various types of screens. Therefore, display effects and styles of user interfaces (UI) on screens become key factors that affect user experience. Animations have become an important part of UIs. With improvement of performance of electronic devices such as smartphones, animations also develop correspondingly. There are an increasing quantity of animations with a high refresh rate, a high degree of rendering, and high complexity. Therefore, display of the animations needs to be further improved to improve user experience. SUMMARY According to some embodiments of the present disclosure, a graphical interface display method, an electronic device, a medium, and a program product are provided, to enhance linkage between animation effects of different UI elements, and highlight relationships between independent UI elements. In this way, animation effects of a UI better conform to users' use habits, thereby significantly improving user experience. According to a first aspect, the present disclosure provides a graphical interface display method. According to the graphical interface display method in the first aspect, M user interface UI elements are displayed on a screen of an electronic device, where M is a positive integer greater than 1. Dragging performed on a first UI element in the M UI elements is detected. In response to the dragging, each of N UI elements on the screen is enabled to move with a corresponding animation effect, where N is a positive integer ranging from 1 to M−1. The enabling the N UI elements to move with corresponding animation effects includes: determining a distance between the first UI element and a second UI element on a UI; determining an animation effect of movement of the second UI element based on the distance; and enabling the second UI element to move with the animation effect, to visually indicate that the second UI element moves with the first UI element. In this manner, linkage between animation effects of different UI elements can be enhanced, and relationships between independent UI elements can be highlighted, so that animation effects of the UI better conform to users' use habits, thereby significantly improving user experience. In some implementations, to determine the distance, a first reference point of the first UI element and a second reference point of the second UI element may be determined, and a distance between the first reference point and the second reference point is determined as the distance. In this manner, a distance may be determined based on reference points of determined UI elements, thereby improving accuracy of the determined distance and flexibility of a distance determining manner, and improving user experience. In some implementations, to determine the distance, a first reference point of the first UI element may be determined, a target circle that intersects with the second UI element and has a smallest radius is determined from a plurality of circles that each use the first reference point as a center and that have respective radii, and the radius of the target circle is determined as the distance. In this manner, a distance between UI elements may be determined more simply and conveniently, thereby improving flexibility of a distance determining manner and improving user experience. In some implementations, to determine the distance, a horizontal spacing between the first UI element and the second UI element may be determined, a vertical spacing between the first UI element and the second UI element is determined, and the distance is determined based on any one of the following: at least one of the horizontal spacing and the vertical spacing; or a direction from a second reference point of the second UI element to a first reference point of the first UI element, and at least one of the horizontal spacing and the vertical spacing. In this manner, a distance between UI elements may be determined based on a spacing between the UI elements, thereby improving flexibility of a distance determining manner and improving user experience. In some implementations, the method may further include: determining an impact area of the first UI element based on a size of the first UI element; and determining UI elements that are in the M UI elements and that are in