Display method and electronic device

Abstract

Provided in the present application are a display method and an electronic device. The electronic device comprises a foldable screen. The method comprises: displaying a first element within a first display region on a first display screen, wherein the first element comprises first content located on a first layer and second content located on a second layer; and during the process of folding or unfolding a foldable screen, displaying within the first display region a first animation corresponding to the first element, wherein the first animation comprises an animation of the rotation and / or displacement of the first content, and an animation of the rotation and / or displacement of the second content. The method can improve the overall coordination of content displayed on a display screen of the electronic device during the process of folding or unfolding the foldable screen, thereby enhancing the overall display effect and visual experience.

Description

Display method and electronic device

[0001] CROSS-REFERENCE TO RELATED APPLICATIONS

[0002] This application claims priority to the Chinese patent application filed with the State Intellectual Property Office of the People's Republic of China on January 12, 2024, with application number 202410054624.5 and application name "A Display Method and Electronic Device", the entire contents of which are incorporated by reference into this application. Technical Field

[0003] The present application relates to the technical field of electronic devices, and in particular to a display method and electronic device. Background Art

[0004] Currently, when a foldable electronic device's screen is folded or unfolded, some user interface (UI) elements (such as application icons and service cards) displayed on the electronic device's display generally remain fixed or undergo a certain degree of translation. This approach results in poor overall interface display quality and a low visual experience. Summary of the Invention

[0005] The present application provides a display method and an electronic device for improving the overall display effect of the display screen of the electronic device during the folding or unfolding process of the folding screen of the electronic device, thereby enhancing the visual experience.

[0006] In a first aspect, an embodiment of the present application provides a display method, which is applied to an electronic device, wherein the electronic device includes a folding screen, and the method includes: displaying a first element in a first display area on a first display screen; wherein the first element includes first content located on a first layer and second content located on a second layer; during folding or unfolding of the folding screen, displaying a first animation corresponding to the first element in the first display area; wherein the first animation includes: an animation of rotation and / or displacement of the first content, and an animation of rotation and / or displacement of the second content.

[0007] In this method, the elements on the display screen of the electronic device can be displayed in layers. During the folding or unfolding process of the folding screen of the electronic device, by displaying corresponding animations for the content of different layers of the elements on the display screen, the content on each layer of the elements can be caused to rotate and / or shift accordingly with the rotation of the display screen, thereby matching the rotation process of the display screen and presenting a natural three-dimensional change effect as a whole. Therefore, this method can improve the overall display effect of the display screen of the electronic device during the folding or unfolding process of the folding screen of the electronic device, thereby enhancing the visual experience.

[0008] It should be understood that this application can also be applied to electronic devices with other screen types, such as roll-up screen electronic devices and non-foldable candy-bar phones. For example, a candy-bar phone can also present a three-dimensional effect during its rotation using the method provided by this application. In some embodiments, a roll-up screen can also be considered as one of the implementation methods of a folding screen, or both can be referred to as "flexible displays."

[0009] In one possible design, the first layer and the second layer are located on different planes; the first animation meets at least one of the following conditions: in the first animation, the first content and the second content have the same rotation direction; in the first animation, the first content and the second content have the same rotation angle; in the first animation, the first content and the second content have the same displacement direction; in the first animation, the first content and the second content have different displacement distances.

[0010] In this method, when the foldable screen is folded or unfolded, the animation effects of content on different layers within the same element can be completely identical, partially identical, or completely different, thus providing high flexibility and practicality. Furthermore, different layers within the same element are located on different planes, which helps to increase the three-dimensionality of the corresponding animation display, further enhancing the display effect.

[0011] In a possible design, the first animation satisfies at least one of the following conditions: in the first animation, the first content and the second content rotate in the same direction; in the first animation, the first content and the second content rotate at the same angle; in the first animation, the first content and the second content move in the same direction; in the first animation, the first content and the second content move in the same distance. Optionally, the first layer and the second layer are located on the same plane.

[0012] In this method, during the folding or unfolding of the folding screen, the animation effects corresponding to the content on different layers in the same element can be partially or completely the same, which can appropriately unify the style or change trend of the animation corresponding to different layers and avoid the animation effects being too complicated and affecting the visual experience.

[0013] In a possible design, in the first animation, the rotation axis of the first content is any one of the following: the central axis of the first content; the central axis of the first layer; the rotation axis of the folding screen; wherein the central axis is parallel to the rotation axis of the folding screen.

[0014] Based on this method, during the folding or unfolding of the folding screen, the rotation axis of the content on each layer in the element can have multiple options, which is highly flexible and practical, and facilitates flexible control of the corresponding animation display effects in different ways. Among them, when the rotation axis is the central axis of the content or layer, it can improve the three-dimensionality of the corresponding animation display, thereby improving the visual experience of viewing. When the rotation axis is the rotating axis of the folding screen, it can improve the matching degree between the element animation and the state change of the folding screen, thereby improving the overall coordination.

[0015] In one possible design, the first display screen and the foldable screen are the same display screen; in the first animation, the rotation direction of the first content is the same as the rotation direction of the first display area; or, the first display area is located on a side opposite to any display area on the foldable screen; in the first animation, the rotation direction of the first content is the same as the rotation direction of any display area. Optionally, any display area is located on either side of the rotation axis of the foldable screen.

[0016] The above method ensures that, during the folding or unfolding of a foldable screen, the rotation direction of the content on any layer in the rotation effect of an element displayed in any display area on the electronic device's display screen is the same as the rotation direction of the display area in which it is located. This ensures a high degree of match or consistency between the rotation effect of the element and the rotation process of the display area in which it is located, helping to enhance the coordination of the overall display effect.

[0017] In one possible design, in the first animation, the rotation angle of the first content meets any one of the following conditions: positively correlated with the rotation angle of the first display area; positively correlated with the distance from the first content to the rotation axis of the folding screen; half of the change value of the folding angle of the folding screen; or a set angle.

[0018] Based on this method, during the folding or unfolding of the folding screen, there are multiple options for the rotation angle of the content located on each layer in the element, which is highly flexible and practical, and facilitates flexible control of the corresponding animation display effects in different ways. Among them, when the rotation angle of the content is positively correlated with the rotation angle of the display area where the content is located, the rotation angle of the content and the rotation angle of the display area can be coordinated and changed with high synchronization. When the rotation angle of the content is positively correlated with the distance from the content to the rotation axis of the folding screen, different rotation angles can be presented for content in different positions, and a gradual effect of the rotation angles of different content in the same display area can be achieved. When the rotation angle of the content is half of the change value of the folding angle of the folding screen, the rotation of the content can follow the rotation of the folding screen, maximizing the synchronization of the rotation. The above methods can all enhance the overall display effect and improve the viewing experience.

[0019] In a possible design, in the first animation, the displacement direction of the first content is: towards the rotation axis of the folding screen, or away from the rotation axis of the folding screen.

[0020] Optionally, when the first display screen and the folding screen are the same display screen and the folding screen is an inner folding screen, or when the first display area is located on a side opposite to any display area on the folding screen and the folding screen is an outer folding screen, during the folding of the folding screen, the displacement direction of the first content is in the direction toward the rotation axis of the folding screen; during the unfolding of the folding screen, the displacement direction of the first content is in the direction away from the rotation axis of the folding screen; or, when the first display screen and the folding screen are the same display screen and the folding screen is an outer folding screen, or when the first display area is located on a side opposite to any display area on the folding screen and the folding screen is an inner folding screen, during the folding of the folding screen, the displacement direction of the first content is in the direction away from the rotation axis of the folding screen; during the unfolding of the folding screen, the displacement direction of the first content is in the direction toward the rotation axis of the folding screen.

[0021] Based on the above method, during the folding or unfolding process of the folding screen, the displacement direction of the content on each layer of the elements on the display screen can be coordinated with the rotation direction of the folding screen, thereby enhancing the overall sense of interaction and improving the overall interaction effect.

[0022] In a possible design, in the first animation, the displacement distance of the first content meets any of the following conditions: positively correlated with the distance from the first content to the rotation axis of the folding screen; positively correlated with the rotation angle of the first content; or a set distance.

