A display device and a method for displaying transition animations.

Abstract

This application provides a display device and a transition animation display method in some embodiments. The method allows the display device to acquire playback status information or icon shape information of media asset data, including display parameters of the first interface, when switching between a first interface and a second interface. A shared element image is then generated based on the playback status information or icon shape information. A transition animation is generated based on the shared element image, thereby sequentially displaying the transition animation and the second interface or the first interface. Specifically, when switching to the first interface, the aspect ratio of the shared element image is equal to the aspect ratio of the media asset playback screen on the first interface; when switching to the second interface, the shape of the shared element image is the same as the shape of the media asset icon on the second interface. Therefore, the difference in display content between the thumbnail, the transition animation, and the playback screen can be reduced, improving the coordination and smoothness of the transition animation.

Description

Technical Field

[0001] This application relates to the field of display device technology, and in particular to a display device and a method for displaying transition animations. Background Technology

[0002] Display devices are intelligent devices capable of presenting a user interface and supporting user interaction. Taking smart TVs as an example, smart TVs are television products based on Internet application technology, equipped with open operating systems and chips, possessing open application platforms, enabling two-way human-computer interaction, and integrating multiple functions such as audio-visual, entertainment, and data to meet diverse and personalized user needs.

[0003] Display devices can form a user interface by overlaying multiple layers. For example, the display layers of a display device can include a video layer and a graphics layer. The video layer can have a better picture display effect and can be used to display the playback screen of pictures or videos; the graphics layer has a better display response speed and dynamic effects and can be used to display thumbnails and transition animations.

[0004] However, due to the different ways the video layer and graphics layer process the displayed images, there is a significant discrepancy between the thumbnails, transition animations, and the content displayed on the playback screen. For example, the thumbnail is displayed as a rounded square, while the playback screen has various scaling modes, such as original size, original ratio, and full screen. The shape of the playback screen differs under different scaling modes. When the display screen transitions from the preview interface to the playback interface, the inconsistency between the thumbnail and the playback screen shapes leads to an uncoordinated transition animation, affecting the transition effect. Summary of the Invention

[0005] This application provides a display device and a transition animation display method to solve the problem of poor transition effects caused by a large difference between the displayed content of the thumbnail, the transition animation and the playback screen.

[0006] In a first aspect, some embodiments of this application provide a display device, including a display and a controller. The display is configured to display a first interface or a second interface, wherein the first interface is used to display a playback screen of media asset data; and the second interface is used to display an icon screen of the media asset data.

[0007] The controller is configured to perform the following procedure steps:

[0008] When the display shows the second interface, in response to a user-inputted playback command for playing media data, playback status information is obtained, including screen display parameters when the first interface displays the playback screen of the media data;

[0009] A shared element image is generated based on the playback status information and the first animation image, wherein the first animation image is an image obtained based on the icon of the playback data; the aspect ratio of the shared element image is equal to the aspect ratio of the media asset data playback screen.

[0010] A transition animation is generated based on the shared element image, and the display is controlled to sequentially display the transition animation and the first interface.

[0011] Secondly, some embodiments of this application also provide a display device, including a display and a controller. The display is configured to display a first interface or a second interface, wherein the first interface is used to display a playback screen of media asset data; and the second interface is used to display an icon screen of the media asset data.

[0012] The controller is configured to perform the following procedure steps:

[0013] While the display shows the first interface, in response to a user-inputted exit command to stop playing media data, the icon shape information of the media data is obtained;

[0014] A shared element image is generated based on the icon shape information and the second animated image, wherein the second animated image is an image obtained based on the content displayed on the first interface; the shape of the shared element image is the same as the icon shape of the media asset data.

[0015] A transition animation is generated based on the shared element image, and the display is controlled to sequentially display the transition animation and the second interface.

[0016] Thirdly, some embodiments of this application also provide a transition animation display method, applied to the display device described in the first aspect, wherein the display device includes a display and a controller, the display being configured to display a first interface or a second interface, the first interface being used to display a playback screen of media asset data; the second interface being used to display an icon screen of the media asset data; the method includes:

[0017] When the display shows the second interface, in response to a user-inputted playback command for playing media data, playback status information is obtained, including screen display parameters when the first interface displays the playback screen of the media data;

[0018] A shared element image is generated based on the playback status information and the first animation image, wherein the first animation image is an image obtained based on the icon of the playback data; the aspect ratio of the shared element image is equal to the aspect ratio of the media asset data playback screen.

[0019] A transition animation is generated based on the shared element image, and the display is controlled to sequentially display the transition animation and the first interface.

[0020] Fourthly, some embodiments of this application also provide a transition animation display method, applied to the display device described in the first aspect, the display device including a display and a controller, the display being configured to display a first interface or a second interface, the first interface being used to display a playback screen of media asset data; the second interface being used to display an icon screen of the media asset data; the method includes:

[0021] While the display shows the first interface, in response to a user-inputted exit command to stop playing media data, the icon shape information of the media data is obtained;

[0022] A shared element image is generated based on the icon shape information and the second animated image, wherein the second animated image is an image obtained based on the content displayed on the first interface; the shape of the shared element image is the same as the icon shape of the media asset data.

[0023] A transition animation is generated based on the shared element image, and the display is controlled to sequentially display the transition animation and the second interface.

[0024] As can be seen from the above technical solutions, some embodiments of this application provide a display device and a transition animation display method. The method allows the display device to acquire playback status information or icon shape information of media asset data, including display parameters of the first interface, when switching between a first interface and a second interface. A shared element image is then generated based on the playback status information or icon shape information. A transition animation is generated based on the shared element image, thereby sequentially displaying the transition animation and the second interface or the first interface. Specifically, when switching to the first interface, the aspect ratio of the shared element image is equal to the aspect ratio of the media asset playback screen on the first interface; when switching to the second interface, the shape of the shared element image is the same as the shape of the media asset icon on the second interface. Therefore, the difference in display content between the thumbnail, the transition animation, and the playback screen can be reduced, improving the coordination and smoothness of the transition animation. Attached Figure Description

[0025] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0026] Figure 1 This is a schematic diagram illustrating the usage scenarios of the display device in some embodiments of this application;

[0027] Figure 2 Hardware configuration block diagrams of display devices provided in some embodiments of this application;

[0028] Figure 3 Hardware configuration block diagrams of control devices provided in some embodiments of this application;

[0029] Figure 4 This is a schematic diagram of the software configuration in a display device provided in some embodiments of this application;

[0030] Figure 5 This is a schematic diagram of the display function modules provided in some embodiments of this application;

