Method for displaying animation effect and electronic device

Abstract

The application discloses a display method of an animation effect and an electronic device. The method is executed by the electronic device. In the method, after receiving an animation triggering event, an application process of an application determines first information according to description information of a first animation effect, and sends the first information to a rendering process. The animation triggering event is used for triggering display of the first animation effect. The first animation effect includes M frames. The first information includes description information of an Nth frame of the first animation effect and an image corresponding to at least one control in the Nth frame. M is a positive integer, and N is a positive integer less than or equal to M. After receiving the first information from the application process, the rendering process generates display data of the Nth frame of the first animation effect according to the first information. Since the rendering process does not need to redraw the image corresponding to the at least one control in the Nth frame, the load of the rendering process is reduced, and the possibility of animation interface lag is reduced.

Description

Technical Field

[0001] This application relates to the field of electronic technology, and more particularly to a method and electronic device for displaying animation effects. Background Technology

[0002] With the development of electronic technology, more and more electronic devices are becoming part of users' daily lives. Furthermore, as the resolution, size, and other parameters of electronic device screens increase, the amount of content that can be displayed on these devices also increases.

[0003] Applications can display animation effects to users by adjusting the values ​​of attributes such as the size, position, and transparency of controls displayed on the interface.

[0004] When an application runs, it creates an application process, which includes the application's UI (user interface) thread. In the current animation framework, the application and rendering processes are separated. Before displaying the animation effect, the rendering process determines the property values ​​of controls in each frame of the animation and renders the controls in that frame based on these property values, generating the corresponding bitmap. Because the application's UI thread does not need to measure, lay out, and draw each frame, the display of the animation effect is not affected by blocking the application's UI thread.

[0005] However, the rendering process suffers from redundant rendering when rendering controls in each frame based on their property values. For example, control 1 in the first frame of an animation may only have a different position property value compared to control 1 in the second frame, while other properties remain unchanged. However, the rendering process still needs to redraw control 1 when generating the bitmap for the second frame, increasing the load on the rendering process and causing the animation to stutter. Summary of the Invention

[0006] This application provides a method and electronic device for displaying animation effects to solve the problem of animation interface stuttering.

[0007] In a first aspect, embodiments of this application provide a method for displaying animation effects. This method is applicable to electronic devices or components (such as units / modules, circuits, or chips) within said electronic devices. Taking an electronic device as an example, the method includes: upon receiving an animation trigger event, the application process of an application determines first information based on the description information of a first animation effect and sends the first information to a rendering process; wherein the animation trigger event is used to trigger the display of the first animation effect, the first animation effect includes M frames, and the first information includes the description information of the Nth frame of the first animation effect and an image corresponding to at least one control in the Nth frame, where M is a positive integer and N is a positive integer less than or equal to M; upon receiving the first information from the application process, the rendering process generates display data for the Nth frame of the first animation effect based on the first information.

[0008] In this embodiment, the description information of the Nth frame can be used to determine the attributes of each control in the Nth frame, such as size, position, and transparency. The application process can determine the image corresponding to at least one control in the Nth frame based on the description information of the Nth frame. When generating the display data for the Nth frame, the rendering process can directly use the image corresponding to at least one control in the Nth frame. Since the rendering process does not need to redraw the image corresponding to at least one control in the Nth frame, the load on the rendering process is reduced, thereby reducing the possibility of animation interface stuttering.

[0009] In one possible implementation, the application process includes the application's UI thread and the application's rendering client thread. The application process determines first information based on the description information of the first animation effect, including: the UI thread determining the time corresponding to the start frame of the first animation effect, the time corresponding to the end frame of the first animation effect, and the description information of the end frame based on the description information of the first animation effect; upon receiving the vertical synchronization signal corresponding to the Nth frame, the UI thread or the rendering client thread determines the description information of the Nth frame based on the time corresponding to the start frame, the time corresponding to the end frame, the description information of the end frame, and the time corresponding to the Nth frame; the rendering client thread determines the value of the first attribute of the at least one control based on the description information of the Nth frame, and determines the image corresponding to the at least one control based on the value of the first attribute of the at least one control.

[0010] In this implementation, generating the image corresponding to at least one control in the Nth frame can be performed by the rendering client thread. Since the UI thread is not required to generate the image corresponding to at least one control in the Nth frame, the load on the UI thread is reduced, thereby reducing the possibility of animation stuttering. Furthermore, determining the description information for the Nth frame can be performed by either the UI thread or the rendering client thread. Specifically, determining that the description information for the Nth frame is performed by the rendering client thread further reduces the load on the UI thread, thus reducing the possibility of animation stuttering.

[0011] In one possible implementation, the method further includes: when N equals 1, the at least one control is a control among all controls in the Nth frame; or, when N is greater than or equal to 2, the at least one control is a control in the Nth frame whose value of the first attribute has changed compared to the N-1th frame of the first animation effect, and / or, a control added in the Nth frame compared to the N-1th frame.

[0012] In this implementation, for the first frame of the first animation effect, the rendering client thread needs to generate images corresponding to all controls in the first frame. For frames after the first frame of the first animation effect, the rendering client thread can compare the controls in the current frame with the controls in the previous frame to determine the controls whose first attribute values ​​have changed and / or newly added controls. The rendering client thread only needs to generate images corresponding to the controls whose first attribute values ​​have changed and / or newly added controls in the current frame. That is, for controls whose first attribute values ​​have not changed, the rendering client thread does not need to generate images corresponding to those controls, reducing the load on the rendering client thread and thus reducing the possibility of animation screen stuttering.

[0013] In one possible implementation, the first attribute includes attributes related to the content carried on the control; and / or, the first attribute includes attributes related to the appearance of the control.

[0014] In this implementation, the first attribute may include one or more attributes. When the first attribute includes multiple attributes, such as attributes related to the content displayed on the control and attributes related to the appearance of the control, the workload of the rendering process in generating display data for at least one control in the Nth frame can be further reduced, thus reducing the load on the rendering process and decreasing the likelihood of animation stuttering. In addition, the first attribute may also include other attributes.

[0015] In one possible implementation, the rendering process generates display data for the Nth frame of the first animation effect based on the first information, including: the rendering process determining the value of a second attribute of each control in the Nth frame based on the description information of the Nth frame; wherein the second attribute includes attributes related to the content carried on the control, attributes related to the appearance of the control, attributes related to the position of the control, and attributes related to the size of the control; the rendering process updating a first rendering tree based on the value of the second attribute of each control; wherein the updated first rendering tree includes a first rendering node and a second rendering node, the first rendering node corresponding to a first type of image, the second rendering node corresponding to a second type of image, the second type of image being the image corresponding to the control whose first attribute value has not changed compared to the N-1th frame of the first animation effect in the Nth frame, the first type of image being the image corresponding to the control whose first attribute value has changed compared to the N-1th frame in the Nth frame, and / or the image corresponding to the newly added control compared to the N-1th frame in the Nth frame; the rendering process pasting the first type of image at the position of the first rendering node and pasting the second type of image at the position of the second rendering node to generate display data for the Nth frame of the first animation effect.

[0016] In this implementation, for controls whose first attribute value has changed in frame N compared to frame N-1, and / or for controls newly added in frame N compared to frame N-1, the rendering process has already received the image corresponding to that control (i.e., the first type of image). The rendering process can paste the newly received image corresponding to that control into the position of that control. For controls whose first attribute value has not changed in frame N compared to frame N-1, the rendering process has not received the image corresponding to that control (i.e., the second type of image). Therefore, the rendering process can paste the image corresponding to the same control in frame N-1 that was previously received into the position of that control. Since the rendering process does not need to redraw the image corresponding to each control in frame N, the load on the rendering process is reduced, thereby solving the problem of animation interface stuttering caused by high rendering process load.

[0017] In one possible implementation, the second attribute includes attributes related to the position of the control, and the rendering process updates the first rendering tree according to the value of the second attribute of each control, including: the rendering process updates the position of the rendering node in the first rendering tree according to the value of the attribute related to the position of each control.

[0018] In this implementation, the rendering process can update the position of the rendering node corresponding to the control in the first rendering tree according to the value of the position attribute of the control in the Nth frame, so that the position of the rendering node in the first rendering tree is the position of the control in the Nth frame, so as to generate the display data of the Nth frame and improve rendering efficiency.

[0019] In one possible implementation, the method further includes: after not receiving the first information from the application process, the rendering process generates display data for the Nth frame of the first animation effect based on the description information of the (N-1)th frame of the first animation effect and the image corresponding to at least one control in the (N-1)th frame; or, after receiving the description information of the Nth frame from the application process and not receiving the image corresponding to at least one control in the Nth frame from the application process, the rendering process generates display data for the Nth frame of the first animation effect based on the description information of the Nth frame and the image corresponding to at least one control in the (N-1)th frame of the first animation effect; or, after receiving the image corresponding to at least one control in the Nth frame from the application process and not receiving the description information of the Nth frame from the application process, the rendering process generates display data for the Nth frame of the first animation effect based on the description information of the (N-1)th frame of the first animation effect and the image corresponding to at least one control in the Nth frame.

[0020] In this implementation, if the rendering process does not receive the description information of frame N and / or the image corresponding to at least one control in frame N, the rendering process can reuse the description information of frame N-1 and / or the image corresponding to each control in frame N-1 to generate the display data for frame N. Since the rendering process does not need to wait a long time to receive the description information of frame N and the image corresponding to at least one control in frame N, the possibility of animation interface stuttering is reduced.

[0021] In one possible implementation, the rendering process generates display data for the Nth frame of the first animation effect based on the description information of the (N-1)th frame of the first animation effect and the image corresponding to at least one control in the (N-1)th frame. This includes: the rendering process determining the value of a second attribute for each control in the Nth frame based on the description information of the (N-1)th frame; wherein the second attribute includes attributes related to the content carried on the control, attributes related to the appearance of the control, attributes related to the position of the control, and attributes related to the size of the control; the rendering process updating a first rendering tree based on the value of the second attribute of each control; wherein the updated first rendering tree includes a third rendering node, the third rendering node corresponding to a third type of image, the third type of image being the image corresponding to at least one control in the (N-1)th frame; and the rendering process pasting the third type of image at the position of the third rendering node to generate the display data for the Nth frame of the first animation effect.

[0022] In this implementation, if the rendering process does not receive the description information of frame N and the image corresponding to at least one control in frame N, then for each control in frame N, the rendering process can determine the value of the second attribute (e.g., position, size, transparency, etc.) of the control identical to that control in frame N-1 based on the description information of frame N-1. The value of the second attribute of the control identical to that control in frame N-1 is then set to the value of the second attribute corresponding to that control (i.e., the second attribute remains unchanged). Since the rendering process has not received the image corresponding to that control again, it can paste the image corresponding to the control identical to that control in the previously received frame N-1 into the position of that control. Because the rendering process does not need to redraw the image corresponding to each control in frame N, the load on the rendering process is reduced, thus solving the problem of animation interface stuttering caused by high rendering process load.

