A display method and related device

Abstract

The application discloses a display method and device. An electronic device displays a portrait page including a portrait video playing window, and a picture of a first video is displayed in the portrait video playing window. The electronic device can receive a portrait landscape switching input, and in response to the input, intercept and display an image of the portrait page. The electronic device can display a switching animation of switching the picture of the first video from the portrait video playing window to a landscape video playing window through rotation, movement and magnification on the image of the portrait page. The electronic device can display a landscape page including the landscape video playing window when the switching animation ends. In this way, the electronic device can provide a smooth and beautiful portrait landscape switching animation for an application supporting a video playing function.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to a display method and related apparatus. Background Technology

[0002] Currently, the playback state of electronic devices varies depending on how the user holds the device. When the user holds the device vertically, it's in portrait mode, playing the video on half the screen with the playback window at the top. When the user holds the device horizontally, it's in landscape mode, playing the video in full screen with the playback window occupying the entire display. Because users may switch playback modes at any time during playback—for example, from landscape to portrait or vice versa—the fading out of the previous screen and the fading in of the next screen during these transitions can cause overlap between the portrait and landscape views. Figure 1 As shown, during the switching between landscape and portrait modes in the video, the landscape playback page 101 and the portrait playback page 102 overlap, resulting in an unnatural switching effect and a poor user experience. Summary of the Invention

[0003] This application provides a display method and related apparatus, enabling an electronic device to display a portrait-oriented page including a portrait video playback window, where the portrait video playback window displays a first video frame. The electronic device can receive input for switching between portrait and landscape modes, and in response to this input, capture an image of the portrait-oriented page to obtain a first background layer. The electronic device can display the first background layer and display a switching animation on the first background layer that switches a first rotating layer, including the first video frame, from the portrait-oriented video playback window to a landscape-oriented video playback window. When the switching animation ends, the electronic device can display a landscape-oriented page including a landscape video playback window, where the portrait video playback window displays the first video frame, and the first rotating layer is either the transformed landscape-oriented page or a screenshot of the portrait-oriented video playback window.

[0004] It also implements a feature where, when an electronic device displays a landscape page including a landscape video playback window, it can receive input for landscape / portrait switching. In response to this input, a second background layer is displayed, and a switching animation is shown on the second background layer, switching a second rotating layer containing the first video frame from the landscape video playback window to a portrait video playback window. When the switching animation ends, the electronic device can display a portrait page including a portrait video playback window. The second background layer can be a portrait page and the second rotating layer can be a screenshot of the landscape page; alternatively, the second background layer can be an image of the portrait page and the second rotating layer can be a transformed portrait page.

[0005] In this way, electronic devices can provide smooth and aesthetically pleasing screen orientation switching animations for applications that support video playback.

[0006] In a first aspect, this application provides a display method, comprising: an electronic device displaying a first page, wherein a first window is displayed in a first area of ​​the first page, and a first video image is displayed in the first window; the electronic device receiving a first input to switch the electronic device from a portrait display state to a landscape display state; after receiving the first input, the electronic device displaying a first background layer, the first background layer including a screenshot of the first page; the electronic device suspending a first rotating layer on the first background layer and switching the first rotating layer from the first area to a second area of ​​a second page; wherein the second area of ​​the second page displays the first window, the orientation of the first video image on the second page is different from the orientation of the first video image on the first page, the first rotating layer including the first video image, and the orientation of the first video image when the first rotating layer is displayed in the second area is different from the orientation of the first video image when the first rotating layer is displayed in the first area; and after the first rotating layer is switched to the second area, the electronic device displays the second page.

[0007] In this way, during the transition from portrait to landscape mode, the electronic device uses the portrait page as the background layer and rotates, scales, and translates the rotating layer containing the first video frame, resulting in a rotating layer with the same size, position, and video orientation as the landscape page. Throughout the transition, the electronic device avoids a direct shift from portrait to landscape mode, and there is no overlap between the portrait and landscape pages, resulting in a smoother and more fluid transition and improved user experience. Furthermore, since the electronic device only rotates, scales, and translates the rotating layer, if a status bar is displayed at the top of the screen (not included in the rotating layer), the status bar will not rotate with the rotating layer, making the animation of switching from portrait to landscape mode more aesthetically pleasing.

[0008] In one possible implementation, switching the first rotated layer from the first area to the second area of ​​the second page specifically includes: rotating, translating, and zooming the first rotated layer from the first area to the second area.

[0009] In this way, the electronic device can display the entire process of rotating, translating, and zooming the first rotating layer, giving the user the visual experience of a vertical video playback window on a vertical screen changing to a horizontal screen, making the switching process smoother and more fluid.

[0010] In one possible implementation, when the electronic device displays the first background layer, the method further includes:

[0011] The first occlusion layer is floated in the first background layer at the display position of the first window. The first occlusion layer has the same size as the first window. The first occlusion layer is a preset image. The first occlusion layer is occluded by the first rotated layer.

[0012] In this way, during the process of switching the display of the first rotating layer from the first area to the second area, the image of the first video in the first background layer is obscured by the first occluding layer. The user cannot see the image of the first video in the first background layer, and two images of the first video will not appear on the display screen of the electronic device at the same time. This gives the user the visual experience of the vertical video playback window of a vertical page changing to a horizontal page, making the switching process smoother and more fluid.

[0013] Optionally, the first occluding layer is completely occluded by the first rotating layer when the first rotating layer is displayed in the first or second area. During the process of the first rotating layer switching its display to the second area, the first occluding layer is partially occluded by the first rotating layer for a portion of the time and completely occluded by the first rotating layer for another portion of the time.

[0014] In one possible implementation, when the electronic device displays the first background layer, the method further includes:

[0015] The electronic device draws the second page;

[0016] The electronic device obtains the size and position of the first window of the first page based on the layer information of the first page and the layer information of the second page. The size of the first window of the first page is the same as the size of the first area, and the position of the first window of the first page is the same as the position of the first area.

[0017] The electronic device rotates, translates, and shrinks the second page to obtain a transformed second page that has the same size and position as the first area and the same orientation as the first video in the first window of the first page. The first rotated layer is the transformed second page; or...

[0018] The electronic device acquires an image of the first window in a screenshot of the first page based on the size and position of the first window of the first page, and the first rotating layer is the image of the first window of the first page.

[0019] In this way, since the electronic device cannot split the first page or the second page to obtain a separate first window, it can compare the layer information of the first page and the second page to determine the position and size of the first window on the first page. Based on the position and size of the first window, the electronic device can capture the image of the first window from a screenshot of the first page to obtain a rotated layer, or, based on the position and size of the first window, the electronic device can transform the second page to obtain a rotated layer. If the first rotated layer is the transformed second page, since the second page continuously plays the first video during the screen orientation switch, there will be no situation where part of the first video is skipped.

[0020] Understandably, the electronic device can draw the second page in the background and then not display it after it's finished, or it can display the second page below the first background layer. Since the electronic device can only display one layer containing the first window showing the first video, the first page no longer exists when the electronic device is drawing the second page. The electronic device can begin drawing the second page only when the first background layer is displayed, avoiding the situation where the second page is displayed immediately after the first page is canceled.

[0021] In one possible implementation, the electronic device obtains the size and position of the first window based on the layer information of the first page and the layer information of the second page, specifically including:

[0022] Get the layer information of the first page. The layer information of the first page includes the view information of one or more views of the first page. The one or more views of the first page include the first window. The view information includes the view name, the parent view name, the view area parameters, and the view hierarchy.

[0023] Get the layer information of the second page. The layer information of the second page includes the view information of one or more views of the second page. The one or more views of the second page include the first window. The view information includes the view name, the parent view name, the view area parameters, and the view hierarchy.

[0024] Based on the layer information of the first page and the layer information of the second page, the first window of the first page and the first window of the second page are determined. The view area parameters of the first window of the first page include the position and size of the first window of the first page. The view names of the first window of the first page and the first window of the second page are the same and the parent view names are the same. The first window of the first page has the highest view level in the first page and the first window of the second page has the highest view level in the second page.

[0025] In this way, electronic devices can obtain the position and size of the first window of the first page by acquiring the layer information of the first page and the layer information of the second page.

[0026] In one possible implementation, the first window of the first page and the first window of the second page have the same view name, different view areas, the same parent view name, and the first window of the first page has the highest view hierarchy on the first page, as does the first window of the second page. This allows the electronic device to determine whether the view areas of the first window of the first page and the first window of the second page are the same when obtaining the size and position of the first window of the first page. If the view areas of the first window of the first page and the first window of the second page are the same, the electronic device may not execute the display method provided in this embodiment. If the view areas of the first window of the first page and the first window of the second page are different, the electronic device can execute the display method provided in this embodiment. If the view areas of the first window of the first page and the first window of the second page are the same, the first rotation layer switching process is relatively rapid. The electronic device only obtains the view area of ​​the first window of the first page that differs from the first window of the second page, resulting in a smoother switching animation.

[0027] Optionally, a progress bar or similar control can be displayed in the first window of the first page. Optionally, a progress bar or similar control can be displayed in the first window of the second page.

[0028] It should be noted that if the first rotating layer is obtained based on the second page, when the first rotating layer switches to the second area, the second page displayed on the electronic device is the first rotating layer that has switched to the second area.

[0029] It should also be noted that when the first rotated layer switches to the second area, the electronic device will de-display the first background layer. If a first obscuring layer exists, the electronic device will also de-display the first obscuring layer when the first rotated layer switches to the second area.

[0030] In one possible implementation, after the electronic device displays the second page, the method further includes:

[0031] The electronic device receives a second input from the user, indicating that the electronic device should switch from landscape mode to portrait mode.

[0032] In response to the second input, the electronic device displays a second background layer and hovers the second rotating layer at the display position of the second background layer. The second background layer includes a third page, and a first window is displayed in a third area of ​​the third page. The third area is the same as the first area.

[0033] The electronic device switches the display of the second rotating layer from the second area to the third area. The second rotating layer includes the image of the first video. When the second rotating layer is displayed in the third area, the orientation of the image of the first video is different from the orientation of the image of the first video when the second rotating layer is displayed in the second area.

[0034] When the second rotating layer switches to the third area, the electronic device displays the third page.

[0035] In this way, during the transition from landscape to portrait mode, the electronic device uses the portrait page as the background layer and rotates, scales, and translates the rotation layer containing the first video frame, resulting in a rotation layer with the same size, position, and orientation as the portrait video playback window on the portrait page. Throughout the transition, the electronic device avoids a direct shift from landscape to portrait mode, and there is no overlap between the landscape and portrait pages, resulting in a smoother and more fluid transition and improved user experience. Furthermore, since the electronic device only rotates, scales, and translates the rotation layer, if a status bar is displayed at the top of the screen (not included in the rotation layer), the status bar will not rotate with the rotation layer, making the animation of switching from landscape to portrait mode more aesthetically pleasing.

[0036] In one possible implementation, the electronic device switches the display of the second rotating layer from the second region to the third region, specifically including:

[0037] The second rotated layer is rotated, translated, and scaled down to switch its display from the second area to the third area.

[0038] In this way, the electronic device can display the entire process of the second rotating layer rotating, translating, and shrinking, giving the user the visual experience of a landscape video playback window changing from a landscape page to a portrait video playback window, making the switching process smoother and more fluid.

[0039] In one possible implementation, the electronic device displays a second background layer and hovers the second rotated layer at the display position of the second background layer, specifically including:

[0040] In response to the second input, capture and display the image of the second page;

[0041] The image on the second page is displayed floating above the second background layer; the image on the second page is the second rotated layer.

[0042] By using a screenshot from the second page as the second rotating layer, the power consumption of compositing the switching animation can be reduced while making the transition animation smoother and more fluid.

[0043] It should be noted that displaying the image on the second page above the second background layer can be understood as displaying the second background layer below the image on the second page.

[0044] In some embodiments, the electronic device responds to the second input, captures and displays an image of the second page, and draws a third page, displaying the third page as a second background layer below the image of the second page. The image of the second page is thus the second rotating layer.

[0045] In one possible implementation, after the electronic device receives the second input, the method further includes:

[0046] In response to the second input, capture and display the image of the second page;

[0047] Before the second rotating layer is displayed in the position of the second background layer, the image of the second page is de-displayed. The second rotating layer includes an image of the first window of the third page captured at a first frequency.

[0048] In this way, using a screenshot of the first window of the third page captured at the first frequency as the second rotating layer can avoid the situation where, during the switching process, the first video in the second rotating layer remains unchanged, but the first video on the second page and the third page differs before and after the switch. For example, the electronic device sets the second rotating layer (and the second occlusion layer) to an invisible (or transparent) state, captures the image of the first window of the third page, and then sets the second rotating layer (and the second occlusion layer) to a visible (or opaque) state after capturing. Another example is that the electronic device directly acquires the image of the third page, for example, from a hardware mixing renderer, and then captures the image of the first window of the third page based on its position and size.

[0049] In one possible implementation, when displaying the second background layer and hovering the second rotated layer at the display position of the second background layer, the method further includes:

[0050] The second occlusion layer is floated in the display position of the third window within the second background layer. The second occlusion layer and the third window have the same size. The second occlusion layer is a preset image and is occluded by the second rotated layer.

[0051] In this way, the electronic device can display the entire process of the second rotating layer rotating, translating, and shrinking, giving the user the visual experience of a landscape video playback window changing from a landscape page to a portrait video playback window, making the switching process smoother and more fluid. Optionally, when the second rotating layer is displayed in the second or third area, the second obscuring layer is completely obscured by the second rotating layer. During the process of the second rotating layer switching to display in the third area, the second obscuring layer is partially obscured by the second rotating layer for a period of time, and completely obscured by the second rotating layer for another period of time.

[0052] Understandably, after switching the display of the second rotating layer to the third area, the electronic device can de-display the second rotating layer, allowing the second background layer to appear on the screen. If the electronic device has a second obscuring layer, after switching the display of the second rotating layer to the third area, it can de-display the second obscuring layer, allowing the first video image of the second background layer to appear on the screen. When the electronic device de-displays the second rotating layer, the second page displayed by the electronic device at this time is the second background layer.

[0053] In one possible implementation, after the electronic device displays the second page, the method further includes:

[0054] The electronic device receives a third input from the user, indicating that the electronic device should be switched from landscape mode to portrait mode;

[0055] In response to the third input, the electronic device displays a third background layer and hovers the third rotating layer at the display position of the third background layer. The third background layer includes a screenshot of the third page, and the third area of ​​the third page displays the first window. The third area is the same as the first area.

[0056] The electronic device switches the display of the third rotating layer from the second area to the third area. The third rotating layer includes the image of the first video. When the third rotating layer is displayed in the third area, the orientation of the image of the first video is different from the orientation of the image of the first video when the third rotating layer is displayed in the second area.

[0057] When the third rotating layer switches to the third area, the electronic device displays the third page.

[0058] It is understandable that the third region being the same as the first region means that the third region and the first region have the same size and position.

[0059] In one possible implementation, before the electronic device displays the third background layer, the method further includes: the electronic device capturing and displaying an image of the second page; the electronic device drawing the third page; and the electronic device capturing an image of the third page to obtain the third background layer.

[0060] Based on the layer information of the second page and the layer information of the third page, obtain the size and position of the third window. The size and position of the third window are the same as the size and position of the third area.

[0061] The electronic device rotates, translates, and zooms in on the third page to obtain a third rotated layer. The first window in the third rotated layer has the same size as the first window of the second page. The orientation of the first video in the third rotated layer is the same as the orientation of the first video in the second page. The position of the first window in the third rotated layer is the same as the position of the first window in the second page.

[0062] The electronic device cancels the display of the image on the second page.

[0063] By using the third page as the third rotating layer, we can avoid the situation where the first video in the third rotating layer remains unchanged during the switching process, but the first video on the second page and the third page are different before and after the switching.

[0064] In one possible implementation, the electronic device switches the display of the third rotating layer from the second region to the third region, specifically including: the electronic device not displaying the part of the third rotating layer other than the third window; the electronic device switching the display of the third window of the third rotating layer from the second region to the third region by rotating, translating and shrinking operations; when the electronic device switches the display of the third window of the third rotating layer from the second region to the third region, the part of the third rotating layer other than the third window is displayed.

[0065] This avoids the situation where, during the transition animation, the portion of the third selection layer other than the first window is displayed on the screen, resulting in two vertical screens being shown, making the transition process more aesthetically pleasing.

[0066] In one possible implementation, when the electronic device displays a third background layer and the third rotated layer is hovered at the display position of the third background layer, the method further includes:

[0067] The third occlusion layer is floated in the background layer at the display position of the third window. The third occlusion layer has the same size as the third window. The third occlusion layer is a preset image. The third occlusion layer is occluded by the second rotated layer.

[0068] In this way, during the process of switching the display of the second rotating layer from the second area to the third area, the image of the first video in the second background layer is obscured by the second occlusion layer, and the user cannot see the image of the first video in the second background layer. The screen of the electronic device will not display two images of the first video at the same time, making the switching process smoother and more fluid.

[0069] Optionally, when the second rotating layer is displayed in the second or third area, the second occluding layer is completely occluded by the second rotating layer. During the process of the second rotating layer switching to display in the third area, the second occluding layer is partially occluded by the second rotating layer for a certain period of time, and completely occluded by the second rotating layer for another period of time.

[0070] In one possible implementation, the first window includes a first control, and the first input is an input to the first control; or, the first input is an input to rotate the electronic device clockwise or counterclockwise by an angle to a first angle, and / or, the first input is an input to rotate the electronic device by an acceleration to a first acceleration.

[0071] In this way, electronic devices can receive various inputs and perform landscape / portrait switching operations, making them suitable for more application scenarios. For example, if a user only has one hand holding the electronic device, they can trigger the landscape / portrait switching operation by rotating the device.

[0072] In one possible implementation, the size of the second area is the same as the size of the electronic device's display screen. This allows the electronic device to determine the size and position of the second area without needing to obtain the position and size of the first window of the second page.

[0073] In one possible implementation, after receiving input to switch between portrait and landscape orientations, the electronic device can instruct its portrait / landscape orientation switching unit to perform a screen orientation switching operation. This operation includes the steps performed by the electronic device in any of the aforementioned possible implementations. This screen orientation switching unit belongs to the application framework layer of the electronic device. The screen orientation switching unit and the first application are different modules of the electronic device; the screen orientation switching unit is not part of the first application, and the first application is not part of the screen orientation switching unit. The first application is the application that provides the display content for the first, second, and third pages.

[0074] In this way, any application installed on the electronic device that supports video playback can obtain the landscape / portrait switching animation synthesized by the landscape / portrait switching unit. That is, even if an application doesn't have a landscape / portrait switching animation set, when the electronic device receives a landscape / portrait switching operation for an application without such an animation, it can directly obtain a smooth, aesthetically pleasing switching animation through the landscape / portrait switching unit. The electronic device can then play this animation without any overlap between landscape and portrait pages. Furthermore, because the electronic device's landscape / portrait switching unit can provide the same switching animation style to all applications, it avoids inconsistent switching animations between different applications, preventing a poor user experience.

[0075] In some embodiments, the screen orientation switching unit of the electronic device is divided into a window management module, a page composition module, a screen rotation module, and an animation module. The window management module is used to acquire screenshots, the page composition module is used to compose the first and third pages, and the animation module is used to compose the switching animation. The screen rotation module is used to schedule the page composition module and the animation module, and also to transmit data between the window management module, the animation module, and the page composition module. In this way, by cooperating between different modules to compose the screen orientation switching animation, the electronic device can delegate some of the operations for composing the screen orientation switching animation to its original modules, making reasonable use of the resources provided by the electronic device and avoiding the deployment of multiple modules with the same function on the electronic device.

[0076] Secondly, this application provides another display method, including:

[0077] The electronic device displays the fourth page, and the fourth area of ​​the fourth page displays the first window, which in turn displays the first video feed.

[0078] The electronic device receives a fourth input that switches the electronic device from landscape display mode to portrait display mode;

[0079] In response to the fourth input, the electronic device displays a fourth background layer and floats the fourth rotating layer at the display position of the fourth background layer. The fourth background layer includes a fifth page, and the fifth area of ​​the fifth page displays a first window. The orientation of the first video on the fifth page is different from the orientation of the first video on the fourth page.

[0080] The animation module of the electronic device switches the display of the fourth rotating layer from the fourth area to the fifth area. The fourth rotating layer includes the image of the first video. When the fourth rotating layer is displayed in the fifth area, the orientation of the image of the first video is different from the orientation of the image of the first video when the fourth rotating layer is displayed in the fourth area.

