Interaction method, electronic device, storage medium, and program product

Abstract

An interaction method, an electronic device, a storage medium, and a program product, used for providing a combined display mode triggering method, which is engaging and helps enhance user experience. For example, an electronic device displays a first display element, wherein the first display element is located in a first window of a first application; and a first dynamic effect is displayed, wherein the first dynamic effect is used for providing a visual effect of transformation from the first display element to a second display element, the second display element is configured to allow entry into a combined display mode, and the combined display mode is a mode in which the first window and another window are displayed in combination.

Description

An interaction method, electronic device, storage medium, and program product

[0001] Cross-reference to related applications

[0002] This application claims priority to Chinese Patent Application No. 202510497064.5, filed on April 18, 2025, entitled "An Interaction Method, Electronic Device, Storage Medium and Program Product", the entire contents of which are incorporated herein by reference. Technical Field

[0003] This application relates to the field of terminal technology, and in particular to an interaction method, electronic device, storage medium, and program product. Background Technology

[0004] Mobile phones, tablets, and other terminal devices have become indispensable in people's daily lives and work. In some scenarios, users expect these devices to display multiple windows simultaneously. To meet this need, most terminal devices offer a combined display mode (e.g., split-screen mode) to allow multiple windows to be displayed on the device's screen at the same time. Therefore, users can trigger the terminal device to enter combined display mode if needed.

[0005] However, the way the combined display mode is triggered affects the user experience. Therefore, how to trigger the terminal device to enter the combined display mode is a problem that needs to be considered. Summary of the Invention

[0006] This application provides an interactive method, electronic device, storage medium, and program product for triggering a more engaging combination display mode, which helps improve the user experience.

[0007] Firstly, an interaction method is provided, applied to an electronic device. For example, the electronic device may be a tablet computer, a mobile phone, etc. The interaction method may include: the electronic device displaying a first display element, the display position of the first display element being located within a first window of a first application; displaying a first animation effect, the first animation effect being used to obtain a visual effect of the first display element transforming into a second display element, the second display element being used to enter a combined display mode, the combined display mode being a mode in which the first window is combined with other windows for display.

[0008] Therefore, in this embodiment of the application, the visual effect of the first display element transforming into the second display element is demonstrated through dynamic display, which is quite interesting; moreover, the transformed second display element is used to enter the combined display mode (e.g., split-screen mode), which can attract users to use the combined display mode to a certain extent; in addition, after the second display element is transformed, the user can trigger the electronic device to enter the combined display mode through the second display element, which improves convenience.

[0009] In one possible design, the first display element is positioned within the title bar of the first window. This prevents the first display element from obscuring the content displayed in the first window.

[0010] In one possible design, the first animation effect, used to achieve the visual effect of the first display element transforming into a second display element, includes: displaying a first sub-display element of the second display element superimposed on the first display element; and displaying a first separation animation effect, used to achieve the visual effect of separating the second sub-display element from the first sub-display element.

[0011] This method gives users the feeling of separating one child display element from another, which is quite interesting.

[0012] In one possible design, the first separation animation effect is used to achieve the visual effect of separating a second sub-display element from the first sub-display element, including: setting a second sub-display element below the first sub-display element, and the second sub-display element being completely covered by the first sub-display element; the second sub-display element gradually moving away from the first sub-display element, so that the second sub-display element is completely separated from the first sub-display element.

[0013] This method gives users the feeling of separating one child display element from another, which is quite interesting.

[0014] In one possible design, the first separation motion effect is also used to achieve the visual effect of the second sub-display element and the first sub-display element moving from being stuck together to being completely separated.

[0015] This method provides users with a visual experience similar to "water droplet separation," which is quite interesting.

[0016] In one possible design, both the second and first child elements have blurred edges, so that the second and first child elements appear to be stuck together before they are completely separated and only overlap at the edges.

[0017] Therefore, in this embodiment of the application, by blurring the edges, the two sub-display elements exhibit a visual effect of going from sticking together to being completely separated during the separation process, giving users a visual experience similar to "water droplet separation", which is quite interesting.

[0018] In one possible design, the method further includes: during the display of the first separation animation, the size of the second sub-display element gradually increases until it is the same as the height of the first sub-display element.

[0019] Therefore, this method gives users the experience of separating one child display element from another, and the other child display element gradually "growing up," which is quite interesting.

[0020] In one possible design, displaying a first sub-display element of a second display element on top of a first display element includes: displaying a first sub-display element on top of a fourth sub-display element contained in the first display element, wherein the first sub-display element and the fourth sub-display element present the same visual effect.

[0021] It should be noted that since the first and fourth child display elements are visually identical, users cannot perceive that the first child display element is superimposed on the fourth child display element. Therefore, the "first child display element separates from the second child display element" gives users the feeling that the "fourth child display element separates from the second child display element", thus creating the visual effect that the first display element is transformed into the second display element.

[0022] In one possible design, the method further includes: before or during the first separation animation display, the first sub-display element gradually increases in size and completely covers all sub-display elements of the first display element.

[0023] In this way, the first display element located at the bottom layer is gradually completely covered, thus creating the visual effect of the first display element gradually transforming into the second display element.

[0024] In one possible design, the fourth sub-display element is a capsule-shaped sub-display element within the first display element.

[0025] Optionally, the fourth child display element can also be any other child display element within the first display element, without limitation.

[0026] In one possible design, the method further includes: displaying a second separation animation, the second separation animation being used to achieve the visual effect of separating a third sub-display element from the second sub-display element.

[0027] This method provides users with the experience of the first child element separating into the second child element, and the second child element separating into the third child element, which is quite interesting.

[0028] In one possible design, the second separation motion effect is also used to achieve the visual effect of the third sub-display element and the second sub-display element moving from being stuck together to being completely separated.

[0029] This method provides users with a visual experience similar to "water droplet separation," which is quite interesting.

[0030] In one possible design, the method further includes: before or during the display of the second separation animation, the size of the third sub-display element gradually increases until it is the same as the size of the second sub-display element.

[0031] This method provides users with the experience of a second child element separating into a third child element, and the third child element gradually "growing up," which is quite interesting.

[0032] In one possible design, the second display element contains the same number of sub-display elements as the first display element.

[0033] In this way, users can have a one-to-one correspondence between the second display element and the child display elements of the first display element, which is quite neat.

[0034] In one possible design, a first animation effect is displayed, which is used to achieve the visual effect of the first display element transforming into a second display element, including: setting a second display element below the first display element, the first display element gradually disappearing, and the second display element gradually appearing.

[0035] In this way, the visual effect of the first display element "gradually" becoming the second display element is presented without being abrupt and provides a better user experience.

[0036] In one possible design, the first display element gradually disappears and the second display element gradually appears, including: gradually increasing the transparency of the first display element so that the first display element gradually disappears and the second display element gradually appears.

[0037] In this way, the visual effect of the first display element "gradually" becoming the second display element is presented without being abrupt and provides a better user experience.

[0038] In one possible design, the first display element includes N sub-display elements, each of which has another sub-display element below it. The upper sub-display elements gradually disappear, while the lower sub-display elements gradually appear.

[0039] In this way, users are given the visual effect of each sub-display element "gradually" transforming into another sub-display element, which is quite interesting and provides a good user experience.

[0040] In one possible design, the method further includes: the first display element and the second display element synchronously moving from a first position to a second position, the first position being the initial position of the first display element and the second position being the target position of the second display element; and / or, the first display element and the second display element synchronously adjusting from a first size to a second size, the first size being the initial size of the first display element and the second size being the target size of the second display element.

[0041] In this way, it can be ensured that the first and second display elements are not misaligned, thus preventing the deformation effect from being affected.

[0042] In one possible design, the duration from the initial appearance of the second display element to its full appearance is a first time period; the duration from the second display element moving from a first position to a second position is a second time period; and the duration from the second display element adjusting from a first size to a second size is a third time period, wherein the first time period, the second time period, and the third time period overlap.

[0043] For example, the second time period completely overlaps with the third time period, and the first time period is a part of the second or third time period.

[0044] In this way, the second display element gradually appears during the repositioning / sizing process, without being abrupt, resulting in a better user experience.

[0045] In one possible design, the method further includes: during the movement of the first display element and the second display element, the first window switches from a full-screen window to a floating window.

[0046] This method allows users to easily drag the first window to the second display element, triggering the second display element to be displayed according to the second animation effect, resulting in strong interactivity and a good user experience.

[0047] In one possible design, the method further includes: the size of the floating window is gradually reduced to a first size, and the second position is located outside the floating window of the first size.

[0048] It should be noted that since the second display element is located outside the first window, users can easily drag the first window toward the second display element, thereby triggering the second display element to be displayed in the form of the second animation, which has strong interactivity and a good user experience.

[0049] In one possible design, the second display element includes a fifth sub-display element for indicating an application combination, which includes the first application and the second application, and the fifth sub-display element is used to enter a mode in which the first window and the second window of the second application are displayed together.

[0050] Therefore, in this embodiment, the first display element located above the first window of the first application can be transformed into a second display element, which includes a fifth sub-display element for indicating application combination. This serves two purposes: firstly, it reminds the user that multiple applications can be displayed in combination; secondly, the user can trigger the electronic device to enter a multi-application combination display mode through the fifth sub-display element, thus improving convenience.

[0051] In one possible design, the fifth sub-display element is used to enter a mode in which the first window and the second window are displayed in a split-screen mode; or, the fifth sub-display element is used to enter a mode in which the first window is displayed in a tiled mode and the second window is displayed in a side-view mode.

[0052] Therefore, in this embodiment of the application, the combined display mode can be two windows displayed in a split screen, or one window can be tiled and the other window can be displayed sideways, which is more flexible and more interesting.

[0053] In one possible design, the application combination further includes a third application, and the fifth sub-display element is used to enter a mode in which the first window, the second window, and the third window are tiled; or, the fifth sub-display element is used to enter a mode in which the first window and the second window are tiled and the third window is side-viewed, wherein the third window is the window of the third application.

[0054] Therefore, in this embodiment, the first display element located above the first window of the first application can be transformed into a second display element. The second display element includes a fifth sub-display element for indicating an application combination, which can be a combination of two applications, a combination of three applications, etc. If it is a combination of three applications, it can enter a tiled display mode of the three windows corresponding to the three applications, or a mode in which two windows are tiled and the other window is displayed sideways.

[0055] In one possible design, the second application is an application recommended by the electronic device based on recommendation rules, suitable for display in combination with the first application.

[0056] In this way, electronic devices can intelligently recommend which application to display in combination with the first application, making it easy for users to quickly enter the corresponding display combination mode and improving convenience.

[0057] In one possible design, the second display element further includes a sixth sub-display element, which is used to indicate the recommendation rule.

[0058] Therefore, in this embodiment, the first display element located above the first window of the first application can be transformed into a second display element. The second display element includes a fifth sub-display element for indicating the application combination (determined according to the recommendation rules), and may also include a sixth sub-display element for indicating the recommendation rules, so as to facilitate users to understand the recommendation rules of the application combination and help improve the user experience.

[0059] In one possible design, the second display element further includes at least one of the following:

[0060] The seventh child display element is used to indicate the split-screen mode;

[0061] The eighth child display element is used to suspend the first window in a floating display.

[0062] The ninth child display element is used to display the first window in full screen.

[0063] The tenth child display element is used to replace the first window with a window of another application;

[0064] The eleventh child display element is used to add a window for another application to the display screen;

[0065] The twelfth child display element is used to close the first window;

[0066] The thirteenth child display element is used to temporarily store the contents of the first window;

[0067] The fourteenth child display element is used to rearrange the first window with other windows.

[0068] It should be noted that the above examples of multiple child display elements are merely examples and not limitations.

[0069] In one possible design, displaying the first animation effect includes: receiving an operation on the first display element, or determining that no operation on the first window has been detected within a preset time period, then displaying the first animation effect.

[0070] Therefore, in this embodiment, the first display element can be transformed into the second display element either manually or automatically, which is quite flexible.

[0071] In one possible design, the method further includes: in response to an operation of moving the first window toward the second display element, the first window is displayed according to a second animation form, the second animation form being used to obtain a visual effect of the first window entering the second display element; after the first window has finished being displayed according to the second animation form or during the display process, the desktop is displayed below the first window; receiving an operation of opening a fourth application from the desktop, and entering a combined display mode, the combined display mode being a combined display mode of the first window and the fourth window of the fourth application.

[0072] Therefore, in this embodiment of the application, the user experiences the visual effect of the first window entering the second display element through the use of dynamic effects, which is quite interesting.

[0073] In one possible design, prior to receiving the operation to open a fourth application from the desktop, the method further includes: moving the first window portion off the display screen.

[0074] This method exposes the desktop, allowing users to open other applications on the desktop and enter the combined display mode, resulting in a better user experience.

[0075] In one possible design, the first window is displayed in accordance with a second animation effect, including: replacing the first window with a first image, the shape of which is used to display the visual effect of the first image facing the second display element; moving the first image to a target position, the target position being located within the second display element; and after the first image moves to the target position, replacing the first image with the first window.

[0076] This method allows users to experience the visual effect of entering a second display element from the first window, which is quite interesting.

[0077] In one possible design, the first image is a preset image or a screenshot of the first window. The preset image may be a pre-configured image.

[0078] In one possible design, as the first image moves toward the target position, its size gradually decreases. This creates a visual effect where the user experiences the first window gradually shrinking and transitioning into a second display element, adding a sense of visual interest.