[0023] In one possible implementation, the rendering process generates display data for the Nth frame of the first animation effect based on the description information of the Nth frame and the image corresponding to at least one control in the (N-1)th frame of the first animation effect. This includes: the rendering process determining the value of a second attribute for each control in the Nth frame based on the description information of the Nth frame; wherein the second attribute includes attributes related to the content carried on the control, attributes related to the appearance of the control, attributes related to the position of the control, and attributes related to the size of the control; the rendering process updating a first rendering tree based on the value of the second attribute of each control; wherein the updated first rendering tree includes a third rendering node, the third rendering node corresponding to a third type of image, the third type of image being the image corresponding to at least one control in the (N-1)th frame; and the rendering process pasting the third type of image at the position of the third rendering node to generate the display data for the Nth frame of the first animation effect.

[0024] In this implementation, if the rendering process receives the description information of frame N but does not receive the image corresponding to at least one control in frame N, then for each control in frame N, the rendering process can determine the value of the control's second attribute (e.g., position, size, transparency, etc.) based on the description information of frame N. However, since the rendering process has not re-received the image corresponding to that control, it can paste the image corresponding to the same control from the previously received frame N-1 into the position of that control. Because the rendering process does not need to redraw the image corresponding to each control in frame N, the load on the rendering process is reduced, thus solving the problem of animation interface stuttering caused by high rendering process load.

[0025] In one possible implementation, the rendering process generates display data for the Nth frame of the first animation effect based on the description information of the (N-1)th frame of the first animation effect and the image corresponding to at least one control in the Nth frame. This includes: the rendering process determining the value of a second attribute for each control in the Nth frame based on the description information of the (N-1)th frame; wherein the second attribute includes attributes related to the content carried on the control, attributes related to the appearance of the control, attributes related to the position of the control, and attributes related to the size of the control; the rendering process updating a first rendering tree based on the value of the second attribute of each control; wherein the updated first rendering tree includes a first... The rendering process includes a first rendering node and a second rendering node. The first rendering node corresponds to a first type of image, and the second rendering node corresponds to a second type of image. The second type of image is the image corresponding to a control whose value of the first attribute has not changed compared to the (N-1)th frame in the Nth frame. The first type of image is the image corresponding to a control whose value of the first attribute has changed compared to the (N-1)th frame in the Nth frame, and / or the image corresponding to a newly added control compared to the (N-1)th frame in the Nth frame. The rendering process pastes the first type of image at the position of the first rendering node and the second type of image at the position of the second rendering node to generate the display data for the Nth frame of the first animation effect.

[0026] In this implementation, if the rendering process does not receive the description information of frame N, but receives an image corresponding to at least one control in frame N, then for each control in frame N, the rendering process can determine the value of the second attribute (e.g., position, size, transparency, etc.) of the control identical to that control in frame N-1 based on the description information of frame N-1, and set the value of the second attribute of the control identical to that control in frame N-1 as the value of the second attribute corresponding to that control (i.e., the second attribute remains unchanged). Furthermore, for controls in frame N whose first attribute value has changed compared to frame N-1, and / or for controls newly added in frame N compared to frame N-1, where the rendering process has re-received the image corresponding to that control (i.e., the first type of image), the rendering process can paste the re-received image corresponding to that control into the position of that control; for controls in frame N whose first attribute value has not changed compared to frame N-1, where the rendering process has not re-received the image corresponding to that control (i.e., the second type of image), the rendering process can paste the previously received image corresponding to the control identical to that control in frame N-1 into the position of that control. Since the rendering process does not need to redraw the image corresponding to each control in the Nth frame, the load on the rendering process is reduced, thus solving the problem of animation interface stuttering caused by high rendering process load.

[0027] In one possible implementation, before the rendering process generates the display data for the Nth frame of the first animation effect, the method further includes: the rendering process determining whether it receives the first information from the application process within a first duration; wherein the starting time of the first duration is the time point at which the rendering process receives the vertical synchronization signal corresponding to the Nth frame.

[0028] In this implementation, if the rendering process receives the description information of the Nth frame and the image corresponding to at least one control in the Nth frame within a first time interval after receiving the vertical synchronization signal corresponding to the Nth frame, then the rendering process generates the display data for the Nth frame based on the description information of the Nth frame and the image corresponding to at least one control in the Nth frame. If the rendering process does not receive the description information of the Nth frame and / or the image corresponding to at least one control in the Nth frame within the first time interval after receiving the vertical synchronization signal corresponding to the Nth frame, then the rendering process reuses the description information of the (N-1)th frame and / or the image corresponding to each control in the (N-1)th frame to generate the display data for the Nth frame. Since the rendering process does not need to wait for a long time to receive the description information of the Nth frame and the image corresponding to at least one control in the Nth frame, the possibility of animation interface stuttering is reduced.

[0029] In one possible implementation, the image is in a format supported by the graphics processing unit (GPU) of the electronic device.

[0030] In this implementation, the format of the image corresponding to at least one control in the Nth frame generated by the application process can be a format supported by the GPU, such as a hardware image. This allows the display data of the Nth frame generated by the rendering process based on the image corresponding to at least one control in the Nth frame to be directly read by the GPU without the need for decoding or other operations, thus improving the efficiency of the GPU.

[0031] Secondly, embodiments of this application also provide an electronic device, the electronic device including a processor, a memory, and one or more programs; wherein the one or more programs are stored in the memory, and the one or more programs include instructions that, when executed by the processor, cause the electronic device to perform the method described in the first aspect or any possible design of the first aspect.

[0032] Thirdly, embodiments of this application also provide a computer-readable storage medium for storing a computer program that, when run on a computer, causes the computer to perform the method described in the first aspect or any possible design of the first aspect.

[0033] Fourthly, embodiments of this application also provide a computer program product, including a computer program that, when run on a computer, causes the computer to perform the method described in the first aspect or any possible design of the first aspect.

[0034] Fifthly, embodiments of this application also provide a chip system including a processor and an interface, the processor being configured to call and execute instructions from the interface to cause the chip system to perform the methods described in the first aspect or any possible design of the first aspect.

[0035] The beneficial effects of the second to fifth aspects and their possible designs can be referred to the description of the beneficial effects of the methods described in the first aspect and any possible design. Attached Figure Description

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

[0037] Figure 2 A schematic diagram of the software structure of an electronic device provided in an embodiment of this application;

[0038] Figure 3 A schematic diagram of an interface configured with animation effects, provided for an embodiment of this application;

[0039] Figure 4 A schematic diagram of another interface configured with animation effects provided in an embodiment of this application;

[0040] Figure 5 A flowchart illustrating a method for displaying animation effects provided in an embodiment of this application;

[0041] Figure 6 A flowchart illustrating another method for displaying animation effects provided in an embodiment of this application;

[0042] Figure 7 A schematic diagram illustrating a first animation effect provided in an embodiment of this application;

[0043] Figure 8 A flowchart illustrating another method for displaying animation effects provided in an embodiment of this application;

[0044] Figure 9 A schematic diagram of a first rendering tree provided in an embodiment of this application;

[0045] Figure 10 A schematic diagram illustrating the description information of the Nth frame for determining a first animation effect, provided in an embodiment of this application;

[0046] Figure 11A schematic diagram illustrating an image corresponding to at least one control in the Nth frame of generating a first animation effect, provided in an embodiment of this application;

[0047] Figure 12 A flowchart illustrating another method for displaying animation effects provided in an embodiment of this application;

[0048] Figure 13 A flowchart illustrating another method for displaying animation effects provided in an embodiment of this application;

[0049] Figure 14 A flowchart illustrating another method for displaying animation effects provided in an embodiment of this application;

[0050] Figure 15 A flowchart illustrating another method for displaying animation effects provided in an embodiment of this application;

[0051] Figure 16 A flowchart illustrating another method for displaying animation effects provided in an embodiment of this application;

[0052] Figure 17 A flowchart illustrating another method for displaying animation effects provided in an embodiment of this application;

[0053] Figure 18 A flowchart illustrating another method for displaying animation effects provided in an embodiment of this application;

[0054] Figure 19 This is a schematic diagram of the hardware structure of another electronic device provided in an embodiment of this application. Detailed Implementation

[0055] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the embodiments of this application will be further described in detail below with reference to the accompanying drawings.

[0056] The technical solutions provided in the embodiments of this application can be applied to electronic devices. Electronic devices can be mobile phones, tablets, desktop computers, laptop computers, handheld computers, notebook computers, ultra-mobile personal computers (UMPCs), netbooks, as well as cellular phones, personal digital assistants (PDAs), augmented reality (AR) devices, virtual reality (VR) devices, artificial intelligence (AI) devices, wearable devices, in-vehicle devices, smart home devices, and / or smart city devices. The embodiments of this application do not impose any special limitations on the specific type of electronic device.

[0057] For example, Figure 1 This is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of this application.

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

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

[0060] Processor 110 may include one or more processing units, such as application processors (APs), modem processors, graphics processing units (GPUs), image signal processors (ISPs), controllers, video codecs, digital signal processors (DSPs), baseband processors, and / or neural network processing units (NPUs). These different processing units may be independent devices or integrated into one or more processors.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[0081] Display screen 194 is used to display images, videos, etc. Display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD). The display panel can also be manufactured using organic light-emitting diodes (OLEDs), active-matrix organic light-emitting diodes (AMOLEDs), flexible light-emitting diodes (FLEDs), miniled, microled, micro-OLEDs, quantum dot light-emitting diodes (QLEDs), etc. In some embodiments, the electronic device may include one or N displays 194, where N is a positive integer greater than 1.

[0082] Electronic devices can achieve shooting functions through ISP, camera 193, video codec, GPU, display 194 and application processor.

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

[0084] Camera 193 is used to capture still images or videos. An object is projected onto a photosensitive element by generating an optical image through the lens. The photosensitive element can be a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the light signal into an electrical signal, which is then passed to an ISP for conversion into a digital image signal. The ISP outputs the digital image signal to a DSP for processing. The DSP converts the digital image signal into image signals in standard RGB, YUV, or other formats. In some embodiments, the electronic device may include one or N cameras 193, where N is a positive integer greater than 1.

[0085] Digital signal processors (DSPs) are used to process digital signals. Besides digital image signals, they can also process other digital signals. For example, when an electronic device is selecting a frequency, a DSP can perform a Fourier transform on the frequency energy.

[0086] Video codecs are used to compress or decompress digital video. Electronic devices can support one or more video codecs. This allows the electronic device to play or record video in various encoded formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

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

[0088] Internal memory 121 may include one or more random access memory (RAM) and one or more non-volatile memory (NVM).

[0089] Random access memory can include static random-access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM, for example, fifth generation DDR SDRAM is generally called DDR5 SDRAM), etc.

[0090] Non-volatile memory can include disk storage devices and flash memory.