[0031] Figure 6 A schematic diagram illustrating the relationship between the video layer and the OSD layer provided in some embodiments of this application;

[0032] Figure 7 This is a schematic diagram illustrating the relationship between the acceleration layer and the OSD layer in some embodiments of this application;

[0033] Figure 8 This is a schematic diagram illustrating the differences in transition animation display effects provided in some embodiments of this application;

[0034] Figure 9 This application provides schematic diagrams illustrating the transition animation display process during media asset playback in some embodiments.

[0035] Figure 10 Thumbnail and playback screen ratio comparison diagrams provided for some embodiments of this application;

[0036] Figure 11 Schematic diagrams of shared elements provided in some embodiments of this application;

[0037] Figure 12 These are schematic diagrams illustrating the generation of transition animation effects provided in some embodiments of this application;

[0038] Figure 13 This is a schematic diagram illustrating the vertical display screen transition animation effect provided in some embodiments of this application;

[0039] Figure 14 This application provides schematic diagrams illustrating the transition animation display process when exiting media playback in some embodiments.

[0040] Figure 15 This application provides schematic diagrams illustrating the transition animation display effect when exiting media playback in some embodiments.

[0041] Figure 16 This is a schematic diagram illustrating a method for cropping shared element images provided in some embodiments of this application. Detailed Implementation

[0042] The embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The embodiments described below do not represent all embodiments consistent with this application. They are merely examples of systems and methods consistent with some aspects of this application as detailed in the claims.

[0043] The embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The embodiments described below do not represent all embodiments consistent with this application. They are merely examples of systems and methods consistent with some aspects of this application as detailed in the claims.

[0044] It should be noted that the brief descriptions of terms in this application are only for the convenience of understanding the embodiments described below, and are not intended to limit the embodiments of this application. Unless otherwise stated, these terms should be understood in their ordinary and common meaning.

[0045] The terms "first," "second," "third," etc., used in the specification, claims, and accompanying drawings of this application are used to distinguish similar or related objects or entities, and do not necessarily imply a specific order or sequence, unless otherwise specified. It should be understood that such terms are interchangeable where appropriate.

[0046] The terms “comprising” and “having”, and any variations thereof, are intended to cover but not exclude inclusion, for example, a product or device that includes a range of components is not necessarily limited to all of the components that are clearly listed, but may include other components that are not clearly listed or that are inherent to such product or device.

[0047] The term "module" refers to any known or subsequently developed hardware, software, firmware, artificial intelligence, fuzzy logic, or combination of hardware and / or software code that is capable of performing the functions associated with that element.

[0048] Figure 1 This is a schematic diagram illustrating an operational scenario between a display device and a control device provided in some embodiments of this application. For example... Figure 1 As shown, the user can operate the display device 200 through the mobile terminal 300 and the control device 100.

[0049] In some embodiments, the mobile terminal 300 may install software applications with the display device 200 to establish a connection and communication via a network communication protocol, thereby achieving one-to-one control operation and data communication. Alternatively, audio and video content displayed on the mobile terminal 300 can be transmitted to the display device 200 to achieve synchronous display.

[0050] like Figure 1 The diagram also shows that the display device 200 communicates with the server 400 via various communication methods. This allows the display device 200 to communicate via a local area network (LAN), a wireless local area network (WLAN), and other networks.

[0051] In addition to providing broadcast television reception functions, the display device 200 can also be equipped with intelligent network television functions that provide computer support, including but not limited to network television, smart television, Internet Protocol television (IPTV), etc.

[0052] Figure 2 Provided for some embodiments of this application Figure 1 Hardware configuration block diagram of display device 200.

[0053] In some embodiments, the display device 200 includes at least one of a tuner 210, a communicator 220, a detector 230, a device interface 240, a controller 250, a display 260, an audio output interface 270, a memory, a power supply, and a user interface.

[0054] In some embodiments, detector 230 is used to acquire signals from the external environment or to interact with the outside world. For example, detector 230 includes a light receiver, a sensor for acquiring ambient light intensity; or, detector 230 includes an image acquisition device, such as a camera, which can be used to acquire external environmental scenes, user attributes, or user interaction gestures; or, detector 230 includes a sound acquisition device, such as a microphone, for receiving external sounds.

[0055] In some embodiments, the display 260 includes a display screen component for presenting an image, a driving component for driving image display, a component for receiving image signals output from a controller, and a user control UI interface, etc.

[0056] In some embodiments, the communicator 220 is a component for communicating with external devices or the server 400 according to various communication protocol types.

[0057] In some embodiments, the controller 250 includes a processor, a video processor, an audio processor, a graphics processor, RAM, ROM, and a first to an nth interface for input / output. The controller 250 controls the operation of the display device and responds to user operations through various software control programs stored in the memory. The controller 250 controls the overall operation of the display device 200.

[0058] In some embodiments, the controller 250 and the tuner 210 may be located in different separate devices, that is, the tuner 210 may also be located in an external device of the main device where the controller 250 is located, such as an external set-top box.

[0059] In some embodiments, a user can input user commands through a graphical user interface (GUI) displayed on a display 260, and the user input interface receives user input commands through the graphical user interface (GUI).

[0060] In some embodiments, user interface 280 is an interface that can be used to receive control input.

[0061] Figure 3 Provided for some embodiments of this application Figure 1 Hardware configuration block diagram of the central control device. (Example) Figure 3 As shown, the control device 100 includes a controller 110, a communication interface 130, a user input / output interface, a memory, and a power supply.

[0062] The control device 100 is configured to control the display device 200, and to receive user input operation commands and convert the operation commands into commands that the display device 200 can recognize and respond to, thus acting as an intermediary for interaction between the user and the display device 200.

[0063] In some embodiments, the control device 100 may be an intelligent device. For example, the control device 100 may be equipped with various applications for controlling the display device 200 according to user needs.

[0064] In some embodiments, such as Figure 1 As shown, the mobile terminal 300 or other smart electronic devices can perform similar functions to the control device 100 after installing the application of the control display device 200.

[0065] The controller 110 includes a processor 112, RAM 113, ROM 114, a communication interface 130, and a communication bus. The controller 110 is used to control the operation of the control device 100, as well as the communication and cooperation between internal components and the external and internal data processing functions.

[0066] Under the control of the controller 110, the communication interface 130 enables communication of control signals and data signals with the display device 200. The communication interface 130 may include at least one of other near-field communication modules such as WiFi chip 131, Bluetooth module 132, and NFC module 133.

[0067] User input / output interface 140, wherein the input interface includes at least one of other input interfaces such as microphone 141, touchpad 142, sensor 143, and button 144.

