Animation effect display method and electronic device

Abstract

The embodiment of this application provides an animation effect display method and an electronic device, which relate to the field of electronic technology. According to the animation effect display method provided in one embodiment of this application, before the animation effect is displayed, the UI thread of the application or the rendering thread or rendering process of the application determines the control whose property changes during the duration of the animation effect and determines the property of the control on the interface of each frame, and then the rendering thread or rendering process of the application generates a bitmap corresponding to the interface of the frame based on the property of the control on the interface of each frame. Since the properties such as the size and location of the control on the interface of each frame are determined before the animation effect is displayed, the UI thread does not need to measure, layout, and draw and record on the interface of each frame, and therefore the display of the animation effect is not affected by the blocking of the UI thread.

Description

Technical Field

[0001] This application claims priority to Chinese Patent Application No. 202111209898.X, titled "METHOD FOR SEPARATING ANIMATION FROM UI", filed with the China National Intellectual Property Administration on October 18, 2021, and to Chinese Patent Application No. 202111526945.3, titled "ANIMATION EFFECT DISPLAY METHOD AND ELECTRONIC DEVICE", filed with the China National Intellectual Property Administration on December 14, 2021, both of which are incorporated herein by reference in their entirety.

[0002] This application relates to the field of electronic technologies, and particularly to an animation effect display method and an electronic device.

Background Art

[0003] With the development of electronic technologies, more and more electronic devices are involved in users' daily lives. Additionally, as parameters such as the resolution and size of the displays of electronic devices increase, more content may be displayed on the electronic devices.

[0004] An application may display an animation effect to a user by adjusting properties such as the size, width, height, and transparency of controls displayed on an interface.

[0005] However, in the prior art, the UI thread has to handle the computational load for displaying the animation effect and other tasks. As a result, frame freezes or jerks are likely to occur in applications on the electronic device, degrading the user experience.

Summary of the Invention

[0006] Embodiments of this application provide an animation effect display method and an electronic device, relating to the field of electronic technology. According to the animation effect display method provided in one embodiment of this application, before the animation effect is displayed, the application's UI thread or the application's rendering thread or rendering process determines which controls will change properties during the duration of the animation effect and determines the properties of the controls on the interface of each frame. Then, the application's rendering thread or rendering process generates a bitmap corresponding to the interface of each frame based on the properties of the controls on the interface of each frame. Since properties such as the size and location of the controls on the interface of each frame are determined before the animation effect is displayed, the UI thread does not need to measure, lay out, draw and record on the interface of each frame, and therefore the display of the animation effect is not affected by blocking of the UI thread.

[0007] According to a first aspect, one embodiment of the present application provides a method for displaying an animation effect. The method includes: an application's UI thread, after receiving an animation trigger event, determining the duration of a first animation effect, the start time of a first animation effect, and descriptive information relating to the end frame of a first animation effect, based on information relating to a first animation effect of a first group of controls set by the application, wherein the first group of controls includes one or more controls, and the animation trigger event is used to trigger the display of the first animation effect; determining descriptive information relating to a target frame based on the start time of the first animation effect, the duration of the first animation effect, the time corresponding to the target frame, and the end frame of the first animation effect when generating display data for a target frame during the duration of the first animation effect; and an application's rendering thread or rendering process generating display data for a target frame based on the descriptive information relating to the target frame.

[0008] In the embodiments described above, during the duration of the animation, the application's rendering thread or rendering process generates an interface based on descriptive information about the target frame, which is used to determine the properties of the control in the target frame, such as size, location, and transparency. During the duration of the animation, the application's rendering thread or rendering process generates the display data for the target frame, eliminating the need for the UI thread to generate the display data for the target frame through measurement, layout, drawing, and recording. This further prevents frame freezing of animation effects caused by blocking of the UI thread.

[0009] With respect to some embodiments of the first aspect, in some embodiments, information regarding the first animation effect is set by the application via an animation interface provided by the system.

[0010] In the embodiments described above, application developers can set animation effects for any one or more controls via the animation interface, making it easier for application developers to perform the settings.

[0011] In some embodiments of the first aspect, in some embodiments, when generating display data for a target frame during the duration of a first animation effect, determining descriptive information about a target frame based on descriptive information about the start time of a first animation effect, the duration of a first animation effect, the time corresponding to a target frame, and the end frame of a first animation effect, specifically includes a UI thread or rendering thread or rendering process determining descriptive information about a target frame based on descriptive information about the start time of a first animation effect, the duration of a first animation effect, the time corresponding to a target frame, and the end frame of a first animation effect.

[0012] In the embodiments described above, the descriptive information regarding the target frame may be determined by the UI thread or by the rendering thread or rendering process. When the descriptive information regarding the target frame is determined by the rendering thread or rendering process, the load on the UI thread can be further reduced, and the possibility of frame freezing of animation effects can be reduced.

[0013] With respect to some embodiments of the first aspect, in some embodiments, the method further includes: a UI thread determining the properties of a control at the end frame of a first animation effect based on descriptive information relating to the end frame of the first animation effect; and a UI thread, or a rendering thread or rendering process, determining a second group of controls by comparing the properties of a control at the end frame of the first animation effect with the properties of a control shown before the first animation effect began, wherein the second group of controls are controls whose properties change during the duration of the first animation effect, and the second group of controls includes the first group of controls; the first group of controls are displayed by the first animation effect, and the controls of the second group other than the first group of controls are displayed by the second animation effect, and an animation trigger event is further used to trigger the display of the second animation effect.

[0014] In the embodiment described above, the UI thread determines which controls change properties during the duration of the animation effect by comparing the properties of the controls in the final frame of the animation effect with the properties of the controls on the interface in one frame shown before the animation effect started, determines the properties of the controls on the interface in each frame during the duration of the animation effect, and then determines the display data for the target frame. This can reduce the computational complexity compared to determining the properties of all controls on the interface in each frame during the duration of the animation effect.

[0015] With respect to some embodiments of the first aspect, in some embodiments, descriptive information relating to a target frame is further used to determine the properties of a control among a second group of controls in the target frame, the properties of the control include at least one of the control's size, the control's location, and the control's transparency.

[0016] In the embodiments described above, the properties of the control directly affect the display effect of the control. Determining the properties of the control may determine descriptive information about the target frame.

[0017] With respect to some embodiments of the first aspect, in some embodiments, the rendering thread or rendering process of an application generates display data for a target frame based on descriptive information about the target frame, which specifically includes updating a first render tree based on descriptive information about the target frame by the rendering thread or rendering process, and generating display data for the target frame based on the updated first render tree by the rendering thread or rendering process.

[0018] In the previously described embodiment, compared to the method in which the application's UI thread updates the render tree and then synchronizes the render tree to the application's rendering thread or rendering process, this method allows the application's rendering process or rendering thread to update the render tree based on descriptive information about the target frame and generate display data for the target frame based on the updated render tree. In this case, even if the UI thread is blocked, the animation effect can still be displayed correctly.

[0019] With respect to some embodiments of the first aspect, in some embodiments, updating the first render tree based on descriptive information about a target frame by a rendering thread or rendering process specifically includes updating the first render tree based on the properties of a control among a second group of controls in the target frame.

[0020] In the embodiments described above, the application's rendering process or rendering thread may update the render tree based only on the properties of controls whose properties change in the target frame to generate display data for the target frame.

[0021] With respect to some embodiments of the first aspect, in some embodiments, the second group of controls includes a third control, and a rendering thread or rendering process adjusts the size of the content held in the third control based on the size of the third control and a preset policy, the policy is used to crop or scale the content held, and the content held includes at least one of images and text.

[0022] In the embodiments described above, if the size of the control changes during the duration of the animation effect, the electronic device may further crop or scale the contents of the control.

[0023] With respect to some embodiments of the first aspect, in some embodiments, the third control is an image control ImageView, and the content held in the third control is a first image. The policy includes comparing the size of the third control with the size of the first image and cropping or scaling the first image.

[0024] In the foregoing embodiments, when the size of a control changes during the duration of an animation effect, the electronic device may further crop or scale an image on the control.

[0025] Regarding some embodiments of the first aspect, in some embodiments, the third control is a text control TextView, and the content held in the third control is the first text. The policy includes comparing the width of the third control with the width of the first text and performing line splitting or line joining on the first text.

[0026] In the foregoing embodiments, when the size of a control changes during the duration of an animation effect, the electronic device further performs line splitting or line joining on the text on the control.

[0027] Regarding some embodiments of the first aspect, in some embodiments, the first render tree is a render tree corresponding to the end frame of the first animation effect, or the first render tree is a render tree corresponding to the interface shown before the first animation effect is started.

[0028] Also, in the above embodiments, the render tree updated based on the description information of the target frame by the rendering thread or the rendering process of the application may be a render tree corresponding to the end interface of the animation effect, or may be a render tree corresponding to the interface shown before the animation effect is started.

[0029] Regarding some embodiments of the first aspect, in some embodiments, after the UI thread of the application receives an animation trigger event, based on the information regarding the first animation effect of the first control group set by the application, the method determines the duration of the first animation effect, the start time of the first animation effect, and the description information regarding the end frame of the first animation effect. Then, the method further includes the UI thread unregistering the animation callback CALLBACK_ANIMATION of the first animation effect, where the animation callback is used to trigger the UI thread to modify the properties of the controls in the first control group.

[0030] In the foregoing embodiments, the electronic device determines the description information regarding the target frame from the animation effect and unregisters the callback. Therefore, the UI thread of the application no longer performs measurement, layout, and drawing and recording. This prevents frame freezing of the animation effect caused by blocking of the UI thread.

[0031] Regarding some embodiments of the first aspect, in some embodiments, during the duration of the first animation effect, the UI thread receives a vertical synchronization signal at a first moment, and the rendering thread or the rendering process generates the display data of the target frame at a second moment based on the description information of the target frame. The second moment is after the first duration of the first moment, and the duration is preset.

[0032] In the embodiments described above, the application's rendering process or rendering thread may independently request a vertical synchronization signal to generate the interface for each frame during the duration of the animation effect. Alternatively, the UI thread may generate the interface for each frame during the duration of the animation effect after a certain period has elapsed since receiving the vertical synchronization signal. In this case, the UI thread may be triggered by the non-animation effect to modify the properties of the controls and synchronize the modified properties of the controls with the application's rendering process or rendering thread.

[0033] With respect to some embodiments of the first aspect, in some embodiments, a rendering thread or rendering process determines a second parameter during the duration of a first animation effect, the second parameter includes both the size and location of a control in a second group of controls, the rendering thread or rendering process sends the second parameter to a UI thread, and the UI thread determines the size and location of a control in the second group of controls based on the second parameter.

[0034] In the embodiments described above, the rendering thread or rendering process synchronizes the location and size of the controls on the interface with the UI thread during the duration of the animation effect, so that the UI thread can know the actual location and size of the controls.

[0035] With respect to some embodiments of the first aspect, in some embodiments, the animation trigger event includes at least one of user interaction, network state changes, and messages sent to the application by another application on an electronic device.

[0036] In the embodiments described above, the animation effect may be triggered in multiple ways.

[0037] According to a second aspect, embodiments of this application provide an electronic device. The electronic device includes one or more processors and memory. The memory is coupled to one or more processors and is configured to store computer program code. The computer program code includes computer instructions. One or more processors can call computer instructions to enable an electronic device to perform the following steps: after an application's UI thread receives an animation trigger event, determine the duration of a first animation effect, the start time of the first animation effect, and descriptive information about the end frame of the first animation effect based on information about a first animation effect set by the application, wherein the first control group includes one or more controls, and the animation trigger event is used to trigger the display of the first animation effect; determine descriptive information about a target frame based on the start time of the first animation effect, the duration of the first animation effect, the time corresponding to the target frame, and the descriptive information about the end frame of the first animation effect when generating display data for the target frame during the duration of the first animation effect; and enable an application's rendering thread or rendering process to generate display data for the target frame based on the descriptive information about the target frame.

[0038] In the embodiments described above, during the duration of the animation, the application's rendering thread or rendering process generates an interface based on descriptive information about the target frame, which is used to determine the properties of the control in the target frame, such as size, location, and transparency. During the duration of the animation, the application's rendering thread or rendering process generates the display data for the target frame, eliminating the need for the UI thread to generate the display data for the target frame through measurement, layout, drawing, and recording. This further prevents frame freezing of animation effects caused by blocking of the UI thread.

[0039] With respect to some embodiments of the first aspect, in some embodiments, the first animation effect is set by the application via the animation interface.

[0040] With respect to some embodiments of the second aspect, in some embodiments, one or more processors are configured to call computer instructions to enable an electronic device to perform the following procedure, namely, a UI thread or rendering thread or rendering process to determine descriptive information about a target frame based on descriptive information about the start time of a first animation effect, the duration of a first animation effect, the time corresponding to a target frame, and the end frame of a first animation effect.

[0041] With respect to some embodiments of the second aspect, in some embodiments, one or more processors are further configured to call computer instructions to enable an electronic device to perform the following steps: a UI thread determines the properties of a control at the end frame of a first animation effect based on descriptive information relating to the end frame of a first animation effect; a UI thread, or a rendering thread or rendering process, determines a second group of controls by comparing the properties of a control at the end frame of a first animation effect with the properties of a control shown before the first animation effect began, wherein the second group of controls are controls whose properties change during the duration of the first animation effect, and the second group of controls includes the first group of controls; the first group of controls is displayed by the first animation effect, and the controls of the second group other than the first group of controls are displayed by the second animation effect, and an animation trigger event is further used to trigger the display of the second animation effect.

[0042] With respect to some embodiments of the second aspect, in some embodiments, descriptive information relating to the target frame is further used to determine the properties of a control among a second group of controls in the target frame, the properties of the control include at least one of the control's size, the control's location, and the control's transparency.

[0043] With respect to some embodiments of the second aspect, in some embodiments, one or more processors are configured to specifically call computer instructions to enable an electronic device to perform the following steps: a rendering thread or rendering process updates a first render tree based on descriptive information about a target frame; and the rendering thread or rendering process generates display data for the target frame based on the updated first render tree.

[0044] With respect to some embodiments of the second aspect, in some embodiments, one or more processors are configured to specifically call computer instructions to enable an electronic device to perform the following procedure, namely, a rendering thread or rendering process to update a first render tree based on the properties of controls among a second group of controls in a target frame.

[0045] With respect to some embodiments of the second aspect, in some embodiments, one or more processors are further configured to call computer instructions so that an electronic device can perform the following procedure, namely, a first group of controls including a third control, and a rendering thread or rendering process adjusting the size of the content held in the third control based on the size of the third control and a preset policy, the policy being used to crop or scale the content held, and the content held including at least one of images and text.

