Display method and electronic equipment

Abstract

The invention provides a display method and electronic equipment, the electronic equipment comprises a folding screen, and the method comprises the following steps: displaying a first element in a first display area on a first display screen; wherein the first element comprises first content located on the first layer and second content located on the second layer; in the folding or unfolding process of the folding screen, displaying a first animation corresponding to the first element in the first display area; wherein the first animation comprises an animation of rotation and / or displacement of the first content and an animation of rotation and / or displacement of the second content. According to the method, the overall coordination of the content displayed by the display screen of the electronic equipment in the folding or unfolding process of the folding screen can be improved, so that the overall display effect is improved, and the visual experience is enhanced.

Description

Technical Field

[0001] This application relates to the technical field of electronic devices, and in particular, to a display method and an electronic device. Background Art

[0002] Currently, during the folding or unfolding process of the folding screen of an electronic device, some user interface (UI) elements (such as application icons, service cards, etc.) displayed on the display screen of the electronic device generally remain fixed or undergo a certain translational change. In this way, the overall interface display effect of the display screen of the electronic device is poor and the visual experience is low. Summary of the Invention

[0003] This application provides a display method and an electronic device to 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 and enhance the visual experience.

[0004] In a first aspect, an embodiment of this application provides a display method applied to an electronic device, where 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; where the first element includes a first content located on a first layer and a second content located on a second layer; during the folding or unfolding process of the folding screen, displaying a first animation corresponding to the first element in the first display area; where 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.

[0005] 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 follow the rotation of the display screen to present corresponding rotation and / or displacement changes, so as to match the rotation process of the display screen and overall present a natural three-dimensional change effect. 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, and further enhance the visual experience.

[0006] It should be understood that this application can also be applied to electronic devices with other screen types such as rollable screen electronic devices and non-foldable straight-bar mobile phones. For example, a straight-bar mobile phone can also present a three-dimensional effect through the method provided in this application during its own rotation process. In some embodiments, a rollable screen can also be considered as one implementation of a folding screen, or both can be referred to as "flexible display screens".

[0007] In a possible design, the first layer and the second layer are located on different planes; the first animation meets 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.

[0008] In this method, during the folding or unfolding of the folding screen, the animation effects of the content on different layers in the same element can be completely the same, partially the same, or completely different, so the flexibility and practicability are relatively high. Among them, different layers in the same element are located on different planes, which helps to improve the three-dimensionality during the display of the corresponding animation, and further enhances the display effect.

[0009] In a possible design, the first animation meets 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 the same. Optionally, the first layer and the second layer are located on the same plane.

[0010] 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 moderately unify the styles or change trends of the animations corresponding to different layers, and can avoid the animation effects being too complex and affecting the visual experience.

[0011] 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.

[0012] Based on this method, during the folding or unfolding of the folding screen, there are various choices for the rotation axes of the content on each layer in the element, with high flexibility and practicability, which is convenient to flexibly control the corresponding animation display effects in different ways. Among them, when the rotation axis is the central axis of the content or the layer, it can improve the three-dimensionality of the displayed animation, and further improve the visual experience degree of viewing. When the rotation axis is the rotation axis of the folding screen, it can improve the matching degree between the animation of the element and the state change of the folding screen, and further improve the overall coordination.

[0013] In a possible design, the first display screen and the folding 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 folding 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 folding screen.

[0014] Through the above method, during the folding or unfolding process of the folding screen, it can be ensured that in the rotation effect of the elements displayed in any display area on the electronic device display screen, the rotation direction of the content on any layer is the same as the rotation direction of the display area where it is located. In addition, it can ensure a high degree of matching or high consistency between the rotation effect of the element and the rotation process of the display area where it is located, which helps to enhance the coordination of the overall display effect.

[0015] In a 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.

[0016] Based on this method, during the folding or unfolding of the folding screen, the rotation angle of the content located on each layer in the element can have multiple options, which is highly flexible and practical, and is convenient for flexibly controlling 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, thereby maximizing the synchronization of the rotation. The above methods can all enhance the overall display effect and improve the viewing experience.

[0017] 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.

[0018] Optionally, when the first display screen is the same as the folding screen and the folding screen is an inward folding screen, or when the first display area is on one side opposite to any display area on the folding screen and the folding screen is an outward folding screen, during the folding process of the folding screen, the displacement direction of the first content is towards the axis of rotation of the folding screen; during the unfolding process of the folding screen, the displacement direction of the first content is away from the axis of rotation of the folding screen; or, when the first display screen is the same as the folding screen and the folding screen is an outward folding screen, or when the first display area is on one side opposite to any display area on the folding screen and the folding screen is an inward folding screen, during the folding process of the folding screen, the displacement direction of the first content is away from the axis of rotation of the folding screen; during the unfolding process of the folding screen, the displacement direction of the first content is towards the axis of rotation of the folding screen.

[0019] 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.

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

[0021] Based on this method, during the folding or unfolding process of the folding screen, there are various options for the displacement distance of the content located on each layer of the element, with high flexibility and practicality, facilitating the flexible control of the corresponding animation display effect in different ways. Among them, when the displacement distance of the content is positively correlated with the distance from the content to the axis of rotation of the folding screen, different displacement distances can be presented for the content at different positions, and a gradual change effect of the displacement distances of different contents in the same display area can also be achieved, enhancing the immersion of the animation. When the displacement distance of the content is positively correlated with the rotation angle of the content, the coordination between 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 achieved simply and quickly at a lower cost, with high efficiency.