[0023] Based on this method, during the folding or unfolding of the folding screen, there are multiple options for the displacement distance of the content located on each layer in the element, which is highly flexible and practical, and facilitates flexible control of the corresponding animation display effects in different ways. Among them, when the displacement distance of the content is positively correlated with the distance from the content to the rotation axis of the folding screen, different displacement distances can be presented for content in different positions, and a gradual effect of the displacement distances of different content in the same display area can be achieved to enhance the immersiveness of the animation. When the displacement distance of the content is positively correlated with the rotation angle of the content, the coordination of the rotation animation and the displacement animation of the content can be enhanced, thereby enhancing the overall display effect. When the content is a set distance, the displacement animation can be implemented simply and quickly at a low cost, with high efficiency.

[0024] In one possible design, the process of folding or unfolding the folding screen specifically includes: the process of the folding screen changing from a first physical state to a second physical state; wherein the first physical state is any one of a plurality of physical states, and the second physical state is any one of the plurality of physical states except the first physical state; the plurality of physical states include: unfolded state, folded state, first intermediate state, and second intermediate state.

[0025] Based on the above method, the electronic device can, in the process of switching between various physical states of the folding screen by folding or unfolding the display screen, layer the animation of different contents in the display elements, thereby presenting a visual experience of spatial rotation and / or displacement of a cube, which can enhance the user experience when the folding screen is folded or unfolded.

[0026] Optionally, in the unfolded state, the folding angle of the folding screen is 180 degrees; in the folded state, the folding angle of the folding screen is 0 degrees; in the first intermediate state, the folding angle of the folding screen is greater than 0 degrees and less than 180 degrees; in the first intermediate state, the folding angle of the folding screen is greater than 0 degrees and less than 180 degrees; and the folding angles of the folding screen in the first intermediate state and the second intermediate state are different. The folding angle is the angle between the areas on both sides of the rotation axis of the folding screen.

[0027] In a possible design, the duration of the animation of the rotation and / or displacement of the first content is different from the duration of the animation of the rotation and / or displacement of the second content.

[0028] In this method, the display durations of the animations corresponding to the contents on different layers in the element can be different, which can further expand and enrich the overall animation display effect on the display screen.

[0029] In a possible design, the first element further includes third content located on a third layer; and the first animation further includes: an animation of rotation and / or displacement of the third content.

[0030] In one possible design, the first element includes at least one of the following: wallpaper, icon, card, picture, control, and text.

[0031] The solution provided in the present application can be applied to a variety of different types of elements and is highly practical.

[0032] In one possible design, the method further includes: displaying a second element in a second display area on the first display screen before the folding screen is folded or unfolded; wherein the second element includes a fourth content located on a fourth layer and a fifth content located on a fifth layer; the method further includes: displaying a second animation corresponding to the second element in the second display area during the folding or unfolding of the folding screen; wherein the second animation includes: an animation of the rotation and / or displacement of the fourth content, and an animation of the rotation and / or displacement of the fifth content. Optionally, the first display screen and the folding screen are the same display screen, and the first display area and the second display area are respectively located on both sides of the hinge of the folding screen. In this method, during the folding or unfolding of the folding screen, the electronic device can simultaneously display layered animations of elements in the areas on both sides of the hinge of the folding screen.

[0033] In one possible design, the method further includes: displaying a third element in a third display area on the second display screen before the folding screen is folded or unfolded; wherein the third element includes a sixth content located on a sixth layer and a seventh content located on a seventh layer; the method further includes: displaying a third animation corresponding to the third element in the third display area during the folding or unfolding of the folding screen; wherein the third animation includes: an animation of rotation and / or displacement of the sixth content, and an animation of rotation and / or displacement of the seventh content.

[0034] Based on the above method, during the folding or unfolding process of the folding screen, the electronic device can simultaneously display layered animations of elements on different display screens, which is highly practical.

[0035] In a second aspect, the present application provides an electronic device, comprising a display screen, a memory, and one or more processors; wherein the memory is used to store computer program code, and the computer program code comprises computer instructions; when the computer instructions are executed by the one or more processors, the electronic device executes the method described in the above-mentioned first aspect or any possible design of the first aspect.

[0036] In one possible design, the electronic device includes a foldable screen.

[0037] In a third aspect, the present application provides a computer-readable storage medium storing a computer program. When the computer program runs on an electronic device, the electronic device executes the method described in the first aspect or any possible design of the first aspect.

[0038] In a fourth aspect, the present application provides a computer program product, which includes a computer program or instructions. When the computer program or instructions are run on an electronic device, the electronic device executes the method described in the first aspect or any possible design of the first aspect.

[0039] In a fifth aspect, the present application provides a chip system comprising a processor and a memory, wherein the memory stores instructions; when the instructions are executed by the processor, the method described in the first aspect or any possible design of the first aspect is implemented. The chip system may be composed of a chip alone, or may include a chip and other discrete components.

[0040] The beneficial effects of the second to fifth aspects mentioned above can be referred to the beneficial effects of the first aspect mentioned above, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] FIG1 is a schematic diagram of different physical states of an electronic device provided by an embodiment of the present application;

[0042] FIG2 is a schematic diagram of an interface displayed on a foldable screen of an electronic device during the unfolding process;

[0043] FIG3a is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application;

[0044] FIG3 b is a schematic diagram of a software structure of an electronic device provided in an embodiment of the present application;

[0045] FIG4 is a schematic diagram of a display method provided in an embodiment of the present application;

[0046] FIG5 is a schematic diagram of an interface for displaying application icons in layers according to an embodiment of the present application;

[0047] FIG6 is a schematic diagram of an interface for displaying service cards in layers according to an embodiment of the present application;

[0048] FIG7 is a schematic diagram of an interface for displaying service cards in layers according to an embodiment of the present application;

[0049] FIG8 is a schematic diagram of a display process of a layered animation of an element provided in an embodiment of the present application;

[0050] FIG9 is a schematic diagram of a display process of a layered animation of an application icon provided in an embodiment of the present application;

[0051] FIG10 is a schematic diagram of a display process of a layered animation of an application icon provided in an embodiment of the present application;

[0052] FIG11 is a schematic diagram of a display process of a layered animation of a service card provided in an embodiment of the present application;

[0053] FIG12a is a schematic diagram of an interface displayed on a folding screen in an unfolded state provided by an embodiment of the present application;

[0054] FIG12 b is a schematic diagram of an interface displayed on a folding screen in a semi-folded state provided by an embodiment of the present application;

[0055] FIG12c is a schematic diagram of an interface displayed on a folding screen in a semi-folded state provided by an embodiment of the present application;

[0056] FIG13 is a schematic diagram of an animation display process of a folding screen during folding according to an embodiment of the present application;

[0057] FIG14 is a schematic structural diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0058] In order to make the purpose, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions provided by the embodiments of the present application will be described clearly, completely and in detail below in conjunction with the drawings in the embodiments of the present application. The terms used in the following embodiments are only for the purpose of describing specific embodiments and are not intended to limit the present application. As used in the specification and claims of this application, the singular expressions "one", "a kind of", "said", "above", "the" and "this" are intended to also include expressions such as "one or more", unless there is a clear contrary indication in the context. It should also be understood that in the embodiments of the present application, "at least one" means one or more, "one or more" means one, two or more; "more" means two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships can exist; for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone, where A and B can be singular or plural. The character " / " generally indicates that the associated objects are in an "or" relationship. "At least one of the following" or similar expressions refers to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, or c can mean: a, b, c, a and b, a and c, b and c, or a, b, and c, where a, b, and c can be single or plural.

[0059] References to "one embodiment" or "some embodiments" in this specification mean that a particular feature, structure, or characteristic described in conjunction with that embodiment is included in one or more embodiments of the present application. Thus, phrases such as "in one embodiment," "in some embodiments," "in other embodiments," and "in yet other embodiments" appearing in various places in this specification do not necessarily refer to the same embodiment, but rather mean "one or more but not all embodiments," unless otherwise specifically emphasized. The terms "including," "comprising," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0060] It should be noted that in the description of the embodiments of this application, terms such as "first" and "second" are used only for descriptive purposes and should not be understood as indicating or implying relative importance, order, quantity, etc. Therefore, features specified as "first" or "second" may explicitly or implicitly include one or more of such features.

[0061] For ease of understanding, illustrations of relevant concepts in the embodiments of the present application are given by way of example to facilitate understanding by those skilled in the art.

