Animation effect display method and electronic device

Abstract

The embodiments of the present application provide an animation effect display method and an electronic device, and relate to the field of electronic technology. The animation effect display method provided by the embodiments of the present application, before displaying the animation effect, the UI thread of the application or the rendering thread or rendering process of the application determines the controls whose properties change during the duration of the animation effect, and determines the properties of the controls in each frame interface, and then the rendering thread or rendering process of the application generates a bitmap corresponding to the frame interface based on the properties of the controls in each frame interface. Since the size, position and other properties of the controls on each frame interface have been determined before displaying the animation effect, there is no need for the UI thread to measure, layout, draw and record (record) each frame interface, so that the display of the animation effect will not be affected by the blocking of the UI thread.

Description

Technical Field

[0001] The present application relates to the field of electronic technology, and in particular to an animation effect display method and an electronic device. Background Art

[0002] With the development of electronic technology, more and more electronic devices are involved in the daily life of users. In addition, as the resolution and size of the screens of electronic devices are getting higher and higher, more and more content can be displayed on the electronic devices.

[0003] The application can show animation effects to users by adjusting the size, width, height, transparency and other properties of the controls displayed on the interface.

[0004] However, in the prior art, the UI thread needs to undertake the calculation of displaying animation effects and other tasks, which can easily cause the application on the electronic device to freeze or drop frames, thereby reducing the user experience. Summary of the invention

[0005] The embodiments of the present application provide an animation effect display method and an electronic device, and relate to the field of electronic technology. The animation effect display method provided by the embodiments of the present application, before displaying the animation effect, the UI thread of the application or the rendering thread or rendering process of the application determines the controls whose properties change during the duration of the animation effect, and determines the properties of the controls in each frame interface, and then the rendering thread or rendering process of the application generates a bitmap corresponding to the frame interface based on the properties of the controls in each frame interface. Since the size, position and other properties of the controls on each frame interface have been determined before displaying the animation effect, there is no need for the UI thread to measure, layout, draw and record (record) each frame interface, so that the display of the animation effect will not be affected by the blocking of the UI thread.

[0006] In a first aspect, an embodiment of the present application provides a method for displaying an animation effect, comprising: after receiving an animation trigger event, the UI thread of the application determines the duration of the first animation effect, the start time of the first animation effect, and the end frame description information of the first animation effect according to the information of the first animation effect of a first control group set by the application, 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; during the duration of the first animation effect, when generating display data of a target frame, the description information of the target frame is determined according to 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 description information of the first animation effect, and the rendering thread or rendering process of the application generates display data of the target frame according to the description information of the target frame.

[0007] In the above embodiment, during the duration of the animation, the rendering thread or rendering process of the application generates an interface according to the description information of the target frame, wherein the description information of the target frame is used to determine the properties of the control in the target frame, such as size, position, transparency, etc. During the duration of the animation, the display data of the target frame is generated by the rendering thread or rendering process of the application, and the display data of the target frame does not need to be generated by the UI thread through measurement, layout, recording and drawing, thereby avoiding the jamming of the animation effect caused by the blocking of the UI thread.

[0008] In combination with some embodiments of the first aspect, in some embodiments, the information of the first animation effect is configured by the application through an animation interface provided by the system.

[0009] In the above embodiment, the application developer can configure animation effects for any one or more controls through the animation interface, which is convenient for the application developer to perform configuration.

[0010] In combination with some embodiments of the first aspect, in some embodiments, during the duration of the first animation effect, when generating display data of the target frame, the description information of the target frame is determined according to 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 description information of the first animation effect, specifically including: the UI thread or the rendering thread or the rendering process determines the description information of the target frame according to 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 description information of the first animation effect.

[0011] In the above embodiment, determining the description information of the target frame can be performed by the UI thread, or by the rendering thread or rendering process. When determining the description information of the target frame is performed by the rendering thread or rendering process, the load of the UI thread can be further reduced, and the possibility of animation effect jamming can be reduced.

[0012] In combination with some embodiments of the first aspect, in some embodiments, the method also includes: the UI thread determines the properties of the controls in the end frame of the first animation effect based on the end frame description information of the first animation effect; the UI thread or the rendering thread or the rendering process compares the properties of the controls in the end frame of the first animation effect with the properties of the controls before the start of the first animation effect to determine a second control group, the second control group being controls whose properties change during the duration of the first animation effect, and the second control group including the first control group; the first control group is displayed with the first animation effect, and other controls in the second control group except the first control group are displayed with the second animation effect, and the animation trigger event is also used to trigger display of the second animation effect.

[0013] In the above embodiment, the UI thread determines the controls whose properties change during the duration of the animation effect by comparing the properties of the controls on the end frame of the animation effect with the properties of the controls on the interface frame before the animation effect starts, and then determines the properties of these controls in each frame during the duration of the animation effect, thereby determining the display data of the target frame. Compared with determining the properties of all controls on each frame of the interface during the duration of the animation effect, the amount of calculation can be reduced.

[0014] In combination with some embodiments of the first aspect, in some embodiments, the description information of the target frame is used to determine the properties of the controls in the second control group in the target frame, and the properties of the controls include at least one of the size of the controls, the position of the controls, and the transparency of the controls.

[0015] In the above embodiment, the properties of the control will directly affect the display effect of the control. By determining the properties of the control, the description information of the target frame can be determined.

[0016] In combination with some embodiments of the first aspect, in some embodiments, the rendering thread or the rendering process generates display data of the target frame according to the description information of the target frame, specifically including: the rendering thread or the rendering process updates the first rendering tree according to the description information of the target frame, and the rendering thread or the rendering process generates display data of the target frame based on the updated first rendering tree.

[0017] In the above embodiment, compared to the method of synchronizing the rendering tree to the rendering thread or rendering process of the application after the UI thread of the application updates the rendering tree, the rendering process or the rendering thread of the application can update the rendering tree based on the description information of the target frame, and generate display data of the target frame based on the updated rendering tree. In this case, the animation effect can still be displayed normally when the UI thread is blocked.

[0018] In combination with some embodiments of the first aspect, in some embodiments, the rendering thread or the rendering process updates the first rendering tree according to the description information of the target frame, specifically including: the rendering thread or the rendering process updates the first rendering tree according to the properties of the controls in the second control group in the target frame.

[0019] In the above embodiment, the rendering process or the rendering thread of the application program may update the rendering tree only according to the properties of the control whose properties have changed in the target frame, and then generate display data of the target frame.

[0020] In combination with some embodiments of the first aspect, in some embodiments, the second control group includes a third control; the rendering thread or the rendering process adjusts the size of the content carried on the third control according to the size of the third control and a preconfigured strategy, and the strategy is used to perform cropping or scaling on the carried content based on the properties of the control, and the carried content includes at least one of an image and text.

[0021] In the above embodiment, during the duration of the animation effect, when the size of the control changes, the electronic device can also crop or scale the content on the control.

[0022] In combination with some embodiments of the first aspect, in some embodiments, the third control is an image control ImageView, and the content carried by the third control is a first image; the strategy includes: comparing the size of the third control with the size of the first image, and performing cropping or scaling on the first image.

[0023] In the above embodiment, during the duration of the animation effect, when the size of the control changes, the electronic device may also crop or scale the image on the control.

[0024] In combination with some embodiments of the first aspect, in some embodiments, the third control is a text control TextView, and the content carried by the third control is the first text; the strategy includes: comparing the width of the third control with the width of the first text, and performing line breaks or line merges on the first text.

[0025] In the above embodiment, during the duration of the animation effect, when the size of the control changes, the electronic device may also separate or merge the text on the control.

[0026] In combination with some embodiments of the first aspect, in some embodiments, the first rendering tree is a rendering tree corresponding to an end frame of the first animation effect; or, the first rendering tree is a rendering tree corresponding to an interface before the first animation effect starts.

[0027] In the above embodiment, the rendering tree updated by the rendering thread or rendering process of the application based on the target frame description information may be the rendering tree corresponding to the end interface of the animation effect, or the rendering tree corresponding to the interface before the animation effect starts.

[0028] In combination with some embodiments of the first aspect, in some embodiments, after receiving the animation trigger event, the UI thread of the application determines the duration of the first animation effect, the start time of the first animation effect and the end frame description information of the first animation effect according to the information of the first animation effect of the first control group set by the application, the method also includes: the UI thread cancels the animation callback CALLBACK_ANIMATION of the first animation effect, and the animation callback is used to trigger the UI thread to modify the properties of the controls in the first control group.

[0029] In the above embodiment, the electronic device can determine the description information of the target frame from the animation effect, and cancel the callback so that the UI thread of the application no longer performs measurement, layout, and drawing recording, so as to avoid the animation effect being stuck due to the blockage of the UI thread.

[0030] In combination with 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 display data of the target frame based on the description information of the target frame at a second moment; the second moment is after a first duration of the first moment, and the first duration is preset.

[0031] In the above embodiment, the rendering process or the rendering thread of the application can independently request a vertical synchronization signal to generate each frame interface within the duration of the animation effect; or, it can also generate each frame interface within the duration of the animation effect after waiting for a period of time after the UI thread receives the vertical synchronization signal, so that the UI thread can be triggered by the non-animation effect to modify the properties of the control, and synchronize the modified properties of the control to the rendering process or the rendering thread of the application.

[0032] In combination with some embodiments of the first aspect, in some embodiments, during the duration of the first animation effect, the rendering thread or the rendering process determines a second parameter, and the second parameter includes the size and position of the controls in the second control group; the rendering thread or the rendering process sends the second parameter to the UI thread; and the UI thread determines the size and position of the controls in the second control group based on the second parameter.

[0033] In the above embodiment, during the duration of the animation effect, the rendering process or the rendering thread of the application can synchronize the position and size of the control on the interface to the UI thread, and then the UI thread can know the real position and size of the control.

[0034] In combination with some embodiments of the first aspect, in some embodiments, the animation triggering event includes at least one of user interaction, network status change, and messages sent by other applications on the electronic device to the application.

[0035] In the above embodiments, the animation effect can be triggered in a variety of ways.

[0036] In a second aspect, an embodiment of the present application provides an electronic device, which includes: one or more processors and a memory; the memory is coupled to the one or more processors, the memory is used to store computer program code, the computer program code includes computer instructions, and the one or more processors call the computer instructions to enable the electronic device to execute: after receiving an animation trigger event, the UI thread of the application determines the duration of the first animation effect, the start time of the first animation effect, and the end frame description information of the first animation effect according to the information of the first animation effect of the first control group set by the application, 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; within the duration of the first animation effect, when generating display data of the target frame, the description information of the target frame is determined according to 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 description information of the first animation effect, and the rendering thread or rendering process of the application generates the display data of the target frame according to the description information of the target frame.

[0037] In the above embodiment, during the duration of the animation, the rendering thread or rendering process of the application generates an interface according to the description information of the target frame, wherein the description information of the target frame is used to determine the properties of the control in the target frame, such as size, position, transparency, etc. During the duration of the animation, the display data of the target frame is generated by the rendering thread or rendering process of the application, and the display data of the target frame does not need to be generated by the UI thread through measurement, layout, recording and drawing, thereby avoiding the jamming of the animation effect caused by the blocking of the UI thread.

[0038] In combination with some embodiments of the second aspect, in some embodiments, the first animation effect is configured through an animation interface.

[0039] In combination with some embodiments of the second aspect, in some embodiments, the one or more processors are specifically used to call the computer instructions to cause the electronic device to execute: the UI thread or the rendering thread or the rendering process determines the description information of 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 end frame description information of the first animation effect.

[0040] In combination with some embodiments of the second aspect, in some embodiments, the one or more processors are also used to call the computer instructions to cause the electronic device to execute: the UI thread determines the properties of the controls in the end frame of the first animation effect based on the end frame description information of the first animation effect; the UI thread or the rendering thread or the rendering process compares the properties of the controls in the end frame of the first animation effect with the properties of the controls before the start of the first animation effect to determine a second control group, the second control group being controls whose properties change during the duration of the first animation effect, and the second control group including the first control group; the first control group is displayed with the first animation effect, and other controls in the second control group except the first control group are displayed with the second animation effect, and the animation trigger event is also used to trigger display of the second animation effect.

[0041] In combination with some embodiments of the second aspect, in some embodiments, the description information of the target frame is used to determine the properties of the controls in the second control group in the target frame, and the properties of the controls include at least one of the size of the controls, the position of the controls, and the transparency of the controls.

[0042] In combination with some embodiments of the second aspect, in some embodiments, the one or more processors are specifically used to call the computer instructions to cause the electronic device to execute: the rendering thread or the rendering process updates the first rendering tree according to the description information of the target frame, and the rendering thread or the rendering process generates display data of the target frame based on the updated first rendering tree.

[0043] In combination with some embodiments of the second aspect, in some embodiments, the one or more processors are specifically used to call the computer instruction to cause the electronic device to execute: the rendering thread or the rendering process updates the first rendering tree according to the properties of the controls in the second control group in the target frame.

[0044] In combination with some embodiments of the second aspect, in some embodiments, the one or more processors are also used to call the computer instructions to cause the electronic device to execute: the second control group includes a third control; the rendering thread or the rendering process adjusts the size of the content carried on the third control according to the size of the third control and a preconfigured strategy, and the strategy is used to perform cropping or scaling on the carried content based on the properties of the control, and the carried content includes at least one of an image and text.

[0045] In combination with some embodiments of the second aspect, in some embodiments, the third control is an image control ImageView, and the content carried by the third control is a first image; the strategy includes: comparing the size of the third control with the size of the first image, and performing cropping or scaling on the first image.