[0046] With respect to some embodiments of the second aspect, in some embodiments, the third control is an image control ImageView, and the content held in the third control is a first image. The policy includes comparing the size of the third control with the size of the first image and cropping or scaling the first image.

[0047] With respect to some embodiments of the second aspect, in some embodiments, the third control is a text control TextView, and the content held in the third control is the first text. The policy includes comparing the width of the third control with the width of the first text and performing line splitting or line merging on the first text.

[0048] With respect to some embodiments of the second aspect, in some embodiments, the first render tree is a render tree corresponding to the end frame of the first animation effect, or the first render tree is a render tree corresponding to an interface shown before the start of the first animation effect.

[0049] With respect to some embodiments of the second aspect, in some embodiments, one or more processors are configured to specifically call computer instructions to enable an electronic device to perform the following steps.

[0050] With respect to some embodiments of the second aspect, in some embodiments, one or more processors are further configured to call a computer instruction to enable an electronic device to perform the following procedure, namely, a UI thread unregistering an animation callback CALLBACK_ANIMATION for a first animation effect, the animation callback being used to trigger the UI thread to modify the properties of a control among the first group of controls.

[0051] With respect to some embodiments of the second aspect, in some embodiments, one or more processors are further configured to call computer instructions to enable an electronic device to perform the following procedure, namely, during the duration of a first animation effect, a UI thread receives a vertical synchronization signal at a first moment, and a rendering thread or rendering process generates display data for a target frame at a second moment based on descriptive information for the target frame, wherein the second moment is after a first duration of the first moment, and the first duration is preset.

[0052] With respect to some embodiments of the second aspect, in some embodiments, one or more processors are further configured to call computer instructions to enable an electronic device to perform the following steps: a rendering thread or rendering process determines a second parameter during the duration of a first animation effect, the second parameter including both the size and location of a control in a second group of controls; the rendering thread or rendering process sends the second parameter to a UI thread; and the UI thread determines the size and location of a control in a second group of controls based on the second parameter.

[0053] Referring to some embodiments of the second aspect, in some embodiments, the animation trigger event includes at least one of user interaction, network state changes, and messages sent to the application by another application on an electronic device.

[0054] According to a third aspect, one embodiment of the present application provides a chip system, which is applied to an electronic device, and the chip system comprises one or more processors, which are configured to call computer instructions, enabling the electronic device to perform a method according to the first aspect or any one of possible implementations of the first aspect.

[0055] According to a fourth aspect, one embodiment of this application provides a computer program product including instructions. When the computer program product operates on an electronic device, the electronic device can perform either the method of the first aspect or a possible implementation of the first aspect.

[0056] According to a fifth aspect, an embodiment of the present application provides a computer-readable storage medium containing instructions. When the instructions are executed on an electronic device, the electronic device can perform a method according to either the first aspect or a possible implementation of the first aspect.

[0057] It will be understood that the electronic device according to the second embodiment, the chip system according to the third embodiment, the computer program product according to the fourth embodiment, and the computer storage medium according to the fifth embodiment are all configured to perform the methods provided in the embodiments of this application. Therefore, for the beneficial effects that can be achieved by the methods, refer to the beneficial effects in the corresponding methods. Further details are not described again here. [Brief explanation of the drawing]

[0058] [Figure 1A] This is a schematic diagram of an example interface according to one embodiment of this application. [Figure 1B] This is a schematic diagram of an example interface according to one embodiment of this application.

[0059] [Figure 2A] This is a schematic diagram of another example of an interface according to one embodiment of this application. [Figure 2B] This is a schematic diagram of another example of an interface according to one embodiment of this application.

[0060] [Figure 3] This is a schematic diagram of an example of an animation effect display method according to one embodiment of this application.

[0061] [Figure 4A] This is a schematic diagram of an example of another animation effect display method according to one embodiment of this application. [Figure 4B] This is a schematic diagram of an example of another animation effect display method according to one embodiment of this application.

[0062] [Figure 5] This is a schematic diagram of an example of animation effect competition according to one embodiment of this application.

[0063] [Figure 6A] This is a schematic diagram illustrating an example of interface change in a multi-animation conflict according to one embodiment of this application. [Figure 6B] This is a schematic diagram illustrating an example of interface change in a multi-animation conflict according to one embodiment of this application. [Figure 6C] This is a schematic diagram illustrating an example of interface change in a multi-animation conflict according to one embodiment of this application. [Figure 6D] This is a schematic diagram illustrating an example of interface change in a multi-animation conflict according to one embodiment of this application. [Figure 6E] This is a schematic diagram illustrating an example of interface change in a multi-animation conflict according to one embodiment of this application. [Figure 6F] This is a schematic diagram illustrating an example of interface change in a multi-animation conflict according to one embodiment of this application.

[0064] [Figure 7A]This is a schematic diagram illustrating an example of view property changes in a multi-animation scenario according to one embodiment of this application. [Figure 7B] This is a schematic diagram illustrating an example of view property changes in a multi-animation scenario according to one embodiment of this application. [Figure 7C] This is a schematic diagram illustrating an example of view property changes in a multi-animation scenario according to one embodiment of this application.

[0065] [Figure 8] This is a schematic diagram of an example of the processing of an animation effect display method according to one embodiment of this application.

[0066] [Figure 9] This is a schematic diagram of an example of determining an animation object according to one embodiment of this application.

[0067] [Figure 10] This is a schematic diagram illustrating an example of determining the properties of the view on the interface of each frame according to one embodiment of this application.

[0068] [Figure 11A] This schematic diagram shows an example of animation parameter changes according to one embodiment of this application. [Figure 11B] This schematic diagram shows an example of animation parameter changes according to one embodiment of this application. [Figure 11C] This schematic diagram shows an example of animation parameter changes according to one embodiment of this application. [Figure 11D] This schematic diagram shows an example of animation parameter changes according to one embodiment of this application.

[0069] [Figure 12A] This is a schematic diagram illustrating an example of interface changes in a multi-animation scenario according to one embodiment of this application. [Figure 12B]This is a schematic diagram illustrating an example of interface changes in a multi-animation scenario according to one embodiment of this application.

[0070] [Figure 13A] This is a schematic diagram illustrating an example of an opportunity for a rendering thread or rendering process to update the render tree, according to one embodiment of this application. [Figure 13B] This is a schematic diagram illustrating an example of an opportunity for a rendering thread or rendering process to update the render tree, according to one embodiment of this application. [Figure 13C] This is a schematic diagram illustrating an example of an opportunity for a rendering thread or rendering process to update the render tree, according to one embodiment of this application.

[0071] [Figure 14] This is a schematic diagram of another example of an opportunity for a rendering thread to update animation parameters, according to one embodiment of this application.

[0072] [Figure 15A] This is a schematic diagram of an example of an animation effect process according to one embodiment of this application. [Figure 15B] This is a schematic diagram of an example of an animation effect process according to one embodiment of this application.

[0073] [Figure 16A] This is a schematic diagram of an example of an animation effect process according to one embodiment of this application. [Figure 16B] This is a schematic diagram of an example of an animation effect process according to one embodiment of this application. [Figure 16C] This is a schematic diagram of an example of an animation effect process according to one embodiment of this application. [Figure 16D] This is a schematic diagram of an example of an animation effect process according to one embodiment of this application. [Figure 16E]This is a schematic diagram of an example of an animation effect process according to one embodiment of this application.

[0074] [Figure 17] This is a schematic diagram illustrating an example of determining view properties using UI thread data, according to one embodiment of this application.

[0075] [Figure 18A] This is a schematic diagram of an example of a render tree change in the process of performing the method shown in Figure 3 according to one embodiment of this application.

[0076] [Figure 18B] This is a schematic diagram of an example of a render tree change in a process that performs the method shown in Figures 4A and 4B according to one embodiment of this application. [Figure 18C] This is a schematic diagram of an example of a render tree change in a process that performs the method shown in Figures 4A and 4B according to one embodiment of this application.

[0077] [Figure 19] This is a schematic diagram of an example of the hardware configuration of an electronic device according to one embodiment of this application.

[0078] [Figure 20] This is a schematic diagram of an example of a software architecture for an electronic device according to one embodiment of this application. [Modes for carrying out the invention]

[0079] The terms used in the following embodiments of this application are used solely to describe specific embodiments of this application and are not intended to limit this application. The singular terms “one,” “a,” “the,” “the foregoing,” “this,” and “the one” used in this specification of this application are also intended to include the plural form unless explicitly specified in the context. The terms “and / or” used in this application should also be understood to indicate and include any or all possible combinations of one or more related enumerated items.

[0080] The terms “First” and “Second” below are intended solely for illustrative purposes and should not be understood as indicators or indications of relative importance, or as implicit indicators of the number of technical features shown. Therefore, features limited by “First” or “Second” may explicitly or implicitly include one or more features. In the description of embodiments of this application, unless otherwise specified, “multiple” means two or more.

[0081] In the following embodiments of this application, the term “user interface (UI)” means a medium interface for interaction and information exchange between an application or operating system and a user, which implements the conversion between the internal form of information and a form that the user can accept. The user interface is source code written in a specific computer language such as Java or an extensible markup language (XML). The source code of the interface is parsed, rendered on an electronic device, and ultimately presented as user-identifiable content. The user interface is generally represented in the form of a graphical user interface (GUI), which is a user interface related to computer operation and displayed in a graphical manner. The user interface may also be visual interface elements such as text, icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, and widgets displayed on the display of an electronic device.

[0082] This interface is used as a medium interface for interaction and information exchange between the application and the user. Each time a vertical synchronization signal (Vsync-APP) arrives, the electronic device must generate an application interface for the foreground application. The frequency of the vertical synchronization signal is related to the refresh rate of the electronic device's screen. For example, the frequency of the vertical synchronization signal is the same as the refresh rate of the electronic device's screen.

[0083] Specifically, before the content displayed on the screen is refreshed, the electronic device needs to generate an application interface for the foreground application. In this case, when the screen is refreshed, the newly generated application interface is displayed to the user.

[0084] Animation effects are applied to animation objects. An animation object may be an application interface (or window), or it may be one or more controls of an application (sometimes called a view). From the user's perspective, an animation object contains one or more controls. From the application's perspective, an animation object contains one or more views. Views are fundamental elements of an application interface, and one control visible to the user on the application interface may correspond to one or more views.

[0085] In embodiments of this application, the meanings of "control" and "view" may be the same unless otherwise specified.

[0086] From a time dimension perspective, an animation effect is the process by which an animated object changes continuously and smoothly over a certain period of time (at least the duration of the interval between two vertical synchronization signals).

[0087] (1) An interface with set animation effects and an animation effect display method provided in the embodiments of this application

[0088] (1.1) Interface with circular animation effect

[0089] In embodiments of this application, animation may include animation effects applied to appearance, animation effects applied to position, transformation-based animation effects, and animation effects applied to content. Animation effects applied to appearance include transparency, rounded corners, border color, border line width, background color, and shadows. Animation effects applied to position include width / height settings, x / y / z coordinates, and x / y / z pivot. Transformation-based animation effects include translation, rotation, scaling, and 3D transformation. Animation effects applied to content include filter effects such as blurring, color enhancement, grayscale conversion, and noise addition.

[0090] All animations may be used as configurable properties of the control. The properties of the control are used to determine how the control is displayed. Display methods include animation effects applied to the appearance described above, animation effects applied to location, transformation-based animation effects, and animation effects applied to content.

[0091] The following examples illustrate interfaces with animation effects.

[0092] Figures 1A and 1B are schematic diagrams of an example interface according to one embodiment of this application.

[0093] As shown in Figure 1A, the interface displayed on the screen of the electronic device is the interface of a desktop application, and the desktop application interface includes control 1A01. Control 1A01 includes the icon for a book application.

[0094] Desktop applications may further include icons for other applications, such as icons for gallery applications, dial-up applications, messaging applications, and contacts applications.

[0095] In response to the user long-pressing control 1A01, control 1A01 scales up.

[0096] During the process of expanding control 1A01, control 1A02 is displayed on the interface. The expansion process of control 1A01 is an animation. Also, if control 1A02 is displayed step by step (for example, its transparency changes), the process of control 1A02 being displayed step by step is also an animation.

[0097] Figures 2A and 2B are schematic diagrams of another example of the interface according to one embodiment of this application.

[0098] As shown in Figure 2A, the interface displayed on the screen of the electronic device is a desktop application interface, and the desktop application interface includes control 2A01. Control 2A01 is folder 1 and includes controls 2A02, 2A03, and 2A04. Control 2A02 is the icon for the game application, control 2A03 is the icon for the flashlight application, and control 2A04 is the icon for the gallery application.

[0099] In response to the user tapping control 2A02, control 2A01 is resized, and controls 2A02, 2A03, and 2A04 are resized.

[0100] The processes of scaling and moving controls 2A01, 2A02, 2A03, and 2A04 are also animated.

[0101] (1.2) Method of displaying animation effects

[0102] To implement the interfaces shown in Figures 1A and 1B, animation events must be set for control 1A01. To implement the interfaces shown in Figures 2A and 2B, animation events must be set for controls 2A01, 2A02, 2A03, and 2A04.

[0103] Figure 3 is a schematic diagram of an example of an animation effect display method according to one embodiment of this application.

[0104] As shown in Figure 3, the animation effect display method may include four steps. Step S301: Create animation event 1. Step S302: After receiving the vertical synchronization signal, trigger the callback for animation event 1 and modify the view properties based on the logic of animation event 1. Step S303: Perform measurement, layout, drawing (sometimes called drawing in software rendering) and generate a render tree. Step S304: Receive the render tree and draw a bitmap based on the render tree. The UI thread must perform steps S301, S302, and S303. The rendering thread must perform step S304. For the first frame of the animation effect, the electronic device must perform steps S301, S302, S303, and S304. For each frame during the duration of the animation effect, the electronic device must perform steps S302, S303, and S304.

[0105] Step S301: Create animation event 1.

[0106] Animation events can be created at any moment and are related to the application's logic. For example, an animation event may be created after user input is received, after a message event sent to the application by another thread or process is received, or after network data requests an update. An animation event includes internal logic for implementing the animation effect, such as the termination conditions for the animation effect and the amount of modification to the view properties for each frame during the duration of the animation effect.

[0107] After an animation event is created, a callback is registered on the UI thread (equivalent to the animation event being registered). For example, the callback is registered on the Choregrapher on the UI thread. The callback is used to process the animation event whenever the UI thread receives a vertical synchronization signal (Vsync-APP) and to trigger the UI thread to modify the view's properties based on the animation event's logic.