[0062] 1) An electronic device may be a device equipped with a foldable screen and capable of human-computer interaction through the foldable screen.

[0063] In some embodiments of the present application, the electronic device may be a portable device, such as a mobile phone, a tablet computer, a laptop computer, a netbook, a business intelligent terminal device (such as a videophone, a conference desktop intelligent terminal, etc.), a vehicle-mounted terminal device, an augmented reality (AR) / virtual reality (VR) device, an ultra-mobile personal computer (UMPC), a personal digital assistant (PDA), a smart home device, an intelligent robot, a workshop equipment, a wireless terminal in self-driving, a wireless terminal in remote medical surgery, a wireless terminal in a smart grid, a wireless terminal in transportation safety, a wireless terminal in a smart city, a wireless terminal in a smart home, an aircraft device, etc.

[0064] In some embodiments of the present application, the electronic device may include a device capable of performing data processing functions (such as a processor, an application processor, an image processor, or other processors). Exemplary embodiments of the electronic device include but are not limited to a device equipped with Or devices with other operating systems. In some embodiments of the present application, the electronic device may also be other portable devices, or may not be a portable electronic device. The specific form of the electronic device is not limited in the embodiments of the present application.

[0065] 2) A foldable screen refers to a display screen that can change shape through external force, including at least two display areas (or display areas or display sections, etc.). The sizes of the display areas can be different or the same. In some cases, a foldable screen is also called a flexible screen.

[0066] Among them, a display area of ​​the folding screen can be an independent and complete display screen (or an independent display unit, such as one that can be controlled by a processor as a whole), or it can refer to a display area that is part of a complete display screen. The electronic device can control the display status and displayed content of different display areas separately. Based on the control, the display status of each display area can be specifically a display-on state (also called a display state or a bright screen state), or a display-off state (such as a screen-off (or screen-off) state).

[0067] Two adjacent display areas can be movably connected based on a connecting component (for example, a hinge or flexible material). In some implementations, the exterior of the connecting component is also covered with a display screen (also referred to as a connecting screen or folding edge). In this way, the different display areas of the folding screen can be flattened and expanded into a full screen for display based on external force (such as the user unfolding it manually), or folded into a single screen for display based on external force (such as the user folding it manually). The overlapping boundary of two adjacent display areas (i.e., the location of the connecting component) can serve as the central axis of the folding screen area composed of the two display areas.

[0068] Folding screens generally have two folding methods: inward folding and outward folding. Inward folding is a folding method in which the display areas (or display screen parts) on both sides of the central axis of the folding screen are relatively close. Outward folding is a folding method in which the display areas (or display screen areas) on both sides of the central axis of the folding screen are relatively far away. A folding screen that adopts the inward folding method can be called an inward folding screen, and a folding screen that adopts the outward folding method can be called an outward folding screen. The folding methods of folding screens can be specifically divided into left-right folding and up-down folding. After the outward folding screen is folded, the different display screen parts of the folding screen will appear back to back.

[0069] In the embodiment of the present application, the angle between the display areas on both sides of the central axis of the folding screen can be referred to as the folding angle (or folding angle). Among them, when the folding screen is in a fully expanded state (that is, the display areas on both sides of the central axis are on the same plane), the folding angle is 180 degrees, and the folding screen is in an expanded state. When the folding screen is in a fully folded state), the folding screen is folded to the maximum extent, at this time the folding angle is 0 degrees, and the folding screen is in a folded state. In other states, the folding angle is greater than 0 degrees and less than 180 degrees, and the folding screen is in an intermediate state (or intermediate state). Optionally, the angle between the display areas on both sides of the central axis of the folding screen can also be referred to as an expansion angle or other names, and the name of the angle is not limited in the embodiment of the present application.

[0070] For example, taking an electronic device including an inner screen and an outer screen, where the inner screen is a folding screen, the schematic diagram (a) in FIG1 shows the state of the folding screen of the electronic device when it is fully folded, and the schematic diagram (b) in FIG1 shows the state of the folding screen of the electronic device when it is fully unfolded. The dotted line in FIG1 is used to mark the position of the central axis of the folding screen.

[0071] It should be noted that the folding screen described above is only used to explain the technical solution of this application and is not a limitation. This application does not limit the shape, appearance, material, number of display screen parts, connection method between display screen parts, folding method, etc. of each display screen part of the folding screen.

[0072] In the embodiments of the present application, an electronic device equipped with a foldable screen may be referred to as a foldable screen device, or as a foldable screen electronic device, etc. The foldable screen in the foldable screen device may be a single-piece flexible display screen, or a spliced ​​display screen consisting of multiple flexible displays and a hinge between each two flexible displays, or a spliced ​​display screen consisting of multiple rigid displays and a flexible screen between each two rigid displays, or a spliced ​​display screen consisting of multiple rigid displays and a hinge between each two rigid displays, etc., and the embodiments of the present application do not impose any restrictions on this.

[0073] In some embodiments of the present application, the foldable screen device may include a non-foldable display screen in addition to a foldable display screen (i.e., a foldable screen). In the embodiments of the present application, the non-foldable display screen may be referred to as a non-foldable screen or a straight screen.

[0074] 3) UI elements. The UI elements described in the embodiments of this application may be any visual elements displayed on a display screen, such as wallpapers, application icons, cards, controls, images, etc. Some of these elements (such as controls and application icons) can respond to user operations to call up other richer content.

[0075] Currently, during the folding or unfolding of the folding screen of an electronic device, the application icons displayed on part of the display screen of the electronic device will not change, and the application icons displayed on part of the display screen will shift left and right to a certain extent. For example, taking the electronic device shown in Figure 1 of the electronic device as an example, during the process of the inner screen of the electronic device being unfolded from the folded state (i.e., the process of the electronic device switching from the state shown in the schematic diagram (a) in Figure 1 to the state shown in the schematic diagram (b) in Figure 1), the content displayed on the outer screen of the electronic device does not change. The inner screen is initially in the screen-off (or screen-off) state. When the inner screen is unfolded to a certain angle, the translation effect of the application icons can be displayed on the inner screen of the electronic device. For example, when the inner screen of the electronic device is unfolded to the unfolding angle shown in the schematic diagram (a) in Figure 2, the inner screen of the electronic device lights up and can display the interface shown in the schematic diagram (a) in Figure 2. As the inner screen of the electronic device continues to unfold, the application icons displayed on the inner screen of the electronic device continue to shift, and can at a certain moment shift to the state shown in the schematic diagram (b) in Figure 2. As the inner screen of the electronic device continues to unfold, the application icons displayed on the inner screen of the electronic device continue to shift until they become the state shown in the schematic diagram (c) in Figure 2. During the above process, when the inner screen of the electronic device is unfolded, only the translation effect of the application icon is displayed on the inner screen, and the overall display effect is poor. Correspondingly, in the process of folding the inner screen of the electronic device from the unfolded state (that is, the process of the electronic device switching from the state shown in the schematic diagram (b) in Figure 1 to the state shown in the schematic diagram (a) in Figure 1), the content displayed on the inner screen of the electronic device does not change. The translation effect of the application icon similar to the above is displayed on the outer screen of the electronic device, which will not be described in detail here. In summary, in the process of folding or unfolding the folding screen of the electronic device, the effect of displaying the user interface elements on each display screen of the electronic device is poor, which will affect the overall display effect of the display screen, resulting in a lower visual experience when the user views it.

[0076] In view of this, the embodiments of the present application provide a display method and related electronic device for an electronic device with a foldable screen, which is used to display the dynamic change effect of UI elements (such as wallpapers, icons, cards, etc.) during the process of the physical state of the foldable screen of the electronic device changing (such as the process of folding or unfolding the foldable screen), thereby improving the overall display effect and enhancing the user's visual experience. Among them, the method and the electronic device are based on the same technical concept. Since the principles of solving the problem by the method and the electronic device are similar, the implementation of the electronic device and the method can refer to each other, and the repeated parts will not be repeated.

[0077] In the solution provided in the embodiment of the present application, during the process of the physical state of the folding screen of the electronic device changing, the electronic device can determine and display the animation effects of the UI elements on each display screen in layers based on the change in the folding angle of the folding screen, so that the animation effects of the UI elements are coordinated with the changing process of the physical state of the folding screen, thereby improving the overall display effect and enhancing the user's visual experience.

