Display method, electronic device and computer readable storage medium

Abstract

This application provides a display method, an electronic device, and a computer-readable storage medium. In this method, when the electronic device receives a user operation to launch a second user interface while displaying a first user interface, if the first user interface remains visible after the second user interface is launched and its size and content remain unchanged, the electronic device can directly execute the launch animation of the second user interface without waiting for it to be drawn. This allows the electronic device to provide timely feedback on the display screen after receiving the user operation, thereby improving the user experience.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to display methods, electronic devices, and computer-readable storage media. Background Technology

[0002] When user actions cause changes to the user interface displayed on an electronic device, the device often uses a series of image frames to represent this change. This series of image frames can be called animation effects, or motion effects. One pressing issue is how electronic devices can provide motion effect playback schemes more suitable for the characteristics of their user interface. Summary of the Invention

[0003] This application provides a display method, an electronic device, and a computer-readable storage medium, which can provide a motion effect playback scheme that is more adapted to the characteristics of the user interface.

[0004] In a first aspect, this application provides a display method applied to an electronic device, the electronic device including a display screen, the method comprising: the electronic device displaying a first user interface on the display screen; the electronic device receiving a first operation; the electronic device playing a first animation effect on the display screen according to the first operation, the first animation effect sequentially displaying a first window at a first moment and a first window at a second moment, the first window at the first moment not containing the content of a second user interface, the first window at the second moment containing the content of a second user interface, the display screen also displaying the first user interface while the electronic device plays the first animation effect, the content and size of the first user interface not changing before and after the first animation effect is played.

[0005] In conjunction with the first aspect, in some embodiments, after the electronic device receives the first operation, the method further includes: the electronic device drawing a second user interface, wherein the second user interface is completed drawing later than the start time of the first motion effect playback.

[0006] The first operation is used to launch the second user interface. After launching the second user interface, the electronic device will simultaneously display both the first and second user interfaces on the screen. Upon receiving the first operation, the electronic device can play a first animation effect, which can be an animation effect used to display the appearance of the second user interface on the screen. The electronic device can execute the animation effect on the first window used to display the second user interface. In an earlier moment, the first window does not contain the content of the second user interface, but in a later moment, the content of the second user interface is displayed in the first window. That is to say, the second user interface is displayed in the first window during the execution of the animation effect. Since the content and size of the first user interface do not change before and after the first animation effect plays, the electronic device continuing to display the current content of the first user interface or executing the animation effect based on the current content of the first user interface will not affect the user's viewing. The electronic device only needs to complete the drawing of the second user interface before the first animation effect completes to ensure that the user can see both the first and second user interfaces normally after the first animation effect completes. Therefore, the electronic device does not wait for the drawing of the second user interface when executing the first animation effect. This ensures that the electronic device can respond to the first operation on the screen in a timely manner and also ensures that the second user interface is finally displayed on the screen smoothly, improving the user experience.

[0007] In conjunction with the first aspect, in some embodiments, the method further includes: the electronic device displaying a third user interface on a screen; the electronic device receiving a second operation; in response to the second operation, the electronic device waiting for the fourth user interface to be drawn before playing a second animation on the screen when a first condition is met, the second animation sequentially displaying a second window at multiple moments, the second window at multiple moments containing the content of the fourth user interface; the first condition includes one or more of the following: the screen does not include the third user interface after the electronic device plays the second animation, the content of the third user interface changes after the second animation plays, and the size of the third user interface changes after the second animation plays.

[0008] The first condition, namely that the electronic device needs to draw the third user interface, must be met. When the second operation triggers the activation of the fourth user interface, the electronic device needs to draw both the third and fourth user interfaces. Only when both user interfaces are drawn can the animation be displayed correctly after it ends. This increases the time required for the electronic device to draw the user interfaces. Alternatively, when the first condition is met, the electronic device should wait for all user interfaces to be drawn before executing the animation. This effectively avoids the situation where the user interface to be displayed is not yet drawn after the animation ends, causing screen flickering and affecting the user's viewing experience.

[0009] In conjunction with the first aspect, in some embodiments, the first user interface includes one or more information options, the one or more information options include a first information option, the first operation is a click operation on the first information option, and the second user interface is the next level interface of the first user interface.

[0010] In other words, electronic devices can display different levels of user interfaces simultaneously, allowing users to view content from different levels at the same time. For example, the second user interface can display the specific content of the first information, with options including a summary, keywords, preview images, preview videos, etc. When the electronic device receives a click on a first information option, it can display the second user interface to provide more detailed information. Furthermore, the electronic device can display both the first and second user interfaces simultaneously, so users don't need to switch between interfaces after viewing the second; they can directly view and select other information options within the first user interface. Additionally, users can compare the first information displayed on the second user interface with other information displayed on the first user interface, thus improving the user experience.

[0011] In conjunction with the first aspect, in some embodiments, the electronic device displays a first user interface on a display screen, including: the electronic device displays the first user interface at the center of the display screen; after the electronic device plays a first motion effect on the display screen according to a first operation, the method further includes: the electronic device displays the first user interface on a first side of the display screen and displays a second user interface on a second side of the display screen.

[0012] In other words, the electronic device initially displays a first user interface in the center of the screen. When the electronic device receives a first operation to activate a second user interface, it can display the first user interface on the first side of the screen and the second user interface on the second side of the first user interface. The first side could be, for example, the left side of the screen, and the second side could be, for example, the right side of the screen, or vice versa. This allows users to view information from different user interfaces simultaneously, improving the user experience.

[0013] In conjunction with the first aspect, in some embodiments, after the electronic device receives the first operation, the method further includes: the electronic device playing a second motion effect, the second motion effect including N consecutive image frames, N being greater than or equal to 1, and the display position of the first user interface moving from the center of the display screen to the first side from the first image frame to the Nth image frame in the N image frames.

[0014] The electronic device plays a second animation effect, which consists of N consecutive image frames. In these N frames, from the first to the Nth frame, the display position of the first user interface gradually moves away from the center of the screen and closer to the first side. This allows the electronic device to smoothly transition the display position of the first user interface, improving the user's viewing experience and helping them understand the changes in the display position.

[0015] In conjunction with the first aspect, in some embodiments, the first motion effect includes M consecutive image frames, where M is greater than or equal to 1; the electronic device playing the first motion effect includes: the electronic device sequentially displaying M image frames, wherein the size of the first window increases sequentially from the first image frame to the Mth image frame, or the area of ​​the visible region of the first window increases sequentially from the first image frame to the Mth image frame.

[0016] The electronic device plays a first animation effect, which consists of M consecutive image frames. These M frames demonstrate the gradual appearance of the second user interface on the screen and its display position (the second side of the screen). For example, the first animation effect could involve gradually increasing the size of the first window on the second side of the screen until it reaches the specified size. Alternatively, the electronic device could gradually increase the visible area of ​​the first window on the screen until it is fully displayed. This could be achieved by gradually making the first window clearer, opaque, or displaying only a portion of the window until the entire window is shown. This smooth transition of the second user interface onto the screen helps the user understand that it is a newly created user interface, thus improving the user experience.

[0017] In conjunction with the first aspect, in some embodiments, both the first user interface and the second user interface belong to the first application. After the electronic device receives the first operation, the method further includes: the electronic device determining that the first user interface remains visible and that the size and content of the first user interface do not change; the electronic device setting a first flag bit on the task stack, the task stack being used to manage the user interface of the first application, the user interface located at the top of the task stack being displayed on the screen; and the electronic device determining, based on the first flag bit in the task stack, that it does not wait for the second user interface to be drawn when playing the first animation effect.

[0018] Specifically, the electronic device can set a first flag on the task stack to allow it to execute the first and second animation effects without waiting for the second user interface to be drawn. This allows the electronic device to more easily manage the execution of animation effects in the first application.

[0019] In conjunction with the first aspect, in some embodiments, after the electronic device plays the first motion effect, the method further includes: the electronic device replacing a first flag bit of the task stack with a second flag bit, the second flag bit indicating that the electronic device is waiting for the drawing of the user interface of the motion effect to be executed when playing the motion effect on the user interface of the first application.

[0020] In this way, after the electronic device plays the first animation, the flag bit of the task stack can be replaced, thereby avoiding the situation where the user interface is not drawn after the animation is completed, which would affect the user's viewing experience.

[0021] In conjunction with the first aspect, in some embodiments, the display mode of the electronic device is in landscape mode, or the display screen of the electronic device is a foldable screen and the foldable screen is in an unfolded state.

[0022] When the electronic device is in landscape mode or the display is a foldable screen with the foldable screen unfolded, the electronic device has more space to display the first user interface and the second user interface at the same time, ensuring that each user interface can be clearly displayed and guaranteeing the user's comfort when viewing the user interface.