[0046] In combination with some embodiments of the second aspect, in some embodiments, the third control is a text control TextView, and the content carried by the third control is the first text; the strategy includes: comparing the width of the third control with the width of the first text, and performing line breaks or line merges on the first text.

[0047] In combination with some embodiments of the second aspect, in some embodiments, the first rendering tree is a rendering tree corresponding to an end frame of the first animation effect; or, the first rendering tree is a rendering tree corresponding to an interface before the first animation effect starts.

[0048] In conjunction with some embodiments of the second aspect, in some embodiments, the one or more processors are further configured to call the computer instruction to cause the electronic device to execute:

[0049] In combination with some embodiments of the second aspect, in some embodiments, the one or more processors are also used to call the computer instruction to cause the electronic device to execute: the UI thread unregisters the animation callback CALLBACK_ANIMATION of the first animation effect, and the animation callback is used to trigger the UI thread to modify the properties of the controls in the first control group.

[0050] In combination with some embodiments of the second aspect, in some embodiments, the one or more processors are also used to call the computer instructions to cause the electronic device to execute: 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 display data of the target frame based on the description information of the target frame at a second moment; the second moment is after a first duration of the first moment, and the first duration is preset.

[0051] In combination with some embodiments of the second aspect, in some embodiments, the one or more processors are also used to call the computer instructions to cause the electronic device to execute: during the duration of the first animation effect, the rendering thread or the rendering process determines a second parameter, and the second parameter includes the size and position of the controls in the second control group; the rendering thread or the rendering process sends the second parameter to the UI thread; the UI thread determines the size and position of the controls in the second control group based on the second parameter.

[0052] In combination with some embodiments of the second aspect, in some embodiments, the animation triggering event includes at least one of user interaction, network status change, and messages sent by other applications on the electronic device to the application.

[0053] In a third aspect, an embodiment of the present application provides a chip system, which is applied to an electronic device, and the chip system includes one or more processors, which are used to call computer instructions so that the electronic device executes the method described in the first aspect and any possible implementation method of the first aspect.

[0054] In a fourth aspect, an embodiment of the present application provides a computer program product comprising instructions, which, when executed on an electronic device, enables the electronic device to execute the method described in the first aspect and any possible implementation of the first aspect.

[0055] In a fifth aspect, an embodiment of the present application provides a computer-readable storage medium, comprising instructions. When the instructions are executed on an electronic device, the electronic device executes the method described in the first aspect and any possible implementation method of the first aspect.

[0056] It is understandable that the electronic device provided in the second aspect, the chip system provided in the third aspect, the computer program product provided in the fourth aspect, and the computer storage medium provided in the fifth aspect are all used to execute the method provided in the embodiment of the present application. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects in the corresponding method, which will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0057] Figure 1A , Figure 1B An exemplary schematic diagram of an interface provided for an embodiment of the present application.

[0058] Figure 2A , Figure 2B Another exemplary schematic diagram of an interface provided for an embodiment of the present application.

[0059] Figure 3 An exemplary schematic diagram of an animation effect display method provided in an embodiment of the present application.

[0060] Figure 4 An exemplary schematic diagram of another animation effect display method provided in an embodiment of the present application.

[0061] Figure 5 An exemplary schematic diagram of animation effect conflict provided in an embodiment of the present application.

[0062] Figure 6A-6F An exemplary schematic diagram of interface changes under multiple animation conflicts provided in an embodiment of the present application.

[0063] Fig. 7A , Figure 7B , Figure 7C An exemplary schematic diagram of view attribute changes in a multi-animation situation provided in an embodiment of the present application.

[0064] Figure 8 An example schematic diagram of the process of the animation effect display method provided in an embodiment of the present application.

[0065] Fig. 9 An exemplary schematic diagram of determining an animation object provided in an embodiment of the present application.

[0066] Fig.10 An exemplary schematic diagram of determining the attributes of a view in each frame interface provided in an embodiment of the present application.

[0067] Figures 11A-11D An exemplary schematic diagram of animation parameter changes provided in an embodiment of the present application.

[0068] Fig. 12A , Fig. 12B An exemplary schematic diagram of interface changes under multiple animations provided in an embodiment of the present application.

[0069] Fig.13A , Fig. 13B , Fig. 13C An exemplary schematic diagram of the timing for a rendering thread or rendering process to update a rendering tree provided in an embodiment of the present application.

[0070] Fig.14 Another exemplary schematic diagram of the timing for a rendering thread to update animation parameters provided in an embodiment of the present application.

[0071] Fig.15A , Fig. 15B An exemplary schematic diagram of the animation effect process provided in an embodiment of the present application.

[0072] Fig.16A , Fig. 16B , Fig. 16C , Fig.16D , Fig.16E An exemplary schematic diagram of the animation effect process provided in an embodiment of the present application.

[0073] Fig.17 An exemplary schematic diagram of determining view properties by UI thread data provided in an embodiment of the present application.

[0074] Fig.18A Provided for the embodiments of this application Figure 3 An exemplary schematic diagram of the changes in the rendering tree during the execution of the method shown.

[0075] Fig.18B , Fig. 18C Provided for the embodiments of this application Figure 4 An exemplary schematic diagram of the changes in the rendering tree during the execution of the method shown.

[0076] Fig.19 An exemplary schematic diagram of the hardware architecture of an electronic device provided in an embodiment of the present application.

[0077] Fig. 20 An exemplary schematic diagram of the software architecture of an electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0078] The terms used in the following embodiments of the present application are only for the purpose of describing specific embodiments, and are not intended to be used as limitations to the present application. As used in the specification of the present application, the singular expressions "one", "a kind of", "the", "above", "the" and "this" are intended to also include plural expressions, unless there is a clear indication to the contrary in the context. It should also be understood that the term "and / or" used in the present application refers to and includes any or all possible combinations of one or more listed items.

[0079] In the following, the terms "first" and "second" are used for descriptive purposes only and are not to be understood as suggesting or implying relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features, and in the description of the embodiments of the present application, unless otherwise specified, "plurality" means two or more.

[0080] The term "user interface (UI)" in the following embodiments of the present application refers to a medium interface for interaction and information exchange between an application or operating system and a user, which realizes the conversion between the internal form of information and the form acceptable to the user. The user interface is a source code written in a specific computer language such as Java and extensible markup language (XML). The interface source code is parsed and rendered on an electronic device, and finally presented as content that can be recognized by the user. The commonly used form of user interface is a graphical user interface (GUI), which refers to a user interface related to computer operation displayed in a graphical manner. It can be a visual interface element such as text, icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, widgets, etc. displayed on the display screen of an electronic device.

[0081] The interface is a medium interface for interaction and information exchange between the application and the user. Every time a vertical synchronization signal (Vsync-APP) arrives, the electronic device needs to generate the interface of the application for the foreground application. The frequency of the vertical synchronization signal is related to the refresh rate of the screen of the electronic device. For example, the frequency of the vertical synchronization signal is the same as the refresh rate of the screen of the electronic device.

[0082] That is, each time before the electronic device refreshes the content displayed on the screen, it needs to generate the interface of the application for the foreground application, so as to show the newly generated interface of the application to the user when the screen is refreshed.

[0083] Animation effects act on animation objects, which can be the interface (or window) of an application, or one or more controls (or views) of an application. From the user's perspective, an animation object includes one or more controls, and from the application's perspective, an animation object includes one or more views. Views are the basic elements that constitute the application interface, and a control on the application interface that the user sees can correspond to one or more views.

[0084] In the embodiments of the present application, unless otherwise specified, the meanings of controls and views may be the same.

[0085] From the perspective of time dimension, the continuous and smooth change of the animation object within a period of time (at least the interval length of two vertical synchronization signals) is the animation effect.

[0086] (1) Interface configured with animation effects and method for displaying animation effects provided in embodiments of the present application

[0087] (1.1) Interfaces configured with animation effects

[0088] In the embodiment of the present application, animation may include: animation effects acting on appearance, animation effects acting on position, animation effects based on transformation, and animation effects acting on content. Among them, the animation effects acting on appearance include: transparency, rounded corners, border color, border line width, background color, shadow, etc.; the animation effects acting on position include width / height configuration, x / y / z coordinates, x / y / z anchor points; the animation effects based on transformation include: translation, rotation, scaling, 3D transformation; the animation effects acting on content include: filter effects such as blur, color enhancement, grayscale change, adding noise, etc.

[0089] Among them, all animations can be used as configurable properties of the control. The properties of the control are used to determine the display mode of the control. The display mode includes the above-mentioned animation effects acting on appearance, animation effects acting on position, animation effects based on transformation, animation effects acting on content, etc.

[0090] The following is an exemplary introduction to an interface configured with animation effects.

[0091] Figure 1A , Figure 1B An exemplary schematic diagram of an interface provided for an embodiment of the present application.

[0092] like Figure 1A As shown, the interface displayed on the screen of the electronic device is the interface of the desktop application, and the interface of the desktop application includes a control 1A01. Among them, the control 1A01 includes an icon of the reading application.

[0093] The desktop application may also include icons of other applications, such as an icon of a gallery application, an icon of a dialing application, an icon of a message application, and an icon of a contact application.

[0094] In response to the user long pressing control 1A01, control 1A01 expands.

[0095] In the process of enlarging the control 1A01, the control 1A02 appears on the interface. The enlarging process of the control 1A01 is an animation. In the case where the control 1A02 is gradually displayed clearly (such as the change of transparency), the process of the control 1A02 gradually displaying clearly is also an animation.

[0096] Figure 2A , Figure 2B Another exemplary schematic diagram of an interface provided for an embodiment of the present application.

[0097] like Figure 2A As shown, the interface displayed on the screen of the electronic device is the interface of the desktop application, and the interface of the desktop application includes a control 2A01. Among them, the control 2A01 is a folder 1, including controls 2A02, 2A03, and 2A04. The control 2A02 is the icon of the game application, the control 2A03 is the icon of the flashlight application, and the control 2A04 is the icon of the gallery application.

[0098] In response to the user clicking on control 2A02, control 2A01 expands and moves, and controls 2A02, 2A03, and 2A04 expand and move.

[0099] Among them, the expansion and movement process of control 2A01, control 2A02, control 2A03, and control 2A04 is also an animation.

[0100] (1.2) How to display animation effects

[0101] accomplish Figure 1A , Figure 1B The interface shown needs to configure animation events for control 1A01; implement Figure 2A , Figure 2B The interface shown requires configuring animation events for controls 2A01, 2A02, 2A03, and 2A04.

[0102] Figure 3 An exemplary schematic diagram of an animation effect display method provided in an embodiment of the present application.

[0103] like Figure 3 As shown, the method for displaying animation effects may include four steps: step S301: creating animation event 1; step S302: after receiving the vertical synchronization signal, triggering the callback of animation event 1, and modifying the properties of the view according to the logic of animation event 1; step S303: measuring, layout, drawing (draw, which can also be called drawing in software rendering) to generate a rendering tree; step S304: receiving the rendering tree, and drawing a bitmap based on the rendering tree. Among them, the UI thread needs to execute steps S301, step S302, and step S303; the rendering thread needs to execute step S304. Among them, in the first frame of the animation effect, the electronic device needs to execute steps 301, step 302, step 303, and step 304, and in each frame within the duration of the animation effect, the electronic device needs to execute steps S302, step S303, and step S304.

[0104] Step S301: Create animation event 1

[0105] Animation events can be created at any time, depending on the logic of the application. For example, they can be created after receiving user input, message events sent to the application by other threads or processes, or network data request updates. Animation events include the internal logic for implementing animation effects, such as the end conditions of animation effects and the amount of modification to view properties for each frame during the duration of the animation effect.

[0106] After the animation event is created, a callback will be registered on the UI thread (equivalent to registering the animation event), such as registering a callback on the choreographer of the UI thread. This callback is used to trigger the UI thread to process the animation event each time the UI thread receives a vertical synchronization signal (Vsync-APP) and modify the view properties according to the logic of the animation event.

[0107] Among them, when the animation effect ends, the UI thread will actively cancel the callback registered by the animation event in the UI thread according to the logic of the animation event.

[0108] Step S302: After receiving the vertical synchronization signal, trigger the callback of animation event 1 and modify the properties of the view according to the logic of animation event 1

[0109] After receiving the vertical synchronization signal (Vsync-APP), the UI thread of the application Figure 3The vertical synchronization signal 1, vertical synchronization signal 2, and vertical synchronization signal 3 in the call process will process input events (CALLBACK_INPUT), animation events (CALLBACK_ANIMATION), traversal events (CALLBACK_TRAVERSAL), and submission events (CALLBACK_COMMIT) in turn.

[0110] When the application's UI thread processes animation events (such as doCallbacks(CALLBACK_ANIMATION)), it modifies the properties of the view according to the logic of the animation event.

[0111] For example, in Figure 1A and Figure 1B In the interface shown, the size of the control 1A02 is expanded from a rectangle with a width and height of 200px to a rectangle with a width and height of 300px, and the duration is 20 frames. Therefore, the size of the control 1A02 needs to be changed in each frame, that is, the first frame of the animation modifies the width and height of the view corresponding to the control 1A02 to a rectangle with a width and height of 205px, and the second frame of the animation modifies the width and height of the view corresponding to the control 1A02 to a rectangle with a width and height of 210px.

[0112] Step S303: Measure, layout, draw and record to generate a rendering tree