[0078] For ease of explanation, UI elements are referred to as elements in the following embodiments.

[0079] 3a below, the structure of an electronic device to which the method provided in an embodiment of the present application is applicable is introduced.

[0080] As shown in Figure 3a, the electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a USB interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display 194, and a SIM card interface 195, etc.

[0081] The sensor module 180 may include a gyroscope sensor, an acceleration sensor, a proximity light sensor, a fingerprint sensor, a touch sensor, a temperature sensor, a pressure sensor, a distance sensor, a magnetic sensor, an ambient light sensor, an air pressure sensor, a bone conduction sensor, and the like.

[0082] It is understood that the electronic device 100 shown in FIG3a is merely an example and does not limit the electronic device, and the electronic device may have more or fewer components than shown in the figure, may combine two or more components, or may have a different component configuration. The various components shown in FIG3a may be implemented in hardware, including one or more signal processing and / or application-specific integrated circuits, software, or a combination of hardware and software.

[0083] The processor 110 may include one or more processing units, for example: the processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Among them, different processing units can be independent devices or integrated into one or more processors. Among them, the controller can be the nerve center and command center of the electronic device 100. The controller can generate an operation control signal based on the instruction opcode and the timing signal to complete the control of instruction fetching and execution.

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

[0085] The execution of the display method provided in the embodiment of the present application can be controlled by the processor 110 or completed by calling other components, such as calling the processing program of the embodiment of the present application stored in the internal memory 121, or calling the processing program of the embodiment of the present application stored in a third-party device through the external memory interface 120, to control the wireless communication module 160 to communicate data with other devices, thereby improving the intelligence and convenience of the electronic device 100 and enhancing the user experience. The processor 110 can include different devices. For example, when a CPU and a GPU are integrated, the CPU and the GPU can cooperate to execute the display method provided in the embodiment of the present application. For example, part of the algorithm in the display method is executed by the CPU, and another part of the algorithm is executed by the GPU to obtain faster processing efficiency.

[0086] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode or an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a Miniled, a MicroLed, a Micro-oLed, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the electronic device 100 may include one or N display screens 194, where N is a positive integer greater than 1. The display screen 194 can be used to display information input by the user or information provided to the user, as well as various graphical user interfaces (GUIs). For example, the display screen 194 can display the elements, animations, etc. described in the embodiments of the present application.

[0087] In the embodiment of the present application, the display screen 194 can be an integrated flexible display screen, or a spliced ​​display screen consisting of two rigid screens and a flexible screen located between the two rigid screens.

[0088] Camera 193 (either a front-facing camera or a rear-facing camera, or one camera serving as both) is used to capture still images or videos. Typically, camera 193 includes a photosensitive element, such as a lens assembly and an image sensor. The lens assembly includes multiple lenses (convex or concave) that capture light signals reflected from the object to be photographed and transmit the captured light signals to the image sensor. The image sensor generates an original image of the object to be photographed based on the light signals.

[0089] The internal memory 121 can be used to store computer executable program code, which includes instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area can store the code of the operating system, application program (such as the function corresponding to the solution of the present application, etc.). The data storage area can store data created during the use of the electronic device 100, etc.

[0090] The internal memory 121 may also store one or more computer programs corresponding to the algorithms of the present application. The one or more computer programs are stored in the internal memory 121 and configured to be executed by the one or more processors 110. The one or more computer programs include instructions that can be used to perform the various steps in the following embodiments.

[0091] In addition, the internal memory 121 may include a high-speed random access memory and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0092] Of course, the code of the algorithm of the embodiment of the present application can also be stored in an external memory. In this case, the processor 110 can run the code of the algorithm of the embodiment of the present application stored in the external memory through the external memory interface 120.

[0093] A touch sensor, also known as a "touch panel," can be provided on the display screen 194. The touch sensor and the display screen 194 form a touch display screen, also known as a "touch screen." The touch sensor is used to detect touch operations applied to or near the touch sensor. The touch sensor can transmit the detected touch operations to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194. In other embodiments, the touch sensor can also be provided on the surface of the electronic device 100, at a location different from that of the display screen 194.

[0094] For example, the display screen 194 of the electronic device 100 may display a main interface, which includes icons of multiple applications (such as a camera application, a sports and health application, etc.). For example, a user may click the icon of the camera application in the main interface via the touch sensor to trigger the processor 110 to start the camera application and turn on the camera 193. The display screen 194 displays the interface of the camera application, such as the viewfinder interface.

[0095] The wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

[0096] Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In other embodiments, the antennas can be used in conjunction with a tuning switch.

[0097] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G applied to the electronic device 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. In an embodiment of the present application, the mobile communication module 150 can also be used to interact with other devices. The modem processor may include a modulator and a demodulator. The modulator is used to modulate the low-frequency baseband signal to be transmitted into a medium- and high-frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. In some embodiments, the modem processor may be an independent device. In other embodiments, the modem processor may be independent of the processor 110 and be set in the same device as the mobile communication module 150 or other functional modules.