[0023] In conjunction with the first aspect, in some embodiments, before the electronic device plays the first motion effect on the display screen according to the first operation, the method further includes: the electronic device determining motion effect parameters, the motion effect parameters including motion effect content, motion effect size, motion effect duration, or at least one of motion effect start position and motion effect end position; the motion effect start position is used to indicate the position of the first image frame in the motion effect on the display screen, and the motion effect end position is used to indicate the position of the last image frame in the motion effect on the display screen; the electronic device playing the first motion effect includes: the electronic device playing the first motion effect based on the motion effect parameters.

[0024] In other words, electronic devices can set motion effect parameters and then play motion effects based on those parameters, thereby managing and playing motion effects more accurately.

[0025] In a second aspect, this application provides an electronic device including a memory and a processor coupled to the memory; the memory stores a computer program, and when the processor executes the computer program, it causes the electronic device to implement the method described in any one of the first aspects.

[0026] Thirdly, this application provides a computer-readable storage medium storing a computer program or computer instructions, which are executed by a processor to implement the method described in any of the first aspects above.

[0027] Fourthly, embodiments of this application provide a computer program product, which, when executed by a processor, implements the method described in any of the first aspects above.

[0028] Fifthly, embodiments of this application provide a chip including a processor and a memory, wherein the memory is used to store computer programs or computer instructions, and the processor is used to execute the computer programs or computer instructions stored in the memory, causing the chip to perform the method described in any of the first aspects above.

[0029] The solutions provided in the second to fifth aspects above are used to implement or cooperate with the methods provided in the first aspect above, and therefore can achieve the same or corresponding beneficial effects as the methods in the first aspect, which will not be elaborated here. Attached Figure Description

[0030] Figure 1 This is a schematic diagram of the structure of the electronic device 100 provided in the embodiments of this application;

[0031] Figure 2 A software structure diagram of the electronic device provided in the embodiments of this application;

[0032] Figures 3A-3D This is a schematic diagram of a scene where the animation playback is complete but the user interface is not yet fully drawn, as provided in the embodiments of this application.

[0033] Figures 4A-4D This is a schematic diagram illustrating a scenario where the electronic device provided in this application responds too slowly after receiving a user operation;

[0034] Figure 5 This is a schematic diagram of the display process of the electronic device 100 provided in this application executing animation effects after the user interface is drawn;

[0035] Figure 6 This is a timing diagram illustrating the motion effects performed by an electronic device 100 according to an embodiment of this application.

[0036] Figures 7A-7D The electronic device 100 provided in this application embodiment adopts... Figure 6 The diagram illustrates the effect of the animation executed by the method shown.

[0037] Figure 8 This is a schematic diagram of the display processing flow of the electronic device 100 provided in this application embodiment, which does not wait for the user interface to be drawn when performing animation effects;

[0038] Figure 9 This is a flowchart illustrating the display method provided in an embodiment of this application;

[0039] Figure 10This is a schematic diagram of the structure of a device provided in an embodiment of this application;

[0040] Figure 11 This is a schematic diagram of the structure of a chip provided in an embodiment of this application. Detailed Implementation

[0041] The terminology used in the following embodiments of this application is for the purpose of describing particular embodiments only and is not intended to be limiting of this application. As used in the specification and appended claims of this application, the singular expressions “a,” “an,” “the,” “the,” “the,” and “this” are intended to include the plural expressions as well, unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used in this application refers to and includes any or all possible combinations of one or more of the listed items.

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

[0043] Figure 1 This is a schematic diagram of the structure of the electronic device 100 provided in the embodiments of this application.

[0044] The following description uses electronic device 100 as an example to illustrate the embodiment. It should be understood that electronic device 100 may have more than Figure 1 The more or fewer components shown can be combined into two or more components, or they can have different component configurations. Figure 1 The various components shown can be implemented in hardware, software, or a combination of hardware and software, including one or more signal processing and / or application-specific integrated circuits.

[0045] Electronic device 100 may include: processor 110, external memory interface 120, internal memory 121, sensor module 180, and display screen 194, etc. The sensor module 180 may include pressure sensor 180A, touch sensor 180K, etc.

[0046] Processor 110 may include one or more processing units, such as: application processor (AP), modem processor, graphics processing unit (GPU), image signal processor (ISP), controller, memory, video codec, digital signal processor (DSP), baseband processor, and / or neural network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0047] The controller can be the nerve center and command center of the electronic device 100. The controller can generate operation control signals according to the instruction opcode and timing signals to complete the control of fetching and executing instructions.

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

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

[0050] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. In some embodiments, the electronic device 100 may include one or N display screens 194, where N is a positive integer greater than 1.

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

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

[0053] 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 required for a function (such as facial recognition, fingerprint recognition, mobile payment, etc.). The data storage area may store data created during the use of electronic device 100 (such as facial information template data, fingerprint information templates, etc.). Furthermore, internal memory 121 may include high-speed random access memory and non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc.

[0054] Pressure sensor 180A is used to sense pressure signals and can convert the pressure signals into electrical signals. In some embodiments, pressure sensor 180A may be disposed on display screen 194. When a touch operation is applied to display screen 194, electronic device 100 detects the intensity of the touch operation based on pressure sensor 180A. Electronic device 100 may also calculate the touch position based on the detection signal from pressure sensor 180A.

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

[0056] In some embodiments, the software system of electronic device 100 may adopt a layered architecture, event-driven architecture, microkernel architecture, or cloud architecture. This application embodiment uses the layered architecture Android system as an example to exemplify the software structure of electronic device 100.

[0057] Figure 2 A software structure diagram of an electronic device provided in an embodiment of this application.

[0058] 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 Android system is divided into five layers, from top to bottom: the application layer (or application framework layer), the Android runtime, the system libraries, and the kernel layer.

[0059] like Figure 2 As shown, the application layer can include a series of application packages. These application packages can include applications such as camera, calendar, gallery, and calling.

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

[0061] like Figure 2 As shown, the application framework layer may include a window manager, content provider, view system, resource manager, notification manager, image composition system, motion playback component, etc.

[0062] The window manager is used to manage window applications. It can include a window transaction synchronization module, a window transaction collection module, a window layout module, and a window container. The window transaction synchronization module handles the synchronization of window containers; when an animation is triggered, it monitors changes in the window container in real time to ensure a smooth transition and proper window display. The window transaction collection module manages and synchronizes the participants in the window animation (i.e., the user interfaces involved in the animation). The window layout module determines the window's display position on the screen, the size of the display area, and so on. The window container is responsible for managing the window's lifecycle, ensuring the window is displayed correctly on the screen.

[0063] Content providers store and retrieve data, making that data accessible to applications. This data may include videos, images, audio, made and received phone calls, browsing history and bookmarks, phone books, etc.

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

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

[0066] The Activity Manager manages the lifecycle of the user interface within an application. It is responsible for the display of the user interface and handling interactions between the user and the user interface.

[0067] An image compositing system is used to control image compositing and generate a vertical synchronization (Vsync) signal. In some embodiments, the image compositing system also includes an image buffer queue. For example, an application draws an image using a view system and renders the drawn image using an image rendering system. The application then sends the drawn and rendered image to the image buffer queue in the image compositing system; the image buffer queue is used to cache the images drawn and rendered by the application. Whenever the Vsync signal arrives, the image compositing system sequentially retrieves a frame of image to be composited from the image buffer queue and then performs image compositing using the image compositing system.

[0068] The image compositing system includes: a compositing thread, a Vsync thread, and a queue buffer thread. The compositing thread is awakened by the Vsync signal to perform compositing. The Vsync thread generates the next Vsync signal based on the Vsync signal request. The queue buffer thread stores cached data, generates Vsync signal requests, and wakes up the compositing thread, among other things.

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

[0070] An animation playback component can be used to play animations. For example, it can be used to play animations that occur when the user interface starts (such as entrance animations) or when the user interface closes (such as exit animations). The animation playback component can include an animation object control module and an animation object processing module. The animation object control module manages the animation type and resources of the animation object. The animation object processing module can complete the playback of the animation based on the instructions from the animation object control module.

[0071] The Android runtime consists of core libraries and a virtual machine. The Android runtime is responsible for scheduling and managing the Android system.

[0072] The core library consists of two parts: one part is the functionalities that need to be called by the Java language, and the other part is the Android core library.

[0073] The application layer and application framework layer run in a 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.

[0074] A system library can include multiple functional modules. For example, image rendering libraries, image compositing libraries, function libraries, media libraries, and input processing libraries.

[0075] Image rendering libraries are used for rendering 2D or 3D images. Image compositing libraries are used for compositing 2D or 3D images.