[0113] Changes in view properties trigger the UI thread to measure, lay out, and draw the application's interface. Measurement is used to determine the size of each view, layout is used to determine the layout of each view, and the drawing recording method is used to determine one or more drawing operations required to draw the application's bitmap and save them in the drawing instruction list of the render tree.

[0114] Among them, input events and animation events may affect the content of any one or more views on the application interface, so the main thread of the application needs to process input events and animation events first, and then process traversal events. In the process of processing traversal events, the main thread of the application measures, lays out, and draws the application interface, determines the properties of each view, and then determines the rendering node corresponding to each view, and generates a rendering tree. Among them, the rendering node includes rendering properties and a drawing instruction list (displaylist).

[0115] The rendering tree is a data structure generated by the UI thread and used to generate the application interface. That is, the rendering tree records all the information for generating a frame interface of the application. The rendering tree may include multiple rendering nodes, each of which includes rendering attributes and a drawing instruction list, and the drawing instruction list includes one or more drawing operations.

[0116] The drawing operation is a data structure used to draw graphics, such as drawing lines, drawing widths, drawing rectangles, drawing text, etc. When the drawing operation is executed in the rendering thread, it will be converted into API calls of the image processing library, such as OpenGL interface calls. For example, DrawLineOp is a data structure that contains drawing data such as line length, width, and other information, and can also contain the interface call corresponding to drawLineOP of the underlying graphics processing library.

[0117] Among them, the drawing instruction list can be a buffer, which records all the drawing operations included in one frame interface of the application or the identifiers of all drawing operations, such as addresses and serial numbers. When the application has multiple windows or is displayed on different display areas (display), multiple rendering trees need to be generated independently, in which multiple drawing instruction lists corresponding to different windows and display areas are generated independently. In an embodiment of the present application, the display area can be a screen, or it can be a virtual screen (VirtualDisplay), etc. The virtual screen can be the area where the electronic device is used to carry the content displayed on the screen when recording the screen.

[0118] Step S304: Receive a rendering tree and draw a bitmap based on the rendering tree

[0119] After the UI thread generates the render tree, it passes the render tree to the render thread, which then generates a bitmap based on the render tree. The render thread obtains a hardware canvas (HardwareCanvas) and performs drawing operations in the render tree on the hardware canvas to generate a bitmap. The bitmap is passed to the surface compositor (SurfaceFlinger) and the hardware compositing strategy module (Hardware Composer, HWC) to obtain the interface and generate it for display.

[0120] and Figure 3 The difference is that the embodiment of the present application provides another animation effect display method, such as Figure 4 shown.

[0121] Figure 4 An exemplary schematic diagram of another animation effect display method provided in an embodiment of the present application.

[0122] like Figure 4As shown, the method for displaying an animation effect may include five steps: step S401: creating an animation event 2; step S402: after receiving a vertical synchronization signal, obtaining description information of the end interface of the animation effect (also referred to as end frame description information) and description information of the duration of the animation effect from the animation event 2; step S403: measuring, laying out, and drawing the end interface of the animation effect to determine a rendering tree 1; step S404: receiving the rendering tree 1, the description information of the end interface of the animation effect, and the description of the duration of the animation effect; step S405: updating the rendering tree 1 based on the description information of the end interface of the animation effect and the description information of the duration of the animation effect, and generating a bitmap based on the updated rendering tree 1.

[0123] The UI thread needs to execute steps S401, S402, and S403; the rendering thread or rendering process needs to execute steps S404 and S405. In the first frame of the animation effect, the electronic device needs to execute steps S401, S402, S403, S404, and S405; in each frame within the duration of the animation effect, the electronic device needs to execute step S405. The rendering process can be a process independent of the application.

[0124] Step S401: Create animation event 2

[0125] The UI thread of the application creates an animation event 2 through the animation interface. The description of the animation interface can refer to the description in step S802 below, which will not be repeated here.

[0126] Unlike animation event 1, animation event 2 can register callbacks without registering on the UI thread during the duration of the animation effect.

[0127] The creation timing of animation event 2 can refer to the text description in step S301, which will not be repeated here.

[0128] Step S402: After receiving the vertical synchronization signal, obtain the description information of the end interface of the animation effect and the description information of the duration of the animation effect from animation event 2.

[0129] Different from step S302, after receiving the vertical synchronization signal, such as vertical synchronization signal 1, vertical synchronization signal 2, and vertical synchronization signal 3 in the figure, the UI thread obtains the description information of the end interface of the animation effect and the description information of the duration of the animation effect from animation event 2. In addition, the UI thread does not modify the properties of the view, and step S303 will not be triggered.

[0130] Optionally, in some embodiments of the present application, the UI thread can obtain description information of the step amount of the animation effect and description information of the duration of the animation effect from animation event 2; or, the UI thread can obtain description information of the end interface, description information of the step amount of the animation effect, etc. from animation event 2, which is not limited here.

[0131] It is worth noting that the UI thread can directly obtain the end interface of the animation effect from animation event 2; or, indirectly determine the end interface of the animation effect from animation event 2.

[0132] S403: Measure, lay out, and draw the end interface of the animation effect to determine the rendering tree 1

[0133] The UI thread actively measures, lays out, draws and records the end interface of the animation effect, and then generates a rendering tree 1. The UI thread synchronizes the rendering tree 1, the description information of the end interface of the animation effect, and the description information of the duration of the animation effect to the rendering thread.

[0134] Optionally, in some embodiments of the present application, the UI thread synchronizes the rendering tree 1, the description information of the duration of the animation effect, and the description information of the step amount of the animation effect to the rendering thread or the rendering process.

[0135] Optionally, in some embodiments of the present application, the UI thread synchronizes the rendering tree 1, the description information of the end interface of the animation effect, and the description information of the step amount of the animation effect to the rendering thread or the rendering process.

[0136] Optionally, in some embodiments of the present application, the UI thread synchronizes at least two of the description information of the end interface of the animation effect, the description information of the step amount of the animation effect, and the description information of the step amount of the animation effect to the rendering thread, but does not synchronize the rendering tree 1. In this case, in step S405, the rendering thread updates the rendering tree 0 based on the description information of the end interface of the animation effect and the description information of the duration of the animation effect, and the rendering tree 0 corresponds to the interface before the animation effect starts.

[0137] Optionally, in some embodiments of the present application, the UI thread can determine the properties of the view in each frame interface within the duration of the animation effect based on at least two of the description information of the end interface of the animation effect, the description information of the step amount of the animation effect, and the description information of the step amount of the animation effect, and then synchronize the property values ​​of the view in each frame interface within the duration of the animation effect and the rendering tree 1 to the rendering thread or rendering process.

[0138] Step S404: Receive rendering tree 1, description information of the end interface based on the animation effect, and description information of the duration of the animation effect

[0139] The rendering thread of the application can receive data sent by the UI thread through the message queue, and the rendering process can receive data sent by the UI thread through cross-process communication. The rendering process can also request and obtain data from the UI thread after independently requesting and receiving the vertical synchronization signal.

[0140] S405: Update the rendering tree 1 based on the description information of the end interface of the animation effect and the description information of the duration of the animation effect, and generate a bitmap based on the updated rendering tree 1

[0141] The rendering thread or rendering process of the application determines the view whose properties are changed based on the description information of the end interface of the animation effect and the interface before the animation effect starts. The rendering thread determines the step amount of the property based on the duration of the animation effect, and then determines the properties of the view in each frame interface within the duration of the animation effect.

[0142] For the generation process of a frame interface in an animation effect, the rendering thread or rendering process of the application can first determine the order of the frame in the animation effect, that is, the frame number of the animation effect. Further, the properties of the view on the frame interface can be determined, that is, the animation effect description information of the frame can be determined.

[0143] The frame number of the animation effect can be determined by the time of the frame, the frequency of the vertical synchronization signal, and the start time of the animation effect. The start time of the animation effect is the time of the vertical synchronization signal corresponding to the first frame interface of the animation effect, such as Figure 4 The vertical synchronization signal 1 in, or the start time of the animation effect can also be the moment of the animation triggering event, etc., which is not limited here.

[0144] After determining the properties of the view in each frame of the interface during the duration of the animation effect, the rendering thread can receive a vertical synchronization signal, such as Figure 4 The vertical synchronization signal 2 and the vertical synchronization signal 3 in the rendering tree 1 are used to update the parameters corresponding to the view attributes in the rendering tree 1, and then a bitmap is generated based on the updated rendering tree 1.

[0145] During the duration of the animation, for each frame except the first frame, the rendering thread or rendering process of the application only needs to execute step S405 to draw each frame interface of the animation effect, thereby displaying the animation effect.

[0146] It is worth noting that the execution of the UI thread and the rendering thread or rendering process can be triggered 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 can be vertical synchronization signals with the same period and different phases (with a fixed time difference).

[0147] Obviously, for Figure 3 In the animation effect display method shown in the figure, when the UI thread is blocked by other tasks, or the UI thread takes a long time to execute step S303, the rendering thread cannot generate a bitmap before the vertical synchronization signal 2 arrives, and frame drops and freezes may occur. Figure 4 The animation effect display method shown in the figure mainly updates the rendering tree by the rendering thread or the rendering process during the generation of each frame interface after the first frame within the duration of the animation, thereby generating a multi-frame interface within the duration of the animation. The UI thread does not participate or the amount of calculation or task undertaken by the UI thread is small. When the UI thread is blocked by other tasks, frame drops, freezes, etc. are not likely to occur.

[0148] In addition, for Figure 3 In the animation effect display method shown, when there are multiple animation events, different animation effects will conflict with each other, so that only one animation effect is displayed, which in turn causes the interface to jump, which is not conducive to the user experience.

[0149] The following is an illustrative introduction to the reasons why multiple animation effects conflict with each other and the interface jumps caused by multiple animation effects.

[0150] (1.3) Conflict of animation effects

[0151] Figure 5 An exemplary schematic diagram of animation effect conflict provided in an embodiment of the present application.

[0152] like Figure 5 As shown, the electronic device performs Figure 3 The process of the animation effect method shown includes:

[0153] S501: Create animation event 4

[0154] During the duration of animation effect 3, in response to user input, other messages, etc., the UI thread creates animation event 4 and registers a callback corresponding to animation event 4 in the UI thread.

[0155] S502: After receiving the vertical synchronization signal, trigger the callback of animation event 3 and the callback of animation event 4, modify the properties of the view according to the logic of animation event 3, and then modify the properties of the view according to the logic of animation event 4

[0156] After receiving vertical synchronization signal 1, the callback of animation event 3 and the callback of animation event 4 are triggered, and the UI thread modifies the properties of the view according to the logic of animation event 3 and the logic of animation event 4. In this case, the logic of animation event 4 may overwrite the modification of the view properties by animation event 3.

[0157] For example, the views modified by animation event 3 include view 1, and the views modified by animation event 4 include view 1. View 1 was a 20-pixel square before modification, the logic of animation event 3 modified view 1 to a 30-pixel square, and the logic of animation event 4 modified view 1 to a 15-pixel square. The UI thread modifies the properties of the view according to the logic of animation event 3 and the properties of view 1 according to the logic of animation event 4, and view 1 finally becomes a 15-pixel square.

[0158] In this case, the UI thread does not actually execute the logic of animation event 3, and the animation effect corresponding to animation effect event 3 is not displayed correctly, which will cause the interface to jump. 6A to 6F shown.

[0159] Then, step S303 and step S304 are executed. Then, step S303 and step S304 are executed. The contents of step S303 and step S304 can be referred to above. Figure 3 The corresponding text description will not be repeated here.

[0160] Figure 6A-6F An exemplary schematic diagram of interface changes under multiple animation conflicts provided in an embodiment of the present application.

[0161] like Fig. 6A As shown, the screen of the electronic device displays the interface of the desktop application. The interface of the desktop application includes a control 2A01, and the control 2A01 as a parent control can also include several child controls, such as control 2A02, control 2A03, and control 2A04.

[0162] The control 2A01 may be a folder or card on a desktop application, for example, Figure 6A-6E Among them, control 2A01 is folder 1, control 2A02 includes the icon of the game application, control 2A03 includes the icon of the flashlight application, and control 2A04 includes the icon of the gallery application.

[0163] in, Fig. 6A The interface shown can be considered as the interface before the animation effect 1 starts.

[0164] In response to the user clicking on control 2A01, the interaction may trigger animation effect 1. Animation effect 1 acts on controls 2A01, 2A02, 2A03, and 2A04, i.e., controls 2A01, 2A02, 2A03, and 2A04 are animation objects of animation effect 1, and animation effect 1 causes the size of the animation objects to gradually increase and their positions to move toward the center of the interface.

[0165] like Figure 6BAs shown, the size of the control 2A02 gradually increases, such as the height increases and / or the width increases, and the position changes. Figure 6B The interface shown includes the start interface of animation effect 1 and the middle interface of animation effect 1.

[0166] like Figure 6C As shown, as the size of the control 2A02 continues to increase, the interface displayed on the electronic device changes from the middle interface of animation effect 1 to the end interface of animation effect 1.

[0167] like Fig.6D As shown, before the animation effect 1 ends, the user clicks on a part of the desktop that does not belong to the control 2A01, or uses other interactive methods, such as a "back" interactive gesture, to return to the Fig. 6A The interface shown in the figure shows that the interaction will trigger animation effect 2. Animation effect 2 acts on controls 2A01, 2A02, 2A03, and 2A04, that is, controls 2A01, 2A02, 2A03, and 2A04 are animation objects of animation effect 2. The effect of animation effect 2 is to gradually reduce the size of the animation object and move it to the position of the animation object. Figure 1A The position of control 2A01 in the dialog box is moved.