[0022] In a possible design, the process of the folding screen folding or unfolding specifically includes: the process of the folding screen changing from a first physical state to a second physical state; where the first physical state is any one of multiple physical states, and the second physical state is any one of the multiple physical states other than the first physical state; the multiple physical states include: unfolded state, folded state, first intermediate state, second intermediate state.

[0023] Based on the above method, when the electronic device switches between various different physical states of the folding screen by folding or unfolding the display screen, it can layer and display the animations of different contents in the 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.

[0024] 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; the folding angles of the folding screen in the first intermediate state and the second intermediate state are different. Wherein, the folding angle is the included angle between the regions on both sides of the rotation axis of the folding screen.

[0025] 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.

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

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

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

[0029] The solutions provided in the present application above can be applied to various different types of elements, and have high practicability.

[0030] In a possible design, the method further includes: before the folding or unfolding process of the folding screen, displaying a second element in a second display area on the first display screen; 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: during the folding or unfolding process of the folding screen, displaying a second animation corresponding to the second element in the second display area; wherein, the second animation includes: an animation of rotation and / or displacement of the fourth content, and an animation of 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 rotation axis of the folding screen. In this method, during the folding or unfolding process of the folding screen, the electronic device can display the hierarchical animation of elements simultaneously in the areas on both sides of the rotation axis of the folding screen.

[0031] In a possible design, the method further includes: before the folding or unfolding process of the folding screen, displaying a third element in a third display area on the second display screen; 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: during the folding or unfolding process of the folding screen, displaying a third animation corresponding to the third element in the third display area; 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.

[0032] Based on the above method, during the folding or unfolding process of the folding screen, the electronic device can display the hierarchical animation of elements simultaneously on different display screens, which has relatively high practicability.

[0033] In a second aspect, the present application provides an electronic device, which includes 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 includes computer instructions; when the computer instructions are executed by the one or more processors, the electronic device is enabled to execute the method described in the first aspect or any possible design of the first aspect.

[0034] In a possible design, the electronic device includes a folding screen.

[0035] In a third aspect, the present application provides a computer-readable storage medium, which stores a computer program. When the computer program runs on an electronic device, the electronic device is enabled to execute the method described in the first aspect or any possible design of the first aspect.

[0036] Fourthly, 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 is caused to execute the method described in the first aspect or any possible design of the first aspect.

[0037] Fifthly, the present application provides a chip system, which includes a processor and a memory, and instructions are stored in the memory; 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 chips, or may include chips and other discrete devices.

[0038] For the beneficial effects of the second aspect to the fifth aspect above, reference may be made to the beneficial effects of the first aspect above, and details will not be repeated here. Description of the Drawings

[0039] Figure 1 Schematic diagram of different physical states of an electronic device provided in an embodiment of the present application;

[0040] Figure 2 Schematic diagram of an interface displayed during the unfolding process of a folding screen of an electronic device;

[0041] Figure 3a Schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application;

[0042] Figure 3b Schematic diagram of the software structure of an electronic device provided in an embodiment of the present application;

[0043] Figure 4 Schematic diagram of a display method provided in an embodiment of the present application;

[0044] Figure 5 Schematic diagram of an interface for hierarchically displaying application icons provided in an embodiment of the present application;

[0045] Figure 6 Schematic diagram of an interface for hierarchically displaying service cards provided in an embodiment of the present application;

[0046] Figure 7 Schematic diagram of an interface for hierarchically displaying service cards provided in an embodiment of the present application;

[0047] Figure 8 Schematic diagram of the display process of a hierarchical animation of an element provided in an embodiment of the present application;

[0048] Figure 9 Schematic diagram of the display process of a hierarchical animation of an application icon provided in an embodiment of the present application;

[0049] Figure 10 Schematic diagram of a display process of a hierarchical animation of an application icon provided by an embodiment of the present application;

[0050] Figure 11 Schematic diagram of a display process of a hierarchical animation of a service card provided by an embodiment of the present application;

[0051] Figure 12a Schematic diagram of an interface displayed by a foldable screen in an unfolded state provided by an embodiment of the present application;

[0052] Figure 12b Schematic diagram of an interface displayed by a foldable screen in a semi-folded state provided by an embodiment of the present application;

[0053] Figure 12c Schematic diagram of an interface displayed by a foldable screen in a semi-folded state provided by an embodiment of the present application;

[0054] Figure 13 Schematic diagram of an animation display process during the folding process of a foldable screen provided by an embodiment of the present application;

[0055] Figure 14 Schematic diagram of the structure of an electronic device provided by an embodiment of the present application. Detailed implementation manners

[0056] In order to make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions provided in the embodiments of this application will be clearly, completely, and in detail described below in conjunction with the accompanying drawings in the embodiments of this application. The terms used in the following embodiments are only for the purpose of describing specific embodiments and are not intended to limit this application. As used in the specification and appended claims of this application, the singular forms "a", "an", "the", "above", "said", "this", and "one" are also intended to include expressions such as "one or more", unless there is a clear indication to the contrary in the context. It should also be understood that in the embodiments of this application, "at least one" means one or more, "one or more" means one, two, or more than two; "multiple" means two or more than two. "And / or" describes the relationship between associated objects and indicates that three relationships can exist; for example, A and / or B can mean: A exists alone, A and B exist simultaneously, and B exists alone, where A and B can be singular or plural. The character " / " generally indicates that the associated objects before and after are in an "or" relationship. "At least one (item) of the following" or similar expressions refer to any combination of these items, including any combination of single (item) or plural items (items). For example, at least one (item) 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 multiple.