[0076] In a possible implementation, the application renders the image using an image rendering library, and then sends the rendered image to the buffer queue of the image compositing system. Whenever the Vsync signal arrives, the image compositing system (e.g., SurfaceFlinger) retrieves a frame of the image to be composited sequentially from the buffer queue, and then performs image compositing using the image compositing library.

[0077] The function library provides macros, type definitions, string manipulation functions, mathematical calculation functions, and input / output functions used in the C language.

[0078] The media library supports playback and recording of various commonly used audio and video formats, as well as still image files.

[0079] The input processing library is a library used to handle input devices, enabling mouse, keyboard, and touch input processing, among others.

[0080] The kernel layer is the layer between hardware and software. The kernel layer can contain display drivers, camera drivers, audio drivers, and sensor drivers, among others.

[0081] For ease of understanding, exemplary descriptions of some concepts related to the embodiments of this application are provided for reference.

[0082] 1. Frame: Refers to a single frame, the smallest unit of visual display. A frame can be understood as a still image; rapidly displaying multiple consecutive frames can create the illusion of motion. Frame rate refers to the number of frames refreshed per second, or the number of times the image processor in an electronic device refreshes the screen per second. A higher frame rate results in smoother and more realistic animation. The more frames per second, the smoother the displayed motion.

[0083] It should be noted that the user interface usually needs to go through processes such as drawing, rendering, and compositing before it can be displayed.

[0084] 2. Frame rendering: This refers to the rendering of images in the user interface. A user interface can consist of one or more views, each rendered by visual controls within the view system. Each view is composed of subviews, with each subview corresponding to a widget within the view. For example, one subview might correspond to a symbol in an image view.

[0085] 3. Frame rendering: This involves coloring the drawn view or adding 3D effects. For example, 3D effects can include lighting effects, shadow effects, and texture effects.

[0086] 4. Frame Compositing: This is the process of combining multiple rendered views into a user interface to be displayed.

[0087] It should be noted that, in order to improve display smoothness and reduce display stuttering, electronic devices generally use a vertical synchronization (Vsync) signal for display to synchronize the processes of image drawing, rendering, compositing, and screen refresh. Those skilled in the art should understand that the Vsync signal is a periodic signal, and its period can be set according to the display's refresh rate. For example, when the display's refresh rate is 60Hz, the Vsync signal period can be 16.6ms, meaning the electronic device generates a control signal every 16.6ms to trigger the Vsync signal period.

[0088] Additionally, it's important to note that Vsync signals can be categorized into software Vsync signals and hardware Vsync signals. Software Vsync signals include Vsync-APP and Vsync-SF. Vsync-APP is used to trigger the rendering process. Vsync-SF is used to trigger the compositing process. Hardware Vsync signals (Vsync-HW) are used to trigger the screen display refresh process.

[0089] Normally, the software Vsync signal and the hardware Vsync signal maintain periodic synchronization. Taking a change between 120Hz and 60Hz as an example, if Vsync-HW switches from 120Hz to 60Hz, Vsync-APP and Vsync-SF change synchronously, switching from 120Hz to 60Hz.

[0090] Electronic devices can display a user interface on a screen for users to view and operate. When the user interface displayed by the electronic device changes, the device can use a series of consecutive image frames to transition from the previous user interface to the new one. This enhances the aesthetics of the user interface during the change and helps users understand the logical relationship between the two interfaces, making it easier for them to operate. The series of image frames used to achieve this transition when the user interface changes can be called a motion effect. The electronic device can play the motion effect according to its attributes. These attributes include motion effect content (e.g., from small to large or from large to small), motion effect size (e.g., the size of the image frames during execution), motion effect duration (e.g., 400ms), or at least one of the following: motion effect start position and motion effect end position. The motion effect start position indicates the position of the first frame in the multiple image frames included in the motion effect on the screen, and the motion effect end position indicates the position of the last frame in the multiple image frames included in the motion effect on the screen.

[0091] When electronic devices execute animations, they must ensure that the changed user interface displays correctly after the animation finishes playing, while also ensuring that the animation execution time is not too long, causing users to wait excessively. Specifically, when the user interface displayed on the electronic device changes, the device needs to render the changed user interface. If the animation has finished playing but the changed user interface has not yet been rendered, the electronic device must wait for the changed user interface to be rendered before displaying it. This could result in users seeing a blank interface for a brief moment after the animation finishes playing, negatively impacting the user experience.

[0092] Figures 3A-3D This is a schematic diagram of a scene where the animation playback is complete but the user interface is not yet fully drawn, as provided in the embodiments of this application.

[0093] like Figure 3A As shown, the electronic device 100 displays the main online note-taking interface 301 of the online note-taking application in portrait mode. The main online note-taking interface 301 can display one or more online note-taking options. The main online note-taking interface 301 is housed in a window. When the electronic device 100 changes from portrait mode to a more dynamic mode... Figure 3B In the landscape mode shown, the electronic device 100 needs to rotate the interface elements of the online note-taking main interface 301 by 90° and adjust the content, layout, size, etc. of the interface elements in the online note-taking main interface 301 to adapt to the landscape mode. Therefore, the electronic device 100 needs to redraw the online note-taking main interface 301. Figure 3BAs shown, the electronic device 100 plays a motion effect that rotates the window used to display the main interface 301 of the online notes. The electronic device 100 can display the rotation process of the corresponding window of the main interface 301 of the online notes through multiple image frames, with the rotation angle of the window in each image frame being larger than the rotation angle of the window in the preceding image frames. After rotation, the electronic device 100 displays the window as shown... Figure 3C At the position shown. If the rotation animation of the electronic device 100 has finished playing but the main online note interface 301 to be displayed in the window has not yet been drawn, the following may occur: Figure 3C The online note-taking main interface shown in step 301 has no interface elements displayed in the corresponding window. After a period of time, as... Figure 3D As shown, the electronic device 100 only displays the interface elements in the window after completing the drawing of the main online note-taking interface 301. This may result in the user perceiving a blank interface for a period of time after the electronic device 100 displays the rotation animation, before the interface elements finally appear in the window, thus affecting the user's viewing experience.

[0094] To address the aforementioned issues, in some embodiments, the electronic device 100 may execute animations after the user interface to be displayed has been drawn. For example, the electronic device 100 may be composed of… Figure 3A When switching from portrait to landscape mode, the electronic device 100 can first draw the main online note-taking interface 301 for landscape mode. After the main online note-taking interface 301 is drawn, the rotation animation of the corresponding window of the main online note-taking interface 301 will be played. Finally, the electronic device 100 can display the drawn main online note-taking interface 301 in the window after the window is rotated to the specified position. This effectively avoids the situation where the animation is completed, but the user interface to be displayed has not been drawn yet, resulting in no interface elements being displayed in the window.

[0095] Although drawing the user interface before executing animations can effectively avoid the situation where no interface elements are displayed in the window after the animation is completed, in some scenarios there may be multiple user interfaces to be executed. Among these multiple user interfaces, only some user interfaces may need to be redrawn. If the electronic device waits for all user interfaces to be drawn before executing the animation, the user may perceive that the electronic device is too slow, which will affect the user experience.

[0096] Figures 4A-4D This is a schematic diagram illustrating a scenario where the electronic device provided in this application responds too slowly after receiving a user operation.

[0097] like Figure 4AAs shown, the electronic device 100 displays the main online note-taking interface 301. The main online note-taking interface 301 can contain multiple online note options, such as online note option 301A. Online note option 301A can display a preview image of the note, the note title ("The little dog on the street is so cute"), the note publisher ("User AC"), and the number of likes the note has received ("20"). The content of other online note options can be found in the introduction to online note option 301A mentioned above, and will not be repeated here. The electronic device 100 can receive user clicks on online note option 301A and respond to these clicks, such as... Figure 4B As shown, the electronic device 100 can play an animation of the online note-taking main interface 301 moving to the left, and an animation of the note details interface 302 gradually expanding to the right of the online note-taking main interface 301. The note details interface 302 can include the detailed content of the note corresponding to the online note option 301A, such as images other than the preview image, the content of the note ("I really want to raise one"), the publication time of the note, and note comments, etc. Figure 4C As shown, as the animation plays, the display position of the online note-taking main interface 301 gradually moves to the left, and the size of the note details interface 302 on the screen gradually increases. Figure 4DAs shown, after the animation finishes playing, the electronic device 100 can display the online note-taking main interface 301 on the left side of the screen and the note details interface 302 on the right side of the screen. The sum of the horizontal lengths of the online note-taking main interface 301 and the note details interface 302 equals the horizontal length of the screen (in landscape mode, the horizontal length of the screen is the length of its longer side). When the electronic device 100 receives a user's action on other note options in the online note-taking main interface 301, the electronic device 100 can also display the note details interface corresponding to those other notes, and display it in the same location as the note details interface 302. In this way, the user can browse the online note-taking main interface 301 on the left side of the screen to select the note they want to view, and view the detailed content of the note on the right side of the screen. The boundary between the main online note-taking interface 301 and the note details interface 302 may also include a retractable control 303. When the electronic device 100 receives an operation from the user pressing and moving the retractable control to the left, the electronic device 100 can compress the width of the main online note-taking interface 301 and stretch the width of the note details interface 302; when the electronic device 100 receives an operation from the user pressing and moving the retractable control to the right, the electronic device 100 can compress the width of the note details interface 302 and stretch the width of the main online note-taking interface 301. It is not limited to displaying the main online note-taking interface 301 on the left side of the screen and the note details interface 302 on the right side of the screen; it is also possible to display the note details interface 302 on the right side of the screen and the main online note-taking interface 301 on the left side of the screen.