[0168] Since animation effect 1 has not ended, animation effect 2 occurs at this time, and the animation objects of animation effect 1 and animation effect 2 have an intersection, and both animation effect 1 and animation effect 2 need to modify the size and position of the view corresponding to the animation object, resulting in a conflict between animation effect 1 and animation effect 2. In this case, the interface can be changed in two ways, namely Fig. 6E The interface shown and Fig. 6F The interface shown.

[0169] like Fig. 6E As shown, in response to the user clicking on a part of the desktop that does not belong to the control 2A01, or through other interactive methods, such as the "back" interactive gesture, the middle interface of animation effect 1 is used as the starting interface of animation effect 2, and the properties of the view are modified according to the logic of animation effect 2. For example, the change starts from the middle interface of animation effect 1 and then changes to the end interface of animation effect 2.

[0170] Or, if Fig. 6F As shown, in response to the user clicking on a portion of the desktop that does not belong to the control 2A01, or through other interaction methods, such as a "back" interaction gesture, the change of the electronic device display interface is divided into two steps:

[0171] Fig. 6F(1): The content displayed by the electronic device jumps directly from the middle interface of animation effect 1 to the end interface of animation effect 1.

[0172] Fig. 6F (2) in : In the next frame, the end interface of animation effect 1 is used as the start interface of animation effect 2, and gradually changes to the end interface of animation effect 2 according to the logic of animation effect 2. That is, in Fig. 6F In the process, the control 2A01 gradually becomes smaller until it changes to Fig. 6A The size shown, and the position of control 2A01 returns to Fig. 6A The location of control 2A01 is shown.

[0173] Obviously, when multiple animation effects conflict, the interface changes will jump, or the speed of interface changes will jump, resulting in incoherent interface changes that do not conform to the user's visual habits, such as Fig. 7A , Figure 7B , Figure 7C As shown, the user experience is reduced.

[0174] Fig. 7A , Figure 7B , Figure 7C An exemplary schematic diagram of view attribute changes in a multi-animation situation provided in an embodiment of the present application.

[0175] like Fig. 7A As shown, the estimated duration of animation effect 1 is T1 to T3, and the estimated duration of animation effect 2 is T2 to T4, wherein T1 is less than T2, T2 is less than T3, and T3 is less than T4. The estimated duration is the time configured by the application for the animation effect. Animation effect 1 will increase the height of the view; animation effect 2 will reduce the height of the view.

[0176] exist Fig. 7A In the case shown, the view properties change as follows Figure 7B or Figure 7C shown.

[0177] like Figure 7B As shown, from T1 to T2, the view properties change according to the logic of animation effect 1, for example, the height of the view increases linearly; at T2, due to the conflict between animation effect 1 and animation effect 2, the view properties such as the height jump; from T2 to T4, the view properties change according to the logic of animation effect 2, for example, the height of the view decreases linearly.

[0178] Obviously, at time T2, the view properties, such as height, change at the junction of animation effect 1 and animation effect 2.

[0179] like Figure 7CAs shown, from T1 to T2, the view properties change according to the logic of animation effect 1, for example, the height of the view increases linearly; at T2, due to the conflict between animation effect 1 and animation effect 2, they begin to change according to the logic of animation effect 2, for example, the height of the view decreases linearly.

[0180] Obviously, at time T2, the view properties at the junction of animation effect 1 and animation effect 2, such as the rate of change of height, jump. Figure 7B , Figure 7C In the example, the actual duration of animation effect 1 is T2-T1. The duration of animation effect 2 is from T2 to T4.

[0181] It is worth noting that, in addition to Fig. 7A , Figure 7B , Figure 7C As shown in the content, different types of animation effects may conflict with each other, which may also cause incorrect interface display or interface jump.

[0182] (2) Animation effect display method provided by the embodiment of the present application

[0183] The animation effect display method provided in the embodiment of the present application, first of all, the embodiment of the present application provides an animation interface for realizing the animation effect, and the animation interface can be in the form of one or more functions and methods. The application can set the properties of the control or the animation effect and other information through the animation interface, so that the animation framework provided by the present application generates the corresponding animation interface according to this information. Among them, the information that can be set in the animation interface includes: the end interface of the animation effect and the duration of the animation effect; or, the step amount description information of the animation effect and the duration of the animation effect; or, the step amount description information of the animation effect and the end interface description information of the animation effect, etc. The animation interface helps to reduce the workload of application developers. In addition, the developer of the application does not need to configure the interface of each frame during the animation effect, and the rendering thread or rendering process independently determines the interface of each frame during the animation effect.

[0184] The animation effect display method provided by the embodiment of the present application, secondly, during the display process of the animation effect, the properties of the view are not modified, but the animation parameters in the rendering properties of the rendering tree are added and modified to draw the interface of each frame during the continuous process of the animation effect. That is, the animation parameters can be parameters for updating the rendering tree, and can include the properties of the controls that have changed on a frame of the interface during the animation effect.

[0185] The animation effect display method provided by the embodiment of the present application, again, during the animation process, since it is not necessary to modify the properties of the view but to modify the parameters in the rendering properties of the rendering tree, the UI thread can no longer respond to animation events, as well as measurement, layout, and drawing recording, thereby helping to avoid frame drops. Among them, the rendering properties of the rendering tree are modified by the rendering thread or rendering process.

[0186] The animation effect display method provided in the embodiment of the present application, finally, in the case of a conflict between multiple animation effects, since the animation effect display method provided in the embodiment of the present application is based on modifying the displayed content of the end interface of the animation effect, it is possible to achieve continuous changes in the interface (or continuous speed of interface changes), thereby achieving a smoother interface and enhancing the user experience.

[0187] The following is an exemplary introduction to the animation effect display method provided in the embodiment of the present application.

[0188] (2.1) Process of animation effect display method

[0189] Figure 8 An example schematic diagram of the process of the animation effect display method provided in an embodiment of the present application.

[0190] like Figure 8 As shown, the process of the animation effect display method provided in the embodiment of the present application includes:

[0191] S801: The application's UI thread creates an animation event

[0192] Animation events can be created at any time, depending on the logic of the application. For example, animation events can be created after receiving user input, message events sent to the application by other threads or processes, or network data request updates. Animation events include the internal logic for implementing animation effects. For the sake of convenience, these messages that trigger the UI thread of the application to create animation events are called animation trigger events.

[0193] In the embodiment of the present application, after the animation event is created, a callback is registered on the choreographer of the UI thread of the application. The callback is used for the first vertical synchronization signal after the animation event is created to trigger the UI thread of the application to process the animation event.

[0194] In the following, in order to distinguish Figure 3 and Figure 4 In the animation event shown in the method, Figure 3 The animation event in the method is a non-implicit animation. Figure 4 The animation event in is an implicit animation. Among them, the animation event created by the application developer using the animation interface provided in the embodiment of the present application is an implicit animation.

[0195] It is worth noting that implicit animation and non-implicit animation are only for the convenience of comparison. Figure 3 and Figure 4 It is an abbreviation for the content in the text, and does not limit the animation events created by the animation interface in the embodiments of the present application.

[0196] Optionally, in some embodiments of the present application, the implicit animation can be converted to a non-implicit animation. The conversion process can occur during the installation or first launch of the application, or the conversion process can be sent during the compilation process, which is not limited here.

[0197] For example, non-implicit animations determine the drawing object, the callback of the vertical synchronization signal of each frame, the modification of the properties of the view, the end condition of the animation, etc. Among them, the callback of the vertical synchronization signal of each frame is used to trigger the UI thread to process the animation event when the animation does not meet the end condition. In this case, the process of converting the animation event to implicit animation can include the following two steps:

[0198] First, block or intercept the callback of the vertical synchronization signal of each frame of the non-implicit animation, so that the non-implicit animation will not modify the properties of the view and will not trigger the UI thread of the application to perform measurement, layout, drawing and recording.

[0199] Secondly, determine the parameters required for implicit animation. For example, by modifying the time information of the vertical synchronization signal (Vsync-APP), determine the end interface and duration of the animation. Or, for some non-implicit animations, you can directly determine the animation object, the step amount of each attribute of each animation object, the duration of the animation, the end interface of the animation, etc.

[0200] S802: After receiving the vertical synchronization signal, the UI thread of the application determines the end interface of the animation effect and the duration of the animation effect from the animation event.

[0201] After receiving the vertical synchronization signal, the UI thread of the application will process the animation event. The animation event is configured by the animation interface, and the format of the animation interface can be: the name of the animation interface (duration, end interface description information), the name of the animation interface (duration, change curve, end interface description information), the name of the animation interface (step description information, end interface description information), the name of the animation interface (duration, end interface description information), etc., which are not limited here.

[0202] The description of the end interface may include not only the position, size, transparency, etc. of the view, but also the theme (style). The description of the end interface may be an increment of the interface before the animation effect starts, such as how much the view 1 becomes wider.

[0203] The step amount description information may include the amount of change in the properties of the controls in the current interface to be rendered compared to the previous frame interface.

[0204] In the case where the format of the animation interface is: the name of the animation interface (duration, change curve, final interface), the animation interface can be:

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

[0206] view1.Height=800

[0207] view1.Width = 400

[0208] })

[0209] Among them, animateTo is the name of the animation interface, duration: 3000 means the duration is 3000ms, cure: Curve.Linear means the curve is a linear curve; "view1.Height=800view1.Width=400" means that the height of view1 in the end interface of the animation is 800 and the width is 400, which is the end frame description information of the animation.

[0210] The animation interface is one or more functions and methods provided by the system. The application developer can configure the animation effect for the control on the interface and configure the information of the animation effect by calling the animation interface. The information of the animation effect includes: the duration of the animation effect, the end frame description information of the animation effect, etc.

[0211] When the application is running, after receiving an animation trigger event, the application can provide the animation effect information to the system through the animation interface, and the system can then generate each frame interface of the animation process based on this information.

[0212] In this format, the electronic device can determine the animation object according to the difference between the ending interface of the animation and the interface before the start of the animation.

[0213] It is worth noting that the animation event can be registered for callback only once in the choreographer of the UI thread.

[0214] S803: The rendering process or the rendering thread of the application updates the rendering tree based on the end interface of the animation effect and the duration of the animation effect, and generates a bitmap based on the updated rendering tree

[0215] After determining the end interface of the animation effect and the duration of the animation effect, the UI thread can pass the end interface of the animation effect and the duration of the animation effect to the rendering process or the rendering thread of the application, and then the rendering process or the rendering thread of the application can determine the properties of the view in each frame interface within the duration of the animation effect, and then directly update the rendering tree and generate a bitmap based on the updated rendering tree.

[0216] In the process of generating a frame interface, the rendering process or the rendering thread of the application needs to determine the frame number of the current frame in the animation effect, and then determine the properties of the view on the frame interface. The rendering process or the rendering thread of the application can determine the frame number of the current frame in the animation effect by various methods such as the number of vertical synchronization signals that have been received and the time in the vertical synchronization signal, which are not limited here. Among them, the frame number of the current frame in the animation effect can also be referred to as the order of the frame in the animation effect. That is, the description information of the frame includes the properties of the view on the frame interface.

[0217] The interface that the application needs to display is composed of multiple nested views. Different views have a parent-child relationship, so the parent-child relationship between the rendering nodes of the rendering tree generated by traversing the views is the same as the parent-child relationship of the views. That is, the parent-child relationship between views determines the nesting relationship between different rendering nodes, and then the rendering thread can correctly render the application interface when generating a bitmap based on the rendering tree.

[0218] A view can correspond to one or more rendering nodes, and the root view (DecorView) corresponds to the root rendering node (RootRenderNode). That is, the nested relationship between rendering nodes corresponds to the parent-child relationship of views.

[0219] For example, the structure of the application interface is: the application's PhoneWindow carries a root view, the root view's subviews are view 1 and view 2, and the subviews of view 2 are view Figure 3 The structure of the rendering tree generated by the UI thread of the application is as follows: the root rendering node corresponding to PhoneWindow is the root node of the rendering 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 nodes of rendering node 2 are rendering nodes corresponding to view 1 and view 2. Figure 3 The corresponding rendering node 3. The corresponding relationship between the view and the rendering node means that the rendering node includes all drawing operations in the corresponding view. One view can correspond to one or more rendering nodes.

[0220] Combine the following Fig. 9 , Fig.10The content shown in the example introduces a method for determining the attributes of a view in each frame interface within the duration of an animation effect. Among them, the attributes of a view in a frame interface can also be called description information of a frame interface.

[0221] Fig. 9 An exemplary schematic diagram of determining an animation object provided in an embodiment of the present application.

[0222] like Fig. 9 As shown, the application interface includes view 1, view 2 and view Figure 3 , and view 1 and view 2 and view Figure 3 The horizontal (width direction of the view) spacing is fixed.

[0223] When view 2 is configured with an animation effect that changes the width from B1 to B2, where B2 is greater than B1 and greater than 0. Obviously, view 2 is an animation object that is not an implicit animation. However, by comparing the interface before the animation effect starts and the interface after the animation effect ends, the width of view 2 changes. Figure 3 The position of has changed. So, Figure 3 The method shown requires that the UI thread of the application needs to measure, lay out, draw and record after modifying the properties of the view according to the logic of the non-implicit animation, so as to ensure the correctness of the interface after the animation.

[0224] Obviously, compared Figure 4 as well as Figure 8 The method shown in the figure, due to view 2 and view Figure 3 If the properties of the view are changed, the animation object can be determined to be view 2 and view Figure 3 .