[0057] References to "one embodiment" or "some embodiments" or the like described in this specification mean that specific features, structures, or characteristics described in conjunction with that embodiment are included in one or more embodiments of this application. Thus, statements such as "in one embodiment", "in some embodiments", "in other some embodiments", "in still other embodiments" and the like that appear in different places in this specification do not necessarily all refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in another way. The terms "include", "comprise", "have" and their variants all mean "including but not limited to", unless otherwise specifically emphasized in another way.

[0058] It should be noted that in the description of the embodiments of this application, words such as "first" and "second" are only used for the purpose of distinguishing descriptions and cannot be understood as indicating or implying relative importance, nor can they be understood as indicating or implying order, quantity, etc. Thus, features defined with "first" and "second" may explicitly or implicitly include one or more of such features.

[0059] For ease of understanding, illustrative explanations of relevant concepts in the embodiments of this application are given to facilitate understanding by those skilled in the art.

[0060] 1) An electronic device, which can be a device configured with a foldable screen and capable of performing human-computer interaction through the foldable screen.

[0061] 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 intelligence terminal device (such as a video phone, 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, a smart robot, a workshop device, 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, or a wireless terminal in a smart home, a flying device, etc.

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

[0063] 2) A foldable screen refers to a display screen that can change its form by an external force and includes at least two display areas (or referred to as display screen areas or display screen parts, etc.). Among them, the sizes of the respective display areas may vary or be the same. In some cases, the foldable screen is also referred to as a flexible screen.

[0064] Among them, one display area of the foldable screen may be an independent and complete display screen (or an independent display unit, such as being integrally controlled by a processor), or may refer to a display area that is a part of a complete display screen. The electronic device can control the display states and the displayed contents of different display areas respectively. Based on the control, the specific display states of the respective display areas can be an on-display state (also referred to as a display state or a lit screen state), or an off-display state (such as a screen-off (or power-off) state).

[0065] Two adjacent display areas can be movably connected based on a connecting component (e.g., a hinge or a flexible material). In some implementations, the outside of the connecting component is also covered with a display screen (which can also be referred to as a coupling screen or a folding edge). In this way, different display areas of the folding screen can be tiled and unfolded into a full screen for display based on an external force (such as a user unfolding it with their hand), or folded into a single screen for display based on an external force (such as a user folding it with their hand). The overlapping boundary between two adjacent display areas (i.e., the position where the connecting component is located) can serve as the central axis of the folding screen area composed of these two display areas.

[0066] A folding screen generally has two folding methods: inward folding and outward folding. Among them, inward folding means that the display areas (or parts of the display screen) on both sides of the central axis of the folding screen are relatively close to each other. Outward folding means that the display areas (or display screen areas) on both sides of the central axis of the folding screen are relatively far from each other. A folding screen using the inward folding method can be called an inward folding screen, and a folding screen using the outward folding method can be called an outward folding screen. The folding method of the folding screen can be specifically divided into left - right folding and up - down folding. After the outward folding screen is folded, different parts of the display screen of the folding screen will face away from each other.

[0067] In the embodiments of the present application, the angle between the display areas on both sides of the central axis of the folding screen can be called the folding angle (or folding degree). Among them, when the folding screen is in the fully unfolded state (i.e., the display areas on both sides of the central axis are in the same plane), the folding angle is 180 degrees, and the folding screen is in the unfolded state. When the folding screen is in the 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 the 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. Optionally, the angle between the display areas on both sides of the central axis of the folding screen can also be called the unfolding angle or other names, and the embodiments of the present application do not limit the name of this angle.

[0068] Exemplarily, taking an electronic device including an inner screen and an outer screen, where the inner screen is a folding screen, as an example, Figure 1 the schematic diagram (a) shows the state when the folding screen of the electronic device is fully folded, Figure 1 and the schematic diagram (b) shows the state when the folding screen of the electronic device is fully unfolded. Among them, Figure 1 the dotted line shown is used to mark the position of the central axis of the folding screen.

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

[0070] In the embodiments of the present application, an electronic device configured with a folding screen can be a folding screen device, also known as a folding screen electronic device, etc. The folding screen in the folding screen device can be a single-piece flexible display screen, or a spliced display screen composed of multiple flexible display screens and hinges located between every two flexible display screens, or a spliced display screen composed of multiple rigid screens and a flexible screen located between every two rigid screens, or a spliced display screen composed of multiple rigid screens and hinges located between every two rigid screens, etc. The embodiments of the present application do not limit this.

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

[0072] 3) UI elements. In the embodiments of the present application, the UI elements described can be any visible elements displayed on the display screen and visible, such as wallpapers, application icons, cards, controls, pictures, etc. Some of these elements (such as controls, application icons, etc.) can respond to user operations and invoke other richer content.