[0098] Among them, Figure 4A After the electronic device 100 receives a user's click on the online notes option 301A, it still needs to display the main online notes interface 301. The main online notes interface 301 only changes its display position; its size and content remain unchanged. The electronic device 100 needs to draw the notes details interface 302 and redraw the moved main online notes interface 301. If the electronic device 100 waits for both user interfaces to be drawn before executing the animation of the main online notes interface 301 moving to the left and the animation of the corresponding window of the notes details interface 302 gradually expanding, the user may perceive that the electronic device executes the animations only after a considerable delay following the click, thus affecting the user experience.

[0099] Figure 5 This is a schematic diagram of the display process of the electronic device 100 provided in this application executing animation effects after the user interface is drawn.

[0100] like Figure 5 As shown, when the electronic device 100 is displaying interface 1 on the screen, it receives an operation from the user to launch interface 2, where interface 1 is, for example, Figure 4AThe online note-taking main interface 301 is shown, and interface 2 is, for example, the note details interface 302. After the electronic device 100 receives the user's operation to start interface 2 (such as clicking the online note option 301A), it will draw and render interface 2 when the Vsync signal arrives, and redraw interface 1 after the display position is moved (for ease of distinction, the redrawn interface 1 is referred to as interface 1').

[0101] The animation playback component waits for Interface 1' and Interface 2 to be drawn before calculating their animation parameters and generating one or more animation frames based on these parameters. Since both Interface 1' and Interface 2 are already drawn, the animation playback component can generate animation frames based on screenshots of Interface 1' and Interface 2. The animation content of Interface 1' could be, for example, as follows: Figures 4B-4C The animation effect of panning the display position on the main interface 301 of the online notes app; the animation content of interface 2 could be, for example, as follows: Figures 4B-4C The animation effect of the online note details interface 302 gradually unfolding is described below. For ease of description, the animation effect of interface 1' is referred to as animation effect A, and the animation effect of interface 2 is referred to as animation effect B. Each animation effect can contain multiple animation frames (i.e., image frames). For example, animation effect A includes animation frames A1, A2, A3, etc., and animation effect B can include animation frames B1, B2, B3, etc. From animation frame A1 to animation frame A3, the position of the online note main interface 301 on the display screen gradually shifts to the left, and from animation frame B1 to animation frame B3, the size of the note details interface 302 on the display screen gradually increases. It is understood that each animation effect can contain more or fewer animation frames, and this embodiment does not limit this.

[0102] An image compositing system can composite motion effect frames to obtain a user interface frame to be displayed on the screen. For example, an image compositing system can composite motion effect frame A1, motion effect frame B1, and the status bar at the top of the screen to obtain a user interface frame to be displayed.

[0103] The display screen can receive a user interface to be displayed synthesized by the image compositing system, such as the user interface containing motion effect frame A1 and motion effect frame B1 mentioned above, and then the display screen can display the user interface after receiving the Vsync signal.

[0104] The process of electronic device 100 composing other motion effect frames and displaying the motion effect frames can refer to the process of composing and displaying motion effect frames A1 and B1 described above, and will not be repeated here.

[0105] After the electronic device 100 has displayed all the motion frames contained in motion effect A and motion effect B, the electronic device 100 can display interface 1' and interface 2 on the display screen. Among them, Figure 4D In the example shown, interface 1' can be displayed on the left side of the display screen, and interface 2 can be displayed on the right side of the display screen.

[0106] from Figure 5 As can be seen, when electronic device 100 waits for the interface to be drawn before executing the animation frame, it cannot immediately respond to user actions on the display screen. Especially when the drawing time required for interfaces 1' and 2 to execute the animation is long, the waiting time for the electronic device before executing the animation is even longer. This makes the perceived delay between the user's action on the display screen and the electronic device's response on the display screen even more severe, significantly impacting the user experience.

[0107] It should be noted that a window is the carrier of the user interface. When an electronic device 100 applies animation effects to the user interface, the animation effects are applied to the window of that user interface. During the execution of the effects, what is displayed in the window is a screenshot (or snapshot) of the user interface. Figures 4A-4D In the scenario shown, there are two user interfaces for executing animation effects: the online note-taking main interface 301 and the note details interface 302. The online note-taking main interface 301 only involves a change in display position; its size and content remain unchanged. Therefore, the electronic device 100 does not need to wait for the online note-taking main interface 301 to be redrawn when executing the animation effect. To improve the response speed of the electronic device, in some embodiments, in scenarios where multiple user interfaces are playing animation effects while the size and content of some or all of them remain unchanged, the electronic device 100 can execute the animation effect without waiting for the user interface to be drawn. This allows the electronic device to promptly respond on the display screen (i.e., play the animation effect) after receiving user input.

[0108] Figure 6 This is a timing diagram of an electronic device 100 performing motion effects according to an embodiment of this application.

[0109] in, Figure 6 by Figures 4A-4D The scene shown illustrates the process of electronic device 100 performing animations, and is not limited to... Figures 4A-4D The scene shown, Figure 6 The method of electronic device 100 executing animation in the timing diagram shown can also be applied to other scenarios where two user interfaces are displayed simultaneously after another user interface is launched in one user interface, such as enabling split-screen display, enabling floating window, etc. This application embodiment does not limit this.

[0110] The electronic device 100 performs the animation in steps including but not limited to the following:

[0111] S601, The application receives operation 1 from the user on interface 1, which is used to start interface 2.

[0112] S602, The application sends an instruction to the Activity Manager to create interface 2.

[0113] S603, Activity Manager creation interface 2.

[0114] by Figure 4A Taking the illustrated embodiment as an example, the application could be an online note-taking application, and operation 1 could be, for example, clicking the online note option 301A in the main online note-taking interface 301. Operation 1 is used to launch the note details interface 302. Furthermore, the application can send a command to the activity manager to create interface 2. The activity manager can then respond to the command and create interface 2. The application can create interface 2 by calling the startActivity method.

[0115] S604. The Activity Manager sends instructions to the Motion Effect Object Processing Module to create motion effect objects through the Motion Effect Object Control Module.

[0116] S605, The motion effect object control module sends an instruction to the motion effect object processing module to instruct the motion effect object to start collecting the user interface of the motion effect to be executed.

[0117] S606, The motion effect object processing module instructs the window transaction synchronization module to create a synchronized motion effect set for collecting user interface motion effects to be executed.

[0118] S607, the window transaction synchronization module creates a collection of synchronized animation effects and begins collecting user interfaces.

[0119] The Activity Manager can instruct the Motion Object Control Module to create motion objects by calling the `transitionController.createAndStartSelecting()` method. The Motion Object Control Module then creates the motion objects.

[0120] Then the motion object control module can instruct the motion object to enter the collection state. Specifically, the motion object control module can call the TransitionController.moveToCollecting() method and the Transition.startCollecting() method to instruct the motion object to start collecting the user interface of the motion effect to be executed.

[0121] The motion effects object processing module can collect the user interface of the animations to be executed through a synchronized motion effects set (SyncSet), which can also be called a synchronization group. When multiple windows or interface elements need to update their display content, the synchronized motion effects set can be used to ensure that these multiple windows or interface elements are drawn and displayed at the same time (i.e., synchronized), avoiding problems such as unsynchronized or misaligned display content. The motion effects object processing module can call BLASTSyncEngine.startSyncSet to instruct the window transaction synchronization module to create a synchronized motion effects set. Then, the window transaction synchronization module enters the state of collecting the user interface through the synchronized motion effects set. The window transaction synchronization module can start collecting the user interface of the animations to be executed through BLASTSyncEngine.pr epareSyncSetstartSyncSet(). The window carries the display of the user interface, and the user interface of the animations to be executed collected by the window transaction synchronization module is the window where the user interface of the animations to be executed is located.