[0098] The wireless communication module 160 can provide wireless communication solutions for the electronic device 100, including wireless local area networks (WLAN) (such as wireless fidelity (WiFi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc. The wireless communication module 160 can be one or more devices that integrate at least one communication processing module.

[0099] In addition, the electronic device 100 can implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor. For example, music playback, recording, etc. The electronic device 100 can receive input from the key 190 and generate key signal input related to the user settings and function control of the electronic device 100. The electronic device 100 can use the motor 191 to generate a vibration prompt (such as an incoming call vibration prompt). The indicator 192 in the electronic device 100 can be an indicator light, which can be used to indicate the charging status, power changes, and can also be used to indicate messages, missed calls, notifications, etc. The SIM card interface 195 in the electronic device 100 is used to connect the SIM card. The SIM card can be inserted into the SIM card interface 195 or pulled out from the SIM card interface 195 to achieve contact and separation with the electronic device 100.

[0100] It should be understood that in actual applications, the electronic device 100 may include more or fewer components than those shown in FIG3a, and the embodiments of the present application are not limited thereto. The illustrated electronic device 100 is merely an example, and the electronic device 100 may have more or fewer components than those shown in the figure, may combine two or more components, or may have different component configurations. The various components shown in the figure may be implemented in hardware, software, or a combination of hardware and software, including one or more signal processing and / or application-specific integrated circuits.

[0101] The software system of the electronic device 100 can adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture. The layered architecture divides the software into several layers, each with a clear role and division of labor. The layers communicate with each other through software interfaces. For example, as shown in Figure 3b, the software architecture can be divided into four layers, from top to bottom: the application layer, the application framework layer (framework, FWK), the runtime and system library, and the (Linux) kernel layer.

[0102] The application layer is the top layer of the operating system, including native applications of the operating system, such as camera, gallery, calendar, Bluetooth, music, video, information, etc., and may also include third-party applications. The application involved in the embodiment of the present application is referred to as application (APP), which is a software program that can realize one or more specific functions. Typically, multiple applications can be installed in an electronic device, such as a camera application, a mailbox application, etc. The applications mentioned below can be system applications that are installed on the electronic device when it leaves the factory, or they can be third-party applications that the user downloads from the Internet or obtains from other electronic devices while using the electronic device.

[0103] Of course, developers can write applications and install them into this layer. In one possible implementation, applications can be developed using the Java language by calling the application programming interface (API) provided by the application framework layer. Developers can use the application framework to interact with the underlying layer of the operating system (such as the kernel layer) and develop their own applications.

[0104] The application framework layer provides the application API and programming framework. It includes predefined functions and can include a window manager, content provider, view system, telephony manager, resource manager, and notification manager.

[0105] The window manager is used to manage window programs. The window manager can obtain the display size, determine whether there is a status bar, lock the display (or screen), capture the display, etc.

[0106] Content providers are used to store and retrieve data and make it accessible to applications. The data may include files (such as documents, videos, images, audio), text, and other information.

[0107] The view system includes visual controls, such as those that display text, images, and documents. The view system is used to build applications. The interface within a display window can be composed of one or more views. For example, the interface for a text notification icon might include a view that displays text and a view that displays an image.

[0108] The phone manager provides communication functionality for electronic devices. The notification manager enables applications to display notifications in the status bar, which can be used to convey informational messages and automatically disappear after a short period of time without user interaction.

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

[0110] The system's core library consists of two parts: one containing the Java language's callable functions and the other the system's core library. The application layer and application framework layer run within a virtual machine. For example, in Java, the virtual machine executes Java files from the application and framework layers as binary files. The virtual machine manages object lifecycles, stack management, thread management, security and exception management, and garbage collection.

[0111] The system library can include multiple functional modules. For example: surface manager, media library, 3D graphics processing library (for example: OpenGL ES), 2D graphics engine (for example: SGL), image processing library, etc. The surface manager is used to manage the display subsystem and provides the fusion of 2D and 3D layers for multiple applications. The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.564, MP3, AAC, AMR, JPG, PNG, etc. The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, synthesis and layer processing, etc. The 2D graphics engine is a drawing engine for 2D drawing.

[0112] The kernel layer provides the operating system's core system services, such as security, memory management, process management, the network protocol stack, and the driver model. These services are all implemented at the kernel layer. The kernel layer also serves as an abstraction layer between the hardware and software stacks. This layer contains many drivers related to electronic devices, including the display driver, the keyboard driver for input devices, the Flash driver for memory-based devices, the camera driver, the audio driver, the Bluetooth driver, and the Wi-Fi driver.

[0113] It should be understood that the functional services described above are only examples. In actual applications, electronic devices can also be divided into more or fewer functional services according to other factors, or the functions of each service can be divided in other ways, or the functional services can be not divided but work as a whole.

[0114] In the solution provided in the embodiment of the present application, the electronic device includes at least one folding screen and may also include a non-folding screen. The UI elements displayed on each display screen of the electronic device (which may be a folding screen or a non-folding screen) may be composed of contents located on multiple different layers. That is to say, the UI element may include multiple contents, and the multiple contents may correspond one-to-one to multiple layers, and each content may be located on a corresponding layer. When the folding screen of the electronic device is folded or unfolded, the electronic device may perform layered animation display of the UI elements on each display screen based on the change in the folding angle of the folding screen, so that the animation of the UI elements adapts to or matches the change in the folding screen state, and achieves the effect that the UI elements change dynamically with the change in the folding screen state, thereby improving the display effect and enhancing the user viewing experience. Among them, the animation of the content located on different layers may be different.

[0115] The following mainly takes the scenario where the aforementioned multiple contents are two (i.e., the UI element displayed on the electronic device display includes two contents and the two contents are located on two layers) as an example to describe in detail the solution provided in the embodiment of the present application. The specific implementation method in the scenario where the aforementioned multiple contents are more than two (i.e., the UI element displayed on the electronic device display includes a larger number of contents and the different contents are located on different layers) can be implemented with reference to the method described below and will not be described in detail in the embodiment of the present application.

[0116] It should be noted that the following embodiments may be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments.

[0117] FIG4 is a schematic diagram of a possible display method for an electronic device with a foldable screen provided in an embodiment of the present application. As shown in FIG4 , the method may include:

[0118] S401: The electronic device displays a first element in a first display area on a first display screen; wherein the first element includes first content and second content, and the first content and the second content are on different layers.

[0119] In some embodiments of the present application, an electronic device may have one or more display screens. When the electronic device has one display screen, the display screen is a foldable screen. When the electronic device has multiple display screens, the multiple display screens include at least one foldable screen.

[0120] In some embodiments of the present application, the first display screen may be any display screen or each display screen of the electronic device, and the first display screen may be a folding screen or a non-folding screen.

[0121] Optionally, when the first display screen is a folding screen, the first display screen may be the folding screen described in the aforementioned embodiment. The first display area may be part or all of the display area on one side of the central axis (or referred to as the central axis, rotating shaft, etc.) of the folding screen. For example, taking an electronic device as a device having an inner screen and an outer screen and the inner screen being a folding screen as an example, the first display screen may be the inner screen of the electronic device, such as the inner screen shown in the schematic diagram (a) in Figure 1 . The dotted line shown in the schematic diagram (a) in Figure 1 is used to mark the central axis of the inner screen. In this scenario, the first display screen, i.e., the inner screen, can be used as the inner folding screen of the electronic device, and the folding method of the first display screen may be left and right folding. In this scenario, the first display area may be the display area on the left or right side of the central axis of the inner screen. For example, the first display area may be the display area 1 or the display area 2 shown in the schematic diagram (a) in Figure 1 .

[0122] Optionally, when the first display screen is a non-folding screen, the first display area may be part or all of the display area on the first display screen. For example, taking an electronic device having an inner screen and an outer screen and the inner screen being a folding screen as an example, the first display screen may be the outer screen of the electronic device, such as the outer screen shown in the schematic diagram (b) in Figure 1 . The dotted line shown in the schematic diagram (b) in Figure 1 is used to mark the central axis of the inner screen of the electronic device, and the folding method of the inner screen of the electronic device may be left and right folding. In this scenario, the first display area may be part or all of the display area of ​​the outer screen. For example, the first display area may be the display area 3 shown in the schematic diagram (b) in Figure 1 .

[0123] In some embodiments of the present application, the first element may be any UI element that can be displayed on the display screen of the electronic device. For example, the first element may include at least one of a wallpaper, a picture, an icon (such as an application icon, a folder icon, etc.), a card (such as a service card, etc.), a control, etc., and is not specifically limited in the embodiments of the present application.

[0124] In some embodiments of the present application, the first content may be located on a first layer, and the second content may be located on a second layer. Optionally, the sizes of the first and second layers may be smaller than or equal to the size of the display area where the first element is located. The area on the first layer other than the area where the first content is located is a transparent area, and the area on the second layer other than the area where the second content is located is a transparent area.

[0125] In some embodiments of the present application, the method of dividing different contents in the first element can be arbitrary. For example, different contents in the first element can be divided into different layers according to the type, position, size, color and other characteristics of the content. No specific restrictions are made in the embodiments of the present application.

[0126] As an optional implementation, the first content may be background content (eg, a background image), and the second content may be foreground content (eg, text). In terms of display effect, the foreground content may cover the background content.

[0127] Example 1. In one example, taking the SMS icon (i.e., the icon of the SMS application) as the first element shown in the schematic diagram (a) of Figure 5 as an example, as shown in the schematic diagram (b) of Figure 5, the first content can be background content located on layer 1, and the second content can be foreground content located on layer 2. The dotted box shown in the schematic diagram (b) of Figure 5 can be used to represent a layer, and the content in the dotted box is the content on the layer. The electronic device can obtain the SMS icon shown in the schematic diagram (a) of Figure 5 by drawing layer 1 and layer 2 separately, and displaying it in a manner such that layer 2 covers layer 1.

[0128] Example 2. In one example, taking the service card of the calendar application shown in the schematic diagram (a) of Figure 6 as the first element, as shown in the schematic diagram (b) of Figure 6, the first content can be background content located on layer 1, and the second content can be foreground content located on layer 2. The dotted box shown in the schematic diagram (b) of Figure 6 can be used to represent a layer, and the content within the dotted box is the content on the layer. The electronic device can display the text message icon shown in the schematic diagram (a) of Figure 6 by drawing layer 1 and layer 2 separately, and displaying it in a manner such that layer 2 covers layer 1.

[0129] Example 3. In some embodiments of the present application, in addition to the first content and the second content mentioned above, the first element may also include a third content, and the third content may be located on a third layer. In an example, taking the service card of the sports health application shown in the schematic diagram (a) in Figure 7 as the first element, as shown in the schematic diagram (b) in Figure 7, the first content may be background content located on layer 1, the second content may be a part of the foreground content located on layer 2, and the third content may be another part of the foreground content located on layer 3. The dotted box shown in the schematic diagram (b) in Figure 7 is used to represent the layer, and the content in the dotted box is the content on the layer. The electronic device draws layer 1, layer 2 and layer 3 respectively, and can display the card shown in the schematic diagram (a) in Figure 7 in a manner such that layer 2 and layer 3 cover layer 1.

[0130] S402: When the folding screen is folded or unfolded, the electronic device displays a first animation and a second animation in a first display area; wherein the first animation includes a process of rotation and / or displacement of the first content, and the second animation includes a process of rotation and / or displacement of the second content.

[0131] Optionally, the folding process of the folding screen described in the embodiment of the present application can be: the process of folding the folding screen from the unfolded state to the folded state, or the process of folding the folding screen from the unfolded state to the intermediate state, or the process of folding the folding screen from one intermediate state to another intermediate state.

[0132] Optionally, the process of unfolding the folding screen described in the embodiment of the present application can be: the process of unfolding the folding screen from a folded state to an unfolded state, or the process of unfolding the folding screen from a folded state to an intermediate state, or the process of unfolding the folding screen from an intermediate state to another intermediate state.

[0133] Among them, the folding angles of the folding screen are different in different intermediate states.

[0134] Optionally, in the implementation of this application, during the folding or unfolding of the foldable screen of the electronic device, the changes in the two display screens on either side of the foldable screen's central axis are symmetrical, that is, the two display screens on either side of the foldable screen's central axis can be considered to rotate in opposite directions relative to the central axis, and the two display screens on either side of the foldable screen's central axis rotate at the same angle relative to the central axis. This angle can be half of the change in the foldable screen's folding angle.

[0135] The rotation and / or displacement of the first content described in the embodiment of the present application can also be understood as the rotation and / or displacement of the first layer where the first content is located. The rotation and / or displacement of the second content described in the embodiment of the present application can also be understood as the rotation and / or displacement of the second layer where the second content is located.

[0136] In some embodiments of the present application, the display durations of the first animation and the second animation may be different. For example, the duration of the second animation may be slightly longer than the duration of the first animation, for example, the difference between the duration of the second animation and the duration of the first animation may be less than or equal to a set value.

[0137] In some embodiments of the present application, when the electronic device detects that the display screen where the first display area is located is rotating, it can first determine the rotation direction and rotation angle of the first display area, and then determine the rotation mode and / or displacement mode of the first content and the second content according to the rotation direction and rotation angle of the first display area, and finally display the first animation based on the rotation mode and / or displacement mode of the first content, and display the second animation based on the rotation mode and / or displacement mode of the second content.

[0138] Determining the rotation mode includes determining the rotation axis, rotation direction, and rotation angle, and determining the displacement mode includes determining the displacement direction and distance. Detailed descriptions of each are given below.

[0139] 1. Rotation axis

[0140] In some embodiments of the present application, the rotation axis of the content in the first element (any content in the first element, or each content in the first element) can be the central axis of the folding screen, or it can be the central axis of the content itself and the central axis is parallel to the central axis of the folding screen.

[0141] Optionally, the central axis described in the embodiment of the present application can be used to divide the corresponding content / display area / display screen into two parts in width or height, that is, the width or height of the parts on both sides of the central axis can be the same.

[0142] As an optional embodiment, the rotation axis of the first content can be the central axis of the folding screen, and the rotation axis of the second content can be the central axis of the second content or the central axis of the layer where the second content is located, and the central axis is parallel to the central axis of the folding screen.

[0143] As another optional embodiment, the rotation axis of the first content can be the central axis of the first content or the central axis of the layer where the first content is located, and the central axis is parallel to the central axis of the folding screen; the rotation axis of the second content can be the central axis of the second content or the central axis of the layer where the second content is located, and the central axis is parallel to the central axis of the folding screen.

[0144] Example 4. In one example, taking the SMS icon described in Example 1 as the first element, when the central axis of the folding screen is in the vertical direction, the rotation axis of the first content can be the rotation axis 1 shown in Figure 5, and the rotation axis of the second content can be the rotation axis 2 shown in Figure 5. Among them, the rotation axis 1 and the rotation axis 2 are both rotation axes in the vertical direction. Optionally, the first element can be displayed in the display area 1 or the display area 2 on the inner screen shown in the schematic diagram (a) of Figure 1, or the first element can be displayed on the outer screen shown in the schematic diagram (b) of Figure 1.

[0145] Example 5. In one example, taking the service card described in Example 2 as the first element, when the central axis of the folding screen is in the horizontal direction, the rotation axis of the first content can be the rotation axis 1 shown in Figure 6, and the rotation axis of the second content can be the rotation axis 2 shown in Figure 6. Among them, the rotation axis 1 and the rotation axis 2 are both rotation axes in the horizontal direction. Optionally, the first element can be displayed in the display area 1 or the display area 2 on the inner screen shown in the schematic diagram (a) of Figure 1, or the first element can be displayed on the outer screen shown in the schematic diagram (b) of Figure 1.

[0146] Embodiment 6. In one example, taking the card described in the aforementioned embodiment 3 as the first element, when the central axis of the folding screen is in the vertical direction, the rotation axis of the first content can be the rotation axis 1 shown in Figure 7, the rotation axis of the second content can be the rotation axis 2 shown in Figure 7, and the rotation axis of the third content can be the rotation axis 3 shown in Figure 7. Among them, the rotation axis 1, the rotation axis 2, and the rotation axis 3 are all rotation axes in the vertical direction. Optionally, the first element can be displayed in the display area 1 or the display area 2 on the inner screen shown in the schematic diagram (a) in Figure 1, or the first element can be displayed on the outer screen shown in the schematic diagram (b) in Figure 1.

[0147] 2. Rotation direction

[0148] In some embodiments of the present application, the rotation direction of the content in the first element may be the same as the rotation direction of the first display area where the first element is located. The rotation directions of different contents in the first element may be the same.

[0149] Embodiment 7. In one example, in the above embodiment 4, when the first element shown in the schematic diagram (a) in FIG5 is displayed in the display area 1 on the inner screen shown in the schematic diagram (a) in FIG1, during the folding of the inner screen, the rotation direction of the first content on the first layer in the first element can be the rotation direction 1 shown in the schematic diagram (b) in FIG5. The rotation direction of the second content on the second layer in the first element can also be the rotation direction 1 shown in the schematic diagram (b) in FIG5.

[0150] Embodiment 8. In one example, in the above embodiment 4, when the first element shown in the schematic diagram (a) in FIG5 is displayed in the display area 3 on the outer screen shown in the schematic diagram (a) in FIG1, and the outer screen is located on the side facing away from the display area 1 in the inner screen shown in FIG1, during the folding of the inner screen, the rotation direction of the first content on the first layer in the first element can be the rotation direction 1 shown in the schematic diagram (b) in FIG5. The rotation direction of the second content on the second layer in the first element can also be the rotation direction 1 shown in the schematic diagram (b) in FIG5.

[0151] Embodiment 9. In one example, in the above embodiment 5, when the first element shown in the schematic diagram (a) in FIG6 is displayed in the display area 1 on the inner screen shown in the schematic diagram (a) in FIG1, during the expansion of the inner screen, the rotation direction of the first content on the first layer in the first element can be the rotation direction 2 shown in the schematic diagram (b) in FIG6. The rotation direction of the second content on the second layer in the first element can also be the rotation direction 2 shown in the schematic diagram (b) in FIG6. The rotation direction 2 shown in the schematic diagram (b) in FIG6 is opposite to the rotation direction 2 shown in the schematic diagram (b) in FIG5.

[0152] In some embodiments of the present application, the rotation angles of different contents belonging to the same element may be the same.

[0153] 3. Rotation angle

[0154] In some embodiments of the present application, the rotation angle of the content in the first element may be associated with the rotation angle of the first display area where the first element is located and / or the position of the first element in the first display area, which may specifically include at least one of the following situations:

[0155] 1) The rotation angle of the content in the first element is positively correlated with the rotation angle of the first display area. That is, the larger the rotation angle of the first display area, the larger the rotation angle of the content, and the smaller the rotation angle of the first display area, the smaller the rotation angle of the content.

[0156] As an optional embodiment, the rotation angle of the first display area may be the angle of rotation of the first display area relative to the central axis of the folding screen. For example, during the folding or unfolding of the folding screen of the electronic device, if the first display area rotates 10 degrees (10°) around the central axis of the folding screen, the rotation angle of the first display area is considered to be 10 degrees.

[0157] Optionally, the rotation angle of the content in the first element may be the same as the rotation angle of the first display area.

[0158] As another optional implementation, the rotation angle of the first display area may be half of the change value of the folding angle of the folding screen.

[0159] 2) The rotation angle of the content in the first element is positively correlated with the distance between the first element and the center axis of the folding screen. That is, the greater the distance between the first element and the center axis of the folding screen, the greater the rotation angle of the content in the first element, and the smaller the distance between the first element and the center axis of the folding screen, the smaller the rotation angle of the content in the first element.