[0091] Flash memory can be classified according to its operating principle, including NOR FLASH, NAND FLASH, 3D NAND FLASH, etc.; according to the level of the storage cell, including single-level cell (SLC), multi-level cell (MLC), triple-level cell (TLC), quad-level cell (QLC), etc.; and according to the storage specification, including universal flash storage (UFS) and embedded multimedia card (eMMC), etc.

[0092] The random access memory can be directly read and written by the processor 110. It can be used to store executable programs (such as machine instructions) of the operating system or other running programs, as well as user and application data.

[0093] Non-volatile memory can also store executable programs and user and application data, and can be pre-loaded into random access memory for direct reading and writing by the processor 110.

[0094] The external memory interface 120 can be used to connect to external non-volatile memory, thereby expanding the storage capacity of the electronic device. The external non-volatile memory communicates with the processor 110 through the external memory interface 120 to perform data storage functions. For example, music, video, and other files can be stored in the external non-volatile memory.

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

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

[0097] The speaker 170A, also known as a "loudspeaker," is used to convert audio electrical signals into sound signals. Electronic devices can listen to music or make hands-free calls through the speaker 170A.

[0098] The receiver 170B, also known as the "earpiece," is used to convert audio electrical signals into sound signals. When an electronic device answers a phone call or voice message, the receiver 170B can be brought close to the listener's ear to hear the voice.

[0099] Microphone 170C, also known as a "microphone" or "voice transducer," is used to convert sound signals into electrical signals. When making a phone call or sending a voice message, the user can speak by bringing their mouth close to microphone 170C, inputting the sound signal into microphone 170C. Electronic devices can have at least one microphone 170C. In some embodiments, electronic devices can have two microphones 170C, which, in addition to collecting sound signals, can also perform noise reduction. In other embodiments, electronic devices can have three, four, or more microphones 170C, enabling sound signal collection, noise reduction, sound source identification, and directional recording, among other functions.

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

[0101] The pressure sensor 180A is used to sense pressure signals and can convert pressure signals into electrical signals.

[0102] The gyroscope sensor 180B can be used to determine the motion posture of electronic devices.

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

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

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

[0106] A distance sensor 180F is used to measure distance. Electronic devices can measure distance using infrared or laser. In some embodiments, during a shooting scene, the electronic device can utilize the distance sensor 180F to measure distance for rapid focusing.

[0107] The proximity light sensor 180G may include, for example, a light-emitting diode (LED) and a light detector, such as a photodiode.

[0108] The Ambient Light Sensor 180K is used to detect ambient light levels. Electronic devices can adaptively adjust the brightness of their displays based on the detected ambient light. The Ambient Light Sensor 180K can also be used to automatically adjust white balance when taking photos. Furthermore, the Ambient Light Sensor 180K can work in conjunction with the Proximity Sensor 180G to detect if an electronic device is in a pocket, preventing accidental touches.

[0109] The fingerprint sensor 180H is used to collect fingerprints. Electronic devices can utilize the characteristics of the collected fingerprints to achieve fingerprint unlocking, app access locks, fingerprint photography, fingerprint answering of calls, etc.

[0110] The temperature sensor 180I is used to detect temperature.

[0111] Touch sensor 180J, also known as a "touch device," can be located on display screen 194. The touch sensor 180J and display screen 194 together form a touchscreen, also known as a "touchscreen." Touch sensor 180J detects touch operations applied to or near it. The touch sensor can transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through display screen 194.

[0112] The 180L bone conduction sensor can acquire vibration signals.

[0113] Buttons 190 include a power button, volume buttons, etc. Buttons 190 can be mechanical buttons or touch-sensitive buttons. The electronic device can receive button input and generate key signal inputs related to user settings and function control of the electronic device.

[0114] Motor 191 can generate vibration alerts. Motor 191 can be used for incoming call vibration alerts or for touch vibration feedback. For example, different vibration feedback effects can correspond to touch operations performed on different applications (such as taking photos, playing audio, etc.). Motor 191 can also correspond to different vibration feedback effects for touch operations performed on different areas of the display screen 194. Different application scenarios (such as time reminders, receiving messages, alarm clocks, games, etc.) can also correspond to different vibration feedback effects. The touch vibration feedback effect can also be customized.

[0115] Indicator 192 can be an indicator light, used to indicate charging status, power changes, or to indicate messages, missed calls, notifications, etc.

[0116] The SIM card interface 195 is used to connect a SIM card. The SIM card can be inserted into or removed from the SIM card interface 195 to achieve contact and separation with the electronic device. The electronic device can support one or N SIM card interfaces, where N is a positive integer greater than 1. The SIM card interface 195 can support Nano SIM cards, Micro SIM cards, SIM cards, etc. Multiple cards can be inserted into the same SIM card interface 195 simultaneously. The multiple cards can be of the same or different types. The SIM card interface 195 is also compatible with different types of SIM cards. The SIM card interface 195 is also compatible with external memory cards. The electronic device interacts with the network through the SIM card to achieve functions such as calls and data communication. In some embodiments, the electronic device uses an eSIM, i.e., an embedded SIM card. The eSIM card can be embedded in the electronic device and cannot be separated from it.

[0117] For example, Figure 2 This is a schematic diagram of the software structure of an electronic device provided in an embodiment of this application.

[0118] like Figure 2 As shown, a layered architecture divides the software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the system is divided into four layers, from top to bottom: the application layer, the application framework layer, the system library layer, and the kernel layer.

[0119] The application layer can include a series of application packages. For example... Figure 2 As shown, the application package may include applications (also known as apps) such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, and SMS.

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

[0121] like Figure 2 As shown, the application framework layer may include window management services, display management services, content providers, view systems, phone managers, resource managers, notification managers, local profile management assistants (LPA), etc.

[0122] The window management service is responsible for starting, adding, and deleting windows. It can determine the application displayed on the window, as well as the creation, destruction, and attribute changes of the application's layers. It can also determine whether there is a status bar, lock the screen, and capture the screen.

[0123] The display management service can obtain the number and size of display areas, and is responsible for starting, adding, and deleting display areas.

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

[0125] A phone manager is used to provide communication functions for electronic devices. For example, it manages call status (including connection and disconnection).

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

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

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

[0129] The application framework layer can also include an animation system.

[0130] like Figure 2 As shown, a method for displaying an animation effect executed by the animation system includes:

[0131] S2001: Configure animation effects via the animation interface.

[0132] The animation system provides an animation interface to application developers. Application developers can configure animation effects for any one or more controls by calling this interface.

[0133] S2002: Determine the start time of the animation effect, the end time of the animation effect, the description information of the end frame of the animation effect, etc.

[0134] After the application starts running and receives the animation trigger event, the animation system can determine the start time of the animation effect, the end time of the animation effect, the description information of the end frame of the animation effect, etc.

[0135] S2003: Determine the description information of each frame of the animation effect.

[0136] The animation system can then determine the description information of the frame to be rendered based on the start time of the animation effect, the time of the end frame of the animation effect, the description information of the end frame of the animation effect, and the time of the frame to be rendered. The description information of the frame to be rendered includes the values ​​of the properties of the controls on that frame.

[0137] S2004: Update the render tree based on the description information of the interface for each frame of the animation.

[0138] Then, the animation system updates the render tree based on the description information of the current frame interface to be rendered.

[0139] Finally, the updated render tree is passed to the underlying graphics processing library, which then calls the GPU or CPU to perform specific drawing operations and generate a bitmap. The bitmap is received by the display driver and then sent to the display.

[0140] The runtime includes the core libraries and the virtual machine. The runtime is responsible for the scheduling and management of the operating system.

[0141] The core library consists of two parts: one part contains the functionalities that the Java language needs to call, and the other part is the core library itself.

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

[0143] System libraries can include multiple functional modules. For example: surface manager, media libraries, and graphics processing libraries, where the graphics processing libraries include: 3D graphics processing libraries (e.g., OpenGLES), 2D graphics engines (e.g., SGL), etc.

[0144] The Surface Manager is used to manage the display subsystem and provides the fusion of two-dimensional (2D) and three-dimensional (3D) layers for multiple applications.

[0145] The media library supports playback and recording of various commonly used audio and video formats, as well as still image files. It supports multiple audio and video encoding formats, such as MPEG4, Moving Picture Experts Group Audio Layer 3 (MP3), Joint Photographic Experts Group (JPG), Portable Network Graphics (PNG), Hardware Image, and Adaptive Scalable Texture Compression (ASTC).

[0146] 3D graphics processing libraries are used to implement 3D graphics drawing, image rendering, layer compositing, and layer processing. 2D graphics engines are drawing engines for 2D graphics.

[0147] The kernel layer is the layer between hardware and software. The kernel layer includes at least the display driver, camera driver, audio driver, sensor driver, and virtual card driver.

[0148] The above describes the electronic devices to which the embodiments of this application are applicable. The following describes the relevant technical solutions involved in the embodiments of this application.

[0149] 1) User interface (UI)

[0150] A user interface (UI) is the medium through which an application or operating system interacts and exchanges information with the user. It converts the internal form of information into a form that the user can understand. UIs are source codes written in specific computer languages ​​such as Java and Extensible Markup Language (XML). These source codes are parsed and rendered on electronic devices, ultimately presenting content that the user can recognize. A common form of UI is the graphical user interface (GUI), which refers to a user interface related to computer operation displayed graphically. It can be visible interface elements displayed on the screen of an electronic device, such as text, icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, and navigation bars.

[0151] The user interface (UI) serves as the medium for interaction and information exchange between the application and the user. Each time a vertical sync signal (VSync) arrives, the electronic device needs to generate the UI for the foreground application. The frequency of the VSync signal is related to the refresh rate of the electronic device's screen; for example, the frequency of the VSync signal may be the same as the screen's refresh rate.

[0152] In other words, before each time an electronic device refreshes the content displayed on its screen, it is necessary to generate the interface for the foreground application so that the newly generated interface of the application can be displayed to the user when the screen refreshes.

[0153] 2) Animation effects

[0154] Animation effects are applied to animated objects, which can be the application's interface (or window), one or more controls within the application, or one or more views within the application. From the user's perspective, an animated object includes one or more controls; from the application's perspective, it includes one or more views. A view is a basic element constituting the application's interface, and a control on the application's interface that the user sees can correspond to one or more views. In the embodiments of this application, unless otherwise specified, the meanings of controls and views can be the same.

[0155] From a temporal perspective, the animation effect is the continuous and smooth change of an animated object over a period of time (at least the interval between two vertical synchronization signals).

[0156] 3) Interfaces configured with animation effects

[0157] Figure 3 This is a schematic diagram of an interface configured with animation effects, provided as an embodiment of this application.

[0158] like Figure 3 As shown in (1), the interface displayed on the screen of the electronic device is the interface of a desktop application, which includes a control 301. Among them, the control 301 includes an icon for a reading application.

[0159] Desktop applications can also include icons for other applications, such as the gallery application, dialer application, messaging application, and contacts application.