[0079] In one possible design, the shape of the first image is used to display the visual effect of the first image facing the second display element, including: the line connecting the edge feature points of the first image matches the first curve, so that the shape of the first image is used to display the visual effect of the first image facing the second display element.

[0080] This method creates a visual effect where the user moves from the first window to the second displayed element, which is quite engaging.

[0081] In one possible design, the shape of the first image is used to display the visual effect of the first image facing the second display element, including: the shape of the first image is related to a first direction from the first window to the second display element, so that the shape of the first image is used to display the visual effect of the first image facing the first direction.

[0082] This method gives users the visual effect of the first window "flying in" towards the second display element or the first window being "sucked in" by the second display element, which is quite interesting.

[0083] In one possible design, the first image comprises a single frame image whose shape dynamically changes; or, the first image comprises multiple frames image whose shapes differ, but the shape of each frame image is used to achieve a visual effect oriented toward the second display element.

[0084] This method gives users a visual effect of dynamically changing the first window as they enter the second display element, which is quite interesting.

[0085] In one possible design, the method further includes: as the first window is displayed in accordance with the second animation, the display area of ​​the second display element gradually increases.

[0086] This method gives users the visual effect of a second display element enlarging to "welcome" the first window, which is quite interesting.

[0087] In one possible design, the method further includes: after the first window is displayed in the form of the second animation, it occupies the entire display area of ​​the second display element.

[0088] This method gives users the visual effect of the first window entering and filling the second display element, which is quite interesting.

[0089] In one possible design, the method further includes hiding the display content inside the second display element before the first window occupies the entire display area of ​​the second display element.

[0090] In this way, the content displayed in the second display element is "cleared" to "carry" the visual effect of the first window, which is quite interesting.

[0091] Secondly, an interaction method is also provided, applied to an electronic device. For example, the electronic device may be a tablet computer, a mobile phone, etc. The interaction method includes: displaying a first window and a second display element of a first application; responding to a first operation, the first window is displayed according to a second animation effect, the second animation effect being used to obtain a visual effect of the first window entering the second display element; after the first window is displayed according to the second animation effect or during the display process, the first window is overlaid on the desktop; receiving an operation to open a fourth application from the desktop, entering a combined display mode, wherein the combined display mode is a combined display mode of the first window and the second window of the second application.

[0092] Therefore, in this embodiment, the use of animated effects allows users to experience the visual effect of the first window entering the second display element, which is quite engaging. Furthermore, after the first window enters the second display element, users can open other applications on the desktop to trigger the combined display mode. This triggering method helps enhance the fun and interactivity.

[0093] In one possible design, the second display element is located outside the first window.

[0094] In one possible design, before displaying the second display element, the method further includes: displaying a first display element, the first display element being displayed within the first window, and displaying a first animation effect, the first animation effect being used to obtain a visual effect of the first display element transforming into the second display element.

[0095] In one possible design, the first operation is to move the first window toward the second display element.

[0096] In one possible design, prior to receiving the operation to open a fourth application from the desktop, the method further includes: moving the first window portion off the display screen.

[0097] In one possible design, the first window is displayed in accordance with a second animation effect, including: replacing the first window with a first image, the shape of which is used to obtain a visual effect of the first image facing the second display element; moving the first image to a target position, the target position being located within the second display element; and after the first image moves to the target position, replacing the first image with the first window.

[0098] In one possible design, the first image is a preset image or a screenshot of the first window.

[0099] In one possible design, the shape of the first image is used to display the visual effect of the first image facing the second display element, including: the line connecting the edge feature points of the first image matches the first curve, so that the shape of the first image is used to display the visual effect of the first image facing the second display element.

[0100] In one possible design, the shape of the first image is used to display the visual effect of the first image facing the second display element, including: the shape of the first image is related to a first direction from the first window to the second display element, so that the shape of the first image is used to display the visual effect of the first image facing the first direction.

[0101] In one possible design, the first image comprises a single frame image whose shape dynamically changes; or, the first image comprises multiple frames image whose shapes differ, but the shape of each frame image is used to achieve a visual effect oriented toward the second display element.

[0102] In one possible design, the method further includes: as the first window is displayed in accordance with the second animation, the display area of ​​the second display element gradually increases.

[0103] In one possible design, the method further includes: after the first window is displayed in the form of the second animation, it occupies the entire display area of ​​the second display element.

[0104] In one possible design, the method further includes hiding the display content inside the second display element before the first window occupies the entire display area of ​​the second display element.

[0105] Thirdly, an electronic device is also provided for performing the methods provided in the first or second aspect above.

[0106] Fourthly, a computer-readable storage medium is also provided for storing a computer program that, when run on a computer, causes the computer to perform the methods provided in the first or second aspect above.

[0107] Fifthly, a computer program product is also provided, comprising a computer program that, when run on a computer, causes the computer to perform the methods provided in the first or second aspect above.

[0108] Sixthly, a chip is also provided for performing the methods provided in the first or second aspect above.

[0109] In a seventh aspect, a chip system is also provided for performing the methods provided in the first or second aspect above.

[0110] For the technical effects that can be achieved in the second to seventh aspects mentioned above, please refer to the description of the technical effects that can be achieved by the corresponding design scheme in the first aspect mentioned above. This application will not repeat them here. Attached Figure Description

[0111] Figure 1 is a schematic diagram of an electronic device provided in an embodiment of this application;

[0112] Figure 2 is a schematic diagram of another structure of an electronic device provided in an embodiment of this application;

[0113] Figure 3 is a schematic diagram of a first display element being transformed into a second display element according to an embodiment of this application;

[0114] Figure 4 is an example diagram of a first display element provided in an embodiment of this application;

[0115] Figure 5 is an example diagram of a second display element provided in an embodiment of this application;

[0116] Figure 6 is another example diagram of a second display element provided in an embodiment of this application;

[0117] Figure 7 is another example diagram of a second display element provided in an embodiment of this application;

[0118] Figure 8 is another example diagram of a second display element provided in an embodiment of this application;

[0119] Figure 9 is another example diagram of a second display element provided in an embodiment of this application;

[0120] Figure 10 is an example diagram of a second display element provided in an embodiment of this application;

[0121] Figure 11 is an example diagram of a second display element provided in an embodiment of this application;

[0122] Figure 12A is an example diagram of a first display element being transformed into a second display element according to an embodiment of this application;

[0123] Figure 12B is another example diagram of a first display element being transformed into a second display element according to an embodiment of this application;

[0124] Figure 12C is another example diagram of a first display element being transformed into a second display element according to an embodiment of this application;

[0125] Figure 13A is an example diagram of an application scenario provided by an embodiment of this application;

[0126] Figure 13B is another example diagram of an application scenario provided by an embodiment of this application;

[0127] Figure 14 is a schematic diagram illustrating the principle of transforming a first display element into a second display element according to an embodiment of this application;

[0128] Figure 15A is a schematic diagram of the shape of a first image provided in an embodiment of this application;

[0129] Figure 15B is another schematic diagram of the shape of the first image provided in an embodiment of this application;

[0130] Figure 16 is an example diagram of another application scenario provided by an embodiment of this application;

[0131] Figure 17 is an example diagram of another application scenario provided by an embodiment of this application;

[0132] Figure 18A is a schematic diagram of edge blurring provided in an embodiment of this application;

[0133] Figure 18B is a schematic diagram of an embodiment of this application with only edge overlap;

[0134] Figure 18C is a schematic diagram of a separation dynamic effect provided in an embodiment of this application;

[0135] Figure 19 is a schematic diagram of a specific example of a first display element being transformed into a second display element according to an embodiment of this application;

[0136] Figure 20 is a schematic diagram of another specific example of a first display element being transformed into a second display element according to an embodiment of this application;

[0137] Figure 21 is a schematic diagram of another specific example of a first display element being transformed into a second display element according to an embodiment of this application;

[0138] Figure 22A is a schematic diagram of a first display element automatically transforming into a second display element according to an embodiment of this application;

[0139] Figure 22B is a schematic diagram of a first display element being manually transformed into a second display element according to an embodiment of this application;

[0140] Figure 22C is a schematic diagram of entering a combined display mode according to an embodiment of this application;

[0141] Figure 23 is a schematic diagram of another structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0142] The following explanations of some terms used in the embodiments of this application are provided to facilitate understanding by those skilled in the art.

[0143] The embodiments of this application involve at least one, including one or more; where "multiple" means two or more. Furthermore, it should be understood that in the description of this specification, terms such as "first" and "second" are used only for descriptive purposes and should not be construed as indicating or implying relative importance or order. For example, the first display element and the second display element do not represent their relative importance or order, but are merely for descriptive distinction. In the embodiments of this application, "and / or" merely describes an association relationship, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, and B alone. Additionally, the character " / " in this document generally indicates that the preceding and following related objects have an "or" relationship.

[0144] The directional terms mentioned in the embodiments of this application, such as "up", "down", "left", "right", "inner", and "outer", are only for reference to the directions in the accompanying drawings. Therefore, the directional terms used are for better and clearer explanation and understanding of the embodiments of this application, and are not intended to indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on the embodiments of this application.

[0145] References to "one embodiment," "in some examples," or "some embodiments" as described in this specification mean that one or more embodiments of this specification include a particular feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in some examples," "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0146] The interaction method provided in this application can be applied to terminal devices. A terminal device can be any device with a display screen. For example, a terminal device can be a mobile phone, tablet computer, laptop computer, personal computer (PC), ultra-mobile personal computer (UMPC), netbook, personal digital assistant (PDA), or other portable devices; or it can be a wearable device such as a watch or bracelet; or it can be a large-screen device such as a smart screen or television; or it can be an in-vehicle display device; or it can be a virtual reality (VR) device, augmented reality (AR) device, mixed reality (MR) device, etc. In short, this application does not limit the specific type of terminal device. The terminal device can use the interaction method provided in this application to enter a combined display mode, which will be described in detail later.

[0147] Figure 1 shows a schematic diagram of the electronic device. The electronic device may be, for example, the terminal device mentioned earlier. As shown in Figure 1, the electronic device may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, antenna 1, 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, buttons 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0148] Processor 110 may include one or more processing units, such as an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural network processing unit (NPU). Different processing units may be independent devices or integrated into one or more processors. The controller may serve as the nerve center and command center of the electronic device. The controller can generate operation control signals based on instruction opcodes and timing signals to control instruction fetching and execution. Processor 110 may also include memory for storing instructions and data. In some embodiments, the memory in processor 110 is a cache memory. This memory can store instructions or data that processor 110 has just used or is repeatedly used. If processor 110 needs to reuse the instruction or data, it can directly retrieve it from the memory. This avoids repeated access, reduces the waiting time of processor 110, and thus improves system efficiency.

[0149] Optionally, the processor 110 can be used to execute the interaction method provided in the embodiments of this application. For example, the processor 110 displays a first window of a first application on the display screen 194, with a first display element superimposed on top of the first window. The processor 110 displays a first animation effect on the display screen 194, which is used to obtain the visual effect of the first display element transforming into a second display element. The second display element is used to enter a combined display mode, which is a combined display mode of the first window and other windows. Therefore, in the embodiments of this application, the electronic device displays the visual effect of the first display element transforming into a second display element through the first animation effect, which is more interesting and helps to attract users to trigger the electronic device to enter the combined display mode through the second display element, resulting in a better user experience.

[0150] In some embodiments, the processor 110 may include one or more interfaces. Interfaces may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc.

[0151] The I2C interface is a bidirectional synchronous serial bus, including a serial data line (SDA) and a serial clock line (SCL). In some embodiments, the processor 110 may include multiple I2C buses. The processor 110 can couple to the touch sensor 180K, charger, flash, camera 193, etc., through different I2C bus interfaces. For example, the processor 110 can couple to the touch sensor 180K through the I2C interface, enabling the processor 110 and the touch sensor 180K to communicate through the I2C bus interface, thereby realizing the touch function of the electronic device 100.

[0152] The I2S interface can be used for audio communication. In some embodiments, the processor 110 may include multiple I2S buses. The processor 110 can be coupled to the audio module 170 via the I2S bus to enable communication between the processor 110 and the audio module 170. In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 via the I2S interface to enable the function of answering phone calls through a Bluetooth headset.

[0153] The PCM interface can also be used for audio communication, sampling, quantizing, and encoding analog signals. In some embodiments, the audio module 170 and the wireless communication module 160 can be coupled via the PCM bus interface. In some embodiments, the audio module 170 can also transmit audio signals to the wireless communication module 160 via the PCM interface, enabling the function of answering phone calls through a Bluetooth headset. Both the I2S interface and the PCM interface can be used for audio communication.

[0154] The UART interface is a universal serial data bus used for asynchronous communication. This bus can be a bidirectional communication bus. It converts the data to be transmitted between serial and parallel communication. In some embodiments, the UART interface is typically used to connect the processor 110 and the wireless communication module 160. For example, the processor 110 communicates with the Bluetooth module in the wireless communication module 160 via the UART interface to implement Bluetooth functionality. In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 via the UART interface to enable music playback through Bluetooth headphones.

[0155] The MIPI interface can be used to connect the processor 110 to peripheral devices such as the display screen 194 and the camera 193. The MIPI interface includes a camera serial interface (CSI) and a display serial interface (DSI). In some embodiments, the processor 110 and the camera 193 communicate via the CSI interface to enable the electronic device 100 to capture images. The processor 110 and the display screen 194 communicate via the DSI interface to enable the electronic device 100 to display images.