[0081] After the fourth rotating layer switches to the fifth area, the electronic device displays the fifth page.

[0082] In this way, during the process of switching from landscape to portrait display, the electronic device can use the portrait page as the background layer and rotate, shrink, and translate the rotation layer containing the first video image to obtain a rotation layer with the same size, position, and image orientation as the portrait video playback window on the portrait page.

[0083] In one possible implementation, the electronic device switches the display of the fourth rotated layer from the fourth region to the fifth region, specifically by rotating, translating, and scaling the fourth rotated layer to switch its display from the fourth region to the fifth region.

[0084] In this way, electronic devices can display the entire process of the fourth rotating layer rotating, translating, and shrinking, giving users the visual experience of a landscape video playback window changing from a landscape page to a portrait video playback window, making the switching process smoother and more fluid.

[0085] In one possible implementation, the electronic device displays a fourth background layer and hovers the fourth rotated layer at the display position of the fourth background layer, specifically including:

[0086] In response to the fourth input, capture and display a screenshot of the fourth page;

[0087] The screenshot of the fourth page is displayed floating above the fourth background layer; the screenshot of the fourth page is the fourth rotated layer.

[0088] By using a screenshot from the fourth page as the fourth rotating layer, the power consumption of compositing the transition animation can be reduced while making the transition animation smoother and more fluid.

[0089] It should be noted that displaying the image of the fourth page above the fourth background layer can be understood as displaying the fourth background layer below the image of the fourth page. In some embodiments, the electronic device responds to the fourth input, captures and displays the image of the fourth page, and then draws the fifth page, displaying it as the fourth background layer below the image of the fourth page. The image of the fourth page is thus the fourth rotating layer.

[0090] In one possible implementation, after the electronic device receives the fourth input, the method further includes:

[0091] In response to the fourth input, capture and display a screenshot of the fourth page;

[0092] Before the fourth rotating layer is displayed in the position of the fourth background layer, the screenshot of the fourth page is canceled. The fourth rotating layer includes a screenshot of the first window of the fifth page taken at the first frequency.

[0093] For example, the electronic device sets the fourth rotation layer (and the fourth occlusion layer) to an invisible (or transparent) state, captures an image of the first window of the third page, and then sets the fourth rotation layer (and the fourth occlusion layer) to a visible (or opaque) state after capturing. As another example, the electronic device directly acquires an image of the fifth page, for instance, from a hardware hybrid renderer, and then captures an image of the first window of the fifth page based on its position and size.

[0094] In one possible implementation, when displaying the fourth background layer and hovering the fourth rotated layer at the display position of the fourth background layer, the method further includes:

[0095] The fourth occlusion layer is displayed floating in the first window's display position within the fourth background layer. The fourth occlusion layer has the same size as the first window, and it is a preset image. The fourth occlusion layer is occluded by the fourth rotated layer.

[0096] In this way, the electronic device can display the entire process of the fourth rotating layer rotating, translating, and shrinking, giving the user the visual experience of a landscape video playback window changing from a landscape page to a portrait video playback window, making the switching process smoother and more fluid. Optionally, the fourth obscuring layer is completely obscured by the fourth rotating layer when the fourth rotating layer is displayed in the fourth or fifth area. During the process of the fourth rotating layer switching to the fifth area, the fourth obscuring layer is partially obscured by the fourth rotating layer for part of the time and completely obscured by the fourth rotating layer for another part of the time.

[0097] Understandably, after switching the display of the fourth rotating layer to the fifth area, the electronic device can de-display the fourth rotating layer, allowing the fourth background layer to appear on the screen. If the electronic device has a fourth obscuring layer, after switching the display of the fourth rotating layer to the fifth area, it can de-display the fourth obscuring layer, allowing the first video image of the fourth background layer to appear on the screen. When the electronic device de-displays the fourth rotating layer, the fourth page displayed by the electronic device at this time is the fourth background layer.

[0098] In one possible implementation, after the electronic device displays the fifth page, the method further includes:

[0099] The electronic device receives a fifth input from the user, switching the electronic device from portrait to landscape display mode;

[0100] After receiving the fifth input, the electronic device displays the fifth background layer and floats the fifth rotating layer on top of the fifth background layer. The fifth background layer includes a screenshot of the fifth page.

[0101] The electronic device switches the display of the fifth rotating layer from the fifth area to the sixth area of ​​the sixth page. The sixth area of ​​the sixth page is used to display the first window. The sixth area is the same as the fourth area. The fifth rotating layer includes the image of the first video. When the fifth rotating layer is displayed in the sixth area, the orientation of the image of the first video is different from the orientation of the image of the first video when the fifth rotating layer is displayed in the fifth area.

[0102] When the fifth rotating layer switches to the sixth area, the electronic device displays the sixth page.

[0103] It is understandable that the sixth region being the same as the fourth region means that the sixth region and the fourth region have the same size and position.

[0104] In this way, after switching from landscape to portrait mode, the electronic device can receive user input to switch between landscape and portrait modes, and then switch back to landscape mode. Whether switching from landscape to portrait or vice versa, the transition animation is similar, using the portrait page content as the background and the first video frame as a rotating layer, resulting in a consistent and aesthetically pleasing display.

[0105] In one possible implementation, the fifth rotating layer is switched from the fifth region to the sixth region of the sixth page, specifically including:

[0106] The fifth rotating layer is rotated, translated, and zoomed in to switch its display from the fifth area to the sixth area.

[0107] In one possible implementation, when the electronic device displays the fifth background layer, the method further includes:

[0108] The fifth occlusion layer is displayed floating in the first window's display position within the fifth background layer. The fifth occlusion layer has the same size as the first window, and it is a preset image. The fifth occlusion layer is occluded by the fifth rotated layer.

[0109] In one possible implementation, when the electronic device displays the fifth background layer, the method further includes:

[0110] The electronic device draws the sixth page; based on the layer information of the fifth page and the layer information of the sixth page, the electronic device obtains the size and position of the first window of the fifth page. The size of the first window of the fifth page is the same as the size of the fifth area, and the position of the first window of the fifth page is the same as the position of the fifth area.

[0111] The electronic device rotates, translates, and shrinks the sixth page to obtain a transformed sixth page that has the same size and position as the fifth area and the same orientation as the first video in the first window of the fifth page. The fifth rotated layer is the transformed sixth page; or,

[0112] The electronic device acquires the image of the first window of the fifth page based on the size and position of the first window of the fifth page, and the fifth rotating layer is the image of the first window of the fifth page.

[0113] In one possible implementation, after receiving a screen orientation change input, the electronic device can instruct its screen orientation change unit to perform a screen orientation change operation. This operation includes the steps performed by the electronic device in any of the possible implementations described above. This screen orientation change unit belongs to the application framework layer of the electronic device. The screen orientation change unit and the first application are different modules of the electronic device; the screen orientation change unit is not part of the first application, and the first application is not part of the screen orientation change unit. The first application is the application that provides the display content for the fourth, fifth, and sixth pages.

[0114] In this way, any application installed on the electronic device that supports video playback can obtain the landscape / portrait switching animation synthesized by the landscape / portrait switching unit. That is, even if an application doesn't have a landscape / portrait switching animation set, when the electronic device receives a landscape / portrait switching operation for an application without such an animation, it can directly obtain a smooth, aesthetically pleasing switching animation through the landscape / portrait switching unit. The electronic device can then play this animation without any overlap between landscape and portrait pages. Furthermore, because the electronic device's landscape / portrait switching unit can provide the same switching animation style to all applications, it avoids inconsistent switching animations between different applications, preventing a poor user experience.

[0115] In some embodiments, the screen orientation switching unit of the electronic device is divided into a window management module, a page composition module, a screen rotation module, and an animation module. The window management module is used to acquire screenshots, the page composition module is used to compose the fifth and sixth pages, and the animation module is used to compose the switching animation. The screen rotation module is used to schedule the page composition module and the animation module, and also to transmit data between the window management module, the animation module, and the page composition module. In this way, by cooperating between different modules to compose the screen orientation switching animation, the electronic device can delegate some of the operations for composing the screen orientation switching animation to its original modules, making reasonable use of the resources provided by the electronic device and avoiding the deployment of multiple modules with the same function on the electronic device.

[0116] Thirdly, this application provides another display method, including: an electronic device displays a fourth page, a first window is displayed in a fourth area of ​​the fourth page, and a first video image is displayed in the first window;

[0117] The electronic device receives a fourth input that switches the electronic device from landscape display mode to portrait display mode;

[0118] In response to the fourth input, the electronic device displays a fourth background layer and hovers the fourth rotating layer at the display position of the fourth background layer. The fourth background layer includes a screenshot of the fifth page. The fifth area of ​​the fifth page displays the first window. The orientation of the first video on the fifth page is different from the orientation of the first video on the fourth page.

[0119] The electronic device switches the display of the fourth rotating layer from the fourth area to the fifth area. The fourth rotating layer includes the image of the first video. When the fourth rotating layer is displayed in the fifth area, the orientation of the image of the first video is different from the orientation of the image of the first video when the fourth rotating layer is displayed in the fourth area.

[0120] After the fourth rotating layer switches to the fifth area, the electronic device displays the fifth page.

[0121] In this way, electronic devices can smoothly and seamlessly switch from landscape to portrait display mode.

[0122] In one possible implementation, before the electronic device displays the fourth background layer, the method further includes: the electronic device capturing and displaying an image of the fourth page;

[0123] The electronic device displays the fifth page;

[0124] The electronic device captures an image from the fifth page to obtain the fourth background layer;

[0125] Based on the layer information of the fifth page and the layer information of the fourth page, obtain the size and position of the first window of the fifth page. The size and position of the first window of the fifth page are the same as the size and position of the fifth area.

[0126] The electronic device rotates, translates, and zooms in on the fifth page to obtain a fourth rotated layer. The first window in the fourth rotated layer has the same size as the first window on the fourth page. The orientation of the first video in the fourth rotated layer is the same as the orientation of the first video on the fourth page. The position of the first window in the fourth rotated layer is the same as the position of the first window on the fourth page.

[0127] The electronic device cancels the display of the image on the fourth page.

[0128] In this way, the electronic device can display the image of the fourth page while the fifth page is being drawn, avoiding the need to switch from the fourth page to the fifth page.

[0129] In one possible implementation, the electronic device switches the display of the fourth rotating layer from the fourth region to the fifth region, specifically by the electronic device not displaying the portion of the fourth rotating layer other than the first window.

[0130] The electronic device rotates, translates, and shrinks the first window of the fourth rotating layer, switching its display from the fourth area to the fifth area.

[0131] When the electronic device switches the display of the first window of the fourth rotating layer from the fourth area to the fifth area, it displays the portion of the fourth rotating layer excluding the first window.

[0132] In one possible implementation, when the electronic device displays a fourth background layer and the fourth rotated layer is hovered at the display position of the fourth background layer, the method further includes:

[0133] The fourth occlusion layer is floated in the display position of the first window in the background layer. The fourth occlusion layer has the same size as the first window. The fourth occlusion layer is a preset image. The fourth occlusion layer is occluded by the fifth rotated layer.

[0134] In one possible implementation, when displaying the fourth background layer and hovering the fourth rotated layer at the display position of the fourth background layer, the method further includes: hovering the fourth occlusion layer at the display position of the first window in the fourth background layer, wherein the fourth occlusion layer has the same size as the first window, the fourth occlusion layer is a preset image, and the fourth occlusion layer is occluded by the fourth rotated layer.

[0135] In one possible implementation, after the electronic device displays the fifth page, the method further includes: the electronic device receiving a fifth input from the user to switch the electronic device from portrait display mode to landscape display mode;

[0136] After receiving the fifth input, the electronic device displays the fifth background layer and floats the fifth rotating layer on top of the fifth background layer. The fifth background layer includes a screenshot of the fifth page.

[0137] The electronic device switches the display of the fifth rotating layer from the fifth area to the sixth area of ​​the sixth page. The sixth area of ​​the sixth page is used to display the first window. The sixth area is the same as the fourth area. The fifth rotating layer includes the image of the first video. When the fifth rotating layer is displayed in the sixth area, the orientation of the image of the first video is different from the orientation of the image of the first video when the fifth rotating layer is displayed in the fifth area.

[0138] When the fifth rotating layer switches to the sixth area, the electronic device displays the sixth page.

[0139] It is understandable that the sixth region being the same as the fourth region means that the sixth region and the fourth region have the same size and position.

[0140] In this way, after switching from landscape to portrait mode, the electronic device can receive user input to switch between landscape and portrait modes, and then switch back to landscape mode. Whether switching from landscape to portrait or vice versa, the transition animation is similar, using the portrait page content as the background and the first video frame as a rotating layer, resulting in a consistent and aesthetically pleasing display.

[0141] In one possible implementation, switching the display of the fifth rotated layer from the fifth area to the sixth area of ​​the sixth page specifically includes: rotating, translating, and zooming the fifth rotated layer to switch its display from the fifth area to the sixth area.

[0142] In one possible implementation, when the electronic device displays the fifth background layer, the method further includes:

[0143] The fifth occlusion layer is displayed floating in the first window's display position within the fifth background layer. The fifth occlusion layer has the same size as the first window, and it is a preset image. The fifth occlusion layer is occluded by the fifth rotated layer.

[0144] In one possible implementation, when the electronic device displays the fifth background layer, the method further includes: the electronic device drawing a sixth page;

[0145] The electronic device obtains the size and position of the first window of the fifth page based on the layer information of the fifth page and the layer information of the sixth page. The size of the first window of the fifth page is the same as the size of the fifth area, and the position of the first window of the fifth page is the same as the position of the fifth area.

[0146] The electronic device rotates, translates, and shrinks the sixth page to obtain a transformed sixth page that has the same size and position as the fifth area and the same orientation as the first video in the first window of the fifth page. The fifth rotated layer is the transformed sixth page; or,

[0147] The electronic device acquires the image of the first window of the fifth page based on the size and position of the first window of the fifth page, and the fifth rotating layer is the image of the first window of the fifth page.

[0148] In one possible implementation, after receiving a screen orientation change input, the electronic device can instruct its screen orientation change unit to perform a screen orientation change operation. This operation includes the steps performed by the electronic device in any of the possible implementations described above. This screen orientation change unit belongs to the application framework layer of the electronic device. The screen orientation change unit and the first application are different modules of the electronic device; the screen orientation change unit is not part of the first application, and the first application is not part of the screen orientation change unit. The first application is the application that provides the display content for the fourth, fifth, and sixth pages.

[0149] In this way, any application installed on the electronic device that supports video playback can obtain the landscape / portrait switching animation synthesized by the landscape / portrait switching unit. That is, even if an application doesn't have a landscape / portrait switching animation set, when the electronic device receives a landscape / portrait switching operation for an application without such an animation, it can directly obtain a smooth, aesthetically pleasing switching animation through the landscape / portrait switching unit. The electronic device can then play this animation without any overlap between landscape and portrait pages. Furthermore, because the electronic device's landscape / portrait switching unit can provide the same switching animation style to all applications, it avoids inconsistent switching animations between different applications, preventing a poor user experience.

[0150] In some embodiments, the screen orientation switching unit of the electronic device is divided into a window management module, a page composition module, a screen rotation module, and an animation module. The window management module is used to acquire screenshots, the page composition module is used to compose the fifth and sixth pages, and the animation module is used to compose the switching animation. The screen rotation module is used to schedule the page composition module and the animation module, and also to transmit data between the window management module, the animation module, and the page composition module. In this way, by cooperating between different modules to compose the screen orientation switching animation, the electronic device can delegate some of the operations for composing the screen orientation switching animation to its original modules, making reasonable use of the resources provided by the electronic device and avoiding the deployment of multiple modules with the same function on the electronic device.

[0151] Fourthly, this application provides an electronic device, including: a display screen, one or more processors, and one or more memories; wherein the display screen, one or more memories are coupled to one or more processors, and the one or more memories are used to store computer program code, the computer program code including computer instructions, and when the one or more processors execute the computer instructions, the electronic device performs the display method in any possible implementation of any of the above aspects.

[0152] Fifthly, this application provides a computer-readable storage medium including instructions that, when executed on an electronic device, cause the electronic device to perform the display method in any of the possible implementations of any of the above aspects.

[0153] Sixthly, this application provides a chip system applied to an electronic device. The chip system includes one or more processors, which are used to invoke computer instructions to cause the electronic device to execute the display method in any of the possible implementations of any of the above aspects.

[0154] In a seventh aspect, this application provides a computer program product containing instructions that, when the computer program is run on an electronic device, causes the electronic device to execute the display method in any of the possible implementations of any of the above aspects. Attached Figure Description

[0155] Figure 1 A schematic diagram of overlapping landscape and portrait screens provided in this application embodiment;

[0156] Figures 2A-2G A set of interface schematic diagrams provided for embodiments of this application;

[0157] Figure 3 A schematic diagram of a display state provided in an embodiment of this application;

[0158] Figure 4 A schematic flowchart illustrating a display method provided in an embodiment of this application;

[0159] Figure 5 A hierarchical relationship diagram provided for an embodiment of this application;

[0160] Figures 6A-6F A set of schematic diagrams illustrating layer changes provided in embodiments of this application;

[0161] Figure 7 A schematic diagram illustrating the process of an electronic device 100 acquiring a view area of ​​a shared element, provided in an embodiment of this application;

[0162] Figure 8 This is a schematic diagram illustrating the switching of a rotating layer, provided in an embodiment of this application.

[0163] Figure 9 A schematic flowchart illustrating a display method provided in an embodiment of this application;

[0164] Figures 10A-10F This is another set of schematic diagrams illustrating layer changes provided in the embodiments of this application;

[0165] Figure 11 This is a schematic diagram illustrating the switching of a rotating layer, provided in an embodiment of this application.

[0166] Figures 12A-12B This is another set of schematic diagrams illustrating layer changes provided in the embodiments of this application;

[0167] Figures 13A-13B Another set of interface schematic diagrams provided for embodiments of this application;

[0168] Figures 14A-14D This is another set of schematic diagrams illustrating layer changes provided in the embodiments of this application;

[0169] Figures 15A-15B This is another set of schematic diagrams illustrating layer changes provided in the embodiments of this application;

[0170] Figure 16 This is a schematic diagram of the structure of an electronic device 100 provided in an embodiment of this application;

[0171] Figure 17 A software structure block diagram of an electronic device 100 provided in this application embodiment;

[0172] Figure 18 This is a schematic diagram of a module of an electronic device 100 provided in an embodiment of this application. Detailed Implementation

[0173] The technical solutions in the embodiments of this application will be clearly and thoroughly described below with reference to the accompanying drawings. In the description of the embodiments of this application, unless otherwise stated, " / " means "or," for example, A / B can mean A or B; the word "and / or" in the text is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone.

[0174] Hereinafter, the terms "first" and "second" are used for descriptive purposes only and should not be construed as implying or suggesting relative importance or implicitly indicating the number of indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature, and in the description of the embodiments of this application, unless otherwise stated, "multiple" means two or more.

[0175] This application provides a display method. An electronic device 100 displays a portrait-oriented page including a portrait video playback window, where a first video is displayed. The electronic device 100 can receive input for switching between portrait and landscape modes, and in response to this input, captures an image of the portrait-oriented page to obtain a first background layer. The electronic device 100 can display the first background layer and display a switching animation on the first background layer that switches a first rotating layer, including the first video, from the portrait-oriented video playback window to a landscape-oriented video playback window. When the switching animation ends, the electronic device 100 can display a landscape-oriented page including a landscape video playback window, where the first video is displayed in the portrait-oriented video playback window, and the first rotating layer is either the transformed landscape-oriented page or a screenshot of the portrait-oriented video playback window.

[0176] When the electronic device 100 displays a landscape page including a landscape video playback window, it can receive input for switching between landscape and portrait modes. In response to this input, it displays a second background layer, and displays a switching animation on the second background layer that switches a second rotating layer, including the image of the first video, from the landscape video playback window to a portrait video playback window. When the switching animation ends, the electronic device 100 can display a portrait page including a portrait video playback window. The second background layer can be a portrait page and the second rotating layer can be a screenshot of the landscape page; alternatively, the second background layer can be an image of the portrait page and the second rotating layer can be a transformed portrait page.

[0177] In this way, during the landscape / portrait switching process, the electronic device 100 can use the portrait page or a screenshot of the portrait page as the background and only perform rotation, scaling, and panning operations on the first video frame. Throughout the entire switching process, there will be no issue of abruptly changing between landscape and portrait pages without a transition. There will also be no overlap between landscape and portrait pages, making the landscape / portrait switching effect smoother and more fluid, improving the user experience. Furthermore, since the electronic device 100 only rotates, scales, and pans the video frame, if a status bar is displayed at the top of the page shown on the electronic device 100, the status bar will not rotate with the video frame, making the landscape / portrait switching animation more aesthetically pleasing.