[0073] Currently, during the folding or unfolding process of the folding screen of an electronic device, the application icons displayed on a part of the display screen of the electronic device do not change, and the application icons displayed on a part of the display screen will undergo a certain left-right translation. For example, taking the electronic device Figure 1 shown as an example, during the process of the inner screen of the electronic device unfolding 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 off-screen (or screen-off) state. When the inner screen is unfolded to a certain angle, a translation animation 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 . During the continuous unfolding process of the inner screen of the electronic device, the application icons displayed on the inner screen of the electronic device continue to translate and can be translated to the state shown in the schematic diagram (b) in Figure 2 at a certain moment. During the continuous unfolding process of the inner screen of the electronic device, the application icons displayed on the inner screen of the electronic device continue to translate until it becomes Figure 2The state shown in the schematic diagram (c). During the unfolding process of the inner screen of the electronic device, only the translation animation of the application icons is displayed on the inner screen, and the overall display effect is poor. Correspondingly, during the folding process of the inner screen of the electronic device from the unfolded state (that is, the electronic device changes 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. A similar translation animation of the application icons is displayed on the outer screen of the electronic device, which will not be elaborated here. In summary, during the folding or unfolding process of the folding screen of the electronic device, the effect of displaying user interface elements on each display screen of the electronic device is poor, which will affect the overall display effect of the display screen and result in a low visual experience for the user when viewing.

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

[0075] In the solution provided by the embodiments 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 layer-display the animation effects of the UI elements on each display screen based on the change of the folding angle of the folding screen, so that the animation effects of the UI elements are coordinated with the change process of the physical state of the folding screen, thereby improving the overall display effect and the visual experience of the user.

[0076] For the convenience of description, the UI elements will be simply referred to as elements in the following embodiments.

[0077] Next, refer to Figure 3a to introduce the structure of the electronic device to which the method provided by the embodiments of the present application is applicable.

[0078] As Figure 3aAs shown in the figure, 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, a headphone jack 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a SIM card interface 195, etc.

[0079] Among them, 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, a barometric pressure sensor, a bone conduction sensor, etc.

[0080] It can be understood that Figure 3a the electronic device 100 shown is merely an example, which does not constitute a limitation on the electronic device, and the electronic device may have more or fewer components than those shown in the figure, may combine two or more components, or may have different component configurations. Figure 3a 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.

[0081] 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 may be independent devices or may be integrated in one or more processors. Among them, the controller may be the nerve center and command center of the electronic device 100. The controller may generate operation control signals according to the instruction operation code and timing signals to complete the control of fetching instructions and executing instructions.

[0082] A memory can also be provided in the processor 110 for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store the instructions or data that the processor 110 has just used or recycled. If the processor 110 needs to use the instruction or data again, it can directly call it from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

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

[0084] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can adopt 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 can 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 the information input by the user or the information provided to the user and 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.

[0085] In the embodiments of the present application, the display screen 194 can be an integrated flexible display screen, or can adopt a splicing display screen composed of two rigid screens and a flexible screen located between the two rigid screens.

[0086] The camera 193 (front camera or rear camera, or a camera that can be used as both a front camera and a rear camera) is used to capture static images or videos. Generally, the camera 193 may include a photosensitive element such as a lens group and an image sensor. Among them, the lens group includes a plurality of lenses (convex lenses or concave lenses) for collecting the optical signals reflected by the object to be photographed and transmitting the collected optical signals to the image sensor. The image sensor generates an original image of the object to be photographed according to the optical signals.

[0087] The internal memory 121 can be used to store computer-executable program code, and the executable program code 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 operating system, the code of application programs (such as the functions corresponding to the solution of this application), etc. The data storage area can store the data created during the use of the electronic device 100.

[0088] The internal memory 121 can also store one or more computer programs corresponding to the algorithms of the solution of this application. The one or more computer programs are stored in the above internal memory 121 and are configured to be executed by one or more processors 110. The one or more computer programs include instructions, and the above instructions can be used to execute the respective steps in the following embodiments.

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

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

[0091] The touch sensor, also called "touch panel". The touch sensor can be disposed on the display screen 194, and the touch sensor and the display screen 194 form a touch display screen, also called "touch screen". The touch sensor is used to detect touch operations acting on or near it. The touch sensor can transmit the detected touch operation 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 some other embodiments, the touch sensor can also be disposed on the surface of the electronic device 100, at a different position from the display screen 194.

[0092] Exemplarily, the display screen 194 of the electronic device 100 may display a main interface, and the main interface includes icons of multiple applications (such as a camera application, a sports health application, etc.). For example, the user can click on the icon of the camera application in the main interface through the touch sensor, triggering 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 a viewfinder interface.

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

[0094] Antenna 1 and antenna 2 are used for transmitting and receiving electromagnetic wave signals. Each antenna in the electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be multiplexed to improve the utilization rate of the antennas. For example: Antenna 1 can be multiplexed as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in combination with a tuning switch.

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

[0096] The wireless communication module 160 may provide solutions for wireless communication applied to the electronic device 100, including wireless local area networks (WLANs) (such as wireless fidelity (WiFi) networks), Bluetooth (BT), global navigation satellite systems (GNSSs), frequency modulation (FM), near field communication (NFC), infrared technology (IR), etc. The wireless communication module 160 may be one or more devices integrating at least one communication processing module.

[0097] In addition, the electronic device 100 may implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor, etc. For example, music playback, recording, etc. The electronic device 100 may receive inputs from the keys 190 and generate key signal inputs related to the user settings and function controls of the electronic device 100. The electronic device 100 may use the motor 191 to generate vibration prompts (such as incoming call vibration prompts). The indicator 192 in the electronic device 100 may be an indicator light, which can be used to indicate the charging state, the change in battery level, 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 in contact with and separated from the electronic device 100 by being inserted into or removed from the SIM card interface 195.

[0098] It should be understood that in actual applications, the electronic device 100 may include more or fewer components than Figure 3a shown, 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 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.

[0099] The software system of the electronic device 100 may adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservices architecture, or a cloud architecture. The layered architecture divides the software into several layers, and each layer has a clear role and division of labor. The layers communicate through software interfaces. Exemplarily, such as Figure 3bAs shown in the figure, the software architecture can be divided into four layers, from top to bottom are the application layer, the application framework layer (framework, FWK), the runtime and system libraries, and the (Linux) kernel layer.

[0100] The application layer is the top layer of the operating system, including the native applications of the operating system, such as the camera, gallery, calendar, Bluetooth, music, video, messages, etc., and can also include third-party applications. The application involved in the embodiments of this application is abbreviated as application (APP), which is a software program that can implement one or more specific functions. Usually, multiple applications can be installed in an electronic device, such as a camera application, an email application, etc. The applications mentioned below can be system applications pre-installed when the electronic device leaves the factory, or third-party applications downloaded from the network or obtained from other electronic devices by the user during the use of the electronic device.

[0101] Of course, for developers, they can write application programs and install them in this layer. In a possible implementation, the application program can be developed using the Java language and completed by calling the application programming interface (API) provided by the application framework layer. Developers can interact with the underlying layer of the operating system (such as the kernel layer, etc.) through the application framework to develop their own application programs.

[0102] The application framework layer is the API and programming framework for the application layer. The application framework layer can include some predefined functions. The application framework layer can include a window manager, a content provider, a view system, a telephone manager, a resource manager, a notification manager, etc.

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

[0104] The content provider is used to store and obtain data, and make this data accessible to application programs. The data can include files (such as documents, videos, images, audio), text and other information.

[0105] The view system includes visible controls, such as controls for displaying text, pictures, documents and other content. The view system can be used to build application programs. The interface in the display window can be composed of one or more views. For example, the display interface including the SMS notification icon can include a view for displaying text and a view for displaying pictures.

[0106] The telephone manager is used to provide the communication function of the electronic device. The notification manager enables applications to display notification information in the status bar. It can be used to convey messages of the notification type, and can automatically disappear after a short stay without user interaction.

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

[0108] The core library of the system consists of two parts: one part is the functional functions that the Java language needs to call, and the other part is the core library of the system. The application layer and the application framework layer run in the virtual machine. Taking Java as an example, the virtual machine executes the Java files in the application layer and the application framework layer as binary files. The virtual machine is used to execute functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.

[0109] The system library can include multiple functional modules. For example: the surface manager, the media library, the 3D graphics processing library (such as: OpenGL ES), the 2D graphics engine (such as: SGL), the 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 the playback and recording of various common audio and video formats, as well as static image files, etc. The media library can support multiple audio and video coding 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 the drawing engine for 2D drawing.

[0110] The kernel layer provides the core system services of the operating system. Services such as security, memory management, process management, network protocol stack, and driver model are all implemented based on the kernel layer. The kernel layer also serves as an abstraction layer between the hardware and the software stack. There are many driver programs related to the electronic device in this layer. The main drivers are: the display driver; the keyboard driver as an input device; the Flash driver based on the memory technology device; the camera driver; the audio driver; the Bluetooth driver; the WiFi driver, etc.

[0111] It should be understood that the functional services described above are only examples. In actual applications, the electronic device 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 not be divided, but work as a whole.

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

[0113] The following mainly takes the scenario where the above-mentioned multiple contents are two (that is, the UI elements displayed on the display screen of the electronic device include two contents and the two contents are respectively located on two layers) as an example to elaborate in detail on the solution provided by the embodiments of the present application. The specific implementation manners in the scenario where the above-mentioned multiple contents are more than two (that is, the UI elements displayed on the display screen of the electronic device include a larger number of contents and different contents are respectively located on different layers) can be implemented by referring to the methods described below, and will not be elaborated in detail in the embodiments of the present application.

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

[0115] Figure 4 It is a schematic diagram of a possible display method applied to an electronic device with a foldable screen provided by the embodiments of the present application. As Figure 4 shown in the figure, the method may include:

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

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

[0118] 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 foldable screen or a non-foldable screen.

[0119] Optionally, when the first display screen is a foldable screen, the first display screen may be the foldable screen described in the foregoing embodiments. 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, rotation axis, etc.) of the foldable screen. For example, taking an electronic device with an inner screen and an outer screen, and the inner screen being a foldable screen as an example, the first display screen may be the inner screen of the electronic device, such as Figure 1 the inner screen shown in the schematic diagram (a) in Figure 1 In the schematic diagram (a) in, the dotted line shown is used to mark the central axis of the inner screen. In this scenario, the first display screen, that is, the inner screen, can be used as the inner foldable screen of the electronic device, and the folding method of the first display screen can be left-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 Figure 1 the display area 1 or display area 2 shown in the schematic diagram (a) in