[0225] Optionally, in some embodiments of the present application, the animation object may change only in the middle interface of the animation effect, and will not change in the end interface of the animation and the interface before the start of the animation. The UI thread of the application can adjust the time information of the vertical synchronization signal to determine that the collection of views that have changed in each frame of the animation process is an animation object.

[0226] Fig.10 An exemplary schematic diagram of determining the attributes of a view in each frame interface provided in an embodiment of the present application.

[0227] like Fig.10 As shown, the animation event is an implicit animation, and the interface before the animation starts and the interface after the animation ends are determined. The main thread, rendering thread or rendering process of the application can compare the interface before the animation starts and the interface after the animation ends, and determine that the control that has changed is the animation object involved in the animation. For example, the animation object includes the control 2A01.

[0228] Among them, the position of control 2A01 changes from (x0, y0) to (x1, y1), that is, control 2A01 is the animation object involved in the animation event. In addition, the height / width of control 2A01 becomes S times the original, and the duration of the animation is 30 frames. Furthermore, the position and size of control 2A01 on each frame interface can also be determined. The Qth frame of control 2A01 (Q is calculated from the interface before the start of the animation) is (x0+Q*δX, y0+Q*δY), where δX=(x1-x0) / 30, δY=(y1-y0) / 30.

[0229] The value of each frame animation parameter is (x0+Q*δX, y0+Q*δY), and the step description information of the animation parameter can be δX=(x1-x0) / 30, δY=(y1-y0) / 30. That is, the animation parameter is information for determining the properties of the view on a frame interface in the animation effect, such as the description information of the end interface of the animation effect, the description information of the duration of the animation effect, etc., or the animation parameter is information of the properties of the view on a frame interface in the animation effect.

[0230] In the following text, for the convenience of description, animation parameters are used to refer to the properties of a view on a frame interface or the parameters used to determine the properties of a view on a frame interface, that is, animation parameters refer to the description information of a frame interface or animation parameters are parameters used to determine the description information of a frame interface.

[0231] The above introduces the process of determining animation parameters in the case of a single animation event. The following mainly introduces the process of determining animation parameters in the case of multiple animation events.

[0232] Optionally, in some embodiments of the present application, when the animation parameters of an animation object are modified by multiple animation events, vector superposition is performed based on the animation parameters independently determined for each animation event to determine the final animation parameters used to update the rendering tree in step S1002.

[0233] Optionally, in some embodiments of the present application, when the animation parameters of an animation object are modified by multiple animation effects, for example, when the animation parameters of an animation object are modified by animation effect 1 and animation effect 2 (animation effect 2 occurs during the duration of animation effect 1), animation effect 3 can be generated based on animation effect 1 and animation event 2, and the modification amount of the animation parameters can be determined based on the logic of animation effect 3, wherein the logic of animation effect 3 is determined by the logic of animation effect 1 and the effect of animation event 2.

[0234] The modification of the animation parameters by animation effect 3 makes the view attributes continuous within the duration of the animation effect; or, the further animation parameters are first-order differentiable; or, the further animation parameters are second-order differentiable, etc. The duration of animation effect 3 can be the intersection of the durations of animation effect 1 and animation effect 2, or the duration from the beginning 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.

[0235] It is worth noting that since the end interface of the animation effect and the interface before the start of the animation effect are known, the properties of each frame view within the duration of the animation effect can be determined through an interpolator, so that the properties of each frame view are continuous, first-order differentiable, and second-order differentiable as time changes.

[0236] The animation parameters may be determined by a rendering thread or a rendering process; or, they may be determined by a UI thread, and the value of each frame of the animation parameters may be passed to the rendering thread or the rendering process, which is used to communicate between the UI thread and the rendering thread and carry data on changes in the animation parameters, or carry an end interface for calculating changes in the animation parameters. The data may be called a Staging rendering tree.

[0237] Combine the following FIG. 11A to FIG. 11D The content shown exemplarily introduces the process of determining animation parameters in the case of multiple animations.

[0238] Figures 11A-11D An exemplary schematic diagram of animation parameter changes provided in an embodiment of the present application.

[0239] Fig.11A The content shown can be referred to Fig. 7A The contents shown will not be repeated here.

[0240] like Fig. 11B As shown, at T2, the application receives an animation trigger event corresponding to animation effect 2, and determines that animation effect 2 involves a modification of the height of the view, and then generates animation effect 3 to smooth the connection between animation effect 1 and animation effect 1.

[0241] The duration of animation effect 3 is the intersection of the durations of animation effect 1 and animation effect 2, that is, T2 to T3. Since the starting interface and the ending interface of animation effect 3 are known, animation effect 3 is an animation effect that connects animation effect 1 and animation effect 2. The modification of the properties of the view makes the properties of the view continuous or first-order differentiable or second-order differentiable between T2 and T3. The animation effect from T2 to T3 can be called a transition process.

[0242] like Fig. 11CAs shown, at T2, the application receives an animation trigger event corresponding to animation effect 2, and determines that animation effect 2 involves a modification of the height, and then generates animation effect 3 for smoothing the connection between animation 1 and animation 2.

[0243] Among them, the duration of animation effect 3 is from T2 to T4, the starting interface of animation effect 3 is the interface corresponding to animation effect 1 at T2, and the ending interface of animation effect 3 is the ending interface of animation effect 2. Therefore, animation effect 3 is an animation effect connecting animation effect 1 and animation effect 2, and the modification of the properties of the view makes the properties of the view continuous or first-order differentiable or second-order differentiable between T2 and T4.

[0244] like Fig.11D As shown, at T2, the application receives an animation trigger event corresponding to animation effect 2, and determines that animation effect 2 involves a modification of the height, and then generates animation effect 3 for smoothing the connection between animation 1 and animation 2.

[0245] The duration of animation effect 3 is from T3 to T4, the starting interface of animation effect 3 is the ending interface of animation effect 1, and the ending interface of animation effect 3 is the ending interface of animation effect 2. Therefore, animation effect 3 is an animation effect connecting animation effect 1 and animation effect 2, and the modification of the properties of the view makes the properties of the view continuous or first-order differentiable or second-order differentiable between T3 and T4.

[0246] Combine the following Fig. 11B The animation parameter changes shown in the figure introduce the changes in the application interface. The changes in the application interface are as follows: Fig. 12A , Fig. 12B shown.

[0247] Fig. 12A , Fig. 12B An exemplary schematic diagram of interface changes under multiple animations provided in an embodiment of the present application.

[0248] Figure 6A-6D ,as well as Fig. 12A , Fig. 12B A set of exemplary schematic diagrams of interface changes after an electronic device implements the animation effect display method provided in an embodiment of the present application.

[0249] in, Fig. 6A and Fig.6D The corresponding description has been made above and will not be repeated here.

[0250] like Fig. 12A As shown, after receiving the interaction of the user clicking on the desktop that does not belong to the control 2A01, or through other interaction methods, such as the "back" interaction gesture, the expansion speed of the control 2A01 slows down, and the movement speed slows down, corresponding to Figure 7B "Zoom in slower" in the menu.

[0251] It is worth noting that, since the changes to the animation parameters are actually discrete, in some embodiments of the present application, the Figure 7B Stop Transformation.

[0252] After T3 and before T4, the expansion speed of control 2A01 slows down, and then starts to shrink. The shrinking process of control 2A01 is as follows: Fig. 12B as well as Fig. 12B As shown in "Increase the zoom speed", the speed of control 2A01 increases continuously until it becomes constant.

[0253] Among them, the change of control 2A01 can be the same as the change of sub-controls of control 2A01.

[0254] in, Fig. 12A "Expanding and slowing down" and Fig. 12B The display process of "reducing with the reduction speed increasing first" is a transition process.

[0255] Understandably, FIG. 6A to FIG. 6D as well as Fig. 12A , Fig. 12B The interface changes shown are not only continuous but also first-order differentiable, which makes the interface changes smoother and can enhance the user experience.

[0256] There are many methods to implement step S803. The following uses step S8031, step S8032, and step S8033 as examples to introduce an implementation example of step S803.

[0257] S8031: The UI thread of the application performs measurement, layout, and drawing recording on the end interface of the animation effect to generate a first rendering tree

[0258] The UI thread of the application performs measurement, layout, drawing and recording on the ending interface of the animation effect to generate a first rendering tree, wherein the interface corresponding to the first rendering tree is the ending interface.

[0259] S8032: The rendering process or the UI thread of the application or the rendering thread of the application determines the animation parameters corresponding to each frame interface within the duration of the animation effect based on the end interface of the animation effect and the duration of the animation effect.

[0260] The rendering process or the UI thread of the application or the rendering thread of the application determines the animation parameters of the rendering tree corresponding to each frame interface within the duration of the animation effect based on the end interface of the animation effect, the duration of the animation effect, and the start time of the animation effect. The animation parameters can be located in the rendering properties of the rendering tree, and the animation parameters are used to modify the display mode of the view on the interface.

[0261] Optionally, in some embodiments of the present application, animation parameters can replace the animation effect that needs to be modified in the drawing instruction list, so that the drawing instruction list does not need to be changed during the duration of the animation effect, and the UI thread is not required to perform measurement, layout, and drawing recording to update the rendering tree.

[0262] The added animation parameters include: width (BOUDS_WIDTH), height (BOUNDS_HEIGHT), position (BOUNDS_POSITION), anchor point (PIVOT), rounded corners (Roundcorner), 2D transformation (TRANSLATE), 3D transformation (RATATION_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, FRAME_HEIGHT), content adaptive mode (Gravity), background filter (BACKGROUND_FILTER), content filter (CONTENT_FILTER), background and content filter (Filter), shadow color (SHADOW_COLOR), shadow offset (SHADOW_OFFSET_X, SHADOW_OFFSET_Y), shadow transparency (SHADOW_ALPHA), shadow radius (SHADOW_RADIUS), shadow path (SHADOW_PATH), mask (MASK).

[0263] Optionally, in some embodiments of the present application, step S8032 may be executed by a UI thread.

[0264] Since animation parameters are located in the rendering properties of the render tree and directly affect the way the view is displayed on the interface, the view properties during the animation process can be made continuous or first-order or second-order differentiable by making the animation parameters continuous or first-order or second-order differentiable. Fig. 9 and Fig.10 The corresponding text description will not be repeated here.

[0265] Since the interface changes are realized by modifying the animation parameters without the need for the application's UI thread to perform measurement, layout, drawing and recording, during the animation process, the application's UI thread may not process operations related to the animation, such as processing animation events, updating view properties, measuring, layout, drawing and recording, etc. The division of labor between the UI thread and the rendering thread or rendering process can refer to the content in (a) Determining the data flow of animation parameters below, which will not be repeated here.

[0266] Since during the animation process, the UI thread and the rendering thread of the application are independent of each other in the process of implementing the animation, the UI thread of the application notifies the rendering thread to update the animation parameters after receiving the vertical synchronization signal (Vsync-APP); or the rendering process independently requests the vertical synchronization signal (Vsync-Render), and the frequency of the vertical synchronization signal (Vsync-Render) and the vertical synchronization signal (Vsync-APP) may be different. The timing for the rendering thread or rendering process to start updating the animation parameters can refer to the content of (b) the timing for the rendering thread or rendering process to update the animation parameters below, which will not be repeated here. Among them, in order to distinguish the vertical synchronization signals received by different threads or processes, the vertical synchronization signal (Vsync-APP) refers to the vertical synchronization signal received by the UI thread, and the vertical synchronization signal (Vsync-Render) refers to the vertical synchronization signal received by the rendering thread or rendering process.

[0267] The following describes (a) when a rendering thread or rendering process updates the rendering tree and (b) how to modify the drawing instruction list.

[0268] (a) When the rendering thread or rendering process updates the rendering tree

[0269] Fig.13A , Fig. 13B , Fig. 13C An exemplary schematic diagram of the timing for a rendering thread or rendering process to update a rendering tree provided in an embodiment of the present application.

[0270] The rendering thread or rendering process can update the rendering tree as follows Fig.13A ,like Fig. 13B ,like Fig. 13C shown.

[0271] like Fig.13AAs shown, first, the UI thread executes step S1301: processes the animation event after receiving the vertical synchronization signal (Vsync-APP). Secondly, the UI thread executes step S1302: determines the final interface of the animation effect and the duration of the animation effect. Then, the UI thread executes step S1303: sends the final interface of the animation effect and the duration of the animation effect. Finally, the rendering thread of the rendering process or application executes step S1304 to update the rendering tree.

[0272] like Fig. 13B As shown, first, the UI thread executes step S1305: receiving a vertical synchronization signal (Vsync-APP); then, the UI thread executes step S1306: forwarding the vertical synchronization signal or other parameters indicating the triggering timing; finally, the rendering thread of the rendering process or application executes step S1304 to update the rendering tree.

[0273] like Fig. 13C As shown, the rendering process or the rendering thread of the application executes step S1307: receiving a vertical synchronization signal (Vsync-Render); then the rendering process or the rendering thread of the application executes step S1304: updating the rendering tree.

[0274] In the process of generating the first frame interface of the animation effect, the timing of updating the rendering tree by the rendering thread or rendering process can be as follows: Fig.13A As shown; in the process of generating the non-first frame interface of the animation effect, the timing of the rendering thread or rendering process updating the rendering tree can be as follows Fig.13A , Fig. 13B or Fig. 13C shown.

[0275] It is worth noting that when the UI thread of an application passes data to the rendering process, data interaction needs to be completed through inter-process communication (IPC). The application can implement IPC communication through methods such as Binder, AIDL, shared memory, Socket, etc., which are not limited here.