[0160] In response to the user long-pressing control 301, control 301 expands.

[0161] like Figure 3As shown in (2), during the zooming process of control 301, control 302 appears on the interface. The zooming process of control 301 is an animation. When control 302 is gradually made clear (e.g., changes in transparency), the process of control 302 gradually becoming clear is also an animation.

[0162] Figure 4 This is a schematic diagram of another interface configured with animation effects, provided as an embodiment of this application.

[0163] like Figure 4 As shown in (1), the interface displayed on the screen of the electronic device is the interface of a desktop application, which includes control 401. Among them, control 401 is folder 1, including control 402, control 403, and control 404. Control 402 is the icon of the game application, control 403 is the icon of the flashlight application, and control 404 is the icon of the gallery application.

[0164] In response to a user clicking control 402, control 401 expands and moves, and controls 402, 403, and 404 expand and move.

[0165] like Figure 4 As shown in (2), the expansion and movement of controls 401, 402, 403 and 404 is also a kind of animation.

[0166] 4) Methods for displaying animation effects

[0167] accomplish Figure 3 The interface shown requires configuring animation events for control 301; to achieve... Figure 4 The interface shown requires configuring animation events for controls 401, 402, 403, and 404.

[0168] Figure 5 This is a flowchart illustrating a method for displaying animation effects provided in an embodiment of this application.

[0169] like Figure 5The method for displaying the animation effect shown can include four steps: S501: Create an animation event; S502: After receiving the vertical synchronization signal, obtain the description information of the end frame interface of the animation effect (also called the end frame description information) and the description information of the duration of the animation effect from the animation event; S503: Measure, layout, and draw (also called drawing in software rendering) the end frame interface of the animation effect to generate rendering tree 1; S504: Receive rendering tree 1, the description information of the end frame interface of the animation effect, and the description information of the duration of the animation effect; S505: Update rendering tree 1 based on the description information of the end frame interface of the animation effect and the description information of the duration of the animation effect, and generate a bitmap based on the updated rendering tree 1.

[0170] Specifically, the application's UI thread needs to execute steps S501, S502, and S503; the rendering process needs to execute steps S504 and S505. Specifically, at the starting frame of the animation (or the first frame), the electronic device needs to execute steps S501, S502, S503, S504, and S505; at each frame during the duration of the animation, the electronic device needs to execute step S505. The rendering process can be a process independent of the application.

[0171] The following sections will introduce S501, S502, S503, S504, and S505.

[0172] S501: Create an animation event.

[0173] An application's UI thread can create animation events through the animation interface. The timing of these UI thread animation events can be related to the application's logic. For example, the UI thread might create animation events upon receiving user input, receiving messages from other threads or processes, or requesting network data updates. For ease of description, these messages that trigger the UI thread to create animation events are called animation trigger events.

[0174] Animation events include the internal logic that implements the animation effect. For example, description information of the animation effect's ending frame, description information of the animation effect's step size, and description information of the animation effect's duration.

[0175] S502: After receiving the vertical synchronization signal, obtain the description information of the end frame interface of the animation effect and the description information of the duration of the animation effect from the animation event.

[0176] After receiving the vertical synchronization signal, such as Figure 5The vertical sync signal 1, vertical sync signal 2, and vertical sync signal 3 in the animation event allow the application's UI thread to obtain the end frame description information of the animation effect and the duration description information of the animation effect.

[0177] Optionally, the application's UI thread can obtain descriptions of the animation effect's step size and duration from the animation event; or, the application's UI thread can obtain descriptions of the animation effect's end frame and step size from the animation event, etc., without limitation.

[0178] It is worth noting that the application's UI thread can directly obtain the description information of the animation effect's ending frame from the animation event; or, indirectly, obtain the description information of the animation effect's ending frame from the animation event.

[0179] S503: Measure, lay out, draw, and record the final frame of the animation effect to generate render tree 1.

[0180] The application's UI thread can measure, lay out, and record the drawing of the final frame of the animation effect to generate Render Tree 1. Measurement is used to determine the size of each control in the final frame of the animation effect; layout is used to determine the position of each control in the final frame of the animation effect; and drawing recording is used to determine one or more drawing operations required to draw the bitmap corresponding to the final frame of the animation effect, and these are stored in the drawing instruction list of Render Tree 1.

[0181] This can be understood as the application's UI thread determining the values ​​of the properties (such as size, position, transparency, etc.) of each control in the interface at the end frame of the animation effect, thereby determining the rendering node corresponding to each control and generating rendering tree 1.

[0182] Render Tree 1 can be a data structure used to generate the final frame interface of the animation effect; that is, Render Tree 1 records all the information used to generate the final frame interface of the animation effect. Render Tree 1 includes one or more render nodes. The root render node corresponds to the final frame interface of the animation effect, and a child render node of the root render node corresponds to a control in the final frame interface of the animation effect. Render nodes include render properties and a display list. The display list includes one or more drawing operations.

[0183] A drawing operation can be a data structure used to draw graphics (such as lines, rectangles, text, etc.), meaning it records all the information used to draw the graphics. During the rendering process, drawing operations are translated into API calls from graphics processing libraries, such as API calls from 3D graphics processing libraries. For example, a drawline operation is a data structure that can contain data about the drawn line (such as line length and width) and the corresponding API calls from the underlying graphics processing library.

[0184] The drawing instruction list can be a buffer that records all drawing operations included in the final frame of the animation, or it can be a buffer that records the identifiers (e.g., addresses, sequence numbers) of all drawing operations included in the final frame of the animation.

[0185] The application's UI thread can synchronize the rendering tree 1, the description information of the animation effect's end frame, and the description information of the animation effect's duration to the rendering process.

[0186] Optionally, the application's UI thread can synchronize rendering tree 1, the description information of the animation effect's duration, and the description information of the animation effect's step size to the rendering process; or, the application's UI thread can synchronize rendering tree 1, the description information of the animation effect's end frame interface, and the description information of the animation effect's step size to the rendering process; or, the application's UI thread can synchronize at least two of the description information of the animation effect's end frame interface, the description information of the animation effect's duration, and the description information of the animation effect's step size to the rendering process without synchronizing rendering tree 1. In this case, in S505, the rendering process updates rendering tree 0 based on the description information of the animation effect's end frame interface and the description information of the animation effect's duration, where rendering tree 0 corresponds to the interface before the animation effect begins; or, the application's UI thread can determine the value of the control's property in each frame of the interface during the animation effect's duration based on at least two of the description information of the animation effect's end frame interface, the description information of the animation effect's duration, and the description information of the animation effect's step size, and then synchronize the value of the control's property in each frame of the interface during the animation effect's duration and rendering tree 1 to the rendering process.

[0187] S504: Receive render tree 1, description information of the end frame interface based on animation effect, and description information of the duration of animation effect.

[0188] The rendering process can receive data sent by the application's UI thread through a message queue; alternatively, the rendering process can receive data sent by the application's UI thread through inter-process communication; or, the rendering process can request and obtain data from the application's UI thread after receiving a vertical synchronization signal.

[0189] S505: Update render tree 1 based on the description information of the end frame of the animation effect and the description information of the duration of the animation effect, and generate a bitmap based on the updated render tree 1.

[0190] The rendering process can determine the controls whose property values ​​have changed based on the description information of the end frame of the animation effect and the interface before the animation effect started. The rendering process can also determine the step size of the property values ​​of the controls whose property values ​​have changed based on the duration of the animation effect, thereby determining the property values ​​of the controls in each frame of the interface within the duration of the animation effect.

[0191] For the generation process of a single frame of an animation effect, the rendering process first determines the order of that frame within the animation effect, that is, which frame of the animation it is. Furthermore, it can determine the values ​​of the properties of the controls on that frame, that is, determine the descriptive information of that frame.

[0192] Determining which frame of the animation effect a given frame belongs to can be done by considering the frame's time, the frequency of the vertical sync signal, and the animation's start time. The animation's start time is the time of the vertical sync signal corresponding to the animation's initial frame, such as... Figure 5 The vertical synchronization signal 1 in the animation, or the start time of the animation effect can be the moment when the animation triggers the event, etc., which is not limited here.

[0193] After determining the property values ​​of controls in the interface for each frame within the duration of the animation effect, the rendering process can, upon receiving a vertical synchronization signal, such as... Figure 5 The vertical synchronization signals 2 and 3 in the rendering tree update the values ​​of the parameters corresponding to the properties of the control in the rendering tree 1, and then generate a bitmap based on the updated rendering tree 1.

[0194] For each frame of the animation after the starting frame, the rendering process only needs to execute step S505 to draw each frame of the animation effect and then display the animation effect.

[0195] It is worth noting that the execution of the application's UI thread and rendering process can be triggered by different vertical synchronization signals. For example, the vertical synchronization signal received by the application's UI thread and the vertical synchronization signal received by the rendering process can be vertical synchronization signals with the same period but different phases (with a fixed time difference).

[0196] It is evident that, for Figure 5 The animation display method shown primarily involves the rendering process updating the rendering tree to generate multiple frames throughout the animation's duration, excluding the initial frame. The application's UI thread is not involved, or its computational load is relatively small. When the UI thread is blocked by other tasks, frame drops and stuttering are less likely to occur. However, the rendering process suffers from redundant rendering when rendering controls based on their property values ​​in each frame. For example, control 1 in the initial frame may only have a different position property compared to control 1 in the second frame, but other properties remain unchanged. However, the rendering process still needs to redraw control 1 when generating the bitmap for the second frame, increasing its load and causing stuttering.

[0197] In view of this, embodiments of this application provide a method for displaying animation effects, which is used to solve the problem of animation interface stuttering.

[0198] In the embodiments of this application, "when," "if," and "if" all refer to the device taking corresponding actions under certain objective circumstances, and are not time-limited, nor do they require the device to perform a judgment action, nor do they imply any other limitations. Unless otherwise specified, "if" and "if" can be substituted, and "when" and "in the case of" can be substituted. "When" and "if" / "if" can be substituted.

[0199] In the embodiments of this application, the terms "exemplary" or "for example" are used to indicate that something is an example, illustration, or description. Any embodiment or design that is described as "exemplary" or "for example" in this application should not be construed as being more preferred or advantageous than other embodiments or designs. Specifically, the use of the terms "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0200] In this application embodiment, the number of nouns, unless otherwise specified, refers to "singular nouns or plural nouns," that is, "one or more." "At least one" means one or more, and "more than one" means two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can mean: A exists alone, A and B exist simultaneously, or B exists alone, where A and B can be singular or plural. The character " / " can indicate that the related objects before and after are in an "or" relationship. For example, A / B means: A or B. "At least one of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, or c means: a, b, c, a and b, a and c, b and c, or a and b and c, where a, b, and c can be single or multiple.