[0122] S608, the target display position and size of interface 1 after the application settings interface 2 is launched.

[0123] After receiving Operation 1 in S601, the application, in addition to creating Interface 2, also needs to set the size and position of Interface 1 to be displayed after Interface 2 is started. For example, the application can be set to display Interface 1 on the left side of the screen.

[0124] S609, The application adds interface 1 to the synchronized animation collection.

[0125] S610, Activity Manager adds interface 2 to the synchronized animation collection.

[0126] Once the target display position and size of Interface 1 are set, the application can add Interface 1 to the synchronized animation collection of the animation object. After Interface 2 is created, the Activity Manager can add Interface 2 to the synchronized animation collection. Adding Interface 1 and Interface 2 to the synchronized animation collection is equivalent to associating Interface 1 and Interface 2 with the animation object, thus allowing animations to be applied to Interface 1 and Interface 2.

[0127] S611. The application confirms that interface 1 remains visible after interface 2 is started, and the size and elements of interface 1 remain unchanged.

[0128] S612. The application sets a first flag on the task stack, which indicates that the interface should not be drawn when executing animation effects.

[0129] "Interface 1 is visible" means that after Interface 2 is launched, Interface 1 is still displayed on the screen. "Interface 1 size remains unchanged" means that the size of Interface 1 displayed on the screen does not change. "Interface elements of Interface 1 remain unchanged" means that the content displayed inside Interface 1 does not change. Furthermore, the application can set a first flag on the task stack. The task stack is used to store the application's user interface; different applications' user interfaces can be stored in different task stacks. The user interface at the top of the task stack can be displayed. When the application sets the first flag on the task stack, it sets the first flag for all user interfaces in the application, meaning that none of the application's user interfaces will wait for the user interface to be drawn when executing animations.

[0130] In some embodiments, if the application determines that interface 1 is not visible after interface 2 is launched, or that the size of interface 1 changes after interface 2 is launched, or that the interface elements of interface 1 change after interface 2 is launched, the application may set a second flag on the task stack. The second flag may be used to indicate that the animation effect should be executed only after the interface is drawn.

[0131] S613, The Activity Manager sends a command to the Motion Effect Object Processing Module to start executing the motion effect through the Motion Effect Object Control Module.

[0132] S614. The motion effect object processing module sets the synchronization motion effect set preparation status to the window transaction set module through the window transaction synchronization module.

[0133] S615, The window transaction collection module requests the window layout module to draw the interface for the animation effect to be executed.

[0134] S616 The window transaction synchronization module queries the window container to see if the interface drawing is complete through the window transaction collection module.

[0135] The Activity Manager can determine the creation result of Interface 2 in S602 by calling the ActivityStarter.handleStartResult() method, and send a command to start executing the animation after Interface 2 is created. The Activity Manager can instruct the animation object control module to start executing the animation by calling the TransitionController.requestStartTransition() method. Furthermore, the animation object control module can call the Transitioncontroller.start() method to start executing the animation.

[0136] The animation object processing module can call the `Transition.applyReady()` method to enter the preparation state of the synchronized animation collection. Then, the animation object processing module can call the `BLASTSyncEngine.setReady()` method to set the preparation state of the synchronized animation collection. After the synchronized animation collection enters the preparation state, it can trigger the window transaction collection module to request the window layout module to draw the interfaces of the animations to be executed, including interface 1 and interface 2. The window transaction collection module can request the window layout module to draw the interfaces by calling the `BLASTSyncEngine.requestTraversal()` method. The window layout module then calls back the `BLASTSyncEngine.onSurfacePlacement()` method to the window transaction collection module, which is used to check whether the interfaces participating in the animation have been synchronized. The window transaction synchronization module then queries whether the interfaces of the animations to be executed have been drawn. Specifically, the window transaction synchronization module can call the `BLASTSyncEngine.tryfinish()` method to check the drawing status of the interfaces with the window transaction collection module, and the window transaction collection module then calls the `BLASTSyncEngine.isSyncFinished()` method to obtain the drawing completion status of interface 1 and interface 2 from the window container.

[0137] S617, The window container obtains the flag from the task stack.

[0138] S618, The window container indicates that the animation object processing module executes the animation.

[0139] Since a first flag was set on the task stack in step S612, the window container (WindowsContainer) can obtain the first flag from the task stack. Therefore, the window container can instruct the window transaction synchronization module to execute the animation directly, regardless of whether the interface involved in the animation has been drawn. The window transaction synchronization module can call the BLASTSyncE ngine.onTransactionReady() method to inform the animation object processing module that the window container used to execute the animation is ready and can begin executing the animation.

[0140] If the flag bit obtained by the window container from the task stack in step S617 is the second flag bit, it means that the animation effect needs to be executed only after all the interfaces participating in the animation effect (i.e., the interfaces in the synchronous animation effect set) have been drawn. Therefore, the window container needs to wait for the interfaces participating in the animation effect to be drawn before executing step S618. The window transaction set module can query the window container at preset intervals to check if the interface has been drawn, until the window container returns a flag indicating that the interface drawing is complete.

[0141] S619, The motion effect object processing module calculates motion effect parameters.

[0142] S620, the motion effect object processing module plays motion effects based on motion effect parameters.

[0143] The motion effect object processing module can calculate motion effect parameters, which may include at least one of the following: motion effect content, motion effect size, motion effect duration, or motion effect start position and motion effect end position. The motion effect object processing module can then play the motion effect based on these parameters. Playing the motion effect involves generating one or more motion effect frames based on the motion effect parameters. These one or more motion effect frames are then composited by an image compositing system and displayed sequentially on the screen.

[0144] The animation content can indicate the style of the animation, such as translation, transparency changes, rotation, scaling, movement along edges, etc. The animation size indicates the size of the animation during playback. The animation duration indicates the duration of the animation. The animation start position indicates the position of the interface in the first frame of the animation, and the animation end position indicates the position of the interface in the last frame of the animation. Figures 4A-4D Taking the scenario shown as an example, the starting position of the animation on the main interface 301 of the online notes is the center of the screen, that is... Figure 4A The image shows the display position of the main online note-taking interface 301. The animation effect of the main online note-taking interface 301 ends at the left side of the screen, that is... Figure 4D The main interface of the online notes is shown in position 301. The animation object processing module can call `Transition.collectOrderChanges()`, `Transition.calculateTargets()`, and `Transition.buildFinishTransaction()` to calculate animation parameters.

[0145] Figures 7A-7D The electronic device 100 provided in this application embodiment adopts... Figure 6 The diagram shows the effect of the animation executed by the method shown.

[0146] like Figure 7A As shown, the electronic device 100 displays the main interface 301 of the online note-taking system. The electronic device 100 can receive user actions on the online note-taking option 301A, and in response to this action, the electronic device 100 can perform... Figure 6 As shown in S601-S620. Furthermore, the electronic device 100 can begin playing animation effects. For example... Figure 7BAs shown, the electronic device 100 can execute a leftward movement animation on the main online note-taking interface 301, and can also execute an expansion animation from small to large on the note details interface 302. Since the electronic device 100 does not wait for the interface to be drawn when executing the animation, therefore... Figure 7B As shown, before the note details interface 302 is fully drawn, the electronic device 100 can apply animation effects to the window used to display the note details interface 302, and the window does not contain any interface elements. Once the online note-taking application has finished drawing the note details interface 302, as shown... Figure 7C As shown, the electronic device 100 then displays a screenshot of the note details interface 302 in the window. Finally, as... Figure 7D As shown, after the electronic device 100 plays the animation, it displays the main online note interface 301 and the note details interface 302 at their respective target positions (i.e., the end position of the animation).

[0147] Figure 8 This is a schematic diagram of the display processing flow of the electronic device 100 provided in this application embodiment, which does not wait for the user interface to be drawn when performing animation effects.

[0148] like Figure 8 As shown, the electronic device 100 receives a user's operation to launch interface 2 while displaying interface 1 on the screen. Figures 7A-7D Taking the scenario shown as an example, interface 1 is, for example, the main interface 301 of the online notes, and interface 2 is, for example, the note details interface 302. Then, the application will draw and render interfaces 2 and 1' after receiving the Vsync signal. The animation playback component does not wait for the interface to be drawn, but directly generates one or more animation frames. Since interface 2 has not yet finished drawing when the animation playback component generates animation frame B1, animation frame B1 does not contain the interface elements of interface 2, but only performs animation on the window used to display interface 2. Since the display content of interface 1 has not changed, the animation playback component can use interface 1 to generate animation frame A1. Then, the image compositing system can composite animation frame A1 and animation frame B1, and finally display animation frame A1 and animation frame B1 on the screen. The content displayed on the screen at this time can be referenced... Figure 7B The electronic device 100 is shown displaying the following content: the main online note interface 301 on the screen of the electronic device 100 moves away from the center and towards the left side of the screen, while the note details interface 302 has a window that gradually enlarges. Since the note details interface 302 has not been fully drawn at this time, the window does not contain any interface elements.