[0276] Fig.14 Another exemplary schematic diagram of the timing for a rendering thread to update animation parameters provided in an embodiment of the present application.

[0277] like Fig.14As shown, during the animation process, the rendering thread can independently request a vertical synchronization signal (Vsync-APP). During the T-Delay time of receiving the vertical synchronization signal (Vsync-APP), the UI thread does not transmit the information of updating the rendering tree to the rendering thread due to blocking or other reasons. After the T-Delay time, the rendering thread starts to update the rendering tree and generate the interface; during the T-Delay time of receiving the vertical synchronization signal (Vsync-APP), the UI thread processes input events or other logics (which may not include processing animation events), and can transmit the information of updating the rendering tree to the rendering thread. After receiving the information of updating the rendering tree, the rendering thread updates the rendering tree and generates the interface.

[0278] It can be understood that configuring a delay T-Delay for the rendering thread helps to quickly generate the changed interface caused by the changes caused by non-animation logic while implementing the animation.

[0279] The value of T-Delay may be smaller than the period of the vertical synchronization signal, or may be greater than or equal to the period of the vertical synchronization signal.

[0280] Optionally, in some embodiments of the present application, the rendering thread may lag behind one or more vertical synchronization signals (Vsync-APP) of the UI thread to update animation parameters and generate an interface. It is understandable that in this case, when the rendering thread lags behind one or more vertical synchronization signals (Vsync-APP) of the UI thread to update animation parameters, it may cause a delayed start of the animation, but benefiting from the increase in the maximum processing time for generating a single-frame interface, it helps to reduce the probability of frame drops.

[0281] The timing when the rendering process updates the animation parameters is different from the timing when the rendering thread updates the animation parameters. The rendering process independently requests a vertical synchronization signal (Vsync-Render). The frequency and time of the vertical synchronization signal (Vsync-Render) and the vertical synchronization signal (Vsync-APP) can be different or the same.

[0282] (b) Modification of drawing instruction list

[0283] Optionally, in some embodiments of the present application, when the drawing instruction lists of the interface before the start of an animation effect and the interface at the end of the animation effect are different, from the first frame of the animation effect to the end interface of the animation effect, the rendering tree corresponding to the end interface of the animation effect is used as a reference, and the interface is generated by modifying the animation parameters of the rendering tree, such as (i) the animation effect process without modifying the drawing instruction list below.

[0284] Optionally, in some embodiments of the present application, when the drawing instruction lists of the interface before the start of an animation effect and the interface at the end of the animation effect are different, from the first frame of the animation effect to the end interface of the animation effect, the rendering tree corresponding to the interface before the start of the animation effect is used as a reference, and the interface is generated by modifying the animation parameters of the rendering tree, such as (i) the animation effect process without modifying the drawing instruction list as described below.

[0285] Optionally, in some embodiments of the present application, when the drawing instruction lists of the interface before the start of the animation effect and the interface at the end of the animation effect are different, the drawing operations in the drawing instruction list and the animation effect parameter generation interface in the rendering tree can be modified by the rendering thread or the rendering process, as described in (ii) below, the animation effect process of modifying the drawing instruction list.

[0286] In some embodiments of the present application, when the interface of the application includes a text view (textview) or an image view (imageview), the drawing instruction list of the interface before the start of the animation effect and the drawing instruction list of the interface at the end of the animation effect may be different.

[0287] (i) Animation effect process without modifying the drawing instruction list

[0288] The drawing content of the interface at the end of the animation effect is different from that of the interface before the animation effect starts, which leads to different drawing instruction lists. In the animation effect display method provided in the embodiment of the present application, the drawing instruction list of the rendering tree of the final interface is used as the basis, and the rendering tree is updated by modifying the animation parameters to generate the interface, so as to achieve the following Fig.15A , Fig. 15B The interface shown.

[0289] Fig.15A , Fig. 15B An exemplary schematic diagram of the animation effect process provided in an embodiment of the present application.

[0290] like Fig.15A As shown, before the animation effect starts, the interface includes a control 1501, and the control 1501 carries the text "Please enter your account number". The control may include a text view 1 and a rectangular view, and the text view 1 carries the text "Please enter your account number", and the text view 1 is the same size as the control 1501.

[0291] Among them, the drawing operation in the drawing instruction list corresponding to text view 1 is drawText (please enter the account number).

[0292] When the control 1501 is configured with an animation effect, at the end interface of the animation effect, the width of the control 1501 becomes shorter, and the text "Please enter your account number" becomes two lines, the first line is "Please enter", and the second line is "Account number". That is, the control 1501 includes a text view 1, and the text view 1 carries "Please enter" and "Account number".

[0293] Among them, the drawing operations in the drawing instruction list corresponding to text view 1 are drawText(please enter) and drawText(account number).

[0294] Since updating the drawing instruction list requires the UI thread to measure, layout, and draw the interface in real time, in order to avoid updating the drawing instruction list during the animation effect, from the first frame interface of the animation effect to the end interface of the animation effect, the rendering tree of the end interface is used as the rendering tree of the animation effect parameter update and the generated interface. Fig. 15B shown.

[0295] like Fig. 15B As shown, during the duration of the animation effect, even if the width of the control 1501 is enough to accommodate the text "Please enter your account number" in one line, "Please enter your account number" is still presented in two lines of text, "Please enter" and "Account number" respectively. In this case, during the duration of the animation effect, the rendering node corresponding to the control 1501 is the rendering node 2, and the drawing operations included in the drawing instruction list of the rendering node 2 are: "drawText (please enter) and drawText (account number)".

[0296] That is, during the animation process, the drawing instruction list does not change, and the rendering thread or rendering process modifies the animation effect parameters to generate Fig. 15B In the interface shown, the width of the control 1501 gradually decreases, and the text is always divided into two lines.

[0297] (ii) Modify the animation effect process of the drawing instruction list

[0298] The drawing content of the end interface of the animation effect is different from that of the interface before the animation effect starts, which leads to a different drawing instruction list. The animation effect display method provided in the embodiment of the present application continuously modifies the drawing operations in the drawing instruction list and modifies the animation effect parameters to generate the interface during the process of generating the interface, so as to achieve the following example: Fig.16A , Fig. 16B The interface shown.

[0299] Fig.16A , Fig. 16B , Fig. 16C , Fig.16D , Fig.16E An exemplary schematic diagram of the animation effect process provided in an embodiment of the present application.

[0300] like Fig.16A As shown, the interface before the animation effect starts includes a control 1601, on which a picture 1 is carried, wherein the control 1601 may be an image view.

[0301] Among them, the drawing operation in the drawing instruction list corresponding to displaying Picture 1 on the control 1601 is drawBitmap (Picture 1, src, dst1), where Picture 1 is the source image, scr indicates the area where the source image needs to be displayed, and dst1 indicates the area on the control 1601 where the scr in Picture 1 is drawn.

[0302] When the control 1601 is configured with an animation effect, at the end interface of the animation effect, the width of the control 1601 decreases, and the width of the image view 1 decreases in the same proportion. The drawing operation in the drawing instruction list corresponding to the image view 1 is drawBitmap (picture 1, src, dstN).

[0303] For example, dst1=Rect(10,20,150,200), where (10,20) is the coordinate of the upper left corner of the rectangle, and (150,100) is the coordinate of the lower right corner of the rectangle; dstN=Rect(10,20,150,100).

[0304] During the animation effect, the rendering thread or rendering process updates the drawing operation corresponding to the control 1601 to achieve the following Fig. 16B The interface shown.

[0305] like Fig. 16B As shown, during the animation effect, the rendering thread or rendering process modifies the drawing operation and animation effect parameters in the rendering tree for each frame, thereby causing the width of the image view 1 to continuously decrease during the animation effect. The rendering thread or rendering process modifies the drawing operation such as: drawBitmap(picture 1, src, dst2), ..., drawBitmap(picture 1, src, dstN).

[0306] It is worth noting that the image processing strategy affects the way the rendering thread or rendering process modifies the drawing operation. The image processing strategy may include: CENTER (the image is displayed in the center, and if the image size exceeds the size of the view that carries the image, the image is cropped), CENTER_INSIDE (the image size is adjusted proportionally so that the image is complete and displayed in the center of the view that carries the image), FIT_CENTER (the image size is adjusted proportionally so that the image is not larger than the size of the view that carries the image, and is displayed in the center), FIT_END (the image size is adjusted proportionally so that the image is not larger than the size of the view that carries the image, and is displayed at the bottom), FIT_START (the image size is adjusted proportionally so that the image is not larger than the size of the view that carries the image, and is displayed at the top), FIT_XY (the image size is not adjusted proportionally so that the image is not larger than the size of the view that carries the image), etc., which are not limited here.

[0307] Among them, the above-mentioned CENTER, CENTER_INSIDE, FIT_CENTER, FIT_END, FIT_START, and FIT_XY can be realized by modifying the dst and src parameters in the drawing operation drawBitmap.

[0308] like Fig. 16C and Fig.16D As shown, the image carried by the control is scaled or cropped by modifying the drawing operation in the drawing instruction list to adapt to the size change of the control.

[0309] like Fig. 16C As shown, the control 1602 carries the image 1, wherein when the size of the control becomes smaller, the image can be scaled according to the change ratio of the control size, such as CENTER_INSIDE in the above text.

[0310] Or, if Fig.16D As shown, when the size of the control becomes smaller, the image can be cropped according to the change ratio of the control size. Fig.16E As shown, when the size of the control becomes larger, the image 1 can be enlarged to the size of the end interface of the animation effect, and then cut according to the size of the control to achieve the following Fig.16E The animation effect shown.

[0311] In summary, the rendering thread or rendering process can crop the image or other content carried by the control by modifying the drawing operation in the drawing instruction list according to the change of the control size, thereby realizing continuous interface changes.

[0312] S8033: The rendering process or the rendering thread of the application updates the rendering tree based on the animation parameters, and generates a bitmap based on the updated rendering tree

[0313] After obtaining the rendering tree with updated animation parameters, the rendering thread or rendering process can traverse the rendering tree and execute the drawing operations in the drawing instruction list on the canvas. Each time a drawing operation is executed, the rendering thread or rendering process can adjust the parameters of the drawing operation or adjust the graphics processing library call corresponding to the drawing operation in combination with the rendering properties of the rendering node to generate a bitmap.

[0314] In some embodiments of the present application, a rendering process or a rendering thread may call a GPU to draw and generate a bitmap; or, in some embodiments of the present application, a rendering process or a rendering thread may call a CPU to draw and generate a bitmap.

[0315] The bitmap will be obtained by the rendering process or surface compositor (SurfaceFlinger) to generate the interface after the layer is synthesized.

[0316] S804: Optionally, the rendering process or the rendering thread of the application synchronizes the properties of the view with the UI thread of the application

[0317] After the interface is generated, since the UI thread does not perceive the actual position and size of the control on the interface during the animation process, optionally, in some embodiments of the present application, the rendering thread or rendering process can send the position and size of the control to the UI thread of the application. The position and size of the control can be transmitted through a data structure such as a rendering tree, which is not limited here.

[0318] Fig.17 An exemplary schematic diagram of determining view properties by UI thread data provided in an embodiment of the present application.

[0319] like Fig.17 As shown, the steps of determining view properties by UI thread data include:

[0320] S1701: Determine and transmit information for updating the rendering tree

[0321] After determining the information for updating the rendering tree, the UI thread of the application may transmit the information for updating the rendering tree to the rendering process or the rendering thread of the application, such as the animation parameters of the rendering tree of each frame of the interface within the duration of the animation effect.

[0322] In the first frame of the animation effect, the UI thread of the application passes information used to update animation parameters, such as the duration of the animation effect, the animation object, the end interface of the animation effect, etc., to the rendering thread or rendering process.

[0323] During the display of the animation effect, excluding the first frame of the animation, the UI thread of the application may not transmit information for updating the animation parameters to the rendering thread or the rendering process.

[0324] During the display of animation effects, excluding the first frame of the animation, the UI thread of the application can pass the rendering tree that has been changed by input events or logic in other UI threads (excluding animation events) to the rendering thread or rendering process.

[0325] S1702: Determine and pass view properties

[0326] During the display of the animation effect, the rendering thread or rendering process determines the properties of the view, such as size and position, based on the rendering tree, and passes the size and properties of the view to the UI thread of the application, so that the UI thread of the application can determine the position and size of the view.

[0327] Optionally, in some embodiments of the present application, the rendering thread or rendering process may pass the position and size of the view and other properties to the UI thread of the application in response to a request from the UI thread of the application.

[0328] It is understandable that, during the display process of the animation effect, the UI thread of the application does not need to determine the properties of the view through measurement, layout, and drawing, thereby reducing the load of the UI thread of the application.

[0329] Finally, the following Fig.18A , Fig.18B , Fig. 18C The content shown is an example of an introduction Figure 3 and Figure 4 The difference between the two animation effect display methods shown.

[0330] Fig.18A Provided for the embodiments of this application Figure 3 An exemplary schematic diagram of the changes in the rendering tree during the execution of the method shown.

[0331] like Fig.18A As shown, before the animation effect 1 starts, a rendering tree 1 is stored in the rendering thread of the application, and a control 1A01 in the interface of the application is a 20-pixel square.

[0332] After animation effect 1 starts, the UI thread of the application receives vertical synchronization signal 1, determines that the size of control 1A01 in the first frame interface of animation effect 1 is 25 pixels * 25 pixels, then generates rendering tree 2 corresponding to the first frame interface of animation effect 1, and synchronizes rendering tree 2 to the rendering thread of the application. The rendering thread generates a bitmap based on rendering tree 2, and the size of control 1A01 in the bitmap is 25 pixels * 25 pixels.