[0201] In this application, the ordinal numbers such as "first" and "second" are used to distinguish multiple objects, and are not used to limit the size, content, order, timing, priority, or importance of the multiple objects. For example, "first attribute" and "second attribute" refer to two different attributes, and do not indicate differences in the content, priority, or importance of these two attributes. For a technical feature, the technical features within that technical feature are distinguished by "A," "B," "C," and "D," and there is no sequential or hierarchical order among the technical features described by "A," "B," "C," and "D." For example, in this document, "case A" and "case B" are only used to distinguish different contents, and do not limit the sequential or hierarchical order, priority, or importance between "case A" and "case B."

[0202] The solutions provided by the embodiments of this application are described in detail below with reference to the accompanying drawings. In the following description, the animation effect display method provided by the embodiments of this application is applied to... Figures 1-2 Take the electronic device shown as an example.

[0203] Please see Figure 6 The flowchart below illustrates another method for displaying animation effects according to an embodiment of this application. The specific process of this animation effect display method is described below.

[0204] S601. After receiving the animation trigger event, the application process determines the first information based on the description information of the first animation effect and sends the first information to the rendering process.

[0205] In this embodiment of the application, the application on the electronic device can create an application process when it runs. The application process may include the application's UI thread, the application's render client thread (or render service client thread), etc. This embodiment of the application does not limit the threads included in the application process.

[0206] For example, when application A runs, it creates application process A, which includes the UI thread and the rendering client thread of application A; when application B runs, it creates application process B, which includes the UI thread and the rendering client thread of application B.

[0207] The rendering process can be independent of the application process. The rendering process performs specific drawing operations to generate the display data corresponding to the application's interface. It's worth noting that when the application process passes information to the rendering process, this information exchange can be accomplished through inter-process communication (IPC). The application process and the rendering process can implement IPC communication through methods such as binders or shared memory; these are not limited here.

[0208] Upon receiving an animation trigger event, the application process can respond to the event by determining the first information based on the description information of the first animation effect and sending the first information to the rendering process.

[0209] The following sections will introduce the animation trigger event, the description of the first animation effect, and the specific meaning of the first piece of information.

[0210] 1) Animation trigger events can be user interactions, network status changes, messages sent to this application by other applications on the electronic device, etc., and are not limited here.

[0211] Animation trigger events can be used to trigger the display of the first animation effect. This can be understood as: animation trigger events can be used to trigger the creation of the first animation event, and the first animation event can be used to display the first animation effect.

[0212] The first animation effect comprises M frames, which can be understood as the duration of the first animation effect being M frames, where M is a positive integer. The first animation effect can be an animation effect affecting appearance, position, size, transformation-based animation, or content. Animation effects affecting appearance include: transparency, rounded corners, border color, border line width, background color, and shadow; animation effects affecting position include x / y / z coordinates and x / y / z anchor points; animation effects affecting size include width and height; transformation-based animation effects include: translation, rotation, scaling, and 3D transformation; and animation effects affecting content include: filter effects such as blur, color enhancement, grayscale changes, and adding noise. This application does not limit the type of the first animation effect in its embodiments.

[0213] This can be understood as follows: the first animation effect can be a configurable value of a control's property in the application's interface. Alternatively, it can be understood as the value of a control's property in the application's interface determining how the control is displayed, with the first animation effect being the display method. Or, it can be understood as the first animation effect acting on a first animation object, which can be a control whose property value has changed in the application's interface. For example, the first animation object can be a control whose property value changed in the end frame of the first animation effect when comparing the interface before the first animation effect started with the end frame. Another example is a control whose property value changed in the interface between the end frame and the start of the first animation effect.

[0214] The properties of a control can be related to its content, appearance, position, and size. Content-related properties include images and text; appearance-related properties include transparency, rounded corners, border color, border line width, background color, and shadow; position-related properties include x / y / z coordinates and x / y / z anchor points; and size-related properties include width and height. This application does not limit the properties of controls in the application's interface.

[0215] The type of a control can be determined by the content it contains. For example, if the content of a control is text, then the control is a text view; if the content of a control is an image, then the control is an image view, and so on. This application does not limit the type of controls in the application's interface.

[0216] Different controls can have a parent-child relationship. For example, the interface displayed by the application may consist of nested controls 1 and 2. When control 2 is nested on control 1, control 1 is the root control, and control 2 is a child control of control 1. Alternatively, different controls may not have a parent-child relationship. This application does not limit whether controls in the application's interface have a parent-child relationship.

[0217] For example, Figure 7 A schematic diagram of a first animation effect provided in an embodiment of this application, such as... Figure 7 As shown, the interface before the first animation effect begins includes controls 1, 2, and 3, and the horizontal (width direction of the controls) spacing between controls 1, 2, and 3 is fixed. When control 2 is configured with a first animation effect that changes its width from B1 to B2, where B2 is greater than B1 and greater than 0, it is clear that comparing the interface before the first animation effect begins and the interface at the end of the first animation effect, the change in the width of control 2 causes a change in the position of control 3. Therefore, since the values ​​of the width attribute of control 2 and the position attribute of control 3 change, it can be determined that the first animation objects involved in the first animation effect are controls 2 and 3.

[0218] 2) The description information for the first animation effect can be configured by the application process when creating the first animation event. The description information for the first animation effect can be used to determine the internal logic that implements the first animation effect.

[0219] For example, the description information of the first animation effect may include: the description information of the end frame of the first animation effect, the description information of the step size of the first animation effect, and the description information of the duration of the first animation effect. The description information of the end frame of the first animation effect can be used to determine the value of the property of each control in the end frame of the first animation effect, or it can also be used to determine the variables of the interface at the end frame of the first animation effect relative to the interface before the start of the first animation effect, such as how much control 1 has widened. The description information of the step size of the first animation effect can be used to determine the amount of change in the property values ​​of controls in the current frame interface compared to the previous frame interface. The description information of the duration of the first animation effect can be used to determine the time corresponding to the start frame of the first animation effect and the time corresponding to the end frame of the first animation effect.

[0220] 3) The first information may include the description information of the Nth frame of the first animation effect and the image corresponding to at least one control in the Nth frame of the first animation effect. N is a positive integer less than or equal to M.

[0221] The description information of the Nth frame of the first animation effect can be used to determine the value of the property of each control in the Nth frame of the first animation effect, or the description information of the Nth frame of the first animation effect can also be used to determine the variables of the Nth frame of the first animation effect relative to the (N-1)th frame of the first animation effect, such as how much control 1 has become wider.

[0222] The image corresponding to at least one control in the Nth frame of the first animation effect can be understood as a correspondence between the control and the image. This correspondence can be one-to-one, for example, control 1 corresponds to image 1, and control 2 corresponds to image 2; or, the correspondence can be non-one-to-one, for example, control 1 and control 2 correspond to image 1, or control 1 corresponds to both image 1 and image 2, without limitation. At least one control in the Nth frame of the first animation effect can be pre-configured, or it can be determined by the application process based on the variables of the Nth frame interface of the first animation effect relative to the N-1th frame interface of the first animation effect, without limitation in the embodiments of this application.

[0223] The image format corresponding to at least one control in the Nth frame of the first animation effect can be a format supported by the GPU of the electronic device. For example, hardware image, ASTC, etc. It can be understood that the GPU of the electronic device can directly read the image included in the image corresponding to at least one control in the Nth frame of the first animation effect, without needing to perform decoding or other operations on the image included in the image corresponding to at least one control in the Nth frame of the first animation effect.

[0224] One possible implementation, such as Figure 8 As shown, S601 may include the following steps A1-A4:

[0225] Step A1: After receiving the animation trigger event, the application's UI thread creates the first animation event.

[0226] Upon receiving an animation trigger event, the application's UI thread responds by creating a first animation event through the animation interface. This first animation event contains the internal logic that implements the first animation effect; that is, it includes a description of the first animation effect.

[0227] An animation interface can be one or more functions or methods provided by the system. Application developers can configure the first animation effect and its description by calling this animation interface. After receiving an animation trigger event, the application can respond by providing the description of the first animation effect to the system through this animation interface. The system can then generate each frame of the first animation effect based on this information.

[0228] The format of the animation interface can be: the name of the animation interface (description of duration, description of end frame), the name of the animation interface (description of duration, description of change curve, description of end frame), the name of the animation interface (description of step size, description of end frame), the name of the animation interface (description of duration, description of step size), etc., and this application embodiment does not limit it.

[0229] For example, if the animation interface format is: animation interface name (duration description, change curve description, end frame description), the animation interface could be:

[0230] animateTo({duration: 3000, cure: Curve.Linear},()=>{

[0231] view1.Heigt=800

[0232] view1.Width = 400

[0233] })

[0234] Here, `animateTo` is the name of the animation interface. `duration: 3000` indicates a duration of 3000ms, which is the duration description. `curve: Curve.Linear` indicates the curve is a linear curve, which is the curve description; `view1.Height = 800 view1.Width = 400` indicates that in the last frame of the animation, the height of `view1` is 800 and the width is 400, which is the end frame description.

[0235] After the first animation event is created, a callback is registered on the choreographer of the application's UI thread. This callback is used to trigger the application's UI thread to process the first animation event upon the first vertical synchronization signal following its creation.

[0236] Step A2: The application's UI thread determines the start frame time, end frame time, and end frame description information of the first animation effect based on the description information of the first animation effect.

[0237] After the application's UI thread creates the first animation event, it can determine the description information of the first animation effect from the first animation event, and determine the time corresponding to the start frame of the first animation effect, the time corresponding to the end frame of the first animation effect, and the description information of the end frame of the first animation effect from the description information of the first animation effect.

[0238] Optionally, after determining the time corresponding to the start frame of the first animation effect, the time corresponding to the end frame of the first animation effect, and the description information of the end frame of the first animation effect, the UI thread of the application can perform measurement, layout, drawing recording on the interface of the end frame of the first animation effect or the interface before the start of the first animation effect, generate the first rendering tree, and send the first rendering tree to the rendering process.

[0239] The parent-child relationship between rendering nodes in the first rendering tree is the same as the parent-child relationship between controls in the end frame of the first animation effect or the interface before the start of the first animation effect. That is, the nesting relationship between different controls in the end frame of the first animation effect or the interface before the start of the first animation effect determines the nesting relationship between different rendering nodes in the first rendering tree, so that the rendering process can correctly render the application interface when generating bitmaps based on the first rendering tree.

[0240] For example, Figure 9 This is a schematic diagram of a first rendering tree provided in an embodiment of this application. The interface at the end of the first animation effect or the interface before the start of the first animation effect carries controls 0, 1, 2, and 3. Control 0 is the root control, and its child controls are controls 1 and 2. Control 2's child control is control 3. The UI thread of the application generates the first rendering tree as follows: the rendering node corresponding to the end of the first animation effect or the interface before the start of the first animation effect is the root rendering node of the first rendering tree; rendering node 0 corresponding to control 0 is a child rendering node of the root rendering node; rendering node 1 corresponding to control 1 and rendering node 2 corresponding to control 2 are child rendering nodes of rendering node 0; and rendering node 3 corresponding to control 3 is a child node of rendering node 2. The relationship between controls and rendering nodes means that the rendering node includes all drawing operations of the corresponding control. One control can correspond to one or more rendering nodes.