[0156] The GPIO interface can be configured via software. It can be configured as a control signal or a data signal. In some embodiments, the GPIO interface can be used to connect the processor 110 to a camera 193, a display screen 194, a wireless communication module 160, an audio module 170, a sensor module 180, etc. The GPIO interface can also be configured as an I2C interface, an I2S interface, a UART interface, a MIPI interface, etc.

[0157] USB port 130 is a USB standard compliant interface, specifically a Mini USB port, Micro USB port, USB Type-C port, etc. USB port 130 can be used to connect a charger to charge electronic device 100, and can also be used for data transfer between electronic device 100 and peripheral devices. It can also be used to connect headphones for audio playback. This interface can also be used to connect other electronic devices, such as AR devices.

[0158] It is understood that the interface connection relationships between the modules illustrated in the embodiments of the present invention are merely illustrative and do not constitute a structural limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may also employ different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

[0159] The wireless communication function of the electronic device can be implemented through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor, and baseband processor. Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in the electronic device can be used to cover one or more communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in conjunction with a tuning switch.

[0160] The mobile communication module 150 can provide solutions for wireless communication applications including 2G / 3G / 4G / 5G in electronic devices. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves via antenna 1, and perform filtering, amplification, and other processing on the received electromagnetic waves before transmitting them to a modem processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modem processor and convert it into electromagnetic waves for radiation via antenna 1. In some embodiments, at least some functional modules of the mobile communication module 150 may be housed in processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 and at least some modules of the processor 110 may be housed in the same device.

[0161] The wireless communication module 160 can provide solutions for wireless communication applications in electronic devices, including wireless local area networks (WLANs) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared (IR) technologies. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via antenna 2, performs frequency modulation and filtering of the electromagnetic wave signals, and sends the processed signal to processor 110. The wireless communication module 160 can also receive signals to be transmitted from processor 110, perform frequency modulation and amplification, and convert them into electromagnetic waves for radiation via antenna 2.

[0162] In some embodiments, antenna 1 of the electronic device is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, enabling the electronic device to communicate with networks and other devices via wireless communication technology.

[0163] The display screen 194 is used to display the application's interface, etc. The display screen 194 includes a display panel. In some embodiments, the electronic device may include one or more display screens 194.

[0164] The electronic device 100 can perform shooting functions through an ISP, a camera 193, a video codec, a GPU, a display 194, and an application processor. The ISP is used to process the data fed back by the camera 193.

[0165] Internal memory 121 can be used to store computer executable program code, which includes instructions. Processor 110 executes various functional applications and data processing of the electronic device by running the instructions stored in internal memory 121. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system and software code for at least one application program. The data storage area may store data generated during the use of the electronic device (e.g., images, videos, etc.). Furthermore, 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, flash memory device, general-purpose flash memory, etc.

[0166] The external storage interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device. The external memory card communicates with the processor 110 through the external storage interface 120 to perform data storage functions. For example, images, videos, and other files can be saved on the external memory card.

[0167] Electronic devices can implement audio functions such as music playback and recording through audio modules 170, speakers 170A, receivers 170B, microphones 170C, headphone jacks 170D, and application processors.

[0168] The audio module 170 is used to convert digital audio information into analog audio signals for output, and also to convert analog audio input into digital audio signals. The audio module 170 can also be used for encoding and decoding audio signals. In some embodiments, the audio module 170 may be located in the processor 110, or some functional modules of the audio module 170 may be located in the processor 110.

[0169] The speaker 170A, also known as a "loudspeaker," is used to convert audio electrical signals into sound signals. The electronic device 100 can listen to music or listen to hands-free calls and other external playback scenarios through one or more speakers 170A.

[0170] The receiver 170B, also known as a "handpiece," can be one or more, and is used to convert audio electrical signals into sound signals. When the electronic device 100 answers a telephone call or voice message, the receiver 170B can be brought close to the ear to listen to the voice.

[0171] The microphone 170C, also known as a "microphone" or "voice transducer," is used to convert sound signals into electrical signals.

[0172] The 170D headphone jack is used to connect wired headphones.

[0173] The pressure sensor 180A is used to sense pressure signals and can convert the pressure signals into electrical signals. In some embodiments, the pressure sensor 180A may be disposed on the display screen 194.

[0174] The gyroscope sensor 180B can be used to determine the motion attitude of an electronic device. In some embodiments, the gyroscope sensor 180B can determine the angular velocity of the electronic device about three axes (i.e., the x, y, and z axes). The gyroscope sensor 180B can be used for image stabilization.

[0175] The barometric pressure sensor 180C is used to measure air pressure. In some embodiments, the electronic device calculates altitude using the air pressure value measured by the barometric pressure sensor 180C to assist in positioning and navigation.

[0176] The magnetic sensor 180D includes a Hall effect sensor. Electronic devices can use the magnetic sensor 180D to detect the opening and closing of a flip cover.

[0177] The 180E accelerometer can detect the magnitude of acceleration in various directions (typically three axes) of electronic devices. When the electronic device is stationary, it can detect the magnitude and direction of gravity.

[0178] The 180F distance sensor is used to measure distance. Electronic devices can measure distance using infrared or laser.

[0179] The proximity sensor 180G may include, for example, a light-emitting diode (LED) and a light detector, such as a photodiode. The LED may be an infrared LED. The electronic device emits infrared light outward through the LED. The electronic device uses the photodiode to detect infrared reflected light from nearby objects. When sufficient reflected light is detected, it can be determined that an object is near the electronic device. When insufficient reflected light is detected, the electronic device can determine that no object is near the electronic device.

[0180] An ambient light sensor 180L is used to detect ambient light levels. Electronic devices can adaptively adjust the brightness of the display screen 194 based on the detected ambient light levels.

[0181] The fingerprint sensor 180H is used to collect fingerprints.

[0182] The 180J temperature sensor is used to detect temperature.

[0183] Touch sensor 180K, also known as a "touch panel," can be located on display screen 194. The touch sensor 180K and display screen 194 together form a touchscreen, also known as a "touch screen." Touch sensor 180K is used to detect touch operations applied to or near it. The touch sensor can then transmit the detected touch operation to the application processor to determine the type of touch event.

[0184] The bone conduction sensor 180M can acquire vibration signals. In some embodiments, the bone conduction sensor 180M can acquire vibration signals from the vibrating bone segments of the human vocal cords.

[0185] Buttons 190 include a power button, volume buttons, etc. Buttons 190 can be mechanical buttons or touch buttons. The electronic device can receive button inputs and generate key signal inputs related to user settings and function control. Motor 191 can generate vibration alerts. Motor 191 can be used for incoming call vibration alerts or for touch vibration feedback. Indicator 192 can be an indicator light, used to indicate charging status, battery level changes, messages, missed calls, notifications, etc. SIM card interface 195 is used to connect a SIM card. The SIM card can be inserted into or removed from the SIM card interface 195 to achieve contact and separation with the electronic device.

[0186] It is understood that the components shown in Figure 1 do not constitute a specific limitation on the electronic device. The electronic device in embodiments of the present invention may include more or fewer components than those shown in Figure 1. Furthermore, the combination / connection relationships between the components in Figure 1 can also be adjusted and modified.

[0187] Figure 2 is a software structure diagram of an electronic device provided in an embodiment of this application. The electronic device may be, for example, the terminal device mentioned earlier. As shown in Figure 2, the software structure of the electronic device can be a layered structure. The layered architecture divides the software into several layers, each with a clear role and division of labor. Layers communicate with each other through software interfaces. The layered architecture may be, for example, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture. This embodiment of the application uses a layered architecture... Taking a system as an example, the software structure of an electronic device is illustrated. In some embodiments, the software structure of the electronic device is... The system is divided into five layers, from top to bottom: application layer, application framework layer, Android runtime and system libraries, kernel layer, and hardware layer.

[0188] As shown in Figure 2, the application layer may include a first application and a second application. For example, the first application may be an instant messaging application, an image capture application, a video playback application, an audio playback application, a shopping application, etc. The second application differs from the first application.

[0189] The application framework layer provides application programming interfaces (APIs) and programming frameworks for applications within the application layer. The application framework layer includes some predefined functions. As shown in Figure 2, the application framework layer may include a first module and an animation module. The first module is used to overlay a first display element on top of the application window. The animation module is used to display a first animation effect, which is used to achieve the visual effect of transforming the first display element into a second display element; the specific implementation principle will be explained later. It should be noted that Figure 2 uses the first module and animation module located in the application framework layer as an example. Optionally, the first module and / or animation module may also be located in other layers, such as the system library or kernel layer, without limitation. It is understood that although not shown in Figure 2, the application framework layer may also include a content provider, a view system, a phone manager, a resource manager, a notification manager, etc. The content provider is used to store and retrieve data, making this data accessible to applications. The data may include videos, images, audio, made and received phone calls, browsing history and bookmarks, phone books, etc. A view system includes visual controls, such as controls for displaying text and controls for displaying images. View systems can be used to build applications. A display interface can consist of one or more views. For example, a display interface including a text notification icon can include views for displaying text and views for displaying images. A phone manager provides communication functionality for electronic devices, such as managing call status (including connection and disconnection). A resource manager provides applications with various resources, such as localized strings, icons, images, layout files, video files, etc. A notification manager allows applications to display notifications in the status bar. It can be used to convey informational messages and can disappear automatically after a short pause without user interaction. For example, a notification manager can be used to notify of download completion or message alerts. Notifications can also appear as icons or scrolling text in the system's top status bar, such as notifications from background applications, or as dialog boxes on the screen. Examples include displaying text messages in the status bar, emitting sounds, vibrating electronic devices, and flashing indicator lights.

[0190] The Android Runtime consists of the core libraries and the virtual machine. The Android runtime is responsible for scheduling and managing the Android system. The core libraries consist of two parts: one part contains the functionalities that Java needs to call, and the other part is the core Android library itself. The application layer and application framework layer run in the virtual machine. The virtual machine executes the Java files of the application layer and application framework layer as binary files. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.

[0191] The system library can include multiple functional modules, such as a surface manager, media libraries, 3D graphics processing libraries (e.g., OpenGL ES), and 2D graphics engines (e.g., SGL). The surface manager manages the display subsystem and provides fusion of 2D and 3D layers for multiple applications. The media libraries support playback and recording of various common audio and video formats, as well as still image files. They support various audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG. The 3D graphics processing libraries implement 3D graphics drawing, image rendering, compositing, and layer processing. The 2D graphics engine is the drawing engine for 2D graphics.

[0192] The kernel layer is the layer between hardware and software. The kernel layer can contain drivers for Wi-Fi, display, cameras, audio, sensors, etc.

[0193] The hardware layer includes displays, and may also include various other hardware such as cameras and sensors.

[0194] It is understood that the software structure shown in Figure 2 does not constitute a specific limitation on the software structure of the electronic device. The software structure of the electronic device in the embodiments of the present invention may include more or fewer modules than shown in Figure 2, for example, more or fewer layers than shown in Figure 2, or a certain layer may include more or fewer modules than shown in Figure 2. In addition, the combination / connection relationship between the modules in Figure 2 can also be adjusted and modified.

[0195] When an electronic device has the structure shown in Figure 2, its processing flow may include: a first application in the application layer calls a display driver in the kernel layer to drive the display screen to show the first window of the first application. The first application may also call a first module in the application framework layer to overlay a first display element on top of the first window. After the first module displays the first display element, it may call an animation mode to cause the animation module to call the display driver to display a first animation on the display screen. The first animation is used to obtain the visual effect of the first display element transforming into a second display element. The second display element is used to enter a combined display mode, which is a combined display mode of the first window and other windows.

[0196] The technical solutions provided in the embodiments of this application are described below with reference to the accompanying drawings.

[0197] As described in the background section, the usage rate of split-screen mode on terminal devices is currently low, and most users do not frequently use it. Therefore, how to attract users to use split-screen mode is a problem that needs to be considered.

[0198] Therefore, this application provides an interaction method applicable to terminal devices, such as tablets and mobile phones. Specifically, the terminal device displays a first window of a first application, with a first display element overlaid on top of the first window, and a first animation effect displayed. The first animation effect is used to achieve the visual effect of the first display element transforming into a second display element. The second display element is used to enter a combined display mode, which is a mode in which the first window is combined with other windows. In this way, on the one hand, the visual effect of the first display element transforming into the second display element is displayed through animation, which is more interesting and can attract / remind users to use the combined display mode to a certain extent, so as not to forget that the terminal device has a combined display mode; on the other hand, users can trigger the electronic device to enter the combined display mode through the second display element, without requiring users to remember split-screen gestures, which is more user-friendly.

[0199] For ease of understanding, the following embodiments of this application will use a tablet computer as an example to specifically illustrate the interaction method provided in the embodiments of this application.

[0200] For example, please refer to Figure 3(a), which is a schematic diagram of a graphical user interface (GUI) for a tablet computer. Exemplarily, this GUI is the tablet computer's desktop (also called the main interface). The desktop includes icons for one or more applications, including a first application. The first application can be any application, such as a system application or a third-party application, without limitation. As shown in Figure 3(a), after the tablet computer receives an operation on the icon of the first application, it displays the first window and a first display element of the first application as shown in Figure 3(b). The display element is located within the first window. The electronic device displays a first animation effect, which is used to achieve the visual effect of the first display element transforming into a second display element as shown in Figure 3(c). The second display element is used to enter a combined display mode, which is a mode in which the first window is combined with other windows.

[0201] Next, the first display element and the second display element will be explained separately.