[0120] Optionally, when the first display screen is a non-foldable 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 with an inner screen and an outer screen, and the inner screen being a foldable screen as an example, the first display screen may be the outer screen of the electronic device, such as Figure 1 the outer screen shown in the schematic diagram (b) in Figure 1 In the schematic diagram (b) in, the dotted line shown 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 can be left-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 Figure 1 the display area 3 shown in the schematic diagram (b) in

[0121] 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 elements such as wallpapers, pictures, icons (such as application icons, folder icons, etc.), cards (such as service cards, etc.), controls, etc., and no specific limitations are made in the embodiments of the present application.

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

[0123] In some embodiments of the present application, the division method of different contents in the first element may be arbitrary. For example, different contents in the first element may be divided into different layers according to characteristics such as the type, position, size, color, etc. of the content, and no specific limitations are made in the embodiments of the present application.

[0124] As an alternative implementation, the first content may be background content (such as a background image, etc.), and the second content may be foreground content (such as text, etc.). In terms of the display effect, the foreground content can cover the background content.

[0125] Example 1: In one example, taking the first element as Figure 5 the SMS icon (i.e., the icon of the SMS application) shown in the schematic diagram (a) in Figure 5 as an example, as shown in the schematic diagram (b) in Figure 5 the first content may be the background content located on layer 1, and the second content may be the foreground content located on layer 2. Among them, Figure 5 the dashed box shown in the schematic diagram (b) in

[0126] Example 2: In one example, taking the first element as Figure 6 the service card of the calendar application shown in the schematic diagram (a) in Figure 6 as an example, as shown in the schematic diagram (b) in Figure 6 the first content may be the background content located on layer 1, and the second content may be the foreground content located on layer 2. Among them, Figure 6 the dashed box shown in the schematic diagram (b) in