[0108] When the animation effect ends, the UI thread actively unregisters the animation event callbacks that were registered to the UI thread, based on the animation event logic.

[0109] Step S302: After receiving the vertical synchronization signal, trigger the callback for animation event 1 and modify the view's properties based on the logic of animation event 1.

[0110] The application's UI thread receives vertical synchronization signals (Vsync-APP), such as vertical synchronization signal 1, vertical synchronization signal 2, and vertical synchronization signal 3 shown in Figure 3, and then sequentially processes input events (CALLBACK_INPUT), animation events (CALLBACK_ANIMATION), traversal events (CALLBACK_TRAVERSAL), and commitment events (CALLBACK_COMMIT).

[0111] In the process of handling animation events (for example, doCallbacks(CALLBACK_ANIMATION)), the application's UI thread modifies the view's properties based on the animation event's logic.

[0112] For example, in the interfaces shown in Figures 1A and 1B, the size of control 1A02 is expanded from a rectangle with width and height of 200px to a rectangle with width and height of 300px, for a duration of 20 frames. In this case, the size of control 1A02 needs to be modified frame by frame. Specifically, in the first frame of the animation, the view corresponding to control 1A02 is modified to a rectangle with width and height of 205px, and in the second frame of the animation, the view corresponding to control 1A02 is modified to a rectangle with width and height of 210px.

[0113] Step S303: Measure, lay out, draw, and record to generate a render tree.

[0114] Changes in view properties trigger UI threads that perform measurement, layout, drawing, and recording on the application interface. Measurement is used to determine the size of each view, layout is used to determine the layout of each view, and drawing and recording methods are used to determine one or more drawing operations for drawing the application's bitmaps and to store the drawing operations in the draw instruction list of the render tree.

[0115] Both input and animation events can affect the content of one or more views on the application interface. Therefore, the application's main thread must first process input and animation events, and then process traverse events. While the application's main thread processes traverse events, the application's UI thread measures, lays out, draws, and records on the application interface, determines the properties of each view, determines the rendering node corresponding to each view, and generates a render tree. A rendering node contains rendering properties and a display list.

[0116] A render tree is a data structure generated by the UI thread and used to generate the application interface. In other words, a render tree records all the information necessary to generate the interface for one frame of an application. A render tree may contain multiple rendering nodes, each rendering node containing rendering properties and a list of drawing instructions, the list of drawing instructions containing one or more drawing operations.

[0117] A drawing operation is a data structure used for drawing graphs, such as drawing lines, drawing variable-width objects, drawing rectangles, and drawing text. When a rendering thread is executed, the drawing operation is translated into API calls to image processing libraries, such as OpenGL interface calls. For example, DrawLineOp is a data structure. The data structure contains drawing data such as the length and width of the line, and may also contain the interface call corresponding to DrawLineOP in the underlying graphics processing library.

[0118] The drawing command list may be a buffer. The buffer records all drawing operations included in one frame of the application interface, or identifiers of all drawing operations, such as addresses and sequence numbers. When an application has multiple windows or is displayed in different display areas, multiple render trees need to be generated independently. Multiple drawing command lists corresponding to different windows and display areas are generated independently. In this embodiment of this application, the display area may be a display, a virtual display, or the like. The virtual display may be an area in which an electronic device holds content displayed on the display during screen recording.

[0119] Step S304: Receive the render tree and draw the bitmap based on the render tree.

[0120] The UI thread generates a render tree and transfers it to the rendering thread, which then generates a bitmap based on the render tree. The rendering thread acquires a Hardware Canvas and performs drawing operations on the Hardware Canvas relative to the render tree to generate the bitmap. The bitmap is then transferred to the Surface Flinger and Hardware Composer (HWC) for acquisition, and an interface for display is generated.

[0121] Unlike the method shown in Figure 3, another animation effect display method is provided according to one embodiment of this application, as shown in Figures 4A and 4B.

[0122] Figures 4A and 4B are schematic diagrams of an example of another animation effect display method according to one embodiment of this application.

[0123] As shown in Figures 4A and 4B, the animation effect display method may include five steps. Step S401: Create animation event 2. Step S402: After receiving the vertical synchronization signal, obtain descriptive information about the animation effect's termination interface (also called descriptive information about the termination frame) and descriptive information about the animation effect's duration from animation event 2. Step S403: Determine render tree 1 by measuring, laying out, and drawing on the animation effect's termination interface. Step S404: Receive render tree 1, descriptive information about the animation effect's termination interface, and a description of the animation effect's duration. S405: Update render tree 1 based on the descriptive information about the animation effect's termination interface and the descriptive information about the animation effect's duration, and generate a bitmap based on the updated render tree 1.

[0124] The UI thread must perform steps S401, S402, and S403. The rendering thread or rendering process must perform steps S404 and S405. For the first frame of the animation effect, the electronic device must perform steps S401, S402, S403, S404, and S405. For each frame during the duration of the animation effect, the electronic device must perform step S405. The rendering process may be an application-independent process.

[0125] Step S401: Create animation event 2.

[0126] The application's UI thread creates animation event 2 via the animation interface. See the following description in step S802 for a description of the animation interface. Further details are not provided here.

[0127] Unlike animation event 1, it is not possible to register a callback to the UI thread during the duration of the animation effect for animation event 2.

[0128] For information on creating animation event 2, see the text description in step S301. Further details are not provided here.

[0129] Step S402: After receiving the vertical synchronization signal, descriptive information regarding the animation effect termination interface and descriptive information regarding the animation effect duration are obtained from animation event 2.

[0130] Unlike step S302, the UI thread, after receiving vertical synchronization signals, for example, vertical synchronization signal 1, vertical synchronization signal 2, and vertical synchronization signal 3 in the figure, retrieves descriptive information about the animation effect's termination interface and descriptive information about the animation effect's duration from animation event 2. Additionally, the UI thread does not modify the view's properties and does not trigger step S303.

[0131] Optionally, in some embodiments of this application, the UI thread may obtain descriptive information regarding the step size of the animation effect and descriptive information regarding the duration of the animation effect from animation event 2. Alternatively, the UI thread may obtain descriptive information regarding the exit interface, descriptive information regarding the step size of the animation effect, etc., from animation event 2. This is not limited to the foregoing.

[0132] The UI thread may obtain the animation effect termination interface directly from animation event 2, or it may determine the animation effect termination interface indirectly from animation event 2.

[0133] S403: Measure, lay out, and draw on the animation effect termination interface to determine render tree 1.

[0134] The UI thread actively performs measurement, layout, drawing, and recording on the animation effect's termination interface, and also generates render tree 1. The UI thread synchronizes render tree 1, descriptive information about the animation effect's termination interface, and descriptive information about the animation effect's duration to the rendering thread.

[0135] Optionally, in some embodiments of this application, the UI thread synchronizes the render tree 1, descriptive information regarding the duration of the animation effect, and descriptive information regarding the step size of the animation effect with the rendering thread or rendering process.

[0136] Optionally, in some embodiments of this application, the UI thread synchronizes the render tree 1, descriptive information relating to the animation effect termination interface, and descriptive information relating to the animation effect step size with the rendering thread or rendering process.

[0137] Optionally, in some embodiments of this application, the UI thread synchronizes at least two of the following descriptive information to the rendering thread but not to the render tree 1: descriptive information relating to the animation effect termination interface, descriptive information relating to the animation effect step size, and descriptive information relating to the animation effect step size. In this case, in step S405, the rendering thread updates the render tree 0 based on the descriptive information relating to the animation effect termination interface and the descriptive information relating to the animation effect duration. The render tree 0 corresponds to the interface shown before the animation effect starts.

[0138] Optionally, in embodiments of the present invention, the UI thread may determine the properties of the view on the interface for each frame during the duration of the animation effect based on at least two of the descriptive information, including the descriptive information regarding the termination interface of the animation effect, the descriptive information regarding the step size of the animation effect, and the descriptive information regarding the step size of the animation effect, and further synchronize the property values ​​of the view on the interface for each frame during the duration of the animation effect and the render tree 1 with the rendering thread or rendering process.

[0139] Step S404: Receive render tree 1, descriptive information regarding the animation effect termination interface, and descriptive information regarding the animation effect duration.

[0140] The application's rendering thread may receive data sent by the UI thread via a message queue. The rendering process may receive data sent by the UI thread via inter-process communication. The rendering process may independently request and receive a vertical synchronization signal, and then request and obtain data from the UI thread.

[0141] S405: Based on the descriptive information regarding the animation effect termination interface and the descriptive information regarding the animation effect duration, update render tree 1 and generate a bitmap based on the updated render tree 1.

[0142] The application's rendering thread or rendering process determines which views will change properties based on descriptive information about the animation effect's termination interface and the interface shown before the animation effect began. The rendering thread determines the step size of the properties based on the duration of the animation effect, and further determines the properties of the views on the interface for each frame during the duration of the animation effect.

[0143] For the process of generating a single-frame interface in an animation effect, the application's rendering thread or rendering process first determines the frame rank in the animation effect, i.e., the specific frame number in the animation effect. Furthermore, the view properties on the frame interface, i.e., descriptive information about the frame's animation effect, may be determined.

[0144] The specific number of frames in an animation effect may be determined based on the frame duration, the frequency of the vertical synchronization signal, and the start time of the animation effect. The start time of the animation effect is the duration of the vertical synchronization signal corresponding to the interface of the first frame of the animation effect, for example, vertical synchronization signal 1 in Figures 4A and 4b. Alternatively, the start time of the animation effect may be the moment of the animation trigger event, etc. This is not limited herein.

[0145] The rendering thread may determine the view properties on the interface of each frame during the duration of the animation effect, and after receiving vertical synchronization signals, for example, vertical synchronization signals 2 and 3 in Figure 4B, update the parameters corresponding to the view properties in render tree 1 and generate a bitmap based on the updated render tree 1.

[0146] For each frame during the animation's duration, except for the first frame, only the application's rendering thread or rendering process needs to perform step S405 to draw the interface for each frame during the animation effect and to display the animation effect.

[0147] The execution of the UI thread and the rendering thread or rendering process may be triggered separately by different vertical synchronization signals. For example, the vertical synchronization signal received by the UI thread and the vertical synchronization signal received by the rendering thread may be vertical synchronization signals with the same period but different phases (fixed time difference).

[0148] Clearly, according to the animation effect display method shown in Figure 3, when the UI thread is blocked by another task, or when step S303 takes a relatively long time, the rendering thread cannot generate the bitmap before the vertical synchronization signal 2 arrives. A frame freeze or junk occurs. However, in the animation effect display method shown in Figures 4 and 4B, in the process of generating the interface for each frame other than the first frame during the animation duration, the rendering thread or rendering process mainly updates the render tree to generate the multi-frame interface for the animation duration, but the UI thread is not involved in this process, or the UI thread undertakes a relatively small amount of computation or task. When the UI thread is blocked by another task, a frame freeze or junk may not occur.

[0149] Additionally, in the animation effect display method shown in Figure 3, if there are multiple animation events, different animation effects will conflict with each other. In this case, only one animation effect will be displayed, resulting in the interface jumping. This is undesirable for the user experience.

[0150] The following explains, using examples, why multiple animation effects conflict with each other and the interface jumps that result from multiple animation effects.

[0151] (1.3) Animation effect competition

[0152] Figure 5 is a schematic diagram of an example of animation effect competition according to one embodiment of this application.

[0153] As shown in Figure 5, the process by which an electronic device performs the animation effect display method shown in Figure 3 includes the following steps.

[0154] S501: Create animation event 4

[0155] During the duration of animation effect 3, the UI thread creates animation event 4 in response to user input, another message, etc., and registers a callback corresponding to animation event 4 on the UI thread.

[0156] S502: After receiving the vertical synchronization signal, trigger the callbacks for animation event 3 and animation event 4, modify the view properties based on the logic of animation event 3, and then modify the view properties based on the logic of animation event 4.

[0157] After receiving vertical synchronization signal 1, the callbacks for animation event 3 and animation event 4 are triggered. The UI thread modifies the view properties separately based on the logic of animation event 3 and based on the logic of animation event 4. In this case, the logic of animation event 4 may override the modification of the view properties by animation event 3.

[0158] For example, a view modified by animation event 3 contains View 1, and a view modified by animation event 4 also contains View 1. Before modification, View 1 is a 20-pixel square. View 1 is modified to a 30-pixel square based on the logic of animation event 3, and View 1 is modified to a 15-pixel square based on the logic of animation event 4. The UI thread modifies the properties of the views separately based on the logic of animation event 3, and modifies the properties of View 1 based on the logic of animation event 4. View 1 ultimately becomes a 15-pixel square.

[0159] In this case, the UI thread is not actually executing the logic for animation event 3, and the animation effect corresponding to animation effect event 3 is not displayed correctly. As a result, the interface jumps. This interface jumps as shown in Figures 6A to 6F.

[0160] Next, steps S303 and S304 are performed. For details of steps S303 and S304, please refer to the above explanation corresponding to Figure 3. Further details will not be explained again here.

[0161] Figures 6A to 6F are schematic diagrams illustrating an example of interface changes in a multi-animation competition according to one embodiment of this application.

[0162] As shown in Figure 6A, the interface of a desktop application is displayed on the screen of the electronic device. The desktop application interface includes control 2A01. As a parent control, control 2A01 may further include several child controls, for example, control 2A02, control 2A03, and control 2A04.

[0163] Control 2A01 may be a folder or card within a desktop application. For example, in Figures 6 to 6E, Control 2A01 is Folder 1, Control 2A02 contains the icon for a game application, Control 2A03 contains the icon for a flashlight application, and Control 2A04 contains the icon for a gallery application.

[0164] The interface shown in Figure 6A may be considered the interface shown before animation effect 1 begins.

[0165] In response to the user tapping control 2A01, this interaction may trigger animation effect 1. Animation effect 1 is applied to controls 2A01, 2A02, 2A03, and 2A04, i.e., controls 2A01, 2A02, 2A03, and 2A04 are the animation objects of animation effect 1. Animation effect 1 gradually increases the size of the animation objects and moves their location toward the center of the interface.

[0166] As shown in Figure 6B, the size of control 2A02 gradually increases, for example, its height and / or width, and its position changes. The interface shown in Figure 6B includes the start interface for animation effect 1 and the intermediate interface for animation effect 1.

[0167] As shown in Figure 6C, as the size of control 2A02 increases continuously, the change in the interface displayed on the electronic device is a process in which the intermediate interface of animation effect 1 changes to the final interface of animation effect 1.