[0202] The first display element can be any pattern / style / shape / area, and this application embodiment does not limit this. As an example, please refer to Figure 4, which shows an example of a first display element. As shown in Figure 4, the first display element includes three sub-display elements, namely sub-display element a, sub-display element b, and sub-display element c. Sub-display elements a and c are distributed on the left and right sides of sub-display element b, and sub-display elements a and c are identical, so that the first display element is symmetrical. For example, sub-display elements a and c are both dots, and sub-display element b is capsule-shaped. Optionally, the colors of the three sub-display elements can be the same or different, and are not limited. It should be noted that Figure 4 uses three sub-display elements as an example of the first display element. In actual applications, the first display element can include more or fewer sub-display elements. In addition, the pattern / style / shape / area / position of each sub-display element is not limited.

[0203] In one possible implementation, the first display element is a component. For example, the component can be a row-type component, meaning its sub-components are displayed horizontally. For instance, as shown in Figure 4, sub-display elements a, b, and c can be three sub-components contained in the main component, and these three sub-components are displayed horizontally. For example, sub-display elements a, b, and c can all be button components, such as icon button components. Alternatively, the first display element may not be a component; this embodiment does not limit this.

[0204] The first display element is positioned within the first window, meaning it occupies the display area of ​​the first window. For example, the first display element may be positioned at the top, bottom, left, or right of the first window. Referring again to Figure 4, the first display element is positioned at the top of the first window. Optionally, the first display element may be positioned in the title bar of the first window, for example, in the middle, meaning the distance from the first display element to the left edge of the first window is the same as the distance to the right edge. As shown in Figure 4, when the first window is displayed in full screen, the first display element is positioned exactly in the tablet's status bar, for example, in the middle. The status bar includes the tablet's battery information, time information, carrier information, etc.

[0205] In this embodiment, the first display element can be generated by the tablet's operating system or by the first application. Taking the first display element being generated by the tablet's operating system as an example, one possible scenario is that after the operating system receives a user's operation on the icon of the first application on the desktop, it launches the first application and generates the first display element, which is then superimposed on top of the first window of the first application. Optionally, the launch process of the first application and the generation process of the first display element can be synchronized; or, the first display element can be generated after the first application is launched; or, the first application can be launched after the first display element is generated. In other words, the display time of the first display element can be later than, equal to, or earlier than the display time of the first window of the first application. For example, the first display element may be displayed simultaneously with or after the first window fills the entire screen. Taking the first display element being generated by the first application as an example, for instance, the first display element may be generated after the first application is launched, and the first display element is located within the first window. One possible scenario is that the application package of the first application includes program code for generating the first display element; after the first application is launched, the program code is run, and the first display element is displayed. In this case, the pattern, style, shape, area, and position of the first displayed element are determined by the developer of the first application. Therefore, the first displayed element may be different for each application.

[0206] Taking the example of the first display element being generated by the operating system, in one possible implementation, the tablet computer displays the first window and the first display element of the first application. This may include: the operating system creating a first component (e.g., a stack component) that includes multiple layers; the operating system drawing the first display element in the topmost layer; and the first application drawing its first window in layers other than the topmost layer. Therefore, the first display element is overlaid on top of the first window of the first application.

[0207] Optionally, the display position and / or display area of ​​the first window of the first application can be adjusted. During the adjustment of the display position and / or display area of ​​the first window, the display position and / or display area of ​​the first display element are adjusted accordingly, so that the display position of the first display element remains in the title bar of the first window. In a specific embodiment, after the tablet computer receives an adjustment operation for the display position and / or display area of ​​the first window (e.g., an operation for the first display element), it can adjust the display position and / or display area of ​​the first component (see above description). When the display position and / or display area of ​​the first component is adjusted, the display position and / or display area of ​​the topmost first display element of the first component is adjusted accordingly, and the display position and / or display area of ​​the first window located below the first display element is also adjusted accordingly, so that the first display element remains in the title bar of the first window.

[0208] Optionally, when the display area of ​​the first window shrinks to less than a first threshold, the first display element can be canceled from display.

[0209] The second display element is used to enter the combined display mode. The combined display mode refers to a mode in which multiple windows are displayed together. Optionally, the multiple windows may be windows of the same application or windows of different applications. Optionally, the combined display mode may include split-screen mode, cosmic cube mode, panoramic multi-window mode, floating mode, etc., without limitation. Split-screen mode can be two-way split-screen, four-way split-screen, etc., where multiple windows do not overlap. Cosmic cube mode can be understood as a display mode where multiple windows are stacked but not completely covered. Panoramic multi-window mode is a mode where at least one window is displayed sideways among multiple windows. Split-screen mode will be explained in Figures 13A and 13B later. Panoramic multi-window mode will be explained in Figure 16 later. Floating mode will be explained in Figure 17 later.

[0210] In one possible implementation, the second display element includes a sub-display element 1 for entering a combined display mode. Optionally, the sub-display element 1 includes, but is not limited to, at least one of: application icons, application combo icons, and split-screen icons.

[0211] The application icons can include icons of other applications recommended by the tablet for split-screen use with the first application. For example, if the tablet determines, based on recommendation rules (explained later), that the second application is suitable for split-screen use with the first application, then the second display element includes sub-display element 1, which contains the icon of the second application. If the tablet receives an operation on sub-display element 1, it enters a combined display mode. In this mode, the first window of the first application is displayed in the first display area, and the second window of the second application is displayed in the second display area.

[0212] In this context, an application combination icon refers to a combination of icons corresponding to multiple applications. These multiple applications include a first application and other applications. The other applications can be those deemed suitable for split-screen use with the first application by the tablet computer according to recommendation rules. For example, if the tablet computer determines, according to recommendation rules, that a second application is suitable for split-screen use with the first application, then the second display element includes a sub-display element 1, which is an application combination icon. This application combination icon is a combination of the icons of the first and second applications, as shown in Figure 5(a). It should be noted that an application combination icon can be a combination of icons from two applications, three applications, or more applications. For example, if the tablet computer determines, according to recommendation rules, that a second and a third application are suitable for split-screen use with the first application, then sub-display element 1 is the application combination icon corresponding to the first, second, and third applications, as shown in Figure 5(b).

[0213] Taking an application combo icon that is a combination of the icons of the first application and the second application as an example, this application combo icon can be used to enter a combo display mode. This combo display mode can be a mode where the first window of the first application and the second window of the second application are tiled (e.g., a split-screen display mode); or, the combo display mode can also be a mode where the first window is tiled and the second window is displayed sideways. Sideways window display can be understood as displaying the window in a spatial window format, where the window is flipped towards the inside of the electronic device's screen. An example of sideways window display is described later in Figure 22C.

[0214] Taking the application combination icon as an example, which is a combination of the icons of the first application, the second application, and the third application, the application combination icon can be used to enter the combination display mode. The combination display mode can be a mode in which the first window of the first application, the second window of the second application, and the third window of the third application are tiled (e.g., split-screen display mode); or, the combination display mode can also be a mode in which the first window and the second window are tiled and the third window is displayed sideways.

[0215] Unlike application icons and application combo icons, split-screen icons may not contain application icons. For example, a split-screen icon can be the one shown in Figure 5(c). In this way, the tablet does not need to determine other applications suitable for split-screen use with the first application based on recommendation rules. As an example, after receiving an operation on the split-screen icon, the tablet enters a combo display mode, which includes a first display area and a second display area. The first display area displays the interface of the first application, and the second display area displays the desktop. As another example, after receiving an operation on the split-screen icon, the window of the first application floats on the desktop. In response to the user opening a second application on the desktop, the tablet enters a combo display mode, which includes a first display area and a second display area. The first display area includes the interface of the first application, and the second display area includes the interface of the second application. The use of the split-screen icon shown in Figure 5(c) will be explained in detail later in Figure 13A.

[0216] Optionally, the second display element may also include at least one of the following:

[0217] (1) Sub-display element 2, used to indicate the combined display method. Taking split-screen as an example, the split-screen method may include, but is not limited to, at least one of: vertical split-screen and horizontal split-screen. For example, as shown in Figure 6(a), sub-display element 2 is used to indicate horizontal split-screen. As shown in Figure 6(b), sub-display element 2 is used to indicate vertical split-screen. Taking the Cosmic Cube as an example, as shown in Figure 6(c), sub-display element 2 is used to indicate the display method of the Cosmic Cube. It is understood that the above three split-screen methods are only examples. In practical applications, other split-screen methods may also be included, which will not be listed one by one.

[0218] (2) Sub-display element 3, used to indicate recommendation rules. The recommendation rules are the rules used by the tablet computer to recommend which applications are suitable for split-screen use with the first application. For example, the applications last used in split-screen with the first application, or applications frequently used in split-screen with the first application. For example, Figure 7(a) shows one example of sub-display element 3, used to indicate the recommendation rule for "last used in split-screen". As another example, Figure 7(b) shows another example of sub-display element 3, used to indicate the recommendation rule for "frequently used in split-screen".

[0219] (3) Sub-display element 4, used to make the first window float. For example, sub-display element 4 is used to trigger the first window to switch from a full-screen window to a floating window. For example, Figure 8(a) is an example of sub-display element 4.

[0220] (4) Sub-display element 5, used to display the first window in full screen. For example, sub-display element 5 is used to trigger the full-screen display of the first window. For example, Figure 8(b) is an example of sub-display element 5.

[0221] (5) Sub-display element 6, used to replace the first window with a window of another application. For example, sub-display element 6 is used to trigger the tablet to return to the desktop, where the user can open a window of another application, which will replace the first window, for example, by displaying it in the same position as the first window. For example, Figure 8(c) is an example of sub-display element 6.

[0222] (6) Sub-display element 7, used to add a window of another application to the display screen. For example, sub-display element 7 is used to trigger the tablet to return to the desktop, where the user can open a window of another application. This window and the first window are both displayed on the display screen, and can be displayed in a split-screen or non-split-screen manner, without limitation. For example, as shown in Figure 8(d), this is an example of sub-display element 7.

[0223] (7) Sub-display element 8, used to close the first window. For example, sub-display element 8 can be used to close the first window, such as switching the first application to the background or exiting the first application, without limitation. For example, Figure 8(e) is an example of sub-display element 8.

[0224] (8) Sub-display element 9 is used to temporarily store the contents of the first window. For example, after sub-display element 9 is triggered, in addition to the first window, the first application also opens a second window (e.g., the parent window of the first window), that is, to realize the opening of multiple windows within the application. For example, as shown in Figure 8(f), it is an example of sub-display element 9.

[0225] (9) Sub-display element 10, used to rearrange the first window with other windows. For example, sub-display element 10 is used to trigger the rearrangement of the first window with other windows, such as adjusting the display order. For example, Figure 8(g) is an example of sub-display element 10.

[0226] Optionally, the second display element may include any one or more of the sub-display elements 1 to 10 listed above. Of course, in addition to the sub-display elements listed above, the second display element may also include other sub-display elements, without limitation.

[0227] The following embodiments provide three specific examples of the second display element.

[0228] First example

[0229] In this example, the second display element includes an app combo icon, and optionally, it may also include a sub-display element indicating a recommendation rule. For example, the tablet can determine, based on a recommendation rule (e.g., the app last used in split-screen with the first app), that a second app is suitable for split-screen use with the first app, and a third app is also suitable for split-screen use with the first app. Therefore, the second display element includes app combo icons for the first and second apps, as well as app combo icons for the first and third apps. Optionally, it may also include a sub-display element indicating a recommendation rule (e.g., the last time it was used in split-screen).

[0230] For example, Figure 9 shows an example of a second display element. The second display element includes three sub-display elements: sub-display element d, sub-display element e, and sub-display element f. Sub-display element d indicates a recommendation rule, such as "Last time using split-screen". Sub-display element e is a combined icon of the first and second applications. Sub-display element f is a combined icon of the first and third applications. Optionally, the second and third applications can be determined based on the same recommendation rule, or they can be determined based on different recommendation rules. At least one of the second and third applications is determined based on the recommendation rule indicated by sub-display element d. It should be noted that in Figure 9, the three sub-display elements of the second display element are arranged from left to right as: sub-display element d, sub-display element e, and sub-display element f, but this embodiment does not limit this arrangement.

[0231] Second example

[0232] In this example, the second display element includes application combo icons. Optionally, it may also include sub-display elements indicating window pausing, window reflow, full-screen display, window replacement, window addition, and window closure. For example, see Figure 10 for another example of the second display element. The second display element includes three sets of sub-display elements: sub-display element set d, sub-display element set e, and sub-display element set f. Sub-display element set d includes one or more application combo icons. Sub-display element set e includes window pausing sub-display elements and window reflow sub-display elements. Sub-display element set f includes window full-screen sub-display elements, window replacement sub-display elements, window addition sub-display elements, and window closure sub-display elements. The function of each sub-display element has been described in detail above and will not be repeated here.

[0233] Third example

[0234] In this example, the second display element includes a split-screen icon, and optionally, a panoramic multi-window icon and sub-display elements indicating window floating. For example, see Figure 11 for another example of a second display element. The second display element includes sub-display elements d, e, and f. Sub-display element d is a split-screen icon; its function will be explained in detail in Figure 13A later. Sub-display element e is a panoramic multi-window icon; its function will be explained in detail in Figure 16 later. Sub-display element f indicates window floating; its function will be explained in detail in Figure 17 later. Therefore, unlike the first and second examples above, in this third example, the second display element does not contain application group icons, so the tablet does not need to determine which applications are suitable for split-screen use with the first application based on recommendation rules.

[0235] It should be noted that the above are three specific examples of the second display element, and do not constitute a limitation on the second display element.