[0178] The following sections introduce some application scenarios provided by the embodiments of this application.

[0179] In some application scenarios, electronic device 100 displays a portrait-oriented page, which includes a portrait video playback window. When receiving input to switch to landscape display, electronic device 100 responds by displaying a screenshot of the portrait page and playing a first switching animation on the screenshot. This animation involves rotating, panning, and zooming the video screenshot, transitioning from the portrait to the landscape video playback window position. When the animation ends, electronic device 100 displays the landscape page, including the landscape video playback window. In this way, during the transition from portrait to landscape playback, electronic device 100 maintains the content of the portrait page (excluding the video window) unchanged, performing only rotation, zooming, and panning operations on the video frame, resulting in a smooth transition. Throughout the transition, there is no abrupt change between portrait and landscape views, nor is there any overlap between the portrait and landscape pages, making the transition smoother and more fluid, thus improving the user experience.

[0180] like Figure 2AAs shown, the electronic device 100 can display a desktop 200. The desktop 200 may include multiple application icons (e.g., chat application icon, news application icon, and video application icon 201, etc.). Optionally, a status bar is also displayed above the desktop 200, which may include information such as a communication signal strength indicator, battery level, and time. Optionally, a tray (dock) area may be present below the desktop 200, which may include one or more tray icons (e.g., dialer application icon, messaging application icon, contacts application icon, camera application icon, etc.). The video application icon 201 can be used to trigger the electronic device 100 to display a video application page.

[0181] It should be noted that, Figure 2A The electronic device 100 is identified in the above. Figure 2A The diagram illustrates the relative positions of the top, bottom, left, and right sides when the device is positioned as shown. These positions are used to describe the location on the touchscreen of the electronic device 100. Additionally, "up" refers to the direction from bottom to top, "down" refers to the direction from top to bottom, "right" refers to the direction from left to right, and "left" refers to the direction from right to left. This description of positions also applies to the description of the accompanying drawings.

[0182] It should also be noted that when the electronic device 100 is in portrait mode (also known as portrait playback mode), the top of the page displayed by the electronic device 100 is... Figure 2A The top / bottom of the touchscreen is shown. When the electronic device 100 is in landscape display mode (also known as landscape playback mode), the top of the page displayed by the electronic device 100 is at... Figure 2A The left / right side of the touchscreen shown.

[0183] Electronic device 100 can receive user requests for... Figure 2A The input of the video application icon 201 shown below, in response to the input, displays as follows Figure 2B The video recommendation interface shown is 210. (As shown) Figure 2B As shown, the video recommendation interface 210 is a page for video applications. The video recommendation interface 210 may include one or more video options, which can be used to trigger the electronic device 100 to display the corresponding video playback page. These one or more video options may include video option 211.

[0184] Electronic device 100 can receive user requests for... Figure 2B The input to video option 211 shown above, in response to which, displays as follows Figure 2C The video playback interface shown is 220.

[0185] like Figure 2CAs shown, the video playback interface 220 can be used for portrait-oriented video playback. The length and width of the video playback interface 220 are both a first length and a first width; that is, the size of the video playback interface 220 is the same as the screen size. The video playback interface 220 may include a video playback window 221. Optionally, the video playback interface 220 may also include, but is not limited to, video description information, video selection options, recommended video options, comment controls, sharing controls, etc. Optionally, the video playback interface 220 may also include a status bar, which is displayed at the top of the video playback interface 220.

[0186] The video playback window 221 is located at the top of the video playback interface 220. The video playback window 221 can be used to play video frames. Here, the length and width of the video playback window 221 are both a second length and a second width, with the second length and width being the same, and the second width being less than the first length. The video playback window 221 may include, but is not limited to, video images 221A and a switching icon 221B. Video image 221A is a video frame of the video resource played by the video playback window 221. The switching icon 221B can be used to trigger the electronic device 100 to switch from portrait to landscape display.

[0187] Electronic device 100 can receive user requests for... Figure 2C The input of the switching icon 221B shown above, in response to the input, performs the operation of switching the electronic device 100 from portrait display mode to landscape display mode.

[0188] Among them, electronic device 100 can receive user requests for... Figure 2C When the switch icon 221B is clicked (e.g., clicked), a screenshot 231 is captured, which includes all page content of the video playback interface 220. The electronic device 100 can display this screenshot 231. The electronic device 100 can also capture a screenshot 232 of the video image 221A played in the video playback window 221, which has a second length and a second width. The electronic device 100 can display the screenshot 232 at the location on the display screen where the video playback window 221 is placed. The screenshot 232 is displayed above the screenshot 231 and may partially obscure the content of the screenshot 231. The electronic device 100 can rotate the screenshot 232 90° clockwise / counterclockwise, and during the rotation, enlarge and shift the screenshot 232 downwards. When the screenshot image 232 is rotated 90° clockwise / counterclockwise, the length of the screenshot image 232 increases to the first length, and the width increases to the first width. Specifically, the process of the electronic device 100 switching from portrait display mode to landscape display mode is as follows: Figure 4As shown, it will not be elaborated further here.

[0189] Furthermore, to prevent the electronic device 100 from displaying two video images during screen orientation switching, the electronic device 100 can display an obscuring layer above the video image in screenshot 231. This obscuring layer is located below screenshot 232, and it only obscures the video image in screenshot 231, not screenshot 232, but can be obscured by screenshot 232.

[0190] Specifically, the size of the masking layer is the same as the size of the video image. The masking layer is a preset image. The preset image can be an image of any color (e.g., black, white, etc.), or it can be an image including a specified pattern. In this way, the electronic device 100 can display only one video image during the switching from portrait to landscape display.

[0191] For example, electronic device 100 can receive user requests for... Figure 2C After inputting the toggle icon 221B as shown, the following will be displayed: Figure 2D The landscape / portrait screen switching interface shown is 230.

[0192] like Figure 2D The landscape / portrait switching interface 230 includes a screenshot image 231, and an overlay layer 233 is displayed on top of the screenshot image 231. A screenshot image 232 is displayed on top of the overlay layer 233. Figure 2D The screenshot image 232 shown is larger than the occlusion layer 233. The position of the screenshot image 232 differs from that of the occlusion layer 233. Here, the occlusion layer 233 is white.

[0193] Then, the electronic device 100 can control the screenshot image 232 to continue rotating clockwise, and the electronic device 100 can display as shown in the image. Figure 2E The landscape / portrait screen switching interface shown is 230. Figure 2E The size of the screenshot image 232 shown is greater than Figure 2D The dimensions of the screenshot image 232 shown.

[0194] Electronic device 100 can control the screenshot image 232 to continue rotating clockwise until the rotation angle of the screenshot image 232 is equal to 90°, at which point electronic device 100 can display as shown. Figure 2F The landscape / portrait screen switching interface shown is 230.

[0195] like Figure 2F As shown, the size of the screenshot image 232 is the same as the size of the touch screen of the electronic device 100. Both the screenshot image 231 and the masking layer 233 are masked by the screenshot image 232.

[0196] Afterwards, electronic device 100 can display as follows Figure 2G The video playback interface shown is 240. (As shown in the image...) Figure 2G As shown, the video playback interface 240 can be used for landscape video playback. The video playback interface 240 may include a video playback window 241. The video playback window 241 can be used to play video frames. Here, the length of the video playback window 241 is a first length, and the width is a first width. The video playback window 241 may include, but is not limited to, a video image 241A, which is a video frame of the video resource played by the video playback window 241. Optionally, the video playback window 241 may also include a switching icon, which can be used to trigger the electronic device 100 to switch from landscape to portrait display. Optionally, the video playback interface 240 may also include a status bar, which is displayed above the video playback window 241, that is, it can be understood that the status bar is displayed near the right edge of the touch screen.

[0197] It should also be noted that this is not limited to [specific targets]. Figure 2C As shown in the input of the switching icon 221B, the electronic device 100 can also receive other inputs to perform the landscape / portrait screen switching operation. For example, the electronic device 100 can receive input from the user rotating the electronic device 100 to perform the landscape / portrait screen switching operation. The electronic device 100 can utilize an accelerometer (e.g., an accelerometer sensor) to perform this switching. Figure 16 The accelerometer 180E and / or gyroscope shown detect the user's input to rotate the electronic device 100. For example, when the electronic device 100 rotates as described above... Figure 2A When placed as shown, the electronic device 100 can switch from portrait display mode to landscape display mode when it detects that the electronic device 100 has rotated to the left or right by a first angle (e.g., 80 degrees or 90 degrees).

[0198] Specifically, such as Figure 3 As shown, the electronic device 100 can determine its display state based on an accelerometer sensor. The electronic device 100 uses the aforementioned... Figure 2A When placed as shown, the electronic device 100 can determine that it is in portrait display mode based on the accelerometer. The correspondence between the various borders and the orientation of the electronic device 100 can be referenced. Figure 3 As shown in (a), the first and third borders of the electronic device 100 are of the same length, with the first border at the top and the third border at the bottom. The second and fourth borders are of the same length, with the second border on the right and the fourth border on the left. The length of the first or third border is shorter than the length of the second or fourth border. In other words, it can be understood that when the shorter border is at the top or bottom, the electronic device 100 is in portrait mode. When the electronic device 100 is in portrait mode... Figure 3 When positioned as shown in (b), the electronic device 100 can determine that it is in landscape mode based on the accelerometer. The fourth border is located at the top, the second border at the bottom, the third border on the left, and the first border on the right. (Not limited to...) Figure 3 As shown in (b) above, when the second border is at the top, the electronic device 100 can also determine that it is in landscape mode based on the accelerometer. In other words, it can be understood that the electronic device 100 is in landscape mode when the longer border is at the top or bottom.

[0199] In some embodiments, when the electronic device 100 is in portrait mode, the angle of the electronic device 100 obtained by the accelerometer is 0 degrees or 180 degrees. When the electronic device 100 is in landscape mode, the angle of the electronic device 100 obtained by the accelerometer is 90 degrees or -90 degrees (or 270 degrees). It should be noted that the angle obtained by the electronic device 100 may vary due to variations in the user's grip posture. The electronic device 100 can determine that its angle is 0 degrees or 180 degrees, i.e., it is in portrait mode, when the difference between the obtained angle and 0 degrees or 180 degrees is less than the angle difference (e.g., 5 degrees). The electronic device 100 can also determine that its angle is 90 degrees or -90 degrees, i.e., it is in landscape mode, when the difference between the obtained angle and 90 degrees or -90 degrees is less than the angle difference (e.g., 5 degrees).

[0200] In some embodiments, during the process of switching from portrait to landscape display, if the electronic device 100 is playing a video file, the video displayed in landscape mode will differ from the video displayed in portrait mode because the switching operation lasts for a certain duration (e.g., 1 second). Figure 2G The video frame shown is 241A and Figure 2C The video frame shown is different from video frame 221A. Video frame 241A is the video frame in the video file that follows video frame 221A.

[0201] The following is a flowchart illustrating a display method provided in an embodiment of this application.

[0202] like Figure 4 As shown, the display method includes the following steps:

[0203] S101. Electronic device 100 displays a portrait page including a portrait video playback window.

[0204] The electronic device 100 is in portrait mode, displaying a portrait page including a portrait video playback window. The portrait video playback window can be used to play video files.

[0205] It should be noted that the interface displayed by the electronic device 100 may include one or more layers, and the top layer may obscure the bottom layer. The hierarchical relationship between layers can be found in [reference needed]. Figure 5 ,like Figure 5 As shown, layer 1 is the bottommost layer, layer 2 is the layer above layer 1, and layer 2 can obscure layer 1. Layer n-1 is the layer above layer 2, and layer n-1 can obscure both layer 2 and layer 1. Layer n is the layer above layer n-1, and layer n can obscure both layer n-1, layer 2, and layer 1. In this way, some or all of the content displayed by the bottommost layer can be obscured by the topmost layer.

[0206] Here, the portrait-oriented page displayed by the electronic device 100 can be considered as a layer. Next, we will... Figure 2C The video playback interface 220 shown is an example, describing the steps of the display method. Specifically, when the electronic device 100 displays... Figure 2C When the video playback interface 220 is shown, the video playback interface 220 includes the following layers: Figure 6A The image shows a portrait-oriented page.

[0207] It should also be noted that a layer can consist of one or more views. Here, the portrait-oriented page consists of multiple views, and the hierarchy of these views can be found by referring to... Figure 5 The diagram illustrates the layer hierarchy. In a portrait-oriented page, the highest-level view is displayed at the top, and the lowest-level view is displayed at the bottom. Higher-level views can obscure lower-level views. For example, a video playback window can be the highest-level view among multiple views included in a portrait-oriented page.

[0208] S102. After receiving the first input to switch to landscape display, electronic device 100 performs a screen freeze operation.