[0127] Example 3: In some embodiments of the present application, in addition to the above-mentioned first content and second content, the first element may further include a third content, and the third content may be located on a third layer. In one example, taking the first element as Figure 7 the service card of the sports health application shown in the schematic diagram (a) in Figure 7 as an example, as shown in the schematic diagram (b) in Figure 7 the first content may be the 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. Among them, Figure 7 the dashed box shown in the schematic diagram (b) in

[0128] S402: During the folding or unfolding process of the folding screen of the electronic device, a first animation and a second animation are displayed in the 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.

[0129] Optionally, in the embodiments of the present application, the folding process of the folding screen may be: the process of the folding screen folding from the unfolded state to the folded state, or the process of the folding screen folding from the unfolded state to the intermediate state, or the process of the folding screen folding from one intermediate state to another intermediate state.

[0130] Optionally, in the embodiments of the present application, the unfolding process of the folding screen may be: the process of the folding screen unfolding from the folded state to the unfolded state, or the process of the folding screen unfolding from the folded state to the intermediate state, or the process of the folding screen unfolding from one intermediate state to another intermediate state.

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

[0132] Optionally, in the implementation of the present application, during the folding or unfolding process of the folding screen of the electronic device, the changes of the two parts of the display screen on both sides of the folding screen axis are symmetrical, that is, it can be considered that the rotation directions of the two parts of the display screen on both sides of the folding screen axis relative to the axis are opposite, and the rotation angles of the two parts of the display screen on both sides of the folding screen axis relative to the axis are the same. This angle may be half of the change value of the folding angle of the folding screen.

[0133] The rotation and / or displacement of the first content described in the embodiments of the present application may also be understood as the rotation and / or displacement of the first layer where the first content is located, and the rotation and / or displacement of the second content described in the embodiments of the present application may also be understood as the rotation and / or displacement of the second layer where the second content is located.

[0134] In some embodiments of the present application, the display durations of the first animation and the second animation may be different. Exemplarily, 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.

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

[0136] Among them, determining the rotation method includes determining the rotation axis, rotation direction, and rotation angle, and determining the displacement method includes determining the direction and distance of the displacement. The following will be described in detail respectively.

[0137] 1. Rotation axis

[0138] 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 can be the central axis of the content itself and this central axis is parallel to the central axis of the folding screen.

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

[0140] As an alternative implementation manner, 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 this central axis is parallel to the central axis of the folding screen.

[0141] As another alternative implementation manner, 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 this 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 this central axis is parallel to the central axis of the folding screen.

[0142] Example 4. In an example, taking the first element as the text message icon described in the foregoing Example 1, when the central axis of the folding screen is in the vertical direction, the rotation axis of the first content can be Figure 5 the rotation axis 1 shown in Figure 5 and the rotation axis of the second content can be Figure 1 the rotation axis 2 shown in Figure 1 Among them, both the rotation axis 1 and the rotation axis 2 are rotation axes in the vertical direction. Optionally, the first element can be displayed in

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

[0144] Example 6: In one example, taking the first element as the card described in the foregoing Example 3, when the central axis of the folding screen is in the vertical direction, the rotation axis of the first content may be Figure 7 the rotation axis 1 shown in Figure 7 the rotation axis 2 shown in Figure 7 the rotation axis 3 shown in. 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 may be displayed in Figure 1 the display area 1 or display area 2 on the inner screen shown in the schematic diagram (a), or the first element may be displayed in Figure 1 on the outer screen shown in the schematic diagram (b).

[0145] 2. Rotation direction

[0146] 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.

[0147] Example 7: In one example, in the foregoing Example 4, when Figure 5 the first element shown in the schematic diagram (a) is displayed in Figure 1 the display area 1 on the inner screen shown in the schematic diagram (a), during the folding process of the inner screen, the rotation direction of the first content on the first layer of the first element may be Figure 5 the rotation direction 1 shown in the schematic diagram (b). The rotation direction of the second content on the second layer of the first element may also be Figure 5 the rotation direction 1 shown in the schematic diagram (b).

[0148] Example 8: In one example, in the foregoing Example 4, when Figure 5 the first element shown in the schematic diagram (a) is displayed in Figure 1 the display area 3 on the outer screen shown in the schematic diagram (a), and the outer screen is located on the side facing away from Figure 1 the display area 1 on the inner screen shown in, during the folding process of the inner screen, the rotation direction of the first content on the first layer of the first element may be Figure 5 the rotation direction 1 shown in the schematic diagram (b). The rotation direction of the second content on the second layer of the first element may also be Figure 5The rotation direction 1 shown in the schematic diagram (b).

[0149] Example 9. In one example, in the above Example 5, when Figure 6 the first element shown in the schematic diagram (a) is displayed in Figure 1 the display area 1 on the inner screen shown in the schematic diagram (a), during the unfolding process of the inner screen, the rotation direction of the first content on the first layer in the first element can be Figure 6 the rotation direction 2 shown in the schematic diagram (b). The rotation direction of the second content on the second layer in the first element can also be Figure 6 the rotation direction 2 shown in the schematic diagram (b). Wherein, Figure 6 the rotation direction 2 shown in the schematic diagram (b) and Figure 5 the rotation direction 2 shown in the schematic diagram (b) are opposite to each other.

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

[0151] 3. Rotation angle

[0152] In some embodiments of the present application, the rotation angle of the content in the first element can 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, and specifically can include at least one of the following situations:

[0153] 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.