[0236] In one possible implementation, taking the second display element shown in Figure 9 as an example, the second display element can be a component. For instance, the component can be a stack-type component, meaning that its sub-components can be stacked. For example, in Figure 9, sub-display elements d, e, and f are three sub-components contained within the component, and these three sub-components can be stacked. For example, sub-display elements a, b, and c can all be button components, such as icon button components.

[0237] As mentioned above, the second display element is obtained by transforming the first display element. Taking the first example of the second display element described above as an example, please refer to Figure 12A, which shows one example of the transformation of the first display element into the second display element. Taking the second example of the second display element described above as an example, please refer to Figure 12B, which shows another example of the transformation of the first display element into the second display element. Taking the third example of the second display element described above as an example, please refer to Figure 12C, which shows yet another example of the transformation of the first display element into the second display element.

[0238] Next, we will explain the principle behind transforming the first display element into the second display element.

[0239] In this embodiment of the application, the transformation of the first display element into the second display element may include: the electronic device displaying a first animation effect, the first animation effect being used to obtain the visual effect of the first display element transforming into the second display element. Optionally, the transformation of the first display element into the second display element may include the following two methods, namely the first transformation method and the second transformation method, which will be described separately below.

[0240] First type of deformation

[0241] A second display element is placed below the first display element. The first display element gradually disappears and the second display element gradually appears, so as to show the visual effect of the first display element gradually transforming into the second display element.

[0242] Optionally, the gradual disappearance of the first display element and the gradual appearance of the second display element can include: gradually increasing the transparency of the first display element to make it gradually disappear and the second display element gradually appear. For example, the transparency of the first display element gradually increases according to a first transparency change curve. The first transparency change curve describes the gradual increase in transparency over time. This curve can be a linear curve, where the lowest value corresponds to the lowest transparency (completely opaque) and the highest value corresponds to the highest transparency (completely transparent). Adjusting the transparency of the first display element according to this curve makes it change from completely opaque to completely transparent.

[0243] In some embodiments, the second display element is opaque. Thus, as the first display element gradually becomes transparent, the second display element will naturally and gradually appear. In this case, the transparency of the second display element does not need to be adjusted as the transparency of the first display element increases.

[0244] In some embodiments, the second display element itself is completely transparent. In this case, as the transparency of the first display element increases, the transparency of the second display element also needs to be adjusted; for example, the transparency of the second display element gradually decreases. Therefore, the adjustment of the transparency of the second display element is the opposite of the adjustment of the transparency of the first display element; that is, the first display element adjusts from completely opaque to completely transparent, and the second display element adjusts from completely transparent to completely opaque. Optionally, the second display element can gradually decrease its transparency according to a second transparency change curve. The second transparency change curve describes the gradual decrease in transparency over time. The second transparency change curve can be a linear curve, and the transparency of the second display element is adjusted according to this curve so that the second display element changes from completely transparent to completely opaque. In this case, the adjustment of the transparency of the first display element and the adjustment of the transparency of the second display element can be performed synchronously. For example, the start time 1 of the transparency adjustment of the first display element and the start time 2 of the transparency adjustment of the second display element can be the same time, and / or, the end time 1 of the transparency adjustment of the first display element and the end time 2 of the transparency adjustment of the second display element can be the same time.

[0245] After the first display element is superimposed on top of the second display element, the display positions of the first and second display elements are the same, both being the initial position of the first display element. It should be noted that the target position of the second display element may or may not be the initial position. If it is not the initial position, then the first and second display elements move synchronously from the first position to the second position, where the first position is the initial position of the first display element, and the second position is the target position of the second display element. For example, the target position of the second display element could be located outside the first window, as will be explained in detail in Figure 13A later.

[0246] After the first display element is superimposed on top of the second display element, the first and second display elements have the same size, which is the initial size of the first display element. It should be noted that the target size of the second display element may or may not be the initial size. If it is not the initial size, then the first and second display elements are simultaneously adjusted from the first size to the second size, where the first size is the initial size of the first display element and the second size is the target size of the second display element.

[0247] Optionally, the aforementioned processes for adjusting the transparency, display position, and size of the first and second display elements can be performed sequentially or simultaneously. Taking simultaneous processes as an example, the duration from the first display element disappearing completely to the second display element appearing completely is time period 1; the duration for the first and second display elements to move their positions is time period 2; and the duration for the first and second display elements to adjust their sizes is time period 3. At least two of time periods 1, 2, and 3 overlap.

[0248] The above explains the implementation principle of the first transformation method. The following example illustrates the process of transforming the first display element into the second display element using the first transformation method.

[0249] Taking Figure 12C as an example, the first display element includes three sub-display elements, and the second display element also includes three sub-display elements. The three sub-display elements in the second display element can be obtained by transforming the three sub-display elements in the first display element using the first transformation method. For example, sub-display element a is transformed into sub-display element d using the first transformation method; sub-display element b is transformed into sub-display element e using the first transformation method; and sub-display element c is transformed into sub-display element f using the first transformation method.

[0250] Taking the transformation of sub-display element 'a' into sub-display element 'd' using the first transformation method as an example, sub-display element 'a' is superimposed on top of sub-display element 'd', completely covering sub-display element 'd'. Therefore, visually, only sub-display element 'a' is visible, and sub-display element 'd' is not. Sub-display element 'a' gradually disappears, and sub-display element 'd' gradually appears, creating the visual effect of sub-display element 'a' gradually transforming into sub-display element 'd'. Optionally, sub-display elements 'a' and 'd' can also move their positions and / or adjust their sizes simultaneously. The principle is the same for transforming sub-display element 'b' into sub-display element 'e', ​​and sub-display element 'c' into sub-display element 'f', and will not be repeated here.

[0251] Optionally, the start times of the transformation from sub-display element a to sub-display element d, the start times of the transformation from sub-display element b to sub-display element e, and the start times of the transformation from sub-display element c to sub-display element f can be the same; and / or, the end times of the transformation from sub-display element a to sub-display element d, the end times of the transformation from sub-display element b to sub-display element e, and the end times of the transformation from sub-display element c to sub-display element f can be the same. Specifically, the start time of the transformation from sub-display element a to sub-display element d can be the moment when sub-display element a begins to disappear and sub-display element d begins to appear. The start times of the transformation from sub-display element b to sub-display element e are similar to those of the transformation from sub-display element c to sub-display element f. Specifically, the end time of the transformation from sub-display element a to sub-display element d can be the moment when sub-display element a completely disappears and sub-display element d completely appears. The end times of the transformation from sub-display element b to sub-display element e and the end times of the transformation from sub-display element c to sub-display element f are similar.

[0252] As mentioned earlier, sub-display elements a and d move synchronously, sub-display elements b and e move synchronously, and sub-display elements c and f move synchronously. Optionally, the start time 1 of the movement of sub-display elements a and d, the start time 2 of the movement of sub-display elements b and e, and the start time 3 of the movement of sub-display elements c and f can be the same time; and / or, the end time 1 of the movement of sub-display elements a and d, the end time 2 of the movement of sub-display elements b and e, and the end time 3 of the movement of sub-display elements c and f can be the same time. That is to say, sub-display elements d, e, and f arrive at their corresponding target positions simultaneously.

[0253] As mentioned earlier, sub-display elements a and d adjust their sizes synchronously, as do sub-display elements b and e, and sub-display elements c and f. Optionally, the start time 1 for the size adjustment of sub-display elements a and d, the start time 2 for the size adjustment of sub-display elements b and e, and the start time 3 for the size adjustment of sub-display elements c and f can be the same time; and / or, the end time 1 for the size adjustment of sub-display elements a and d, the end time 2 for the size adjustment of sub-display elements b and e, and the end time 3 for the size adjustment of sub-display elements c and f can be the same time. In other words, sub-display elements d, e, and f simultaneously reach their corresponding target sizes.

[0254] Next, taking the transformation of the first display element shown in Figure 12C into the second display element as an example, we will explain the complete process of entering the combined display mode.

[0255] For example, referring to Figure 13A(a), the tablet displays a desktop containing an icon for a browser application. After receiving an operation on the browser application icon, the tablet displays the first window of the browser application as shown in Figure 13A(b). The first window is displayed in full screen and includes a first display element. As shown in Figure 13A(b), after the tablet receives an operation to slide upwards from the bottom of the display (referred to as the first slide operation), the first display element begins to deform. For example, the first display element uses a first deformation method to transform into a second display element. For example, a second display element is placed below the first display element, the first display element gradually disappears (e.g., the transparency of the first display element begins to increase), and the second display element gradually appears. Optionally, the first and second display elements can move their positions and / or adjust their sizes synchronously. The first display element includes three sub-display elements, each of which is deformed using the first deformation method, the principle of which has been described previously and will not be repeated.

[0256] For example, as shown in Figure 13A(c), the first and second display elements are magnified and moved synchronously. At this time, the first display element has not completely disappeared, and the second display element has not yet appeared. As shown in Figure 13A(d), the second display element appears, and the first display element is completely transparent and visually invisible. As shown in Figure 13A(e), the second display element moves to the target position and its size increases to the target size. For example, the three sub-display elements of the second display element move to their respective target positions and their sizes are adjusted to the corresponding target sizes.

[0257] Continuing with Figure 13A(b) as an example, after the tablet receives the first swipe operation, the first window of the browser application switches from a full-screen window to a floating window, as shown in Figure 13A(c). Optionally, the switching process from a full-screen window to a floating window and the transformation process from the first display element to the second display element can be performed synchronously. For example, the starting time of the switching from a full-screen window to a floating window and the starting time of the transformation from the first display element to the second display element are both the time when the first swipe operation is received. As shown in Figure 13A(e), after the first window switches to a floating window, the target position of the second display element is located outside the first window. For example, the target positions of the three sub-display elements of the second display element are all located outside the first window. Optionally, the target position of the second display element can be a preset position outside the first window, and the preset position can be a system default setting.

[0258] As shown in Figure 13A(f), the tablet receives an operation to move the first window toward the sub-display element d (referred to as the second sliding operation), the first window continues to shrink and move toward the sub-display element d.

[0259] In some embodiments, the first window can be displayed according to a second animation effect, which is used to obtain the visual effect of the first window entering the second display element (e.g., sub-display element d). For example, displaying the first window according to the second animation effect may include: replacing the first window with a first image, which may be a screenshot of the first window or a preset image (e.g., a grayscale image), the shape of which is used to show the visual effect of the first image facing the second display element (e.g., sub-display element d), as shown in Figure 13B(a). The first image moves towards a target position, which is located inside the second display element (e.g., sub-display element d). Optionally, the size of the first image continuously shrinks during the movement, as shown in Figure 13B(b). After the first image moves to the target position, it can be replaced with the first window, as shown in Figure 13B(c). Optionally, after the first icon moves to the target position, its shape can be restored first, and then the restored first image can be replaced with the first window; or, after the first image restores its shape, it can be enlarged and fills the entire display area of ​​the sub-display element d, and then replaced with the first window.

[0260] Optionally, before, after, or simultaneously with the first window displaying according to the second animation effect, the display area of ​​the second display element (e.g., child display element d) gradually increases. For example, as shown in Figures 13B(a) and (b), the display area of ​​child display element d gradually increases. Optionally, during the process of the second display element's display area increasing, the display elements inside the second display element (e.g., child display element d) can be hidden. Hiding methods include blurring the display elements, making them transparent, or replacing the second display element (e.g., child display element d) containing display elements with a second display element (e.g., child display element d) that does not contain display elements, etc. Optionally, after the display area of ​​the second display element (e.g., child display element d) increases, the first window can fill the entire display area of ​​the second display element (e.g., child display element d), as shown in Figure 13B(d).

[0261] Optionally, as shown in Figure 13B(e), after the first window occupies the entire display area of ​​the second display element (e.g., sub-display element d), the first window partially moves off the screen. Optionally, the desktop gradually appears before, after, or simultaneously with the first window being displayed according to the second animation. For example, in Figure 13B(a), the desktop begins to appear (not shown), and in Figure 13B(c), the desktop is fully displayed. Optionally, the starting time of the desktop's appearance can be equal to the starting time of the first window being displayed according to the second animation, and / or the time when the desktop is fully displayed can be equal to the ending time of the first window being displayed according to the second animation.

[0262] After the tablet receives a gesture targeting the icon of an in-desk instant messaging application (e.g., WeChat), it enters a combined display mode. As shown in Figure 13B(f), in combined display mode, the first display area displays the first window of the browser application, and the second display area displays the second window of the instant messaging application (e.g., WeChat).

[0263] Next, the implementation principles of Figures 13A and 13B will be explained using Figure 14.

[0264] As shown in Figure 14, the tablet computer receives a first swipe-up operation, which can be a swipe-up operation from the bottom of the display screen. In response to the first swipe-up operation, the tablet computer transforms a first display element into a second display element and switches the first window from a full-screen window to a floating window. The transformation of the first display element into the second display element includes: the first display element transforming into the second display element using a first transformation method. For example, the first display element is superimposed on top of the second display element, the first display element gradually disappears, and the second display element gradually appears; this process has been described previously and will not be repeated. Optionally, the first and second display elements can also move synchronously to a target position, and / or the first and second display elements can be synchronously scaled to a target size. The target position can be the target position of each of the three sub-display elements in Figure 13A(e), and the target size can be the target size of each of the three sub-display elements in Figure 13A(e).