[0149] Before the motion effect playback component generates motion effect frame B2, interface 2 has already been drawn. The motion effect playback component can then generate the motion effect frame based on the drawn interface 2. The image compositing system then composites motion effect frames A2 and B2, and the display screen shows the user interface containing motion effect frames A2 and B2. At this time, the content displayed on the electronic device can be referenced... Figure 7C The electronic device 100 is shown to display content where the position of the online note-taking main interface 301 on the screen of the electronic device 100 is further moved closer to the left side of the screen, the corresponding window of the note details interface 302 is further enlarged, and the interface elements of the note details interface 302 are displayed in the window.

[0150] The motion effects playback component can also generate motion effect frame A3 based on the redrawn interface 1 after interface 1' is drawn, so that the user interface containing motion effect frame A3 and motion effect frame B3 can be displayed on the screen. Finally, after the motion effects are executed, the electronic device 100 displays interface 1' and interface 2 on the screen.

[0151] As can be seen, when the electronic device 100 executes animations, it does not wait for the interface to be drawn; the electronic device 100 can display the animations on the screen much faster. This makes the user feel that the electronic device 100 responds to user actions more promptly, improving the user experience.

[0152] Figure 9 This is a flowchart illustrating the display method provided in an embodiment of this application.

[0153] like Figure 9 As shown, the method may include, but is not limited to, the following steps.

[0154] S901, The electronic device displays a first user interface on the display screen.

[0155] S902, The electronic device receives the first operation.

[0156] In some embodiments, the first operation may be an operation performed on a first user interface, and the first operation may be used to launch a second user interface. Figure 7A Taking the illustrated embodiment as an example, the first user interface may be, for example, the online note-taking main interface 301, and the first operation may be, for example, a click operation on the online note option 301A in the online note-taking main interface 301. Then, the second user interface may be, for example,... Figure 7D The note details page shown is 302.

[0157] In other embodiments, the first operation may also be an operation performed on a floating window, floating button, function button, etc., outside the first user interface displayed on the screen, or the first operation may also be an operation of clicking a physical button on the electronic device 100. This application does not limit the content of the first operation.

[0158] S903. The electronic device plays a first animation on the display screen according to the first operation. The first animation displays the first window at the first moment and the first window at the second moment. The first window at the first moment does not contain the content of the second user interface. The first window at the second moment contains the content of the second user interface. When the electronic device plays the first animation, the display screen also displays the first user interface. The content and size of the first user interface do not change before and after the first animation is played.

[0159] After the first operation triggers the launch of the second user interface, the electronic device 100 can play the first animation effect. The first animation effect can be, for example, as shown below. Figures 7B-7C The animation effect shows the first window of the note details interface (302) gradually enlarging. Specifically, at the first moment... Figure 7B As shown, the first window displayed by the electronic device 100 does not contain the content of the second user interface; while at the second moment, as Figure 7C As shown, the electronic device 100 displays the content of the second user interface within a first window. From... Figures 7A to 7D During the playback of the first animation effect of the first window by the electronic device 100, the size and content of the first user interface remain unchanged. Here, "the size of the first user interface remains unchanged" means that the size of the electronic device 100 displayed on the screen remains constant. "The content of the first user interface remains unchanged" means that the interface elements contained in the first user interface remain unchanged, that is, the content of the first user interface displayed by the electronic device remains unchanged. (Reference) Figure 8 In the illustrated embodiment, the content displayed by the electronic device 100 at the first moment may be, for example, a user interface composed of motion effect frames A1 and B1, and the content displayed by the electronic device 100 at the second moment may be, for example, a user interface composed of motion effect frames A2 and B2. For a description of the motion effect process executed by the electronic device 100, please refer to the aforementioned... Figure 8 The details of the introduction will not be repeated here.

[0160] In some embodiments, after the electronic device receives the first operation, the method further includes: the electronic device drawing a second user interface, wherein the drawing of the second user interface is completed later than the start time of the first animation playback. That is, when the electronic device starts executing the first animation, the second user interface has not yet been drawn, so the first window displayed by the electronic device at the first moment does not contain the content of the second user interface; while at the second moment, the second user interface has been drawn, so the electronic device displays the content of the second user interface in the first window at the second moment. In this way, the electronic device 100 can respond to the display screen more quickly based on user operations, improving the user experience.

[0161] In some embodiments, the method further includes: the electronic device displaying a third user interface on a display screen; the electronic device receiving a second operation; in response to the second operation, the electronic device waiting for the fourth user interface to be drawn before playing a second animation on the display screen when a first condition is met, the second animation displaying a second window at multiple moments in sequence, the second window at multiple moments containing the content of the fourth user interface; the first condition includes one or more of the following: the display screen does not include the third user interface after the electronic device plays the second animation, the content of the third user interface changes after the second animation is played, and the size of the third user interface changes after the second animation is played.

[0162] The second operation can be used to launch the fourth user interface. If the third user interface is no longer displayed on the screen after the electronic device 100 launches the fourth user interface, or if the size of the third user interface changes, or if the content of the third user interface changes, then the electronic device 100 can determine that it needs to wait for the fourth user interface to be drawn while playing the launch animation. Therefore, the second window always contains the image of the fourth user interface during the animation playback. This prevents the display from flickering due to the user interface not being fully drawn after the animation playback is complete, thus affecting the user's viewing experience.

[0163] In some embodiments, a first user interface includes one or more information options, the one or more information options include a first information option, a first operation is a click operation on the first information option, and a second user interface is a sub-interface of the first user interface.

[0164] In the user interface hierarchy, the second user interface can be located below the first user interface, and it can only be accessed after an operation is performed on top of the first user interface. The first information option may display one or more of the following: keywords, key terms, a summary, and a preview image of the first information, helping the user select from multiple information options. The second user interface is used to display detailed content of the first information or to extend the functionality of the first user interface, etc. For example, using... Figures 7A-7D Taking the illustrated scenario as an example, the first information option can include the publisher of the online note, a preview image, and the title. The second user interface can then contain the detailed content of that online note. This is not limited to this scenario; other scenarios are also possible. For example, if the first user interface is the main interface of a shopping application, it can contain one or more product options (i.e., information options). These information options can display the product's title (i.e., keywords) and a preview image. The second user interface can then display a detailed description and reviews of the product (i.e., detailed content), and can also be used to purchase the product (i.e., the aforementioned extended functionality), etc. Alternatively, if the first user interface is the main interface of a video playback application, it can contain one or more video options (i.e., information options). These information options can display the video's title and a preview image (or a live image composed of multiple preview images). When a video option is selected in the first operation, the electronic device 100 will enter the video playback interface corresponding to that video option (i.e., the second user interface). The video playback interface can be used to view the video's detailed description and / or reviews, and can also be used to play the video, etc. When a user navigates to a second user interface from the first user interface, the electronic device 100 can simultaneously display two different user interfaces. This allows the user to view detailed information in the second user interface while simultaneously previewing other information options in the first user interface, thus improving the user experience.

[0165] In other embodiments, the second user interface may be a different application from the first user interface. After the electronic device 100 activates the second user interface, the second user interface may also be displayed on top of the first user interface as a floating window.

[0166] In some embodiments, the electronic device displays a first user interface on a display screen, including: the electronic device displays the first user interface at the center of the display screen; after the electronic device plays a first motion effect on the display screen according to a first operation, the method further includes: the electronic device displays the first user interface on a first side of the display screen and displays a second user interface on a second side of the display screen.

[0167] refer to Figure 7AIn the illustrated embodiment, the first user interface is, for example, an online note-taking main interface 301, and the second user interface is, for example, a note details interface 302. The electronic device first displays the online note-taking main interface 301 in the center of the display screen. After the electronic device plays the first animation effect of the note details interface 302 according to the first operation, refer to... Figure 7D In the illustrated embodiment, the main online note-taking interface 301 and the note details interface 302 are displayed on different sides of the screen. The first side is, for example, the left side of the screen, and the second side is, for example, the right side of the screen. This allows the user to browse both user interfaces simultaneously, improving the user experience.

[0168] In some embodiments, after the electronic device receives the first operation, the method further includes: the electronic device playing a second motion effect, the second motion effect including N consecutive image frames, N being greater than or equal to 1, and the display position of the first user interface moving from the center of the display screen to the first side from the first image frame to the Nth image frame in the N image frames.