[0160] Based on this approach, when the first display area includes multiple elements, the rotation angle of the content in the element closer to the central axis is smaller than the rotation angle of the content in the element farther from the central axis.

[0161] For example, taking the elements in the display area to the left or right of the central axis of the foldable screen shown in Figure 8 as an example, the rotation angle of the content in the element closest to the central axis can be 10 degrees, the rotation angle of the content in the element next closest to the central axis can be 20 degrees, and the rotation angle of the content in the element farthest from the central axis can be 30 degrees. After the content in the element is rotated, the width of the content will be shortened. Therefore, in Figure 8, the farther the element is from the central axis, the smaller the width after rotation.

[0162] 3) Set the angle

[0163] In this manner, the rotation angle of the content in the first element may be a set angle. Optionally, the set angle may correspond to element features such as the type and position of the first element, and different element features may correspond to different set angles.

[0164] In some embodiments of the present application, the rotation angles of different contents belonging to the same element may be the same or different, and are not specifically limited in the embodiments of the present application.

[0165] 4. Displacement direction

[0166] In some embodiments of the present application, if the first display area where the first element is located is a display area on a foldable screen, and the folding method of the foldable screen is inward folding, then during the folding process of the foldable screen, the displacement direction of the content in the first element may be toward the central axis of the foldable screen, and during the unfolding process of the foldable screen, the displacement direction of the content in the first element may be away from (or away from) the central axis of the foldable screen. If the first display area where the first element is located is a display area on a foldable screen, and the folding method of the foldable screen is outward folding, then during the folding process of the foldable screen, the displacement direction of the content in the first element may be away from the central axis of the foldable screen, and during the unfolding process of the foldable screen, the displacement direction of the content in the first element may be toward the central axis of the foldable screen.