[0068] In some embodiments, the control device 100 includes at least one of a communication interface 130 and an input / output interface 140. The control device 100 is configured with the communication interface 130, such as a WiFi, Bluetooth, or NFC module, which can encode user input commands via WiFi, Bluetooth, or NFC protocols and send them to the display device 200.

[0069] The memory 190 is used to store various operating programs, data, and applications for driving and controlling the control device 100 under the control of the controller. The memory 190 can also store various control signal instructions input by the user.

[0070] The power supply 180 is used to provide operating power support for the various components of the control device 100 under the control of the controller.

[0071] Figure 4 Provided for some embodiments of this application Figure 1 A schematic diagram of the software configuration in the display device, such as... Figure 4 In some embodiments, the system is divided into four layers, from top to bottom: the Applications layer (referred to as the "Application Layer"), the Application Framework layer (referred to as the "Framework Layer"), the Android Runtime and System Library layer (referred to as the "System Runtime Layer"), and the kernel layer.

[0072] In some embodiments, at least one application runs in the application layer. These applications may be Windows programs, system settings programs, or clock programs that come with the operating system; they may also be applications developed by third-party developers. In specific implementations, the application packages in the application layer are not limited to the examples above.

[0073] The framework layer provides application programming interfaces (APIs) and a programming framework for applications. The application framework layer includes predefined functions. It acts as a central processing unit, determining the actions taken by applications within the application layer. Through the API, applications can access system resources and obtain system services during execution.

[0074] like Figure 4 As shown, the application framework layer in this embodiment includes a view system, managers, and content providers. The view system designs and implements the application's interface and interactions, and includes lists, grids, text boxes, and buttons. The managers include at least one of the following modules: an activity manager for interacting with all running activities in the system; a location manager for providing system services or applications with access to system location services; a package manager for retrieving various information related to application packages currently installed on the device; a notification manager for controlling the display and clearing of notification messages; and a window manager for managing icons, windows, toolbars, wallpapers, and desktop widgets on the user interface.

[0075] In some embodiments, the Activity Manager manages the lifecycle of individual applications and common navigation and back functions, such as controlling application exit, opening, and back actions. The Window Manager manages all window programs, such as obtaining the screen size, determining if a status bar is present, locking the screen, capturing the screen, and controlling display window changes (e.g., shrinking the display window, shaking the display, distorting the display, etc.).

[0076] In some embodiments, the system runtime library layer provides support for the upper layer, namely the framework layer. When the framework layer is used, the Android operating system runs the C / C++ libraries contained in the system runtime library layer to implement the functions that the framework layer needs to perform.

[0077] In some embodiments, the kernel layer is a layer between hardware and software. For example... Figure 4As shown, the kernel layer includes at least one of the following drivers: audio driver, display driver, Bluetooth driver, camera driver, WIFI driver, USB driver, HDMI driver, sensor driver (such as fingerprint sensor, temperature sensor, pressure sensor, etc.), and power driver.

[0078] Based on the aforementioned system hierarchy, the display device 200 can call upon resources at each layer to form a display screen on the monitor 260, thereby controlling the monitor 260 to display the user interface. To display the user interface, the display device 200 can be configured with functional modules related to the display process. For example, such as... Figure 5 As shown, the display device 200 can render and display the user interface in real time through the image producer module, the surface flinger module, the compositer module, the video processing unit (VPU) hardware module, and the screen.

[0079] During the display process, peripherals such as the graphics interface (OpenGLES) of the image generation module, the media player, and the camera can be used to generate the image content to be displayed and pass the image content to the image rendering module. The image rendering module is used to control the display content on the monitor 260, that is, to render the image content through the user interaction layer (UI layer) or the video layer based on the image content.

[0080] To achieve better display results, the image content of the UI layer can be rendered by the GPU component, thereby forming display frames in the compositing module. The compositing module stores these frames using both frame buffers and video buffers, and the video processing module forms the image content on the corresponding layers. Specifically, image frames generated during video playback are processed through the video plane, while frames from other image elements (such as UI graphics) are processed through the primary OSD plane. Finally, the display device 200 uses the blending unit of the video processing module to create the final image, which is then displayed on the monitor 260.

[0081] During the display of the user interface, the display device 200 switches between multiple interfaces based on user input. For example, during media playback, the display device 200 switches between a preview interface and a playback interface. The preview interface displays a list of media assets, which may include at least one media asset icon. The playback interface displays the playback screen of the media asset data; therefore, the playback interface can be displayed full-screen or fill a window. When the display device 200 displays the preview interface, the user can use a remote control or other control device to click on the media asset icon on the preview interface to input playback commands. Upon receiving the user's playback command, the display device 200 controls the playback of the clicked media asset data and switches to the playback interface.

[0082] It should be noted that, in this embodiment, the two user interfaces used by the display device 200 when switching interfaces are referred to as the first interface and the second interface. When one of the first interface and the second interface serves as the user interface before the switch, the other serves as the user interface after the switch. For example, if the first interface is a playback interface and the second interface is a preview interface, then for starting playback, the display device 200 switches from displaying the second interface to displaying the first interface. For exiting playback, the display device 200 switches from displaying the first interface to displaying the second interface. In this embodiment, the first interface is used as the playback interface and the second interface as the preview interface as an example for description. It should be understood that the first interface and the second interface can also be used to represent other interfaces respectively. Furthermore, the video layer and the OSD layer can display different user interfaces respectively, or they can be superimposed to display a single user interface.

[0083] In some embodiments, different user interfaces displayed by the display device 200 can be displayed through different layers, with different layers displaying different screens. The display device 200 can display a first interface and a second interface through a video layer and an on-screen display (OSD) layer, respectively. The video layer can establish a connection with the media player of the image generation module to display the screen content generated by the media player through playing media asset data. For example, when the display device 200 plays video media assets, the media player can parse the media asset data to form multiple frames of media asset images and send these frames to the video layer to form the video playback screen.

[0084] The video layer can display images based on the content, format, type, decoding specifications, and image quality parameters of the media asset data, thereby achieving a better image display effect. For example, for a 90Hz high frame rate video media asset, the media player of the display device 200 can directly obtain 90 frames per second by decoding the video data and present these 90 frames of images on the video layer.

[0085] It should be noted that the video layer is not only used to display video media assets, but also other types of media assets. For example, the video layer can also display image details interfaces to users; that is, image media asset data can be decoded by the media player to form multiple frames of the same content, and displayed in the video layer according to the monitor's 260° refresh rate.