[0168] As shown in Figure 6D, before animation effect 1 ends, the user returns to the interface shown in Figure 6A by tapping a part of the desktop that does not belong to control 2A01 or by using another interaction method, such as the "back" interaction gesture. In this case, the interaction triggers animation effect 2. Animation effect 2 is applied to controls 2A01, 2A02, 2A03, and 2A04, i.e., controls 2A01, 2A02, 2A03, and 2A04 are the animated objects of animation effect 2. The effect of animation effect 2 is that the size of the animated objects gradually decreases and the location of the animated objects moves toward the location of control 2A01 in Figure 1A.

[0169] Animation Effect 1 has not yet finished, and Animation Effect 2 is in progress. The animated object to which Animation Effect 1 and Animation Effect 2 are applied intersects, and both Animation Effect 1 and Animation Effect 2 need to modify the size and location of the view corresponding to the animated object. Therefore, a conflict occurs between Animation Effect 1 and Animation Effect 2. In this case, the interface may change in two ways: the interface shown in Figure 6E and the interface shown in Figure 6F.

[0170] As shown in Figure 6E, in response to the user tapping a portion of the desktop that does not belong to control 2A01, or using another interaction method, such as a "back" interaction gesture, the intermediate interface of animation effect 1 is used as the starting interface for animation effect 2, and the modification of the view's properties begins based on the logic of animation effect 2. For example, it starts from the intermediate interface of animation effect 1 and transitions to the ending interface of animation effect 2.

[0171] Alternatively, as shown in Figure 6F, in response to the user tapping a portion of the desktop that does not belong to control 2A01, or using other interaction methods, such as a "back" interaction gesture, the change in the interface displayed by the electronic device is divided into two steps.

[0172] (1) In Figure 6F, the content displayed by the electronic device jumps directly from the intermediate interface of animation effect 1 to the ending interface of animation effect 1.

[0173] (2) In Figure 6F, in the next frame, the end interface of animation effect 1 is used as the start interface of animation effect 2, and based on the logic of animation effect 2, it gradually changes to the end interface of animation effect 2. Specifically, in Figure 6F, control 2A01 gradually shrinks until it changes to the size shown in Figure 6A, and the location of control 2A01 returns to the location of control 2A01 shown in Figure 6A.

[0174] Clearly, when multiple animation effects conflict, the interface changes either jump or the rate of change jumps. As a result, as shown in Figures 7A, 7B, and 7C, the interface changes are not continuous, which does not conform to the user's visual habits. This degrades the user experience.

[0175] Figures 7A, 7B, and 7C are schematic diagrams illustrating an example of view property modification in a multi-animation scenario according to one embodiment of this application.

[0176] As shown in Figure 7A, the estimated duration of animation effect 1 is T1 to T3, and the estimated duration of animation effect 2 is T2 to T4. T1 is less than T2, T2 is less than T3, and T3 is less than T4. The estimated duration is the period set by the application for the animation effect. Animation effect 1 increases the view height, and animation effect 2 decreases the view height.

[0177] As shown in Figure 7A, the view properties change as shown in Figure 7B or Figure 7C.

[0178] As shown in Figure 7B, from T1 to T2, the view properties change based on the logic of animation effect 1, for example, the view height increases linearly, and at T2, because animation effect 1 and animation effect 2 conflict, the view properties such as height jump. From T2 to T4, the view properties change based on the logic of animation effect 2, for example, the view height decreases linearly.

[0179] Clearly, at instant T2, the view's properties, such as height, jump at the transition point between animation effect 1 and animation effect 2.

[0180] As shown in Figure 7C, from T1 to T2, the view's properties change based on the logic of animation effect 1, for example, the view's height increases linearly. At T2, animation effect 1 and animation effect 2 conflict, so the view's properties begin to change based on the logic of animation effect 2, for example, the view's height decreases linearly.

[0181] Clearly, at moment T2, the view's properties, such as the height change rate, jump at the transition point between animation effect 1 and animation effect 2. In Figures 7B and 7C, the actual duration of animation effect 1 is T2 to T1. The duration of animation effect 2 is T2 to T4.

[0182] In addition to what is shown in Figures 7A, 7B, and C, if different types of animation effects conflict, the interface may display incorrectly or jump to a different location.

[0183] (2) Method for displaying animation effects provided in the embodiment of the present application

[0184] According to an animation effect display method provided in one embodiment of this application, this embodiment first provides an animation interface for implementing animation effects. The animation interface may be one or more functions, methods, and schemes. An application sets information such as control properties and animation effects through the animation interface, and so the animation framework provided in this application generates a corresponding animation interface based on that information. Information that can be set in the animation interface includes the end interface and duration of the animation effect, descriptive information regarding the step size of the animation effect and the duration of the animation effect, or descriptive information regarding the step size of the animation effect and the end interface of the animation effect. The animation interface helps reduce the workload of application developers. Additionally, application developers do not need to set the interface for each frame in the animation effect process, and the rendering thread or rendering process independently determines the interface for each frame in the animation effect process.

[0185] According to an animation effect display method provided in one embodiment of this application, in the process of displaying an animation effect, the properties of the view are not modified, but animation parameters in the rendering properties of the render tree are added and modified to draw the interface of each frame in the continuous process of the animation effect. Specifically, the animation parameters may be parameters used to update the render tree, and may include modified properties of controls on the interface of one frame in the animation effect process.

[0186] According to the animation effect display method provided in one embodiment of this application, in subsequent animation processing, only the parameters of the rendering properties of the render tree need to be modified, rather than the properties of the view. Therefore, the UI thread does not need to respond to animation events or perform measurement, layout, drawing, and recording. This helps to avoid junk. The rendering thread or rendering process is responsible for modifying the rendering properties of the render tree.

[0187] According to the animation effect display method provided in this embodiment of the application, if multiple animation effects ultimately conflict, the animation effect display method provided in this embodiment of the application may implement a continuous interface change (or a continuous interface change rate) to modify the display content based on the ending interface of the animation effect. This results in a smoother interface and an improved user experience.

[0188] The animation effect display method provided in one embodiment of this application will be described below with reference to an example.

[0189] (2.1) Process of displaying animation effects

[0190] Figure 8 is a schematic diagram of an example of the processing of an animation effect display method according to one embodiment of this application.

[0191] As shown in Figure 8, the procedure for displaying animation effects provided in this embodiment of this application includes the following steps:

[0192] S801: The application's UI thread creates animation events.

[0193] Animation events can be created at any moment and are related to the application's logic. For example, an animation event may be created after user input is received, after a message event sent to the application by another thread or process is received, or after network data requests an update. Animation events contain internal logic for implementing animation effects. For simplicity, a message that triggers the application's UI thread to create an animation event is called an animation trigger event.

[0194] In this embodiment of the application, after an animation event is created, a callback is registered once with the choreographer on the application's UI thread. This callback is used to trigger the application's UI thread to process the animation event when the first vertical synchronization signal arrives after the animation event has been created.

[0195] To distinguish between the animation events in the methods shown in Figures 3, 4A, and 4B, the animation events in the method shown in Figure 3 are non-implicit animations, while the animation events in Figures 4A and 4B are implicit animations. Animation events created by application developers through the animation interface provided in this embodiment are implicit animations.

[0196] To facilitate comparison and explanation of the contents of Figures 3, 4A, and 4B, please note that animation events will simply be referred to as implicit animations and non-implicit animations. This does not impose any limitations on animation events created through the animation interface in this embodiment of the application.

[0197] Optionally, in some embodiments of this application, implicit animations may be converted to non-implicit animations. The conversion may occur during the initial installation or startup of the application, or it may occur during the compilation process, but is not limited herein.

[0198] For example, non-implicit animations determine the animation object, the vertical sync signal callback for each frame, the modification of view properties, and the animation termination conditions. The vertical sync signal callback for each frame is used to always trigger the UI thread to process the animation event when the animation does not meet the termination conditions. In this case, the process of converting an animation event into an implicit animation may include the following two steps:

[0199] Initially, the callback for the vertical sync signal of each frame of the non-implicit animation is blocked or intercepted, and therefore the non-implicit animation does not modify any view properties, nor does it trigger the application's UI thread to perform measurement, layout, drawing, and recording.

[0200] Next, the parameters required for the implicit animation are determined. For example, the animation's end interface and duration are determined by modifying the time information of the vertical synchronization signal (Vsync-APP). Alternatively, in some non-implicit animations, the animation object, the step size of each property of each animation object, the animation duration, the animation's end interface, etc., may be determined directly.

[0201] S802: After the application's UI thread receives the vertical synchronization signal, it determines the animation effect's termination interface and duration from the animation event.

[0202] The application's UI thread processes animation events after receiving a vertical synchronization signal. Animation events are set by animation interfaces. The format of an animation interface is as follows: animation interface name (duration, descriptive information about the end interface), animation interface name (duration, change curve, descriptive information about the end interface), animation interface name (descriptive information about the step size, descriptive information about the end interface), animation interface name (duration, descriptive information about the end interface), etc., but this is not limited to this specification.

[0203] In addition to the view's location, size, and transparency, the description of the ending interface may also include a theme (style). The description of the ending interface may also be an increment compared to the interface shown before the animation effect began, for example, an increase in width in View 1.

[0204] The descriptive information regarding the step size may include changes in the properties of the interface controls currently being rendered, compared to the properties of the interface controls in the previous frame.

[0205] If the format of the animation interface is the name of the animation interface (duration, transition curve, and final interface), the animation interface may also be as follows:

number

[0206] `animateTo` is the name of the animation interface. `duration:3000` indicates a duration of 3000ms, and `cure:Curve.Linear` indicates a linear curve. `view1.Height=800 view1.Width=400` indicates that view1 on the animation's ending interface has a height of 800 and a width of 400, i.e., it is descriptive information about the animation's ending frame.

[0207] An animation interface is one or more functions and methods provided to a system. An application developer may set animation effects for controls on the interface and set information about the animation effects by calling the animation interface. This information includes the duration of the animation effect, descriptive information about the end frame of the animation effect, and so on.

[0208] In the process of running the application, after receiving an animation trigger event, the application may provide information about the animation effect to the system via an animation interface, and the system may, based on that information, generate an interface for each frame in the animation process.

[0209] In this format, the electronic device may determine the animation object based on the difference between the animation termination interface and the interface shown before the animation begins.

[0210] Note that animation events may only be registered once with the choreographer on the UI thread.

[0211] S803: The application's rendering process or rendering thread updates the render tree based on the animation effect's termination interface and duration, and generates a bitmap based on the updated render tree.

[0212] The UI thread may, after determining the animation effect's termination interface and duration, transfer the animation effect's termination interface and duration to the application's rendering process or rendering thread. In this case, the application's rendering process or rendering thread may determine the view properties on the interface for each frame during the animation effect's duration, directly update the render tree, and generate bitmaps based on the updated render tree.

[0213] In the process of generating a single-frame interface, the application's rendering process or rendering thread needs to determine the current frame number in the animation effect and, further, determine the view properties on the frame's interface. The application's rendering process or rendering thread may determine the current frame number in the animation effect in multiple ways, such as using the number of vertical sync signals received, the moment of the vertical sync signal, etc. This is not limited to the methods described herein. The current frame number in the animation effect may also be called the frame rank in the animation effect. In other words, descriptive information about a frame includes the view properties on the frame's interface.

[0214] The interface displayed by an application is formed by nesting multiple views, and different views have parent-child relationships. Therefore, the parent-child relationships between rendering nodes generated by traversing the view's render tree are the same as the parent-child relationships between the views. In other words, the parent-child relationships between views determine the nesting relationships between rendering nodes, so that the rendering thread can correctly render the application interface when generating bitmaps based on the render tree.

[0215] A single view may correspond to one or more rendering nodes. The root view (DecorView) corresponds to the root rendering node (Root Render Node). In other words, the nesting relationships between rendering nodes correspond to the parent-child relationships between views.

[0216] For example, the structure of the application interface is as follows: The root view is carried by the application's PhoneWindow, the subviews of the root view are View 1 and View 2, and the subview of View 2 is View 3. In this case, the structure of the render tree generated by the application's UI thread is as follows: The root rendering node corresponding to PhoneWindow is the root node of the render tree, the child node of the root rendering node is rendering node 0 corresponding to the root view, the child nodes of rendering node 0 are rendering node 1 corresponding to View 1 and rendering node 2 corresponding to View 2, and the child node of rendering node 2 is rendering node 3 corresponding to View 3. The correspondence between views and rendering nodes means that the rendering node includes all drawing operations performed in the corresponding view. A single view may correspond to one or more rendering nodes.

[0217] Referring to the contents shown in Figures 9 and 10, a method for determining the view properties on the interface of each frame during the duration of the animation effect will be explained using an example. The view properties on the interface of one frame are sometimes referred to as descriptive information about the interface of one frame.

[0218] Figure 9 is a schematic diagram of an example of determining an animation object according to one embodiment of this application.

[0219] As shown in Figure 9, the application interface has View 1, View 2, and View 3, and the horizontal spacing (horizontal in the width direction of the views) between View 1, View 2, and View 3 is fixed.

[0220] When View 2 has an animation effect set to change its width from B1 to B2, B2 is greater than B1 and greater than 0. Clearly, View 2 is an animation object for non-implicit animation. However, if we compare the interface shown before the animation effect starts with the interface at the end of the animation effect, the position of View 3 changes due to the change in View 2's width. Therefore, in the method shown in Figure 3, after modifying the view properties based on the logic of non-implicit animation, the application's UI thread needs to perform measurement, layout, drawing, and recording to ensure the accuracy of the post-animation interface.

[0221] Clearly, in the method shown in Figure 9, the properties of View 2 and View 3 change compared to the methods shown in Figures 4A, 4B, and 8, so the animation objects may be determined to be View 2 and View 3.

[0222] Optionally, in some embodiments of this application, an animated object changes only on the intermediate interface of the animation effect and not on the ending interface of the animation or on the interface shown before the animation begins. The UI thread of the application may determine that the set of changed views for each frame in the animation process is an animated object by adjusting the time information of the vertical synchronization signal.

[0223] Figure 10 is a schematic diagram illustrating an example of determining the properties of the view on the interface of each frame according to one embodiment of this application.

[0224] As shown in Figure 10, an animation event is an implicit animation, and it has an interface that is shown before the animation starts and an interface that ends the animation. The application's main thread and rendering thread or rendering process may compare the interface shown before the animation starts with the interface that ends the animation to determine that the changed control is an animation object associated with the animation. For example, the animation object includes control 2A01.