[0333] Then, after receiving the vertical synchronization signal 2, the UI thread sets the size of the control 1A01 in the first frame interface of the animation effect 1 to 30 pixels * 30 pixels, generates the rendering tree 3 corresponding to the second frame interface of the animation effect 1, and synchronizes the rendering tree 3 to the rendering thread of the application. The rendering thread generates a bitmap based on the rendering tree 2, and the size of the control 1A01 in the bitmap is 30 pixels * 30 pixels.

[0334] Fig.18B , Fig. 18C Provided for the embodiments of this application Figure 4 An exemplary schematic diagram of the changes in the rendering tree during the execution of the method shown.

[0335] like Fig.18B As shown, before the animation effect, a rendering tree 1 is stored in the rendering thread of the application, and a control 1A01 in the interface of the application is a 20-pixel square.

[0336] After animation effect 1 starts, the UI thread of the application receives vertical synchronization signal 1, determines the logic of animation effect 1 as follows: control 1A01 becomes larger by 5 pixels per frame, and finally becomes 100 pixels*pixels, and generates rendering tree 2 based on the end interface of animation effect 1. Then the logic of animation effect 1 and rendering tree 2 are passed to the rendering process or the rendering thread of the application, which updates rendering tree 2 based on the logic of animation effect 1 and generates a bitmap based on the updated rendering tree 2. The size of control 1A01 in the bitmap is 25 pixels*25 pixels.

[0337] Then, after receiving the vertical synchronization signal 2, the rendering process or the rendering thread of the application updates the rendering tree 2 based on the logic of the animation effect 1, and generates a bitmap based on the updated rendering tree 2, in which the size of the control 1A01 is 30 pixels*30 pixels.

[0338] like Fig. 18C As shown, Fig.18B The difference is that the rendering process or the rendering thread of the application updates the rendering tree 1 based on the logic of the animation effect 1, wherein the size of the control 1A01 in the interface corresponding to the rendering tree 1 is 20 pixels*20 pixels.

[0339] (3) Electronic device provided in the embodiment of the present application

[0340] First, the hardware architecture of the electronic device provided in the embodiments of the present application is introduced.

[0341] Fig.19 An exemplary schematic diagram of the hardware architecture of an electronic device provided in an embodiment of the present application.

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

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

[0344] It is to be understood that the structure illustrated in the embodiment of the present invention does not constitute a specific limitation on the electronic device. In other embodiments of the present application, the electronic device may include more or fewer components than shown in the figure, or combine certain components, or split certain components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0345] 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 processor (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), etc. Different processing units may be independent devices or integrated into one or more processors.

[0346] The controller can generate operation control signals according to the instruction operation code and timing signal to complete the control of instruction fetching and execution.

[0347] The processor 110 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

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

[0349] The I2C interface is a bidirectional synchronous serial bus, including a serial data line (SDA) and a serial clock line (SCL). In some embodiments, the processor 110 may include multiple groups of I2C buses. The processor 110 may be coupled to the touch sensor 180K, the charger, the flash, the camera 193, etc. through different I2C bus interfaces. For example, the processor 110 may be coupled to the touch sensor 180K through the I2C interface, so that the processor 110 communicates with the touch sensor 180K through the I2C bus interface to realize the touch function of the electronic device.

[0350] The I2S interface can be used for audio communication. In some embodiments, the processor 110 can include multiple I2S buses. The processor 110 can be coupled to the audio module 170 via the I2S bus to achieve communication between the processor 110 and the audio module 170. In some embodiments, the audio module 170 can transmit an audio signal to the wireless communication module 160 via the I2S interface to achieve the function of answering a call through a Bluetooth headset.

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

[0352] The UART interface is a universal serial data bus for asynchronous communication. The bus can be a bidirectional communication bus. It converts the data to be transmitted between serial communication and parallel communication. In some embodiments, the UART interface is generally used to connect the processor 110 and the wireless communication module 160. For example, the processor 110 communicates with the Bluetooth module in the wireless communication module 160 through the UART interface to implement the Bluetooth function. In some embodiments, the audio module 170 can transmit an audio signal to the wireless communication module 160 through the UART interface to implement the function of playing music through a Bluetooth headset.

[0353] The MIPI interface can be used to connect the processor 110 with peripheral devices such as the display screen 194 and the camera 193. The MIPI interface includes a camera serial interface (CSI), a display serial interface (DSI), etc. In some embodiments, the processor 110 and the camera 193 communicate via the CSI interface to realize the shooting function of the electronic device. The processor 110 and the display screen 194 communicate via the DSI interface to realize the display function of the electronic device.

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

[0355] The USB interface 130 is an interface that complies with the USB standard specification, and specifically can be a Mini USB interface, a Micro USB interface, a USB Type C interface, etc. The USB interface 130 can be used to connect a charger to charge an electronic device, and can also be used to transfer data between an electronic device and a peripheral device. It can also be used to connect headphones to play audio through the headphones. The interface can also be used to connect other electronic devices, such as AR devices, etc.

[0356] It is understandable that the interface connection relationship between the modules illustrated in the embodiment of the present invention is only a schematic illustration and does not constitute a structural limitation of the electronic device. In other embodiments of the present application, the electronic device may also adopt different interface connection methods in the above embodiments, or a combination of multiple interface connection methods.

[0357] The charging management module 140 is used to receive charging input from a charger. The charger may be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 may receive charging input from a wired charger through the USB interface 130. In some wireless charging embodiments, the charging management module 140 may receive wireless charging input through a wireless charging coil of an electronic device. While the charging management module 140 is charging the battery 142, it may also power the electronic device through the power management module 141.

[0358] The power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, and supplies power to the processor 110, the internal memory 121, the display screen 194, the camera 193, and the wireless communication module 160. The power management module 141 can also be used to monitor parameters such as battery capacity, battery cycle number, battery health status (leakage, impedance), etc. In some other embodiments, the power management module 141 can also be set in the processor 110. In other embodiments, the power management module 141 and the charging management module 140 can also be set in the same device.

[0359] The wireless communication function of the electronic device can be implemented through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor.

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

[0361] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G, etc., applied to electronic devices. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, and filter, amplify, and process the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the same device as at least some of the modules of the processor 110.

[0362] The modem processor may include a modulator and a demodulator. Among them, the modulator is used to modulate the low-frequency baseband signal to be sent into a medium-high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After the low-frequency baseband signal is processed by the baseband processor, it is passed to the application processor. The application processor outputs a sound signal through an audio device (not limited to a speaker 170A, a receiver 170B, etc.), or displays an image or video through a display screen 194. In some embodiments, the modem processor may be an independent device. In other embodiments, the modem processor may be independent of the processor 110 and be set in the same device as the mobile communication module 150 or other functional modules.

[0363] The wireless communication module 160 can provide wireless communication solutions including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc., which are applied to electronic devices. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, modulates the frequency of the electromagnetic wave signal and performs filtering, and sends the processed signal to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, modulate the frequency of it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0364] In some embodiments, the antenna 1 of the electronic device is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device can communicate with the network and other devices through wireless communication technology. The wireless communication technology may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time division code division multiple access (TD-SCDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technology. The GNSS may include global positioning system (GPS), global navigation satellite system (GLONASS), Beidou navigation satellite system (BDS), quasi-zenith satellite system (QZSS) and / or satellite based augmentation system (SBAS).

[0365] The electronic device implements the display function through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, which connects the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

[0366] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD). The display panel can also be made of an organic light-emitting diode (OLED), an active-matrix organic light emitting diode or an active-matrix organic light emitting diode (AMOLED), a flexible light-emitting diode (FLED), miniled, microled, micro-oled, quantum dot light emitting diodes (QLED), etc. In some embodiments, the electronic device may include 1 or N display screens 194, where N is a positive integer greater than 1.

[0367] The electronic device can realize the shooting function through ISP, camera 193, video codec, GPU, display screen 194 and application processor.

[0368] ISP is used to process the data fed back by camera 193. For example, when taking a photo, the shutter is opened, and the light is transmitted to the camera photosensitive element through the lens. The light signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to ISP for processing and converts it into an image visible to the naked eye. ISP can also perform algorithm optimization on the noise, brightness, and color of the image. ISP can also optimize the exposure, color temperature and other parameters of the shooting scene. In some embodiments, ISP can be set in camera 193.

[0369] The camera 193 is used to capture still images or videos. The object generates an optical image through the lens and projects it onto the photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then passes the electrical signal to the ISP to be converted into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV or other format. In some embodiments, the electronic device may include 1 or N cameras 193, where N is a positive integer greater than 1.

[0370] Digital signal processors are used to process digital signals. In addition to processing digital image signals, they can also process other digital signals. For example, when an electronic device selects a frequency point, a digital signal processor is used to perform Fourier transform on the frequency point energy.

[0371] Video codecs are used to compress or decompress digital videos. Electronic devices can support one or more video codecs. In this way, electronic devices can play or record videos in multiple coding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

[0372] NPU is a neural network (NN) computing processor. By drawing on the structure of biological neural networks, such as the transmission mode between neurons in the human brain, it can quickly process input information and continuously self-learn. NPU can realize applications such as intelligent cognition of electronic devices, such as image recognition, face recognition, voice recognition, text understanding, etc.

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

[0374] 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, the fifth generation DDR SDRAM is generally referred to as DDR5 SDRAM), etc.

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

[0376] Flash memory can be divided into NOR FLASH, NAND FLASH, 3D NAND FLASH, etc. according to the operating principle; single-level cell (SLC), multi-level cell (MLC), triple-level cell (TLC), quad-level cell (QLC), etc. according to the storage unit potential level; universal flash storage (UFS), embedded multi media card (eMMC), etc. according to the storage specification.

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

[0378] The non-volatile memory may also store executable programs and user and application data, etc., and may be loaded into the random access memory in advance for direct reading and writing by the processor 110 .

[0379] The external memory interface 120 can be used to connect to an external non-volatile memory to expand the storage capacity of the electronic device. The external non-volatile memory communicates with the processor 110 through the external memory interface 120 to implement a data storage function. For example, files such as music and videos are stored in the external non-volatile memory.

[0380] The electronic device can implement audio functions such as music playing and recording through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor.

[0381] The audio module 170 is used to convert digital audio information into analog audio signal output, and is also used to convert analog audio input into digital audio signals. The audio module 170 can also be used to encode and decode audio signals. In some embodiments, the audio module 170 can be arranged in the processor 110, or some functional modules of the audio module 170 can be arranged in the processor 110.

[0382] The speaker 170A, also called a "speaker", is used to convert an audio electrical signal into a sound signal. The electronic device can listen to music or listen to a hands-free call through the speaker 170A.

[0383] The receiver 170B, also called a "earpiece", is used to convert audio electrical signals into sound signals. When the electronic device receives a call or voice message, the voice can be received by placing the receiver 170B close to the human ear.

[0384] Microphone 170C, also called "microphone" or "microphone", is used to convert sound signals into electrical signals. When making a call or sending a voice message, the user can speak by putting their mouth close to the microphone 170C to input the sound signal into the microphone 170C. The electronic device can be provided with at least one microphone 170C. In other embodiments, the electronic device can be provided with two microphones 170C, which can not only collect sound signals but also realize noise reduction function. In other embodiments, the electronic device can also be provided with three, four or more microphones 170C to realize the collection of sound signals, noise reduction, identification of sound sources, and directional recording function, etc.

[0385] The earphone interface 170D is used to connect a wired earphone and can be a USB interface 130 or a 3.5 mm open mobile terminal platform (OMTP) standard interface or a cellular telecommunications industry association of the USA (CTIA) standard interface.

[0386] The pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal. In some embodiments, the pressure sensor 180A can be set on the display screen 194. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, capacitive pressure sensors, etc. The capacitive pressure sensor can be a parallel plate including at least two conductive materials. When a force acts on the pressure sensor 180A, the capacitance between the electrodes changes. The electronic device determines the intensity of the pressure based on the change in capacitance. When a touch operation acts on the display screen 194, the electronic device detects the touch operation intensity according to the pressure sensor 180A. The electronic device can also calculate the touch position according to the detection signal of the pressure sensor 180A. In some embodiments, touch operations acting on the same touch position but with different touch operation intensities can correspond to different operation instructions. For example: when a touch operation with a touch operation intensity less than the first pressure threshold acts on the short message application icon, an instruction to view the short message is executed. When a touch operation with a touch operation intensity greater than or equal to the first pressure threshold acts on the short message application icon, an instruction to create a new short message is executed.

[0387] The gyro sensor 180B can be used to determine the motion posture of the electronic device. In some embodiments, the angular velocity of the electronic device around three axes (i.e., x, y, and z axes) can be determined by the gyro sensor 180B. The gyro sensor 180B can be used for anti-shake shooting. For example, when the shutter is pressed, the gyro sensor 180B detects the angle of the electronic device shaking, calculates the distance that the lens module needs to compensate based on the angle, and allows the lens to offset the shaking of the electronic device through reverse movement to achieve anti-shake. The gyro sensor 180B can also be used for navigation and somatosensory game scenes.

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

[0389] The magnetic sensor 180D includes a Hall sensor. The electronic device can use the magnetic sensor 180D to detect the opening and closing of the flip leather case. In some embodiments, when the electronic device is a flip phone, the electronic device can detect the opening and closing of the flip cover according to the magnetic sensor 180D. Then, according to the detected opening and closing state of the leather case or the opening and closing state of the flip cover, the flip cover can be automatically unlocked.