[0154] Among them, as an optional implementation manner, the rotation angle of the first display area can be the angle of rotation of the first display area relative to the folding screen central axis. For example, during the folding or unfolding process 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, it is considered that the rotation angle of the first display area is 10 degrees.

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

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

[0157] 2) The rotation angle of the content in the first element is positively correlated with the distance between the first element and the central axis of the folding screen. That is, the greater the distance between the first element and the central 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 central axis of the folding screen, the smaller the rotation angle of the content in the first element.

[0158] 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.

[0159] For example, Figure 8 Taking the elements in the display area on the left or right side of the central axis of the folding screen 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, so in Figure 8 In the figure, the farther the element is from the central axis, the smaller its width will be after rotation.

[0160] 3) Set the angle

[0161] 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.

[0162] 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 no specific limitation is made in the embodiments of the present application.

[0163] 4. Displacement direction

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

[0165] For example, in the scenario described in the above embodiment 6, the rotation direction of the content in the first element can be Figure 1The displacement direction 1 shown in the schematic diagram (a) therein.

[0166] For another example, in the scenario described in the foregoing Embodiment 8, the rotation direction of the content in the first element may be Figure 1 The displacement direction 2 shown in the schematic diagram (a) therein.

[0167] 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-foldable screen, the displacement direction of the content in the first element may be a set direction.

[0168] For example, in the scenario described in the foregoing Embodiment 7, the setting method may be the direction away from the central axis of the foldable screen, then the rotation direction of the content in the first element may be Figure 1 The displacement direction 3 shown in the schematic diagram (b) therein.

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

[0170] 5. Displacement distance

[0171] 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:

[0172] 1) Set distance

[0173] In this method, the displacement distance of the content in the first element may be the set distance.

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

[0175] Based on this method, when there are multiple elements in the first display area, the displacement distance of the content in the element closer to the central axis is less than the displacement distance of the content in the element farther from the central axis.

[0176] 3) The displacement distance of the content in the first element is positively correlated with the rotation angle of the content. That is, the greater the rotation angle of the content in the first element, the greater 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.

[0177] In some embodiments of the present application, the displacement distances of different contents belonging to the same element may be the same or different. There is no specific limitation in the embodiments of the present application.

[0178] Embodiment 10. In an example, the SMS icon described in the foregoing Embodiment 1 is displayed onFigure 1 Taking the display area 1 in the inner screen shown in the schematic diagram (a) in [reference] as an example, and combining with the method described above, in a possible way, during the folding process of the inner screen, the animations corresponding to the first element displayed in the display area 1 (including the first animation and the second animation executed synchronously) can refer to Figure 9 . Among them, Figure 9 The schematic diagram (a) in [reference] shows the SMS icon displayed when the inner screen is in the unfolded state, and this SMS icon is the original SMS icon. After the inner screen starts to fold, the contents in different layers of the SMS icon rotate and / or displace respectively, and can change to the state shown in the schematic diagram (b) in Figure 9 at a certain moment. During the continuous display of the animation, the contents in different layers of the SMS icon rotate and / or displace respectively, and can change to the state shown in the schematic diagram (c) in Figure 9 at a certain moment. Among them, Figure 9 The dotted lines in the schematic diagram (b) in [reference] and Figure 9 The dotted lines in the schematic diagram (c) in [reference] are used to mark the position of the second content, that is, the foreground content, after the layer where it is located rotates, and do not serve as the actually displayed content. During 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 the animation of the first content and the background content rotating, and the second animation includes the animation of the second content and the foreground content rotating and displacing.

[0179] Among them, in the original state of the SMS icon, the positions of the layer where the first content is located and the layer where the second content is located are parallel (both are shown as the position of the SMS icon shown in the schematic diagram (a) in Figure 9 ). However, during the subsequent display of the animation, the first content does not displace, and the second content displaces. Therefore, there is a relative displacement between the layer where the second content is located and the layer where the first content is located, and there is a relative displacement between the second content and the first content. Therefore, visually speaking, the animation effects of the first content and the second content are not completely synchronized.

[0180] For the convenience of understanding, Figure 10 shows more vividly the process of the SMS icon shown in the schematic diagram (b) in Figure 9 changing to the SMS icon shown in the schematic diagram (c) in Figure 9 . Among them, Figure 10 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) in [reference] 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) in Figure 9 .Figure 10 In the schematic diagram (b), the first layer and the second layer are parallel, and the content seen from the outside of the second layer in the direction perpendicular to the second layer is Figure 9 the SMS icon shown in the schematic diagram (c). Comparing Figure 10 with the schematic diagram (a) and Figure 10 the schematic diagram (b), 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.

[0181] It should be noted that Figure 9 the schematic diagram (b) and Figure 9 the schematic diagram (c) only exemplarily show the animation interfaces displayed at two certain moments during the folding process of the folding screen, rather than all the animation interfaces, so it does not limit the animation interfaces displayed by the electronic device.

[0182] Embodiment 11: In an example, taking the SMS icon described in the foregoing Embodiment 1 and displayed in Figure 1 the display area 1 on the inner screen shown in the schematic diagram (a) as an example, and combining the method described above, in a possible way, during the process of unfolding the inner screen, the animation corresponding to the first element (including the first animation and the second animation executed synchronously) displayed in the display area 1 can refer to Figure 9 the content shown in the schematic diagram (c) and gradually change to Figure 9 the content shown in the schematic diagram (a). The process will not be elaborated here.

[0183] Embodiment 12: In an example, taking the service card described in the foregoing Embodiment 2 and displayed in Figure 1 the display area 1 on the inner screen shown in the schematic diagram (a) as an example, and combining the method described above, in a possible way, during the process of folding the inner screen, the process of the animation (including the first animation and the second animation executed synchronously) corresponding to the first element displayed in the display area 1 can refer to Figure 11 the content shown in the schematic diagram (a) and gradually change to Figure 11 the content shown in the schematic diagram (b), and then gradually change to Figure 11 the content shown in the schematic diagram (c). The process will not be elaborated here.