[0225] The location of control 2A01 changes from (x0, y0) to (x1, y1), meaning that control 2A01 is an animated object associated with an animation event. Additionally, the height / width of control 2A01 changes by S times its original height / width, and the animation duration is 30 frames. Furthermore, the location and size of control 2A01 on the interface for each frame may be further determined. The Qth frame of control 2A01 (where Q is calculated from the interface shown before the animation begins) is (x0 + Q*δX, y0 + Q*δY), where δX = (x1 - x0) / 30 and δY = (y1 - y0) / 30.

[0226] The animation parameter values ​​for each frame are (x0 + Q*δX, y0 + Q*δY). Descriptive information regarding the step size of the animation parameter may be δX = (x1 - x0) / 30, δY = (y1 - y0) / 30. Specifically, the animation parameter is information used to determine the properties of the view on the interface of one frame in the animation effect, such as the descriptive information regarding the termination interface of the aforementioned animation effect, and the descriptive information regarding the duration of the aforementioned animation effect. Alternatively, the animation parameter is information regarding the properties of the view on the interface of one frame in the animation effect.

[0227] In the following explanation, for the sake of clarity, animation parameters are used to represent or determine the properties of a view on a single-frame interface. In other words, animation parameters are parameters that represent descriptive information about a single-frame interface, or parameters that are used to determine descriptive information about a single-frame interface.

[0228] The process described above determines animation parameters in a single animation event. The following primarily describes the process of determining animation parameters in multiple animation events.

[0229] Optionally, in some embodiments of this application, if the animation parameters of an animated object are modified by multiple animation events, step S1002 performs vector superposition based on the animation parameters determined independently by each animation event in order to determine the final animation parameters used to update the render tree.

[0230] Optionally, in some embodiments of this application, if the animation parameters of an animated object are modified by multiple animation effects, for example, if the animation parameters of an animated object are modified by animation effect 1 and animation effect 2 (where animation effect 2 occurs during the duration of animation effect 1), then animation effect 3 is generated based on animation effect 1 and animation event 2, and the amount of modification to the animation parameters is determined based on the logic of animation effect 3. The logic of animation effect 3 is determined by the logic of animation effect 1 and the effect of animation event 2.

[0231] Animation Effect 3 modifies the animation parameters so that the view properties remain continuous throughout the duration of the animation effect, or furthermore, the animation parameters are first-order differentiable, or furthermore, the animation parameters are second-order differentiable, and so on. The duration of Animation Effect 3 may be the intersection of the duration of Animation Effect 1 and the duration of Animation Effect 2, or it may be from the start of the intersection of Animation Effect 1 and Animation Effect 2 to the end of Animation Effect 1 or the end of Animation Effect 2.

[0232] Furthermore, since the animation effect termination interface and the interface shown before the animation effect begins are known, an interpolator may be used to determine the view properties of each frame during the duration of the animation effect, so that the view properties of each frame are continuous with respect to time, first differentiable, and second differentiable.

[0233] Animation parameters may be determined by the rendering thread or rendering process. Alternatively, animation parameters may be determined by the UI thread, and the values ​​of the animation parameters for each frame are transferred to the rendering thread or rendering process. Data used for communication between the UI thread and the rendering thread, data used to hold changes in animation parameters, or data used to hold a final interface for calculating changes in animation parameters may be called a staging render tree.

[0234] The process of determining animation parameters in a multi-animation scenario will be explained below using an example, with reference to the contents shown in Figure 11.

[0235] Figures 11A to 11D are schematic diagrams illustrating an example of animation parameter changes according to one embodiment of this application.

[0236] For the content shown in Figure 11A, please refer to the content shown in Figure 7A. Further details will not be explained again here.

[0237] As shown in Figure 11B, at T2, the application receives an animation trigger event corresponding to animation effect 2, determines that animation effect 2 involves modifying the view height, and generates animation effect 3 to smooth the transition point between animation effect 1 and animation effect 2.

[0238] The duration of animation effect 3 is the intersection of the durations of animation effect 1 and animation effect 2, i.e., T2 to T3. The start and end interfaces of animation effect 3 are known. Therefore, animation effect 3 is used as an animation effect that connects animation effect 1 and animation effect 2, and by modifying the view properties, the view properties can be made continuous, first-order differentiable, or second-order differentiable between T2 and T3. The animation effect from T2 to T3 is sometimes called a transition process.

[0239] As shown in Figure 11C, at T2, the application receives an animation trigger event corresponding to animation effect 2, determines that animation effect 2 involves height correction, and generates animation effect 3 to smooth the transition point between animation 1 and animation 2.

[0240] The duration of animation effect 3 is T2 to T4. The start interface of animation effect 3 is the interface corresponding to animation effect 1 at T2, and the end interface of animation effect 3 is the end interface of animation effect 2. Therefore, animation effect 3 is used as an animation effect that connects animation effect 1 and animation effect 2, and by modifying the view properties, the view properties can be made continuous, or first-order differentiable, or second-order differentiable between T2 and T4.

[0241] As shown in Figure 11D, at T2, the application receives an animation trigger event corresponding to animation effect 2, determines that animation effect 2 involves height correction, and generates animation effect 3 to smooth the transition point between animation 1 and animation 2.

[0242] The duration of animation effect 3 is T3 to T4. The start interface of animation effect 3 is the end interface of animation effect 1, and the end interface of animation effect 3 is the end interface of animation effect 2. Therefore, animation effect 3 is used as an animation effect that connects animation effect 1 and animation effect 2, and by modifying the view properties, the view properties can be made continuous, or first-order differentiable, or second-order differentiable between T3 and T4.

[0243] The application interface changes will be explained below with reference to the animation parameter changes shown in Figure 11B. The application interface changes are shown in Figures 12A and 12B.

[0244] Figures 12A and 12B are schematic diagrams illustrating an example of interface changes in a multi-animation scenario according to one embodiment of this application.

[0245] Figures 6A to 6D and 12A to 12B are a group of schematic diagrams showing examples of interface changes after an electronic device has executed an animation effect display method according to one embodiment of this application.

[0246] Figures 6A and 6D have been described above in correspondence and will not be explained again here.

[0247] As shown in Figure 12A, after a user taps a part of the desktop that does not belong to control 2A01, or receives a dialogue in a different dialogue mode using, for example, a "back" dialogue gesture, the zoom and movement speed of control 2A01 slows down, which corresponds to "slowing down zoom speed" in Figure 7B.

[0248] The animation parameters actually change discretely. Therefore, in some embodiments of this application, the "stopping change" in Figure 7B does not occur, at will.

[0249] Between T3 and T4, the expansion speed of control 2A01 slows down, and then the contraction of control 2A01 begins. Figure 12B shows the contraction process of control 2A01, and is labeled "Increase contraction speed," where the speed of control 2A01 continuously increases until the speed stops changing.

[0250] The change in control 2A01 may be the same as the change in its child controls.

[0251] The display processes "Zoom in at the same rate as shrinking" in Figure 12A and "Up, then shrink at the same rate as shrinking" in Figure 12(b) are transition processes.

[0252] The interface changes shown in Figures 6A-6D, 12A, and 12B are continuous and can be understood as being first-order differentiable. This allows for the implementation of a smoother interface and improves the user experience.

[0253] There are many ways to implement step S803. Below, we will describe one embodiment of implementing step S803, using steps S8031, S8032, and S8033 as examples.

[0254] S8031: The application's UI thread measures, lays out, draws and records on the animation effect's final interface, and generates the first render tree.

[0255] The application's UI thread actively performs measurement, layout, drawing, and recording on the animation effect's termination interface, generating a first render tree. The interface corresponding to the first render tree is the termination interface.

[0256] S8032: The rendering process, the application's UI thread, or the application's rendering thread determines the animation parameters corresponding to the interface of each frame during the duration of the animation effect, based on the animation effect's termination interface and the animation effect's duration.

[0257] The rendering process, the application's UI thread, or the application's rendering thread determines the animation parameters in the render tree corresponding to the interface for each frame during the animation effect's duration, based on the animation effect's end interface, duration, and start time. The animation parameters may reside in the render tree's rendering properties and are used to modify how the view on the interface is displayed.

[0258] Optionally, in some embodiments of this application, animation parameters may replace animation effects that can only be implemented by modifying the draw command list. In this case, the draw command list does not need to be changed during the duration of the animation effect, and the UI thread does not need to perform measurement, layout, and drawing and recording to update the render tree.

[0259] The added animation parameters are width (BOUD_WIDTH), height (BOUNDS_HEIGHT), position (BOUNDS_POSITION), pivot (PIVOT), roundcorner (Roundcorner), 2D transformation (TRANSLATE), and 3D Includes Transform (ROTATION_3D), Z coordinate (POSITION_Z), background color (BACKGROUND_COLOR), foreground color (FOREGROUND_COLOR), border color (BORDER_COLOR), border width (BORDER_WIDTH), transparency (ALPHA), content rectangle (FRAME_WIDTH and FRAME_HEIGHT), content adaptive mode (Gravity), background filter (BACKGROUND_FILTER), content filter (CONTENT_FILTER), and background and content filter (Filter), shadow color (SHADOW_COLOR), shadow offset (SHADOW_OFFSET_X and SHADOW_OFFSET_Y), shadow transparency (SHADOW_ALPHA), shadow radius (SHADOW_RADIUS), shadow path (SHADOW_PATH), and mask (MASK).

[0260] Optionally, in some embodiments of this application, step S8032 may be performed by a UI thread.

[0261] Animation parameters are located in the rendering properties of the render tree and directly affect how the view is displayed on the interface. Therefore, animation parameters may be continuous, or first-order differentiable, or second-order differentiable, and thus the view properties are continuous, or first-order differentiable, or second-order differentiable in the animation process. For information on determining animation parameters, see the preceding text descriptions corresponding to Figures 9 and 10. Further details are not provided here.

[0262] The interface can be changed by modifying animation parameters, and the application's UI thread does not need to perform measurement, layout, drawing, or recording. Therefore, in the animation process, the application's UI thread does not need to handle animation-related operations such as handling animation events, updating view properties, measurement, layout, drawing, or recording. For details on the division of labor between the UI thread, the rendering thread, and the rendering process, see the procedure for determining the animation parameter data in (a) below. Further details are not provided here.

[0263] In the animation process, the application's UI thread and the rendering thread are independent of each other in the animation implementation process. Therefore, after the application's UI thread receives the vertical synchronization signal (Vsync-APP), it notifies the rendering thread to update the animation parameters, or the rendering process independently requests the vertical synchronization signal (Vsync-Render), and the frequency of the vertical synchronization signal (Vsync-Render) may be different from the frequency of the vertical synchronization signal (Vsync-APP), or regarding the opportunity for the rendering thread or the rendering process to start updating the animation parameters, refer to the content of the opportunity for the rendering thread or the rendering process to update the animation parameters in the following (b). Details are not described again here. To distinguish the vertical synchronization signals received by different threads or processes, the vertical synchronization signal (Vsync-APP) signal is used to represent the vertical synchronization signal received by the UI thread, and the vertical synchronization signal (Vsync-Render) signal is used to represent the vertical synchronization signal received by the rendering thread or the rendering process.

[0264] Hereinafter, (a) the opportunity for the rendering thread or the rendering process to update the render tree and (b) the modification of the drawing command list will be described separately.

[0265] (a) The opportunity for the rendering thread or the rendering process to update the render tree

[0266] FIG. 13A, FIG. 13B, and FIG. 13C are schematic diagrams of an example of the opportunity for the rendering thread or the rendering process to update the render tree according to an embodiment of this application.

[0267] The opportunity for the rendering thread or the rendering process to update the render tree may be shown in FIG. 13A, FIG. 13B, and FIG. 13C.

[0268] As shown in FIG. 13A, first, after receiving the vertical synchronization signal (Vsync-APP), the UI thread processes an animation event (step S1301). Next, the UI thread determines the final interface of the animation effect and the duration of the animation effect (step S1302). Next, the UI thread transmits the final interface of the animation effect and the duration of the animation effect (step S1303). Finally, the rendering process or the rendering thread of the application updates the render tree (step S1304).

[0269] As shown in FIG. 13B, first, the UI thread receives the vertical synchronization signal (Vsync-APP) (step S1305), then the UI thread transfers the vertical synchronization signal or another parameter indicating a trigger opportunity (step S1306), and finally, the rendering process or the rendering thread of the application updates the render tree (S1304).

[0270] As shown in FIG. 13C, the rendering process or the rendering thread of the application receives the vertical synchronization signal (Vsync-Render) (step S1307), and then the rendering process or the rendering thread of the application updates the render tree (S1304).

[0271] In the process of generating the interface of the first frame of the animation effect, the opportunity for the rendering thread or the rendering process to update the render tree may be shown in FIG. 13A. In the process of generating the interface of a frame that is not the first frame of the animation effect, the opportunity for the rendering thread or the rendering process to update the render tree may be shown in FIG. 13A, FIG. 13B, or FIG. 13C.

[0272] Note that when an application's UI thread transfers data to the rendering process, data exchange must be completed via Inter-Process Communication (IPC). Applications may implement IPC communication via Binder, AIDL, shared memory, sockets, etc., but are not limited to these specifications.

[0273] Figure 14 is a schematic diagram of another example of an opportunity for a rendering thread to update animation parameters, according to one embodiment of this application.

[0274] As shown in Figure 14, in the animation process, the rendering thread may independently request a vertical synchronization signal (Vsync-APP). In the T-Delay that receives the vertical synchronization signal (Vsync-APP), the UI thread does not forward information about the render tree update to the rendering thread for blocking or other reasons. After the T-Delay, the rendering thread begins updating the render tree and generates the interface. In the T-Delay that receives the vertical synchronization signal (Vsync-APP), the UI thread may process input events or other logic (which does not necessarily include processing animation events) and forward information about the render tree update to the rendering thread. After receiving information about the render tree update, the rendering thread updates the render tree and generates the interface.

[0275] It will be understood that a single delay (T-Delay) is set for the rendering thread to help implement animations and quickly generate interfaces that change due to non-animation logic.

[0276] The value of T-Delay may be less than or greater than the period of the vertical synchronization signal.

[0277] Optionally, in some embodiments of this application, the rendering thread may delay one or more vertical sync signals (Vsync-APP) after the UI thread when updating animation parameters and generating the interface. In this case, it will be understood that the start of the animation may be delayed when the rendering thread delays one or more vertical sync signals (Vsync-APP) after the UI thread when updating animation parameters. However, this helps to increase the maximum processing duration for generating a single-frame interface and reduce the probability of junk.

[0278] The opportunities for the rendering process to update animation parameters are different from the opportunities for the rendering thread to update animation parameters. The rendering process independently requests a vertical synchronization (Vsync-Render) signal. The frequencies and timings of the vertical synchronization (Vsync-Render) signal and the vertical synchronization (Vsync-APP) signal may be the same or different.