[0167] For example, in the scenario described in the sixth embodiment, the rotation direction of the content in the first element may be the displacement direction 1 shown in the schematic diagram (a) in FIG1 .

[0168] For another example, in the scenario described in the above-mentioned embodiment 8, the rotation direction of the content in the first element may be the displacement direction 2 shown in the schematic diagram (a) in FIG1 .

[0169] In some embodiments of the present application, if the first display area where the first element is located is a display area on a non-folding screen, the displacement direction of the content in the first element can be a set direction.

[0170] For example, in the scenario described in the above embodiment 7, the setting method can be a direction facing away from the central axis of the folding screen, and the rotation direction of the content in the first element can be the displacement direction 3 shown in the schematic diagram (b) in Figure 1.

[0171] In some embodiments of the present application, the displacement directions of different contents belonging to the same element may be the same.

[0172] 5. Displacement distance

[0173] In some embodiments of the present application, the displacement distance of the content in the first element may be at least one of the following:

[0174] 1) Set distance

[0175] In this manner, the displacement distance of the content in the first element may be a set distance.

[0176] 2) The displacement distance of the content in the first element is positively correlated with the distance between the first element and the center axis of the folding screen. That is, the greater the distance between the first element and the center axis of the folding screen, the greater the displacement distance of the content in the first element, and the smaller the distance between the first element and the center axis of the folding screen, the smaller the displacement distance of the content in the first element.

[0177] Based on this approach, when the first display area includes multiple elements, the displacement distance of the content in the element closer to the central axis is smaller than the displacement distance of the content in the element farther from the central axis.

[0178] 3) The displacement distance of the content in the first element is positively correlated with the rotation angle of the content. That is, the larger the rotation angle of the content in the first element, the larger the displacement distance of the content, and the smaller the rotation angle of the content in the first element, the smaller the displacement distance of the content.

[0179] In some embodiments of the present application, the displacement distances of different contents belonging to the same element may be the same or different, and are not specifically limited in the embodiments of the present application.

[0180] Example 10. In one example, taking the SMS icon described in Example 1 as displayed in the display area 1 of the inner screen shown in the schematic diagram (a) of Figure 1 as an example, combined with the method described above, in one possible manner, during the folding of the inner screen, the animation corresponding to the first element displayed in the display area 1 (including the first animation and the second animation executed simultaneously) can refer to Figure 9. Among them, the schematic diagram (a) of Figure 9 shows the SMS icon displayed when the inner screen is in the unfolded state, which is the original SMS icon. After the inner screen begins to fold, the content in different layers of the SMS icon rotates and / or shifts respectively, and can change to the state shown in the schematic diagram (b) of Figure 9 at a certain moment. While the animation continues to be displayed, the content in different layers of the SMS icon rotates and / or shifts respectively, and can change to the state shown in the schematic diagram (c) of Figure 9 at a certain moment. Among them, the dotted lines shown in the schematic diagrams (b) and (c) of Figure 9 are used to mark the position of the layer where the second content, i.e., the foreground content, is located after rotation, and are not the actual displayed content. In the process of gradually changing from the SMS icon shown in the schematic diagram (a) in Figure 9 to the SMS icon shown in the schematic diagram (c) in Figure 9, the first animation includes an animation of rotating the first content and the background content, and the second animation includes an animation of rotating and displacing the second content and the foreground content.

[0181] In the original SMS icon, the layers containing the first and second contents are parallel (as shown in the SMS icon positions in the diagram (a) of Figure 9). However, during the subsequent animation display, the first content does not shift, while the second content does. Therefore, there is a relative shift between the layers containing the second content and the first content, and between the second content and the first content. Therefore, visually, the animation effects of the first and second contents are not completely synchronized.

[0182] For ease of understanding, FIG10 more vividly illustrates the process of the SMS icon shown in the schematic diagram (b) of FIG9 changing to the SMS icon shown in the schematic diagram (c) of FIG9. The first layer (i.e., the layer where the first content is located) and the second layer (i.e., the layer where the second content is located) shown in the schematic diagram (a) of FIG10 are parallel, and the content seen from the outside of the second layer and perpendicular to the second layer is the SMS icon shown in the schematic diagram (b) of FIG9. The first layer and the second layer shown in the schematic diagram (b) of FIG10 are parallel, and the content seen from the outside of the second layer and perpendicular to the second layer is the SMS icon shown in the schematic diagram (c) of FIG9. Comparing the schematic diagrams (a) and (b) of FIG10, it can be seen that there is a parallel relative displacement between the first layer and the second layer, and there is a parallel relative displacement between the first content and the second content.

[0183] It should be noted that the schematic diagram (b) in Figure 9 and the schematic diagram (c) in Figure 9 only exemplify the animation interfaces displayed at two moments during the folding process of the folding screen, rather than all the animation interfaces, and therefore do not impose any restrictions on the animation interfaces displayed on the electronic device.

[0184] Example 11. In one example, taking the SMS icon described in the aforementioned Example 1 displayed in the display area 1 in the inner screen shown in the schematic diagram (a) in Figure 1 as an example, combined with the method described above, in one possible manner, during the expansion of the inner screen, the animation corresponding to the first element displayed in the display area 1 (including the first animation and the second animation executed synchronously) can refer to the content shown in the schematic diagram (c) in Figure 9 to gradually change to the content shown in the schematic diagram (a) in Figure 9, which will not be described in detail here.

[0185] Example 12. In one example, taking the service card described in the aforementioned Example 2 displayed in the display area 1 in the inner screen shown in the schematic diagram (a) in Figure 1 as an example, combined with the method described above, in a possible manner, during the folding of the inner screen, the process of displaying the animation corresponding to the first element in the display area 1 (including the first animation and the second animation executed synchronously) can refer to the process in which the content shown in the schematic diagram (a) in Figure 11 gradually changes to the content shown in the schematic diagram (b) in Figure 11, and then gradually changes to the content shown in the schematic diagram (c) in Figure 11, which will not be described in detail here.

[0186] Example 13. In one example, the main interface displayed by the folding screen of the electronic device in the unfolded state may be the interface shown in Figure 12a. During the folding process of the folding screen, the electronic device may display a layered animation of each element in each display area on the folding screen according to the method provided in the aforementioned embodiment. For example, the electronic device may perform a rotation and / or displacement animation display on the content of each layer of each element. During the animation display process, when the folding angle of the folding screen changes to the folding angle shown in Figure 12b, the main interface displayed by the electronic device may be the interface shown in Figure 12b, and when the folding angle of the folding screen changes to the folding angle shown in Figure 12c, the main interface displayed by the electronic device may be the interface shown in Figure 12c. In the above-mentioned animation display process, the elements on the folding screen (such as application icons, service cards, etc.) present corresponding rotation and / or displacement animations as the folding angle changes, so that the animation effect of the elements is coordinated with the change process of the physical state of the folding screen, which can improve the overall display effect and thus improve the user's visual experience.