[0169] refer to Figures 7A-7D In the illustrated embodiment, the starting position of the animation effect of the first user interface is the center of the display screen, and the ending position of the animation effect of the first user interface is the left side of the display screen (i.e., the first side). The electronic device plays the second animation effect, which is to say, plays N consecutive image frames. Among them, the display position of the first user interface in the N image frames gradually shifts to the left from the center of the display screen.

[0170] In some embodiments, the first motion effect includes M consecutive image frames, where M is greater than or equal to 1; the electronic device plays the first motion effect by: the electronic device sequentially displaying M image frames, wherein the size of the first window increases sequentially from the first image frame to the Mth image frame, or the area of ​​the visible region of the first window increases sequentially from the first image frame to the Mth image frame.

[0171] Among them, reference Figures 7A-7D In the illustrated embodiment, the electronic device 100 plays a first motion effect, which means sequentially displaying M consecutive image frames. The first motion effect could be, for example, a motion effect where a first window gradually increases in size from the first image frame to the Mth image frame. Alternatively, the first motion effect could be a translational entrance motion effect, where the visible area of ​​the first window gradually increases from the first image frame to the Mth image frame. For example, in the first image frame, the electronic device 100 displays only a small portion of the first window, while in the final Mth image frame, the electronic device can display the entire first window.

[0172] In some embodiments, both the first user interface and the second user interface belong to the first application. After the electronic device receives the first operation, the method further includes: the electronic device determining that the first user interface remains visible and that the size and content of the first user interface do not change; the electronic device setting a first flag bit on the task stack, the task stack being used to manage the user interface of the first application, the user interface located at the top of the task stack being displayed on the screen; and the electronic device determining, based on the first flag bit in the task stack, that it does not wait for the second user interface to be drawn while playing the first animation effect.

[0173] refer to Figure 6 In steps S611-S612 of the illustrated embodiment, if the application determines that the first user interface remains visible after the second user interface is started, and that the size and elements of the first user interface do not change, then the electronic device can set a flag on the task stack. This way, when the electronic device subsequently executes animations, it no longer needs to wait for the user interface to be drawn, but can directly execute the animations, thereby speeding up the response time.

[0174] In some embodiments, after the electronic device plays the first motion effect, the method further includes: the electronic device replacing a first flag bit in the task stack with a second flag bit, the second flag bit indicating that the electronic device waits for the drawing of the user interface to be executed when playing the motion effect on the user interface of the first application.

[0175] The electronic device can replace the flag after the animation is played. This ensures that if the user interface elements of the first application change subsequently, the electronic device will still wait for the user interface of the animation to be drawn. This avoids situations where the electronic device completes the animation before the user interface is fully drawn, which could cause flickering and negatively impact the user's viewing experience, especially in scenarios with significant interface changes.

[0176] In some embodiments, the electronic device is in landscape mode, or the electronic device has a foldable screen that is unfolded.

[0177] The electronic device can display a first user interface and a second user interface in landscape mode. Alternatively, the electronic device can be a foldable screen device with its foldable screen in an unfolded state. When the electronic device is in landscape mode, the width of the display screen can be the long side, and the height can be the short side. The unfolded state of the foldable screen can mean that two or more display panels capable of displaying the user interface face the same direction, and these two or more display panels can be combined to display the user interface. This makes the electronic device longer in the horizontal direction, allowing for a clearer simultaneous display of two interfaces on the left and right sides of the screen. However, the electronic device can also be in portrait mode, where the first user interface is displayed on the top (or bottom) side of the screen, and the second user interface can be displayed on the bottom (or top) side of the screen; this embodiment does not impose any limitations on this.

[0178] In some embodiments, before the electronic device plays the first motion effect on the display screen according to the first operation, the method further includes: the electronic device determining motion effect parameters, the motion effect parameters including motion effect content, motion effect size, motion effect duration, or at least one of motion effect start position and motion effect end position; the motion effect start position is used to indicate the position of the first image frame in the motion effect on the display screen, and the motion effect end position is used to indicate the position of the last image frame in the motion effect on the display screen; the electronic device playing the first motion effect includes: the electronic device playing the first motion effect based on the motion effect parameters.

[0179] by Figures 7A-7D Taking the illustrated embodiment as an example, when the electronic device is playing the first animation effect of the first window, the starting position of the animation effect can be, for example,... Figure 7A The note details interface 302 shown corresponds to the position of the first window displayed on the screen. The end position of the animation effect could be, for example,... Figure 7D The position of the note details interface 302 on the display screen is shown. The animation content could be, for example, the first window gradually increasing in size, and the animation size could be, for example, the size of the right side of the display screen (i.e., the target display area of ​​the note details interface 302 on the right side of the display screen). The electronic device can then play the first animation based on the animation parameters.

[0180] The apparatus for performing the above method provided in the embodiments of this application will now be described. Figure 10 As shown, Figure 10 This is a schematic diagram of the structure of a device provided in an embodiment of this application. The display device 1000 may be an electronic device in the embodiments of this application, or a chip or chip system within an electronic device.

[0181] like Figure 10As shown, the display device 1000 may include a display unit 1001 and an operation receiving unit 1002. The display unit 1001 is used to display a first user interface on the screen; the operation receiving unit 1002 is used to receive a first operation; the display unit 1001 is also used to play a first animation effect on the screen according to the first operation. The first animation effect sequentially displays a first window at a first moment and a first window at a second moment. The first window at the first moment does not contain the content of the second user interface, while the first window at the second moment contains the content of the second user interface. The display unit 1001 also displays the first user interface while playing the first animation effect, and the content and size of the first user interface remain unchanged before and after the first animation effect is played.

[0182] In some embodiments, the display unit 1001 is further configured to display a third user interface; the operation receiving unit 1002 is further configured to receive a second operation; the display unit 1001 is further configured to wait for the fourth user interface to be drawn before playing a second animation effect when the first condition is met, the second animation effect sequentially displays a second window at multiple moments, and the second window at multiple moments contains the content of the fourth user interface; the first condition includes one or more of the following: the display unit 1001 does not display the third user interface after playing the second animation effect, the content of the third user interface changes after the second animation effect is played, and the size of the third user interface changes after the second animation effect is played.

[0183] In some embodiments, the display device 1000 further includes a processing unit 1003. After the operation receiving unit 1002 receives the first operation, the processing unit 1003 is used to draw a second user interface. The time when the second user interface is completed is later than the start time of the first motion effect playback.

[0184] In some embodiments, the display unit 1001 displays a first user interface, including: the display unit 1001 displays the first user interface at the center of the display screen; after the display unit 1001 plays a first motion effect on the display screen according to a first operation, the display unit 1001 is further configured to display the first user interface on a first side of the display unit 1001 and display a second user interface on a second side.

[0185] In some embodiments, after the operation receiving unit 1002 receives the first operation, the display unit 1001 is further used to play a second motion effect. The second motion effect includes N consecutive image frames, where N is greater than or equal to 1. The display position of the first user interface from the first image frame to the Nth image frame in the N image frames moves from the center of the display unit 1001 toward the first side.

[0186] In some embodiments, the first motion effect includes M consecutive image frames, where M is greater than or equal to 1; the display unit 1001 plays the first motion effect, including: the display unit 1001 sequentially displays M image frames, wherein the size of the first window increases sequentially from the first image frame to the Mth image frame, or the area of ​​the visible region of the first window increases sequentially from the first image frame to the Mth image frame.

[0187] In some embodiments, both the first user interface and the second user interface belong to the first application. The processing unit 1003 is further configured to determine, after the operation receiving unit 1002 receives the first operation, that the first user interface remains visible and that the size and content of the first user interface do not change. The processing unit 1003 is further configured to set a first flag bit in the task stack, the task stack being used to manage the user interface of the first application, and the user interface located at the top of the task stack being displayed to the display unit 1001. The processing unit 1003 is further configured to determine, based on the first flag bit in the task stack, that it does not wait for the drawing of the second user interface when playing the first animation effect.

[0188] In some embodiments, the processing unit 1003 is further configured to replace the first flag bit of the task stack with a second flag bit after the display unit 1001 plays the first animation effect, the second flag bit indicating the drawing of the user interface waiting for the animation effect to be executed when the animation effect is played on the user interface of the first application.

[0189] In some embodiments, the processing unit 1003 is further configured to determine motion effect parameters before the display unit 1001 plays the first motion effect according to the first operation. The motion effect parameters include at least one of motion effect content, motion effect size, motion effect duration, or motion effect start position and motion effect end position. The motion effect start position is used to indicate the position of the first image frame in the motion effect on the display unit 1001, and the motion effect end position is used to indicate the position of the last image frame in the motion effect on the display unit 1001. The display unit 1001 plays the first motion effect, including: the display unit 1001 plays the first motion effect based on the motion effect parameters.