[0279] (b) Modification of the drawing instruction list

[0280] Optionally, in some embodiments of this application, if the list of draw commands for an interface shown before the animation effect begins differs from the list of draw commands for the ending interface of the animation effect, the interface is generated by modifying the animation parameters of the render tree, using the render tree corresponding to the ending interface of the animation effect as a reference, from the start of the interface in the first frame of the animation effect to the ending interface of the animation effect. This is an animation effect process in which the list of draw commands is not modified as in (i) below.

[0281] Optionally, in some embodiments of this application, if the list of draw commands for an interface shown before the animation effect begins differs from the list of draw commands for the ending interface of the animation effect, the interface is generated by modifying the animation parameters of the render tree, using the render tree corresponding to the interface shown before the animation effect as a reference, from the start of the interface in the first frame of the animation effect to the ending interface of the animation effect. This is an animation effect process in which the list of draw commands is not modified as in (i) below.

[0282] Optionally, in some embodiments of this application, if the draw command list of an interface shown before the animation effect starts differs from the draw command list of the ending interface of the animation effect, the rendering thread or rendering process may modify the draw operations in the draw command list and the animation effect parameters in the render tree to generate the interface. This is an animation effect process in which the draw command list is modified as follows:

[0283] In some embodiments of this application, when the application interface includes a text view or an image view, the list of drawing instructions for the interface shown before the animation effect starts may differ from the list of drawing instructions for the interface at the end of the animation effect.

[0284] (i) Animation effect processes in which the drawing command list is not modified

[0285] The drawing content of the end interface of the animation effect is different from the drawing content of the interface displayed before the animation effect is started. As a result, the drawing instruction list is different. In the animation effect display method provided in an embodiment of this application, as shown in FIGS. 15A and 15B, the drawing instruction list of the render tree of the final interface is used as a reference, and the animation parameters are modified to update the render tree to generate an interface.

[0286] FIGS. 15A and 15B are schematic diagrams of an example of an animation effect process according to an embodiment of this application.

[0287] As shown in FIG. 15A, before the animation effect is started, the interface includes a control 1501, and the control 1501 holds the text "input an account". In this case, the control may include a text view 1 and a rectangular view. The text view 1 holds the text "input an account", and the size of the text view 1 is the same as the size of the control 1501.

[0288] The drawing operation corresponding to the text view 1 in the drawing instruction list is drawText(input an account).

[0289] After the animation effect is set for the control 1501, on the end interface of the animation effect, the width of the control 1501 becomes shorter, the text "input an account" becomes two lines, the first line is "input", and the second line is "an account". In other words, the control 1501 includes a text view 1, and the text view 1 holds "input" and "account".

[0290] The drawing operations corresponding to TextView1 in the drawing command list are drawText(enter) and drawText(account).

[0291] For the drawing command list, the UI thread needs to perform real-time measurement, layout, drawing, and recording on the interface. Therefore, to avoid updating the drawing command list during the animation effect process, the interface's render tree is updated and generated using the render tree corresponding to the ending interface as an animation effect parameter, from the start of the interface at the first frame of the animation effect to the ending interface of the animation effect, as specifically shown in Figure 15B.

[0292] As shown in Figure 15B, even if the width of control 1501 is robust enough to fit the text "input an account" on one line during the duration of the animation effect, "input an account" is still presented on two lines: "input" and "an account". In this case, during the duration of the animation effect, the rendering node corresponding to control 1501 is rendering node 2, and the drawing operation included in the drawing instruction list of rendering node 2 is "drawText(enter) and drawText(an account)".

[0293] Specifically, during the animation effect process, the drawing command list does not change, and the rendering thread or rendering process modifies the animation effect parameters to generate the interface shown in Figure 15B, where the width of control 1501 gradually decreases and the text is always displayed on two lines.

[0294] (ii) Animation effect process in which the drawing command list is modified

[0295] The content drawn at the end of the animation effect interface differs from the content drawn at the interface displayed before the animation effect starts. As a result, the drawing command list is different. According to the animation effect display method provided in one embodiment of this application, as shown in Figures 16A and 16B, in the process of generating the interface, the drawing operations in the drawing command list are continuously modified, the animation effect parameters are modified, and the interface is generated.

[0296] Figures 16A, 16B, 16C, 16D, and 16E are schematic diagrams of an example of an animation effect process according to one embodiment of this application.

[0297] As shown in Figure 16A, the interface shown before the animation effect begins includes a control 1601, which holds picture 1. Control 1601 may also be a single image view.

[0298] The drawing operation corresponding to displaying picture 1 on control 1601 is drawBitmap(picture 1, src, dst 1) in the drawing command list. picture 1 is the source image, scr indicates the area to be displayed on the source image, and dst 1 indicates the area where the scr of picture 1 will be drawn on control 1601.

[0299] After an animation effect is set on control 1601, the width of control 1601 decreases on the animation effect's termination interface, and the width of image view 1 decreases proportionally. The drawing operation corresponding to image view 1 in the drawing command list is drawBitmap(picture 1, src, dst N).

[0300] For example, dst 1 = Rect(10, 20, 150, 200). (10, 20) represents the coordinates of the top-left corner of the rectangle, and (150, 100) represents the coordinates of the bottom-right corner of the rectangle, so dst N = Rect(10, 20, 150, 100).

[0301] In the animation effects process, the rendering thread or rendering process updates the drawing behavior corresponding to control 1601 to implement the interface shown in Figure 16B.

[0302] As shown in Figure 16B, in the animation effect process, the rendering thread or rendering process modifies the drawing behavior and animation effect parameters in the render tree frame by frame, thereby continuously decreasing the width of image view 1 in the animation effect process. The rendering thread or rendering process modifies the drawing behavior of, for example, drawBitmap(picture 1, src, dst 2), ..., drawBitmap(picture 1, src, dst N).

[0303] Rendering policies affect how rendering threads or rendering processes modify drawing behavior. Picture processing policies may include, but are not limited to, CENTER (pictures are displayed in the center, and if the picture size exceeds the size of the view that holds the picture, the picture is cropped), CENTER_INSIDE (picture size is adjusted proportionally so that the picture is complete and displayed in the center of the view that holds it), FIT_CENTER (picture size is adjusted proportionally so that the picture is not larger than the size of the view that holds and displays the picture in the center), FIT_END (picture size is adjusted proportionally so that the picture is not larger than the size of the view that holds and displays the picture at the bottom), FIT_START (picture size is adjusted proportionally so that the picture is not larger than the size of the view that holds and displays the picture at the top), FIT_XY (picture size is not adjusted proportionally so that the picture is not larger than the size of the view that holds the picture), etc.

[0304] CENTER, CENTER_INSIDE, FIT_CENTER, FIT_END, FIT_START, and FIT_XY may be modified by modifying the parameters dst and src in the drawing operation drawBitmap.

[0305] As shown in Figures 16C and 16D, the drawing behavior in the drawing command list is modified to scale or crop the picture held on the control to adapt to changes in the control's size.

[0306] As shown in Figure 16C, control 1602 holds image 1. When the size of the control decreases, the picture may be scaled based on the rate of change of the control's size, for example, CENTER_INSIDE as described above.

[0307] Alternatively, as shown in Figure 16D, when the size of the control decreases, the picture may be cropped based on the rate of change in the size of the control. Alternatively, as shown in Figure 16E, when the size of the control increases, image 1 may first be enlarged to the size of the animation effect's end interface, and then cropped based on the size of the control to implement the animation effect shown in Figure 16E.

[0308] In conclusion, a rendering thread or rendering process may implement continuous interface changes by cropping images or other content held in a control, thereby modifying the drawing behavior in the drawing instruction list based on changes in the control's size.

[0309] S8033: The rendering process or rendering thread of an application updates the render tree based on animation parameters and generates a bitmap based on the updated render tree.

[0310] A rendering thread or rendering process may, after obtaining a render tree with updated animation parameters, traverse the render tree, traverse the drawing operations in the list of drawing instructions on the canvas, and execute them. For each drawing operation, the rendering thread or rendering process may refer to the rendering properties of the rendering node and adjust the parameters of the drawing operation or the graphics processing library calls corresponding to the drawing operation to generate a bitmap.

[0311] In some embodiments of this application, the rendering process or rendering thread may invoke the GPU to draw and generate the bitmap. Alternatively, in some embodiments of this application, the rendering process or rendering thread may invoke the CPU to draw and generate the bitmap.

[0312] The bitmap is obtained through the rendering process or a surface synthesizer (SurfaceFlinger), and the interface is generated after layer compositing.

[0313] S804: Optionally, the application's rendering process or rendering thread synchronizes the view's properties with the application's UI thread.

[0314] After the interface is generated, the UI thread does not perceive the actual location and size of the controls on the interface during the animation process. Therefore, optionally, in some embodiments of this application, a rendering thread or rendering process may transmit the location and size of the controls to the UI thread of the application. The location and size of the controls may be transmitted using a data structure such as a render tree, which is not limited herein.

[0315] Figure 17 is a schematic diagram illustrating an example of determining view properties using UI thread data according to one embodiment of this application.

[0316] As shown in Figure 17, determining view properties using UI thread data involves the following steps:

[0317] S1701: Determines and transfers the information used to update the render tree.

[0318] The application's UI thread may, after determining the information to be used to update the render tree, transfer the information to be used to update the render tree, such as the animation parameters of the interface's render tree for each frame during the duration of the animation effect, to the application's rendering process or rendering thread.

[0319] For the first frame of an animation effect, the application's UI thread transfers information to the rendering thread or rendering process that will be used to update animation parameters such as the animation effect's duration, animation object, and animation effect termination interface.

[0320] In the process of displaying animation effects other than the first frame of the animation, the application's UI thread does not need to transfer information used to update animation parameters to the rendering thread or rendering process.

[0321] In the process of displaying animation effects other than the first frame of the animation, the application's UI thread may forward the render tree, which has been modified by input events or logic (excluding animation events) from other UI threads, to the rendering thread or rendering process.

[0322] S1702: Determine and transfer the properties of the view.

[0323] In the process of displaying animation effects, the rendering thread or rendering process determines view properties such as size and location based on the render tree, and transfers the view's size and properties to the application's UI thread, so that the application's UI thread can determine the view's size and location.

[0324] Optionally, in some embodiments of this application, a rendering thread or rendering process may, in response to a request from the application's UI thread, transfer the location and size of a view, as well as other properties, to the application's UI thread.

[0325] In the process of displaying animation effects, the application's UI thread does not need to measure, lay out, and draw to determine the view's properties. This reduces the load on the application's UI thread.

[0326] Finally, using the contents shown in Figures 18A, 18B, and 18C as an example, the differences between the two animation effect display methods shown in Figures 3, 4A, and 4B will be explained below.

[0327] Figure 18A is a schematic diagram of an example of a render tree change in the process of performing the method shown in Figure 3, according to one embodiment of this application.

[0328] As shown in Figure 18A, before animation effect 1 starts, the rendering thread of the application has render tree 1 stored, and control 1A01 in the application interface is a 20px square.

[0329] After animation effect 1 starts, the application's UI thread receives vertical synchronization signal 1, determines that the size of control 1A01 on the interface of the first frame of animation effect 1 is 25px*25px, generates render tree 2 corresponding to the interface of the first frame of animation effect 1, and synchronizes render tree 2 to the application's rendering thread. Based on render tree 2, the rendering thread generates a bitmap, in which the size of control 1A01 is 25px*25px.

[0330] Next, after receiving the vertical synchronization signal 2, the UI thread determines that the size of control 1A01 on the interface of the first frame of animation effect 1 is 30px*30px, generates a render tree 3 corresponding to the interface of the second frame of animation effect 1, and synchronizes the render tree 3 to the application's rendering thread. The rendering thread generates a bitmap based on the render tree 2, and the size of control 1A01 in the bitmap is 30px*30px.

[0331] Figures 18B and 18C are schematic diagrams of an example of a render tree change in the process of performing the method shown in Figures 4A and 4B, according to one embodiment of this application.

[0332] As shown in Figure 18B, before the animation effect, the rendering thread of the application has render tree 1 stored, and control 1A01 in the application interface is a 20px square.

[0333] After animation effect 1 starts, the application's UI thread receives vertical synchronization signal 1, and the logic of animation effect 1 determines that control 1A01 will expand by 5px per frame, eventually changing to 100px*px. Based on the ending interface of animation effect 1, render tree 2 is generated. The logic of animation effect 1 and render tree 2 are then transferred to the application's rendering process or rendering thread. The application's rendering process or rendering thread updates render tree 2 based on the logic of animation effect 1 and generates a bitmap based on the updated render tree 2. The size of control 1A01 in the bitmap is 25px*25px.

[0334] Next, the application's rendering process or rendering thread, after receiving the vertical synchronization signal 2, updates the render tree 2 based on the logic of animation effect 1, and generates a bitmap based on the updated render tree 2. The size of control 1A01 in the bitmap is 30px*30px.

[0335] As shown in Figure 18C, unlike in Figure 18B, the application's rendering process or rendering thread updates render tree 1 based on the logic of animation effect 1. The size of control 1A01 on the interface corresponding to render tree 1 is 20px*20px.

[0336] (3) Electronic device provided in one embodiment of this application

[0337] First, the hardware architecture of the electronic device provided in this embodiment of this application will be described.

[0338] Figure 19 is a schematic diagram of an example of a hardware architecture for an electronic device according to one embodiment of this application.

[0339] Electronic devices may include mobile phones, tablet computers, desktop computers, laptop computers, handheld computers, notebook computers, ultra-mobile personal computers (UMPCs), netbooks, 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. In this embodiment of the application, the specific types of electronic devices are not limited.

[0340] The electronic device may include a processor 110, an external memory interface 120, internal memory 121, a universal serial bus (USB) port 130, a charge 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 headset jack 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display 194, a subscriber identity module (SIM) card interface 195, and the like. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, an optical proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, and the like.

[0341] The structures illustrated in this embodiment of the present invention will be understood not to constitute any particular limitation on the electronic device. In some other embodiments, the electronic device may include more or fewer components than those shown in the figure, some components may be combined, some components may be separated, or different component arrangements may be used. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0342] The processor 110 may include one or more processing units. For example, the processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural network processing unit (NPU). Different processing units may be independent components or may be integrated into one or more processors.

[0343] The controller may generate an operation control signal based on the instruction operation code and time sequence signal to complete the control of instruction fetching and instruction execution.