[0086] In some embodiments, the display device 200 can also perform image quality processing on the image content displayed on the video layer, thereby making the image content displayed on the video layer more in line with user needs. For example, the operating system of the display device 200 can preset multiple image quality mode options, including standard, soft, vivid, and eye-protection modes. The user can select one of the image quality modes according to their viewing needs, and the display device 200 can then perform image quality processing on the displayed image content according to the selected image quality mode. For example, when the user selects the vivid mode, the display device 200 will enhance the color saturation and brightness of the image content, making the image content more vivid and bright, and then display the image frame with adjusted image quality through the video layer.

[0087] The OSD layer can refresh and display image-related information in real time based on the interactive operation process of the display device 200, such as graphics, text, and icons. The OSD layer can also display specific device status information. For example, the OSD can be used to display information such as channel, volume, brightness, and contrast. Figure 6 As shown, the OSD layer can be displayed at a higher level than the video layer, allowing the graphics and other content displayed by the OSD layer to appear on the video playback screen, so that users can perform interactive operations based on the content displayed by the OSD layer.

[0088] Because the OSD layer needs to respond to user interactions in real time, and its dynamic display effect is superior to that of the video layer, in some embodiments, the display process of the display device 200 can be completed through the cooperation of the video layer and the OSD layer. For example, when a user clicks on an image icon (thumbnail) in the image list interface to control the display device 200 to display the clicked image in full screen, the display device 200 first displays the image thumbnail icon through the OSD layer. After the user clicks the thumbnail icon, it displays a transition animation for full-screen image display through the OSD layer. After the transition animation is complete, the display device 200 then displays the image content through the video layer.

[0089] It should be noted that during the display of the user interface in the OSD layer, the graphics, text, icons, and other content presented by the OSD layer are related to the media assets displayed in the video layer. For example, the image thumbnail icons presented by the OSD layer are graphics generated by the display device 200 after thumbnail sampling and scaling of the image content.

[0090] For some display devices 200 that require real-time responses to interactive content, in order to present a better real-time response effect, the display device 200 should shorten the delay between the input time of the interactive action and the display result. To this end, in some embodiments, the display device 200 can present a real-time display effect by setting an acceleration layer. That is, in the video process module of the display device 200, an additional external OSD plane can be set on top of the main OSD layer and the video layer. The external OSD plane can be configured with different layer characteristics according to specific display effect requirements. For example, the bitmap refresh mode of the external OSD plane can be modified to make the external OSD plane refresh in real time according to the region, thereby improving the display speed of graphics. In this case, the external OSD plane can be used as an acceleration layer in scenarios with high dynamic range display effects.

[0091] Taking a whiteboard application running on a display device 200 that supports touch interaction as an example, in order to improve the real-time response speed of the line drawing process, the touch trajectory can be drawn in real time on the extended display layer (acceleration layer) after the user's touch operation is detected. For example... Figure 7 As shown, the acceleration layer can be displayed at a higher level than other layers, and when the user completes touch input, the lines drawn by the acceleration layer are updated to other layers, thereby reducing input latency and improving the real-time display effect of the whiteboard application drawing process.

[0092] It should be noted that the extended display layer, as an auxiliary display layer, can be controlled to show and hide itself based on the actual interaction process. For example, when the extended display layer acts as an acceleration layer to assist the user in real-time display of touch trajectories, the display device 200 can control it to show when the user inputs a touch interaction operation and hide it when the user does not input a touch interaction operation. That is, the display device 200 can listen for touch interaction events input by the user. When a down event is detected in the user's touch interaction operation, the acceleration layer is enabled and displayed; when an up event is detected in the user's touch interaction operation, the acceleration layer is deactivated and hidden. In some embodiments, the display device 200 can also control the display and hiding of the extended display layer based on the application's running state. For example, when the display device 200 detects that it has started running a touch interaction application such as a whiteboard, the acceleration layer is enabled and displayed; when the display device 200 detects that it has exited the touch interaction application such as the whiteboard, the acceleration layer is deactivated and hidden.

[0093] In some embodiments, to achieve better display effects, the display device 200 can add transition animations between the first and second interfaces during user interface switching, from the second interface to the first interface (or from the first interface to the second interface). For example, the Android-based display device 200 can obtain transition animations by setting shared element animations. The Android system platform can provide transition animations between multiple Activities, and shared element animations are one type of transition animation. Android has supported shared element animations since version 5.0. Shared element animations involve navigating from Activity A to Activity B, where the two Activities can share certain controls, i.e., shared elements, and a transition animation is generated based on these shared elements. It should be noted that this sharing is not true sharing; it refers to the scaling effect of shared elements when navigating from Activity A to Activity B. The scaling effect also applies when closing Activity B and returning to Activity A.