[0241] Step A3: Upon receiving the vertical synchronization signal corresponding to the Nth frame of the first animation effect, the application's UI thread or the application's rendering client thread determines the description information of the Nth frame of the first animation effect based on the time corresponding to the start frame of the first animation effect, the time corresponding to the end frame of the first animation effect, the description information of the end frame of the first animation effect, and the time corresponding to the Nth frame of the first animation effect.

[0242] After determining the start time, end time, and description information of the first animation effect, the application's UI thread can send these information to the application's rendering client thread.

[0243] When the UI thread or the rendering client thread of the application receives the vertical synchronization signal corresponding to the Nth frame of the first animation effect, it can determine the description information of the Nth frame of the first animation effect based on the time corresponding to the start frame of the first animation effect, the time corresponding to the end frame of the first animation effect, the description information of the end frame of the first animation effect, and the time corresponding to the Nth frame of the first animation effect.

[0244] The application's UI thread or rendering client thread can determine which frame of the first animation effect the currently received vertical synchronization signal corresponds to through various methods, such as the number of received vertical synchronization signals and the time within the vertical synchronization signals. This embodiment does not limit this determination. For example, the first received vertical synchronization signal corresponds to the first frame (i.e., the starting frame) of the first animation effect, the second received vertical synchronization signal corresponds to the second frame of the first animation effect, and so on. Determining which frame of the first animation effect the currently received vertical synchronization signal corresponds to can be understood as determining which frame of the first animation effect the current frame belongs to, or it can also be understood as determining the order of the current frame within the first animation effect.

[0245] For example, Figure 10 This is a schematic diagram illustrating descriptive information for determining the Nth frame of a first animation effect, provided as an embodiment of this application. For example... Figure 10 As shown, the application's UI thread or rendering client thread can compare the interface before the first animation effect begins with the interface of the boundary frame of the first animation effect to determine that the control whose attribute value has changed is the first animation object involved in the first animation effect. For example, if the position of control 401 changes from (x0, y0) to (x1, y1), and the height and width of control 401 become P times their original values, it can be determined that control 401 is the first animation object involved in the first animation effect. The duration of the first animation effect is 30 frames. Furthermore, it can also be determined that the position of control 401 in the Nth frame of the first animation effect is (x0+N*δX, y0+N*δY), where δX=(x1-x0) / 30, δY=(y1-y0) / 30, and that the height and width of control 401 in the Nth frame of the first animation effect become N*δP times their original values, where δP=P / 30.

[0246] It is worth noting that, since the end frame of the first animation effect and the interface before the start of the first animation effect are known, the value of the property of each control in each frame of the interface during the duration of the first animation effect can be determined by the interpolator, so that the value of the property of each control in each frame of the interface is continuous, first-order differentiable, and second-order differentiable as time changes.

[0247] Step A4: The rendering client thread determines the value of the first property of at least one control in the Nth frame of the first animation effect based on the description information of the Nth frame of the first animation effect, and generates the image corresponding to at least one control in the Nth frame of the first animation effect based on the value of the first property of the at least one control in the Nth frame of the first animation effect.

[0248] The application's rendering client thread can determine at least one control in the Nth frame of the first animation effect based on the variable of the Nth frame interface of the first animation effect relative to the N-1th frame interface of the first animation effect.

[0249] Specifically, when N equals 1, the application's rendering client thread can determine that at least one control in the Nth frame of the first animation effect is a control among all controls in the Nth frame of the first animation effect. For example, if the first frame of the first animation effect includes control 1, control 2, and control 3, then at least one control in the first frame of the first animation effect includes control 1, control 2, and control 3.

[0250] When N is greater than or equal to 2, the application's rendering client thread can determine that at least one control in the Nth frame of the first animation effect is a control whose first attribute value has changed compared to the (N-1)th frame of the first animation effect, and / or a control added in the Nth frame of the first animation effect compared to the (N-1)th frame of the first animation effect.

[0251] For example, the first frame of the first animation effect includes controls 1, 2, and 3, and the second frame of the first animation effect also includes controls 1, 2, and 3. The value of the first property of control 1 in the first frame of the first animation effect is different from the value of the first property of control 1 in the second frame of the first animation effect; the value of the first property of control 2 in the first frame of the first animation effect is the same as the value of the first property of control 2 in the second frame of the first animation effect; and the value of the first property of control 3 in the first frame of the first animation effect is different from the value of the first property of control 3 in the second frame of the first animation effect. Therefore, at least one control in the second frame of the first animation effect includes controls 1 and 3.

[0252] The first attribute may include attributes related to the content carried on the control, such as images, text, etc.; and / or, the first attribute may also include attributes related to the appearance of the control, such as transparency, rounded corners, border color, border line width, background color, shadow, etc. This application embodiment does not limit this. Optionally, when the first attribute includes attributes related to the content carried on the control and attributes related to the appearance of the control, one control in at least one of the controls in the Nth frame of the first animation effect may correspond to two images, wherein one image may be generated based on the value of the attribute related to the content carried on the control, and the other image may be generated based on the value of the attribute related to the appearance of the control.

[0253] For example, taking the first attribute as an example, which includes attributes related to the content displayed on the control. Figure 11 This is a schematic diagram illustrating an image corresponding to at least one control in the Nth frame of a first animation effect, provided as an embodiment of this application. Figure 11 As shown, the first frame of the first animation effect includes control 1 and control 2.

[0254] If control 1 contains the text "Please enter your account", then control 1 can include text view. Figure 1 and rectangular view Figure 1 Text view Figure 1 The top contains the text "Please enter your account", and the rectangular view... Figure 1 Same size as control 1. Text view Figure 1 The corresponding drawing operation in the drawing instruction list is drawText(“Please enter your account”, dst1), where dst1 instructs the text 1 “Please enter your account” to be drawn on the rectangular view. Figure 1 What region is being viewed, for example, dst1 = Rect(10, 20, 150, 200), where (10, 20) is a rectangular view? Figure 1 The coordinates of the top left corner, (150, 100), represent the rectangular view. Figure 1 The coordinates of the bottom right corner. Rectangular view. Figure 1 The corresponding drawing operation in the drawing instruction list is drawRectangle. The rendering client thread can execute the drawing operation drawRectangle and the drawing operation drawText(“Please enter your account”, dst1) to generate the image corresponding to control 1.

[0255] If control 2 contains image 1, then the control can include the image view. Figure 1 and rectangular view Figure 2 Image View Figure 1 Image 1 is mounted on the rectangular view. Figure 2 Same size as control 2. Image view Figure 1The corresponding drawing operation in the drawing instruction list is drawBitmap("image1", src, dst1), where image1 is the source image, src indicates the area of ​​the source image to be displayed, and dst2 indicates that the src area of ​​image1 will be drawn on the rectangular viewport. Figure 2 What area is being viewed? (Rectangular view) Figure 2 The corresponding drawing operation in the drawing instruction list is drawRectangle. The rendering client thread can execute the drawing operation drawRectangle and the drawing operation drawBitmap("image1", src, dst1) to generate the image corresponding to control 2.

[0256] S602. After receiving the first information from the application process, the rendering process generates the display data of the Nth frame of the first animation effect based on the first information.

[0257] In this embodiment of the application, the rendering process can generate display data for the Nth frame of the first animation effect based on the first information received from the application process.

[0258] In one possible implementation, the rendering process can determine whether it receives first information from the application process within a first duration. After receiving the first information from the application process within the first duration, it generates display data for the Nth frame of the first animation effect based on the first information.

[0259] The starting time of the first duration can be the time when the rendering process receives the vertical sync signal corresponding to the Nth frame of the first animation effect. The rendering process can determine which frame of the first animation effect the currently received vertical sync signal corresponds to through various methods, such as the number of vertical sync signals already received or the time intervals within those signals. This embodiment does not limit this determination. For example, the first received vertical sync signal corresponds to the first frame of the first animation effect, the second received vertical sync signal corresponds to the second frame, and so on. Determining which frame of the first animation effect the currently received vertical sync signal corresponds to can be understood as determining which frame of the first animation effect the current frame belongs to.

[0260] The duration of the first duration can be pre-configured, or it can be defined by a standard, or it can be agreed upon in advance by the application process and the rendering process. This application embodiment does not limit this.

[0261] One possible implementation, such as Figure 12 As shown, S602 may include the following steps B1-B3:

[0262] Step B1: After receiving the first information from the application process, the rendering process determines the value of the second property of each control in the Nth frame of the first animation effect based on the description information of the Nth frame of the first animation effect.

[0263] The second attribute may include attributes related to the content displayed on the control, attributes related to the appearance of the control, attributes related to the position of the control, and attributes related to the size of the control, etc., which are not limited in this embodiment. That is, the second attribute includes the first attribute.

[0264] Optionally, the rendering process may determine whether it receives the first information from the application process within the first duration. After receiving the first information from the application process within the first duration, it may determine the value of the second property of each control in the Nth frame of the first animation effect based on the description information of the Nth frame of the first animation effect.

[0265] Step B2: The rendering process updates the first render tree based on the value of the second property of each control in the Nth frame of the first animation effect.

[0266] The updated first rendering tree includes the first rendering node and the second rendering node.

[0267] The first rendering node corresponds to the first type of image. The first type of image is the image corresponding to the control whose first attribute value has changed in the Nth frame of the first animation effect compared to the (N-1)th frame of the first animation effect, and / or the image corresponding to the newly added control in the Nth frame of the first animation effect compared to the (N-1)th frame of the first animation effect. That is to say, the first type of image is the image corresponding to at least one control (e.g., referred to as the first control group) in the Nth frame of the first animation effect included in the first information mentioned above.

[0268] The second rendering node corresponds to the second type of image. The second type of image is the image corresponding to the control whose first attribute value has not changed compared to the (N-1)th frame of the first animation effect in the Nth frame. That is, the second type of image is not the image corresponding to at least one control in the Nth frame of the first animation effect included in the first information above, but rather the image corresponding to at least one control (e.g., referred to as the second control group) in the (N-1)th frame of the first animation effect used by the rendering process when generating the display data for the (N-1)th frame of the first animation effect. The second control group in the (N-1)th frame of the first animation effect is the same as all controls in the Nth frame of the first animation effect except for the first control group. The format of the image corresponding to at least one control in the (N-1)th frame of the first animation effect can be a format supported by the GPU of the electronic device. For example, hardware image, ASTC, etc.

[0269] This can be understood as follows: Comparing the controls in frame N-1 of the first animation effect with the controls in frame N-1 of the first animation effect, determine which controls in frame N of the first animation effect have changed or / or have been newly added. The one or more rendering nodes corresponding to these controls are designated as the first rendering node, and the one or more images corresponding to these controls are designated as the images corresponding to the first rendering node. Conversely, comparing the controls in frame N-1 of the first animation effect with the controls in frame N-1 of the first animation effect, determine which controls in frame N of the first animation effect have not changed. The one or more rendering nodes corresponding to these controls are designated as the second rendering node, and the one or more images corresponding to these controls are designated as the images corresponding to the second rendering node.