[0209] The first input can be a toggle control for video playback applications (e.g., Figure 2C The input is shown in the toggle icon 221B.

[0210] In some embodiments, the first input may be an input indicating clockwise (or counterclockwise) rotation of the electronic device 100 to a first angle, and / or an input indicating clockwise (or counterclockwise) rotation of the electronic device 100 to an acceleration reaching a first acceleration. The first angle is a preset angle, such as 45 degrees, 60 degrees, 90 degrees, -45 degrees, -60 degrees, -90 degrees, etc. The first acceleration is a preset angular acceleration. The electronic device 100 can acquire its angle and / or acceleration through sensors (e.g., accelerometer, gyroscope).

[0211] When electronic device 100 performs a screen freeze operation, the touchscreen of electronic device 100 stops receiving user input. Electronic device 100 can perform the screen freeze operation by calling a screen freeze function (e.g., the startFreezingDisplayLocked function).

[0212] In some embodiments, the electronic device 100 can also listen for screen freeze events, or listen for receiving a first input event to obtain layer information of the portrait-oriented page. The layer information obtained by the electronic device 100 may include view information of one or more views and dirty brush region information. The view information may include, but is not limited to, view name, view region parameters, parent view name, view hierarchy, etc. The view name (also known as the view identifier) ​​is the identification information of the view, and the view region parameters include the view's position and size on the display screen. The parent view name is the view name of the view's parent view. A view can only be displayed within the area of ​​its parent view; content outside the parent view's area is not visible to the user. The view hierarchy can represent the view's position among all views in the layer. The dirty brush region is the area in the layer where content changes; generally, the electronic device 100 compares the currently displayed page with the previous frame to obtain the dirty brush region.

[0213] S103. Capture an image of the portrait-oriented page to obtain a screenshot of the portrait-oriented page, and display the screenshot of the portrait-oriented page.

[0214] During the screen freeze process, the electronic device 100 can also capture an image of the portrait-oriented page and display the captured screenshot. Here, the portrait-oriented page screenshot can be referred to as the background layer. For example... Figure 6B As shown, electronic device 100 can intercept Figure 2C The video playback interface 220 shown obtains a background layer (a screenshot of the portrait page) and displays this background layer on top of (or above) the portrait page. This background layer can obscure the portrait page. Here, the screenshot of the portrait page can be used as the background for the transition animation.

[0215] Alternatively, when the electronic device 100 obtains a screenshot of a portrait-oriented page, it can display only the background layer (portrait screenshot).

[0216] S104. Obtain the landscape page, including the landscape playback window.

[0217] After displaying a screenshot of a portrait-oriented page, electronic device 100 can draw a landscape-oriented page, including a landscape playback window, on top of the portrait-oriented page screenshot. For example... Figure 6C As shown, the electronic device 100 continues to display the background layer (portrait screenshot), and draws and displays a landscape page below (or beneath) the portrait screenshot. The landscape page includes a landscape video playback window displaying a video image. Optionally, the landscape page may include a status bar.

[0218] S105. Cancel screen freeze operation.

[0219] Once the electronic device 100 has finished drawing the landscape page, it can cancel the screen freeze operation. After the electronic device 100 cancels the screen freeze operation, its touchscreen can receive user input.

[0220] In some embodiments, the electronic device 100 can also listen for a screen freeze cancellation event, or listen for a landscape page acquisition event to obtain the layer information of the landscape page. Preferably, the electronic device 100 can listen for a screen freeze cancellation event and obtain the layer information of the landscape page.

[0221] Optionally, while the electronic device 100 is playing a video file, it can pause playback after performing a screen freeze operation. When the electronic device 100 cancels the screen freeze operation, it can resume playback. This way, the video frames remain unchanged during the process of the electronic device 100 acquiring a landscape view, reducing the number of video frames played during the switching process.

[0222] S106. Obtain the view area parameters and rotation layer of the portrait video playback window.

[0223] To better describe step S106, the specific process of the electronic device 100 identifying the shared element area provided in this application embodiment is first introduced. Here, the shared element can be understood as a view present in the interface displayed by the electronic device 100 before and after performing a landscape / portrait switching operation. In this case, the shared element can be understood as a video playback window. In some embodiments, the shared element may also include functional controls provided by the video application displayed in the video playback window, such as switching controls, pause (start) controls, progress bars, etc. The area of ​​the shared element acquired by the electronic device 100 is the display area where the portrait video playback window of the portrait page is located. In some embodiments, the area of ​​the shared element acquired by the electronic device 100 includes both the display area where the portrait video playback window of the portrait page is located and the display area where the landscape video playback window of the landscape page is located.

[0224] For example, such as Figure 7 As shown, the steps for electronic device 100 to obtain the view area of ​​a shared element are as follows:

[0225] S701. Obtain the layer information of the first state. The layer information includes the view information of one or more views, as well as the dirty brush area information. The view information may include, but is not limited to, the view name, the view area, the parent view name, and the view hierarchy.

[0226] When receiving input indicating a screen orientation change, the electronic device 100 can use its current display state as the first state and the display state after performing the screen orientation change as the second state. If the first state is a portrait display state, the second state is a landscape display state; conversely, if the first state is a landscape display state, the second state is a portrait display state. The electronic device 100 can also obtain the layer information of the first state after receiving the screen orientation change input. Specifically, the electronic device 100 can also listen for screen freeze events, or listen for screen orientation change input events to obtain the layer information of the first state.

[0227] In some examples, the electronic device 100 can obtain layer information of the hardware hybrid renderer (HWC) by calling the interface provided by SurfaceFlinger. Specifically, the electronic device 100 can first obtain the code data of the layer through this interface, and then obtain the layer information indicated in the code data. A detailed description of the layer information can be found in the embodiment shown in step S102, and will not be repeated here.

[0228] Here, taking the conversion from portrait to landscape mode as an example, the first state is the portrait display state. For example, the code data of the layer in the first state (i.e., the portrait display state) obtained in step S701 can be represented as:

[0229] ...

[0230] Layer=SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#1,0,103,1228,794,com.youku.ui.activity.DetailActivity#0,-2

[0231] Layer=SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#2,0,103,1228,793,com.youku.ui.activity.DetailActivity#0,-1

[0232] Layer=com.youku.ui.activity.DetailActivity#0,0,0,1228,2700,5c2966fcom.youku.ui.activity.DetailActivity#0,0

[0233] ...

[0234] RegionSurfaceDamageRegion(this=5e1167ce2c00f737 count=1)

[0235] {0,103,1228,793

[0236] ...

[0237] In this context, each Layer represents a view. The data following "Layer=" consists of the view name, view area parameters, parent view name, and view hierarchy. The view area parameters indicate the size and position of the view area, which determines the view area. The electronic device 100 can then obtain the view information based on this information.

[0238] Here, one or more views in the first state include a view named "SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#1", whose view area parameters are "0,103,1228,794". Here, 0 represents the distance between the left edge of the view and the left edge of the electronic device 100, 103 represents the distance between the top edge of the view and the top edge of the electronic device 100, 1228 represents the horizontal length of the view, and 793 represents the vertical length of the view. "com.youku.ui.activity.DetailActivity#0" is the name of the parent view. "-2" indicates the view's hierarchy. It should be noted that examples of the left and right edge borders can be found in [reference needed]. Figure 3 (a)

[0239] The first state includes one or more views, including a view named "SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#2". This view's view area parameters are "0, 103, 1228, 793", where 0 represents the distance between the left edge of the view and the left edge of the electronic device 100, 103 represents the distance between the top edge of the view and the top edge of the electronic device 100, 1228 represents the horizontal length of the view, and 794 represents the vertical length of the view. "com.youku.ui.activity.DetailActivity#0" is the name of the parent view. "-1" indicates the view's hierarchy.

[0240] The first state includes one or more views, including a view named "com.youku.ui.activity.DetailActivity#0". This view's view area parameters are "0,0,1228,2700", where 0 represents the distance between the left edge of the view and the left edge of the electronic device 100, and 0 represents the distance between the top edge of the view and the top edge of the electronic device 100. 1228 represents the horizontal length of the view, and 2700 represents the vertical length. "5c2966f" is the layer identifier. "com.youku.ui.activity.DetailActivity#0" is the name of the parent view. "0" represents the view's hierarchy information.

[0241] Here, SurfaceDamageRegion represents the dirty brush region in the first state. Electronic device 100 can obtain the dirty brush region information based on this. In this case, the area of ​​the dirty brush region is "0,103,1228,793". Here, 0 represents the distance from the left edge of the dirty brush region to the left edge of the electronic device 100, 103 represents the distance from the top edge of the dirty brush region to the top edge of the electronic device 100, 1228 represents the horizontal length of the dirty brush region, and 793 represents the vertical length of the dirty brush region.

[0242] The layer information acquired by the electronic device 100 can be represented in the form of a linked list, array, etc., and this application does not limit this. Alternatively, the electronic device 100 can save the code position of the filtered layers and retrieve the corresponding layer information when performing subsequent judgment operations.

[0243] S702. Does the view name include the first field?

[0244] Electronic device 100 determines one or more views whose names include the first field based on whether the view name includes the first field. The first field can be a string indicating that the view is a video screen, such as "SurfaceView".

[0245] When the electronic device 100 determines that the view name (of a portion of the view) includes the first field, it can retain one or more views in the first state whose view names include the first field, and execute step S703.

[0246] When electronic device 100 determines that the view name (of all views) does not include the first field, step S714 can be executed.

[0247] As in the example provided in step S701, since only two views have "SurfaceView" in their view names, the electronic device 100 performs subsequent judgment operations only for those two views.

[0248] S703. Obtain view information for one or more views in the second state.

[0249] The electronic device 100 can obtain the view information of the second state when the display interface of the second state is completed. Specifically, the electronic device 100 can also listen for the unfreeze event, or listen for the event that the display interface of the second state is completed to obtain the layer information of the second state.

[0250] Here, taking the conversion from portrait to landscape mode as an example, the second state is the landscape display state. For example, the code data of the layer in the second state (i.e., the landscape display state) can be represented as:

[0251] ...

[0252] Layer=SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#1,0,0,1228,691,com.youku.ui.activity.DetailActivity#0,-2

[0253] Layer=SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#2,259,0,2441,1228,com.youku.ui.activity.DetailActivity#0,-1

[0254] Layer=com.youku.ui.activity.DetailActivity#0,0,0,2700,1228,5c2966fcom.youku.ui.activity.DetailActivity#0,0

[0255] ...

[0256] In this context, each Layer represents a view. The data following “Layer=" consists of the view name, view area parameters, parent view name, and view hierarchy. Electronic device 100 can obtain the view information based on this.

[0257] Here, one or more views in the second state include a view named "SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#1", whose view area parameters are "0, 0, 1228, 691". Here, 0 represents the distance between the left edge of the view and the left edge of the electronic device 100, and 0 represents the distance between the top edge of the view and the top edge of the electronic device 100. 1228 represents the horizontal length of the view, and 691 represents the vertical length. "com.youku.ui.activity.DetailActivity#0" is the name of the parent view. "-2" indicates the view's hierarchy. It should be noted that examples of the left and right edge borders can be found in [link to example]. Figure 3 (b)

[0258] The second state includes one or more views, including a view named "SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#2". This view's view area parameters are "259,0,2441,1228", where 259 represents the distance between the left edge of the view and the left edge of the electronic device 100, and 0 represents the distance between the top edge of the view and the top edge of the electronic device 100. 2441 represents the horizontal length of the view, and 1228 represents the vertical length. "com.youku.ui.activity.DetailActivity#0" is the name of the parent view. "-1" indicates the view's hierarchy.

[0259] The second state includes one or more views, including a view named "com.youku.ui.activity.DetailActivity#0". This view's view area parameters are "0,0,1228,2700", where 0 represents the distance between the left edge of the view and the left edge of the electronic device 100, and 0 represents the distance between the top edge of the view and the top edge of the electronic device 100. 2700 represents the horizontal length of the view, and 1228 represents the vertical length. "5c2966f" is the layer identifier. "com.youku.ui.activity.DetailActivity#0" is the name of the parent view. "0" represents the view's hierarchy information.

[0260] S704. Does the view name in the second state include the first field?

[0261] Similarly, electronic device 100 determines one or more views whose view names include the first field based on whether the view name includes the first field.

[0262] When the electronic device 100 determines that the view name (of a portion of the view) includes the first field, it can retain one or more views in the second state whose view names include the first field, and execute step S705.

[0263] In some examples, when electronic device 100 determines that the view name (of all views) does not include the first field, it can determine that the page in the first state does not include shared elements, and no further steps are performed.

[0264] As in the example provided in step S703, since only two views have "SurfaceView" in their view names, the electronic device 100 performs subsequent judgment operations only for those two views.

[0265] S705. Retrieve the view with the same view name in the first state and the second state.

[0266] Electronic device 100 can display a view whose view name includes a first field in a first state, and a view whose view name includes a first field in a second state. Figure 1 A comparison is made. Views with the same view name in the first and second states are identified.

[0267] In some examples, electronic device 100 can store views with the same view name together for easy comparison later.

[0268] As shown in the examples provided in steps S701 to S704, the electronic device 100 obtains a view named "SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#1" that exists in both the first and second states. The electronic device 100 also obtains a view named "SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#2" that exists in both the first and second states.

[0269] S706. Whether the parent view names of the views with the same view names in the first state and the second state are the same.

[0270] Since the parent view of the video playback window does not change after the electronic device 100 performs a landscape / portrait switching operation, views with different parent views can be eliminated by comparing their parent view names. The electronic device 100 can determine whether the parent view names of views with the same view names in the first and second states are the same.

[0271] When the electronic device 100 determines that the parent view name is the same for some views that have the same view name in the first state and the second state, it can retain these views and execute step S707.

[0272] In some examples, when electronic device 100 determines that the parent view name (of all views with the same view name in the first state and the second state) is different, it can determine that the page in the first state does not contain shared elements, and no further steps are performed.

[0273] As provided in steps S701 to S705, the electronic device 100 determines that the parent view name of the view "SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#1" exists in both the first and second states. The electronic device 100 also determines that the parent view name of the view "SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#2" exists in both the first and second states.

[0274] S707. Are the view areas of views with the same view name in the first state and the second state the same?

[0275] Since the position and size of the video playback window differ after the electronic device 100 performs a landscape / portrait switching operation, views whose view areas have not changed can be excluded by comparing their view areas. The electronic device 100 can determine whether the view areas of views with the same view name and parent view name in the first and second states are the same based on the view area parameter.

[0276] When the electronic device 100 determines that the view area (of some views with the same view name in the first state and the second state) is different, it can retain this part of the view and execute step S708.

[0277] In some examples, when electronic device 100 determines that the view area (of all views with the same view name in the first state and the second state) is the same, it can determine that the page in the first state does not include shared elements, and no further steps are performed.

[0278] As provided in steps S701 to S706, electronic device 100 determines that the view areas of two views named "SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#1", which exist in both the first and second states, are different. Electronic device 100 also determines that the view areas of two views named "SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#2", which exist in both the first and second states, are also different.

[0279] S708. Based on the view layer, determine the highest-level first view among one or more views in the first state, and the highest-level second view among one or more views in the second state.

[0280] Since the video window is always displayed on top of the screen of electronic device 100, in order to obtain shared elements, electronic device 100 can directly obtain the highest-level view among multiple views. The first view is the view with the highest view level among one or more views in the first state, and the second view is the view with the highest view level among one or more views in the second state. It can be understood that if the view is a shared element, then the shared element has the same view name in the first state and the second state, and the same view level.

[0281] As shown in the examples provided in steps S701 to S707, the view hierarchy of the two views named "SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#1" that exist in both the first and second states is "-2". The view hierarchy of the two views named "SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#2" that exist in both the first and second states is "-1". Since a larger view hierarchy number indicates a higher view hierarchy, it is displayed on the top layer of the screen. Here, the view with the highest view hierarchy has a view hierarchy of "-1".

[0282] S709. The first state is portrait display mode, and the second state is landscape display mode.

[0283] Electronic device 100 determines whether the first state is a portrait display state and whether the second state is a landscape display state. When the first state is a portrait display state and the second state is a landscape display state, electronic device 100 executes step S710; when the first state is not a portrait display state and the second state is not a landscape display state (here, this can be equivalent to the first state being a landscape display state and the second state being a portrait display state), electronic device 100 executes step S712.

[0284] In this system, the electronic device 100 can obtain the rotation delta value by calling a preset general interface of the application framework layer (e.g., HarmonyOS Framework). Based on the delta value, it can determine whether the first state is a landscape display state or a portrait display state. In some examples, this preset general interface can be provided by the window management module of the application framework layer. In some examples, this preset general interface can be the deltaRotation interface.

[0285] For example, when the value of delta is "3", it can be determined that the electronic device 100 has performed a 90-degree clockwise rotation. When the value of delta is "2", it can be determined that the electronic device 100 has performed a 180-degree clockwise / counterclockwise rotation. When the value of delta is "1", it can be determined that the electronic device 100 has performed a 90-degree counterclockwise rotation. Therefore, the electronic device 100 can determine that the current scene is a landscape / portrait switching scene when the obtained delta value is "1" or "3". The electronic device 100 can also obtain the angle of the electronic device 100 in the first state (or second state) based on sensors (e.g., accelerometer, gyroscope, etc.) and determine whether the first state is a landscape display state or a portrait display state based on the angle of the electronic device 100 in the first state (or second state). If the value of delta is "1" or "3", when the angle of the electronic device 100 in the first state is 0 degrees or 180 degrees (or the angle of the electronic device 100 in the second state is 90 degrees or -90 degrees), the first state is portrait display mode, and the second state is landscape display mode. When the angle of the electronic device 100 in the first state is 90 degrees or -90 degrees (or the angle of the electronic device 100 in the second state is 0 degrees or 180 degrees), the first state is landscape display mode, and the second state is portrait display mode. If the value of delta is "2", the electronic device 100 determines that it is switching from landscape display mode to landscape display mode, or from portrait display mode to portrait display mode, and does not execute subsequent steps.

[0286] In some embodiments, the electronic device 100 can directly obtain the angles of the electronic device 100 in the first state and the second state based on sensors (e.g., accelerometer, gyroscope, etc.). When the angle of the electronic device 100 in the first state is 0 degrees or 180 degrees and the angle of the electronic device 100 in the second state is 90 degrees or -90 degrees, the first state is a portrait display state and the second state is a landscape display state. When the angle of the electronic device 100 in the first state is 90 degrees or -90 degrees and the angle of the electronic device 100 in the second state is 0 degrees or 180 degrees, the first state is a landscape display state and the second state is a portrait display state.

[0287] It should be noted that the angle acquired by the electronic device 100 may vary due to variations in the user's grip posture. The electronic device 100 can determine the angle to be 0 degrees or 180 degrees if the difference between the acquired angle and 0 degrees or 180 degrees is less than the angle difference (e.g., 5 degrees, 10 degrees, etc.). Similarly, the electronic device 100 can determine the angle to be 90 degrees or -90 degrees if the difference between the acquired angle and 90 degrees or -90 degrees is less than the angle difference (e.g., 5 degrees, 10 degrees, etc.).

[0288] In other embodiments, since the size of the portrait video playback window is smaller than the size of the landscape video playback window, the electronic device 100 can determine whether the first state is a portrait state based on whether the size of the view area of ​​the first view is greater than a first size. For example, the first size can be half the size of the touch screen, or the first size can be the size of the view area of ​​the second view. When the size of the view area of ​​the first view is less than or equal to the first size, the first state can be determined to be a portrait state. When the size of the view area of ​​the first view is greater than the first size, the first state can be determined not to be a portrait state.

[0289] In other embodiments, the screen orientation switching input received by the electronic device 100 is an input to a switching control for the video playback window. The electronic device 100 can determine whether its first state is a portrait or landscape display state by only acquiring the orientation of the electronic device 100 when it receives the screen orientation switching input. If the orientation of the electronic device 100 is portrait, it can be determined that its first state is a portrait display state. If the orientation of the electronic device 100 is landscape, it can be determined that its first state is a landscape display state. For example, the electronic device 100 can acquire its orientation through a sensor.

[0290] As shown in the examples provided in steps S701 to S708, the first state is the portrait display state, and the electronic device 100 can execute step S710.

[0291] S710. The first view is identified as a shared element.

[0292] The electronic device 100 can define the first view as a shared element. In this way, the electronic device 100 obtains the view area parameters (including the position and size of the video playback window) of the video playback window in portrait mode. That is, here, the first view is the portrait video playback window.

[0293] As in the example provided in steps S701 to S709, the first view is the view in the first state whose view name is “SurfaceView-com.youku.phone / com.youku.activity.DetailActivity#2”, and the electronic device 100 can execute step S711.

[0294] Optionally, the electronic device 100 may further determine whether the first view is a shared element based on the dirty brush region before determining it as such. Since the content of the video playback window changes as the video file plays, the dirty brush region must include a portion of the video window. The electronic device 100 can determine whether the first view is a shared element by judging whether the dirty brush region intersects with the view area of ​​the first view. If they intersect, it is a shared element; if they do not intersect, it is not a shared element.

[0295] S711. Determine whether the view area of ​​the first view is correct based on the view area of ​​the second view.

[0296] Since the longer side of the video playback window is the same length as the shorter side in landscape mode, the electronic device 100 can further confirm whether the first view is a portrait video playback window of a portrait page by using the view area parameters in the view areas of the first and second states.

[0297] When the electronic device 100 determines that there is a side in the first view with the same length as a side in the second view, it determines that the view area of ​​the first view is correct and executes step S715.

[0298] As provided in steps S701 to S710, since the horizontal length of the view area of ​​the first view in the first state is 1228, and the vertical length of the view area of ​​the second view in the second state is 1228, and the first view and the second view have a side of the same length, the view area of ​​the first view is correct, and the electronic device 100 can execute step S715.

[0299] S712. The second view is identified as a shared element.

[0300] The electronic device 100 can identify the second view as a shared element. In this way, the electronic device 100 obtains the view area parameters (including the position and size of the video playback window) of the video playback window in portrait mode. That is, in this case, the second view is the portrait video playback window.

[0301] Optionally, the electronic device 100 may further determine whether the second view is a shared element based on the dirty brush region before identifying it as such. Since the content of the video playback window changes as the video file plays, the dirty brush region must include a portion of the video window. The electronic device 100 can determine whether the second view is a shared element by judging whether the dirty brush region intersects with the view area of ​​the second view. If they intersect, it is a shared element; if they do not intersect, it is not a shared element.

[0302] S713. Determine whether the view area of ​​the second view is correct based on the view area of ​​the first view.

[0303] When the electronic device 100 determines that there is a side in the second view with the same length as a side in the first view, it determines that the view area of ​​the second view is correct and executes step S715.

[0304] S714. Does the view area include the dirty brush area?

[0305] When electronic device 100 determines that none of the view fields of the view in the first state include the first field, electronic device 100 can determine whether the view area of ​​the view includes the dirty brush area based on the dirty brush area information, that is, whether the view area of ​​the view intersects with the dirty brush area. If there is only one intersecting view, then the view is determined as a shared element. If there are multiple intersecting views, then the view with the highest level among the multiple views is determined as a shared element.

[0306] Optionally, when the electronic device 100 determines that none of the view fields of the first state view include the first field, the dirty brush area can be directly used as the view area of ​​the shared element.

[0307] S715. Returns the view area of ​​the shared element.

[0308] Once the electronic device 100 identifies the shared element, it can obtain the view area of ​​the shared element.

[0309] It should be noted that the execution order of the above steps can be changed. For example, step S705 can be executed first, followed by steps S701 to S704. This application does not limit this.

[0310] It should also be noted that some of the above steps are optional, including one or more of steps S706, S707, S711, and S713. That is, the electronic device 100 may choose not to execute one or more of steps S706, S707, S711, and S713. It is understood that when the electronic device 100 does not execute step S706, it may not need to obtain the parent view name of the view. When the electronic device 100 does not execute step S707, it may not need to obtain the parent view name of the view.

[0311] It should also be noted that since the electronic device 100 may not execute step S714, the electronic device 100 may not obtain the dirty brush area information when executing step S701, and obtain the dirty brush area information when executing step S714.

[0312] Because in Figure 4 In the illustrated embodiment, the first state is a portrait mode, and the shared element is the portrait video playback window. The electronic device 100 can... Figure 7The provided process identifies shared element regions and obtains the view area parameters of the portrait video playback window. For example... Figure 7 In the example shown, the view area parameters of the portrait video playback window are "0,103,1228,793".

[0313] Electronic device 100 can also acquire rotated layers (e.g., Figure 2D The screenshot image shown is 232). Among them, the electronic device 100 can obtain the rotation layer in the following ways: (1) The electronic device 100 can directly capture the landscape page to obtain a landscape page screenshot, and then rotate, translate and shrink the landscape page screenshot to obtain a rotation layer located in the portrait video playback window, with the same size as the portrait video playback window and the same video image direction as the portrait video playback window; (2) The electronic device 100 can capture the screenshot image of the view area of ​​the obtained portrait video playback window to obtain the rotation layer.

[0314] Optionally, the electronic device 100 can also set an obscuring layer between the portrait-oriented page screenshot and the rotated layer. For a detailed description of the obscuring layer, please refer to [link to relevant documentation]. Figure 2D The embodiments shown are not described in detail here.

[0315] It should be noted that the electronic device 100 will not display the process of obtaining the rotated layer. After the unfreezing operation, the electronic device 100 can directly display the background layer (i.e., a screenshot of the portrait page), the rotated layer, and the obscuring layer. The layer composition of the interface displayed by the electronic device 100 can be as follows: Figure 6D As shown.

[0316] S107. Play the transition animation and display the landscape page.

[0317] After acquiring the view areas of the rotating layer and the portrait video playback window, the electronic device 100 can begin playing the transition animation. During the playback of the transition animation, the electronic device 100 can target... Figure 6D The rotated layers shown are arranged according to... Figure 8 The switching method shown will rotate the layer from Figure 6D In the vertical video playback window shown, switch to Figure 6E The landscape video playback window shown. Figure 8 As shown, electronic device 100 displays... Figure 6D When the interface shown is displayed, the center of the rotating layer displayed by the electronic device 100 is located at... Figure 8 At the starting point in (a). The size of the rotated layer is the same as the size of the portrait video playback window. The electronic device 100 can be oriented towards... Figure 8In the direction indicated by the dashed arrow (a) (downward), translate the rotated layer, moving the center point of the rotated layer from the starting point to the ending point. During the movement, the electronic device 100 can follow... Figure 8 The rotating layer is rotated in the direction of the solid arrow shown in (a) (clockwise). The electronic device 100 can gradually enlarge the size of the rotating layer during movement. This entire switching process can appear sequentially. Figure 8 The rotated layer shown in (a) Figure 8 The rotated layer shown in (b) Figure 8 The rotated layer shown in (c) Figure 8 The rotating layer is shown in (d). It should be noted that rotating the layer clockwise is merely an example; the electronic device 100 can also control the rotating layer to rotate counter-clockwise, and this embodiment does not limit this. In some examples, the electronic device 100 can be set to rotate the rotating layer clockwise / counter-clockwise. In other examples, the electronic device 100 can set the rotation direction of the rotating layer based on the rotation direction of the electronic device 100. For example, if the electronic device 100 rotates clockwise, the rotation direction of the rotating layer is also clockwise; if the electronic device 100 rotates counter-clockwise, the rotation direction of the rotating layer is also counter-clockwise. For yet another example, if the electronic device 100 rotates clockwise, the rotation direction of the rotating layer is counter-clockwise; if the electronic device 100 rotates counter-clockwise, the rotation direction of the rotating layer is clockwise. It should be noted that if the screen orientation switching input is for the screen orientation switching control, it is impossible to determine whether the rotation direction of the electronic device 100 is clockwise or counter-clockwise. You can directly set the rotation direction of the rotated layer to clockwise or counterclockwise.

[0318] Optional, Figure 6D The layers shown are Figure 6E The layers shown all include landscape pages, but during this process, the landscape pages are obscured, and the user cannot see them. Electronic device 100... Figures 6D to 6E During the process, the landscape page can be omitted from rendering, saving 100% of the rendering power consumption of electronic devices.

[0319] Electronic device 100 can display, after the switching animation has finished playing, the following: Figure 6F The page shown is in landscape mode.

[0320] In some examples, the video frame of the landscape page displayed by the electronic device 100 is smaller than the size of the touchscreen; for example, the electronic device 100 displays a video frame smaller than the touchscreen. Figure 3In the display state shown in (b), when displaying a video image, black borders may exist on the left and right sides of the video image because the aspect ratio of the video image differs from that of the display screen. The electronic device 100 can determine the area of ​​the video image in the landscape video playback window after removing the black borders based on the aspect ratio of the video image and the display screen, and then capture the video image of that area. The electronic device 100 can use the captured video image as a rotation layer. During the movement of the rotation layer, the electronic device 100 only enlarges the rotation layer to the size of the video image in the landscape video playback window.

[0321] It should be noted that because the electronic device 100 takes a certain amount of time to play the transition animation, if the electronic device 100 does not pause the video file during the transition animation, the video displayed on the electronic device 100 in landscape mode will differ from the video displayed in portrait mode. Figure 6F The video frame shown is located in Figure 6A The video footage shown follows.

[0322] In other application scenarios, the electronic device 100 displays a landscape page, which includes a landscape video playback window. When the electronic device 100 receives input to switch to portrait display, it can respond to this input by acquiring and displaying a screenshot of the landscape page. The electronic device 100 can draw a portrait page, including the portrait video playback window, on top of the landscape page. After drawing, it can play a second switching animation on the portrait page. This second switching animation includes operations such as rotation, translation, and scaling on the screenshot of the landscape page, switching from the position of the landscape video playback window to the position of the portrait video playback window. The electronic device 100 can display the portrait page, including the portrait video playback window, when the animation ends. In this way, during the switch from landscape to portrait playback, the electronic device 100 can use the portrait page as a background layer and perform rotation, scaling, and translation operations on the screenshot of the landscape page (in this case, a rotation layer), smoothly switching from the landscape page to the portrait page. Throughout the entire switching process, there is no issue of abruptly changing between landscape and portrait pages without a transition. There will also be no overlap between landscape and portrait pages, making the transition between landscape and portrait modes smoother and more fluid, thus improving the user experience.

[0323] For example, electronic device 100 can display as follows Figure 2G The video playback interface 240 is shown. Upon receiving a screen orientation switch input, the electronic device 100 can, in response to the input, switch its display mode from landscape to portrait. A description of the screen orientation switch input can be found in [link to relevant documentation]. Figures 2C-2G The embodiments shown are not described in detail here.

[0324] Among them, the electronic device 100 can capture the image displayed on the screen when it receives input for switching between portrait and landscape modes, and obtain, for example... Figure 2F The screenshot image 232 shown includes the entire content of the video playback interface 240, and the electronic device 100 can display this screenshot image 232. A drawing is then created on the lower layer of the screenshot image 232. Figure 2C The video playback interface 220 is shown. The screenshot image 232 has a length of a first length and a width of a first width. The electronic device 100 can display the screenshot image 232 on the display screen for placement. Figure 2G The location of the video playback window 241 shown. The screenshot image 232 can be used as follows: Figure 2C The video playback interface 220 shown is completely obscured. The electronic device 100 can rotate the screenshot image 232 90° clockwise / counterclockwise, and during the rotation, shrink and shift the screenshot image 232 upwards. When the screenshot image 232 is rotated 90° clockwise / counterclockwise, its length is reduced to a second length, and its width is reduced to a second width. Specifically, the process of the electronic device 100 switching from portrait to landscape display is as follows: Figure 9 As shown, it will not be elaborated further here.

[0325] Furthermore, to prevent the electronic device 100 from displaying two video images during screen orientation switching, the electronic device 100 can display an obscuring layer between the screenshot image 232 and the video playback interface 220. A description of the obscuring layer can be found in [link to relevant documentation]. Figure 2D The embodiments shown are not described in detail here.

[0326] During the process of rotating the screenshot image 232 on the electronic device 100, the following can appear sequentially: Figure 2F , Figure 2E , Figure 2D The landscape / portrait switching interface 230 is shown. After the electronic device 100 completes the landscape / portrait switching, it can display the following: Figure 2C The video playback interface shown is 220.

[0327] In some embodiments, during the process of switching from landscape to portrait display mode, if the electronic device 100 is playing a video file, the video displayed in landscape mode will differ from the video displayed in portrait mode because the switching operation lasts for a certain duration (e.g., 1 second). Figure 2G The video frame shown is 241A and Figure 2C The video frame 221A shown is different. Video frame 241A is the video frame in the video file that precedes video frame 221A.

[0328] The following is a flowchart illustrating a display method provided in an embodiment of this application.

[0329] like Figure 9 As shown, the display method includes the following steps:

[0330] S901. Electronic device 100 displays a landscape page including a landscape video playback window.

[0331] The electronic device 100 is in landscape mode, displaying a landscape page including a landscape video playback window. The landscape video playback window can be used to play video files.

[0332] Here, the landscape page displayed by electronic device 100 is a single layer. Next, we will... Figure 2G The video playback interface 240 shown is an example, describing the steps of the display method. Specifically, when the electronic device 100 displays... Figure 2G When the video playback interface 240 is shown, the video playback interface 240 includes the following layers: Figure 10A The image shows a portrait-oriented page.

[0333] S902. After receiving the first input to switch to portrait display, the electronic device 100 performs a screen freeze operation.

[0334] The first input can be an input for a switching control in a video playback application.

[0335] In some embodiments, the first input may be an input indicating clockwise (or counterclockwise) rotation of the electronic device 100 to a first angle, and / or an input indicating clockwise (or counterclockwise) rotation of the electronic device 100 to an acceleration reaching a first acceleration. The first angle is a preset angle, such as 45 degrees, 60 degrees, 90 degrees, -45 degrees, -60 degrees, -90 degrees, etc. The first acceleration is a preset angular acceleration. The electronic device 100 can acquire its angle and / or acceleration through sensors (e.g., accelerometer, gyroscope).

[0336] When the electronic device 100 performs a screen freeze operation, the touch screen of the electronic device 100 stops receiving user input.

[0337] In some embodiments, the electronic device 100 may also listen for screen freeze events, or listen for receiving a first input event to obtain layer information of the landscape page. The layer information obtained by the electronic device 100 may include view information of one or more views and dirty brush area information.

[0338] S903. Capture an image of the landscape page to obtain a landscape page screenshot, and display the landscape page screenshot.

[0339] During the screen freeze process, the electronic device 100 can also capture an image of the landscape page and display the captured landscape page screenshot. For example, such as... Figure 10B As shown, electronic device 100 can capture, for example Figure 10A The image of the landscape page is shown, and a screenshot of the landscape page is displayed on top of (or above) the landscape page. The screenshot of the landscape page can obscure the landscape page.

[0340] Alternatively, when the electronic device 100 obtains a screenshot of a landscape page, it can cancel the display of the landscape page and display the screenshot of that landscape page instead.

[0341] S904. Get the portrait page, including the portrait playback window.

[0342] After displaying a landscape page screenshot, electronic device 100 can draw a portrait page, including a portrait playback window, on top of the landscape page screenshot. For example... Figure 10C As shown, the electronic device 100 continues to display a landscape page screenshot, and then draws and displays a portrait page below the landscape page screenshot. Here, the portrait page is the background layer. The portrait page includes a portrait video playback window, which displays the video feed. Optionally, the portrait page may include a status bar.

[0343] S905. Cancel screen freeze operation.

[0344] Once the electronic device 100 has finished drawing the portrait-oriented page, it can cancel the screen freeze operation. After the electronic device 100 cancels the screen freeze operation, its touchscreen can receive user input.

[0345] In some embodiments, when the electronic device 100 is playing a video file, it can pause playback after performing a screen freeze operation. When the electronic device 100 cancels the screen freeze operation, it can resume playback. This way, the video frames remain unchanged during the process of the electronic device 100 acquiring a portrait-oriented page, reducing the number of video frames played during the switching process.

[0346] In some embodiments, the electronic device 100 may also listen for the screen freeze cancellation event, or listen for the portrait page acquisition event to acquire the layer information of the portrait page.

[0347] For a detailed description of steps S901 to S905, please refer to [link / reference]. Figure 4 The embodiments shown are not described in detail here.

[0348] S906. Obtain the view area parameters and rotation layer of the portrait video playback window.

[0349] For a description of how to obtain the view area of ​​the portrait video playback window (i.e., the second view), please refer to [reference needed]. Figure 7 The illustrated embodiments will not be described in detail here. Figure 7 In the provided example, the view area parameters of the portrait video playback window obtained by the electronic device 100 are "0,103,1228,793".

[0350] Electronic device 100 can also acquire rotated layers (e.g., Figure 2F The screenshot image 232 shown is shown. The electronic device 100 can obtain the rotation layer in the following ways: (1) The electronic device 100 can directly use the landscape page screenshot as the rotation layer; (2) When obtaining the view area of ​​the second view (in portrait display state), the electronic device 100 can capture the screenshot image of the view area based on the obtained view area of ​​the portrait video playback window, and rotate, translate and enlarge the screenshot image to obtain a rotation layer with the same size, position and video screen direction as the landscape video playback window.

[0351] Optionally, the electronic device 100 can also set an obscuring layer between the portrait-oriented page screenshot and the rotated layer. For a detailed description of the obscuring layer, please refer to [link to relevant documentation]. Figure 2D The embodiments shown are not described in detail here.

[0352] Here, the layer composition of the interface displayed by the electronic device 100 can be as follows: Figure 10D As shown.

[0353] S907. Play the transition animation to display a portrait-oriented page.

[0354] After acquiring the view area of ​​the rotated layer and shared elements, the electronic device 100 can begin playing a transition animation. During the playback of the transition animation, the electronic device 100 can target... Figure 10D The rotated layers shown are arranged according to... Figure 11 The switching method shown will rotate the layer from Figure 10D In the landscape video playback window shown, switch to Figure 10E The vertical video playback window shown. Figure 11 As shown, electronic device 100 displays... Figure 10D When the interface shown is displayed, the center of the rotating layer displayed by the electronic device 100 is located at... Figure 11 The starting point in (a). The size of the rotated layer is the same as the size of the landscape video playback window. The electronic device 100 can be oriented towards... Figure 11 In the direction indicated by the dashed arrow (a) (counter-clockwise), translate the rotated layer, moving the center point of the rotated layer from the starting point to the ending point. During the movement, the electronic device 100 can follow... Figure 11The rotating layer is rotated in the direction of the solid arrow shown in (a) (counter-clockwise). The electronic device 100 can gradually reduce the size of the rotating layer during movement. This entire switching process can occur sequentially. Figure 11 The rotated layer shown in (a) Figure 11 The rotated layer shown in (b) Figure 11 The rotated layer shown in (c) Figure 11 The rotating layer is shown in (d). It should be noted that rotating the layer counter-clockwise is merely an example; the electronic device 100 can also control the rotating layer to rotate clockwise, and this embodiment does not limit this. In some examples, the electronic device 100 can be set to rotate the rotating layer clockwise / counter-clockwise. In other examples, the electronic device 100 can set the rotation direction of the rotating layer based on the rotation direction of the electronic device 100. For example, if the electronic device 100 rotates clockwise, the rotation direction of the rotating layer is also clockwise; if the electronic device 100 rotates counter-clockwise, the rotation direction of the rotating layer is also counter-clockwise. For yet another example, if the electronic device 100 rotates clockwise, the rotation direction of the rotating layer is counter-clockwise; if the electronic device 100 rotates counter-clockwise, the rotation direction of the rotating layer is clockwise. It should be noted that if the screen orientation switching input is for the screen orientation switching control, it is impossible to determine whether the rotation direction of the electronic device 100 is clockwise or counter-clockwise. You can directly set the rotation direction of the rotated layer to clockwise or counterclockwise.

[0355] After the switching animation finishes playing, the electronic device 100 can display something like this. Figure 2C The video playback interface 220 shown is composed of layers as follows: Figure 10F As shown. Figure 10F As shown, after the electronic device 100 finishes playing the switching animation, it can directly cancel the display of the obscuring layer and the rotating layer, and display the portrait screen page.

[0356] In some examples, the video frame of the landscape page displayed by electronic device 100 is smaller than the screen size; for example, electronic device 100 displays a video frame smaller than the screen size. Figure 3In the display state shown in (b), black borders may exist on the left and right sides of the video frame when displaying the video frame. The electronic device 100 can obtain the aspect ratio of the video frame in the landscape video playback window and the aspect ratio of the display screen. Based on the aspect ratio of the video frame and the display screen, the electronic device 100 can determine the area of ​​the video frame in the landscape video playback window after removing the black borders, and capture the video frame of that area, using the captured image of the video frame as a rotation layer. During the movement of the rotation layer, the electronic device 100 can move, rotate, and shrink the rotation layer from the video frame of the landscape video playback window to the portrait video playback window.

[0357] It should be noted that because the electronic device 100 takes a certain amount of time to play the transition animation, if the electronic device 100 does not pause the video file during the transition animation, the video displayed on the electronic device 100 in portrait mode will differ from the video displayed in landscape mode. Figure 10F The video frame shown is located in Figure 10A The video footage shown follows.

[0358] In one possible implementation, the rotating layer can be a live video feed. This allows the electronic device 100 to achieve smoother, more fluid screen orientation transitions, enhancing the user experience. Furthermore, the electronic device 100 avoids skipping frames of the video file during the transition animation, allowing the user to continue watching the video.

[0359] In some embodiments, when the electronic device 100 switches from portrait display mode to landscape display mode, the electronic device 100 can directly use the landscape page of the real-time video file as a rotating layer. It is understood that since the starting position of the rotating layer is the position of the portrait video playback window, the electronic device 100 needs to first rotate, translate and shrink the landscape page to obtain a landscape page with the same position and size as the portrait video playback window, and then use the obtained landscape page with the same position and size as the portrait video playback window as the rotating layer.

[0360] Specifically, the electronic device 100 displays a portrait page including a portrait video playback window. When receiving input to switch to landscape display, the electronic device 100 responds to this input by capturing a screenshot of the portrait page and then capturing a landscape page including the landscape video playback window. The electronic device 100 can shrink, rotate, and move the landscape page to the position of the landscape video playback window, ensuring that the size, position, and video orientation of the landscape video playback window after these operations are identical to those of the portrait video playback window. Then, the electronic device 100 can display the screenshot of the portrait page and, on the screenshot, perform rotation, translation, and zoom operations on the transformed landscape page from the position of the portrait video playback window to the position of the landscape video playback window. The position and size of the landscape page after the switch are identical to those of the landscape page captured by the electronic device 100. It can be understood that when the switching animation of the electronic device 100 ends, the landscape video playback window will have switched back to its original view area and be displayed. In this way, the electronic device 100 can smoothly switch from portrait to landscape playback mode by using a screenshot of the portrait page as a background and rotating, zooming, and panning only the currently playing video frame. Throughout the entire switching process, the electronic device 100 can still display the video frame of the playing video file on the screen in real time, avoiding the situation of skipping some video frames during the switching process.

[0361] For example, when electronic device 100 displays as Figure 2C When the video playback interface 220 is shown, the electronic device 100 can receive user requests for... Figure 2C The input of the switching icon 221B shown above, in response to the input, performs the operation of switching the electronic device 100 from portrait display mode to landscape display mode.

[0362] Among them, electronic device 100 can receive user requests for... Figure 2C When the switch icon 221B shown is clicked (e.g., clicked), an image of the video playback interface 220 is captured, resulting in a screenshot image. The screenshot image includes all page content of the video playback interface 220. The electronic device 100 can display this screenshot image. When the electronic device 100 displays the screenshot image, the composition of the displayed layers can be as follows: Figure 6B As shown, the screenshot image is Figure 6B The background layer shown is in a portrait-oriented screenshot. Optionally, the electronic device 100 may also display a background layer below the background layer. Figure 6B The image shows a portrait-oriented page.

[0363] The electronic device 100 can also draw a landscape page, including a landscape video playback window, on top of the screenshot image. A description of the landscape page can be found here. Figure 2G Description of the video playback interface 240 displayed by the electronic device 100. Here, the electronic device 100 can display, as shown... Figure 6C The landscape page and background layer shown (screenshot of portrait page).

[0364] Electronic device 100 can shrink, move, and rotate landscape pages to obtain a similar effect. Figure 2C The video playback window 221 shown is a landscape page with the same position and size. It should be noted that the electronic device 100 does not display the process of shrinking, moving, and rotating the landscape page; therefore, the user will not see the process of shrinking the landscape page. For example, the electronic device 100 can display something like... Figure 12A The image shows a background layer (portrait screenshot), an obscuring layer, and a rotating layer (landscape screenshot). The size and position of the rotating and obscuring layers are the same as the portrait video playback window. The rotating layer is a landscape screenshot that has been scaled down, moved, and rotated. The obscuring layer is a preset image. The preset image can be any color (e.g., black, white, etc.), or it can be an image including a specified pattern.

[0365] Afterwards, electronic device 100 can switch the screen to landscape mode. Figure 2C The video playback window at position 221, after rotation, translation, and zooming, yields the following result: Figure 2G The video playback interface 240 shown is an example. For instance, electronic device 100 can display a video playback interface such as... Figure 12B The image shows a background layer (portrait screenshot), an overlay layer, and a rotated layer (landscape screenshot). The rotated layer is the same size as the portrait page. It's understandable that when the rotated layer is rotated to... Figure 12B When the style shown is displayed, the electronic device 100 can cancel the display of the background layer and the occlusion layer, and only display the rotation layer.

[0366] During the process of switching the landscape page from a portrait video playback window to a landscape video playback window, the electronic device 100 can display sequentially... Figure 13A The landscape / portrait switching interface shown is 1301. Figure 13B The landscape / portrait screen switching interface shown is 1301.

[0367] like Figure 13A As shown, the landscape / portrait switching interface 1301 includes a background layer 1310, an obscuring layer 1311, and a rotation layer 1313. The rotation layer 1313 is obtained from the landscape page, which includes the landscape video playback window where the video is currently playing. Therefore, the video frame 1313A in the rotation layer 1313 is... Figure 2C The video frame 221A shown is different. Video frame 1313A is the video frame located after video frame 221A in the video file.

[0368] like Figure 13B As shown, the landscape / portrait switching interface 1301 includes a background layer 1310, an obscuring layer 1311, and a rotation layer 1313. The rotation layer 1313 is obtained from the landscape page, which includes the landscape video playback window where the video is currently playing. Therefore, the video frame 1313B in the rotation layer 1313 is... Figure 13A The video frame 1313A shown is different. Video frame 1313B is the video frame that follows video frame 1313A in the video file.

[0369] After the screen orientation switch is completed, that is, after the rotated layer 1313 is adjusted to match the position and size of the landscape video playback window, the electronic device 100 can display the following: Figure 2G The video playback interface shown is 240.

[0370] In addition to the description of obtaining the rotation layer, the specific process description of the electronic device 100 switching from portrait to landscape display mode and the description of identifying shared element areas can be found in [reference needed]. Figures 4 to 8 The embodiments shown are not described in detail here.

[0371] In some embodiments, the size of the video frame on the landscape page may be smaller than the size of the touch screen. Due to the size difference between the video frame on the landscape page and the touch screen, black bars may appear on the left and right sides of the video frame. The electronic device 100 can obtain the aspect ratio of the video frame on the landscape page and the aspect ratio of the display screen. Based on the aspect ratio of the video frame and the aspect ratio of the display screen, the electronic device 100 can determine the area of ​​the video frame in the landscape video playback window after removing the black bars. The electronic device 100 can switch the content of the area of ​​the landscape page other than the video frame from a visible state (e.g., 0% transparency) to an invisible state (e.g., 100% transparency). The video frame on the landscape page is shrunk to the same size as the portrait video playback window, and the video frame on the landscape page is rotated and moved to the portrait video playback window, and then the landscape page is used as a rotating layer. When playing the transition animation, the electronic device 100 can rotate, move, and enlarge the rotating layer to the area of ​​the landscape page, and then switch the invisible part from an invisible state to a visible state. In this way, black bars can be avoided during the transition process.

[0372] In other embodiments, when the electronic device 100 switches from landscape to portrait display mode, it can first capture and display a screenshot of the landscape page and then obtain the portrait page. Afterward, the electronic device 100 can use the screenshot of the portrait page as a background layer and the portrait page as a rotation layer. It is understood that, since the video window starts at the same position as the landscape video playback window when switching from landscape to portrait display mode, the electronic device 100 needs to first switch the portion of the portrait page other than the portrait video playback window from a visible state to an invisible state. Then, the portrait page is rotated, translated, and enlarged to transform the portrait video playback window of the portrait page to have the same position, size, and video orientation as the landscape video playback window, and finally, the transformed portrait page is used as a rotation layer.

[0373] Specifically, the electronic device 100 displays a landscape page including a landscape video playback window. When receiving input to switch to portrait display, the electronic device 100 responds to this input by acquiring and displaying a screenshot of the landscape page. It then draws a portrait page, including the portrait video playback window, below the landscape page screenshot. Once the electronic device 100 has drawn the complete portrait page, it can capture an image of the portrait page and use the screenshot as a background layer, while using the portrait page as a rotation layer. The electronic device 100 can rotate, move, and zoom the portrait page, transforming the portrait video playback window from a first area to a second area. The first area is the display area of ​​the portrait video playback window on the portrait page. The second area is the display area of ​​the landscape video playback window on the landscape page. It is understood that the position and size of the transformed portrait video playback window are the same as in the first area. The electronic device 100 does not display the process of the portrait video playback window transforming from the first area to the second area.

[0374] The electronic device 100 can also make all page content except for the portrait video playback window invisible (e.g., set the transparency to 100%) on the portrait page. Then, it performs rotation, movement, and scaling operations on the portrait page to change the portrait video window from the second area to the first area. After the portrait video window changes from the second area to the first area, the electronic device 100 can make all page content except for the portrait video playback window visible (e.g., set the transparency to 0%). The electronic device 100 can display the process of changing the portrait video window from the second area to the first area, during which the portrait video playback window of the electronic device 100 continues to play the video file. In this way, the electronic device 100 can smoothly switch from a landscape to a portrait page by using a screenshot of the portrait page as the background and the screenshot as a rotating layer. During the process of switching from landscape to portrait display mode, the electronic device 100 can still display the video frame of the video file being played on the screen in real time, avoiding skipping some video frames of the video file during the switching process, and making it easier for users to watch the video frame continuously.

[0375] For example, when electronic device 100 displays as Figure 2G When the video playback interface 240 is displayed, the electronic device 100 can receive input from the user to switch between landscape and portrait modes. In response to this input, the electronic device 100 performs an operation to switch from landscape to portrait display mode. Here, the input for switching between landscape and portrait modes can be an input to a switching control for a landscape page (not shown in the figure), or it can be an input to rotate the electronic device 100. For details, please refer to [link to relevant documentation]. Figures 2C to 2G The embodiments shown are not described in detail here.

[0376] Among them, the electronic device 100 can intercept the input when it receives input for switching between portrait and landscape modes. Figure 2G The image of the video playback interface 240 shown is displayed, along with a screenshot of that video playback interface 240. The electronic device 100 can, as shown... Figure 10B The screenshot image is displayed at the top of the landscape page, or the electronic device 100 may display only the screenshot image.

[0377] Electronic device 100 can draw a portrait-oriented page, including a portrait video playback window, below the screenshot image, such as... Figure 14A As shown, the electronic device 100 can display screenshots of both portrait and landscape pages.

[0378] Electronic device 100 can, after drawing a portrait-oriented page, obtain the view area of ​​the portrait-oriented video window on the portrait-oriented page, and also obtain a screenshot of the portrait-oriented page. Electronic device 100 can display the screenshot of the portrait-oriented page at the bottom of the portrait-oriented page, such as... Figure 14B As shown. In some embodiments, the electronic device 100 can set the landscape page screenshot to an invisible or transparent state (for example, setting the transparency of the landscape page screenshot to 100%), and then capture the image on the screen to obtain a portrait page screenshot. It should be noted that, not limited to portrait page screenshots, the electronic device 100 can also acquire the image of the portrait page through HWC and use this image as a background layer. In this way, the electronic device 100 can obtain the background layer without taking a screenshot.

[0379] Since the current display mode is horizontal, the electronic device 100 needs to switch to portrait mode to obtain a portrait video playback window with the same position and size as the horizontal video playback window. The electronic device 100 can rotate, pan, and zoom the portrait page to obtain a similar display. Figure 14C The rotating layer shown has its visible portion matching the view area of ​​the landscape video playback window. It should be noted that, to prevent page elements other than the video window (e.g., video selection, status bar, etc.) from appearing during the transition from the landscape to the portrait video playback window's view area, the electronic device 100 can switch the visible portion of the page (excluding the view area of ​​the portrait video playback window) to an invisible state, such as... Figure 14C The invisible portions A and B shown are both set to transparent (e.g., with an opacity of 100%). It is understood that the portrait video playback window is the visible portion, and here, the rotating layer is the portrait page. It should be noted that the electronic device 100 does not display the process of transforming the portrait page to the landscape video playback window.

[0380] Then, the electronic device 100 can rotate the layer from Figure 2G The video playback window at position 241, after being rotated, translated, and scaled down, becomes as shown below. Figure 2C The video playback interface 220 shown is an example. For instance, the electronic device 100 can display a video playback interface such as... Figure 14D The image shows a background layer (portrait screenshot), an obscuring layer, and a rotating layer (portrait screenshot, which includes invisible portion A and invisible portion B). The rotating layer is the same size as the portrait screenshot. It is understandable that when the rotating layer is transformed... Figure 14DWhen the style shown is displayed, the electronic device 100 can hide the background layer and the obscuring layer, displaying only the rotating layer. It should be noted that when the electronic device 100 displays only the rotating layer, it can switch the invisible portions A and B of the rotating layer (portrait page) from invisible to visible. Optionally, some portrait pages may not include the invisible portion B.

[0381] During the process of switching the rotating layer from a landscape video playback window to a portrait video playback window, the electronic device 100 can display sequentially... Figure 13B The landscape / portrait switching interface shown is 1301. Figure 13A The landscape / portrait switching interface shown is 1301. Figure 13B As shown, the landscape / portrait switching interface 1301 includes a background layer 1310, an obscuring layer 1311, and a rotation layer 1313. The rotation layer 1313 is obtained from the portrait screen page. Since the portrait screen video playback window is playing a video, the content of the rotation layer 1313 (the video frame displayed in the portrait screen video playback window) changes as the video file plays. Therefore, the video frame 1313B in the rotation layer 1313 and... Figure 2G The video frame 241A shown is different. Video frame 1313B is the video frame located after video frame 241A in the video file.

[0382] like Figure 13A As shown, the landscape / portrait switching interface 1301 includes a background layer 1310, an obscuring layer 1311, and a rotation layer 1313. The rotation layer 1313 is obtained from the portrait screen page. Since the portrait screen video playback window is currently playing a video, the content of the rotation layer 1313 (the video frame displayed in the portrait screen video playback window) changes as the video file plays. Therefore, the video frame 1313A in the rotation layer 1313 and... Figure 13B The video frame 1313B shown is different. Therefore, the video frame 1313B in the rotated layer 1313 is different from... Figure 13A The video frame 1313A shown is different. Video frame 1313A is the video frame located after video frame 1313B in the video file.

[0383] After the screen orientation switch is completed, that is, when the rotated layer 1313 is transformed to match the portrait screen page, the electronic device 100 can display as shown below. Figure 2C The video playback interface shown is 220.

[0384] In addition to the description of obtaining the rotation layer, the specific process description of the electronic device 100 switching from landscape display mode to portrait display mode and the description of identifying shared element areas can be found in [the relevant documentation]. Figures 9 to 11 The embodiments shown are not described in detail here.

[0385] In other embodiments, when the electronic device 100 switches from a landscape display state to a portrait display state, the rotating layer includes an image of the portrait video playback window captured at a first frequency. It is understood that, since the video window starts at the same position as the landscape video playback window when switching from a landscape display state to a portrait display state, the electronic device 100 needs to first rotate, translate, and shrink the image of the portrait video playback window to obtain an image of the portrait video playback window with the same position, size, and video orientation as the landscape video playback window. The first frequency can be a preset frequency, for example, capturing 10 frames per second. Alternatively, the first frequency can be the frame rate of the video frame.

[0386] Specifically, the electronic device 100 displays a landscape page including a landscape video playback window. When receiving input to switch to portrait display, the electronic device 100 can, in response to this input, acquire and display a screenshot of the landscape page. The electronic device 100 can then draw a portrait page, including the portrait video playback window, below the landscape page screenshot. Subsequently, the electronic device 100 can place a rotation layer on the portrait page, the rotation layer including an image of the portrait video playback window captured at a first frequency.

[0387] Since the rotation layer is initially located in the landscape video playback window, and its size and the orientation of the displayed image are the same as those of the landscape video playback window, the electronic device 100 can perform rotation, translation, and zoom operations on the captured image, placing the image in the landscape video playback window. After being zoomed in, rotated, and moved, the size and position of the image are identical to those of the landscape video playback window. Then, the electronic device 100 can cancel the landscape screenshot and display the rotation layer at the top of the portrait page. The electronic device 100 can also rotate, translate, and zoom the rotation layer at the top of the portrait page from its position in the landscape video window to its position in the portrait video playback window. After the switch, the rotation layer's position and size are identical to those of the portrait video playback window. It can be understood that the size, position, and orientation of the image captured by the electronic device 100 in the portrait video playback window change with the rotation layer.

[0388] Understandably, the live image can be de-displayed when the switching animation on electronic device 100 ends. This allows electronic device 100 to smoothly switch from landscape to portrait mode, using the portrait page as a background and capturing a rotating layer of the video frame from the portrait playback window. Throughout the switching process, electronic device 100 can still display the video frame of the playing video file on the screen in real time, avoiding skipping video frames during the transition.

[0389] For example, when electronic device 100 displays as Figure 2G When the video playback interface 240 is displayed, the electronic device 100 can receive input from the user to switch between landscape and portrait modes. In response to this input, the electronic device 100 performs an operation to switch from landscape to portrait display mode. Here, the input for switching between landscape and portrait modes can be an input to a switching control for a landscape page (not shown in the figure), or it can be an input to rotate the electronic device 100. For details, please refer to [link to relevant documentation]. Figures 2C to 2G The embodiments shown are not described in detail here.

[0390] Among them, the electronic device 100 can intercept the input when it receives input for switching between portrait and landscape modes. Figure 2G The image of the video playback interface 240 shown is displayed, along with a screenshot of that video playback interface 240. The electronic device 100 can, as shown... Figure 10B The screenshot image is displayed at the top of the landscape page, or the electronic device 100 may display only the screenshot image.

[0391] Electronic device 100 can draw a portrait-oriented page, including a portrait video playback window, below the screenshot image, such as... Figure 10C As shown, the electronic device 100 can display screenshots of both portrait and landscape pages. The portrait page is the background layer.

[0392] After drawing a portrait-oriented page, electronic device 100 can obtain the view area of ​​the portrait-oriented video window on the page, and based on this view area, capture an image of the portrait-oriented video playback window to obtain a screenshot of the portrait-oriented video playback window. Since the current display mode is changed from landscape to portrait, electronic device 100 needs to obtain a rotated layer identical to the landscape video playback window area. Electronic device 100 can rotate, translate, and zoom the screenshot of the portrait-oriented video playback window to obtain... Figure 15A The rotating layer shown has the same view area as the landscape video playback window. It should be noted that the electronic device 100 does not display the process of transforming a screenshot from the portrait video playback window to the landscape video playback window.

[0393] Then, the electronic device 100 can rotate the layer from Figure 2G The video playback window at position 241, after being rotated, translated, and scaled down, becomes as shown below. Figure 2C The video playback interface 220 shown is an example. For instance, the electronic device 100 can display a video playback interface such as... Figure 15B The image shows a background layer (portrait screen), an obscuring layer, and a rotating layer (screenshot of the portrait video playback window). The size of the rotating layer is the same as the size of the portrait video playback window. It is understandable that when the rotating layer is transformed... Figure 15BWhen the style shown is displayed, the electronic device 100 can cancel the display of the rotation layer and the occlusion layer, and only display the background layer.

[0394] During the process of switching the rotating layer from a landscape video playback window to a portrait video playback window, the electronic device 100 can display sequentially... Figure 13B The landscape / portrait switching interface shown is 1301. Figure 13A The landscape / portrait switching interface shown is 1301. Figure 13B As shown, the landscape / portrait switching interface 1301 includes a background layer 1310, an obscuring layer 1311, and a rotation layer 1313. The rotation layer 1313 is obtained by taking a screenshot from the portrait video playback window. Since the portrait video playback window is currently playing video, the content of the screenshot will change as the video frame in the portrait video playback window changes. Therefore, the video frame 1313B in the rotation layer 1313 and... Figure 2G The video frame 241A shown is different. Video frame 1313B is the video frame located after video frame 241A in the video file.

[0395] like Figure 13A As shown, the landscape / portrait switching interface 1301 includes a background layer 1310, an obscuring layer 1311, and a rotation layer 1313. The rotation layer 1313 is obtained by taking a screenshot from the portrait video playback window. Since the portrait video playback window is currently playing video, the content of the screenshot will change as the portrait video playback window changes. Therefore, the video frame 1313A in the rotation layer 1313 and... Figure 13B The video frame 1313B shown is different. Therefore, the video frame 1313B in the rotated layer 1313 is different from... Figure 13A The video frame 1313A shown is different. Video frame 1313A is the video frame located after video frame 1313B in the video file.

[0396] After the screen orientation switch is completed, that is, after the rotating layer 1313 is transformed to match the view area of ​​the portrait video playback window, the electronic device 100 can display as shown below. Figure 2C The video playback interface shown is 220.

[0397] In addition to the description of obtaining the rotation layer, the specific process description of the electronic device 100 switching from landscape display mode to portrait display mode and the description of identifying shared element areas can be found in [the relevant documentation]. Figures 9 to 11 The embodiments shown are not described in detail here.

[0398] In one possible implementation, when switching from landscape to portrait mode, the electronic device 100 must capture and transform the video frames of the portrait video window, drawing both the content of the portrait video window and the content of the rotation layer. The power consumption required to display the video frame captured at the first frequency during the switch from landscape to portrait mode is higher than the power consumption required to display the live video frame during the switch from portrait to landscape mode. Therefore, to save power, the electronic device 100 can use a single frame of the video frame as the rotation layer during the switch from landscape to portrait mode. Alternatively, it can use the live video frame as the rotation layer during the switch from portrait to landscape mode. The specific description of the landscape / portrait switching process of the electronic device 100 is as shown in the above embodiment and will not be repeated here.

[0399] The following describes the electronic device 100 provided in the embodiments of this application.

[0400] Electronic device 100 may be a mobile phone, tablet computer, desktop computer, laptop computer, handheld computer, notebook computer, ultra-mobile personal computer (UMPC), netbook, as well as cellular phone, personal digital assistant (PDA), augmented reality (AR) device, virtual reality (VR) device, artificial intelligence (AI) device, wearable device, in-vehicle device, smart home device and / or smart city device. The embodiments of this application do not impose any special restrictions on the specific type of electronic device.

[0401] Figure 16A schematic diagram of the structure of electronic device 100 is shown. Electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, antenna 1, antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor module 180, buttons 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0402] It is understood that the structures illustrated in the embodiments of the present invention do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0403] 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, video codecs, digital signal processors (DSPs), baseband processors, and / or neural network processing units (NPUs). These different processing units may be independent devices or integrated into one or more processors.

[0404] The controller can generate operation control signals based on the instruction opcode and timing signals to complete the control of instruction fetching and execution.

[0405] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

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

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

[0408] The charging management module 140 receives charging input from a charger. The charger can be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 receives charging input from the wired charger via the USB interface 130. In some wireless charging embodiments, the charging management module 140 receives wireless charging input via the wireless charging coil of the electronic device 100. While charging the battery 142, the charging management module 140 can also supply power to the electronic device via the power management module 141.

[0409] The power management module 141 connects the battery 142, the charging management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, providing power to the processor 110, internal memory 121, display screen 194, camera 193, and wireless communication module 160, etc. The power management module 141 can also monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage current, impedance). In some other embodiments, the power management module 141 may also be located within the processor 110. In other embodiments, the power management module 141 and the charging management module 140 may be located in the same device.

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

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