[0094] Furthermore, according to the Android source code, the shared element animation renders the ShareElementView to the top layer of the entire Activity (the DecorView's ViewOverlay). During the transition animation, the ShareElementView is not obscured. Throughout the entire ShareElement animation process (Activity A opens Activity B), only the ShareElement in Activity B performs the animation. The sole purpose of the ShareElement in Activity A is to provide parameters such as position and size. These parameters are then set to the corresponding View in Activity B within the setSharedElementState() function, creating the transition animation effect.

[0095] During the generation of transition animations, the display device 200 can use one or more display contents from the first or second interface as shared elements for generating the transition animations. For example, when the display device 200 switches from the preview interface to the playback interface, it can extract media asset data icons (such as thumbnails) from the preview interface as shared elements, and enlarge the thumbnails frame by frame through multiple animation frames until the thumbnails are the same size as or similar to the playback screen size, generating a transition animation in which the thumbnails gradually enlarge and displaying it. Similarly, when the display device 200 switches from the playback interface to the preview interface, it can extract the display screen (such as the current playback frame) from the playback interface as shared elements, and shrink the display screen frame by frame through multiple animation frames until the display screen is the same size as or similar to the icon size in the preview interface, generating a transition animation in which the display screen gradually shrinks and displaying it.

[0096] However, because the first and second interfaces have different interface types and different interface elements, when a transition animation is generated based on interface elements from either the first or second interface as shared elements, the transition animation differs significantly from the content displayed in the user interface after the switch. For example, ... Figure 8 As shown, the thumbnail is displayed as a rounded square. However, the playback screen has multiple scaling modes, such as original size, original ratio, and full screen. The shape of the playback screen is different in different scaling modes. When the display screen transitions from the preview interface to the playback interface, the inconsistency between the shapes of the thumbnail and the playback screen will cause the transition animation to be uncoordinated and affect the transition effect.

[0097] Furthermore, when the first and second interfaces are displayed through different layers, the display device 200 will exhibit image quality differences due to layer changes because these layers are configured to process the image differently. For example, in the process of displaying an image in full screen, the display device 200 displays the image in full screen through the video layer, while the thumbnails and transition animations before full screen display are displayed through the OSD layer. Since the video layer can adjust the image quality according to the display device 200's image quality mode, while the OSD layer directly renders the interface based on the graphics controls, the displayed thumbnails and transition animations generated from the images will differ from the full-screen image display. That is, after the user sets the vivid mode, the full-screen image will undergo color saturation and brightness processing, while the images displayed in the thumbnails and transition animations will not, resulting in inconsistent display effects of the image content in different layers, and abrupt changes in display parameters such as image quality, color, and contrast for the same image content. For example, in Vivid mode, the video layer displays the image in full screen with 100% color saturation, 80% brightness, and 60% contrast. The OSD layer, however, still displays a thumbnail in Standard mode with 50% color saturation, 50% brightness, and 50% contrast. It is evident that the image displayed in both the video and OSD layers exhibits abrupt changes in display parameters such as color saturation, brightness, and contrast.

[0098] To reduce the difference between the transition animation and the content displayed on the interface after the user interface switch when the display device 200 switches, some embodiments of this application provide a transition animation display method. This method can be applied to display devices 200 such as smart TVs. To support the implementation of the multi-layer display method, the display device 200 should include at least a display 260 and a controller 250. The display 260 is used to display a first interface or a second interface. The first interface is used to display the playback screen of media asset data; the second interface is used to display the icon screen of the media asset data.

[0099] In some embodiments, the user can control the display device 200 to present a second user interface. Specifically, the display device 200 can respond to a user-inputted preview command to display the second interface, acquire media asset data to be displayed in the second interface, read the first keyframe of the media asset data to obtain a cover image, and crop and / or scale the cover image according to the image view parameters of the second interface to generate an icon for the media asset data. The user then controls the display to show the icon of the media asset data through the second interface.

[0100] like Figure 9 As shown, the controller 250 is used to execute the program steps corresponding to the transition animation display method, including the following:

[0101] S100: When the second interface is displayed on the monitor 260, the playback status information is obtained in response to the playback command input by the user for playing media data.

[0102] When the display device 200 displays the second interface, the second interface may include icons representing media asset data. Users can interact with these icons using device controls, touch input, voice commands, or other methods to input playback commands. These playback commands control the display device 200 to perform playback operations on the media asset data, such as decoding and rendering. They also control the display device 200 to switch from the second interface to the first interface.

[0103] During the transition from the second interface to the first interface on the display device 200, the display device 200 can invoke the shared element animation generation service to create a transition animation. To improve the transition effect between the transition animation and the playback screen, the display device 200 can first obtain playback status information after receiving the playback command input by the user. The playback status information can be used to adjust the shape of the shared elements in the shared element animation. Therefore, the playback status information includes the screen display parameters when the first interface displays the playback screen of the media asset data.

[0104] The display parameters can be generated based on the playback mode of the media data played by the display device 200. The playback modes of the display device 200 can include full-screen scaling mode, original aspect ratio mode, and original size mode. Full-screen scaling mode displays the playback image in full screen according to the screen width and height of the monitor 260. Original aspect ratio mode displays the playback image according to the aspect ratio of the media data and the screen width or height of the monitor 260. Original size mode displays the playback image according to the screen width and height of the media data.

[0105] Because the reference for displaying the playback image on the display device 200 differs under different playback modes, the shape and display position of the playback image presented by the display device 200 vary in different playback modes. Therefore, in some embodiments, the display device 200 can generate different image display parameters according to different playback modes. That is, when the controller 250 obtains playback status information, it is also configured to first detect the playback mode of the media data on the display device 200. The playback mode can be obtained by reading the setting parameter list of the display device 200. In other words, the display device 200 can create and maintain a setting parameter list according to user settings, and the setting parameter list can record the user's settings for the display device 200.

[0106] For example, when the display device 200 reads "play mode=01" in the setting parameter list, it means that the current playback mode is "full-screen scaling mode"; when the display device 200 reads "play mode=10" in the setting parameter list, it means that the current playback mode is "original aspect ratio mode"; when the display device 200 reads "play mode=11" in the setting parameter list, it means that the current playback mode is "original size mode".

[0107] By detecting the playback mode of the media data on the display device 200, if the playback mode is a full-screen scaling mode, the screen size information of the display is obtained, and the screen display parameters are generated based on the screen size information. For example, when the playback mode is detected to be a full-screen scaling mode, the screen size information of the display 260, namely the screen width of 3840 and the screen height of 2160, can be obtained to generate screen display parameters that include the screen size information.

[0108] If the playback mode is the original aspect ratio mode, the screen size information and scaling reference of the media asset data are obtained, and the screen display parameters are generated based on the screen size information and scaling reference. The scaling reference is the screen width or screen height of the display. The scaling reference can be determined based on the relationship between the screen size of the media asset data and the screen size of the display 260.

[0109] To determine the scaling reference and generate display parameters, in some embodiments, the display device 200 may acquire the image size information of the media asset data and the screen size information of the display. The image size information includes the image width VW and image height VH; the screen size information includes the screen width W and screen height H.

[0110] After obtaining the screen size information, the display device 200 can calculate the aspect ratio of the screen, i.e., the ratio of the screen width to the screen height, VW / VH, and the screen aspect ratio, i.e., the ratio of the screen width to the screen height, W / H. Then, the aspect ratios of the screen and the display device 200 are compared, and based on the comparison results, the display area of ​​the effective screen in the playback screen, i.e., (left, top, right, bottom), is determined.

[0111] If the aspect ratio of the image is equal to the screen aspect ratio, i.e., VW / VH = W / H, then the scaling reference is determined to be the screen width W or the screen height H, i.e. the effective image is displayed in full screen. Therefore, the image display parameters can be generated based on the screen width W and the screen height H, and the coordinate range of the effective image display area is (0,0,W,H).

[0112] If the aspect ratio of the image is less than the screen aspect ratio, i.e., VW / VH < W / H, then the scaling reference is determined to be the screen width W, and the image display parameters are generated based on the screen width and the image size information. That is, the screen width W can be used as the image width, and the image height of the shared element image is calculated based on the screen width W and the aspect ratio VW / VH, where the image height of the shared element image is the ratio of the screen width W to the aspect ratio VW / VH, i.e., if... The playback screen will then be displayed in landscape mode, with a height of [missing information]. The width W and the coordinate range of the effective display area are:

[0113] If the aspect ratio of the image is greater than the screen aspect ratio, the scaling reference is determined to be the screen height, and the image display parameters are generated based on the screen height and the image size information. That is, the screen height can be used as the image height, and the image width of the shared element image is calculated based on the screen height and the aspect ratio, where the image height of the shared element image is the product of the screen width and the aspect ratio.

[0114] Similarly, if The playback screen will be displayed in portrait mode, with a height of H and a width of [missing information]. The coordinate range of the effective display area is:

[0115] If the playback mode is the original size mode, the screen size information of the media asset data is obtained, namely the screen width VW and the screen height VH, and the screen display parameters are generated based on the screen size information. For example, when the playback mode is detected to be the original size mode, the screen width 1920 and the screen height 1080 of the media asset data to be played can be obtained to generate screen display parameters containing screen size information.

[0116] In some embodiments, to further improve the transition effect between transition animations and playback screens, playback status information can also be used to adjust the display effect of shared elements in shared element animations. Therefore, the playback status information also includes image quality processing parameters when the first interface displays the playback screen of the media asset data. These image quality processing parameters are a set of parameters generated by the display device 200 based on hardware configuration, image quality processing algorithms, and user-set image quality modes.

[0117] To facilitate storage and retrieval, in some embodiments, the image quality processing parameters can also be formed into a data matrix, namely a color matrix, according to a set data structure. The display device 200 can obtain image quality parameters such as brightness, contrast, saturation, color temperature, and hue through the middleware interface, based on different chip solution providers and different image modes. It can then multiply these parameters by a certain coefficient based on actual comparative experiments to obtain preprocessing parameters for the OSD layer display image, which is similar to the display image of the Video layer. These preprocessing parameters are then stored according to the data format of the Color Matrix.

[0118] S200: Generate a shared element image based on the playback status information and the first animation image.

[0119] The first animated image is an image obtained based on the icon of the playback data. After obtaining the playback status information, the display device 200 can process the shared element (i.e., the first animated image) in the transition animation according to the playback status information, cropping and / or scaling the shared element image to generate a shared element image. For the media asset playback process, the display device 200 can use the media asset data icon, or the cover image associated with the media asset data icon, as a shared element. After processing based on the playback status information, the aspect ratio of the shared element image is equal to the aspect ratio of the media asset data playback screen.

[0120] For example, in the preview interface, if the icon for the media asset data is a thumbnail of the first frame of the media asset, then the display device 200 can use this thumbnail as a shared element when switching between the preview interface and the playback interface. Figure 10 As shown, when the thumbnail is displayed in the preview interface, it is a rounded square shape, meaning the aspect ratio of the thumbnail is 100:100. Meanwhile, the aspect ratio of the playback screen is determined based on the playback status information; that is, in full-screen zoom mode, the aspect ratio of the playback screen is 3840:2160. At this point, because the aspect ratio of the thumbnail differs from that of the playback screen, and because it has rounded corners, therefore... Figure 11 As shown, the shared element image needs to be scaled and cropped according to the aspect ratio of the playback screen to generate a shared element image with an aspect ratio of 3840:2160.

[0121] In some embodiments, to obtain a shared element image, the controller 250 generates a shared element image based on the playback status information and a first animation image, and is further configured to: acquire a first animation image, wherein the first animation image is the icon of the media asset data or a cover image associated with the media asset data. When displaying a preview interface, the display device 200 can perform preliminary reading of the media asset data in the preview interface to acquire the cover image of the media asset data. The cover image can be the first frame of the media asset data, or it can be a cover image set by the operator for the media asset data. The display device 200 can perform image cropping and / or scaling based on the cover image to generate thumbnails for display in the media asset data list. Since the display size of the thumbnail is small and does not need to display the details of the image content, in some embodiments, the thumbnail can be compressed during the cropping and / or scaling process to reduce the data size of the thumbnail.

[0122] The thumbnails can be stored in the memory of the display device 200, for example, in the ".thumbnails" folder of the display device 200. Therefore, when generating a shared element image, the display device 200 can obtain the icon image of the media asset data by reading the ".thumbnails" folder, as the first animated image.

[0123] Because the thumbnail is small in size, the details of the image content may be lost due to compression or scaling. In some use cases, if the thumbnail is used directly to generate the shared element image, the image quality of the thumbnail will affect the animation display effect. Therefore, in some embodiments, the display device 200 can save the original cover image while storing the thumbnail, and read the cover image associated with the media asset data from the storage folder when generating the shared element image, that is, the original cover image.

[0124] After acquiring the first animated image, the display device 200 parses the screen display parameters from the playback status information, wherein the screen display parameters include screen width and screen height. The first animated image is then cropped and / or scaled according to the screen display parameters to obtain the shared element image.

[0125] S300: Generate a transition animation based on the shared element image, and control the display to sequentially display the transition animation and the first interface.

[0126] After generating the shared element image, the display device 200 can generate a transition animation based on the shared element image. For example, after generating the shared element image, the display device 200 can call a transition animation generation service and set the shared element image as the ShareElementView of the transition animation generation service.

[0127] In some embodiments, when the preview interface and the playback interface are displayed through different layers, that is, the first interface is displayed through a first layer; and the second interface is displayed through a second layer. The display device 200 can generate multiple transition frames according to the icon display position and playback screen display area of ​​the media asset data, wherein each transition frame includes at least one image view. The shared element image is then set in the image views of the multiple transition frames, and a playback time is set for the multiple transition frames to generate a transition animation.

[0128] For example, such as Figure 12 As shown, in the Android-based display device 200, video playback occurs at the Video layer, making direct animation impossible. Therefore, a specific ImageView is used to display a video thumbnail as a shared element for animation transitions at the OSD layer. The display device 200 adjusts the bitmap in the ImageView according to different playback modes to obtain a shared element image (3840×2160) with the same size as the playback screen.

[0129] Next, determine the original scale (100 / 2160≈5%) and the final scale of 100% based on the thumbnail size (100×100) and the size of the screen displayed in the playback interface (3840×2160). Then, create 30 transition frames according to the original scale, the final scale, and the number of frames in the transition animation (30). In these 30 transition frames, the shared element image in the first transition frame is scaled to 5%, the shared element image in the second transition frame is scaled to 8%, the shared element image in the third transition frame is scaled to 11%, and so on, until the shared element image in the last transition frame is 100%. Finally, set the playback time for each of the 30 transition frames according to the playback duration of the transition animation, generating a transition animation containing multiple consecutive transition frames.

[0130] After generating the transition animation, the display device 200 can display the generated transition animation. That is, the display device 200 switches from displaying the preview interface to displaying the transition animation, and then switches to the playback interface. In some embodiments, if the preview interface and the playback interface are displayed using different layers, since the playback interface cannot directly display the animation, the display device 200 can display the transition animation using the layer used by the preview interface. For example, ... Figure 13 As shown, when the display device 200 displays the preview interface through the OSD layer, it can first display the transition animation through the OSD layer. After the transition animation ends, the OSD layer is hidden to switch to displaying the playback interface through the video layer.

[0131] As can be seen from the above technical solutions, the transition animation display method provided in the above embodiments can obtain playback status information, including screen display parameters when the first interface displays the playback screen of the media asset data, after the user inputs a playback command for the media asset data. Then, it generates a shared element image based on the playback status information and the first animation image, and generates a transition animation based on the shared element image. Since the aspect ratio of the shared element image is equal to the aspect ratio of the media asset data playback screen, the difference between the display content of the transition animation and the playback screen can be reduced, improving the coordination and smoothness of the transition animation.

[0132] Corresponding to the media asset playback process described above, the display device 200 also needs to display a transition animation during the exit playback process. Therefore, some embodiments of this application also provide a transition animation display method suitable for the exit playback process. This method is also applied to the display device 200, which includes a display 260 and a controller 250. The display 260 is configured to display a first interface or a second interface. The first interface is used to display the playback screen of the media asset data; the second interface is used to display the icon screen of the media asset data. For example... Figure 14 As shown, controller 250 is configured to execute the following program steps:

[0133] While the display shows the first interface, in response to a user-inputted exit command to stop playing media data, the icon shape information of the media data is obtained;

[0134] A shared element image is generated based on the icon shape information and the second animated image, wherein the second animated image is an image obtained based on the content displayed on the first interface; the shape of the shared element image is the same as the icon shape of the media asset data.

[0135] A transition animation is generated based on the shared element image, and the display is controlled to sequentially display the transition animation and the second interface.

[0136] For example, such as Figure 15 As shown, during the playback of media data on the display device 200, if the user inputs an exit command using the "back" button on the remote control, the display device 200 can respond to the exit command by displaying information such as the aspect ratio and rounded corners of the ThumbnailView in the preview interface. Furthermore, at the moment the display device 200 detects that the user has clicked the "back" button to exit playback, it can obtain the current video frame from the video buffer as a second animation image. Then, according to the aspect ratio and rounded corners information of the ThumbnailView in the preview interface, the video frame is cropped into bitmaps of the same shape for generating transition animations.

[0137] In some embodiments, the controller 250 performs the generation of a shared element image based on the icon shape information and the second animation image, and is further configured to: first parse the icon size information and icon vertex shape from the icon shape information, and then extract the current frame image of the media asset data from the frame buffer.

[0138] After acquiring the current frame image (the second animated image), the display device 200 can crop the second animated image in two different ways: First, according to the icon size information and icon vertex shape, crop the central region of the current frame image to obtain the shared element image. That is, crop according to the width, height, and rounded corners of the Thumbnailview at the center of the video frame, such as... Figure 16 As shown.

[0139] For example, the ThumbnailView in the preview interface has a width of ViewW and a height of ViewH, with rounded corners of radius r. The video display width is VideoW and the video display height is VideoH. The coordinates of the cropped bitmap rectangle are (left, top, right, bottom). The display device 200 can then crop a bitmap of size ViewW × ViewH from the center point of the video, based on the ThumbnailView's width of ViewW and height of ViewH. The bitmap rectangle coordinates are determined as follows: left = Video W / 2 – ViewW / 2; top = VideoH / 2 – ViewH / 2; right = VideoW / 2 + ViewW / 2; bottom = VideoH / 2 + ViewH / 2, thus obtaining the shared element image.

[0140] Secondly, the display device 200 can crop the current frame image according to the icon vertex shape and the proportional relationship between the size parameters of the current frame image and the icon size information to obtain the shared element image. That is, it crops according to the width and height of the view and the width and height of the video in proportion.

[0141] For example, display device 200 can crop the maximum bitmap at the center point of the video proportionally. If Then determine the height (VideoH), width (VideoW), and coordinates (0,0,VideoW,VideoH) of the clipping rectangle. If Then determine the height VideoH and width of the clipping rectangle. Coordinates are if Then determine the height of the cut rectangle. Width: VideoW, coordinates:

[0142] After obtaining the shared element image based on the above cropping method, the display device 200 can put this bitmap back into the ImageView, update the thumbnailView corresponding to the currently playing media asset in the thumbnail cache pool with this bitmap, and use this ImageView to perform the transition effect of the shared element animation and return to the preview interface.

[0143] As can be seen from the above technical solutions, the transition animation display method provided in the above embodiments can obtain the icon shape information of the media asset data in the second interface (preview interface) after the user inputs an exit command to stop playing the media asset data. Then, it generates a shared element image based on the icon shape information and the second animation image, and generates a transition animation based on the shared element image. Since the shape of the shared element image is the same as the icon shape of the media asset data, it can eliminate the difference between the displayed content of the transition animation and the playback screen, improving the coordination and smoothness of the transition animation.

[0144] It should be noted that the above embodiments only use the media asset playback process and the exit media asset playback process as examples to describe the transition animation display method. It should be understood that the above transition animation display method can be applied to the transition animation display process between any interface switching of the display device 200. Therefore, other animation display methods for other scenarios that are conceived by those skilled in the art based on the above transition animation display method also fall within the protection scope of this application.

[0145] The same or similar parts among the various embodiments in this specification can be referred to mutually, and will not be repeated here.

[0146] Those skilled in the art will clearly understand that the techniques in the embodiments of the present invention can be implemented using software plus necessary general-purpose hardware platforms. Based on this understanding, the technical solutions in the embodiments of the present invention, or the parts that contribute to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods of various embodiments or certain parts of the embodiments of the present invention.

[0147] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. 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 or all of the technical features therein. 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.

[0148] For ease of explanation, the above description has been provided in conjunction with specific embodiments. However, the above exemplary discussion is not intended to be exhaustive or to limit the embodiments to the specific forms disclosed above. Various modifications and variations can be obtained based on the above teachings. The selection and description of the above embodiments are for the purpose of better explaining the principles and practical applications, thereby enabling those skilled in the art to better utilize the described embodiments and various different variations of embodiments suitable for specific use considerations.

Claims

1. A display device, characterized by comprising: The display is configured to display a first interface or a second interface, the first interface being used to display a playing picture of media data, and the second interface being used to display an icon picture of the media data. The first interface is displayed through a first layer, and the second interface is displayed through a second layer, the display level of the second layer being higher than that of the first layer. The controller is configured to: in a state where the display displays the second interface, in response to a user inputting a playing instruction for playing media data on an icon of the media data on the second interface, acquire playing state information, the playing state information including a picture display parameter when the first interface displays the playing picture of the media data; generate a shared element image according to the playing state information and a first animation image, the first animation image being an image acquired based on the icon of the media data, and the width-to-height ratio of the shared element image being equal to the width-to-height ratio of the playing picture of the media data; generate a series of transition frames according to the icon display position of the media data and the size ratio of a playing picture display area, the transition frames including image views, and the transition frames being generated according to an original scaling ratio and a target scaling ratio; set the shared element image in the image views in the transition frames, and apply a specific scaling ratio to the shared element image in each transition frame to enlarge the shared element image frame by frame; set a playing time for the transition frames to generate a transition animation including the continuous transition frames, and control the display to display the transition animation and the first interface in sequence. The controller is further configured to: in response to a user inputting a preview instruction for displaying the second interface, acquire media data displayed in the second interface; 2. The display device of claim 1, wherein, read a first key frame of the media data to obtain a cover image; cut and / or scale the cover image according to image view parameters of the second interface to generate an icon of the media data; control the display to display the icon of the media data through the second interface. The controller, which acquires the playing state information, is further configured to: detect a playing mode of the display device for the media data; 3. The display device of claim 1, wherein, if the playing mode is a full-screen scaling mode, acquire screen size information of the display, and generate the picture display parameter according to the screen size information; if the playing mode is an original ratio mode, acquire picture size information of the media data and a scaling reference, and generate the picture display parameter according to the picture size information and the scaling reference; the scaling reference being a screen width or a screen height of the display; if the playing mode is an original size mode, acquire picture size information of the media data, and generate the picture display parameter according to the picture size information. The controller, which acquires the picture size information of the media data and the scaling reference, and generates the picture display parameter according to the picture size information and the scaling reference, is further configured to: ​ 4. The display device of claim 1, wherein, ​ obtain picture size information of the media data and screen size information of the display, the picture size information comprising a picture width and a picture height, and the screen size information comprising a screen width and a screen height; calculate a picture aspect ratio and a screen aspect ratio, the picture aspect ratio being a ratio of the picture width and the picture height, and the screen aspect ratio being a ratio of the screen width and the screen height; if the picture aspect ratio is less than the screen aspect ratio, determine the screen width as the scaling reference, and generate the picture display parameter according to the screen width and the picture size information; if the picture aspect ratio is greater than the screen aspect ratio, determine the screen height as the scaling reference, and generate the picture display parameter according to the screen height and the picture size information.

5. The display device of claim 4, wherein, the picture display parameter comprises an image width and an image height of a shared element image, and the controller is further configured to: if the picture aspect ratio is less than the screen aspect ratio, take the screen width as the image width, and calculate the image height of the shared element image according to the screen width and the picture aspect ratio, the image height of the shared element image being a ratio of the screen width and the picture aspect ratio; if the picture aspect ratio is greater than the screen aspect ratio, take the screen height as the image height, and calculate the image width of the shared element image according to the screen height and the picture aspect ratio, the image height of the shared element image being a product of the screen width and the picture aspect ratio.

6. The display device of claim 1, wherein, the controller is configured to generate the shared element image according to the playing state information and the first animation image, and is further configured to: obtain a first animation image, the first animation image being an icon of the media data or a cover image associated with the media data; parse the picture display parameter from the playing state information, the picture display parameter comprising a picture width and a picture height; cut the first animation image according to the picture display parameter to obtain the shared element image.

7. A display device, characterized by comprise: a display configured to display a first interface or a second interface, the first interface being used to display a playing picture of media data, and the second interface being used to display an icon picture of the media data; the first interface is displayed through a first layer, and the second interface is displayed through a second layer, the display level of the second layer being higher than that of the first layer; a controller configured to: in a state where the display displays the first interface, in response to an exit instruction input by a user for stopping playing the media data, obtain icon shape information of the media data; generate a shared element image according to the icon shape information and a second animation image, the second animation image being an image obtained based on display content of the first interface; the shape of the shared element image is the same as that of the icon of the media data; generate a series of transition frames according to an original scaling ratio and a target scaling ratio, the transition frames comprising image views, the original scaling ratio and the target scaling ratio being determined according to a display position of the icon of the media data and a size ratio of a playing picture display area. ​ setting the shared element image in the image view in a plurality of transition frames, and applying a specific zoom ratio to the shared element image in each transition frame to gradually reduce the shared element image frame by frame; setting a playing time for the plurality of transition frames to generate a transition animation comprising a plurality of continuous transition frames, and controlling the display to sequentially display the transition animation and the second interface.

8. The display device of claim 7, wherein, The controller is further configured to: parse icon size information and icon vertex shape from the icon shape information; extract a current frame image of the media data from a frame buffer; cut a central region of the current frame image according to the icon size information and the icon vertex shape to obtain the shared element image; or, cut the current frame image according to the icon vertex shape and a proportional relationship between a size parameter of the current frame image and the icon size information to obtain the shared element image.

9. A transition animation display method characterized by comprising: The display device of any one of claims 1-6, the display device comprising a display and a controller, the display is configured to display a first interface or a second interface, the first interface is used to display a playing picture of media data; the second interface is used to display an icon picture of media data; the first interface is displayed through a first layer; the second interface is displayed through a second layer; the display level of the second layer is higher than the first layer; the method comprises: in a state where the display displays the second interface, in response to a user inputting a playing instruction for playing media data with respect to an icon of media data on the second interface, obtaining playing state information, the playing state information comprising a picture display parameter when the first interface displays a playing picture of the media data; generating a shared element image according to the playing state information and a first animation image, the first animation image being an image obtained based on the icon of the media data; the width-to-height ratio of the shared element image is equal to the width-to-height ratio of the playing picture of the media data; generating a series of transition frames according to an original zoom ratio and a target zoom ratio, the transition frames comprising image views, according to a display position of the icon of the media data and a size proportion of a display region of the playing picture; setting the shared element image in the image view in a plurality of transition frames, and applying a specific zoom ratio to the shared element image in each transition frame to gradually reduce the shared element image frame by frame; setting a playing time for the plurality of transition frames to generate a transition animation comprising a plurality of continuous transition frames, and controlling the display to sequentially display the transition animation and the first interface.

Images