[0270] For example, the first frame of the first animation effect includes control 1, control 2, and control 3, and the second frame of the first animation effect also includes control 1, control 2, and control 3. The values ​​of the first properties of control 1 and control 3 in the first frame of the first animation effect are different from the values ​​of the first properties of control 1 and control 3 in the second frame of the first animation effect, while the values ​​of the first properties of control 2 in the first frame of the first animation effect are the same as the values ​​of the first properties of control 2 in the second frame of the first animation effect.

[0271] When generating the display data corresponding to the first frame of the first animation effect, the application's rendering client thread can generate image A1 corresponding to control 1, image A2 corresponding to control 2, and image A3 corresponding to control 3 in the first frame of the first animation effect, and send images A1, A2, A3, and the description information of the first frame of the first animation effect to the rendering process. The rendering process can then generate the display data corresponding to the first frame of the first animation effect based on images A1, A2, A3, and the description information of the first frame of the first animation effect.

[0272] When generating the display data corresponding to the second frame of the first animation effect, the application's rendering client thread can generate image B1 corresponding to control 1 and image B3 corresponding to control 3 in the second frame of the first animation effect, and send images B1, B3, and the description information of the second frame of the first animation effect to the rendering process. The rendering process can generate the display data corresponding to the second frame of the first animation effect based on images B1, A2, B3, and the description information of the second frame of the first animation effect.

[0273] That is, in the second frame of the first animation effect, control 1 corresponds to rendering node 1, control 2 corresponds to rendering node 2, and control 3 corresponds to rendering node 3. Rendering node 1 and rendering node 3 are the first rendering nodes, and images B1 and B3 are first-type images. The image corresponding to rendering node 1 is updated from image A1 to image B1, and the image corresponding to rendering node 3 is updated from image A3 to image B3. Rendering node 2 is the second rendering node, and image A2 is a second-type image. The image corresponding to rendering node 2 still reuses image A2.

[0274] Optionally, when the second attribute includes attributes related to the position of the control, the rendering process updates the position of the rendering node in the first rendering tree based on the value of the position-related attribute of each control in the Nth frame of the first animation effect.

[0275] Step B3: The rendering process pastes the first type of image at the position of the first rendering node and the second type of image at the position of the second rendering node to generate the display data of the Nth frame of the first animation effect.

[0276] For example, in the first animation effect, the position of control 1 changes from (x0, y0) to (x1, y1). If the duration of the first animation effect is 30 frames, then the position of control 1 in the Nth frame of the first animation effect is (x0+N*δX, y0+N*δY), where δX = (x1-x0) / 30, δY = (y1-y0) / 30. The rendering process can paste the image corresponding to control 1 in the Nth frame of the first animation effect at (x0+N*δX, y0+N*δY).

[0277] Please see Figure 13 The flowchart below illustrates another method for displaying animation effects according to an embodiment of this application. The specific process of this animation effect display method is described below.

[0278] S1301. After receiving the animation trigger event, the application process determines the first information based on the description information of the first animation effect and sends the first information to the rendering process.

[0279] In the embodiments of this application, S1301 can refer to S601 above, and will not be repeated here.

[0280] S1302. After not receiving the first information from the application process, the rendering process generates the display data of the Nth frame of the first animation effect based on the description information of the N-1th frame of the first animation effect and the image corresponding to at least one control in the N-1th frame.

[0281] In this embodiment of the application, the rendering process can generate the display data of the Nth frame of the first animation effect based on the description information of the N-1th frame of the first animation effect and the image corresponding to at least one control in the N-1th frame after not receiving the first information from the application process.

[0282] In one possible implementation, the rendering process can determine whether it receives first information from the application process within a first duration. If it does not receive first information from the application process within the first duration, it generates display data for the Nth frame of the first animation effect based on the description information of the N-1th frame of the first animation effect and the image corresponding to at least one control in the N-1th frame of the first animation effect.

[0283] The starting time of the first duration can be the time when the rendering process receives the vertical sync signal corresponding to the Nth frame of the first animation effect. The rendering process can determine which frame of the first animation effect the currently received vertical sync signal corresponds to through various methods, such as the number of vertical sync signals already received or the time intervals within those signals. This embodiment does not limit this determination. For example, the first received vertical sync signal corresponds to the first frame of the first animation effect, the second received vertical sync signal corresponds to the second frame, and so on. Determining which frame of the first animation effect the currently received vertical sync signal corresponds to can be understood as determining which frame of the first animation effect the current frame belongs to.

[0284] The duration of the first duration can be pre-configured, or it can be defined by a standard, or it can be agreed upon in advance by the application process and the rendering process. This application embodiment does not limit this.

[0285] The image format corresponding to at least one control in the (N-1)th frame of the first animation effect can be a format supported by the GPU of the electronic device. For example, hardware image, ASTC, etc.

[0286] This can be understood as follows: if the rendering process does not receive the description information of the Nth frame of the first animation effect and the image corresponding to at least one control in the Nth frame of the first animation effect from the application process within the first time period after receiving the vertical synchronization signal corresponding to the Nth frame of the first animation effect, then the rendering process can reuse the description information of the (N-1)th frame of the first animation effect and the image corresponding to at least one control in the (N-1)th frame of the first animation effect to generate the display data of the Nth frame of the first animation effect. The final generated display data of the Nth frame of the first animation effect is the same as the previously generated display data of the (N-1)th frame of the first animation effect.

[0287] One possible implementation, such as Figure 14 As shown, S1302 may include the following steps C1-C3:

[0288] Step C1: After not receiving the first information from the application process, the rendering process determines the value of the second property of each control in the Nth frame of the first animation effect based on the description information of the N-1th frame of the first animation effect.

[0289] Step C1 can be referred to step B1 above, and will not be repeated here.

[0290] Step C2: The rendering process updates the first render tree based on the value of the second property of each control in the Nth frame of the first animation effect.

[0291] Step C2 can be referred to as step B2 above, and will not be repeated here.

[0292] The updated first rendering tree includes a third rendering node. This third rendering node corresponds to a third type of image, which is the image corresponding to at least one control in the (N-1)th frame of the first animation effect. In other words, the third type of image is the image corresponding to at least one control in the (N-1)th frame of the first animation effect used by the rendering process when generating the display data for that frame.

[0293] Step C3: The rendering process pastes the third type of image at the position of the third rendering node and generates the display data for the Nth frame of the first animation effect.

[0294] Step C3 can be referred to as step B3 above, and will not be repeated here.

[0295] Please see Figure 15 The flowchart below illustrates another method for displaying animation effects according to an embodiment of this application. The specific process of this animation effect display method is described below.

[0296] S1501. After receiving the animation trigger event, the application process determines the first information based on the description information of the first animation effect and sends the first information to the rendering process.

[0297] In the embodiments of this application, S1501 can refer to S601 above, and will not be repeated here.

[0298] S1502. After receiving the description information of the Nth frame of the first animation effect from the application process, and after not receiving the image corresponding to at least one control in the Nth frame of the first animation effect from the application process, the rendering process generates the display data of the Nth frame of the first animation effect based on the description information of the Nth frame of the first animation effect and the image corresponding to at least one control in the (N-1)th frame of the first animation effect.

[0299] In this embodiment of the application, after receiving the description information of the Nth frame of the first animation effect from the application process, and without receiving the image corresponding to at least one control in the Nth frame of the first animation effect from the application process, the rendering process can generate the display data of the Nth frame of the first animation effect based on the description information of the Nth frame of the first animation effect and the image corresponding to at least one control in the (N-1)th frame of the first animation effect.

[0300] In one possible implementation, the rendering process can determine whether it receives first information from the application process within a first duration. If it does not receive first information from the application process within the first duration, it generates display data for the Nth frame of the first animation effect based on the description information of the Nth frame of the first animation effect and the image corresponding to at least one control in the (N-1)th frame of the first animation effect.

[0301] The starting time of the first duration can be the time when the rendering process receives the vertical sync signal corresponding to the Nth frame of the first animation effect. The rendering process can determine which frame of the first animation effect the currently received vertical sync signal corresponds to through various methods, such as the number of vertical sync signals already received or the time intervals within those signals. This embodiment does not limit this determination. For example, the first received vertical sync signal corresponds to the first frame of the first animation effect, the second received vertical sync signal corresponds to the second frame, and so on. Determining which frame of the first animation effect the currently received vertical sync signal corresponds to can be understood as determining which frame of the first animation effect the current frame belongs to.

[0302] The duration of the first duration can be pre-configured, or it can be defined by a standard, or it can be agreed upon in advance by the application process and the rendering process. This application embodiment does not limit this.

[0303] The image format corresponding to at least one control in the (N-1)th frame of the first animation effect can be a format supported by the GPU of the electronic device. For example, hardware image, ASTC, etc.

[0304] This can be understood as follows: if, within the first duration after receiving the vertical synchronization signal corresponding to the Nth frame of the first animation effect, the rendering process only receives the description information of the Nth frame of the first animation effect from the application process, but does not receive the image corresponding to at least one control in the Nth frame of the first animation effect from the application process, then the rendering process can reuse the image corresponding to at least one control in the (N-1)th frame of the first animation effect to generate the display data of the Nth frame of the first animation effect.

[0305] One possible implementation, such as Figure 16 As shown, S1502 may include the following steps D1-D3:

[0306] Step D1: After receiving the description information of the Nth frame of the first animation effect from the application process, and after not receiving the image corresponding to at least one control in the Nth frame of the first animation effect from the application process, the rendering process determines the value of the second attribute of each control in the Nth frame of the first animation effect based on the description information of the Nth frame of the first animation effect.

[0307] Step D1 can be referred to step B1 above, and will not be repeated here.

[0308] Step D2: The rendering process updates the first render tree based on the value of the second property of each control in the Nth frame of the first animation effect.

[0309] Step D2 can be referred to as step B2 above, and will not be repeated here.

[0310] The updated first rendering tree includes a third rendering node. This third rendering node corresponds to a third type of image, which is the image corresponding to at least one control in the (N-1)th frame of the first animation effect. In other words, the third type of image is the image corresponding to at least one control in the (N-1)th frame of the first animation effect used by the rendering process when generating the display data for that frame.

[0311] Step D3: The rendering process pastes the third type of image at the position of the third rendering node and generates the display data for the Nth frame of the first animation effect.

[0312] Step D3 can be referred to as step B3 above, and will not be repeated here.

[0313] Please see Figure 17 The flowchart below illustrates another method for displaying animation effects according to an embodiment of this application. The specific process of this animation effect display method is described below.

[0314] S1701. After receiving the animation trigger event, the application process determines the first information based on the description information of the first animation effect and sends the first information to the rendering process.