[0184] Embodiment 13: In an example, the main interface displayed by the folding screen of the electronic device in the unfolded state can be Figure 12aThe interface shown in [figure]. During the process of the folding screen folding inwards, the electronic device can display a hierarchical animation for each element in each display area on the folding screen according to the method provided in the foregoing embodiments. For example, the electronic device can separately display animations of rotation and / or displacement for the content of each layer of each element. During the animation display process, when the folding angle of the folding screen changes to Figure 12b the folding angle shown in [figure], the main interface displayed by the electronic device can be Figure 12b the interface shown in [figure]. When the folding angle of the folding screen changes to Figure 12c the folding angle shown in [figure], the main interface displayed by the electronic device can be Figure 12c the interface shown in [figure]. Among them, during the above 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 effects of the elements are 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.

[0185] It should be noted that Figures 12a to 12c only exemplarily shows the interfaces displayed at certain moments during the folding process of the folding screen, rather than all the interfaces, so it does not limit the interfaces displayed by the electronic device.

[0186] Embodiment 14. In an example, the lock screen interface displayed by the folding screen of the electronic device in the unfolded state can be Figure 13 the interface shown in the schematic diagram (a) in [figure]. During the process of the folding screen folding inwards, the electronic device can display a hierarchical animation for each element in each display area on the folding screen according to the method provided in the foregoing embodiments. During the animation display process, when the folding angle of the folding screen changes to Figure 13 the folding angle shown in the schematic diagram (b) in [figure], the lock screen interface displayed by the electronic device can be Figure 13 the interface shown in the schematic diagram (b) in [figure]. When the folding angle of the folding screen changes to Figure 13 the folding angle shown in the schematic diagram (c) in [figure], the lock screen interface displayed by the electronic device can be Figure 13 the interface shown in the schematic diagram (c) in [figure]. Among them, during the above animation display process, the elements on the folding screen (such as the system icons at the bottom of the display screen, etc.) present corresponding rotation and / or displacement animations as the folding angle changes, so that the animation effects of the elements are 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 Figure 13 the schematic diagram (a) in [figure] to Figure 13The schematic diagram in (c) only exemplarily shows the interfaces displayed at certain moments during the folding process of the folding screen, rather than all the interfaces, so it does not limit the interfaces displayed by the electronic device.

[0188] Optionally, in the embodiments of the present application, the first animation and the second animation described in the above method may also be combined and referred to as the first animation, that is, in the embodiments of the present application, an animation including the process of the first content rotating and / or displacing and the process of the second content rotating and / or displacing may be referred to as the first animation.

[0189] Based on the above embodiments and the same technical concept, the embodiments of the present application also provide an electronic device, which is used to implement the display method provided by the embodiments of the present application. As Figure 14 shown in, 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 components may be coupled through one or more communication buses 1403. The electronic device 1400 further includes a display screen 1404. The electronic device 1400 may be a folding screen device.

[0190] Among them, one or more computer programs (codes) are stored in the memory 1401, and the one or more computer programs include computer instructions; the 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 embodiments of the present application.

[0191] In 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 may store an operating system (hereinafter referred to as the system), such as ANDROID, IOS, WINDOWS, or an embedded operating system such as LINUX. The memory 1401 may be used to store the implementation program of the embodiments of the present application. The memory 1401 may also store a network communication program, which may be used to communicate with one or more additional devices, one or more user devices, and one or more network devices.

[0192] 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 solution of the present application.

[0193] The display screen 1404 is used to display relevant user interfaces such as application interfaces.

[0194] It should be noted that Figure 14 this is only one implementation of the electronic device 1400 provided in the embodiments of the present application. In practical applications, the electronic device 1400 may further include more or fewer components. Specifically, reference may be made to Figure 3a the specific structure and description shown, which will not be elaborated here.

[0195] Based on the above embodiments and the same technical concept, the embodiments of the present application further provide a computer-readable storage medium. The computer-readable storage medium stores a computer program. When the computer program runs on a computer, the computer is caused to execute the method provided in the above embodiments.

[0196] Based on the above embodiments and the same technical concept, the embodiments of the present application further provide a computer program product. The computer program product includes a computer program or instructions. When the computer program or instructions run on a computer, the computer is caused to execute the method provided in the above embodiments.

[0197] In the method provided by the embodiments of the present application, it can be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions according to the embodiments of the present invention are generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, a network device, a user device, or other programmable devices. The 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, the computer instructions can be transmitted from a website, a computer, a server, or a data center to another website, a computer, a server, or a data center by wire (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (such as infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that the computer can access, or a data storage device such as a server or a data center that includes one or more integrated available media. The available medium can be a magnetic medium (such as a floppy disk, a hard disk, a magnetic tape), an optical medium (such as a digital video disc (DVD)), or a semiconductor medium (such as an SSD), etc.

[0198] Obviously, those skilled in the art can 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 equivalent technologies, the present application is also intended to include these changes and modifications.

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 a first content located on a first layer and a 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 rotation and / or displacement of the first content, and an animation of rotation and / or displacement of the second content.

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, wherein 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: the direction towards the rotation axis of the foldable screen, or the direction 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 folding or unfolding the foldable screen 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: an unfolded state, a folded state, a first intermediate state, and a second intermediate state.

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

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

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 to store 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 an electronic device, the electronic device is caused to execute the method according to any one of claims 1 to 11.

Images