[0190] Figure 11 This is a schematic diagram of the structure of a chip provided in an embodiment of this application.

[0191] like Figure 11 As shown, chip 1100 includes one or more (including two) processors 1101, communication lines 1102 and communication interfaces 1103. Optionally, chip 1100 also includes a memory 1104.

[0192] In some implementations, memory 1104 stores elements such as executable modules or data structures, or subsets thereof, or extended sets thereof.

[0193] The methods described in the embodiments of this application can be applied to or implemented by processor 1101. Processor 1101 may be an integrated circuit chip with signal processing capabilities. In implementation, each step of the above method can be completed by the integrated logic circuit in the hardware of processor 1101 or by instructions in software form. The processor 1101 may be a general-purpose processor (e.g., a microprocessor or conventional processor), a digital signal processor, an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gates, transistor logic devices, or discrete hardware components. Processor 1101 can implement or execute the methods, steps, and logic block diagrams disclosed in the embodiments of this application.

[0194] The steps of the method disclosed in the embodiments of this application can be directly implemented by a hardware decoding processor, or implemented by a combination of hardware and software modules in the decoding processor. The software modules can be located in mature storage media in the art, such as random access memory, read-only memory, programmable read-only memory, or electrically erasable programmable read-only memory (EEPROM). This storage medium is located in memory 1104, and processor 1101 reads information from memory 1104 and, in conjunction with its hardware, completes the steps of the above method.

[0195] The processor 1101, memory 1104 and communication interface 1103 can communicate with each other via communication line 1102.

[0196] In the above embodiments, the instructions stored in the memory for execution by the processor can be implemented in the form of a computer program product. This computer program product can be pre-written into the memory, or it can be downloaded and installed into the memory as software.

[0197] This application also provides a computer program product comprising one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the flow or function according to the embodiments of this application is generated. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, computer instructions may be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium may be any available medium that a computer can store or a data storage device such as a server or data center that integrates one or more available media. For example, available media may include magnetic media (e.g., floppy disk, hard disk, or magnetic tape), optical media (e.g., digital versatile disc (DVD)), or semiconductor media (e.g., solid-state disk (SSD)).

[0198] This application also provides a computer-readable storage medium. The computer-readable storage medium stores a computer program or instructions. When the computer program or instructions are executed by a processor, they implement the methods described above. The methods described in the above embodiments can be implemented wholly or partially by software, hardware, firmware, or any combination thereof. If implemented in software, the functionality can be stored as one or more instructions or code on or transmitted over the computer-readable medium. The computer-readable medium can include computer storage media and communication media, and can also include any medium that can transfer a computer program from one place to another. The storage medium can be any target medium accessible by a computer.

[0199] As one possible design, computer-readable media may include compact disc read-only memory (CD-ROM), RAM, ROM, EEPROM, or other optical disc storage; computer-readable media may include disk storage or other disk storage devices. Furthermore, any connecting cable may also be appropriately referred to as computer-readable media. For example, if software is transmitted from a website, server, or other remote source using coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies such as infrared, radio, and microwave, then coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies such as infrared, radio, and microwave are included in the definition of media. As used herein, disks and optical discs include optical discs (CD), laser discs, optical discs, DVDs, floppy disks, and Blu-ray discs, where disks typically reproduce data magnetically, while optical discs optically reproduce data using lasers. Combinations of the above should also be included within the scope of computer-readable media.

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

[0201] As used in the above embodiments, depending on the context, the term "when..." can be interpreted as meaning "if...", "after...", "in response to determining...", or "in response to detecting...". Similarly, depending on the context, the phrase "when determining..." or "if (the stated condition or event) is interpreted as meaning "if determining...", "in response to determining...", "when (the stated condition or event) is detected", or "in response to detecting (the stated condition or event)".

[0202] In the above embodiments, implementation can be achieved entirely or partially through software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented entirely or partially in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state drive), etc.

[0203] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. This program can be stored in a computer-readable storage medium, and when executed, it can include the processes described in the above method embodiments. The aforementioned storage medium includes various media capable of storing program code, such as ROM or random access memory (RAM), magnetic disks, or optical disks.

Claims

1. A display method characterized by comprising: The method is applied to an electronic device, the electronic device including a display screen, and the method includes: The electronic device displays a first user interface on the display screen; The electronic device receives the first operation; The electronic device plays a first animation on the display screen according to the first operation. The first animation displays the first window at a first moment and the first window at a second moment. The first window at the first moment does not contain the content of the second user interface, while the first window at the second moment contains the content of the second user interface. When the electronic device plays the first animation, the display screen also displays the first user interface. The content and size of the first user interface do not change before and after the first animation is played.

2. The method of claim 1, wherein, The method further includes: The electronic device displays a third user interface on the display screen; The electronic device receives a second operation; In response to the second operation, when the first condition is met, the electronic device waits for the fourth user interface to be drawn before playing the second animation on the display screen. The second animation displays the second window at multiple moments, and the content of the fourth user interface is included in the second window at each of the multiple moments. The first condition includes one or more of the following: the display screen does not include the third user interface after the electronic device plays the second animation effect; the content of the third user interface changes after the second animation effect is played; the size of the third user interface changes after the second animation effect is played.

3. The method according to claim 1 or 2, characterized in that, The first user interface includes one or more information options, the one or more information options include a first information option, the first operation is a click operation on the first information option, and the second user interface is the next level interface of the first user interface.

4. The method according to any one of claims 1 to 3, characterized in that, After the electronic device receives the first operation, the method further includes: The electronic device draws the second user interface, and the second user interface is completed later than the start time of the first animation playback.

5. The method according to any one of claims 1-4, characterized in that, The electronic device displays a first user interface on the display screen, including: the electronic device displays the first user interface at the center of the display screen; After the electronic device plays the first animation on the display screen according to the first operation, the method further includes: The electronic device displays the first user interface on a first side of the display screen and the second user interface on a second side of the display screen.

6. The method of claim 5, wherein, After the electronic device receives the first operation, the method further includes: The electronic device plays a second motion effect, which includes N consecutive image frames, where N is greater than or equal to 1. In the N image frames, from the first image frame to the Nth image frame, the display position of the first user interface moves from the center of the display screen toward the first side.

7. The method according to any one of claims 1 to 6, characterized in that, The first motion effect includes M consecutive image frames, where M is greater than or equal to 1; The electronic device plays the first animation effect, which includes: the electronic device sequentially displays the M image frames, wherein the size of the first window increases sequentially from the first image frame to the Mth image frame, or the area of ​​the visible region of the first window increases sequentially from the first image frame to the Mth image frame.

8. The method according to any one of claims 1-7, characterized in that, Both the first user interface and the second user interface belong to the first application. After the electronic device receives the first operation, the method further includes: The electronic device determines that the first user interface remains visible and that the size and content of the first user interface do not change; The electronic device sets a first flag bit for the task stack, the task stack is used to manage the user interface of the first application, and the user interface located at the top of the task stack is displayed on the screen. The electronic device determines, based on the first flag in the task stack, that it will not wait for the second user interface to be drawn while playing the first animation.

9. The method of claim 8, wherein, After the electronic device plays the first animation effect, the method further includes: The electronic device replaces the first flag bit of the task stack with a second flag bit, the second flag bit indicating that the electronic device waits for the drawing of the user interface to be animated when playing animation effects on the user interface of the first application.

10. The method according to any one of claims 1-9, characterized in that, The electronic device is in landscape mode, or the electronic device has a foldable screen and the foldable screen is in an unfolded state.

11. The method according to any one of claims 1-10, characterized in that, Before the electronic device plays the first animation on the display screen according to the first operation, the method further includes: The electronic device determines motion effect parameters, which include at least one of motion effect content, motion effect size, motion effect duration, or motion effect start position and motion effect end position; the motion effect start position is used to indicate the position of the first image frame in the motion effect on the display screen, and the motion effect end position is used to indicate the position of the last image frame in the motion effect on the display screen. The electronic device playing the first motion effect includes: the electronic device playing the first motion effect based on the motion effect parameters.

12. An electronic device, characterized in that, The electronic device includes: a display screen, a memory, and a processor coupled to the memory; the display screen is used to display a user interface, the memory stores a computer program, and the processor executes the computer program to cause the electronic device to implement the method as described in any one of claims 1-11.

13. A computer readable storage medium storing computer instructions, wherein, When the computer instructions are executed on the processor, they cause the method as described in any one of claims 1-11 to be performed.

14. A computer program product comprising computer instructions, characterized in that, When the computer instructions are executed by the processor, they implement the method of any one of claims 1-11.

Images