[0412] The mobile communication module 150 can provide solutions for wireless communication, including 2G / 3G / 4G / 5G, applied to the electronic device 100. 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 the 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.

[0413] The modem processor may include a modulator and a demodulator. The modulator modulates the low-frequency baseband signal to be transmitted into a mid-to-high frequency signal. The demodulator demodulates the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After processing by the baseband processor, the low-frequency baseband signal is transmitted to the application processor. The application processor outputs sound signals through an audio device (not limited to speaker 170A, receiver 170B, etc.) or displays images or videos through the display screen 194. In some embodiments, the modem processor may be a separate device. In other embodiments, the modem processor may be independent of the processor 110 and may be housed in the same device as the mobile communication module 150 or other functional modules.

[0414] The wireless communication module 160 can provide solutions for wireless communication applications on the electronic device 100, 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.

[0415] In some embodiments, antenna 1 of electronic device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, enabling electronic device 100 to communicate with networks and other devices via wireless communication technology. The wireless communication technology may include Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Time Division Code Division Multiple Access (TD-SCDMA), Long Term Evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technologies, etc. The GNSS may include the Global Positioning System (GPS), the Global Navigation Satellite System (GLONASS), the BeiDou Navigation Satellite System (BDS), the Quasi-Zenith Satellite System (QZSS), and / or satellite-based augmentation systems (SBAS).