[0315] In the embodiments of this application, S1701 can refer to S601 above, and will not be repeated here.

[0316] S1702. After receiving the image corresponding to at least one control in the Nth frame of the first animation effect from the application process, and after not receiving the description information of the Nth frame of the first animation effect from the application process, the rendering process generates the display data of the Nth frame of the first animation effect based on the description information of the (N-1)th frame of the first animation effect and the image corresponding to at least one control in the Nth frame of the first animation effect.

[0317] In this embodiment of the application, after receiving the image corresponding to at least one control in the Nth frame of the first animation effect from the application process, and without receiving the description information of the Nth frame of the first animation effect from the application process, the rendering process can generate the display data of the Nth frame of the first animation effect based on the description information of the (N-1)th frame of the first animation effect and the image corresponding to at least one control in the Nth frame of the first animation effect.

[0318] In one possible implementation, the rendering process can determine whether it receives first information from the application process within a first duration. If it receives an image corresponding to at least one control in the Nth frame of the first animation effect from the application process, and does not receive description information of the Nth frame of the first animation effect from the application process, it generates display data for the Nth frame of the first animation effect based on the description information of the (N-1)th frame of the first animation effect and the image corresponding to at least one control in the Nth frame of the first animation effect.

[0319] The starting time of the first duration can be the time when the rendering process receives the vertical sync signal corresponding to the Nth frame of the first animation effect. The rendering process can determine which frame of the first animation effect the currently received vertical sync signal corresponds to through various methods, such as the number of vertical sync signals already received or the time intervals within those signals. This embodiment does not limit this determination. For example, the first received vertical sync signal corresponds to the first frame of the first animation effect, the second received vertical sync signal corresponds to the second frame, and so on. Determining which frame of the first animation effect the currently received vertical sync signal corresponds to can be understood as determining which frame of the first animation effect the current frame belongs to.

[0320] The duration of the first duration can be pre-configured, or it can be defined by a standard, or it can be agreed upon in advance by the application process and the rendering process. This application embodiment does not limit this.

[0321] The image format corresponding to at least one control in the Nth frame of the first animation effect can be a format supported by the GPU of the electronic device. For example, hardware image, ASTC, etc.

[0322] This can be understood as follows: if, within the first duration after receiving the vertical synchronization signal corresponding to the Nth frame of the first animation effect, the rendering process only receives the image corresponding to at least one control in the Nth frame of the first animation effect from the application process, but does not receive the description information of the Nth frame of the first animation effect from the application process, then the rendering process can reuse the description information of the (N-1)th frame of the first animation effect to generate the display data of the Nth frame of the first animation effect.

[0323] One possible implementation, such as Figure 18As shown, S1702 may include the following steps E1-E3:

[0324] Step E1: After receiving the image corresponding to at least one control in the Nth frame of the first animation effect from the application process within the first duration, and after not receiving the description information of the Nth frame of the first animation effect from the application process, the rendering process determines the value of the second attribute of each control in the Nth frame of the first animation effect based on the description information of the (N-1)th frame of the first animation effect.

[0325] Step E1 can be referred to as step B1 above, and will not be repeated here.

[0326] Step E2: The rendering process updates the first render tree based on the value of the second property of each control in the Nth frame of the first animation effect.

[0327] Step E2 can be referred to as step B2 above, and will not be repeated here.

[0328] Step E3: The rendering process pastes the first type of image at the position of the first rendering node and the second type of image at the position of the second rendering node to generate the display data of the Nth frame of the first animation effect.

[0329] Step E3 can be referred to as step B3 above, and will not be repeated here.

[0330] Based on the above embodiments and the same concept, this application also provides an electronic device for implementing the animation effect display method provided in this application.

[0331] like Figure 19 As shown, the electronic device 1900 may include: a memory 1901, one or more processors 1902, and one or more computer programs (not shown in the figure). These devices can be coupled via one or more communication buses 1903. Optionally, when the electronic device 1900 is used to implement the animation effect display method provided in the embodiments of this application, the electronic device 1900 may further include a display screen 1904.

[0332] The memory 1901 stores one or more computer programs (code), each including computer instructions. One or more processors 1902 call the computer instructions stored in the memory 1901, causing the electronic device 1900 to execute the animation display method provided in this embodiment. The display screen 1904 is used to display images, videos, application interfaces, and other related user interfaces.

[0333] In a specific implementation, memory 1901 may include high-speed random access memory and may also include non-volatile memory, such as one or more disk storage devices, flash memory devices, or other non-volatile solid-state storage devices. Memory 1901 may store an operating system (hereinafter referred to as the system), such as embedded operating systems like Android, iOS, Windows, or Linux. Memory 1901 can be used to store implementation programs of the embodiments of this application. Memory 1901 may also store network communication programs, which can be used to communicate with one or more additional devices, one or more user devices, or one or more electronic devices. One or more processors 1902 may be a general-purpose central processing unit (CPU), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits used to control the execution of programs in the scheme of this application.

[0334] It should be noted that, Figure 19 This is merely one implementation of the electronic device 1900 provided in this application embodiment. In actual applications, the electronic device 1900 may include more or fewer components, which is not limited here.

[0335] Based on the above embodiments and the same concept, this application also provides a computer-readable storage medium storing a computer program that, when run on a computer, causes the computer to execute the animation effect display method provided in the above embodiments.

[0336] Based on the above embodiments and the same concept, this application also provides a computer program product, which includes a computer program or instructions. When the computer program or instructions are run on a computer, the computer executes the animation effect display method provided in the above embodiments.

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

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

[0339] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

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

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

Claims

1. A method for displaying animation effects, characterized in that, Applied to electronic devices, the method includes: Upon receiving an animation trigger event, the application process determines the description information of the Nth frame of the first animation effect based on the description information of the first animation effect, determines the value of the first attribute of at least one control in the Nth frame based on the description information of the Nth frame, and determines the image corresponding to the at least one control based on the value of the first attribute of the at least one control, and sends the first information to the rendering process; wherein, the animation trigger event is used to trigger the display of the first animation effect, the first animation effect includes M frames, the first information includes the description information of the Nth frame and the image corresponding to the at least one control, M is a positive integer, N is a positive integer less than or equal to M, when N equals 1, the at least one control is a control among all controls in the Nth frame, or, when N is greater than or equal to 2, the at least one control is a control in the Nth frame whose first attribute value has changed compared to the (N-1)th frame of the first animation effect, and / or, a control added in the Nth frame compared to the (N-1)th frame; After receiving the first information from the application process, the rendering process generates display data for the Nth frame of the first animation effect based on the first information.

2. The method as described in claim 1, characterized in that, The application process includes the application's UI thread and the application's rendering client thread. The application process determines the description information of the Nth frame of the first animation effect based on the description information of the first animation effect, determines the value of a first attribute of at least one control in the Nth frame based on the description information of the Nth frame, and determines the image corresponding to the at least one control based on the value of the first attribute of the at least one control, including: The UI thread determines the time corresponding to the start frame of the first animation effect, the time corresponding to the end frame of the first animation effect, and the description information of the end frame based on the description information of the first animation effect. Upon receiving the vertical synchronization signal corresponding to the Nth frame, the UI thread or the rendering client thread determines the description information of the Nth frame based on the time corresponding to the start frame, the time corresponding to the end frame, the description information of the end frame, and the time corresponding to the Nth frame. The rendering client thread determines the value of the first attribute of the at least one control based on the description information of the Nth frame, and determines the image corresponding to the at least one control based on the value of the first attribute of the at least one control.

3. The method as described in claim 1 or 2, characterized in that, The first attribute includes attributes related to the content carried on the control; and / or, The first attribute includes attributes related to the appearance of the control.

4. The method as described in claim 3, characterized in that, The rendering process generates display data for the Nth frame of the first animation effect based on the first information, including: The rendering process determines the value of the second attribute of each control in the Nth frame based on the description information of the Nth frame; The rendering process updates the first rendering tree according to the value of the second attribute of each control; wherein, the updated first rendering tree includes a first rendering node and a second rendering node, the first rendering node corresponds to a first type of image, the second rendering node corresponds to a second type of image, the second type of image is the image corresponding to the control whose value of the first attribute has not changed in the Nth frame compared to the N-1th frame of the first animation effect, the first type of image is the image corresponding to the control whose value of the first attribute has changed in the Nth frame compared to the N-1th frame, and / or, the image corresponding to the newly added control in the Nth frame compared to the N-1th frame; The rendering process pastes the first type of image at the position of the first rendering node and the second type of image at the position of the second rendering node to generate the display data of the Nth frame of the first animation effect.

5. The method as described in claim 4, characterized in that, The second attribute includes attributes related to the position of the control, and the rendering process updates the first rendering tree based on the value of the second attribute for each control, including: The rendering process updates the position of the rendering node in the first rendering tree based on the value of the position-related attribute of each control.

6. The method as described in claim 5, characterized in that, The method further includes: If the first information is not received from the application process, the rendering process generates the display data for the Nth frame of the first animation effect based on the description information of the (N-1)th frame of the first animation effect and the image corresponding to at least one control in the (N-1)th frame; or, Upon receiving the description information of the Nth frame from the application process, and without receiving an image corresponding to at least one control in the Nth frame from the application process, the rendering process generates the display data for the Nth frame of the first animation effect based on the description information of the Nth frame and the image corresponding to at least one control in the (N-1)th frame of the first animation effect; or, After receiving an image corresponding to at least one control in the Nth frame from the application process, and without receiving description information for the Nth frame from the application process, the rendering process generates display data for the Nth frame of the first animation effect based on the description information of the (N-1)th frame of the first animation effect and the image corresponding to at least one control in the Nth frame.

7. The method as described in claim 1, characterized in that, Before the rendering process generates the display data for the Nth frame of the first animation effect, the method further includes: The rendering process determines whether it receives the first information from the application process within a first duration; wherein the starting point of the first duration is the time point at which the rendering process receives the vertical synchronization signal corresponding to the Nth frame.

8. The method as described in claim 1, characterized in that, The image is in a format supported by the graphics processing unit (GPU) of the electronic device.

9. An electronic device, characterized in that, The electronic device includes: one or more processors and memory; The memory is coupled to the one or more processors, the memory being used to store computer program code, the computer program code including computer instructions, the one or more processors invoking the computer instructions to cause the electronic device to perform the method as described in any one of claims 1-8.

10. A chip system, characterized in that, The chip system is applied to an electronic device, the chip system including one or more processors, the processors being configured to invoke computer instructions to cause the electronic device to perform the method as described in any one of claims 1-8.

11. A computer-readable storage medium comprising instructions, characterized in that, When the instructions are executed on an electronic device, the electronic device causes the electronic device to perform the method as described in any one of claims 1-8.

12. A computer program product, characterized in that, Includes computer-readable instructions that, when executed by one or more processors, implement the method as described in any one of claims 1-8.

Images