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

Abstract

An interaction method, an electronic device, a storage medium and a program product are used to provide a trigger method of a combined display mode, which is more interesting and helps to improve user experience. For example, the electronic device displays a first display element, the first display element is located in a first window of a first application; a first dynamic effect is displayed, the first dynamic effect is used to obtain a visual effect that the first display element is deformed into a second display element, the second display element is used to enter a combined display mode, and the combined display mode is a mode in which the first window and other windows are combined and displayed.

Description

Technical Field

[0001] 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

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

[0003] 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

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

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

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

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

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

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

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

[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 motion effect is also used to achieve the visual effect of the second sub-display element and the first sub-display element going from sticking together to being completely separated.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[0108] 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

[0109] Figure 1 A schematic diagram of the structure of an electronic device provided in an embodiment of this application;

[0110] Figure 2 Another structural schematic diagram of an electronic device provided in an embodiment of this application;

[0111] Figure 3 A schematic diagram illustrating the transformation of a first display element into a second display element according to an embodiment of this application;

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

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

[0114] Figure 6 Another example diagram of a second display element provided in an embodiment of this application;

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

[0116] Figure 8 Another example diagram of a second display element provided in an embodiment of this application;

[0117] Figure 9 Another example diagram of a second display element provided in an embodiment of this application;

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

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

[0120] Figure 12A An example diagram showing the transformation of a first display element into a second display element according to an embodiment of this application;

[0121] Figure 12B Another example diagram showing the transformation of a first display element into a second display element according to an embodiment of this application;

[0122] Figure 12C Another example diagram showing the transformation of a first display element into a second display element according to an embodiment of this application;

[0123] Figure 13A Example diagram of an application scenario provided in an embodiment of this application;

[0124] Figure 13B Another example diagram illustrating an application scenario provided in an embodiment of this application;

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

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

[0127] Figure 15B Another schematic diagram of the shape of the first image provided in an embodiment of this application;

[0128] Figure 16 Example diagram of another application scenario provided by one embodiment of this application;

[0129] Figure 17 Example diagram of another application scenario provided in an embodiment of this application;

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

[0131] Figure 18B A schematic diagram showing only edge overlap provided in an embodiment of this application;

[0132] Figure 18C A schematic diagram of a separation motion effect provided in an embodiment of this application;

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

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

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

[0136] Figure 22AA schematic diagram illustrating the automatic transformation of a first display element into a second display element according to an embodiment of this application;

[0137] Figure 22B A schematic diagram illustrating the manual transformation of a first display element into a second display element according to an embodiment of this application;

[0138] Figure 22C This is a schematic diagram illustrating the entry into a combined display mode according to an embodiment of this application;

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

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

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

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

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

[0144] The interaction method provided in this application can be applied to terminal devices. The terminal device can be any device with a display screen. For example, the 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.

[0145] Figure 1 A schematic diagram of an electronic device is shown. This electronic device may, for example, be the terminal device mentioned earlier. Figure 1As shown, 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, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor module 180, 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.

[0146] Processor 110 may include one or more processing units, such as application processors (APs), modem processors, graphics processing units (GPUs), image signal processors (ISPs), controllers, memory, video codecs, digital signal processors (DSPs), baseband processors, and / or neural network processing units (NPUs). 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 recurring. If processor 110 needs to reuse an 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[0184] Understandable, Figure 1 The components shown do not constitute a specific limitation on the electronic device. The electronic device in the embodiments of the present invention may include components such as... Figure 1 More or fewer parts. Furthermore, Figure 1 The combination / connection relationships between the components can also be adjusted and modified.

[0185] Figure 2 This is a software structure diagram of an electronic device provided in an embodiment of this application. The electronic device may, for example, be the terminal device mentioned above. Figure 2 As shown, the software architecture of an electronic device can be a layered structure. The layered architecture divides the software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. The layered architecture can be, for example, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture. This application embodiment 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.

[0186] like Figure 2 As shown, 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.

[0187] The application framework layer provides application programming interfaces (APIs) and a programming framework for applications in the application layer. The application framework layer includes some predefined functions. For example... Figure 2As shown, 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 the first display element transforming into a second display element; the specific implementation principle will be explained later. It should be noted that... Figure 2 Taking the first module and animation module located in the application framework layer as an example, optionally, the first module and / or animation module can also be located in other layers, such as the system library or kernel layer, without limitation. It is understandable that, although... Figure 2 Although not shown in the diagram, the application framework layer may also include content providers, view systems, call managers, resource managers, notification managers, etc. Content providers store and retrieve data, making this data accessible to the application. This data may include videos, images, audio, made and received calls, browsing history and bookmarks, phone books, etc. View systems include visual controls, such as controls for displaying text and controls for displaying images. View systems can be used to build applications. The display interface can consist of one or more views. For example, a display interface including a text notification icon may include views for displaying text and views for displaying images. The call manager provides communication functions for electronic devices, such as managing call status (including connection, hang-up, etc.). The resource manager provides the application with various resources, such as localized strings, icons, images, layout files, video files, etc. The notification manager allows the application to display notification information 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, the notification manager is used to notify of download completion, message alerts, etc. The notification manager can also display notifications 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 alert sounds, causing electronic devices to vibrate, and flashing indicator lights.

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

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

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

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

[0192] Understandable, Figure 2 The software structure shown does not constitute a specific limitation on the software structure of electronic devices. The software structure of the electronic devices in the embodiments of the present invention may include, but is not limited to, the following: Figure 2 More or fewer modules, for example, than Figure 2 More or fewer layers, or, a layer containing more than Figure 2 More or fewer modules, etc. Furthermore, Figure 2 The combination / connection relationships between modules can also be adjusted and modified.

[0193] Electronic devices have Figure 2 In the illustrated configuration, the processing flow of the electronic device may include: a first application in the application layer calling 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 a motion effect mode, causing the motion effect module to call the display driver to display a first motion effect on the display screen. The first motion 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 combined display mode of the first window and other windows.

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

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

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

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

[0198] For example, see Figure 3 Image (a) is a schematic diagram of a graphical user interface (GUI) for a tablet computer. For example, this GUI is the tablet computer's desktop (also known as 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. Figure 3 In (a), after the tablet receives an action on the icon of the first application, it displays as shown in (a). Figure 3 In (b) of the first application, there is a first window and a first display element, the display position of the first display element is located within the first window. The electronic device displays a first animation effect, the first animation effect is used to obtain the first display element deformed as shown in the image. Figure 3 The visual effect of the second display element shown in (c) is illustrated. The second display element is used to enter a combined display mode, which is a mode in which the first window is displayed in combination with other windows.

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

[0200] The first display element can be any pattern / style / shape / area, and this application does not limit this. As an example, please refer to... Figure 4This is an example of the first element to be displayed. For example... Figure 4 The first display element includes three sub-display elements: sub-display element a, sub-display element b, and sub-display element c. Sub-display elements a and c are located to the left and right of sub-display element b, and are identical to each other, ensuring symmetry of the first display element. For example, sub-display elements a and c are both dots, and sub-display element b is capsule-shaped. Optionally, the three sub-display elements can be the same or different colors, without limitation. It should be noted that... Figure 4 Taking the example of a first display element comprising three sub-display elements, in practical applications, the first display element may include more or fewer sub-display elements. Furthermore, the pattern / style / shape / area / position of each sub-display element is not limited.

[0201] In one possible implementation, the first display element is a component; for example, the component may be a row-type component, meaning that the sub-components contained within the component are displayed horizontally. For example, as... Figure 4 Sub-display elements a, b, and c can be three sub-components contained in the 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.

[0202] The first display element is positioned within the first window; that is, it is positioned within the display area occupied by the first window. For example, the first display element may be positioned at the top, bottom, left, or right of the first window. See also, as an example, further... Figure 4 The first display element is positioned at the top of the first window. Optionally, the first display element is positioned in the title bar of the first window, for example, in the middle of the title bar, 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 of the first window. Figure 4 When the first window is displayed in full screen, the first display element is positioned exactly within the tablet's status bar, for example, in the center of the status bar. The status bar includes information such as the tablet's battery level, time, and carrier information.

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

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

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

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

[0207] 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 discussed later. Figure 13A and Figure 13B The explanation is in the text below. The panoramic multi-window mode will be discussed later. Figure 16 The following will explain the floating mode. More details will be provided later. Figure 17 The explanation is as follows.

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

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

[0210] In this context, an application combination icon refers to a combination of multiple 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, as determined by the tablet computer based on recommendation rules. For example, if the tablet computer determines, based on 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 application and the second application. For example, such as... Figure 5The application combination icon is shown in (a) above. It should be noted that the application combination icon can be a combination of two application icons, three application icons, or more application icons. For example, if the tablet computer determines, based on recommendation rules, that the applications suitable for split-screen use with the first application include the second and third applications, then sub-display element 1 will display the application combination icons corresponding to the first, second, and third applications, for example, Figure 5 The application combination icon is shown in (b) of the image.

[0211] 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 inwards towards the inside of the electronic device's screen. Examples of sideways window display will be provided later. Figure 22C As described in the text.

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

[0213] Unlike app icons and app combo icons, split-screen icons may not contain app icons. For example, a split-screen icon could be like this: Figure 5 The icon shown in (c) is used in this method. 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 combined 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 combined 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. Regarding... Figure 5 The use of the split-screen icon shown in (c) will be discussed later. Figure 13A Detailed explanation follows.

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

[0215] (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... Figure 6 In the example (a), we see a sub-display element 2, which is used to indicate a split-screen layout. For example... Figure 6 (b) in the example is another instance of sub-display element 2, which is used to indicate vertical splitting. Using the Cosmic Cube as an example, for instance, as shown... Figure 6 (c) in the diagram is another example of sub-display element 2, used to indicate how the Cosmic Cube is displayed. It is understood that the three split-screen methods described above are merely examples; in practical applications, other split-screen methods may also be included, which will not be listed here.

[0216] (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, applications that were last used in split-screen with the first application, or applications that are frequently used in split-screen with the first application. For example, such as... Figure 7 (a) in the example is child display element 3, used to indicate the recommended rule for "last split-screen use". For example, as... Figure 7 (b) in the example is another instance of child display element 3, used to indicate the recommendation rule of "frequent split-screen use".

[0217] (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, as... Figure 8 (a) in the text is an example of displaying child element 4.

[0218] (4) Sub-display element 5, used to display the first window in fullscreen mode. For example, sub-display element 5 is used to trigger the fullscreen display of the first window. For example, as shown... Figure 8 (b) in the example is a child element 5.

[0219] (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, as... Figure 8 (c) in the text is an example of displaying child element 6.

[0220] (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, along with the first window, will be displayed on the screen. This can be a split-screen display or a non-split-screen display, without limitation. For example, ... Figure 8 (d) in the text is an example of displaying child element 7.

[0221] (7) Child display element 8, used to close the first window. For example, child display element 8 used to close the first window could be to switch the first application to the background or to exit the first application; there are no restrictions. For example, as... Figure 8 (e) in the text is an example of displaying child element 8.

[0222] (8) Sub-display element 9 is used to temporarily store the content 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), thus realizing the opening of multiple windows within the application. For example, as... Figure 8 (f) in the example is for displaying child element 9.

[0223] (9) Child display element 10, used to rearrange the first window with other windows. For example, child display element 10 is used to trigger the rearrangement of the first window with other windows, such as adjusting the display order. For example, as... Figure 8 (g) in the text is an example of a child element 10.

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

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

[0226] First example

[0227] 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).

[0228] For example, such as Figure 9 This is 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 used in split-screen mode." 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... Figure 9 In the second display element, the three sub-display elements are arranged from left to right as follows: sub-display element d, sub-display element e, and sub-display element f. However, this embodiment does not limit the order of the sub-display elements.

[0229] Second example

[0230] In this example, the second display element includes an application combo icon, and optionally, may also include sub-display elements indicating window pausing, window reordering, full-screen display, window replacement, window addition, and window closing. For example, see [link to relevant documentation]. Figure 10 This is another example of a second display element. The second display element comprises 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 rearrangement 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 closing sub-display elements. The function of each sub-display element has been described in detail above and will not be repeated here.

[0231] Third example

[0232] 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. See, for example, [link to example]. Figure 11 This is another example of a second display element. The second display element includes child display elements d, e, and f. Among them, child display element d is a split-screen icon; its function will be discussed later. Figure 13A The details are explained below. The child display element 'e' is a panoramic multi-window icon; its function will be discussed later. Figure 16The child display element f is used to indicate that the window is floating; the function of the child display element f will be explained later. Figure 17 The details are explained below. Therefore, unlike the first and second examples mentioned above, in the third example, the second display element does not contain app combo icons, so the tablet does not need to determine which apps are suitable for split-screen use with the first app based on recommendation rules.

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

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

[0235] As mentioned earlier, the second display element is obtained by transforming the first display element. For an example of the first type of second display element described earlier, please refer to [link to previous text]. Figure 12A This is an example of a first display element transforming into a second display element. For the second example of the second display element mentioned earlier, please refer to [link / reference needed]. Figure 12B This is another example of a first display element transforming into a second display element. For a third example of the second display element mentioned earlier, please refer to [link to previous text]. Figure 12C This is yet another example of a first display element transforming into a second display element.

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

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

[0238] First type of deformation

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

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

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

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

[0243] 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 discussed later. Figure 13A I will explain in detail.

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

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

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

[0247] Previous text Figure 12C For example, the first display element includes three sub-display elements, and the second display element 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 instance, 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.

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

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

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

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

[0252] Next, continue with Figure 12C Taking the transformation of the first display element into the second display element as an example, the complete process of entering the combined display mode is explained.

[0253] For example, see Figure 13A (a) The tablet displays a desktop, which includes an icon for the browser application. After receiving a gesture targeting the browser application icon, the tablet displays the following: Figure 13A (b) shows the first window of the browser application, which is displayed in full screen and includes a first display element. Figure 13A (b) After the tablet receives a swipe operation from the bottom of the display screen upwards (referred to as the first swipe operation), the first display element begins to deform. For example, the first display element transforms into a second display element using the first deformation method. For example, the second display element is placed below the first display element, the first display element gradually disappears (for example, the transparency of the first display element begins to increase), and the second display element gradually appears. Optionally, the first display element and the second display element 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 above and will not be repeated.

[0254] For example, such as 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. Figure 13A (d) The second display element becomes visible, while the first display element is completely transparent and visually invisible. For example... Figure 13A (e) The second display element is moved to the target position and its size is increased to the target size. For example, the three sub-display elements of the second display element are moved to their respective target positions and their sizes are adjusted to the corresponding target sizes.

[0255] Continue with Figure 13A (b) For 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, such as... 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 start time of the switching from a full-screen window to a floating window and the start 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. 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 all three sub-display elements of the second display element are located outside the first window. Optionally, the target position of the second display element can be a preset position outside the first window, which can be a system default setting.

[0256] like Figure 13A (f) The tablet receives an operation to move the first window toward the child display element d (referred to as the second swipe operation), the first window continues to shrink and move toward the child display element d.

[0257] In some embodiments, the first window may be displayed according to a second animation effect, which is used to obtain a visual effect of the first window entering a second display element (e.g., child 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, where the first image may be a screenshot of the first window or a preset image (e.g., a grayscale image), and the shape of the first image is used to demonstrate the visual effect of the first image facing the second display element (e.g., child display element d), such as... Figure 13B (a) The first image moves toward a target position, which is located inside a second display element (e.g., sub-display element d). Optionally, the size of the first image decreases continuously during the movement, such as... Figure 13B (b) After the first image is moved to the target position, it can be replaced by the first window, such as... Figure 13B (c). Optionally, after the first icon is moved to the target position, its shape can be restored first, and then the restored first image can be replaced with the first window; or, the first image can be restored, enlarged and filled with the entire display area of ​​the sub-display element d, and then replaced with the first window.

[0258] 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... Figure 13BIn (a) and (b), the display area of ​​the sub-display element d gradually increases. Optionally, during the process of increasing the display area of ​​the second display element, the display elements inside the second display element (e.g., sub-display element d) can be hidden. Hiding methods include blurring the display elements, making them transparent, or replacing the second display element containing display elements (e.g., sub-display element d) with a second display element that does not contain display elements (e.g., sub-display element d), etc. Optionally, after the display area of ​​the second display element (e.g., sub-display element d) increases, the first window can occupy the entire display area of ​​the second display element (e.g., sub-display element d), such as... Figure 13B (d)

[0259] Optional, such as Figure 13B (e) After the first window fills the entire display area of ​​the second display element (e.g., child display element d), a portion of the first window moves off the screen. Optionally, the desktop gradually appears before, after, or simultaneously with the first window being displayed according to the second animation effect. For example, as... Figure 13B In (a), the desktop begins to appear (not shown in the figure), in Figure 13B In (c), the desktop is fully displayed. Optionally, the start time when the desktop begins to appear may be equal to the start time when the first window is displayed in the form of the second animation, and / or the time when the desktop is fully displayed may be equal to the end time when the first window is displayed in the form of the second animation.

[0260] When the tablet receives a gesture targeting the icon of an in-desk instant messaging application (such as WeChat), it enters a combined display mode. For example... Figure 13B (f) In the 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).

[0261] Next, through Figure 14 ,illustrate Figure 13A and Figure 13B The implementation principle.

[0262] like Figure 14The tablet receives a first swipe-up operation, which can be a swipe up from the bottom of the display screen. In response to the first swipe-up operation, the tablet 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... Figure 13A The target positions and target sizes of the three sub-display elements in (e) can be... Figure 13A The target size of each of the three sub-display elements in (e) is respectively.

[0263] The goal is achieved after the first display element transforms into the second display element and the first window switches to a floating window. Figure 13A After the interface in (e), continue as follows Figure 14 The tablet receives a second swipe operation, which moves the first window toward a second display element (e.g., child display element d). The second swipe operation and the first swipe operation can be seamless (i.e., the user's finger does not leave the screen). For example, the second swipe operation could be... Figure 13A (f) The operation of sliding towards the child display element d. In response to the second sliding operation, the tablet continues to shrink the first window and moves towards the second display element, for example... Figure 13A In (f), the first window moves toward the child display element d.

[0264] like Figure 14 The first window is displayed according to the second animation effect to show 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 show the visual effect of the first image moving towards the second display element, for example... Figure 13B (a) shows the shape of the first image. The first image moves towards the target position, which is located within the second display element. Optionally, during the movement, the first image can be continuously reduced in size, such as... Figure 13B (b) After the first image is moved to the target position, it is replaced by the first window, such as... Figure 13B (c)

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

[0266] Optionally, the display area of ​​the second element gradually increases before, after, or simultaneously with the first window displaying the second animation. For example, Figure 13B In (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. 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 leaving the screen), then the display area of ​​the second display element gradually increases. Therefore, the starting time for 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, such as... Figure 13B (d)

[0267] As mentioned earlier, when the first window is displayed using the second animation effect, the first window needs to be replaced with the first image, and the shape of the first image is used to demonstrate the visual effect of the first image facing the second display element. For example, in the previous text... Figure 13B In (a), the shape of the first image shows a visual effect of being directed toward the sub-display element d, and the first image moves toward the target position (within the sub-display element d). The first image and its shape are described below.

[0268] 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 period, 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.

[0269] As one possible implementation, 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. For example, such as Figure 15A (a) Since the first direction from the first window to the second display element (e.g., child display element d) is upward to the left, the shape of the first image shows the effect of the first image facing upward to the left. Or, as Figure 15A (b) Since the first direction from the first window to the second display element (e.g., the sub-display element d) is the upper right, the shape of the first image shows the effect of the first image facing the upper right.

[0270] 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 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... Figure 15B (a) The first image includes 12 edge feature points, represented by black dots in the image. The display positions of the four feature points at the top edge, the four feature points at the bottom edge, the four feature points at the left edge, and the four feature points at the right edge can be set according to the first curve. For example, to form... Figure 15B The shape shown in (b), or, Figure 15B The shape shown in (c)

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

[0272] Taking a single image as an example, optionally, the first window can be directly replaced with the 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 show the visual effect of the first image facing the second display element, for example... Figure 15A or Figure 15BThe shape shown. Alternatively, the first window can be replaced with a first image that has 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 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 towards 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 Bézier function is parameter 1, the Bézier curve is curve 1, then the shape of the first image is adjusted to shape 1 based on curve 1; when the parameter of the Bézier function is parameter 2, the Bézier curve is curve 2, then the shape of the first image is adjusted to shape 2 based on curve 2, and so on.

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

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

[0275] For example, see Figure 16 In (a), the first display element has been transformed into the second display element. For example... Figure 16 In (b), the tablet computer detects an operation to move the first window toward the child display element e. The first window then continues to shrink and move toward the child display element e. Optionally, the first window can be displayed using a third motion effect to achieve the visual effect of the first window entering the child 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 child display element e, to show the visual effect of the first window moving toward the child display element e), such as... Figure 16 (c) The preset image moves to the target position, which is located in the sub-display element e, as shown. Figure 16(d) Optionally, the size can be continuously reduced during the preset image movement, such as... Figure 16 (c) and (d) in the example. After the preset image is moved to the target position, it is replaced by the first window, as shown in example. Figure 16 (e) in the text. Optionally, before, after, or simultaneously with the first window displaying the element in the form of the third animation, the display area of ​​the child element e gradually increases, such as... Figure 16 (c) and (d) in the text. Optionally, as the display area of ​​the sub-display element e increases, 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, such as... Figure 16 (f) in the text. Optional, such as... Figure 16 In step (g), the first window moves off-screen. After the tablet receives an action targeting the WeChat app icon on the desktop, it enters... Figure 16 The combined display mode shown in (h) includes the window of the WeChat application and the window of the browser application, wherein the window of the browser application is displayed sideways.

[0276] For example, see Figure 17 In (a), the first display element has been transformed into the second display element. For example... Figure 17 In (b), the tablet computer detects an operation to move the first window toward the child display element f. The first window then continues to shrink and move toward the child display element f. Optionally, the first window can be displayed according to a fourth motion effect, which is used to achieve the visual effect of the first window entering the child 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 child display element f, to show the visual effect of the first window moving toward the child display element f), such as... Figure 17 (c) The preset image moves to the target position, which is located in the sub-display element f, as shown. Figure 17 (d) Optionally, the size can be continuously reduced during the preset image movement, such as... Figure 17 (c) and (d) in the example. After the preset image is moved to the target position, it is replaced by the first window, as shown in example. Figure 17 (e) Optionally, before, after, or simultaneously with the first window displaying the third animation, the display area of ​​the child element f can gradually increase, such as... Figure 17 (c) and (d) in the example. Optionally, as the display area of ​​the child display element f increases, the display elements within the child display element f can be hidden. After the display area of ​​the child display element f increases, the first window can fill the entire display area of ​​the child display element f, such as... Figure 17 (f) in the example. Thus, the first window floats on the desktop. Figure 17 In step (f), after the tablet receives an action targeting the WeChat app icon on the desktop, it displays as shown below. Figure 17 The window shown in (g) is the WeChat application window, which is displayed in full screen, with the first window floating on top.

[0277] The second type of deformation

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

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

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

[0281] As mentioned earlier, both the first and second child elements have blurred edges. This section explains the edge blurring. Taking the first child element as an example, its edge blurring means that the transparency gradually increases from the edge of the first child element outwards; in other words, it becomes increasingly transparent from the edge outwards until it is completely transparent. For example, please see... Figure 18A The first child element is a sphere. The edges of the sphere are blurred, gradually becoming transparent from the solid white line outwards (in the direction of the arrow in the image) until it is completely transparent. Figure 18A The black dashed line in the middle represents the completely transparent area. In the embodiments of this application, Figure 18AThe portion from the solid white line to the dashed black line is called the blurred edge. It's important to note that there is a certain distance (or width, which is the width of the blurred edge) between the solid white line and the dashed black line. The size of this distance represents the rate at which the transparency increases; a larger distance indicates a gradual increase in transparency until complete transparency, while a smaller distance indicates a rapid increase in transparency until complete transparency. Figure 18A In the example where both the first and second child display elements are spheres, in practical applications, the first and second child display elements can also be other shapes without limitation.

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

[0283] Both the first and second child elements have blurred edges, allowing them to appear connected even when only their edges overlap before they are completely separated. "Only edge overlap" means that the first and second child elements only overlap at their edges, with no other overlap. For an example, please refer to [link to example]. Figure 18B The first and second child elements are both spheres with blurred edges, and the two spheres only overlap at their edges.

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

[0285] Taking the example where the first and second child display elements are two spheres (hereinafter referred to as fused spheres), as follows: Figure 18C (a) In this case, the first child element contains a second child element. The second child element is covered and therefore not visually visible. Optionally, in this case, the edges of both the first and second child elements are blurred. Figure 18C(b) The second child element moves away from the first child element, and the first and second child elements overlap (not just at the edges, but also in other parts), so the user visually perceives the two child elements as overlapping. As the second child element continues to move, as... Figure 18C (c) The second child element overlaps with the first child element only at the edges, creating a visual effect where the two child elements appear to be stuck together. For example... Figure 18C (d) The first and second child display elements do not overlap at all, i.e., they are completely separated. Optionally, as the second child display element moves, its size gradually increases until it becomes the same size as the first child display element. For example, see [link to example]. Figure 18C The second child element moves away from the first child element, and its size gradually increases until it matches the size of the first child element.

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

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

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

[0289] Specific Example 1

[0290] For example, see Figure 19In (a), 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... Figure 19 (b) to Figure 19 The process of (f) in the middle.

[0291] like Figure 19 In (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 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.

[0292] Continue as Figure 19 In (b), a fused sphere A (covered by the sub-display element d, hence represented by a dashed line in the diagram) 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.

[0293] Continue as Figure 19 In (b), a fused sphere B (represented by a dashed line in the diagram because it is covered) is placed below the middle pattern. The fused sphere B matches the right edge size 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.

[0294] like Figure 19 In (c), the size of the sub-display element a continues to increase, and the rate of increase is faster than the rate of increase 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. Optionally, molten sphere A and molten sphere B overlap.

[0295] like Figure 19 In (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.

[0296] Continue as Figure 19 In (d), a fusion sphere C is set under fusion sphere B (represented by a dashed line because it is covered). Fusion sphere C contains display elements, such as application combo 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 with it.

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

[0298] It should be noted that, Figure 19 In this context, the child display element d is the first child display element, and its lower layer is provided with a fusion sphere A. Optionally, in some other embodiments, the child display element d itself can be an elliptical fusion sphere, in which case, its lower layer does not need to be provided with a fusion sphere A. In this case, continuing with... Figure 19 Taking (b) as an example, the sub-display element b does not need to be transformed into the 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. 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.

[0299] Specific Example 2

[0300] For example, such as Figure 21 In (a), the first display element includes child display elements a, b, and 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 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.

[0301] like Figure 21In (b), the first child element contains a second child element, which is completely covered by the first child element, so the second child element is not visible to the naked eye. Figure 21 In (b) of the code, the second child element is represented by a dashed line. Optionally, the second child element and the first child element can be generated simultaneously (e.g., both can be superimposed on top of child element b, but the first child element is visible while the second child element is not); or, the first child element can appear first, and then the second child element can be set below the first child element. Optionally, the styles of the second child element and the first child element can be the same or different, without limitation. For example... Figure 21 In (a) of the example, the first child element and the second child element have different styles; the second child element is a sphere. Optionally, the height of the second child element can be lower than the height of the first child element.

[0302] like Figure 21 In step (c), after the first sub-display element is superimposed on top of the sub-display element b, the first sub-display element gradually enlarges and completely covers all the sub-elements of the first display element. For example, 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 contain 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.

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

[0304] like Figure 21 In (d), the lower layer of the second display element includes a third child display element. The second child display element is completely covered by the third child display element, so the third child display element is not visible to the naked eye. Figure 21 In section (d), the third child element is represented by a dashed line. Optionally, the third child element and the second child element can be generated at the same time. For example, when the first child element is overlaid on top of child element b, both the second and third child elements are already below the first child element. When the first separation animation is displayed, the third child element moves along with the second child element. Optionally, the styles of the third and second child elements can be the same or different; for example, both can be spheres. Assuming both the third and second child elements are spheres, the size of the third child element can be smaller than the size of the second child element.

[0305] Continue as Figure 21In section (d), a second separation animation effect is displayed, where the third child element gradually separates from the second child element. Optionally, the second separation animation effect is also used to achieve the visual effect of the third and second child elements moving from being stuck together to being completely separated. For example, both the third and second child 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 effect, the third child element gradually enlarges until it is the same size as the second child element. As the third child element gradually enlarges, its internal content is gradually revealed. For example, as shown... Figure 21 In (d), the third child display element includes the application combo icon. Optionally, the display process of the second separation animation can be synchronized or asynchronous with the display process of the second separation animation, without limitation.

[0306] It should be noted that, Figure 19 or Figure 20 The example shown uses two app icons positioned within two separate sub-display elements. Optionally, the two app icons can also be positioned within a single sub-display element, for example... Figure 21 In the example (a), only two child display elements are needed. Alternatively, you can use... Figure 21 As shown in (b) above, the recommendation rules and application combo icons are set within a single sub-display element.

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

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

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

[0310] The first type is automatic deformation.

[0311] For example, see Figure 22A (a) The tablet displays a desktop containing an icon for an instant messaging application (e.g., WeChat). Upon receiving an action on that icon, the tablet displays the following: Figure 22A (b) shows the first window of an instant messaging application (e.g., a chat window), which 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 follows: Figure 22A (c). The deformation principle can be found in the preceding text. Figure 19 or Figure 20 .like Figure 22A (c) The second display element includes sub-display elements d, e, and f. Sub-display element d indicates the recommendation rules, while 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 for the instant messaging application and the icon for the gallery application. The application combination icon corresponding to sub-display element f is a combination of the icon for the instant messaging application and the icon for the map application.

[0312] like Figure 22A (c) The tablet computer receives an operation on the sub-display element f and enters the combined display mode, such as... 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, with the location results of Hotel A displayed in the second window. One possible approach is... Figure 22AIn (b), before the tablet computer transforms the first display element into the second display element, it 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 an 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).

[0313] 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).

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

[0315] The second method is manual deformation.

[0316] For example, see Figure 22B (a) The tablet displays a desktop containing an icon for an instant messaging application (e.g., WeChat). Upon receiving an action on that icon, the tablet displays the following: Figure 22B (b) shows a first window (e.g., a chat window) of an instant messaging application, which 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, such as... Figure 22B (c). The deformation principle can be found in the preceding text. Figure 19 or Figure 20 .like Figure 22B(c) The second display element includes sub-display element d, sub-display element e, and sub-display element f. After receiving an operation on sub-display element f, the tablet computer enters a combined display mode, such as... Figure 22B (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, with the location result of restaurant A displayed in the second window. One possible approach is... Figure 22B In (b), after receiving an operation on the first display element, the tablet computer 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 tablet computer launches the map application and searches for the address information (e.g., restaurant A) within the map application to display the location result of the address information (e.g., restaurant A).

[0317] The above embodiments primarily use the example of an application combination icon being a combination of icons from two applications. As mentioned earlier, an application combination icon could also be a combination of icons from three applications. For example, please refer to... Figure 22C (a) The sub-display element f is a combination of icons for three applications. After receiving an operation on the sub-display element f, the tablet enters the following state: Figure 22C (b) shows a combined display mode in which two application windows are tiled and the window of another application is displayed sideways. For example, the windows of the WeChat application and the Maps application are tiled, and the window of the Browser application is displayed sideways.

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

[0319] Table 1: Recommendation Rules

[0320]

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

[0322] Figure 23 This is a schematic diagram of the structure of the 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. Figure 23As shown, 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 components 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 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 may be a transceiver.

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

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

[0325] 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).

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

[0327] 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 as 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 combined.

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

[0329] 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, generate instructions for implementing the flowchart illustrations. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0330] 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, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0331] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0332] 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