[0416] Electronic device 100 implements display functions through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations and for graphics rendering. Processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0417] Display screen 194 is used to display images, videos, etc. Display screen 194 includes a display panel. The display panel may be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a miniature LED, a microLED, a quantum dot light-emitting diode (QLED), etc. In some embodiments, electronic device 100 may include one or N displays 194, where N is a positive integer greater than 1.

[0418] Electronic device 100 can perform shooting functions through ISP, camera 193, video codec, GPU, display 194 and application processor.

[0419] The ISP (Image Signal Processor) is used to process data fed back from the camera 193. For example, when taking a picture, the shutter is opened, and light is transmitted through the lens to the camera's photosensitive element. The light signal is converted into an electrical signal, and the camera's photosensitive element transmits the electrical signal to the ISP for processing, converting it into an image visible to the naked eye. The ISP can also perform algorithmic optimization on image noise and brightness. The ISP can also optimize parameters such as exposure and color temperature of the shooting scene. In some embodiments, the ISP can be set in the camera 193.

[0420] Camera 193 is used to capture still images or videos. An object passes through the lens to generate an optical image that is projected onto a photosensitive element. The photosensitive element converts the light signal into an electrical signal, which is then passed to an ISP (Internet Service Provider) for conversion into a digital image signal. The ISP outputs the digital image signal to a DSP (Digital Signal Processor) for processing. The DSP converts the digital image signal into image signals in standard formats such as RGB and YUV. In some embodiments, the electronic device 100 may include one or N cameras 193, where N is a positive integer greater than 1.

[0421] Digital signal processors (DSPs) are used to process digital signals. Besides digital image signals, they can also process other digital signals. For example, when electronic device 100 selects a frequency, the DSP can perform Fourier transforms on the frequency energy.

[0422] Video codecs are used to compress or decompress digital video. Electronic device 100 may support one or more video codecs. Thus, electronic device 100 can play or record videos in various encoding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

[0423] An NPU (Neural Processing Unit) is a computational processor for neural networks (NNs). By borrowing the structure of biological neural networks, such as the transmission patterns between neurons in the human brain, it can rapidly process input information and continuously learn on its own. NPUs enable intelligent cognitive applications in electronic devices, such as image recognition, facial recognition, speech recognition, and text understanding.