[0187] It should be noted that Figures 12a to 12c only exemplify the interfaces displayed at certain moments during the folding process of the folding screen, rather than all interfaces, and therefore do not limit the interfaces displayed on the electronic device.

[0188] Example 14. In one example, the lock screen interface displayed by the folding screen of the electronic device in the unfolded state may be the interface shown in the schematic diagram (a) of Figure 13. During the folding process of the folding screen, the electronic device may display a layered animation of each element in each display area on the folding screen according to the method provided in the aforementioned embodiment. During the animation display process, when the folding angle of the folding screen changes to the folding angle shown in the schematic diagram (b) of Figure 13, the lock screen interface displayed by the electronic device may be the interface shown in the schematic diagram (b) of Figure 13, and when the folding angle of the folding screen changes to the folding angle shown in the schematic diagram (c) of Figure 13, the lock screen interface displayed by the electronic device may be the interface shown in the schematic diagram (c) of Figure 13. In the above-mentioned animation display process, the elements on the folding screen (such as the system icons at the bottom of the display screen) present corresponding rotation and / or displacement animations as the folding angle changes, so that the animation effect of the elements is coordinated with the change process of the physical state of the folding screen, which can improve the overall display effect and thus improve the user's visual experience.

[0189] It should be noted that the schematic diagrams (a) to (c) in Figure 13 only illustrate the interfaces displayed at certain moments during the folding process of the folding screen, rather than all interfaces, and therefore do not limit the interfaces displayed on the electronic device.

[0190] Optionally, in an embodiment of the present application, the combination of the first animation and the second animation described in the above method can also be referred to as the first animation, that is, in an embodiment of the present application, the animation including the process of rotation and / or displacement of the first content and the process of rotation and / or displacement of the second content can be referred to as the first animation.

[0191] Based on the above embodiments and the same technical concept, an embodiment of the present application also provides an electronic device for implementing the display method provided in an embodiment of the present application. As shown in Figure 14, the electronic device 1400 may include: a memory 1401, one or more processors 1402, and one or more computer programs (not shown in the figure). The above-mentioned devices may be coupled via one or more communication buses 1403. The electronic device 1400 also includes a display screen 1404. The electronic device 1400 may be a folding screen device.

[0192] Among them, one or more computer programs (codes) are stored in the memory 1401, and one or more computer programs include computer instructions; one or more processors 1402 call the computer instructions stored in the memory 1401, so that the electronic device 1400 executes the display method provided by the above-mentioned embodiment of the present application.

[0193] In a specific implementation, the memory 1401 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more disk storage devices, flash memory devices or other non-volatile solid-state storage devices. The memory 1401 can store an operating system (hereinafter referred to as system), such as an embedded operating system such as ANDROID, IOS, WINDOWS, or LINUX. The memory 1401 can be used to store the implementation program of the embodiment of the present application. The memory 1401 can also store a network communication program, which can be used to communicate with one or more additional devices, one or more user devices, and one or more network devices.

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

[0195] The display screen 1404 is used to display application interfaces and other related user interfaces.

[0196] It should be noted that Figure 14 is only one implementation of the electronic device 1400 provided in an embodiment of the present application. In actual applications, the electronic device 1400 may also include more or fewer components. For details, please refer to the specific structure and description shown in Figure 3a, which will not be described in detail here.

[0197] Based on the above embodiments and the same technical concept, an embodiment of the present application further provides a computer-readable storage medium, which stores a computer program. When the computer program runs on a computer, the computer executes the method provided in the above embodiments.

[0198] Based on the above embodiments and the same technical concept, an embodiment of the present application further provides a computer program product, which includes a computer program or instructions. When the computer program or instructions are run on a computer, the computer executes the method provided in the above embodiments.

[0199] The methods provided in the embodiments of the present application may be implemented in whole or in part through software, hardware, firmware, or any combination thereof. When implemented using software, they may be implemented in whole or in part in the form of a computer program product. A computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions according to the embodiments of the present invention are generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, a network device, a user device, or other programmable device. Computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via a wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) method. A computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server or data center that includes one or more available media. Available media can be magnetic media (e.g., floppy disks, hard disks, magnetic tapes), optical media (e.g., digital video discs (DVDs), or semiconductor media (e.g., SSDs), etc.

[0200] Obviously, those skilled in the art may make various changes and modifications to the present application without departing from the scope of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is intended to include these modifications and variations.

Claims

1. A display method, applied to an electronic device, characterized in that The electronic device includes a foldable screen, and the method includes: Display a first element within a first display area on a first display screen; wherein, the first element includes first content located on a first layer and second content located on a second layer; During the folding or unfolding of the foldable screen, display a first animation corresponding to the first element within the first display area; wherein, the first animation includes: an animation of the first content rotating and / or displacing, and an animation of the second content rotating and / or displacing.

2. The method according to claim 1, wherein The first layer and the second layer are located on different planes; the first animation complies with at least one of the following: In the first animation, the rotation directions of the first content and the second content are the same; In the first animation, the rotation angles of the first content and the second content are the same; In the first animation, the displacement directions of the first content and the second content are the same; In the first animation, the displacement distances of the first content and the second content are different.

3. The method according to claim 1 or 2, characterized in that, In the first animation, the rotation axis of the first content is any one of the following: The central axis of the first content; The central axis of the first layer; The rotation axis of the foldable screen; Wherein, the central axis is parallel to the rotation axis of the foldable screen.

4. The method according to any one of claims 1 to 3, characterized in that The first display screen and the foldable screen are the same display screen; in the first animation, the rotation direction of the first content is the same as the rotation direction of the first display area; or The first display area is located on one side opposite to any display area on the foldable screen; in the first animation, the rotation direction of the first content is the same as the rotation direction of the any display area.

5. The method according to any one of claims 1 to 4, characterized in that, In the first animation, the rotation angle of the first content complies with any one of the following: Is positively correlated with the rotation angle of the first display area; Is positively correlated with the distance from the first content to the rotation axis of the foldable screen; Is half of the change value of the folding angle of the foldable screen; Is a set angle.

6. The method according to any one of claims 1 to 5, characterized in that In the first animation, the displacement direction of the first content is: towards the rotation axis of the foldable screen, or away from the rotation axis of the foldable screen.

7. The method according to any one of claims 1 to 6, characterized in that In the first animation, the displacement distance of the first content complies with any one of the following: Is positively correlated with the distance from the first content to the rotation axis of the foldable screen; Is positively correlated with the rotation angle of the first content; Is a set distance.

8. The method according to any one of claims 1 to 7, characterized in that, The process of the foldable screen folding or unfolding specifically includes: the process of the foldable screen changing from a first physical state to a second physical state; Wherein, the first physical state is any one of a plurality of physical states, and the second physical state is any one of the plurality of physical states other than the first physical state; the plurality of physical states include: unfolded state, folded state, first intermediate state, second intermediate state.

9. The method according to any one of claims 1 to 8, characterized in that, The duration of the animation of the first content rotating and / or displacing is different from the duration of the animation of the second content rotating and / or displacing.

10. The method according to any one of claims 1 to 9, characterized in that The first element further includes third content located on a third layer; the first animation further includes: an animation of the third content rotating and / or displacing.

11. The method according to any one of claims 1 to 10, characterized in that, The first element includes at least one of the following: wallpaper, icon, card, picture, control, text.

12. An electronic device, characterized in that, The electronic device includes a memory and one or more processors; Wherein, the memory is used for storing computer program code, and the computer program code includes computer instructions; when the computer instructions are executed by the one or more processors, the electronic device is caused to execute the method according to any one of claims 1 to 11.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, and when the computer program runs on the electronic device, the electronic device is caused to execute the method according to any one of claims 1 to 11.

14. A computer program product, characterized in that, The computer program product includes a computer program or instructions, and when the computer program or instructions run on the electronic device, the electronic device is caused to execute the method according to any one of claims 1 to 11.

Images