[0265] After the first display element transforms into the second display element and the first window switches to a floating window, i.e., after reaching the interface in Figure 13A(e), as shown in Figure 14, the tablet computer receives a second swipe operation. The second swipe operation is used to move the first window towards the second display element (e.g., sub-display element d). The second swipe operation and the first swipe operation can be a seamless swipe operation (i.e., the user's finger does not leave the screen). For example, the second swipe operation can be the swipe operation towards sub-display element d in Figure 13A(f). In response to the second swipe operation, the tablet computer continues to shrink the first window and moves it towards the second display element, for example, the first window moves towards sub-display element d in Figure 13A(f).

[0266] As shown in Figure 14, the first window is displayed according to the second animation effect to demonstrate the visual effect of the first window entering the second display element. The display of the first window according to the second animation effect includes: replacing the first window with a first image, the shape of which is used to demonstrate the visual effect of the first image moving towards the second display element, such as the shape of the first image in Figure 13B(a). The first image moves towards a target position, which is located within the second display element. Optionally, during the movement, the first image can be continuously reduced in size, as shown in Figure 13B(b). After the first image moves to the target position, it is replaced by the first window, as shown in Figure 13B(c).

[0267] Optionally, displaying the first window according to the second animation effect may include: detecting the end of the second swipe operation (e.g., the user's finger leaving the screen), then displaying the first window according to the second animation effect. Therefore, the starting time for the first window to be displayed according to the second animation effect can be the moment the user's finger leaves the screen.

[0268] Optionally, before, after, or simultaneously with the first window displaying according to the second animation effect, the display area of ​​the second display element gradually increases. For example, in Figure 13B(a) and (b), the display area of ​​the sub-display element d gradually increases. Optionally, the display elements inside the second display element can be hidden. The hiding methods include blurring the display elements, making them transparent, or replacing the second display element containing display elements with a second display element that does not contain display elements, etc., without limitation. Optionally, the gradual increase in the display area of ​​the second display element can include: detecting the end of the second swipe operation (e.g., the user's finger leaves the screen), then the display area of ​​the second display element gradually increases. Therefore, the starting time of the increase in the display area of ​​the second display element can be the moment the user's finger leaves the screen. After the display area of ​​the second display element increases, the first window occupies the entire display area of ​​the second display element, as shown in Figure 13B(d).

[0269] As mentioned earlier, when the first window is displayed according to the second animation, the first window needs to be replaced with the first image, and the shape of the first image is used to show the visual effect of the first image facing the second display element. For example, in Figure 13B(a) above, the shape of the first image shows the visual effect of facing the sub-display element d, and the first image moves towards the target position (within the sub-display element d). The first image and the shape of the first image will be explained below.

[0270] Optionally, the first image can be a single image, such as a screenshot of a frame from the first window. Alternatively, the first image can also be a sequence of images, such as real-time screenshots of the first window. Assuming the image sequence includes N frames, the first window is first replaced with the first frame of the N frames. After a certain time, the first frame is replaced with the second frame, and so on, until all N frames have been replaced. For example, the moment the first frame of the N frames is captured could be the moment the user's finger leaves the screen. For example, the moment the last frame of the N frames is captured could be the moment the image sequence moves to its target position (within the second display element) or restores its shape. Therefore, in this way, the first window is replaced with an image sequence, which is a real-time screenshot of the first window, avoiding a choppy experience for the user.

[0271] In one possible implementation, the shape of the first image is related to a first direction from the first window to the second display element, such that the shape of the first image is used to display a visual effect of the first image facing the first direction. For example, as shown in FIG15A(a), since the first direction from the first window to the second display element (e.g., sub-display element d) is upper left, the shape of the first image displays an effect of the first image facing upper left. Alternatively, as shown in FIG15A(b), since the first direction from the first window to the second display element (e.g., sub-display element d) is upper right, the shape of the first image displays an effect of the first image facing upper right.

[0272] As another possible implementation, the shape of the first image is adjusted according to a first curve. For example, the display positions of the edge feature points of the first image are set so that the lines connecting the edge feature points of the first image match the first curve. Optionally, the first curve can be any curve, such as a Bézier curve (second-order or third-order Bézier curve). Optionally, the edge feature points of the first image can include four types of edge feature points, such as upper edge feature points, lower edge feature points, left edge feature points, and right edge feature points. Adjusting the display positions of the edge feature points of the first image according to the first curve can involve adjusting the display positions of any one or more of the four types of edge feature points. For example, as shown in Figure 15B(a), the first image includes 12 edge feature points, represented by black dots in the figure. The display positions of the four feature points on the upper edge, the four feature points on the lower edge, the four feature points on the left edge, and the four feature points on the right edge can be set according to the first curve, for example, forming the shape shown in Figure 15B(b) or the shape shown in Figure 15B(c).

[0273] As mentioned earlier, the first image can be a single image or a sequence of images.

[0274] Taking a single image as an example, optionally, the first window can be directly replaced with a first image whose shape is a first shape, that is, the shape of the first image itself is the first shape, and the first shape is used to display the visual effect of the first image facing the second display element, such as the shape shown in Figure 15A or Figure 15B. Alternatively, the first window can be replaced with a first image with the same shape as the first window, and then the shape of the first image can be adjusted to the first shape. Optionally, the shape of the first image can remain unchanged, for example, maintaining the first shape, or the shape of the first image can also change in real time. Taking the real-time change of the shape of the first image as an example, for example, at time T1, the shape of the first image is shape 1, at time T2, the shape of the first image is shape 2, and so on. Shape 1 and shape 2 are different, but both shape 1 and shape 2 are used to display the visual effect facing the second display element. In one possible implementation, the electronic device can adjust the parameters of the Bézier function in real time, so that the Bézier curve changes in real time, and adjust the shape of the first image based on the real-time changing Bézier curve. For example, when the parameter of the Bezier function is parameter 1, the Bezier curve is curve 1, so the shape of the first image is adjusted to shape 1 based on curve 1; when the parameter of the Bezier function is parameter 2, the Bezier curve is curve 2, so the shape of the first image is adjusted to shape 2 based on curve 2, and so on.

[0275] Taking an image sequence as an example, the first window is replaced with the first frame in the image sequence, then the first frame is replaced with the second frame, and so on. Optionally, the shapes of different frames in the image sequence can be the same or different. For example, each frame in the image sequence might be a first shape. For example, the first frame in the image sequence might have shape 1, the second frame might have shape 2, and so on. Shape 1 and Shape 2 differ, but both shape 1 and shape 2 are used to demonstrate the visual effect towards the second display element. The implementation principles of shape 1 and shape 2 are explained above (e.g., adjustment based on curves), and will not be repeated here.

[0276] In the above embodiment, taking the user moving the first window toward the child display element d as an example, optionally, the first window can also be moved toward the child display element e or the child display element f.

[0277] For example, see Figure 16(a), where the first display element has been transformed into the second display element. As shown in Figure 16(b), the tablet detects an operation to move the first window toward the sub-display element e, so the first window continues to shrink and move toward the sub-display element e. Optionally, the first window can be displayed in a third motion effect form, used to achieve the visual effect of the first window entering the sub-display element e. For example, the first window can be replaced with a preset image, and the shape of the preset image can be adjusted to a third shape (related to the direction of the first window toward the sub-display element e, to show the visual effect of the first window facing the sub-display element e), as shown in Figure 16(c). The preset image moves toward a target position located within the sub-display element e, as shown in Figure 16(d). Optionally, the size of the preset image can continuously shrink during its movement, as shown in Figures 16(c) and (d). After the preset image moves to the target position, it is replaced by the first window, as shown in Figure 16(e). Optionally, before, after, or simultaneously with the first window displaying according to the third animation effect, the display area of ​​the sub-display element e gradually increases, as shown in (c) and (d) of Figure 16. Optionally, during the process of increasing the display area of ​​the sub-display element e, the display elements within the sub-display element e can be hidden. After the display area of ​​the sub-display element e increases, the first window can fill the entire display area of ​​the sub-display element e, as shown in (f) of Figure 16. Optionally, as shown in (g) of Figure 16, part of the first window moves off the display screen. After the tablet receives an operation on the WeChat application icon on the desktop, it enters the combined display mode shown in (h) of Figure 16. This combined display mode includes the window of the WeChat application and the window of the browser application, wherein the window of the browser application is displayed sideways.

[0278] For example, see Figure 17(a), where the first display element has been transformed into the second display element. As shown in Figure 17(b), the tablet detects an operation to move the first window toward the sub-display element f; the first window then continues to shrink and move toward the sub-display element f. Optionally, the first window can be displayed according to a fourth motion effect, used to achieve the visual effect of the first window entering the sub-display element f. For example, the first window can be replaced with a preset image, and the shape of the preset image can be adjusted to a fourth shape (related to the direction of the first window toward the sub-display element f, to show the visual effect of the first window facing the sub-display element f), as shown in Figure 17(c). The preset image moves toward a target position located within the sub-display element f, as shown in Figure 17(d). Optionally, the size of the preset image can continuously shrink during its movement, as shown in Figures 17(c) and (d). After the preset image moves to the target position, it is replaced by the first window, as shown in Figure 17(e). Optionally, before, after, or simultaneously with the first window displaying according to the third animation effect, the display area of ​​the sub-display element f can gradually increase, as shown in (c) and (d) of Figure 17. Optionally, during the process of increasing the display area of ​​the sub-display element f, the display elements within the sub-display element f can be hidden. After the display area of ​​the sub-display element f increases, the first window can fill the entire display area of ​​the sub-display element f, as shown in (f) of Figure 17. Thus, the first window floats on the desktop. In (f) of Figure 17, after the tablet receives an operation on the WeChat application icon on the desktop, it displays the WeChat application window as shown in (g) of Figure 17. This window is displayed in full screen, and the first window floats on the top layer.

[0279] The second type of deformation

[0280] For example, a tablet computer displays a first sub-display element overlaid on a first display element, and displays a first separation animation effect. The first separation animation effect is used to achieve the visual effect of separating a second sub-display element from the first sub-display element. In one specific embodiment, the tablet computer sets a second sub-display element below the first sub-display element, and the second sub-display element is completely covered by the first sub-display element; the second sub-display element gradually moves away from the first sub-display element, so that the second sub-display element is completely separated from the first sub-display element.

[0281] The gradual separation of the second sub-display element from the first sub-display element can include: one sub-display element remains stationary while the other moves away from the stationary element. For example, the first sub-display element remains stationary while the second sub-display element moves away from it. Alternatively, the gradual separation can include: both the second and first sub-display elements move in opposite directions, causing them to gradually move away from each other.

[0282] Optionally, the first and second child elements can also exhibit a visual effect of moving from being stuck together to being completely separated. For example, both the second and first child elements have blurred edges, so that the second child element appears to be stuck together with the first child element before they are completely separated and only overlap at the edges.

[0283] As mentioned earlier, both the second and first sub-display elements have blurred edges. The edge blurring is explained here. Taking the first sub-display element as an example, the edge blurring of the first sub-display element means that the transparency gradually increases from the edge of the first sub-display element outwards; in other words, it becomes increasingly transparent from the edge of the first sub-display element outwards until it is completely transparent. For example, please refer to Figure 18A. The first sub-display element is a sphere. The edge of the sphere is blurred, meaning that it gradually becomes transparent from the white solid line outwards (in the direction of the arrow in the figure) until it is completely transparent. The black dashed line in Figure 18A represents the completely transparent position. In this embodiment, the portion from the white solid line to the black dashed line in Figure 18A is referred to as the blurred edge. It should be noted that there is a certain distance (or width, which is the width of the blurred edge) between the white solid line and the black dashed line. The size of this distance represents the rate of increase in transparency. The larger the distance, the slower the transparency increases until it becomes completely transparent; the smaller the distance, the faster the transparency increases until it becomes completely transparent. It should be noted that in Figure 18A, the first and second sub-display elements are both spheres, but in practical applications, the first and second sub-display elements can also be other shapes, without limitation.

[0284] As one example, the first and second sub-display elements generated by the electronic device may have blurred edges. For instance, the electronic device may use a directed distance field (SDF) rendering technique to generate the first and second sub-display elements with blurred edges. As another example, the first and second sub-display elements generated by the electronic device may not have blurred edges initially, but their edges are blurred during the display of the first separation animation. For example, as the second sub-display element moves away from the first sub-display element, both the first and second sub-display elements are blurred at their edges.

[0285] Both the first and second child display elements have blurred edges, allowing them to appear as if they are stuck together, even before they are completely separated and only their edges overlap. "Only edge overlap" means that the first and second child display elements only overlap at their edges, with no other overlap. For example, see Figure 18B, where both the first and second child display elements are blurred spheres, and the two spheres only overlap at their edges.

[0286] To facilitate understanding, the following text will continue to use the example of the first and second child display elements being two spheres with blurred edges to illustrate the principle of how the two child display elements go from being stuck together to being completely separated.

[0287] Taking two sub-display elements (hereinafter referred to as fused spheres) as an example, as shown in Figure 18C(a), the first sub-display element contains the second sub-display element underneath. At this time, the second sub-display element is covered and therefore not visible. Optionally, at this time, the edges of both the first and second sub-display elements are blurred. As shown in Figure 18C(b), the second sub-display element moves away from the first sub-display element, and the first and second sub-display elements overlap (not only the edges overlap, but other parts also overlap), so the user sees the two sub-display elements stacked together. As the second sub-display element continues to move, as shown in Figure 18C(c), the second sub-display element overlaps the first sub-display element only at the edges, so the user sees the two sub-display elements as stuck together. As shown in Figure 18C(d), the first and second sub-display elements do not overlap at all, that is, they are completely separated. Optionally, during the movement of the second sub-display element, the size of the second sub-display element gradually increases until it is the same size as the first sub-display element. For example, referring to Figure 18C, the second sub-display element moves away from the first sub-display element, and the size of the second sub-display element gradually increases until it matches the size of the first sub-display element.

[0288] In the above embodiments, a first separation animation effect is used to achieve the visual effect of separating a second sub-display element from a first sub-display element. Optionally, the tablet computer can also display a second separation animation effect to achieve the visual effect of separating a third sub-display element from a second sub-display element. In one specific implementation, the tablet computer places a third sub-display element below the second sub-display element, and the third sub-display element is completely covered by the second sub-display element; the third sub-display element gradually moves away from the second sub-display element, so that the third sub-display element is completely separated from the second sub-display element. Optionally, the third sub-display element and the second sub-display element can also exhibit a visual effect of moving from being stuck together to being completely separated. For example, both the third sub-display element and the second sub-display element have blurred edges, so that before the third sub-display element is completely separated from the second sub-display element and only overlaps at the edges, it exhibits a visual effect of the third sub-display element and the second sub-display element being stuck together.

[0289] Optionally, the number of child display elements in the second display element is the same as the number of child display elements in the first display element. For example, if the first display element includes three child display elements, then the second display element can also include three child display elements.

[0290] The above explains the implementation principle of the second transformation method. The following two specific examples illustrate the process of transforming the first display element into the second display element using this second transformation method.

[0291] Specific Example 1

[0292] For example, please refer to Figure 19(a), where the first display element includes sub-display element a, sub-display element b, and sub-display element c. The process of transforming the first display element into the second display element using the second transformation method includes the processes shown in Figure 19(b) to Figure 19(f).

[0293] As shown in Figure 19(b), sub-display element a is transformed into sub-display element d. One possible transformation is to place sub-display element d below sub-display element a, with sub-display element a gradually disappearing and sub-display element d gradually appearing, and sub-display element d gradually enlarging. Sub-display element b is transformed into an intermediate pattern, for example, a pattern formed by enlarging the size of sub-display element b. Here, sub-display element d is located on the upper layer, and the intermediate pattern is located on the lower layer; therefore, a portion of the intermediate pattern is covered by sub-display element d.

[0294] Continuing with Figure 19(b), a fused sphere A (covered and represented by a dashed line in the figure) is set below the sub-display element d. The fused sphere A matches the size of the right edge of the sub-display element d. The fused sphere A can be a sphere with blurred edges. One possible approach is that when the sub-display element d is set below the sub-display element a, the sub-display element d "carries" the fused sphere A, and the fused sphere A is located below the sub-display element d. As the sub-display element d gradually enlarges, the fused sphere A enlarges along with it. Optionally, there may be no display elements within the fused sphere A.

[0295] Continuing with Figure 19(b), a fused sphere B (represented by a dashed line in the figure because it is covered) is placed below the middle pattern. The fused sphere B matches the size of the right edge of the middle pattern. The fused sphere B can be a sphere with blurred edges. One possible approach is to place the fused sphere B below the child display element b before the child display element b begins to enlarge, and as the child display element b enlarges to form the middle pattern, the fused sphere B also enlarges. Optionally, the fused sphere B can contain display elements, such as applied group icons.

[0296] As shown in Figure 19(c), the size of the sub-display element a continues to increase, and the rate of increase is faster than that of the intermediate pattern. Therefore, the sub-display element a covers more of the intermediate pattern. For example, molten sphere A and molten sphere B are close to each other, and optionally, molten sphere A and molten sphere B overlap.

[0297] As shown in Figure 19(d), the central pattern is hidden (e.g., completely transparent), and molten sphere B moves away from molten sphere A, gradually increasing in size until it matches the size of molten sphere A. This movement of molten sphere B away from molten sphere A creates a visual effect of transitioning from adhesion to complete separation.

[0298] Continuing with Figure 19(d), a fusion sphere C is set below fusion sphere B (represented by a dashed line because it is covered). Fusion sphere C includes display elements, such as applied group icons. One possible approach is that fusion sphere C is generated together with fusion sphere B, but the size of fusion sphere C is smaller than that of fusion sphere B. When fusion sphere B moves away from fusion sphere A, fusion sphere C moves synchronously.

[0299] As shown in Figure 19(e), the molten sphere C moves away from the molten sphere B, and during this movement, the size of the molten sphere C gradually increases until it has the same size as the molten sphere B. The movement of the molten sphere C away from the molten sphere B demonstrates a visual effect of transitioning from adhesion to complete separation. As shown in Figure 19(f), the second display element includes sub-display elements d, e, and f.

[0300] It should be noted that in Figure 19, the sub-display element d, as the first sub-display element, has a molten sphere A underneath it. Optionally, in some other embodiments, the sub-display element d itself can be an elliptical molten sphere, in which case the molten sphere A does not need to be set underneath it. In this case, continuing with Figure 19(b) as an example, the sub-display element b does not need to be transformed into an intermediate pattern; for example, it can be directly transformed into a molten sphere B, and the molten sphere B is close to (e.g., overlaps) the elliptical molten sphere, and then the molten sphere B moves away from the elliptical molten sphere. In summary, the embodiments of this application do not limit whether the first sub-display element (i.e., sub-display element d) itself is a molten sphere, as long as the visual effect of two adjacent sub-display elements going from sticking together to being completely separated can be displayed.

[0301] Specific Example 2

[0302] For example, as shown in Figure 21(a), the first display element includes child display element a, child display element b, and child display element c. Child display element b is capsule-shaped. The first child display element is displayed on top of child display element b. It should be noted that the first child display element and child display element b have the same visual effect, such as the same size and color, making it imperceptible to the user that the first child display element is overlaid on top of child display element b. As mentioned earlier, the first display element can be a row-type component, so child display element b is a child component within the row component. The second display element can be a stack-type component, so the first child display element is a child component within the stack-type component.

[0303] As shown in Figure 21(b), a second sub-display element is located beneath the first sub-display element. The second sub-display element is completely covered by the first sub-display element, so it is not visible to the naked eye. Therefore, the second sub-display element in Figure 21(b) is represented by a dashed line. Optionally, the second and first sub-display elements can be generated simultaneously (e.g., both are superimposed on top of sub-display element b, but the first sub-display element is visible while the second sub-display element is not); or, the first sub-display element appears first, and then the second sub-display element is set below it. Optionally, the styles of the second and first sub-display elements can be the same or different, without limitation. For example, in Figure 21(a), the styles of the first and second sub-display elements are different; the second sub-display element is a sphere. Optionally, the height (high) of the second sub-display element can be lower than the height of the first sub-display element.

[0304] As shown in Figure 21(c), after the first sub-display element is superimposed on the sub-display element b, the first sub-display element gradually enlarges and completely covers all the sub-elements of the first display element. Exemplarily, the first sub-display element can be enlarged to a target size, the size of which is not limited in this embodiment. It is understood that during the gradual enlargement of the first sub-display element, its internal content is gradually revealed. For example, the first sub-display element may be used to indicate recommended split-screen rules, or it may include text information such as "Last time split-screen used." Optionally, during the enlargement of the first sub-display element, the second sub-display element may or may not be enlarged, without limitation. Regardless of whether the second sub-display element is enlarged, its height is less than that of the first sub-display element.

[0305] Continuing with Figure 21(c), the first separation animation effect is displayed, where the second sub-display element gradually separates from the first sub-display element. Optionally, the first separation animation effect can also be used to achieve the visual effect of the second and first sub-display elements moving from being stuck together to being completely separated. For example, both the second and first sub-display elements have blurred edges, so that before complete separation, and with only edge overlap, they appear to be stuck together. Optionally, the display process of the first separation animation effect and the magnification process of the first sub-display element can be performed synchronously or asynchronously. For example, asynchronously, the first separation animation effect is displayed after the first sub-display element is magnified to the target size. For example, synchronously, the first separation animation effect is displayed during the magnification process of the first sub-display element. Optionally, during the display of the first separation animation effect, the second sub-display element gradually magnifies until it has the same height as the first sub-display element. During the gradual magnification of the second sub-display element, the content displayed inside the second sub-display element is gradually revealed. For example, as shown in Figure 21(c), the second sub-display element includes the application combo icon.

[0306] As shown in Figure 21(d), the lower layer of the second display element includes a third sub-display element. The second sub-display element is completely covered by the third sub-display element, so it is not visible to the naked eye. Therefore, the third sub-display element in Figure 21(d) is represented by a dashed line. Optionally, the third sub-display element and the second sub-display element can be generated at the same time. For example, when the first sub-display element is displayed on top of the first sub-display element b, both the second and third sub-display elements are already located below the first sub-display element. When displaying the first separation animation, the third sub-display element moves together with the second sub-display element. Optionally, the styles of the third sub-display element and the second sub-display element can be the same or different. Taking the same style as an example, both can be spheres. Assuming that both the third and second sub-display elements are spheres, the size of the third sub-display element can be smaller than the size of the second sub-display element.

[0307] Continuing with Figure 21(d), the second separation animation is displayed, where the third sub-display element gradually separates from the second sub-display element. Optionally, the second separation animation is also used to achieve the visual effect of the third and second sub-display elements moving from being stuck together to being completely separated. For example, both the third and second sub-display elements have blurred edges, so that before they are completely separated, and only their edges overlap, they appear to be stuck together. Optionally, during the display of the second separation animation, the third sub-display element gradually enlarges until it is the same size as the second sub-display element. As the third sub-display element gradually enlarges, its internal content is gradually revealed. For example, as shown in Figure 21(d), the third sub-display element includes an application group icon. Optionally, the display process of the second separation animation can be performed synchronously or asynchronously with the display process of the second separation animation, without limitation.

[0308] It should be noted that in Figure 19 or Figure 20, the two application combo icons are located in two separate sub-display elements. Optionally, the two application combo icons can also be located in one sub-display element, for example, as shown in Figure 21(a), which only requires two sub-display elements. Alternatively, the method shown in Figure 21(b) can be used, where the recommendation rules and application combo icons are set in one sub-display element.

[0309] The above embodiments provide two variations. For the first variation, after the second display element is generated, the method of entering the combined display mode (referred to as the first entry method) is: the user moves the first window towards the second display element, triggering the first window to enter the second display element, thereby triggering entry into the combined display mode. For the second variation, after the second display element is generated, the method of entering the combined display mode (referred to as the second entry method) is: the user clicks the application combination icon in the second display element, triggering entry into the combined display mode. It should be noted that the first variation can also be combined with the second entry method, and / or the second variation can also be combined with the first entry method.

[0310] The above embodiments illustrate the principle of transforming a first display element into a second display element. Optionally, in this embodiment, transforming a first display element into a second display element may include: transforming the first display element into a second display element in response to a first event. Optionally, the first event may be a user input event (e.g., a click event on the first display element), or an event where a timer reaches a preset duration (e.g., 5 seconds). The timer starts counting from the moment the first window is displayed. If no operation on the first window is detected, the timer increments; if an operation on the first window is detected, the timer stops. Therefore, if the timer reaches the preset duration (e.g., 5 seconds), it means that no operation on the first window has been detected within the preset duration (e.g., 5 seconds), and the first display element is transformed into the second display element.

[0311] In other words, the transformation of the first display element into the second display element can include automatic deformation and manual deformation, which will be explained separately below.

[0312] The first type is automatic deformation.

[0313] For example, please refer to Figure 22A(a). The tablet displays a desktop containing an icon for an instant messaging application (e.g., WeChat). After receiving an operation on this icon, the tablet displays the first window (e.g., a chat window) of the instant messaging application, as shown in Figure 22A(b). The first window includes a first display element. The first display element then transforms into a second display element, for example, through the second transformation method described above, as shown in Figure 22A(c). The transformation principle can be found in Figure 19 or Figure 20 above. As shown in Figure 22A(c), the second display element includes sub-display elements d, e, and f. Sub-display element d is used to indicate recommendation rules. Sub-display elements e and f are both application combination icons. The application combination icon corresponding to sub-display element e is a combination of the icon of the instant messaging application and the icon of the gallery application. The application combination icon corresponding to sub-display element f is a combination of the icon of the instant messaging application and the icon of the map application.

[0314] As shown in Figure 22A(c), the tablet receives an operation on the sub-display element f and enters a combined display mode, as shown in Figure 22A(d). In the combined display mode, the first display area includes a first window of the instant messaging application, and the second display area includes a second window of the map application, displaying the location result of restaurant A. One possible approach is as follows: In Figure 22A(b), before transforming the first display element into the second display element, the tablet identifies the display content of the current window (i.e., the first window). If the display content includes address information (e.g., restaurant A), it determines that the map application is suitable for split-screen use with the instant messaging application. Therefore, the sub-display element f is a combined icon of the instant messaging application and the map application. After receiving the operation on the sub-display element f, the map application is launched, and the address information (e.g., restaurant A) is searched within the map application to display the location result of the address information (e.g., restaurant A).

[0315] In this method, the first display element automatically transforms into the second display element. Optionally, the automatic transformation of the first display element into the second display element may include: the first display element automatically transforms into the second display element when a certain condition is met. The condition may include: no operation on the first window has been received within a preset time period (e.g., 5 seconds).

[0316] Optionally, before the first display element transforms into the second display element, the tablet computer can also determine whether to recommend applications for split-screen use to the user based on the current content displayed in the first window. For example, if it is determined based on the current content displayed in the first window that an application for split-screen use is not suitable for recommending to the user, the first display element will not transform into the second display element; otherwise, the first display element will automatically transform into the second display element. For example, if the current content displayed in the first window is immersive (e.g., high-definition video), highly interactive (e.g., game screen), a continuous task that can be placed in the background and does not need to be called at any time (e.g., music, blogs, etc.), or a temporary task that can be placed in the background and only needs to be aware of its status (e.g., ride-hailing, food delivery, etc.), then it is determined that an application for split-screen use is not suitable for recommending to the user, so the first display element will not transform into the second display element.

[0317] The second method is manual deformation.

[0318] For example, referring to Figure 22B(a), the tablet displays a desktop containing an icon for an instant messaging application (e.g., WeChat). Upon receiving an operation on this icon, the tablet displays a first window (e.g., a chat window) of the instant messaging application, as shown in Figure 22B(b). This first window includes a first display element. Upon receiving an operation (e.g., a click) on the first display element, the first display element transforms into a second display element, as shown in Figure 22B(c). The transformation principle can be found in Figure 19 or Figure 20 above. As shown in Figure 22B(c), the second display element includes sub-display elements d, e, and f. Upon receiving an operation on sub-display element f, the tablet enters a combined display mode, as shown in Figure 22B(d). In the combined display mode, the first display area includes the first window of the instant messaging application, and the second display area includes a second window of a map application, with the second window containing the location result of restaurant A. One possible approach is as follows: In Figure 22B(b), after the tablet receives an operation on the first display element, it identifies the display content of the current window (i.e., the first window), determines that the display content includes address information (e.g., restaurant A), and then determines that the map application is suitable for split-screen use with the instant messaging application. Therefore, the sub-display element f is a combined icon of the instant messaging application and the map application. After receiving the operation on the sub-display element f, the map application is launched, and the address information (e.g., restaurant A) is searched within the map application to display the location result of the address information (e.g., restaurant A).

[0319] In the above embodiments, the application combination icon is mainly a combination of icons from two applications. As mentioned above, the application combination icon may also be a combination of icons from three applications. For example, please refer to Figure 22C(a), where the sub-display element f is a combination of icons from three applications. After the tablet computer receives an operation on the sub-display element f, it enters the combination display mode shown in Figure 22C(b). In this combination display mode, the windows of two applications are tiled, and the window of the third application is displayed sideways. For example, the windows of the WeChat application and the Map application are tiled, and the window of the Browser application is displayed sideways.

[0320] As mentioned earlier, tablet computers use recommendation rules to determine other applications suitable for split-screen use with the primary application. The recommendation rules are explained below. For example, see Table 1 below.

[0321] Table 1: Recommendation Rules

[0322] It should be noted that the recommendation rules listed in Table 1 above are merely examples and do not constitute a specific limitation on the recommendation rules of the embodiments of this application. In practical applications, the tablet computer can recommend other applications used for split-screen use with the first application according to various recommendation rules.

[0323] Figure 23 is a schematic diagram of the structure of an electronic device 2300 provided in an embodiment of this application. The electronic device 2300 can be a terminal device as described above, such as a tablet computer. As shown in Figure 23, the electronic device 2300 may include: one or more processors 2301; one or more memories 2302; a communication interface 2303; and one or more computer programs 2304. These devices can be connected via one or more communication buses 2305. The one or more computer programs 2304 are stored in the memory 2302 and configured to be executed by the one or more processors 2301. The one or more computer programs 2304 include instructions. For example, when the electronic device 2300 is a tablet computer as described above, the instructions can be used to perform the relevant steps of the tablet computer as described in the corresponding embodiments above. The communication interface 2303 is used to enable communication between the electronic device 2300 and other devices; for example, the communication interface can be a transceiver.

[0324] Based on the above, this application also provides a computer-readable storage medium storing instructions that, when executed, cause the method provided in any of the above-described method embodiments to be implemented. The computer-readable storage medium may include various media capable of storing program code, such as a USB flash drive, portable hard drive, read-only memory, random access memory, magnetic disk, or optical disk.

[0325] Based on the above, this application also provides a computer program product, which includes: a computer program (also referred to as code or instructions), which, when run on a computer, causes the computer to perform the method provided in any of the above method embodiments. Optionally, the computer can be a terminal device, such as a tablet computer.

[0326] Based on the above, this application also provides a chip for performing the methods provided in any of the above method embodiments. Optionally, the chip may be located in a terminal device (e.g., a tablet computer).

[0327] In the embodiments provided above, the methods provided by the present application are described from the perspective of an electronic device (e.g., a tablet computer) as the executing entity. To implement the functions of the methods provided in the embodiments of the present application, the electronic device may include hardware structures and / or software modules, implementing the above functions in the form of hardware structures, software modules, or a combination of hardware structures and software modules. Whether a particular function is implemented in the form of hardware structures, software modules, or a combination of hardware structures and software modules depends on the specific application and design constraints of the technical solution.

[0328] In the above embodiments, implementation can be achieved entirely or partially through software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented entirely or partially 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, all or part of the processes or functions described in the embodiments of the present invention are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid state disk (SSD)). Where there is no conflict, the solutions in the above embodiments can be used in combination.

[0329] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0330] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to this application. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in one or more blocks of the flowchart illustrations and / or one or more blocks of the block diagrams.

[0331] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means that implement the functions specified in one or more flowcharts and / or one or more block diagrams.

[0332] These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process, such that the instructions, which execute on the computer or other programmable apparatus, provide steps for implementing the functions specified in one or more flowcharts and / or one or more block diagrams.

[0333] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the scope and intent of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application is also intended to include such modifications and variations.

Claims

1. An interaction method, characterized in that, Applied to electronic devices, the method includes: Display a first display element, the first display element being displayed within the first window of the first application; The first animation effect is displayed, which is used to obtain the visual effect of the first display element transforming into a second display element. The second display element is used to enter the combined display mode, which is a mode in which the first window is combined with other windows.

2. The method according to claim 1, characterized in that, The first display element is located within the title bar of the first window.

3. The method according to claim 1 or 2, characterized in that, The first animation effect is used to achieve the visual effect of the first display element transforming into a second display element, including: The first sub-display element of the second display element is superimposed on the first display element; Display a first separation animation effect, which is used to achieve the visual effect of separating a second sub-display element from the first sub-display element.

4. The method according to claim 3, characterized in that, The first separation animation effect is used to achieve the visual effect of separating a second sub-display element from the first sub-display element, including: A second sub-display element is set below the first sub-display element, and the second sub-display element is completely covered by the first sub-display element; The second sub-display element gradually moves away from the first sub-display element, so that the second sub-display element is completely separated from the first sub-display element.

5. The method according to claim 3 or 4, characterized in that, The first separation animation is also used to obtain the visual effect of the second sub-display element and the first sub-display element going from sticking together to being completely separated.

6. The method according to claim 5, characterized in that, Both the second sub-display element and the first sub-display element have blurred edges, so that the second sub-display element and the first sub-display element appear to be stuck together before they are completely separated and only overlap at the edges.

7. The method according to any one of claims 3-6, characterized in that, The method further includes: During the display of the first separation animation, the size of the second sub-display element gradually increases until it is the same as the height of the first sub-display element.

8. The method according to any one of claims 3-7, characterized in that, The first sub-display element of the second display element is superimposed on the first display element, including: The first sub-display element is superimposed on the fourth sub-display element contained in the first display element, and the first sub-display element and the fourth sub-display element present the same visual effect.

9. The method according to claim 8, characterized in that, The method further includes: Before or during the first separation animation display, the first sub-display element gradually increases in size and completely covers all sub-display elements of the first display element.

10. The method according to claim 8 or 9, characterized in that, The fourth sub-display element is a capsule-shaped sub-display element among the first display elements.

11. The method according to any one of claims 3-10, characterized in that, The method further includes: Display a second separation animation effect, which is used to achieve the visual effect of separating a third sub-display element from the second sub-display element.

12. The method according to claim 11, characterized in that, The second separation animation is also used to achieve the visual effect of the third sub-display element and the second sub-display element going from sticking together to being completely separated.

13. The method according to claim 11 or 12, characterized in that, The method further includes: Before or during the second separation animation display, the size of the third sub-display element gradually increases until it is the same as the size of the second sub-display element.

14. The method according to any one of claims 3-13, characterized in that, The number of sub-display elements contained in the second display element is the same as the number of sub-display elements contained in the first display element.

15. The method according to claim 1, characterized in that, The first animation effect is used to achieve the visual effect of the first display element transforming into a second display element, including: A second display element is set below the first display element. The first display element gradually disappears, and the second display element gradually appears.

16. The method according to claim 15, characterized in that, The method further includes: The first display element and the second display element move synchronously from a first position to a second position, where the first position is the initial position of the first display element and the second position is the target position of the second display element; and / or, The first display element and the second display element are simultaneously adjusted from a first size to a second size, where the first size is the initial size of the first display element and the second size is the target size of the second display element.

17. The method according to claim 16, characterized in that, The duration from the initial appearance of the second display element to its full appearance is the first time period; The duration for the second display element to move from the first position to the second position is the second time period; The duration for which the second display element adjusts from the first size to the second size is a third time period, and the first time period, the second time period, and the third time period overlap.

18. The method according to claim 16 or 17, characterized in that, The method further includes: During the movement of the first and second display elements, the first window switches from a full-screen window to a floating window.

19. The method according to claim 18, characterized in that, The method further includes: The size of the floating window gradually decreases to the first size, and the second position is located outside the floating window of the first size.

20. The method according to any one of claims 1-19, characterized in that, The second display element includes a fifth sub-display element, which is used to indicate an application combination, the application combination including the first application and the second application, and the fifth sub-display element is used to enter a mode in which the first window and the second window of the second application are displayed together.

21. The method according to claim 20, characterized in that, The fifth sub-display element is used to enter a split-screen display mode where the first window and the second window are displayed in one window; or, The fifth sub-display element is used to enter the mode where the first window is tiled and the second window is displayed sideways.

22. The method according to claim 20 or 21, characterized in that, The application portfolio also includes a third application. The fifth sub-display element is used to enter a mode where the first window, second window, and third window are tiled; or, The fifth sub-display element is used to enter a mode where the first and second windows are displayed in a tiled manner, and the third window is displayed in a sideways manner. The third window is the window of the third application.

23. The method according to any one of claims 20-22, characterized in that, The second application is an application recommended by the electronic device according to recommendation rules, which is suitable for display in combination with the first application.

24. The method according to claim 23, characterized in that, The second display element further includes a sixth sub-display element, which is used to indicate the recommendation rule.

25. The method according to any one of claims 20-24, characterized in that, The second display element also includes at least one of the following: The seventh child display element is used to indicate the split-screen mode; The eighth child display element is used to suspend the first window in a floating display. The ninth child display element is used to display the first window in full screen. The tenth child display element is used to replace the first window with a window of another application; The eleventh child display element is used to add a window for another application to the display screen; The twelfth child display element is used to close the first window; The thirteenth child display element is used to temporarily store the contents of the first window; The fourteenth child display element is used to rearrange the first window with other windows.

26. The method according to any one of claims 1-25, characterized in that, The first animation effect is displayed, including: If an operation is received targeting the first display element, or if no operation targeting the first window is detected within a preset time period, then the first animation effect is displayed.

27. The method according to claim 19, characterized in that, The method further includes: In response to the operation of moving the first window toward the second display element, the first window is displayed according to a second animation form, which is used to obtain the visual effect of the first window entering the second display element; After the first window is displayed in accordance with the second animation effect, or during the display process, the desktop is displayed below the first window. The system receives an operation to open a fourth application from the desktop and enters a combined display mode, which is a combined display mode of the first window and the fourth window of the fourth application.

28. The method according to claim 27, characterized in that, Prior to receiving the operation of opening a fourth application from the desktop, the method further includes: The first window portion moves off the display screen.

29. The method according to claim 27 or 28, characterized in that, The first window is displayed according to the second animation effect, including: The first window is replaced with a first image, the shape of which is used to show the visual effect of the first image facing the second display element; The first image is moved toward a target position, which is located within the second display element; After the first image is moved to the target position, the first image is replaced by the first window.

30. The method according to claim 29, characterized in that, The first image is a preset image or a screenshot of the first window.

31. The method according to claim 29 or 30, characterized in that, As the first image moves toward the target location, the size of the first image gradually decreases.

32. The method according to any one of claims 29-31, characterized in that, The shape of the first image is used to demonstrate the visual effect of the first image facing the second display element, including: The lines connecting the edge feature points of the first image are matched with a first curve so that the shape of the first image is used to display the visual effect of the first image facing the second display element.

33. The method according to any one of claims 29-31, characterized in that, The shape of the first image is used to demonstrate the visual effect of the first image facing the second display element, including: The shape of the first image is related to a first direction from the first window to the second display element, so that the shape of the first image is used to display the visual effect of the first image facing the first direction.

34. The method according to any one of claims 29-33, characterized in that, The first image comprises a single frame, and the shape of the first image changes dynamically; or, The first image comprises multiple frames, each with a different shape, but the shape of each frame is used to achieve a visual effect oriented toward the second display element.

35. The method according to any one of claims 29-34, characterized in that, The method further includes: As the first window is displayed in accordance with the second animation effect, the display area of ​​the second display element gradually increases.

36. The method according to claim 35, characterized in that, The method further includes: After the first window is displayed in the form of the second animation, it occupies the entire display area of ​​the second display element.

37. An electronic device, characterized in that, Used to perform the method as described in any one of claims 1-36.

38. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store a computer program that, when run on a computer, causes the computer to perform the method as described in any one of claims 1 to 36.

39. A computer program product, characterized in that, Includes a computer program that, when run on a computer, causes the computer to perform the method as described in any one of claims 1 to 36.

Images