[0424] 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 electronic device 100 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, at least one application program required for a function (such as sound playback, image playback, etc.), etc. The data storage area may store data created during the use of electronic device 100 (such as audio data, phonebook, 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, universal flash storage (UFS), etc.

[0425] Electronic device 100 can implement audio functions, such as music playback and recording, through audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, and application processor.

[0426] Audio module 170 is used to convert digital audio information into analog audio signal output, and also to convert analog audio input into digital audio signal. Speaker 170A, also called a "loudspeaker," is used to convert audio electrical signals into sound signals. Receiver 170B, also called a "handpiece," is used to convert audio electrical signals into sound signals. Microphone 170C, also called a "microphone" or "microphone unit," is used to convert sound signals into electrical signals.

[0427] The 170D headphone jack is used to connect wired headphones. The 170D headphone jack can be a USB 130 interface or a 3.5mm Open Mobile Terminal Platform (OMTP) standard interface, a CTIA (Cellular Telecommunications Industry Association of the USA) standard interface.

[0428] When pressure sensor 180A is used to sense pressure signals, it can convert the pressure signals into electrical signals. In some embodiments, pressure sensor 180A may be located on display screen 194.

[0429] The gyroscope sensor 180B can be used to determine the motion attitude of the electronic device 100. In some embodiments, the gyroscope sensor 180B can determine the angular velocity of the electronic device 100 about three axes (i.e., the x, y, and z axes). The gyroscope sensor 180B can be used for image stabilization. For example, when the shutter is pressed, the gyroscope sensor 180B detects the angle of the shake of the electronic device 100, calculates the distance that the lens module needs to compensate based on the angle, and allows the lens to counteract the shake of the electronic device 100 by moving in the opposite direction, thus achieving image stabilization. The gyroscope sensor 180B can also be used in navigation and motion-sensing game scenarios.

[0430] The barometric pressure sensor 180C is used to measure barometric pressure. The magnetic sensor 180D includes a Hall effect sensor and can be used to detect the opening and closing of the flip cover.

[0431] The 180E accelerometer can detect the magnitude of acceleration of electronic device 100 in various directions (typically three axes). When electronic device 100 is stationary, it can detect the magnitude and direction of gravity. It can also be used to identify the posture of electronic devices and applied to applications such as screen orientation switching and pedometers.

[0432] A proximity sensor 180F is used to measure distance. A proximity sensor 180G can also be used for automatic unlocking and locking in folding / pocket modes. An ambient light sensor 180L is used to sense ambient light levels. A fingerprint sensor 180H is used to collect fingerprints. A temperature sensor 180J is used to detect temperature. A touch sensor 180K, also called a "touch panel," can be located on the display screen 194. The touch sensor 180K and the display screen 194 together form a touchscreen, also called a "touch screen." The touch sensor 180K is used to detect touch operations applied to or near it. The touch sensor can transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194. In some embodiments, the touch sensor 180K can also be located on the surface of the electronic device 100, in a different position than the display screen 194. A bone conduction sensor 180M can acquire vibration signals. Buttons 190 include a power button, volume buttons, etc. A motor 191 can generate vibration cues. Indicator 192 can be an indicator light, used to indicate charging status, battery level changes, or to indicate messages, missed calls, notifications, etc. SIM card interface 195 is used to connect a SIM card.

[0433] The following is a software structure diagram of the electronic device 100 provided in the embodiments of this application.

[0434] The software system of electronic device 100 can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This embodiment of the invention uses a layered operating system as an example to exemplify the software structure of electronic device 100.

[0435] Figure 17 This is a software structure block diagram of the electronic device 100 according to an embodiment of the present invention.

[0436] A layered architecture divides software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the operating system is divided into four layers, from top to bottom: the application layer, the application framework layer, the runtime and system libraries, and the kernel layer.

[0437] The application layer can include a series of application packages.

[0438] like Figure 17As shown, the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, and SMS. Among them, the video application can be used to provide data for synthesizing a portrait page including a portrait video playback window and a landscape page including a landscape video playback window. The display method provided in this application embodiment can be used to provide a portrait / landscape switching animation for the video application. It should be noted that this is not limited to video applications; browser applications, news applications, and other applications that can provide video playback functionality can also be used to provide data for synthesizing a portrait page including a portrait video playback window and a landscape page including a landscape video playback window. The display method provided in this application embodiment can be used to provide portrait / landscape switching animations for these applications. Video applications, browser applications, news applications, etc., can be referred to as the first application.

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

[0440] like Figure 17 As shown, the application framework layer may include a window manager, content provider, view system, phone manager, resource manager, notification manager, screen rotation module, input module, etc.

[0441] The input module can be used to detect user input when switching between portrait and landscape modes, and to notify the window manager when such input is detected.

[0442] The window manager is used to manage window programs. The window manager can obtain the screen size, determine if a status bar exists, lock the screen, and capture screen images, etc. In this embodiment, the window manager can be used to capture the screen and obtain a background layer or a rotation layer. The window management module can also be used to perform screen freeze operations and unfreeze operations, and after unfreezing the screen, play a landscape / portrait switching animation.

[0443] A content provider is used to store and retrieve data, making that data accessible to applications. The data may include videos, images, audio, made and received phone calls, browsing history and bookmarks, phone books, etc. In this embodiment, the content provider may be used to provide video data.

[0444] A view system includes visual controls, such as controls for displaying text and controls for displaying images. View systems can be used to build applications. A display interface can consist of one or more views. For example, a display interface including a text notification icon could include views for displaying text and views for displaying images.

[0445] The phone manager is used to provide communication functions for electronic device 100. For example, it manages call status (including connection and disconnection).

[0446] The file explorer provides applications with various resources, such as localized strings, icons, images, layout files, video files, and more.

[0447] The notification manager allows applications to display notifications in the status bar. These notifications can be used to deliver informational messages and can disappear automatically after a short pause, requiring no user interaction. For example, the notification manager can be used to notify users of completed downloads or message alerts. The notification manager can also display notifications as icons or scrolling text in the top status bar, such as notifications from background applications, or as dialog boxes on the screen. Examples include displaying text messages in the status bar, emitting sounds, vibrating electronic devices, and flashing indicator lights.

[0448] The screen rotation module can be used to call the page composition module to composite the page displayed after a landscape / portrait screen switching operation when receiving notification messages from the window management module. The screen rotation module can also be used to transmit the data for the composite switching animation (e.g., the switched page, the display area of ​​shared elements, etc.) to the animation module and notify the animation module to load the switching animation.

[0449] It should be noted that the module division of the above application framework layer is merely an example and does not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer modules than illustrated, or some modules may be merged, some modules may be split, or different module arrangements may be used. For example, the input module may be merged with the window manager, etc. Furthermore, all modules in these application framework layers used to synthesize screen orientation switching animations can be collectively referred to as screen orientation switching units, and this application does not limit this.

[0450] The runtime environment can refer to all the code libraries, frameworks, etc., required for a program to run. For example, for the C language, the runtime includes a series of function libraries required for C programs to run. For the Java language, the runtime includes the core libraries and the virtual machine; the core libraries can include the functionalities that the Java language needs to call. 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.

[0451] The system library may include multiple functional modules. For example, a surface manager, media libraries, a 3D graphics processing library (e.g., OpenGL ES), and a 2D graphics engine (e.g., SGL). In this embodiment, the 3D graphics processing library includes SurfaceFlinger, which can be used to acquire layer information and determine the view area of ​​shared elements.

[0452] The Surface Manager is used to manage the display subsystem and provides the blending of 2D and 3D layers for multiple applications.

[0453] The media library supports playback and recording of various common audio and video formats, as well as still image files. It supports multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG.

[0454] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0455] A 2D graphics engine is a graphics engine for 2D drawing.

[0456] The kernel layer is the layer between hardware and software. The kernel layer contains at least the display driver, camera driver, audio driver, and sensor driver.

[0457] The following is a schematic diagram of a module of an electronic device 100 provided in an embodiment of this application.

[0458] like Figure 18 As shown, the electronic device 100 may include: a SurfaceFlinger module, a windowmanagerservice (WMS) module, an animation (Huawei Animation, Hwanimation) module, an input module, and a screen rotation module.

[0459] The input module can be used to recognize user input indicating a change in screen orientation (portrait or landscape). When the input module detects this input, it can notify the window management module to begin the screen orientation change operation. This input can include, but is not limited to, input to screen orientation control (e.g., ...). Figure 2CThe input to the switching control 221B shown can be an input indicating that the electronic device 100 is rotated clockwise or counterclockwise to a first angle, or an input indicating that the acceleration of the rotating electronic device 100 reaches a first acceleration, etc. If the screen orientation switching input is for the screen orientation switching control, providing the screen orientation switching control input can send the screen orientation switching input event to the input module. Upon receiving the screen orientation switching input event, the input module can notify the window management module to begin the screen orientation switching operation. The input module receiving the screen orientation switching input event can be understood as the input module detecting the screen orientation switching input.

[0460] The window management module can be used to notify the screen rotation module to obtain the page to be displayed after switching between portrait and landscape modes when it receives a notification from the input module. The window management module can also be used to perform screen freeze and unfreeze operations, as well as to capture and display screen images during the freeze process. Furthermore, the window management module can be used to notify the page composition module to obtain layer information for the first state when it receives a notification from the input module or performs a screen freeze operation; and to notify the page composition module to obtain layer information for the second state when the screen freeze operation is canceled. In some examples, the window management module can cancel the screen freeze operation when it receives a page drawing message from the screen rotation module; the page drawing message is used to instruct the page composition module to complete the drawing of the page after the switch. For a detailed description of the operations performed by the window management module, please refer to [link to relevant documentation]. Figure 4 The embodiments shown are not described in detail here.

[0461] The screen rotation module can be used to receive notification messages from the window management module and call the page composition module to synthesize the page displayed after a landscape / portrait switching operation. Specifically, if the landscape / portrait switching operation is a switch from landscape display mode to portrait display mode, the page composition module will synthesize a portrait page; if the operation is a switch from portrait display mode to landscape display mode, the page composition module will synthesize a landscape page.

[0462] In some examples, the screen rotation module can determine whether the page displayed after a landscape / portrait switching operation is a landscape or portrait page through a notification message, and then synthesize the corresponding page through a page composition module. The notification message may include landscape / portrait switching information, which can be used to instruct the electronic device 100 to switch from landscape to portrait display mode, or vice versa. For example, this landscape / portrait switching information may include a delta value.

[0463] The screen rotation module can also be used to transmit the switched page to the animation module and notify the animation module to load the switching animation after the page composition module has composed the page. In some examples, the screen rotation module can directly pass the landscape / portrait switching information to the animation module. The landscape / portrait switching information can be used to instruct the animation module whether to compose a switching animation from landscape to portrait mode or from portrait to landscape mode.

[0464] The page composition module can retrieve the layer information of the first state when it receives a notification from the window management module requesting the first state's layer information. It can also draw the switched page and return it to the screen transition module when it receives a call instruction from the screen transition module. Furthermore, it can retrieve the layer information of the second state when it receives a notification from the window management module requesting the second state's layer information. Finally, the page composition module can send the layer information of the first and second states, along with the switched page, to the animation module through the screen transition module.

[0465] The animation module can be used to determine the view area of ​​a shared element based on layer information from the first and second states. For details, please refer to... Figure 7 The embodiments shown are not described in detail here.

[0466] The animation module can be used to acquire rotation layers and background layers. It can receive the view area of ​​the shared element and the switched page from the screen rotation module, and determine the rotation angle, translation distance, and scaling ratio of the rotation layer based on the view area of ​​the shared element. The animation module can synthesize a switching animation and then notify the electronic device 100 to display the synthesized switching animation. For a detailed description of how the animation module synthesizes the switching animation, please refer to the above embodiments, which will not be repeated here.

[0467] In some examples, the animation module can obtain the state of electronic device 100 in landscape or portrait display after a screen orientation change operation through a specified interface, and then synthesize a switching animation based on the display state of electronic device 100. For example, the animation module can obtain the display state of electronic device 100 after a screen orientation change operation through the specified interface `Resources.getSystem().getConfiguration().orientation`. If the value of `orientation` is 0, it indicates that electronic device 100 is in portrait display mode; if the value of `orientation` is 1, it indicates that electronic device 100 is in landscape display mode. Specifically, if electronic device 100 is in landscape display mode after a screen orientation change operation, the animation module synthesizes a switching animation from portrait to landscape display mode. If electronic device 100 is in portrait display mode after a screen orientation change operation, the animation module synthesizes a switching animation from landscape to portrait display mode. In some examples, during the process of the animation module obtaining the view area of ​​a shared element, the second state of electronic device 100 can also be determined through `orientation`.

[0468] In other examples, the animation module can receive screen orientation switching information sent by the screen rotation module and synthesize switching animations based on the screen orientation switching information.

[0469] For example, if the screen orientation switching information is a delta value, the delta value can also be used to indicate whether the electronic device 100 rotates clockwise or counterclockwise. The animation module can control the rotation direction of the rotation layer based on the delta value. For example, if the delta value indicates that the electronic device 100 rotates clockwise, the animation module can rotate the rotation layer clockwise (or counterclockwise) during the screen orientation switching process; if the delta value indicates that the electronic device 100 rotates counterclockwise, the animation module can rotate the rotation layer counterclockwise (or clockwise) during the screen orientation switching process.

[0470] It is understandable that if the input for switching between portrait and landscape orientations is an input to the control for switching between portrait and landscape orientations, the delta value and orientation value of the electronic device 100 are the same as the delta value and orientation value when the electronic device 100 is rotated clockwise (or counterclockwise) to perform the screen switching operation.

[0471] In some examples, the window management module is also used to generate an occlusion layer and send it to the animation module. Optionally, the window management module can send the occlusion layer to the animation module via the screen rotation module.

[0472] It should be noted that the electronic device 100 can implement the display method involved in the embodiments of this application through the above-described multiple modules. The multiple modules illustrated in the embodiments of this invention do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer modules than illustrated, or combine some modules, or split some modules, or arrange different modules. For example, the above-described multiple modules can be collectively referred to as a landscape / portrait screen switching module.

[0473] Specifically, electronic device 100 passes through Figure 18 The steps for switching from portrait to landscape mode using the multiple modules shown include:

[0474] The electronic device 100 displays a portrait-oriented page, which includes a portrait-oriented video playback window, displaying the image of the first video.

[0475] The input module of electronic device 100 detects the user's input to switch between portrait and landscape modes and notifies the window management module to perform the portrait / landscape mode switching operation.

[0476] The window management module of the electronic device 100 performs a screen freeze operation, instructing the page composition module to obtain the layer information of the portrait page. The window management module can also obtain landscape / portrait switching information through a preset interface and send this information to the screen rotation module. This landscape / portrait switching information can be used to determine whether the electronic device 100 is switching from a portrait display state to a landscape display state, or vice versa. In some embodiments, this landscape / portrait switching information is... Figure 7 The delta value mentioned in the illustrated embodiment. When the window management module performs a screen freeze operation, it can capture and display an image of the portrait-oriented page, which can be referred to as the background layer. The window management module can also send the background layer to the screen rotation module.

[0477] After receiving the landscape / portrait switching information, the screen rotation module determines that the electronic device 100 has switched from portrait to landscape display based on the landscape / portrait switching information. The screen rotation module then calls the page composition module through the interface provided by the page composition module to draw a landscape page. The landscape page includes a landscape video playback window, which displays the image of the first video.

[0478] After the page composition module renders the landscape page, it returns the landscape page to the screen rotation module. The screen rotation module then notifies the window management module to cancel the screen freeze operation.

[0479] After receiving notification from the screen rotation module that the landscape page has been drawn, the window management module cancels the screen freeze and notifies the page composition module to retrieve the layer information of the landscape page. It should be noted that in some examples, the portrait video playback window and the landscape video playback window are the same window.

[0480] After obtaining the layer information of the landscape page, the page composition module can transmit the layer information of both the portrait and landscape pages to the animation module. In some embodiments, the page composition module can transmit the layer information of both the portrait and landscape pages to the animation module through the screen rotation module. Optionally, the page composition module can directly obtain the layer information of the landscape page after drawing it.

[0481] The screen rotation module sends both the background layer and the landscape page to the animation module.

[0482] The animation module can obtain the view area of ​​the portrait video playback window based on the layer information of the portrait page and the layer information of the landscape page. The view area parameters can include the display position of the portrait video playback window on the display screen and the size of the portrait video playback window.

[0483] The animation module generates a rotating layer based on the view area of ​​the portrait video playback window and the landscape page. The animation module can perform transformation operations (such as translation, rotation, and scaling operations, or matrix transformation operations) on the landscape page to obtain a landscape page with the same display position and size as the portrait video playback window, and the orientation of the first video in the landscape page is the same as the orientation of the first video in the portrait video playback window. This transformed landscape page can be called a rotating layer.

[0484] Alternatively, the animation module can obtain a rotation layer based on the view area of ​​the portrait video playback window and the image of the landscape page. The animation module can perform transformation operations (e.g., translation, rotation, and scaling, or matrix transformation) on the image of the landscape page to obtain an image of the landscape page with the same display position and size as the portrait video playback window, and the orientation of the first video in the landscape page image is the same as the orientation of the first video in the portrait video playback window. The animation module can obtain the image of the landscape page from the page composition module, or it can perform a screenshot operation on the landscape page through the window management module to obtain an image of the landscape page (screenshot). In some examples, the window management module can set the screenshot of the portrait page to an invisible or transparent state, capture the image of the landscape page, and then set the screenshot of the portrait page to a visible or opaque state. This transformed image of the landscape page can be called a rotation layer.

[0485] Alternatively, the animation module can generate a rotation layer based on the view area of ​​the portrait video playback window and the image of the portrait page. The animation module can also generate a rotation layer by capturing the image of the portrait video playback window from the image of the portrait page using the window management module, based on the position of the portrait video playback window.

[0486] The animation module can synthesize transition animations based on the view area of ​​the portrait video playback window, the background layer, and the rotation layer. In the transition animation, the rotation layer floats on the background layer. First, the display position of the rotation layer is the same as that of the portrait video playback window. Then, the animation module controls the rotation layer to rotate, translate, and enlarge, moving it from its display position in the portrait video playback window to its display position in the landscape video playback window (or landscape page). The size of the rotation layer is enlarged to match the size of the landscape video playback window (or landscape page), and the orientation of the first video frame in the rotation layer is rotated to match the orientation of the first video frame in the landscape video playback window (or landscape page).

[0487] After the animation module synthesizes the switching animation, the electronic device 100 can play the switching animation and display a landscape page after the animation finishes playing. If the rotating layer is an image of a portrait video playback window, the electronic device 100 can de-display the rotating layer and background layer after the switching animation finishes playing and display a landscape page. If the rotating layer is a landscape page, the electronic device 100 can de-display the background layer after the switching animation finishes playing; in this case, the rotating layer can be referred to as the landscape page.

[0488] In some examples, the screen rotation module can directly instruct the animation module to synthesize a transition animation from portrait to landscape display. Alternatively, the screen rotation module sends portrait / landscape information to the animation module, which can then determine and synthesize the transition animation based on this information. Or, the animation module can determine whether the electronic device 100 is in portrait or landscape display mode after the screen rotation operation via a specified interface, and then synthesize the transition animation based on the display state of the electronic device 100. Here, the electronic device 100 is in landscape display mode after the screen rotation operation, and the animation module synthesizes the transition animation from portrait to landscape display mode.

[0489] In some embodiments, if the screen orientation switching input is clockwise rotation of the electronic device 100, the animation module can synthesize a clockwise rotation switching animation for the rotation layer. If the screen orientation switching input is counterclockwise rotation of the electronic device 100, the animation module can synthesize a counterclockwise rotation switching animation for the rotation layer. In some examples, the animation module can determine whether the electronic device 100 is rotating clockwise or counterclockwise using the aforementioned delta value.

[0490] In some embodiments, the animation module of the electronic device 100 can also obtain an occlusion layer through a window manager. The animation module can display the occlusion layer on top of the background layer and rotate it below. The display position of the occlusion layer is the same as the display position of the portrait video playback window, and the size of the occlusion layer is the same as the size of the portrait video playback window. The occlusion layer is a preset image. After the switching animation finishes playing, the electronic device 100 removes the display of the occlusion layer.

[0491] Specifically, electronic device 100 passes through Figure 18 The steps for switching from landscape to portrait mode using the multiple modules shown include:

[0492] Electronic device 100 displays a landscape page, which includes a landscape video playback window, displaying the first video frame.

[0493] The input module of the electronic device 100 detects the user's input to switch between landscape and portrait modes (i.e., input to switch from landscape to portrait display mode) and notifies the window management module to perform the landscape / portrait switching operation.

[0494] The window management module of the electronic device 100 performs a screen freeze operation, instructing the page composition module to obtain the layer information of the landscape page. The window management module can also obtain landscape / portrait switching information through a preset interface and send this information to the screen rotation module. This landscape / portrait switching information can be used to determine whether the electronic device 100 switches from a landscape display state to a portrait display state or vice versa. In some embodiments, this landscape / portrait switching information is... Figure 7 The delta value mentioned in the illustrated embodiment. When the window management module performs a screen freeze operation, it can also capture an image of the landscape page and display that image.

[0495] After receiving the landscape / portrait switching information, the screen switching module determines that the electronic device 100 has switched from landscape display mode to portrait display mode based on the landscape / portrait switching information. The screen switching module calls the page composition module through the interface provided by the page composition module to draw the portrait page. The portrait page includes a portrait video playback window, which displays the screen of the first video.