[0344] Memory may be located within the processor 110 and is configured to store instructions and data. In some embodiments, the memory within the processor 110 is cache memory. The memory may store instructions or data that have been recently or periodically used by the processor 110. If the processor 110 needs to use an instruction or data again, the processor may retrieve the instruction or data directly from memory. This avoids repeated access, reduces latency for the processor 110, and improves system efficiency.

[0345] In some embodiments, the processor 110 may include one or more interfaces. These 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), a universal serial bus (USB) interface, and the like.

[0346] The I2C interface includes a serial data line (SDA) and a serial clock line (ser iaIt is a bidirectional synchronous serial bus including the clock line (SCL). In some embodiments, the processor 110 may include a group of multiple I2C buses. The processor 110 may be separately coupled to a touch sensor 180K, a charger, a flashlight, a camera 193, etc., via different I2C bus interfaces. For example, the processor 110 may be coupled to the touch sensor 180K via an I2C interface, so that the processor 110 communicates with the touch sensor 180K via the I2C bus interface to implement the touch functionality of the electronic device.

[0347] The I2S interface may be configured for audio communication. In some embodiments, the processor 110 may include a group of multiple I2S buses. The processor 110 may be coupled to an audio module 170 via the I2S bus to implement communication between the processor 110 and the audio module 170. In some embodiments, the audio module 170 may transfer audio signals via the I2S interface to a wireless communication module 160 to implement call taking via a Bluetooth headset.

[0348] The PCM interface may be configured for audio communication, sampling, quantization, and encoding of analog signals. In some embodiments, the audio module 170 and the radio communication module 160 may be coupled via a PCM bus interface. In some embodiments, the audio module 170 may alternatively transfer audio signals to the radio communication module 160 via the PCM interface and implement the function of receiving calls via a Bluetooth headset. Both the I2S interface and the PCM interface may be configured for audio communication.

[0349] The UART interface is a universal serial data bus configured for asynchronous communication. The bus may also be a bidirectional communication bus. The bus converts the data to be transmitted between serial and parallel communication. In some embodiments, the UART interface is generally configured to connect a processor 110 to a wireless communication module 160. For example, the processor 110 communicates with a Bluetooth module in the wireless communication module 160 via the UART interface to implement Bluetooth functionality. In some embodiments, an audio module 170 may transfer audio signals to the wireless communication module 160 via the UART interface to implement the functionality of playing music via a Bluetooth headset.

[0350] The MIPI interface may be configured to connect to the processor 110 and peripheral components such as the display 194 and camera 193. MIPI interfaces include camera serial interfaces (CSI), display serial interfaces (DSI), and the like. In some embodiments, the processor 110 communicates with the camera 193 via the CSI interface to implement the photographic function of the electronic device. The processor 110 communicates with the display 194 via the DSI interface to implement the display function of the electronic device.

[0351] The GPIO interface may be configured by software. The GPIO interface may be configured as control signals or data signals. In some embodiments, the GPIO interface may be configured to connect the processor 110 to a camera 193, a display 194, a wireless communication module 160, an audio module 170, a sensor module 180, and the like. The GPIO interface may also be configured as an I2C interface, an I2S interface, a UART interface, a MIPI interface, and the like.

[0352] USB port 130 is a USB standard compliant interface, and may specifically be a Mini USB port, Micro USB port, USB Type-C interface, etc. USB port 130 may be configured to connect to a charger for charging electronic devices, to transmit data between electronic devices and peripheral devices, or to connect to a headset for playing audio via the headset. The interface may be further configured to connect to another electronic device, such as an AR device.

[0353] The intermodal interface connection relationships shown in this embodiment of the present invention are merely illustrative examples and should not be understood as constituting limitations on the structure of the electronic device. In some other embodiments of this application, the electronic device may alternatively use a different interface connection scheme than those described above, or a combination of multiple interface connection schemes.

[0354] The charge management module 140 is configured to receive a charge input from a charger. The charger may be a wireless charger or a wired charger. In some embodiments of wired charging, the charge management module 140 may receive the charge input from the wired charger via the USB port 130. In some embodiments of wireless charging, the charge management module 140 may receive the wireless charge input through the wireless charging coil of the electronic device. The charge management module 140 may supply further power to the electronic device by using the power management module 141 while charging the battery 142.

[0355] The power management module 141 is configured to connect to the battery 142, the charge management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charge management module 140 and supplies power to the processor 110, internal memory 121, display 194, camera 193, wireless communication module 160, etc. The power management module 141 may be further configured to monitor parameters such as battery capacity, battery cycle count, and battery health (leakage or impedance). In some other implementations, the power management module 141 may be located within the processor 110 instead. In some other embodiments, the power management module 141 and the charge management module 140 may be located within the same device instead.

[0356] The wireless communication function of an electronic device may be implemented using antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor, baseband processor, etc.

[0357] Antennas 1 and 2 are configured to transmit and receive electromagnetic wave signals. Each antenna of the electronic device may be configured to cover one or more communication frequency bands. Different antennas may be further multiplexed to improve antenna utilization. For example, antenna 1 may be multiplexed as a diversity antenna for a wireless local area network. In some other embodiments, the antennas may be used in combination with tuning switches.

[0358] The mobile communication module 150 may provide a solution applicable to electronic devices, including wireless communication such as 2G / 3G / 4G / 5G. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc. The mobile communication module 150 may receive electromagnetic waves via antenna 1, perform processing such as filtering and amplification on the received electromagnetic waves, and transmit the electromagnetic waves to a modem processor for demodulation. The mobile communication module 150 may further amplify the signal modulated by the modem processor and convert the signal into electromagnetic waves for radiation via antenna 1. In some embodiments, at least some functional modules within the mobile communication module 150 may be located within the processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 may be located within the same device as at least some modules of the processor 110.

[0359] The modem processor may include a modulator and a demodulator. The modulator is configured to modulate the low-frequency baseband signal to be transmitted into a medium / high-frequency signal. The demodulator is configured to demodulate the received electromagnetic signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. The low-frequency baseband signal is processed by the baseband processor and then transmitted to the application processor. The application processor outputs an audio signal via an audio device (not limited to speaker 170A, receiver 170B, etc.) or displays an image or video via display 194. In some embodiments, the modem processor may be a separate device. In some other embodiments, the modem processor may be independent of the processor 110 and may be located in the same device as the mobile communication module 150 or another functional module.

[0360] The wireless communication module 160 is applied to electronic devices and may provide wireless communication solutions including wireless local area networks (WLANs) (e.g., wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite systems (GNSS), frequency modulation (FM), near-field communication (NFC) technology, infrared (IR) technology, etc. The wireless communication module 160 may be one or more components integrating at least one communication processor module. The wireless communication module 160 receives electromagnetic waves via antenna 2, performs frequency modulation and filtering on the electromagnetic wave signal, and transmits the processed signal to processor 110. The wireless communication module 160 may further receive a signal to be transmitted from processor 110, perform frequency modulation and amplification on that signal, and convert the signal into an electromagnetic wave for radiation via antenna 2.

[0361] In some embodiments, an electronic device may be configured such that antenna 1 and a mobile communication module 150 are coupled, and antenna 2 and a wireless communication module 160 are coupled, and the electronic device can communicate with networks and other devices by using wireless communication technology. 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, IR technology, etc. GNSS may include the Global Positioning System (GPS), Global Navigation Satellite System (GLONASS), BeiDou Navigation Satellite System (BDS), Quasi-Zenith Satellite System (QZSS), and / or Satellite-Based Augmentation System (SBAS).

[0362] The electronic device implements display functionality using a GPU, a display 194, an application processor, and the like. The GPU is a microprocessor for image processing and is connected to the display 194 and the application processor. The GPU is configured to perform mathematical and geometric computation for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions for generating or modifying display information.

[0363] The display 194 is configured to display images, videos, etc. The display 194 includes a display panel. The display panel may be a liquid crystal display (LCD). The display panel may be made from organic light-emitting diodes (OLEDs), active-matrix organic light-emitting diodes (AMOLEDs), flexible light-emitting diodes (FLEDs), mini-LEDs, micro-LEDs, 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.

[0364] The electronic device may implement the shooting function using an ISP, camera 193, video codec, GPU, display 194, application processor, etc.

[0365] The ISP may be configured to process data fed back by the camera 193. For example, when the shutter is opened during shooting, light is transmitted to the camera's photoreceptor through the lens. The light signal is converted into an electrical signal, and the camera's photoreceptor transmits the electrical signal to the ISP for processing, converting the electrical signal into a visible image. The ISP may further perform algorithmic optimization with respect to image noise, brightness, and color. The ISP may further optimize parameters such as exposure and color temperature of the shooting scenario. In some embodiments, the ISP may be located within the camera 193.

[0366] The camera 193 is configured to capture still images or video. An optical image of an object is generated through a lens and projected onto a photoreceptor. The photoreceptor may be a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. After the photoreceptor converts the optical signal into an electrical signal, it transmits the electrical signal to an ISP to convert the electrical signal 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 an image signal in a standard format such as RGB or YUV. In some embodiments, the electronic device may include one or N cameras 193, where N is a positive integer greater than 1.

[0367] A digital signal processor is configured to process digital signals and may process other digital signals in addition to digital image signals. For example, when an electronic device selects a frequency, the digital signal processor is configured to perform a Fourier transform on the frequency energy.

[0368] A video codec is configured to compress or decompress digital video. An electronic device may support one or more video codecs. Therefore, an electronic device may play or record video in multiple coding formats, such as moving picture experts group (MPEG)-1, MPEG-2, MPEG-3, and MPEG-4.

[0369] An NPU is a neural network (NN) computing processor. An NPU can rapidly process input information by referencing the structure of a biological neural network, for example, the transmission mode between neurons in the human brain, and may also continuously perform self-learning. Applications such as intelligent recognition of electronic devices may be implemented via an NPU, including, for example, image recognition, face recognition, speech recognition, and text comprehension.

[0370] The internal memory 121 may include one or more random access memories (RAM) and one or more non-volatile memories (NVM).

[0371] Random-access memory may 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, commonly known as DDR5 SDRAM).

[0372] Non-volatile memory may include magnetic disk storage devices and flash memory.

[0373] Flash memory may be classified according to its operating principle into NOR FLASH, NAND FLASH, 3D NAND FLASH, etc., or according to the number of potential levels of its cells into single-level cell (SLC), multi-level cell (MLC), triple-level cell (TLC), quad-level cell (QLC), etc., or according to its storage specifications into universal flash storage (UFS), embedded multimedia card (eMMC), etc.

[0374] Random access memory may be read directly by the processor 110, or it may be configured to store executable programs of the operating system (e.g., machine instructions) or other running programs, or it may be further configured to store user data, application data, etc.

[0375] Non-volatile memory may also store executable programs, user data, application data, etc., which can be preloaded into random-access memory for direct reading and writing by the processor 110.

[0376] The external memory interface 120 may be used to connect to external non-volatile memory and extend the storage capacity of an electronic device. The external non-volatile memory communicates with the processor 110 via the external memory interface 120 to implement data storage functions. For example, files such as music and videos are stored in the external non-volatile memory.

[0377] The electronic device may implement audio functions, such as music playback and recording, using an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headset jack 170D, an application processor, and the like.

[0378] The audio module 170 is configured to convert digital audio information to an analog audio signal output, and further to convert an analog audio input to a digital audio signal. The audio module 170 may be further configured to encode and decode audio signals. In some embodiments, the audio module 170 may be located within the processor 110, or some functional modules of the audio module 170 may be located within the processor 110.

[0379] Speaker 170A, also known as a "loudspeaker," is configured to convert audio electrical signals into voice signals. Electronic device 100 may use speaker 170A to listen to music or to make hands-free calls.

[0380] Receiver 170B, also known as the "earpiece," is configured to convert electrical audio signals into sound signals. When using an electronic device to answer a phone call or receive voice information, receiver 170B may be placed near a person's ear to receive the voice.

[0381] The microphone 170C, also called a "microphone," is configured to convert an audio signal into an electrical signal. When a user makes a phone call or transmits voice information, the user may input an audio signal into the microphone 170C by emitting sound near the microphone 170C through their mouth. At least one microphone 170C may be installed within the electronic device. In some other embodiments, two microphones 170C may be installed within the electronic device to implement noise reduction in addition to capturing the audio signal. In some other embodiments, three, four, or more microphones 170C may be installed within the electronic device to collect the audio signal, reduce noise, identify the sound source, implement directional recording, and so on.

[0382] The headset jack 170D is configured to connect to a wired headset. The headset jack 170D may be a USB port 130, a 3.5mm open mobile terminal platform (OMTP) standard interface, or a cellular telecommunications industry association of the USA (CTIA) standard interface.

[0383] The pressure sensor 180A is configured to sense a pressure signal and convert the pressure signal into an electrical signal. In some embodiments, the pressure sensor 180A may be located on the display 194. There are several types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, and capacitive pressure sensors. A capacitive pressure sensor may include at least two parallel plates made of a conductive material. When force is applied to the pressure sensor 180A, the capacitance between the electrodes changes. The electronic device determines the pressure intensity based on the change in capacitance. When a touch operation is performed on the display 194, the electronic device detects the intensity of the touch operation by using the pressure sensor 180A. The electronic device may also calculate the touch location based on the detection signal of the pressure sensor 180A. In some embodiments, touch operations performed at the same touch location but with different touch operation intensities may correspond to different operation commands. For example, when a touch operation with an intensity less than a first pressure threshold is performed on a messaging application icon, an operation to view SMS messages is executed. When a touch operation with an intensity equal to or greater than a first pressure threshold is performed on a messaging application icon, a command to create a new SMS message is executed.

[0384] The gyro sensor 180B may be configured to determine the motion orientation of an electronic device. In some embodiments, the angular velocity of the electronic device about three axes (i.e., axes x, y, and z) may be determined using the gyro sensor 180B. The gyro sensor 180B may be configured to implement image stabilization during shooting. For example, when the shutter is pressed, the gyro sensor 180B detects the jitter angle of the electronic device, calculates the distance that the lens module should compensate for based on that angle, and allows the lens to implement image stabilization by offsetting the jitter of the electronic device through inverted motion. The gyro sensor 180B may further be used in navigation and physical game scenarios.

[0385] The barometric pressure sensor 180C is configured to measure atmospheric pressure. In some embodiments, an electronic device calculates altitude based on the atmospheric pressure value measured by the barometric pressure sensor 180C to assist in positioning and navigation.

[0386] The magnetic sensor 180D includes a Hall sensor. The electronic device may use the magnetic sensor 180D to detect the opening and closing of the leather case of the flip cover. In some embodiments, when the electronic device is a flip phone, the electronic device may use the magnetic sensor 180D to detect the opening and closing of the flip cover. Furthermore, features such as automatic unlocking when the cover is flipped open are set based on the detected open / closed state of the leather case or the detected open / closed state of the flip cover.

[0387] The accelerometer 180E may detect acceleration in various directions (typically three axes) of the electronic device. The magnitude and direction of gravity may be detected when the electronic device is stationary. The accelerometer 180E may be further configured to identify the orientation of the electronic device and used in applications such as switching between landscape and portrait modes, and as a pedometer.

[0388] The distance sensor 180F is configured to measure distance. The electronic device may measure distance via infrared or laser. In some embodiments, in a shooting scenario, the electronic device may use the distance sensor 180F to measure distance and implement high-speed focusing.

[0389] The optical proximity sensor 180G may include optical detectors such as light-emitting diodes (LEDs) and photodiodes. The light-emitting diodes may be infrared light-emitting diodes. The electronic device uses the light-emitting diodes to emit infrared light. The electronic device uses the photodiodes to detect reflected infrared light from nearby objects. The electronic device may determine that an object is present in its vicinity when it detects a large amount of reflected light. The electronic device may determine that no object is present in its vicinity when it detects a small amount of reflected light. By using the optical proximity sensor 180G, the electronic device may detect that the user is holding the electronic device close to their ear for a call and automatically turn off the display to save power. The optical proximity sensor 180G may also be used in leather case mode or pocket mode to automatically unlock or lock the screen.

[0390] The ambient light sensor 180L is configured to sense the brightness of the ambient light. The electronic device may adaptively adjust the brightness of the display 194 based on the perceived brightness of the ambient light. The ambient light sensor 180L may also be configured to automatically adjust the white balance during shooting. The ambient light sensor 180L may further work with the optical proximity sensor 180G to detect whether the electronic device is in a pocket and to avoid unintentional touches.

[0391] The fingerprint sensor 180H is configured to collect fingerprints. Electronic devices may use the characteristics of the collected fingerprints to implement fingerprint-based unlocking, application lock access, fingerprint-based photography, fingerprint-based call answering, and the like.

[0392] The temperature sensor 180J is configured to detect temperature. In some embodiments, the electronic device implements a temperature handling policy by using the temperature detected by the temperature sensor 180J. For example, when the temperature reported by the temperature sensor 180J exceeds a threshold, the electronic device reduces the execution of a processor near the temperature sensor 180J to reduce power consumption and implement thermal protection. In some other embodiments, when the temperature is below another threshold, the electronic device increases the heat of the battery 142 to avoid an abnormal shutdown of the electrons due to low temperature. In some other embodiments, when the temperature is below another threshold, the electronic device boosts the output voltage of the battery 142 to avoid an abnormal shutdown due to low temperature.

[0393] The touch sensor 180K is also called a “touch device”. The touch sensor 180K may be disposed on the display 194, and the touch sensor 180K and the display 194 constitute a touchscreen, also called a “touchscreen”. The touch sensor 180K is configured to detect touch operations on or near the touch sensor. The touch sensor may transmit the detected touch operations to an application processor to determine the type of touch event. Visual outputs related to touch operations may be provided on the display 194. In some other embodiments, the touch sensor 180K may alternatively be disposed on the surface of an electronic device and located at a different location from the display 194.

[0394] The bone conduction sensor 180M may acquire vibration signals. In some embodiments, the bone conduction sensor 180M may acquire vibration signals from the vibrating bone of the human vocal cords. The bone conduction sensor 180M may further communicate with a human pulse to receive blood pressure pulsation signals. In some embodiments, the bone conduction sensor 180M may alternatively be disposed within a headset to acquire a bone conduction headset. The audio module 170 may implement voice functionality by analyzing voice signals based on vibration signals from the vibrating bone of the vocal cords and acquired by the bone conduction sensor 180M. The application processor may implement heart rate detection functionality by analyzing heart rate information based on blood pressure pulsation signals acquired by the bone conduction sensor 180M.

[0395] Button 190 includes power buttons, volume buttons, etc. Button 190 may be a mechanical button or a touch button. The electronic device may receive button inputs and generate button signal inputs related to the user settings and function controls of the electronic device.

[0396] Motor 191 may generate vibration prompts. Motor 191 may be configured to generate call vibration prompts and touch vibration feedback. For example, touch actions performed for different applications (e.g., photography and audio playback) may correspond to different vibration feedback effects. Motor 191 may correspond to different vibration feedback effects for touch actions performed on different areas of the display 194. Different application scenarios (e.g., time reminder, information reception, alarm clock, and game) may also correspond to different vibration feedback effects. The touch vibration feedback effects may be further customized.

[0397] Indicator 192 may be an indicator light and may be configured to show the charging status and power changes, or it may be configured to show messages, missed calls, notifications, etc.

[0398] The SIM card interface 195 is configured to connect to a SIM card. The SIM card may be inserted into or removed from the SIM card interface 195 to implement contact with or separation from an electronic device. An electronic device may 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, and the like. Multiple cards may be inserted into the same SIM card interface 195 simultaneously. The multiple cards may be of the same type or different types. The SIM card interface 195 is compatible with different types of SIM cards. The SIM card interface 195 may also be compatible with external storage cards. The electronic device uses the SIM card to interact with the network and implement functions such as calling and data communication. In some embodiments, the electronic device uses an eSIM, i.e., an embedded SIM card. eSIM cards may be embedded in electronic devices and cannot be separated from those devices.

[0399] Next, a software architecture for an electronic device according to one embodiment of this application will be described.

[0400] Figure 20 is a schematic diagram of an example of a software architecture for an electronic device according to one embodiment of this application.

[0401] As shown in Figure 20, using a layered architecture, the software is divided into several layers, each with a distinct role and task. These 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 libraries, and the kernel layer.

[0402] The application layer may include a series of application packages. As shown in Figure 20, an application package may include applications (or referred to as applications) such as camera, gallery, calendar, phone, map, navigation, WLAN, Bluetooth, music, video, and messaging.

[0403] The application framework layer provides an application programming interface (API) and a programming framework for applications within the application layer. The application framework layer includes several predefined functions.

[0404] As shown in Figure 20, the application framework layer may include a window management service, display management service, content provider, view system, phone manager, resource manager, notification manager, Local Profile Assistant (LPA), and the like.

[0405] The window management service is responsible for starting, adding, and deleting windows; determining which applications are displayed in a window; creating and destroying application layers; deciding whether to change their properties; determining whether a status bar is present; locking the screen; and capturing the screen.

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

[0407] Content providers are configured to store and retrieve data, and to allow applications to access that data. The data may include videos, images, audio, outgoing and incoming calls, browsing history and bookmarks, phone books, and more.

[0408] The telephone manager is configured to provide communication functions for electronic devices, such as managing call status (including incoming calls, incoming call rejection, etc.).

[0409] The resource manager provides applications with various resources such as localized text, icons, pictures, layout files, and video files.

[0410] A notification manager may be configured to allow applications to display notification information in the status bar and to carry notification messages that may disappear automatically after a short pause without requiring user interaction. For example, a notification manager may be used to notify of download completion or to provide message notifications. Alternatively, a notification manager may appear in the system's top-level status bar in the form of a graph or scroll bar text, for example, notifications from applications running in the background, or notifications may appear on the screen in the form of a dialog interface. For example, text information may appear in the status bar, a prompt tone may be produced, an electronic device may vibrate, or an indicator light may flash.

[0411] A view system includes visual controls such as controls for displaying text and controls for displaying pictures. A view system may be configured to build an application. A display interface may include one or more views. For example, a display interface that includes an SMS message notification icon may include a view for displaying text and a view for displaying pictures.

[0412] The application framework layer may further include an animation system.

[0413] As shown in Figure 20, an animation system that performs an animation effect display method provided in one embodiment of this application includes the following steps:

[0414] S2001: Set animation effects via the animation interface.

[0415] The animation system provides application developers with an animation interface. Application developers may set animation effects for any one or more controls by calling the animation interface.

[0416] S2002: Determines the duration of the animation effect, the description of the animation effect's end frame, and other relevant information.

[0417] After the application starts running and receives an animation trigger event, the animation system may determine the duration of the animation effect, descriptive information about the end frame of the animation effect, and so on.

[0418] S2003: Determines descriptive information for each frame during the duration of the animation effect.

[0419] Next, the animation system may determine descriptive information about the frame currently being rendered, based on the duration of the animation effect, descriptive information about the end frame of the animation effect, the start time of the animation effect, and the time of the frame currently being rendered. The descriptive information about the frame currently being rendered includes the properties of the controls for that frame.

[0420] S2004: Update the render tree based on the descriptive information for each frame.

[0421] Next, the animation system updates the render tree based on descriptive information about the frame currently being rendered.

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

[0423] The runtime includes the kernel libraries and virtual machines. The runtime is responsible for scheduling and managing the operating system.

[0424] The kernel library consists of two parts: the functions called in the Java language and the kernel library itself.

[0425] The application layer and application framework layer run on a virtual machine. The virtual machine executes Java files in 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.

[0426] The system library may include multiple functional modules, such as a surface manager, a media library, and a graphics processing library, the graphics processing library may include a 3D graphics processing library (e.g., OpenGL ES) and a 2D graphics engine (e.g., SGL).

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

[0428] The media library supports playback and recording in multiple commonly used audio and video formats, as well as still image files. The media library may also support multiple audio and video encoding formats, such as MPEG-4, H.264, MP3, AAC, AMR, JPG, and PNG.

[0429] The 3D graphics processing library is configured to implement 3D graphics drawing, image rendering, layer compositing, layer processing, and more.

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

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

[0432] Depending on the context, the term "when" as used in the embodiments described above may be interpreted as "in the case of," "after," "in response to determining that," or "in response to detecting." Similarly, depending on the context, the phrases "when it is determined that" or "when (the stated condition or event) is detected" may be interpreted as "when it is determined that," "in response to determining that," "when (the stated condition or event) is detected," or "in response to detecting (the stated condition or event)."

[0433] All or part of the embodiments described above may be implemented by software, hardware, firmware, or any combination thereof. When software is used to implement the embodiments described above, all or part of the embodiments may be implemented in the form of a computer program product. A computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the procedures or functions according to the embodiments of this application are generated. The computer may be a general-purpose computer, a dedicated computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, computer instructions may be transmitted from a website, computer, server, or data center to another website, computer, server, or data center by wire (e.g., coaxial cable, optical fiber, or digital subscriber line) or wirelessly (e.g., infrared, radio, or microwave). The computer-readable storage medium may be any available medium accessible by a computer, or a data storage device such as a server or data center that integrates one or more available media. The usable media may be magnetic media (e.g., floppy disks, hard disks, or magnetic tapes), optical media (e.g., DVDs), or semiconductor media (e.g., solid-state drives).

[0434] Those skilled in the art will understand that all or part of the steps of the method in the embodiment may be implemented by a computer program that instructs the relevant hardware. The program may be stored on a computer-readable storage medium. The steps of the method in the embodiment are performed when the program is executed. The aforementioned storage medium includes any medium capable of storing program code, such as ROM, random-access memory (RAM), magnetic disk, or optical disk.

Claims

1. A method for displaying animation effects applied to an electronic device, The application's UI thread, after receiving an animation trigger event, determines the duration of the first animation effect, the start time of the first animation effect, and descriptive information regarding the end frame of the first animation effect, based on information about the first animation effect of a first group of controls set by the application, wherein the first group of controls includes one or more controls, and the animation trigger event is used to trigger the display of the first animation effect. When the rendering thread or rendering process of the application generates display data for the target frame during the duration of the first animation effect, it determines the descriptive information for the target frame based on the start time of the first animation effect, the duration of the first animation effect, the time corresponding to the target frame, and the descriptive information for the end frame of the first animation effect. The rendering thread or rendering process of the application generates the display data of the target frame based on the descriptive information relating to the target frame, A method comprising: updating a first render tree based on the descriptive information relating to the target frame by the rendering thread or the rendering process; and generating the display data for the target frame based on the updated first render tree by the rendering thread or the rendering process.

2. The method according to claim 1, wherein the information relating to the first animation effect is set by the application via an animation interface provided by the system.

3. The aforementioned method, The UI thread determines the properties of the control in the ending frame of the first animation effect based on the description information relating to the ending frame of the first animation effect, The UI thread compares the properties of the control at the end frame of the first animation effect with the properties of the control shown before the first animation effect started to determine a second group of controls, wherein the second group of controls are controls whose properties change during the duration of the first animation effect, and the second group of controls includes the first group of controls. The method according to claim 1 or 2, wherein the first group of controls is displayed by the first animation effect, the controls of the second group other than the first group of controls are displayed by the second animation effect, and the animation trigger event is further used to trigger the display of the second animation effect.

4. The method according to claim 3, wherein the descriptive information relating to the target frame is further used to determine the properties of the control among the second group of controls in the target frame, the properties of the control include at least one of the size of the control, the location of the control, and the transparency of the control.

5. Updating the first render tree based on the descriptive information relating to the target frame by the rendering thread or rendering process is: The method according to claim 1, comprising updating the first render tree based on the properties of the control among the second group of controls in the target frame by the rendering thread or the rendering process.

6. The aforementioned method, The above-mentioned second group of controls includes a third control, The method according to claim 5, comprising: adjusting the size of content held by the third control based on the size of the third control and a pre-configured policy, wherein the content held includes at least one of images and text.

7. The third control is an image control ImageView, and the content held by the third control is the first image. The method according to claim 6, wherein the policy includes comparing the size of the third control with the size of the first image and cropping or scaling the first image.

8. The third control is a text control TextView, and the content held in the third control is the first text. The method according to claim 6, wherein the policy includes comparing the width of the third control with the width of the first text and performing line splitting or line merging on the first text.

9. The first render tree is either the render tree corresponding to the end frame of the first animation effect, or The method according to any one of claims 6 to 8, wherein the first render tree is a render tree corresponding to an interface shown before the first animation effect is initiated.

10. An electronic device comprising one or more processors and memory, The memory is coupled to one or more processors, and the memory is configured to store computer program code, the computer program code includes computer instructions, and the one or more processors call the computer instructions, enabling the electronic device to perform the method according to claim 1.

11. A chip system applied to an electronic device, wherein the chip system includes one or more processors, the one or more processors calling computer instructions to enable the electronic device to perform the method according to claim 1.

12. A computer-readable storage medium containing instructions, wherein when the instructions are executed on an electronic device, the electronic device is capable of performing the method according to claim 1.

13. A computer program including computer-readable instructions, wherein the method according to claim 1 is implemented when the computer-readable instructions are executed by one or more processors.

Images