[0390] The acceleration sensor 180E can detect the magnitude of the acceleration of the electronic device in all directions (generally three axes). When the electronic device is stationary, it can detect the magnitude and direction of gravity. It can also be used to identify the posture of the electronic device and is applied to applications such as horizontal and vertical screen switching and pedometers.

[0391] The distance sensor 180F is used to measure the distance. The electronic device can measure the distance by infrared or laser. In some embodiments, when shooting a scene, the electronic device can use the distance sensor 180F to measure the distance to achieve fast focusing.

[0392] The proximity light sensor 180G may include, for example, a light emitting diode (LED) and a light detector, such as a photodiode. The light emitting diode may be an infrared light emitting diode. The electronic device emits infrared light outward through the light emitting diode. The electronic device uses a photodiode to detect infrared reflected light from nearby objects. When sufficient reflected light is detected, it can be determined that there is an object near the electronic device. When insufficient reflected light is detected, the electronic device can determine that there is no object near the electronic device. The electronic device can use the proximity light sensor 180G to detect when the user holds the electronic device close to the ear to talk, so as to automatically turn off the screen to save power. The proximity light sensor 180G can also be used in leather case mode and pocket mode to automatically unlock and lock the screen.

[0393] The ambient light sensor 180L is used to sense the ambient light brightness. The electronic device can adaptively adjust the brightness of the display screen 194 according to the perceived ambient light brightness. The ambient light sensor 180L can also be used to automatically adjust the white balance when taking pictures. The ambient light sensor 180L can also cooperate with the proximity light sensor 180G to detect whether the electronic device is in a pocket to prevent accidental touch.

[0394] The fingerprint sensor 180H is used to collect fingerprints. Electronic devices can use the collected fingerprint characteristics to achieve fingerprint unlocking, access application locks, fingerprint photography, fingerprint call answering, etc.

[0395] The temperature sensor 180J is used to detect temperature. In some embodiments, the electronic device uses the temperature detected by the temperature sensor 180J to execute a temperature processing strategy. For example, when the temperature reported by the temperature sensor 180J exceeds a threshold, the electronic device reduces the performance of a processor located near the temperature sensor 180J to reduce power consumption and implement thermal protection. In other embodiments, when the temperature is lower than another threshold, the electronic device heats the battery 142 to avoid abnormal shutdown of the electronic device due to low temperature. In other embodiments, when the temperature is lower than another threshold, the electronic device boosts the output voltage of the battery 142 to avoid abnormal shutdown due to low temperature.

[0396] The touch sensor 180K is also called a "touch control device". The touch sensor 180K can be set on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, also called a "touch control screen". The touch sensor 180K is used to detect touch operations acting on or near it. The touch sensor can pass the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194. In other embodiments, the touch sensor 180K can also be set on the surface of the electronic device, which is different from the position of the display screen 194.

[0397] The bone conduction sensor 180M can obtain a vibration signal. In some embodiments, the bone conduction sensor 180M can obtain a vibration signal of a vibrating bone block of the vocal part of the human body. The bone conduction sensor 180M can also contact the human pulse to receive a blood pressure beat signal. In some embodiments, the bone conduction sensor 180M can also be set in an earphone and combined into a bone conduction earphone. The audio module 170 can parse out a voice signal based on the vibration signal of the vibrating bone block of the vocal part obtained by the bone conduction sensor 180M to realize a voice function. The application processor can parse the heart rate information based on the blood pressure beat signal obtained by the bone conduction sensor 180M to realize a heart rate detection function.

[0398] The key 190 includes a power key, a volume key, etc. The key 190 can be a mechanical key or a touch key. The electronic device can receive key input and generate key signal input related to user settings and function control of the electronic device.

[0399] Motor 191 can generate vibration prompts. Motor 191 can be used for incoming call vibration prompts, and can also be used for touch vibration feedback. For example, touch operations acting on different applications (such as taking pictures, audio playback, etc.) can correspond to different vibration feedback effects. For touch operations acting on different areas of the display screen 194, motor 191 can also correspond to different vibration feedback effects. Different application scenarios (for example: time reminders, receiving messages, alarm clocks, games, etc.) can also correspond to different vibration feedback effects. The touch vibration feedback effect can also support customization.

[0400] Indicator 192 may be an indicator light, which may be used to indicate charging status, power changes, messages, missed calls, notifications, etc.

[0401] The SIM card interface 195 is used to connect a SIM card. The SIM card can be connected to and separated from the electronic device by inserting it into the SIM card interface 195 or pulling it out from the SIM card interface 195. The electronic device can support 1 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 can be inserted into the same SIM card interface 195 at the same time. The types of the multiple cards can be the same or different. The SIM card interface 195 can also be compatible with different types of SIM cards. The SIM card interface 195 can also be compatible with external memory cards. The electronic device interacts with the network through the SIM card to implement functions such as calls and data communications. In some embodiments, the electronic device uses an eSIM, i.e., an embedded SIM card. The eSIM card can be embedded in the electronic device and cannot be separated from the electronic device.

[0402] Secondly, the software architecture of the electronic device provided in the embodiment of the present application is introduced.

[0403] Fig. 20 An exemplary schematic diagram of the software architecture of an electronic device according to an embodiment of the present application.

[0404] like Fig. 20 As shown, the layered architecture divides the software into several layers, each with clear roles and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the system is divided into four layers, from top to bottom, namely, the application layer, the application framework layer, the system library, and the kernel layer.

[0405] The application layer can include a series of application packages. Fig. 20As shown, the application package may include camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message and other applications (also referred to as applications).

[0406] The application framework layer provides an application programming interface (API) and a programming framework for the applications in the application layer. The application framework layer includes some predefined functions.

[0407] like Fig. 20 As shown, the application framework layer may include window management services, display management services, content providers, view systems, phone managers, resource managers, notification managers, local profile management assistants (LPA), and the like.

[0408] The window management service is responsible for starting, adding, and deleting windows. It can determine the application displayed on the window and the creation, destruction, and property changes of the application's layer, determine whether there is a status bar, lock the screen, take screenshots, etc.

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

[0410] Content providers are used to store and retrieve data and make it accessible to applications. The data may include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

[0411] The phone manager is used to provide communication functions for electronic devices, such as the management of call status (including answering, hanging up, etc.).

[0412] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0413] The notification manager enables applications to display notification information in the status bar. It can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of a chart or scroll bar text, such as notifications from applications running in the background, or a notification that appears on the screen in the form of a dialogue interface. For example, a text message is displayed in the status bar, a prompt sound is emitted, an electronic device vibrates, an indicator light flashes, etc.

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

[0415] The application framework layer may also include an animation system.

[0416] like Fig. 20 As shown, the animation system executes the animation effect display method provided in the embodiment of the present application, including:

[0417] S2001: Configuring animation effects through the animation interface

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

[0419] S2002: Determine the duration of the animation effect, the end frame description information of the animation effect, etc.

[0420] After the application starts running and receives an animation trigger event, the animation system can determine the duration of the animation effect, the end frame description information of the animation effect, and so on.

[0421] S2003: Determine the description information of each frame within the duration of the animation effect

[0422] Then the animation system can determine the description information of the current frame to be rendered based on the duration of the animation effect, the end frame description information of the animation effect, the start time of the animation effect and the time of the current frame to be rendered. The description information of the current frame to be rendered includes the properties of the controls on the frame.

[0423] S2004: Update the rendering tree based on the description information of each frame

[0424] The animation system then updates the render tree based on the description of the frame currently being rendered.

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

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

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

[0428] The application layer and the application framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection.

[0429] The system library may include multiple functional modules, such as a surface manager, a media library, and a graphics processing library, wherein the graphics processing library includes a 3D graphics processing library (such as OpenGLES), a 2D graphics engine (such as SGL), and the like.

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

[0431] The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0432] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, layer synthesis, and layer processing, etc. The 2D graphics engine is a drawing engine for 2D drawing.

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

[0434] As used in the above embodiments, the term "when..." may be interpreted to mean "if..." or "after..." or "in response to determining..." or "in response to detecting...", depending on the context. Similarly, the phrases "upon determining..." or "if (the stated condition or event) is detected" may be interpreted to mean "if determining..." or "in response to determining..." or "upon detecting (the stated condition or event)" or "in response to detecting (the stated condition or event)", depending on the context.

[0435] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function according to the embodiment of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from a website site, a computer, a server or a data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server, a data center, etc. that contains one or more available media integration. The available medium can be a magnetic medium, (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state hard disk), etc.

[0436] Those skilled in the art can understand that to implement all or part of the processes in the above-mentioned embodiments, the processes can be completed by computer programs to instruct related hardware, and the programs can be stored in computer-readable storage media. When the programs are executed, they can include the processes of the above-mentioned method embodiments. The aforementioned storage media include: ROM or random access memory RAM, magnetic disk or optical disk and other media that can store program codes.

Claims

1. A method for displaying animation effects, applied to electronic equipment, characterized in that: include: After receiving the animation trigger event, the UI thread of the application determines the duration of the first animation effect, the start time of the first animation effect, the end frame description information of the first animation effect and the change information of the first animation effect according to the information of the first animation effect of the first control group set by the application, and determines the first rendering tree of the end frame of the first animation effect, 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; the change information of the first animation effect includes any one of the change curve of the first animation effect, the step amount description information of the first animation effect, and the difference between the end frame of the first animation effect and the interface before the start of the first animation effect; the step amount description information of the first animation effect includes the change amount of the property of the control between two adjacent frames in the first animation effect; The UI thread of the application sends the first rendering tree, the duration of the first animation effect, the start time of the first animation effect, the end frame description information of the first animation effect, and the change information of the first animation effect to the rendering thread or rendering process of the application; During the duration of the first animation effect, when the rendering thread or the rendering process receives the first vertical synchronization signal, the rendering thread or the rendering process determines the description information of the target frame corresponding to the first vertical synchronization signal according to the start time of the first animation effect, the duration of the first animation effect, the moment when the first vertical synchronization signal is received, the end frame description information of the first animation effect, and the change information of the first animation effect, wherein the target frame is any frame in the first animation effect; The rendering thread or the rendering process updates the first rendering tree according to the description information of the target frame; The rendering thread or the rendering process generates display data of the target frame based on the updated first rendering tree.

2. The method according to claim 1, characterized in that The information of the first animation effect is configured by the application through an animation interface provided by the system.

3. The method according to claim 1, characterized in that The method further comprises: The UI thread determines the properties of the control in the end frame of the first animation effect based on the end frame description information of the first animation effect; The UI thread compares the properties of the controls in the end frame of the first animation effect with the properties of the controls before the first animation effect starts to determine a second control group, where the second control group is controls whose properties change during the duration of the first animation effect, and the second control group includes the first control group; The first control group is displayed with the first animation effect, and other controls in the second control group except the first control group are displayed with the second animation effect. The animation triggering event is also used to trigger the display of the second animation effect.

4. The method according to claim 3, characterized in that The description information of the target frame is also used to determine the properties of the controls in the second control group in the target frame, and the properties of the controls include at least one of the size of the controls, the position of the controls, and the transparency of the controls.

5. The method according to claim 3, characterized in that: The rendering thread or the rendering process updates the first rendering tree according to the description information of the target frame, specifically including: The rendering thread or the rendering process updates the first rendering tree according to properties of controls in the second control group in the target frame.

6. The method according to claim 5, characterized in that The method further comprises: The second control group includes a third control; The rendering thread or the rendering process adjusts the size of the content carried on the third control according to the size of the third control and a preconfigured strategy, where the carried content includes at least one of an image and text.

7. The method according to claim 6, characterized in that The third control is an image control ImageView, and the content carried by the third control is the first image; The strategy includes: comparing the size of the third control with the size of the first image, and performing cropping or scaling on the first image.

8. The method according to claim 6, characterized in that The third control is a text control TextView, and the content carried by the third control is the first text; The strategy includes: comparing the width of the third control with the width of the first text, and performing line separation or line merging on the first text.

9. The method according to claim 1 or 2, characterized in that: After receiving the animation trigger event, the UI thread of the application determines the duration of the first animation effect, the start time of the first animation effect, the end frame description information of the first animation effect, and the change information of the first animation effect according to the information of the first animation effect of the first control group set by the application, the method further includes: The UI thread cancels 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.

10. The method according to claim 1 or 2, characterized in that: The method further comprises: During the duration of the first animation effect, the rendering thread or the rendering process determines a second parameter, where the second parameter includes a size and a position of a control in the first control group; The rendering thread or the rendering process sends the second parameter to the UI thread; The UI thread determines the size and position of controls in the first control group based on the second parameter.

11. The method according to claim 1 or 2, characterized in that: The animation triggering event includes at least one of user interaction, network status change, and a message sent to the application by other applications on the electronic device.

12. An electronic device, characterized in that: The electronic device comprises: one or more processors and a memory; The memory is coupled to the one or more processors, and the memory is used to store computer program codes, wherein the computer program codes include computer instructions, and the one or more processors call the computer instructions to enable the electronic device to execute the method according to any one of claims 1 to 11.

13. A chip system, applied to an electronic device, the chip system comprising one or more processors, the processors being used to call computer instructions so that the electronic device executes the method as described in any one of claims 1-11.

14. A computer-readable storage medium comprising instructions, characterized in that: When the instructions are executed on an electronic device, the electronic device is caused to execute the method as claimed in any one of claims 1 to 11.

15. A computer program product comprising computer readable instructions which, when executed by one or more processors, implement the method of any one of claims 1-11.

Images