[0496] After the page compositing module renders the portrait-oriented page, it returns the portrait-oriented page to the screen rotation module. The screen rotation module then notifies the window management module to cancel the screen freeze operation.

[0497] After receiving notification from the screen rotation module that the landscape page has been drawn, the window management module cancels the screen freeze and notifies the page composition module to retrieve the layer information of the portrait page. It should be noted that in some examples, the portrait video playback window and the landscape video playback window are the same window.

[0498] After obtaining the layer information of the landscape page, the page compositing module can send the layer information of both the portrait and landscape pages to the animation module. In some embodiments, the page compositing module can transmit the layer information of both the portrait and landscape pages to the animation module through the screen rotation module. Optionally, the page compositing module can directly obtain the layer information of the portrait page after drawing it.

[0499] The screen rotation module can send portrait-oriented pages to the animation module.

[0500] The animation module can obtain the view area of ​​the portrait video playback window based on the layer information of the portrait page and the layer information of the landscape page. The view area parameters can include the display position of the portrait video playback window on the display screen and the size of the portrait video playback window.

[0501] In some embodiments, the animation module can use the image of the landscape page obtained by the window manager as the rotation layer and the portrait page as the background layer. Alternatively, the animation module can capture an image of the portrait video playback window at a first frequency through the window manager based on the view area of ​​the portrait video playback window, and then perform transformation operations on that image to obtain the rotation layer. It is understandable that since the frame of the first video in the portrait video playback window changes, the animation module must perform transformation operations on the image obtained by the window manager to achieve the action of rotating, shrinking, and moving the rotation layer from the landscape video playback window to the portrait video playback window.

[0502] The animation module can synthesize transition animations based on the view area of ​​the portrait video playback window, the background layer, and the rotation layer. In the transition animation, the rotation layer floats on the background layer. First, the rotation layer's display position is the same as that of the landscape video playback window (or landscape page). Then, the animation module controls the rotation layer to rotate, translate, and shrink, moving it from its display position in the landscape video playback window (or landscape page) to its display position in the portrait video playback window. The size of the rotation layer is then reduced to match the size of the portrait video playback window, and the orientation of the first video frame in the rotation layer is rotated to match the orientation of the first video frame in the portrait video playback window. Afterward, the electronic device can de-display the rotation layer, displaying only the background layer, which can be referred to as the portrait page.

[0503] In other embodiments, the animation module can capture an image of the portrait-oriented page using the window manager as a background layer. In some embodiments, the animation module can set a landscape-oriented page screenshot to an invisible or transparent state (e.g., setting the transparency of the landscape-oriented page screenshot to 100%), and then capture the image on the display screen using the window management module to obtain the image of the portrait-oriented page. In other embodiments, the electronic device 100 can also acquire the image of the portrait-oriented page through the HWC and use that image as a background layer.

[0504] The animation module can also perform transformation operations on portrait-oriented pages to obtain rotated layers. For example, transformation operations can rotate, enlarge, or pan the portrait-oriented page so that the size of the portrait video playback window on the portrait-oriented page is the same as that on the landscape-oriented page (or landscape video playback window), the display position of the portrait video playback window on the portrait-oriented page is the same as that on the landscape-oriented page (or landscape video playback window), and the image orientation of the first video on the portrait-oriented page is the same as that of the first video on the landscape-oriented page.

[0505] The animation module can synthesize transition animations based on the view area of ​​the portrait video playback window, the background layer, and the rotation layer. In the transition animation, the rotation layer floats on the background layer, and the portion of the rotation layer other than the portrait video playback window is not displayed (for example, the portion of the rotation layer other than the portrait video playback window is set to invisible or transparent). First, the display position of the portrait video playback window of the rotation layer is the same as the display position of the landscape video playback window (or landscape page). Then, the animation module controls the rotation layer to rotate, translate, and shrink, moving the display position of the portrait video playback window of the rotation layer from the display position of the landscape video playback window (or landscape page) to the display position of the portrait video playback window, shrinking the size of the portrait video playback window of the rotation layer to the same size as the portrait video playback window, and rotating the orientation of the first video in the rotation layer to be the same as the orientation of the first video in the portrait video playback window. Afterwards, the animation module can display the portion of the rotation layer other than the portrait video playback window (for example, setting the portion of the rotation layer other than the portrait video playback window to visible or opaque). Electronic devices can hide the background layer and only display the rotating layer, which can be referred to as a portrait page.

[0506] In some embodiments, if the screen orientation switching input is clockwise rotation of the electronic device 100, the animation module can synthesize a clockwise rotation switching animation for the rotation layer. If the screen orientation switching input is counterclockwise rotation of the electronic device 100, the animation module can synthesize a counterclockwise rotation switching animation for the rotation layer. In some examples, the animation module can determine whether the electronic device 100 is rotating clockwise or counterclockwise using the aforementioned delta value.

[0507] In some embodiments, the animation module of the electronic device 100 can also obtain an occlusion layer through a window manager. The animation module can display the occlusion layer on top of the background layer and rotate it below. The display position of the occlusion layer is the same as the display position of the portrait video playback window, and the size of the occlusion layer is the same as the size of the portrait video playback window. The occlusion layer is a preset image. After the switching animation finishes playing, the electronic device 100 removes the display of the occlusion layer.

[0508] In some embodiments, the application layer framework of the electronic device 100 includes a landscape / portrait switching unit, which can be used to synthesize and display a landscape / portrait switching animation. The landscape / portrait switching unit and the first application are different modules of the electronic device 100; the landscape / portrait switching unit does not belong to the first application, and the first application does not belong to the landscape / portrait switching unit. The first application is an application that includes the aforementioned landscape video playback window and portrait video playback window. Optionally, the landscape / portrait switching unit can be divided into multiple modules, which include... Figure 18 The window management module, page composition module, screen rotation module, and animation module are shown.

[0509] In some embodiments, the electronic device 100 displays a first page of a first application. The first page includes a first window displaying a frame of a first video. Upon receiving input to switch between portrait and landscape orientations, the first application sets up to display a first switching animation. Upon receiving this input, the operating system of the electronic device 100 can determine whether to notify the first application to load (also known as composing) the first switching animation. When the operating system determines that it should notify the first application to load the first switching animation, it can do so, and after the first application has finished loading the first switching animation, it will play the first switching animation. When the operating system determines that it should not notify the first application to load the first switching animation, it can load and play a second switching animation. The specific description of the loading of the second switching animation can be found in the above embodiments and will not be repeated here. It is understood that since the subject loading the second switching animation is different from the subject loading the first switching animation, the first and second switching animations can be different.

[0510] For example, the first application can set a flag. When the flag value is a first value (e.g., false), the operating system of the electronic device 100 can load (compose) and play the second switching animation. When the flag value is a second value (e.g., true), the operating system of the electronic device 100 can notify the first application to load (compose) the first switching animation and play the first switching animation provided by the first application. The first switching animation is different from the second switching animation. The first application can load the first switching animation by calling the `overridePendingTransition` method. In this way, the electronic device 100 can have the application provide the screen orientation switching animation when the application has a loading method for the screen orientation switching animation. The electronic device 100 can also have the operating system provide the screen orientation switching animation when the application does not have a loading method for the screen orientation switching animation. This avoids the problem of unsmooth switching and ghosting issues when applications that do not provide screen orientation switching animations switch between portrait and landscape modes.

[0511] In some embodiments, the size of the background layer is the same as the size of the display screen of the electronic device 100. The background layer can be a preset image. The preset image can be an image of any color (e.g., black, white, etc.), or the preset image can be an image including a specified pattern.

[0512] The above-described embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit it. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of this application.

Claims

1. A display method, characterized in that, include: The electronic device displays a first page, and a first window is displayed in a first area of ​​the first page, and the first video image is displayed in the first window; The electronic device receives a first input to switch the electronic device from portrait display mode to landscape display mode; After receiving the first input, the electronic device displays a first background layer, which includes a screenshot of the first page. The electronic device draws a second page while displaying the first background layer; The electronic device obtains the size and position of the first window of the first page based on the layer information of the first page and the layer information of the second page. The size of the first window of the first page is the same as the size of the first area, and the position of the first window of the first page is the same as the position of the first area. The electronic device rotates, translates, and shrinks the second page to obtain a transformed second page that has the same size and position as the first area and the same viewing direction as the first video in the first window of the first page. The first rotated layer is the transformed second page; or... The electronic device acquires an image of the first window in a screenshot of the first page based on the size and position of the first window of the first page, and the first rotating layer is the image of the first window of the first page; The electronic device displays the first rotating layer on the first background layer and switches the display of the first rotating layer from the first area to the second area of ​​the second page; wherein the second area of ​​the second page displays the first window, the orientation of the first video on the second page is different from the orientation of the first video on the first page, the first rotating layer includes the image of the first video, and the orientation of the first video when the first rotating layer is displayed in the second area is different from the orientation of the first video when the first rotating layer is displayed in the first area; When the first rotating layer switches to the second area, the electronic device displays the second page.

2. The method according to claim 1, characterized in that, The step of switching the first rotating layer from the first area to the second area of ​​the second page specifically includes: The first rotated layer is rotated, translated, and zoomed in to switch its display from the first area to the second area.

3. The method according to claim 1 or 2, characterized in that, When the electronic device displays the first background layer, the method further includes: The first occlusion layer is floated in the first background layer at the display position of the first window. The first occlusion layer has the same size as the first window. The first occlusion layer is a preset image. The first occlusion layer is occluded by the first rotated layer.

4. The method according to claim 1, characterized in that, The electronic device obtains the size and position of the first window based on the layer information of the first page and the layer information of the second page, specifically including: Obtain the layer information of the first page, which includes the view information of one or more views of the first page, and the one or more views of the first page include a first window. The view information includes the view name, the parent view name, the view area parameters, and the view hierarchy. Obtain the layer information of the second page, which includes the view information of one or more views of the second page. The one or more views of the second page include a first window. The view information includes the view name, the parent view name, the view area parameters, and the view hierarchy. Based on the layer information of the first page and the layer information of the second page, the first window of the first page and the first window of the second page are determined. The view area parameters of the first window of the first page include the position and size of the first window. The first window of the first page and the first window of the second page have the same view name and the same parent view name. The first window of the first page has the highest view level in the first page and the first window of the second page has the highest view level in the second page.

5. The method according to claim 1, characterized in that, After the electronic device displays the second page, the method further includes: The electronic device receives a second input from the user to switch the electronic device from landscape display mode to portrait display mode; In response to the second input, the electronic device displays a second background layer and floats a second rotating layer at the display position of the second background layer. The second background layer includes a third page, and the first window is displayed in a third area of ​​the third page. The third area is the same as the first area. The electronic device switches the display of the second rotating layer from the second area to the third area. The second rotating layer includes the image of the first video. When the second rotating layer is displayed in the third area, the orientation of the image of the first video is different from the orientation of the image of the first video when the second rotating layer is displayed in the second area. When the second rotating layer switches to the third area, the electronic device displays the third page.

6. The method according to claim 5, characterized in that, The electronic device switches the display of the second rotating layer from the second area to the third area, specifically including: The second rotated layer is rotated, translated, and scaled down to switch its display from the second area to the third area.

7. The method according to claim 5 or 6, characterized in that, The electronic device displays a second background layer and floats the second rotating layer at the display position of the second background layer, specifically including: In response to the second input, capture and display the image of the second page; The image of the second page is displayed floating above the second background layer, and the image of the second page is the second rotated layer.

8. The method according to claim 5, characterized in that, When displaying the second background layer and suspending the second rotated layer at the display position of the second background layer, the method further includes: The second masking layer is floated in the display position of the first window of the third page in the second background layer. The second masking layer has the same size as the first window of the third page. The second masking layer is a preset image. The second masking layer is masked by the second rotated layer.

9. The method according to claim 1, characterized in that, After the electronic device displays the second page, the method further includes: The electronic device receives a third input from the user to switch the electronic device from landscape display mode to portrait display mode; In response to the third input, the electronic device displays a third background layer and floats the third rotating layer at the display position of the third background layer. The third background layer includes a screenshot of the third page, and the first window is displayed in a third area of ​​the third page. The third area is the same as the first area. The electronic device switches the display of the third rotating layer from the second area to the third area. The third rotating layer includes the image of the first video. When the third rotating layer is displayed in the third area, the orientation of the image of the first video is different from the orientation of the image of the first video when the third rotating layer is displayed in the second area. When the third rotating layer switches to the third area, the electronic device displays the third page.

10. The method according to claim 9, characterized in that, Before the electronic device displays the third background layer, the method further includes: The electronic device captures and displays an image of the second page; The electronic device draws the third page; The electronic device captures an image of the third page to obtain the third background layer; Based on the layer information of the second page and the layer information of the third page, the size and position of the first window in the third page are obtained, and the size and position of the first window in the third page are the same as the size and position of the third area; The electronic device rotates, translates, and zooms in on the third page to obtain the third rotated layer. The first window in the third rotated layer has the same size as the first window of the second page. The orientation of the first video in the third rotated layer is the same as the orientation of the first video in the second page. The position of the first window in the third rotated layer is the same as the position of the first window in the second page. The electronic device cancels the display of the image on the second page.

11. The method according to claim 10, characterized in that, The electronic device switches the display of the third rotating layer from the second region to the third region, specifically including: The electronic device does not display any portion of the third rotating layer other than the first window; The electronic device rotates, translates, and shrinks the first window of the third rotating layer, switching its display from the second area to the third area. When the electronic device switches the display of the first window of the third rotating layer from the second area to the third area, it displays the portion of the third rotating layer other than the first window.

12. The method according to any one of claims 9-11, characterized in that, When the electronic device displays a third background layer and floats the third rotating layer at the display position of the third background layer, the method further includes: The third occlusion layer is floated in the display position of the first window in the third background layer. The third occlusion layer has the same size as the first window in the third background layer. The third occlusion layer is a preset image. The third occlusion layer is occluded by the third rotating layer.

13. The method according to claim 1, characterized in that, The first window of the first page includes a first control, and the first input is an input to the first control; or, the first input is an input to rotate the electronic device clockwise or counterclockwise by an angle to a first angle, and / or, the first input is an input to rotate the electronic device by an acceleration to a first acceleration.

14. The method according to claim 1, characterized in that, The size of the second region is the same as the size of the display screen of the electronic device.

15. A display method, characterized in that, include: The electronic device displays a fourth page, and the fourth area of ​​the fourth page displays a first window, which displays the image of the first video. The electronic device receives a fourth input that switches the electronic device from landscape display mode to portrait display mode; In response to the fourth input, a screenshot of the fourth page is captured and displayed, wherein the screenshot of the fourth page is a fourth rotated layer; After displaying the screenshot of the fourth page, a fifth page is drawn below the screenshot of the fourth page. The fifth area of ​​the fifth page displays the first window, and the orientation of the first video on the fifth page is different from the orientation of the first video on the fourth page. The electronic device displays a fourth background layer and floats the fourth rotating layer at the display position of the fourth background layer, the fourth background layer including the fifth page; The electronic device switches the display of the fourth rotating layer from the fourth region to the fifth region. The fourth rotating layer includes the image of the first video. When the fourth rotating layer is displayed in the fifth region, the orientation of the image of the first video is different from the orientation of the image of the first video when the fourth rotating layer is displayed in the fourth region. When the fourth rotating layer switches to the fifth area, the electronic device displays the fifth page.

16. The method according to claim 15, characterized in that, After the electronic device displays the fifth page, the method further includes: The electronic device receives a fifth input from the user, indicating that the electronic device should be switched from portrait mode to landscape mode; After receiving the fifth input, the electronic device displays the fifth background layer and floats the fifth rotating layer on the fifth background layer. The fifth background layer includes a screenshot of the fifth page. The electronic device switches the display of the fifth rotating layer from the fifth area to the sixth area of ​​the sixth page. The sixth area of ​​the sixth page is used to display the first window. The sixth area is the same as the fourth area. The fifth rotating layer includes the image of the first video. When the fifth rotating layer is displayed in the sixth area, the orientation of the image of the first video is different from the orientation of the image of the first video when the fifth rotating layer is displayed in the fifth area. When the fifth rotating layer switches to the sixth area, the electronic device displays the sixth page.

17. The method according to claim 16, characterized in that, When the electronic device displays the fifth background layer, the method further includes: The electronic device draws the sixth page; The electronic device obtains the size and position of the first window of the fifth page based on the layer information of the fifth page and the layer information of the sixth page. The size of the first window of the fifth page is the same as the size of the fifth area, and the position of the first window of the fifth page is the same as the position of the fifth area. The electronic device rotates, translates, and shrinks the sixth page to obtain a transformed sixth page that has the same size and position as the fifth region and the same orientation as the first video on the fifth page. The fifth rotated layer is the transformed sixth page; or... The electronic device acquires an image of the first window of the fifth page based on the size and position of the first window of the fifth page, and the fifth rotating layer is an image of the first window of the fifth page.

18. A display method, characterized in that, include: The electronic device displays a fourth page, and the fourth area of ​​the fourth page displays a first window, which displays the image of the first video. The electronic device receives a fourth input that switches the electronic device from landscape display mode to portrait display mode; In response to the fourth input, capture and display the image of the fourth page; The electronic device draws a fifth page, and the fifth area of ​​the fifth page displays the first window. The orientation of the first video on the fifth page is different from the orientation of the first video on the fourth page. The electronic device captures an image of the fifth page to obtain a fourth background layer; The electronic device displays the fourth background layer and floats the fourth rotating layer at the display position of the fourth background layer, the fourth rotating layer including the frame of the first video; The electronic device switches the display of the fourth rotating layer from the fourth region to the fifth region. When the fourth rotating layer is displayed in the fifth region, the orientation of the first video frame is different from the orientation of the first video frame when the fourth rotating layer is displayed in the fourth region. When the fourth rotating layer switches to the fifth area, the electronic device displays the fifth page.

19. The method according to claim 18, characterized in that, Before the electronic device displays the fourth background layer, the method further includes: Based on the layer information of the fifth page and the layer information of the fourth page, the size and position of the first window of the fifth page are obtained, and the size and position of the first window of the fifth page are the same as the size and position of the fifth area; The electronic device rotates, translates, and zooms in on the fifth page to obtain the fourth rotated layer. The first window in the fourth rotated layer has the same size as the first window of the fourth page. The orientation of the first video in the rotated layer is the same as the orientation of the first video on the fourth page. The position of the first window in the rotated layer is the same as the position of the first window on the fourth page. The electronic device cancels the display of the image on the fourth page.

20. The method according to claim 18 or 19, characterized in that, After the electronic device displays the fifth page, the method further includes: The electronic device receives a fifth input from the user, indicating that the electronic device should be switched from portrait mode to landscape mode; After receiving the fifth input, the electronic device displays the fifth background layer and floats the fifth rotating layer on the fifth background layer. The fifth background layer includes a screenshot of the fifth page. The electronic device switches the display of the fifth rotating layer from the fifth area to the sixth area of ​​the sixth page. The sixth area of ​​the sixth page is used to display the first window. The sixth area is the same as the fourth area. The fifth rotating layer includes the image of the first video. When the fifth rotating layer is displayed in the sixth area, the orientation of the image of the first video is different from the orientation of the image of the first video when the fifth rotating layer is displayed in the fifth area. When the fifth rotating layer switches to the sixth area, the electronic device displays the sixth page.

21. The method according to claim 20, characterized in that, When the electronic device displays the fifth background layer, the method further includes: The electronic device draws the sixth page; The electronic device obtains the size and position of the first window of the fifth page based on the layer information of the fifth page and the layer information of the sixth page. The size of the first window of the fifth page is the same as the size of the fifth area, and the position of the first window of the fifth page is the same as the position of the fifth area. The electronic device rotates, translates, and shrinks the sixth page to obtain a transformed sixth page that has the same size and position as the fifth region and the same viewing direction as the first video in the first window of the fifth page. The fifth rotated layer is the transformed sixth page; or... The electronic device acquires an image of the first window of the fifth page based on the size and position of the first window of the fifth page, and the fifth rotating layer is an image of the first window of the fifth page.

22. An electronic device, characterized in that, include: A display screen, one or more processors, and one or more memories; wherein the display screen, the one or more memories, and the one or more processors are coupled together, the one or more memories being used to store computer program code, the computer program code including computer instructions that, when the one or more processors execute the computer instructions, cause the electronic device to perform the method as described in any one of claims 1 to 14, 15 to 17, or 18 to 21.

23. A computer-readable storage medium comprising instructions, characterized in that, When the instructions are executed on an electronic device, the electronic device causes the electronic device to perform the method as described in any one of claims 1 to 14, 15 to 17, or 18 to 21.

Images