WO2023066165A1

WO2023066165A1 - Animation effect display method and electronic device

Info

Publication number: WO2023066165A1
Application number: PCT/CN2022/125463
Authority: WO
Inventors: 张朋; 王亮; 金成铭; 赵啸宇; 陈路路
Original assignee: 华为技术有限公司
Priority date: 2021-10-18
Filing date: 2022-10-14
Publication date: 2023-04-27
Also published as: CN115994006A

Abstract

The present application relates to the technical field of electronics and provides an animation effect display method and an electronic device. According to the animation effect display method provided by the present application, under the condition that the animation effects conflict, an animation effect is newly generated to smooth the overlapping position or the connection position of two animation effects, so that the size, position, transparency and other attributes of a control on an interface do not jump, but the change in the control on the interface is continuous, and thus the animation effect is smoother.

Description

Animation effect display method and electronic device

This application claims the priority of the Chinese patent application with the application number 202111211546.8 and the application title "A Method for Improving the Coherence of Animation" submitted to the China Patent Office on October 18, 2021 and submitted to China on December 14, 2021 Patent Office, the priority of the Chinese patent application with application number 202111526842.7 and application name "Animation effect display method and electronic device", the entire content of which is incorporated in this application by reference.

technical field

The present application relates to the field of electronic technology, in particular to an animation effect display method and electronic equipment.

Background technique

With the development of electronic technology, more and more electronic devices are involved in users' daily life. Moreover, as parameters such as the resolution and size of the screen of the electronic device become higher and higher, more and more contents can be displayed on the electronic device.

The application can display animation effects to the user by adjusting attributes such as the size, width, height, and transparency of controls displayed on the interface.

However, at the junction or overlap of different animation effects, since different animation effects will modify the properties of the controls on the application interface with different logic, the changes of the controls may be discontinuous, which will cause the interface of the application to jump , the user experience is poor.

Contents of the invention

The application provides an animation effect display method and an electronic device, which relate to the field of electronic technology. The animation effect display method provided by this application can generate a new animation effect to smooth the overlap or connection of two animation effects in the case of animation effect conflicts, so that the attributes such as the size, position, and transparency of the controls on the interface will not change. Jumping occurs, but the changes of the controls on the interface are continuous, which in turn makes the animation effect smoother.

In the first aspect, the embodiment of the present application provides a method for displaying animation effects, the method includes: displaying a first interface, the first interface includes a first control; when the first interface is displayed, responding to the first One operation, display the first control with the first animation effect; at the second moment after the first moment, in response to the second operation, if the second moment is after the end of the first animation effect, then display the control with the second animation Effect displaying the first control; at the second moment, in response to the second operation, if the second moment is within the duration of the first animation effect, the first control is displayed with a third animation effect; the second The three animation effects include a transition process and an animation process. The animation process is a part of the second animation effect. The end interface of the animation process is the same as the end interface of the second animation effect. The display content of the moment is determined by the second animation effect; or, the third animation effect is determined according to the display content of the first animation effect at the second moment and the end interface of the second animation effect, and the end of the third animation effect The interface is the same as the end interface of the second animation effect.

In the above embodiment, in the case of animation effect conflicts, a new animation effect is generated to smooth the overlap or connection of two animation effects, so that the properties such as the size, position, and transparency of controls on the interface will not jump, Instead, it makes the changes of the controls on the interface continuous, thereby making the animation effect smoother.

With reference to some embodiments of the first aspect, in some embodiments, the properties of the first control include a first property, the first property changes at a first rate during the first animation effect, and the first property changes at a first rate during the first animation effect. The second animation effect changes at the second rate; the transition process is determined according to the display content of the first animation effect at the second moment and the second animation effect, specifically including: the change rate of the first attribute during the transition process is determined according to the The first rate and the second rate are determined; the third animation effect is determined according to the display content of the first animation effect at the second moment and the end interface of the second animation effect, specifically including: the process of the third animation effect A rate of change of the first attribute is determined based on the first rate and the second rate.

In the above embodiment, the rate of change of the property of the control in the third animation effect may be related to the rate of change of the property of the control in the first animation effect and the rate of change of the property of the control in the second animation effect. Furthermore, the change of the controls on the interface retains the trend of the first animation effect and the trend of the second animation effect, and realizes a smooth transition.

With reference to some embodiments of the first aspect, in some embodiments, the rate of change of the first attribute during the transition process is determined according to the first rate and the second rate, specifically including: the first attribute during the transition process The rate of change is the vector superposition of the first rate and the second rate; the rate of change of the first attribute during the third animation effect is determined according to the first rate and the second rate, specifically including: The rate of change of the first attribute during the animation effect is the vector superposition of the first rate and the second rate.

In the above embodiment, the properties of the control can be adjusted by vector superimposing the change speeds of the properties of the control in different animation effects, so as to achieve a smooth transition at the overlapping or connecting points of different animation effects.

With reference to some embodiments of the first aspect, in some embodiments, the properties of the first control include a first property, and the first property changes at a first rate during the first animation effect; The second animation effect changes at the second rate; the third animation effect includes a transition process and an animation process, and the first property is continuous, first-order derivable or second-order derivable during the transition process; or, the third animation effect Determined according to the display content of the first animation effect at the first moment and the end interface of the second animation effect, the first attribute is continuous, first-order derivable or second-order derivable during the third animation effect.

In the above-mentioned embodiment, according to the property of the control at the second moment and the property of the control at the end of the third animation effect, the change of the property of the control can be directly determined through the interpolation method, and then the property of the control can be made at the overlap of different animation effects Or the junction is continuous, first-order derivable, and second-order derivable.

With reference to some embodiments of the first aspect, in some embodiments, the first animation effect linearly increases the size of the first control, and the second animation effect linearly decreases the size of the first control; the transition process is based on the The display content of the first animation effect at the second moment is determined by the second animation effect, specifically including: the transition process causes the size of the first control to first increase and then decrease, the increasing change speed gradually slows down, and the decreasing The speed gradually increases; the third animation effect is determined according to the display content of the first animation effect at the second moment and the end interface of the second animation effect, specifically including: the third animation effect first increases the size of the first control After decreasing, the rate of change of the increase gradually slows down, and the rate of decrease gradually accelerates.

In the above embodiment, when the first animation effect is an animation effect that makes the size of the first control gradually larger, and the second animation effect is an animation effect that makes the size of the second control gradually smaller, then the first control can be The size of is increased first and then decreased, and the increasing speed and decreasing speed are adjusted so that the size of the control is smoothly transitioned at the junction/overlapping place of the first animation effect and the second animation effect.

With reference to some embodiments of the first aspect, in some embodiments, the third animation effect includes a transition process and an animation process, and the end time of the transition process is the end time of the first animation effect; or, the third animation effect Determined according to the display content of the first animation effect at the second moment and the end interface of the second animation effect, the end time of the third animation effect is the end time of the second animation effect.

With reference to some embodiments of the first aspect, in some embodiments, at the second moment, after responding to the second operation, determine the duration of the second animation effect and the end frame description information of the second animation effect; Determine the transition process according to the display content of the first animation effect at the second moment and the second animation effect, and determine the duration of the transition process and the end frame description information of the transition process; or, according to the first animation The display content of the effect at the second moment and the end frame description information of the second animation effect generate the third animation effect, and determine the duration of the third animation effect and the end frame description information of the third animation effect. The end frame description information of the third animation effect is the same as the end frame description information of the second animation effect; within the duration of the transition process, when generating the display data of the target frame, according to the duration of the transition process, the transition process The end frame description information determines the description information of the target frame; or, within the duration of the third animation effect, when generating the display data of the target frame, according to the duration of the third animation effect, the The description information of the end frame determines the description information of the target frame; the display data of the target frame is generated according to the description information of the target frame.

In the above embodiment, the electronic device needs to obtain the end interface of different animation effects, and then obtain the attributes of the controls on the end interface of the animation effect. After the electronic device knows the properties of the control on the start interface of the animation effect, and the properties on the end interface of the animation effect, the properties of the control can be adjusted so that the properties of the control do not jump, so that in the process of displaying the animation effect , the interface will not jump.

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, and the memory is used to store computer program codes, The computer program code includes computer instructions, and the one or more processors invoke the computer instructions to cause the electronic device to execute: displaying a first interface that includes a first control; when displaying the first interface, at In response to the first operation at one moment, display the first control with the first animation effect; at a second moment after the first moment, in response to the second operation, if the second moment is after the end of the first animation effect, Then display the first control with a second animation effect; at the second moment, in response to the second operation, if the second moment is within the duration of the first animation effect, display the first control with a third animation effect A control; the third animation effect includes a transition process and an animation process, the animation process is a part of the second animation effect, the end interface of the animation process is the same as the end interface of the second animation effect, and the transition process is based on the first The display content of the animation effect at the second moment is determined by the second animation effect; or, the third animation effect is determined according to the display content of the first animation effect at the second moment and the end interface of the second animation effect, the first animation effect The end interface of the third animation effect is the same as the end interface of the second animation effect.

In the above embodiment, in the above embodiment, in the case of animation effect conflicts, a new animation effect is generated to smooth the overlap or connection of two animation effects, so that the size, position, transparency and other attributes of the controls on the interface There will be no jumps, but the changes of the controls on the interface are continuous, which makes the animation effect smoother.

With reference to some embodiments of the second aspect, in some embodiments, the one or more processors are specifically configured to invoke the computer instructions to cause the electronic device to execute: the attributes of the first control include a first attribute, the second An attribute changes at a first rate in the first animation effect, the first attribute changes at a second rate in the second animation effect, and the rate of change of the first attribute during the transition process is based on the first rate and the The second rate is determined; or, the rate of change of the first attribute during the third animation effect is determined according to the first rate and the second rate.

With reference to some embodiments of the second aspect, in some embodiments, the one or more processors are specifically configured to call the computer instructions to make the electronic device perform: the rate of change of the first attribute during the transition process is The vector superposition of the first rate and the second rate; or, the change rate of the first attribute in the process of the third animation effect is the vector superposition of the first rate and the second rate.

With reference to some embodiments of the second aspect, in some embodiments, the properties of the first control include a first property, and the first property changes at a first rate during the first animation effect; The second animation effect changes at the second rate; the third animation effect includes a transition process and an animation process, and the first property is continuous, first-order derivable or second-order derivable during the transition process; or, the third animation effect Determined according to the display content of the first animation effect at the first moment and the end interface of the second animation effect, the first attribute is continuous, first-order derivable or second-order derivable during the third animation effect.

With reference to some embodiments of the second aspect, in some embodiments, the one or more processors are specifically configured to call the computer instructions to make the electronic device execute: the first animation effect makes the size of the first control linear increase, the second animation effect causes the size of the first control to decrease linearly; the transition process causes the size of the first control to first increase and then decrease, the increasing speed gradually slows down, and the decreasing speed gradually accelerates; or , the third animation effect causes the size of the first control to first increase and then decrease, the increasing speed gradually slows down, and the decreasing speed gradually accelerates.

With reference to some embodiments of the second aspect, in some embodiments, the third animation effect includes a transition process and an animation process, and the end time of the transition process is the end time of the first animation effect; or, the third animation effect Determined according to the display content of the first animation effect at the second moment and the end interface of the second animation effect, the end time of the third animation effect is the end time of the second animation effect.

With reference to some embodiments of the second aspect, in some embodiments, the one or more processors are further configured to invoke the computer instructions to cause the electronic device to execute: at the second moment, after responding to the second operation , determine the duration of the second animation effect, the end frame description information of the second animation effect; determine the transition process according to the display content of the first animation effect at the second moment and the second animation effect, and determine the The duration of the transition process and the end frame description information of the transition process; or, the third animation effect is generated according to the display content of the first animation effect at the second moment and the end frame description information of the second animation effect, and Determine the duration of the third animation effect and the end frame description information of the third animation effect, the end frame description information of the third animation effect is the same as the end frame description information of the second animation effect; during the transition process duration When generating the display data of the target frame, determine the description information of the target frame according to the duration of the transition process and the end frame description information of the transition process; or, within the duration of the third animation effect, when generating When displaying data of the target frame, determine the description information of the target frame according to the duration of the third animation effect and the end frame description information of the third animation effect; generate the display data of the target frame according to the description information of the target frame.

In the third aspect, the embodiment of the present application provides a chip system, the chip system is applied to an electronic device, and the chip system includes one or more processors, and the processor is used to invoke computer instructions so that the electronic device executes the first Aspect and the method described in any possible implementation manner of the first aspect.

In the fourth aspect, the embodiment of the present application provides a computer program product containing instructions, when the above computer program product is run on the electronic device, the above electronic device is made to execute any possible implementation of the first aspect and the first aspect described method.

In the fifth aspect, the embodiment of the present application provides a computer-readable storage medium, including instructions, which, when the above-mentioned instructions are run on the electronic device, cause the above-mentioned electronic device to execute any possible implementation of the first aspect and the first aspect. described method.

It can be understood that the above-mentioned 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 it can achieve can refer to the beneficial effects in the corresponding method, and will not be repeated here.

Description of drawings

FIG. 1A and FIG. 1B are exemplary schematic diagrams of interfaces provided by the embodiments of the present application.

FIG. 2A and FIG. 2B are another exemplary schematic diagrams of the interface provided by the embodiment of the present application.

FIG. 3 is an exemplary schematic diagram of a method for displaying an animation effect provided by an embodiment of the present application.

FIG. 4 is an exemplary schematic diagram of another animation effect display method provided by the embodiment of the present application.

FIG. 5 is an exemplary schematic diagram of an animation effect conflict provided by an embodiment of the present application.

FIG. 6A-FIG. 6F are exemplary schematic diagrams of interface changes under multiple animation conflicts provided by the embodiment of the present application.

FIG. 7A , FIG. 7B , and FIG. 7C are exemplary diagrams of view property changes in the case of multiple animations provided by the embodiment of the present application.

FIG. 8 is a schematic diagram of an example of the flow of the animation effect display method provided by the embodiment of the present application.

FIG. 9 is an exemplary schematic diagram of determining an animation object provided by the embodiment of the present application.

FIG. 10 is an exemplary schematic diagram of determining attributes of views in each frame interface provided by the embodiment of the present application.

FIG. 11A-FIG. 11D are exemplary schematic diagrams of animation parameter changes provided by the embodiment of the present application.

FIG. 12A and FIG. 12B are exemplary schematic diagrams of interface changes in the case of multiple animations provided by the embodiment of the present application.

FIG. 13A , FIG. 13B , and FIG. 13C are exemplary diagrams of timings for updating a rendering tree by a rendering thread or a rendering process provided by an embodiment of the present application.

FIG. 14 is another exemplary schematic diagram of the rendering thread updating animation parameter timing provided by the embodiment of the present application.

FIG. 15A and FIG. 15B are exemplary schematic diagrams of the animation effect process provided by the embodiment of the present application.

FIG. 16A , FIG. 16B , FIG. 16C , FIG. 16D , and FIG. 16E are exemplary schematic diagrams of the animation effect process provided by the embodiment of the present application.

FIG. 17 is an exemplary schematic diagram of determining view attributes through UI thread data provided by an embodiment of the present application.

FIG. 18A is an exemplary schematic diagram of rendering tree changes during execution of the method shown in FIG. 3 according to an embodiment of the present application.

FIG. 18B and FIG. 18C are exemplary schematic diagrams of rendering tree changes during execution of the method shown in FIG. 4 provided by the embodiment of the present application.

FIG. 19 is an exemplary schematic diagram of a hardware architecture of an electronic device provided by an embodiment of the present application.

FIG. 20 is an exemplary schematic diagram of the software architecture of the electronic device according to the embodiment of the present application.

Detailed ways

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 limit the present application. As used in the specification of this application, the singular expressions "a", "an", "the", "above", "the" and "this" are intended to also include the plural expressions unless the context expressly indicates otherwise. It should also be understood that the term "and/or" as used in this application refers to and includes any and all possible combinations of one or more of the listed items.

Hereinafter, the terms "first" and "second" are used for descriptive purposes only, and cannot be understood as implying or implying relative importance or implicitly specifying the quantity of indicated technical features. Therefore, the features defined as "first" and "second" may explicitly or implicitly include one or more of these features. In the description of the embodiments of the present application, unless otherwise specified, the "multiple" The meaning is two or more.

The term "user interface (UI)" in the following embodiments of this application is a medium interface for interaction and information exchange between an application program or an operating system and a user, and it realizes the difference between the internal form of information and the form acceptable to the user. conversion between. The user interface is the source code written in a specific computer language such as java and extensible markup language (XML). The source code of the interface is parsed and rendered on the electronic device, and finally presented as content that can be recognized by the user. The commonly used form of user interface is the graphical user interface (graphic user interface, GUI), which refers to the user interface related to computer operation displayed in a graphical way. It may be text, icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, Widgets, and other visible interface elements displayed on the display screen of the electronic device.

The interface serves as a media interface for the interaction and information exchange between the application program and the user. When a vertical synchronization signal (Vsync-APP) arrives, the electronic device needs to generate the interface of the application program for the application program in the foreground. Wherein, 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.

That is, each time before the content displayed on the screen is refreshed by the electronic device, the interface of the application program needs to be generated for the foreground application, so as to display the newly generated interface of the application program to the user when the screen is refreshed.

An animation (animation) effect acts on an animation object, and the animation object may be an interface (or window) of an application program, or the animation object may be one or more controls (views, or may also be called views) of the application program. From the user's point of view, an animation object includes one or more controls, and from the application's point of view, an animation object includes one or more views. Wherein, the view is a basic element constituting the interface of the application program, and one control on the interface of the application program seen by the user may correspond to one or more views.

In this embodiment of the application, unless otherwise specified, the meanings expressed by controls and views may be the same.

From the perspective of dismantling the time dimension, the coherent and smooth change process of the animation object within a period of time (at least two vertical synchronization signal intervals) is the animation effect.

(1) The interface configured with animation effects provided by the embodiment of the application, and the display method of animation effects

(1.1) The interface configured with animation effects

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 the appearance include: transparency, rounded corners, border color, border line width, background color, shadow, etc.; the animation effects acting on the position include width/height configuration, x/y/z coordinates, x/y /z anchor point; transformation-based animation effects include: translation, rotation, scaling, and 3D transformation; animation effects acting on content include: filter effects such as blurring, color enhancement, grayscale change, and noise increase.

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 on the appearance, animation effects on the position, animation effects based on transformation, Animation effects applied to content, etc.

The interface configured with animation effects is exemplarily introduced below.

As shown in FIG. 1A , the interface displayed on the screen of the electronic device is an interface of a desktop application program, and the interface of the desktop application program includes a control 1A01 . Wherein, the control 1A01 includes an icon of a reading application program.

The desktop application may also include icons for other applications, such as an icon for a gallery application, an icon for a dialer application, an icon for a messaging application, an icon for a contacts application.

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

Wherein, when the control 1A01 is enlarged, the control 1A02 appears on the interface. Wherein, the enlargement process of the control 1A01 is a kind of animation. Wherein, in the case that the control 1A02 is gradually displayed clearly (for example, the transparency changes), the process of the control 1A02 gradually displayed clearly is also a kind of animation.

As shown in FIG. 2A , the interface displayed on the screen of the electronic device is an interface of a desktop application program, and the interface of the desktop application program includes a control 2A01 . Wherein, the control 2A01 is the folder 1, including the control 2A02, the control 2A03, and the control 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.

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

Among them, the process of expanding and moving the controls 2A01, 2A02, 2A03, and 2A04 is also a kind of animation.

(1.2) Display method of animation effect

To realize the interface shown in Figure 1A and Figure 1B, it is necessary to configure animation events for control 1A01; to realize the interface shown in Figure 2A and Figure 2B, it is necessary to configure animation events for control 2A01, control 2A02, control 2A03, and control 2A04.

As shown in Figure 3, the animation effect display method may include four steps: Step S301: Create animation event 1; Step S302: After receiving the vertical synchronization signal, trigger the callback of animation event 1, according to the animation event 1 Logically modify the attributes of the view; step S303: measure (measure), layout (layout), draw recording (draw, also called drawing in software rendering) to generate a rendering tree; step S304: receive the rendering tree, and based on the rendering Tree drawing bitmap. Wherein, the UI thread needs to execute step S301, step S302, and step S303; the rendering thread needs to execute step S304. Wherein, in the first frame of the animation effect, the electronic device needs to perform steps 301, 302, 303, and 304, and for each frame within the duration of the animation effect, the electronic device needs to perform steps S302, S303, and S304.

Step S301: Create animation event 1

Animation events can be created at any time and are related to 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. The animation event includes the internal logic to realize the animation effect, such as the end condition of the animation effect, and the amount of modification of the view property for each frame within the duration of the animation effect.

After the animation event is created, it will register a callback on the UI thread (equivalent to registering an animation event), such as registering a callback on the Choregrapher of the UI thread. This callback is used for each time the UI thread receives a vertical synchronization signal (Vsync -APP), trigger the UI thread to process the animation event, and modify the properties of the view according to the logic of the animation event.

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

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

After the UI thread of the application program receives the vertical synchronization signal (Vsync-APP), as shown in Figure 3, vertical synchronization signal 1, vertical synchronization signal 2, and vertical synchronization signal 3, it will sequentially process input events (CALLBACK_INPUT), animation event (CALLBACK_ANIMATION), traversal event (CALLBACK_TRAVERSAL) and commit event (CALLBACK_COMMIT).

During the process of processing animation events (for example, doCallbacks(CALLBACK_ANIMATION)), the UI thread of the application will modify the properties of the view according to the logic of the animation event.

For example, in the interface shown in FIG. 1A and FIG. 1B , 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. Then, 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 be a rectangle of 205px, and the second frame of the animation modifies the width and height of the view corresponding to the control 1A02 to be 210px rectangle.

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

The change of the view property will trigger the UI thread to measure, layout, draw and record the interface of the application. Among them, 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 bitmap of the application, and save them in the rendering tree. list of drawing commands.

Among them, both the input event and the animation event may affect the content of any one or more views on the interface of the application, so the main thread of the application needs to process the input event and the animation event first, and then process the traversal event. When the main thread of the application program is processing the traversal event, the UI thread of the application program measures, layouts, draws and records the interface of the application program, determines the properties of each view, and then determines the corresponding rendering node of each view, and generates a rendering tree . Wherein, the rendering node includes rendering properties (properties) and a drawing instruction list (display list).

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

Among them, the drawing operation is a data structure, which is used to draw graphics, such as drawing lines, drawing widening, drawing rectangles, and drawing text. The drawing operation will be converted into the API call of the image processing library when the rendering thread is executed, such as the interface call of OpenGL. For example, DrawLineOp is a data structure, which contains drawn 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.

Wherein, the drawing instruction list may be a buffer, which records all drawing operations included in one frame interface of the application program or identifiers of all drawing operations, such as addresses and serial numbers. When an application has multiple windows or is displayed on different display areas (displays), multiple rendering trees need to be independently generated, wherein multiple drawing command lists corresponding to different windows and display areas will be independently generated. In the embodiment of the present application, the display area may be a screen, or may be a virtual screen (Virtual Display) or the like. The virtual screen may be an area used by the electronic device to carry content displayed on the screen when recording the screen.

Step S304: Receive a rendering tree, and draw a bitmap based on the rendering tree

After the UI thread generates the rendering tree, after passing the rendering tree to the rendering thread, the rendering thread generates a bitmap based on the rendering tree. The rendering thread obtains a hardware canvas (HardwareCanvas), and performs drawing operations in the rendering tree on the hardware canvas, thereby generating a bitmap. The bitmap will be passed to the surface compositor (SurfaceFlinger) and the hardware compositing strategy module (Hardware Composer, HWC) to obtain, and then generate the interface to send to the display.

Different from FIG. 3 , the embodiment of the present application provides another animation effect display manner, as shown in FIG. 4 .

As shown in Figure 4, the method for displaying the animation effect may include five steps: respectively, step S401: create animation event 2; step S402: after receiving the vertical synchronization signal, obtain the end interface of the animation effect from animation event 2 Description information (also called end frame description information), description information of the duration of the animation effect; S403: measure, layout, and draw the end interface of the animation effect, and determine the rendering tree 1; Step S404: receive the rendering tree 1, Based on the description information of the end interface of the animation effect and the description of the duration of the animation effect; 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, based on the updated rendering tree 1 Generate a bitmap.

Wherein, the UI thread needs to execute steps S401, S402, and S403; the rendering thread or rendering process needs to execute steps S404, S405. Wherein, in the first frame of the animation effect, the electronic device needs to perform steps S401, S402, S403, S404, and S405; for each frame within the duration of the animation effect, the electronic device needs to perform step S405. Wherein, the rendering process may be a process independent of the application program.

Step S401: Create animation event 2

The application's UI thread creates animation events2 through the animation interface. Wherein, the description of the animation interface can refer to the description in step S802 below, and will not be repeated here.

Different from animation event 1, animation event 2 does not need to register a callback on the UI thread during the duration of the animation effect.

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

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 the animation event 2

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 from the animation event 2 , The description information of the duration of the animation effect. And the UI thread does not modify the attributes of the view, and does not trigger step S303.

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

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

S403: Measure, layout, and draw the end interface of the animation effect, and determine the rendering tree 1

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.

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.

Optionally, in some embodiments of the present application, the UI thread synchronizes the rendering tree 1, the description information of the ending 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.

Optionally, in some embodiments of the present application, the UI thread sends 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 Sync to render thread, not render 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.

Optionally, in some embodiments of the present application, the UI thread may be described 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 Information, to determine the attributes of the view in each frame of the interface during the duration of the animation effect, and then synchronize the attribute value of the view in the interface of each frame within the duration of the animation effect and the rendering tree 1 to the rendering thread or rendering process.

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

Wherein, the rendering thread of the application can receive the data sent by the UI thread through the message queue, and the rendering process can receive the data sent by the UI thread through cross-process communication. The rendering process can also request and obtain data from the UI thread after it independently requests and receives the vertical synchronization signal.

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

The rendering thread or the rendering process of the application program determines the view of the property change based on the description information of the end interface of the animation effect and the interface before the start of the animation effect. The rendering thread determines the step amount of the property based on the duration of the animation effect, and then determines the property of the view in each frame of the interface within the duration of the animation effect.

For the process of generating a frame interface in the animation effect, the rendering thread or rendering process of the application program can first determine the sequence of the frame in the animation effect, that is, which frame of the animation effect this frame is. Further, the attribute of the view on the interface of the frame can be determined, that is, the description information of the animation effect of the frame can be determined.

Wherein, determining which frame of the animation effect the frame is can be determined by the time of the frame, the frequency of the vertical synchronization signal, and the start time of the animation effect. Wherein, the starting 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 the vertical synchronization signal 1 in Figure 4, or, the starting time of the animation effect can also be the moment when the animation triggers an event etc. are not limited here.

After the rendering thread determines the properties of the view in each frame of the interface within the duration of the animation effect, it can update the rendering tree 1 and The parameter corresponding to the view attribute, and then generate a bitmap based on the updated rendering tree 1.

For each frame except the first frame within the duration of the animation, only the rendering thread or rendering process of the application program executes step S405 to draw the interface of each frame in the animation effect, and then display the animation effect.

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 respectively. For example, the vertical synchronization signal received by the UI thread and the vertical synchronization signal received by the rendering thread may be vertical synchronization signals with the same cycle and different phases (with a fixed time difference).

Obviously, for the animation effect display method shown in Figure 3, 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 bit before the vertical synchronization signal 2 arrives. Frame drops, stuttering, etc. will occur. However, for the animation effect display method shown in Figure 4, during the interface generation process of each frame except the first frame within the duration of the animation, the rendering thread or rendering process mainly updates the rendering tree to generate the duration of the animation In the multi-frame interface, the UI thread does not participate or the amount of calculations or tasks undertaken by the UI thread is small. When the UI thread is blocked by other tasks, frame drops and freezes are not likely to occur.

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

The following exemplifies the reasons why multiple animation effects conflict with each other and the interface transitions caused by multiple animation effects.

(1.3) Conflict of animation effects

As shown in FIG. 5, the process of the electronic device performing the animation effect shown in FIG. 3 includes:

S501: Create animation event 4

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

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

After receiving the 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 modifies the properties of the view according to the logic of animation event 4 respectively. In this case, the logic of animation event 4 may override the modification of the view's properties by animation event 3.

For example, the view modified by animation event 3 includes view 1, and the view modified by animation event 4 includes view 1. View 1 is a 20 pixel square before modification, animation event 3 logic modifies view 1 to be a 30 pixel square, and animation event 4 logic modifies view 1 to be a 15 pixel square. The UI thread respectively modifies the properties of the view according to the logic of animation event 3, and modifies the properties of view 1 according to the logic of animation event 4, and finally, view 1 becomes a 15-pixel square.

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. Wherein, the transition of the interface is shown in FIG. 6A to FIG. 6F .

Then step S303 and step S304 are executed. The content of step S303 and step S304 can refer to the text description corresponding to FIG. 3 above, and will not be repeated here.

As shown in FIG. 6A , an interface of a desktop application program is displayed on the screen of the electronic device. The interface of the desktop application program includes a control 2A01, and the control 2A01 as a parent control may also include several child controls, such as a control 2A02, a control 2A03, and a control 2A04.

Wherein, the control 2A01 can be a folder or a card on the desktop application, for example, in Figure 6A-6E, the control 2A01 is the folder 1, the control 2A02 includes the icon of the game application, and the control 2A03 includes the icon of the flashlight application, Control 2A04 includes an icon for the gallery application.

Wherein, the interface shown in FIG. 6A can be regarded as the interface before animation effect 1 starts.

This interaction may trigger animation effect 1 in response to the user clicking on control 2A01. Animation effect 1 acts on control 2A01, control 2A02, control 2A03, and control 2A04, that is, control 2A01, control 2A02, control 2A03, and control 2A04 are the animation objects of animation effect 1. Animation effect 1 makes the size of the animation object gradually increase and its position is towards The center of the interface moves.

As shown in FIG. 6B , the size of the control 2A02 gradually increases, such as height and/or width, and its position changes. The interface shown in FIG. 6B includes the start interface of the animation effect 1 and the intermediate interface of the animation effect 1 .

As shown in FIG. 6C , as the size of the control 2A02 continues to increase, that is, the interface displayed on the electronic device changes from the middle interface of the animation effect 1 to the end interface of the animation effect 1 .

As shown in Figure 6D, before the end of the animation effect 1, the user clicks on a part of the desktop that does not belong to the control 2A01, or returns to the interface shown in Figure 6A through other interactive methods, such as "back (back)" interactive gesture, etc. When the interaction triggers the animation effect 2. Among them, animation effect 2 acts on control 2A01, control 2A02, control 2A03, and control 2A04, that is, control 2A01, control 2A02, control 2A03, and control 2A04 are the animation objects of animation effect 2, and the effect of animation effect 2 is to make the size of the animation object gradually increase. becomes smaller and moves toward the position of control 2A01 in Figure 1A.

Since animation effect 1 is not over yet, animation effect 2 occurs at this time, and the animation objects that animation effect 1 and animation effect 2 act on overlap, and both animation effect 1 and animation effect 2 need to modify the size of the view corresponding to the animation object, position, resulting in a conflict between animation effect 1 and animation effect 2. In this case, the interface can be changed in two ways, namely the interface shown in FIG. 6E and the interface shown in FIG. 6F .

As shown in Figure 6E, in response to the user clicking on a part of the desktop that does not belong to the control 2A01, or through other interaction methods, such as "return (back)" interactive gesture, etc., the middle interface of the animation effect 1 is used as the interface of the animation effect 2. Start the interface, and start to modify the properties of the view according to the logic of animation effect 2, for example, change from the middle interface of animation effect 1 to the end interface of animation effect 2.

Or, as shown in FIG. 6F, in response to the user clicking on a part of the desktop that does not belong to the control 2A01, or through other interaction methods, such as the "back (back)" interactive gesture, etc., the change of the display interface of the electronic device at this time is divided into two steps. :

(1) in FIG. 6F : the content displayed by the electronic device directly jumps from the middle interface of the animation effect 1 to the end interface of the animation effect 1.

(2) among Fig. 6F: 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 , the control 2A01 gradually becomes smaller until it reaches the size shown in FIG. 6A , and the position of the control 2A01 returns to the position of the control 2A01 shown in FIG. 6A .

Obviously, under the conflict of multiple animation effects, the interface changes will jump, or the speed of interface changes will jump, resulting in incoherent changes in the interface, which do not conform to the user's visual habits, as shown in Figure 7A, Figure 7B, As shown in FIG. 7C , the user experience is further reduced.

As shown in Figure 7A, the expected duration of the animation effect 1 is T1 to T3, and the expected duration of the animation effect 2 is T2 to T4, wherein, T1 is less than T2, T2 is less than T3, T3 is less than T4, and the expected duration is the animation effect Animation 1 increases the height of the view; animation 2 decreases the height of the view at times configured by the application.

In the case shown in FIG. 7A , the change of the view attribute is as shown in FIG. 7B or 7C .

As shown in Figure 7B, from T1 to T2, 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, view properties such as height jump Change; from T2 to T4, view properties change according to the logic of animation effect 2, for example, the height of the view decreases linearly.

Obviously, at time T2, the view attribute, such as height, jumps at the junction of animation effect 1 and animation effect 2.

As shown in Figure 7C, 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; Logical changes, such as a linear decrease in the height of the view.

Obviously, at time T2, the view attribute at the junction of animation effect 1 and animation effect 2, such as the rate of change of height, jumps. Wherein, in FIG. 7B and FIG. 7C, the actual duration of animation effect 1 is T2-T1. The duration of animation effect 2 is T2 to T4.

It is worth noting that, in addition to the content shown in FIG. 7A , FIG. 7B , and FIG. 7C , when different types of animation effects conflict, it will also cause incorrect interface display or interface jumps.

(2) The animation effect display method provided by the embodiment of this application

The animation effect display method provided by the embodiment of the present application, firstly, the embodiment of the present application provides an animation interface for realizing the animation effect, the animation interface can be in the form of one or more functions and methods, and the application program can set controls through the animation interface information such as attributes or animation effects, so that the animation framework provided by this application can generate a corresponding animation interface based on these 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 description information of the step amount of the animation effect and the duration of the animation effect; or, the description information of the step amount of the animation effect And the end interface description information of the animation effect, etc. This animated interface helps reduce the workload of application developers. Moreover, the developer of the application program may not configure the interface of each frame during the animation effect process, and the rendering thread or the rendering process independently determines the interface of each frame during the animation effect process.

The animation effect display method provided by the embodiment of the present application, secondly, in the animation effect display process, the properties of the view are not modified, but the animation parameters in the rendering properties of the rendering tree are added and modified, and then the animation effect is drawn. The interface for each frame of the duration. That is, the animation parameters may be parameters for updating the rendering tree, and may include attributes of controls that change on the interface in one frame during the animation effect process.

In 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, and measure, Layout, draw recording, which in turn helps avoid dropped frames. Among them, modifying the rendering attributes of the rendering tree is in charge of the rendering thread or rendering process.

The animation effect display method provided in the embodiment of the present application, finally, in the case of multiple animation effect conflicts, since the animation effect display method provided in the embodiment of the application modifies the display content based on the end interface of the animation effect, the interface can be realized. The continuous change of the interface (or the speed of the interface change is continuous), so as to achieve a smoother interface and improve the user experience.

The animation effect display method provided in the embodiment of the present application is exemplarily introduced below.

(2.1) Flow of animation effect display method

As shown in Figure 8, the flow of the animation effect display method provided by the embodiment of the present application includes:

S801: The UI thread of the application creates an animation event

Animation events can be created at any time and are related to 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 to achieve animation effects. For the convenience of description, these messages that trigger the UI thread of the application to create animation events are called animation trigger events.

In the embodiment of this application, after the animation event is created, a callback will be registered on the choreographer of the UI thread of the application. This callback is used to trigger the application's UI thread to process the animation event at the first vertical synchronization signal after the animation event is created.

Hereinafter, in order to distinguish animation events in the methods shown in FIG. 3 and FIG. 4 , the animation events in the method in FIG. 3 are referred to as non-implicit animations, and the animation events in FIG. 4 are implicit animations. Wherein, the animation event created by the application developer using the animation interface provided by the embodiment of the present application is an implicit animation.

It is worth noting that implicit animation and non-implicit animation are just abbreviations for the convenience of comparison and description of the content in Figure 3 and Figure 4, and do not limit the animation events created by the animation interface in this embodiment of the application.

Optionally, in some embodiments of the present application, the implicit animation may be converted into a non-implicit animation. Wherein, the conversion process may occur during the process of installing or starting the application program for the first time, or the conversion process may be sent during the compiling process, which is not limited here.

For example, the non-implicit animation determines the drawing object, the callback of the vertical synchronization signal of each frame, the modification of the properties of the view, etc., the end condition of the animation, etc. Wherein, the callback of the vertical synchronization signal of each frame is used to always 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 an animation event to an implicit animation can include the following two steps:

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 application's UI thread to perform measurement, layout, and drawing recording.

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

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

The application's UI thread handles the animation event after receiving the vertical sync signal. Among them, 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), animation interface The name (step description information, end interface description information), animation interface name (duration, end interface description information), etc., are not limited here.

Wherein, in addition to the position, size, transparency, etc. of the view, the description of the end interface may also include a theme (style). Wherein, the description of the end interface may be relative to the increment of the interface before the start of the animation effect, such as how much the view 1 becomes wider.

Wherein, the step amount description information may include the change amount of the property of the control in the interface to be rendered currently compared with that in the interface of the previous frame.

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:

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

view1.Heigt=800

view1.Width=400

})

Among them, animateTo is the name of the animation interface, duration: 3000 indicates that the duration is 3000ms, cure: Curve.Linear indicates that the curve is a linear curve; "view1.Heigt＝800view1.Width＝400" indicates that the height of view1 in the animation end interface is 800, the width is 400, which is the end frame description information of the animation.

Wherein, the animation interface is one or more functions and methods provided by the system, and the developer of the application program can configure animation effects for the controls on the interface by calling the animation interfaces, and configure the information of the animation effects. Wherein, the information of the animation effect includes: the duration of the animation effect, description information of an end frame of the animation effect, and the like.

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

In this format, the electronic device can determine the animation object according to the difference between the end interface of the animation and the interface before the animation starts.

It is worth noting that the animation event can only register a callback in the choreographer of the UI thread.

S803: The rendering process or the rendering thread of the application program 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.

After the UI thread determines the end interface of the animation effect and the duration of the animation effect, it 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 It is possible to determine the properties of the view in each frame of the 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.

In the process of generating a frame interface, the rendering process or the rendering thread of the application program needs to determine which frame the current frame is in the animation effect, and then determine the attributes of the view on the frame interface. The rendering process or the rendering thread of the application program can determine which frame the current frame is in the animation effect by means of the number of received vertical synchronization signals, the time in the vertical synchronization signal, etc., which is not limited here. Wherein, which frame the current frame is in the animation effect may also be referred to as the sequence of the frame in the animation effect. That is, the description information of the frame includes the attributes of the view on the interface of the frame.

The interface that the application needs to display is composed of multiple nested views, and 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 bitmaps based on the rendering tree.

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

For example, the interface structure of the application program is as follows: the PhoneWindow of the application program carries a root view, the subviews of the root view are View 1 and View 2 , and the subview of View 2 is View 3 . Then the structure of the rendering tree generated by the UI thread of the application is: 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, and the child node of rendering node 0 is Rendering node 1 corresponding to view 1 and rendering node 2 corresponding to view 2, and the child node of rendering node 2 is rendering node 3 corresponding to view 3. Wherein, the corresponding relationship between the view and the rendering node means that the rendering node includes all drawing operations in the corresponding view. Among them, a view can correspond to one or more rendering nodes.

Combining with the content shown in FIG. 9 and FIG. 10 , the method of determining the attribute of the view in each frame of the interface within the duration of the animation effect is introduced as an example. Wherein, the attribute of a view in a frame interface may also be referred to as description information of a frame interface.

As shown in FIG. 9 , the application interface includes View 1, View 2, and View 3, and the horizontal intervals of View 1, View 2, and View 3 (the width direction of the view is horizontal) are fixed.

When View 2 is configured with an animation that changes width from B1 to B2, where B2 is greater than B1 and greater than 0. Obviously, View 2 is an animation object for non-implicit animation. However, comparing the interface before the start of the animation effect and the interface at the end of the animation effect, the position of View 3 changes due to the change in the width of View 2. Therefore, the method shown in Figure 3 requires the UI thread of the application program to measure, layout, draw and record after modifying the properties of the view according to the logic of non-implicit animation, so as to ensure the correctness of the interface after animation.

Obviously, comparing the methods shown in FIG. 4 and FIG. 8 , since the properties of View 2 and View 3 change, the animation objects can be determined to be View 2 and View 3 .

Optionally, in some embodiments of the present application, the animation object can only change in the middle interface of the animation effect, and the interface does not change between the end interface of the animation and the start of the animation, and the UI thread of the application can adjust the vertical synchronization The time information of the signal, which determines the set of views that change in each frame during the animation process is the animation object.

As shown in Figure 10, the animation event is an implicit animation, and it is determined that there is an interface before the animation begins and an interface at the end of the animation. The main thread, rendering thread or rendering process of the application program can compare the interface before the start of the animation and the interface at the end of the animation, and determine that the changed control is the animation object involved in the animation. For example, the animation object includes control 2A01.

Wherein, the position of the control 2A01 changes from (x0, y0) to (x1, y1), that is, the control 2A01 is the animation object involved in the animation event. In addition, the height/width of the control 2A01 becomes S times the original, and the duration of the animation is 30 frames. Furthermore, the position and size of the control 2A01 on each frame interface can also be determined. The Qth frame of the 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.

Wherein, 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 parameters include information used to determine the attributes of the view on the interface of a frame 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 parameters are Information about the properties of the view on the interface in one frame of the animation effect.

In the following, for the convenience of description, the animation parameters are used to refer to the attributes of the view on the interface of a frame or the parameters used to determine the attributes of the view on the interface of a frame, that is, the animation parameters refer to the description information of the interface of a frame or the animation parameters are Parameters used to determine the description information of a frame interface.

The above describes the process of determining animation parameters in the case of a single animation event, and the following mainly introduces the process of determining animation parameters in the case of multiple animation events.

Optionally, in some embodiments of the present application, when the animation parameters of the animation object are modified by multiple animation events, vector superposition is performed based on animation parameters independently determined by each animation event to determine the final use in step S1002 Updates the animation parameters of the render tree.

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

Among them, animation effect 3 modifies the animation parameters so that the view properties are continuous within the duration of the animation effect; or, the further animation parameters are first-order derivable; or, the further animation parameters are second-order derivable, etc. Wherein, the duration of the animation effect 3 may be the intersection of the durations of the animation effect 1 and the animation effect 2, or from the beginning of the intersection of the animation effect 1 and the animation effect 2 to the end of the animation effect 1 or the end of the animation effect 2.

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 of the view within the duration of the animation effect can be determined through an interpolator, so that the properties of each frame of the view change over time The variation of is continuous, first-order derivable, and second-order derivable.

Among them, the animation parameters can be determined by the rendering thread or the rendering process; or, it can also be determined by the UI thread, and the value of each frame of the animation parameters is passed to the rendering thread or the rendering process, where it is used in the UI thread and the rendering thread To communicate and carry the change data of the animation parameters, or carry the end interface used to calculate the change of the animation parameters, the data may be called Staging rendering tree.

The process of determining animation parameters in the case of multiple animations is exemplarily introduced below with reference to the contents shown in FIG. 11A to FIG. 11D .

For the content shown in FIG. 11A , reference may be made to the content shown in FIG. 7A , which will not be repeated here.

As shown in Figure 11B, at T2, the application program receives the animation trigger event corresponding to animation effect 2, and determines that animation effect 2 involves modification of the height of the view, then generates animation effect 3, which is used to smooth animation effect 1 and animation effect 1 junction.

Wherein, the duration of the animation effect 3 is the intersection of the durations of the animation effect 1 and the animation effect 2, that is, T2 to T3. Wherein, since the starting interface of animation effect 3 and the end interface of animation effect 3 are known, 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 in T2 Continuous or first-order or second-order differentiable to T3. Wherein, the animation effect in T2 to T3 may be referred to as a transition process.

As shown in Figure 11C, at T2, the application program receives the animation trigger event corresponding to the animation effect 2, and determines that the animation effect 2 involves the modification of the height, then the generated animation effect 3 is used to smooth the connection between animation 1 and animation 2 place.

The duration of animation effect 3 is from T2 to T4, the start interface of animation effect 3 is the interface corresponding to animation effect 1 at T2, and the end interface of animation effect 3 is the end interface of animation effect 2. Therefore, animation effect 3 is 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 or second-order differentiable between T2 and T4.

As shown in Figure 11D, at T2, the application program receives the animation trigger event corresponding to the animation effect 2, and determines that the animation effect 2 involves the modification of the height, then the generated animation effect 3 is used to smooth the connection between animation 1 and animation 2 place.

Wherein, the duration of animation effect 3 is T3 to T4, the start interface of animation effect 3 is the end interface of animation effect 1, and the end interface of animation effect 3 is the end interface of animation effect 2. Therefore, animation effect 3 is an animation effect that connects 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 or second-order differentiable between T3 and T4.

The changes of the interface of the application program are introduced below in conjunction with the change of animation parameters shown in FIG. 11B . The changes of the interface of the application program are shown in FIGS. 12A and 12B .

FIGS. 6A-6D , and FIGS. 12A and 12B are a set of exemplary schematic diagrams of interface changes after the electronic device implements the animation effect display method provided in the embodiment of the present application.

Wherein, FIG. 6A and FIG. 6D have been described above, and will not be repeated here.

As shown in Figure 12A, after receiving the interaction that the user clicks on the desktop that does not belong to the control 2A01, or through other interaction methods, such as the "back (back)" interaction gesture, etc., the expansion speed of the control 2A01 slows down, and the moving speed Slow down, corresponding to "zoom in slow down" in Figure 7B.

It is worth noting that, since the change of the animation parameters is actually discrete, optionally, in some embodiments of the present application, the "stop transformation" in FIG. 7B does not appear.

After T3 and before T4, the expansion speed of control 2A01 slows down, and then starts to shrink. The zooming out process of the control 2A01 is shown in FIG. 12B and “increasing zooming out speed” in FIG. 12B , the speed of the control 2A01 keeps increasing until it remains unchanged.

Wherein, the change of the control 2A01 may be the same as the change of the sub-controls of the control 2A01.

Wherein, the display process of "enlarge and decrease the expansion speed" in FIG. 12A and "zoom out and increase the reduction speed first" in FIG. 12B is a transition process.

It can be understood that the interface changes shown in FIGS. 6A to 6D and FIGS. 12A and 12B are not only continuous, but also first-order derivable, making the interface changes more smoothly and improving user experience.

There are many ways to implement step S803. The following uses steps S8031, S8032, and S8033 to exemplarily introduce an embodiment for implementing step S803.

S8031: The UI thread of the application performs measurement, layout, drawing and recording on the end interface of the animation effect, and generates the first rendering tree

The UI thread of the application performs measurement, layout, drawing and recording on the end interface of the animation effect, and generates the first rendering tree. Wherein, the interface corresponding to the first rendering tree is an end interface.

S8032: the rendering process or the UI thread of the application or the rendering thread of the application, based on the end interface of the animation effect and the duration of the animation effect, determine the animation parameters corresponding to each frame interface within the duration of the animation effect

The rendering process or the UI thread of the application or the rendering thread of the application determines 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 animation parameters. Wherein, the animation parameter may be located in the rendering attribute of the rendering tree, and the animation parameter is used to modify the display mode of the view on the interface.

Optionally, in some embodiments of the present application, the animation parameters can replace the animation effects that can only be achieved by modifying the drawing instruction list, so that the drawing instruction list does not need to be changed during the duration of the animation effect, and thus does not require the UI thread to perform measurement , layout, draw recording to update the render tree.

Among them, the added animation parameters include: width (BOUDS_WIDTH), height (BOUNDS_HEIGHT), position (BOUNDS_POSITION), anchor point (PIVOT), round corner (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 Mirror (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).

Optionally, in some embodiments of the present application, step S8032 may be performed by a UI thread.

Since the animation parameters are located in the rendering properties of the rendering tree and directly affect the way the view is displayed on the interface, it is possible to make the animation parameters continuous or first-order derivable or second-order derivable, so that the view properties during the animation process are continuous or first-order Differentiable or second-order differentiable. Wherein, the determination of the animation parameters can refer to the text descriptions corresponding to FIG. 9 and FIG. 10 above, which will not be repeated here.

Since the change of the interface is realized by modifying the animation parameters, the UI thread of the application does not need to perform measurement, layout, drawing and recording, so during the animation process, the UI thread of the application does not need to process the animation-related operations, such as processing animation events, Such as updating view properties such as measurement, layout, draw recording, etc. Wherein, the division of labor between the UI thread and the rendering thread or rendering process can refer to the content in (a) the data flow for determining the animation parameters below, which will not be repeated here.

Since the UI thread of the application program and the rendering thread are independent of each other during the animation process, the UI thread of the application program 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), the frequency of the vertical synchronization signal (Vsync-Render) and the vertical synchronization signal (Vsync-APP) may be different, and so on. The timing when the rendering thread or rendering process starts to update the animation parameters can refer to the content in (b) the timing when the rendering thread or rendering process updates the animation parameters below, and 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 rendering thread or rendering process Received vertical sync signal.

The following introduces (a) the timing of updating the rendering tree by the rendering thread or rendering process, and (b) the modification of the drawing instruction list.

(a) When the rendering thread or rendering process updates the rendering tree

The timing for the rendering thread or the rendering process to update the rendering tree may be as shown in FIG. 13A , FIG. 13B , and FIG. 13C .

As shown in FIG. 13A , first, the UI thread executes step S1301 : process animation events after receiving a vertical synchronization signal (Vsync-APP). Secondly, the UI thread executes step S1302: determining the final interface of the animation effect and the duration of the animation effect. Then, the UI thread executes step S1303: sending the final interface of the animation effect and the duration of the animation effect. Finally, the rendering process or the rendering thread of the application executes step S1304 to update the rendering tree.

As shown in Figure 13B, first, the UI thread executes step S1305: receiving the vertical synchronization signal (Vsync-APP); then, the UI thread executes step S1306: forwards the vertical synchronization signal or other parameters indicating trigger timing; finally, the rendering process or application The rendering thread of the program executes step S1304 to update the rendering tree.

As shown in FIG. 13C , 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.

Wherein, during the generation of the interface of the first frame of the animation effect, the rendering thread or the rendering process may update the rendering tree as shown in Figure 13A; during the generation of the non-first frame interface of the animation effect, the rendering thread or the rendering process The timing for the process to update the rendering tree may be as shown in FIG. 13A , FIG. 13B or FIG. 13C .

It is worth noting that when the UI thread of the application program transfers data to the rendering process, data interaction needs to be completed through InterProcess Communication (IPC). The application program can use methods such as Binder, AIDL, shared memory, and Socket The implementation of IPC communication is not limited here.

As shown in Figure 14, during the animation process, the rendering thread can independently request the vertical synchronization signal (Vsync-APP). During the T-Delay time of receiving the vertical synchronization signal (Vsync-APP), the UI thread is blocked or The reason is that no information about updating the rendering tree is passed to the rendering thread, and the rendering thread starts to update the rendering tree and generate the interface after the T-Delay time; within the T-Delay time of receiving the vertical synchronization signal (Vsync-APP), the UI thread Processing input events or other logic (may not include processing animation events), can pass information about updating the rendering tree to the rendering thread, and after receiving the information about updating the rendering tree, the rendering thread updates the rendering tree and generates an interface.

It is understandable that configuring a delay T-Delay for the rendering thread helps to quickly generate a changed interface that is caused by non-animation logic while implementing animation.

Wherein, the value of T-Delay can be smaller than the period of the vertical synchronization signal, and can also be greater than or equal to the period of the vertical synchronization signal.

Optionally, in some embodiments of the present application, the rendering thread may lag the UI thread by one or more vertical synchronization signals (Vsync-APP) to update animation parameters and generate an interface. It is understandable that in this case, when the rendering thread lags behind the UI thread by one or more vertical synchronization signals (Vsync-APP) to update the animation parameters, it may cause a delayed start of the animation, but it benefits from the single-frame interface generation The maximum processing time of , which helps reduce the probability of dropped frames.

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 the vertical synchronization signal (Vsync-Render), the frequency of the vertical synchronization signal (Vsync-Render) and the vertical synchronization signal (Vsync-APP) , The time can be different or the same.

(b) Modification of drawing command list

Optionally, in some embodiments of the present application, when the drawing instruction list of the interface before the start of the animation effect is different from that of the interface at the end of the animation effect, from the first frame of the animation effect to the end interface of the animation effect, Based on the rendering tree corresponding to the end interface of the animation effect, the interface is generated by modifying the animation parameters of the rendering tree, as in the following (i) animation effect process without modifying the drawing instruction list.

Optionally, in some embodiments of the present application, when the drawing instruction list of the interface before the start of the animation effect is different from that of the interface at the end of the animation effect, 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 the reference, and the interface is generated by modifying the animation parameters of the rendering tree, as in the following (i) animation effect process without modifying the drawing instruction list.

Optionally, in some embodiments of the present application, when the drawing instruction list of the interface before the start of the animation effect is different from that of the interface at the end of the animation effect, the drawing operation in the drawing instruction list may be modified by the rendering thread or the rendering process, And the animation effect parameter generation interface in the rendering tree, as in the following (ii) modifying the animation effect process of the drawing instruction list.

Wherein, in some embodiments of the present application, when the interface of the application program 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 interface of the end interface of the animation effect may be different.

(i) Do not modify the animation effect process of the drawing command list

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 the difference in the drawing instruction list. In the animation effect display method provided by the embodiment of the present application, the drawing instruction list of the rendering tree of the final interface shall prevail, and the rendering tree shall be updated by modifying the animation parameters, thereby generating an interface to realize the interface shown in Fig. 15A and Fig. 15B .

As shown in Figure 15A, before the start of the animation effect, the interface includes a control 1501, and the control 1501 carries the text "Please enter the account number", then the control may include a text view 1 and a rectangle view, and the text view 1 carries the text "Please enter Account", and text view 1 is the same size as control 1501.

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

When the animation effect is configured on the control 1501, at the end interface of the animation effect, the width of the control 1501 becomes shorter, and the text "Please enter the 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".

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

Since updating the drawing instruction list requires the UI thread to perform real-time measurement, layout, and drawing recording on the interface, in order to avoid updating the drawing instruction list during the animation effect process, from the first frame interface of the animation effect to the end interface of the animation effect, use The rendering tree of the ending interface is updated as animation effect parameters to generate the rendering tree of the interface, as shown in FIG. 15B .

As shown in FIG. 15B , during the duration of the animation effect, even if the width of the control 1501 is sufficient to accommodate the text "Please enter the account number" in one line, "Please enter the account number" is still presented in two lines of text, namely "Please enter", " account". In this case, within the duration of the animation effect, the rendering node corresponding to the control 1501 is rendering node 2, and the drawing operations included in the drawing instruction list of rendering node 2 are: "drawText (please input) and drawText (account number)" .

That is, during the animation effect process, the drawing command list does not change, and the rendering thread or rendering process modifies the animation effect parameters to generate an interface as shown in FIG. 15B . The width of the control 1501 gradually decreases, and the text is always divided into two lines.

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

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 the difference in the drawing instruction list. In the animation effect display method provided by the embodiment of the present application, in the process of generating the interface, the drawing operation in the drawing instruction list is continuously modified, and the animation effect parameters are modified to realize the generation interface, and realize the interface shown in Fig. 16A and Fig. 16B .

As shown in FIG. 16A , the interface before the start of the animation effect includes a control 1601 on which a picture 1 is carried, wherein the control 1601 may be an image view.

Among them, the drawing operation in the drawing instruction list corresponding to picture 1 displayed on the control 1601 is drawBitmap(picture 1, src, dst1), wherein picture 1 is the source image, scr indicates the area to be displayed in the source image, and dst1 indicates that picture 1 What area on the control 1601 is the scr drawn in.

After the control 1601 is configured with an animation effect, at the end interface of the animation effect, the width of the control 1601 becomes smaller, and the width of the image view 1 becomes smaller proportionally. The drawing operation in the drawing command list corresponding to image view 1 is drawBitmap(picture 1, src, dstN).

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

During the animation effect process, the rendering thread or rendering process updates the drawing operation corresponding to the control 1601 to realize the interface as shown in FIG. 16B .

As shown in FIG. 16B , during the animation effect process, the rendering thread or the rendering process modifies the drawing operation in the rendering tree and the animation effect parameters every frame, so that the width of the image view 1 continuously decreases during the animation effect process. The rendering thread or rendering process modifies the drawing operations such as: drawBitmap(picture 1, src, dst2), ..., drawBitmap(picture 1, src, dstN).

It is worth noting that the image processing strategy affects how the rendering thread or rendering process modifies the drawing operation. The image processing strategy can include: CENTER (the image is displayed in the center, if the image size exceeds the size of the view that hosts the image, the image will be cropped), CENTER_INSIDE (the image size will be adjusted proportionally so that the image is complete and displayed centered in the view that hosts the image) , FIT_CENTER (adjust the image size proportionally so that the image is not larger than the size of the view that hosts the image, and display it in the center), FIT_END (adjust the size of the image proportionally so that the image is not larger than the size of the view that hosts the image, and display it at the bottom), FIT_START (adjust the image size proportionally, so that the image is not larger than the size of the view that hosts the image, and display it on top), FIT_XY (adjust the size of the image not proportionally, so that the image is not larger than the size of the view that hosts the image), etc., which will not be described here limited.

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.

As shown in FIG. 16C and FIG. 16D , by modifying the drawing operation in the drawing instruction list, the picture carried on the control is scaled or cropped, so as to adapt to the size change of the control.

As shown in FIG. 16C , the control 1602 carries 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 above.

Alternatively, as shown in FIG. 16D , when the size of the control becomes smaller, the picture may be cropped according to the change ratio of the control size. Or, as shown in Figure 16E, 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 first, and then cut according to the size of the control, so as to realize the control shown in Figure 16E displayed animation effect.

To sum up, the rendering thread or rendering process can cut the image or other content carried on the control by modifying the drawing operation in the drawing instruction list according to the change of the control size, so as to realize continuous interface changes.

S8033: the rendering process or the rendering thread of the application, updating the rendering tree based on the animation parameters, and generating a bitmap based on the updated rendering tree

After the rendering thread or rendering process has obtained the rendering tree with updated animation parameters, it can traverse the rendering tree, traverse and execute the drawing operations in the drawing instruction list on the canvas, and combine the rendering attributes of the rendering nodes when performing each drawing operation , adjust the parameters of the drawing operation or adjust the graphics processing library call corresponding to the drawing operation, and then generate the bitmap.

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

The bitmap will be rendered by the rendering process or the surface compositor (acquired by SurfaceFlinger), and the interface will be generated after the layer is composited.

S804: Optionally, the rendering process or the rendering thread of the application synchronizes the properties of the view to the UI thread of the application

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

As shown in Figure 17, the steps for determining the view attributes from the UI thread data include:

S1701: Determine and transmit information for updating the rendering tree

After the UI thread of the application determines the information used to update the rendering tree, it can pass the information used to update the rendering tree to the rendering process or the rendering thread of the application, such as the animation of the interface rendering tree for each frame within the duration of the animation effect parameter.

In the first frame of the animation effect, the UI thread of the application program transmits information for updating animation parameters to the rendering thread or rendering process, such as the duration of the animation effect, the animation object, the end interface of the animation effect, and the like.

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

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

S1702: Determine and transfer the attributes of the view

During the display of animation effects, the rendering thread or rendering process determines the properties of the view based on the rendering tree, such as size and position, 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.

Optionally, in some embodiments of the present application, the rendering thread or the rendering process may transmit the position, size and other properties of the view to the UI thread of the application in response to the request of the UI thread of the application.

It can be understood that, in the process of displaying the animation effect, the UI thread of the application program is not required to determine the properties of the view through measurement, layout, and drawing, which reduces the load of the UI thread of the application program.

Finally, the following uses the content shown in FIG. 18A , FIG. 18B , and FIG. 18C to illustrate the differences between the two animation effect display modes shown in FIG. 3 and FIG. 4 .

As shown in FIG. 18A , before the animation effect 1 starts, a rendering tree 1 is stored in the rendering thread of the application program, and the control 1A01 in the interface of the application program is a square of 20 pixels.

After the animation effect 1 starts, the UI thread of the application program receives the vertical synchronization signal 1, determines that the size of the control 1A01 in the interface of the first frame of the animation effect 1 is 25 pixels*25 pixels, and then generates the first frame of the animation effect 1 The rendering tree 2 corresponding to the interface, and the rendering tree 2 is synchronized 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 25 pixels*25 pixels.

Then, after the UI thread receives the vertical synchronization signal 2, the size of the control 1A01 in the first frame interface of the animation effect 1 is fixed to be 30 pixels*30 pixels, and the rendering tree 3 corresponding to the second frame interface of the animation effect 1 is generated, and Synchronize the render tree 3 into the application's rendering thread. 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.

As shown in FIG. 18B , before the animation effect, a rendering tree 1 is stored in the rendering thread of the application program, and the control 1A01 in the interface of the application program is a square of 20 pixels.

After the animation effect 1 starts, the UI thread of the application program receives the vertical synchronization signal 1, and the logic for determining the animation effect 1 is: control 1A01 becomes larger by 5 pixels per frame, and finally becomes 100 pixels*pixels, and based on the animation effect 1 End the interface to generate rendering tree 2. Then pass the logic of animation effect 1 and rendering tree 2 to the rendering process or the rendering thread of the application, and the rendering process or rendering thread of the application updates the rendering tree 2 based on the logic of animation effect 1, and generates based on the updated rendering tree 2 A bitmap, the size of the control 1A01 in the bitmap is 25 pixels*25 pixels.

Then, after receiving the vertical synchronization signal 2, the rendering process or the rendering thread of the application program 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, the control 1A01 in the bitmap The size is 30 pixels by 30 pixels.

As shown in Figure 18C, different from Figure 18B, 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 .

(3) The electronic equipment provided by the embodiment of this application

First, the hardware architecture of the electronic device provided by the embodiment of the present application is introduced.

Electronic devices can be cell phones, tablet computers, desktop computers, laptop computers, handheld computers, notebook computers, ultra-mobile personal computers (UMPC), netbooks, as well as cellular phones, personal digital assistants (personal digital assistants) assistant, PDA), augmented reality (augmented reality, AR) device, virtual reality (virtual reality, VR) device, artificial intelligence (artificial intelligence, AI) device, wearable device, vehicle-mounted device, smart home device and/or smart For urban equipment, the embodiment of the present application does not specifically limit the specific type of the electronic equipment.

The electronic device may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (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, Mobile communication module 150, wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, earphone jack 170D, sensor module 180, button 190, motor 191, indicator 192, camera 193, display screen 194, and user An identification module (subscriber identification module, SIM) card interface 195 and the like. 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, bone conduction sensor 180M, etc.

It can be understood that, the structure shown 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 illustrations, or combine certain components, or separate certain components, or arrange different components. The illustrated components can be realized in hardware, software or a combination of software and hardware.

The processor 110 may include one or more processing units, for example: the processor 110 may include an application processor (application processor, AP), a modem processor, a graphics processing unit (graphics processing unit, GPU), an image signal processor (image signal processor, ISP), controller, video codec, digital signal processor (digital signal processor, DSP), baseband processor, and/or neural network processor (neural-network processing unit, NPU), etc. Wherein, different processing units may be independent devices, or may be integrated in one or more processors.

The controller can generate an operation control signal according to the instruction opcode and timing signal, and complete the control of fetching and executing the instruction.

A memory may also be provided in the processor 110 for storing instructions and data. In some embodiments, the memory in processor 110 is a cache memory. The memory may hold instructions or data that the processor 110 has just used or recycled. If the processor 110 needs to use the instruction or data again, it can be called directly from the memory. Repeated access is avoided, and the waiting time of the processor 110 is reduced, thereby improving the efficiency of the system.

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

The I2C interface is a bidirectional synchronous serial bus, including a serial data line (serial data line, SDA) and a serial clock line (derail clock line, SCL). In some embodiments, processor 110 may include multiple sets of I2C buses. The processor 110 can be respectively coupled to the touch sensor 180K, the charger, the flashlight, the camera 193 and the like 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 and the touch sensor 180K communicate through the I2C bus interface to realize the touch function of the electronic device.

The I2S interface can be used for audio communication. In some embodiments, processor 110 may include multiple sets of I2S buses. The processor 110 may be coupled to the audio module 170 through an I2S bus to implement communication between the processor 110 and the audio module 170 . In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 through the I2S interface, so as to realize the function of answering calls through the Bluetooth headset.

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

The UART interface is a universal serial data bus used 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, a 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 realize the Bluetooth function. In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 through the UART interface, so as to realize the function of playing music through the Bluetooth headset.

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

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 screen 194 , the wireless communication module 160 , the audio module 170 , the sensor module 180 and so on. The GPIO interface can also be configured as an I2C interface, I2S interface, UART interface, MIPI interface, etc.

The USB interface 130 is an interface conforming to the USB standard specification, specifically, it can be a Mini USB interface, a Micro USB interface, a USB Type C interface, and the like. The USB interface 130 can be used to connect a charger to charge the electronic device, and can also be used to transmit data between the electronic device and peripheral devices. It can also be used to connect headphones and play audio through them. This interface can also be used to connect other electronic devices, such as AR devices.

It can be understood that the interface connection relationship between the modules shown 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.

The charging management module 140 is configured to receive a charging input from a charger. Wherein, the charger may be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 can receive charging input from the 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 the electronic device. While the charging management module 140 is charging the battery 142 , it can also provide power for electronic devices through the power management module 141 .

The power management module 141 is used for connecting the battery 142 , the charging management module 140 and the processor 110 . The power management module 141 receives the input from the battery 142 and/or the charging management module 140 to provide power for 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 times, and battery health status (leakage, impedance). In some other embodiments, the power management module 141 may also be disposed in the processor 110 . In some other embodiments, the power management module 141 and the charging management module 140 may also be set in the same device.

The wireless communication function of the electronic device can be realized by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

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

The mobile communication module 150 can provide wireless communication solutions including 2G/3G/4G/5G applied to electronic devices. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (low noise amplifier, LNA) and the like. The mobile communication module 150 can receive electromagnetic waves through the antenna 1, filter and amplify the received electromagnetic waves, and send them to the modem processor for demodulation. The mobile communication module 150 can also amplify the signals modulated by the modem processor, and convert them into electromagnetic waves through the antenna 1 for radiation. In some embodiments, at least part of the functional modules of the mobile communication module 150 may be set in the processor 110 . In some embodiments, at least part of the functional modules of the mobile communication module 150 and at least part of the modules of the processor 110 may be set in the same device.

A modem processor may include a modulator and a demodulator. Wherein, the modulator is used for modulating the low-frequency baseband signal to be transmitted into a medium-high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low frequency baseband signal. Then the demodulator sends the demodulated low-frequency baseband signal to the baseband processor for processing. The low-frequency baseband signal is passed to the application processor after being processed by the baseband processor. The application processor outputs sound signals through audio equipment (not limited to speaker 170A, receiver 170B, etc.), or displays images or videos through display screen 194 . In some embodiments, the modem processor may be a stand-alone device. In some other embodiments, the modem processor may be independent from the processor 110, and be set in the same device as the mobile communication module 150 or other functional modules.

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

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 (general packet radio service, GPRS), code division multiple access (code division multiple access, CDMA), broadband Code division multiple access (wideband code division multiple access, WCDMA), time division code division multiple access (time-division code division multiple access, TD-SCDMA), long term evolution (long term evolution, LTE), BT, GNSS, WLAN, NFC , FM, and/or IR techniques, etc. The GNSS may include a global positioning system (global positioning system, GPS), a global navigation satellite system (global navigation satellite system, GLONASS), a Beidou navigation satellite system (beidou navigation satellite system, BDS), a quasi-zenith satellite system (quasi -zenith satellite system (QZSS) and/or satellite based augmentation systems (SBAS).

The electronic device realizes the display function through the GPU, the display screen 194, and the application processor. The GPU is a microprocessor for image processing, and is connected to the display screen 194 and the application processor. GPUs are used to perform mathematical and geometric calculations for graphics rendering. Processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

The display screen 194 is used to display images, videos and the like. The display screen 194 includes a display panel. The display panel may be a liquid crystal display (LCD). The display panel can also use organic light-emitting diodes (organic light-emitting diodes, OLEDs), active-matrix organic light-emitting diodes or active-matrix organic light-emitting diodes (active-matrix organic light emitting diodes, AMOLEDs), flexible light-emitting diodes ( flex light-emitting diode, FLED), miniled, microled, micro-oled, quantum dot light emitting diodes (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.

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

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

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

Digital signal processors are used to process digital signals. In addition to 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, etc.

Video codecs are used to compress or decompress digital video. An electronic device may support one or more video codecs. In this way, the electronic device can play or record video in multiple encoding formats, for example: moving picture experts group (moving picture experts group, MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

The NPU is a neural-network (NN) computing processor. By referring to the structure of biological neural networks, such as the transfer mode between neurons in the human brain, it can quickly process input information and continuously learn by itself. Applications such as intelligent cognition of electronic devices can be realized through NPU, such as: image recognition, face recognition, speech recognition, text understanding, etc.

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

Random access memory can include static random-access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (synchronous dynamic random access memory, SDRAM), double data rate synchronous Dynamic random access memory (double data rate synchronous dynamic random access memory, DDR SDRAM, such as the fifth generation DDR SDRAM is generally called DDR5SDRAM), etc.;

Non-volatile memory may include magnetic disk storage devices, flash memory (flash memory).

According to the operating principle, flash memory can include NOR FLASH, NAND FLASH, 3D NAND FLASH, etc. According to the potential order of storage cells, it can include single-level storage cells (single-level cell, SLC), multi-level storage cells (multi-level cell, MLC), triple-level cell (TLC), quad-level cell (QLC), etc., can include universal flash storage (English: universal flash storage, UFS) according to storage specifications , embedded multimedia memory card (embedded multi media Card, eMMC), etc.

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 an operating system or other running programs, and can also be used to store data of users and application programs.

The non-volatile memory can also store executable programs and data of users and application programs, etc., and can be loaded into the random access memory in advance for the processor 110 to directly read and write.

The external memory interface 120 can be used to connect an external non-volatile memory, so as 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 video are stored in an external non-volatile memory.

The electronic device can implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the earphone interface 170D, and the application processor. Such as music playback, recording, etc.

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 signal. The audio module 170 may also be used to encode and decode audio signals. In some embodiments, the audio module 170 may be set in the processor 110 , or some functional modules of the audio module 170 may be set in the processor 110 .

Speaker 170A, also referred to as a "horn", is used to convert audio electrical signals into sound signals. The electronic device can listen to music through speaker 170A, or listen to hands-free calls.

Receiver 170B, also called "earpiece", is used to convert audio electrical signals into sound signals. When the electronic device receives a call or a voice message, it can listen to the voice by placing the receiver 170B close to the human ear.

The microphone 170C, also called "microphone" or "microphone", is used to convert sound signals into electrical signals. When making a phone call or sending a voice message, the user can put his mouth close to the microphone 170C to make a sound, and input the sound signal to the microphone 170C. The electronic device may be provided with at least one microphone 170C. In other embodiments, the electronic device can be provided with two microphones 170C, which can also implement a noise reduction function in addition to collecting sound signals. In some other embodiments, the electronic device can also be equipped with three, four or more microphones 170C to realize sound signal collection, noise reduction, identify sound sources, and realize directional recording functions, etc.

The earphone interface 170D is used for connecting wired earphones. The earphone interface 170D can be a USB interface 130, or a 3.5mm open mobile terminal platform (OMTP) standard interface, or a cellular telecommunications industry association of the USA (CTIA) standard interface.

The pressure sensor 180A is used to sense the pressure signal and convert the pressure signal into an electrical signal. In some embodiments, pressure sensor 180A may be disposed on display screen 194 . There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, and capacitive pressure sensors. A capacitive pressure sensor may be comprised of at least two parallel plates with conductive material. When a force is applied to the pressure sensor 180A, the capacitance between the electrodes changes. Electronics determine the strength of the pressure based on the change in capacitance. When a touch operation acts on the display screen 194, the electronic device detects the intensity of the touch operation according to the pressure sensor 180A. The electronic device may also calculate the touched 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 may 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 short messages is executed. When a touch operation whose intensity is greater than or equal to the first pressure threshold acts on the icon of the short message application, the instruction of creating a new short message is executed.

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 about three axes (ie, x, y, and z axes) may be determined by the gyro sensor 180B. The gyro sensor 180B can be used for image stabilization. Exemplarily, when the shutter is pressed, the gyro sensor 180B detects the shake angle of the electronic device, calculates the distance that the lens module needs to compensate according to the angle, and allows the lens to counteract the shake 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.

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 in positioning and navigation.

The magnetic sensor 180D includes a Hall sensor. The electronic device may detect opening and closing of the flip holster using the magnetic sensor 180D. In some embodiments, when the electronic device is a flip machine, the electronic device can detect opening and closing of the flip according to the magnetic sensor 180D. Furthermore, according to the detected opening and closing state of the leather case or the opening and closing state of the flip cover, features such as automatic unlocking of the flip cover are set.

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

The distance sensor 180F is used to measure the distance. Electronic devices can measure distance via infrared or laser light. In some embodiments, when shooting a scene, the electronic device can use the distance sensor 180F to measure the distance to achieve fast focusing.

Proximity light sensor 180G may include, for example, light emitting diodes (LEDs) and light detectors, such as photodiodes. The light emitting diodes may be infrared light emitting diodes. Electronic devices emit infrared light outwards through light-emitting diodes. Electronic devices use photodiodes to detect infrared reflected light from nearby objects. When sufficient reflected light is detected, it can be determined that there is an object in the vicinity of the electronic device. When insufficient reflected light is detected, the electronic device may determine that there is no object in the vicinity of the electronic device. The electronic device can use the proximity light sensor 180G to detect that the user holds the electronic device close to the ear to make a call, so as to automatically turn off the screen to save power. The proximity light sensor 180G can also be used in leather case mode, automatic unlock and lock screen in pocket mode.

The ambient light sensor 180L is used for sensing 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 the pocket to prevent accidental touch.

The fingerprint sensor 180H is used to collect fingerprints. Electronic devices can use the collected fingerprint features to unlock fingerprints, access application locks, take pictures with fingerprints, answer incoming calls with fingerprints, etc.

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 implement a temperature treatment strategy. For example, when the temperature reported by the temperature sensor 180J exceeds a threshold, the electronic device may reduce the performance of a processor located near the temperature sensor 180J, so as to reduce power consumption and implement thermal protection. In some 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 caused by low temperature. In some 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 caused by low temperature.

The touch sensor 180K is also called "touch device". The touch sensor 180K can be disposed on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, also called a “touch screen”. The touch sensor 180K is used to detect a touch operation 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 some other embodiments, the touch sensor 180K may also be disposed on the surface of the electronic device, which is different from the position of the display screen 194 .

The bone conduction sensor 180M can acquire vibration signals. In some embodiments, the bone conduction sensor 180M can acquire the vibration signal of the vibrating bone mass of the human voice. The bone conduction sensor 180M can also contact the human pulse and receive the blood pressure beating signal. In some embodiments, the bone conduction sensor 180M can also be disposed in the earphone, combined into a bone conduction earphone. The audio module 170 can analyze the voice signal based on the vibration signal of the vibrating bone mass of the vocal part acquired by the bone conduction sensor 180M, so as to realize the voice function. The application processor can analyze the heart rate information based on the blood pressure beating signal acquired by the bone conduction sensor 180M, so as to realize the heart rate detection function.

The keys 190 include a power key, a volume key and the like. The key 190 may be a mechanical key. It can also be a touch button. The electronic device can receive key input and generate key signal input related to user settings and function control of the electronic device.

The motor 191 can generate a vibrating reminder. The motor 191 can be used for incoming call vibration prompts, and can also be used for touch vibration feedback. For example, touch operations applied to different applications (such as taking pictures, playing audio, etc.) may correspond to different vibration feedback effects. The motor 191 may also correspond to different vibration feedback effects for touch operations acting on different areas of the display screen 194 . Different application scenarios (for example: time reminder, receiving information, alarm clock, games, etc.) can also correspond to different vibration feedback effects. The touch vibration feedback effect can also support customization.

The indicator 192 can be an indicator light, and can be used to indicate charging status, power change, and can also be used to indicate messages, missed calls, notifications, and the like.

The SIM card interface 195 is used for connecting a SIM card. The SIM card can be inserted into the SIM card interface 195 or pulled out from the SIM card interface 195 to realize contact and separation with the electronic device. The electronic device can support 1 or N SIM card interfaces, where N is a positive integer greater than 1. SIM card interface 195 can support Nano SIM card, Micro SIM card, SIM card etc. The same SIM card interface 195 can insert multiple cards simultaneously. The types of the multiple cards may be the same or different. The SIM card interface 195 is also compatible with different types of SIM cards. The SIM card interface 195 is also compatible with external memory cards. The electronic device interacts with the network through the SIM card to realize functions such as calling and data communication. In some embodiments, the electronic device adopts an eSIM, that is, an embedded SIM card. The eSIM card can be embedded in the electronic device and cannot be separated from the electronic device.

Secondly, the software architecture of the electronic device provided by the embodiment of the present application is introduced.

As shown in Figure 20, the layered architecture divides the software into several layers, and each layer has a clear role and division of labor. Layers communicate through software interfaces. In some embodiments, the system is divided into four layers, which are application program layer, application program framework layer, system library, and kernel layer from top to bottom.

The application layer can consist of a series of application packages. As shown in FIG. 20, the application package may include application programs (also called applications) such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, and short message.

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

As shown in Figure 20, the application framework layer can include window management service, display management service, content provider, view system, phone manager, resource manager, notification manager, local profile management assistant (Local Profile Assistant, LPA) wait.

The window management service is responsible for the startup, addition, and deletion of windows. It can determine the applications displayed on the windows and the creation, destruction, and property changes of the layers of the applications. It can determine whether there is a status bar, lock the screen, and capture the screen.

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

Content providers are used to store and retrieve data and make it accessible to applications. Said data may include video, images, audio, calls made and received, browsing history and bookmarks, phonebook, etc.

The phone manager is used to provide communication functions of electronic devices. For example, the management of call status (including connected, hung up, etc.).

The resource manager provides various resources for the application, such as localized strings, icons, pictures, layout files, video files, and so on.

The notification manager enables the application to display notification information in the status bar, which can be used to convey notification-type messages, and can automatically disappear after a short stay without user interaction. For example, the notification manager is used to notify the download completion, message reminder, etc. The notification manager can also be a notification that appears on the top status bar of the system in the form of a chart or scroll bar text, such as a notification of an application running in the background, or a notification that appears on the screen in the form of a dialog interface. For example, prompting text information in the status bar, issuing a prompt sound, vibrating the electronic device, and flashing the indicator light, etc.

The view system includes visual controls, such as controls for displaying text, controls for displaying pictures, and so on. The view system can be used to build applications. A display interface can consist of one or more views. For example, a display interface including a text message notification icon may include a view for displaying text and a view for displaying pictures.

The application framework layer can also include an animation system.

As shown in Figure 20, the animation system executes the animation effect display methods provided by the embodiment of the present application including:

S2001: Configure the animation effect through the animation interface

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.

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

After the application program starts to run and receives the 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.

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

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. Wherein, the description information of the frame to be rendered currently includes the attributes of the controls on the frame.

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

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

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

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

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

The application layer and the application framework layer run in virtual machines. The virtual machine executes the java files of the application program layer and the application program 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.

A system library can include multiple function modules. For example: surface manager (surface manager), media library (Media Libraries), graphics processing library, wherein, the graphics processing library includes: three-dimensional graphics processing library (for example: OpenGL ES), two-dimensional graphics engine (for example: SGL) and so on. The surface manager is used to manage the display subsystem, and provides fusion of two-dimensional (2-Dimensional, 2D) and three-dimensional (3-Dimensional, 3D) layers for multiple applications. The media library supports playback and recording of various commonly used audio and video formats, as well as still 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. The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, layer composition, and layer processing. 2D graphics engine is a drawing engine for 2D drawing. The kernel layer is the layer between hardware and software. The kernel layer includes at least a display driver, a camera driver, an audio driver, a sensor driver, and a virtual card driver.

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

In the above embodiments, all or part of them may be implemented by software, hardware, firmware or any combination thereof. When implemented using software, it may 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 the computer, the processes or functions according to the embodiments of the present application will be generated in whole or in part. The computer can be a general purpose computer, a special purpose computer, a computer network, or other programmable device. The computer instructions may be stored in or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transferred from a website, computer, server, or data center by wire (such as coaxial cable, optical fiber, digital subscriber line) or wireless (such as infrared, wireless, microwave, etc.) to another website site, computer, server or data center. The computer-readable storage medium may be any available medium that can be accessed by a computer, or a data storage device such as a server or a data center integrated with one or more available media. The usable medium may be a magnetic medium (eg, floppy disk, hard disk, magnetic tape), an optical medium (eg, DVD), or a semiconductor medium (eg, a solid-state hard disk), and the like.

Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments are realized. The processes can be completed by computer programs to instruct related hardware. The programs can be stored in computer-readable storage media. When the programs are executed , may include the processes of the foregoing method embodiments. The aforementioned storage medium includes: ROM or random access memory RAM, magnetic disk or optical disk, and other various media that can store program codes.

Claims

A method for displaying animation effects, applied to electronic equipment, characterized in that it includes:

displaying a first interface, where the first interface includes a first control;

When the first interface is displayed, displaying the first control with a first animation effect in response to a first operation at a first moment;

At a second moment after the first moment, in response to a second operation, if the second moment is after the end of the first animation effect, display the first control with a second animation effect;

At the second moment, in response to the second operation, if the second moment is within the duration of the first animation effect, display the first control with a third animation effect;

The third animation effect includes a transition process and an animation process, the animation process is a part of the second animation effect, the end interface of the animation process is the same as the end interface of the second animation effect, and the transition process is based on the The display content of the first animation effect at the second moment is determined with the second animation effect; or, the third animation effect is determined according to the display content of the first animation effect at the second moment and the second animation effect The end interface of the third animation effect is determined, and the end interface of the third animation effect is the same as the end interface of the second animation effect.
The method according to claim 1, characterized in that,

The properties of the first control include a first property, the first property changes at a first rate during the first animation effect, and the first property changes at a second rate during the second animation effect;

The transition process is determined according to the display content of the first animation effect at the second moment and the second animation effect, specifically including: the change rate of the first attribute during the transition process is determined according to the first rate and said second rate determination;

The third animation effect is determined according to the display content of the first animation effect at the second moment and the end interface of the second animation effect, specifically including: the change of the first attribute during the process of the third animation effect A rate is determined based on the first rate and the second rate.
The method according to claim 2, characterized in that,

The rate of change of the first attribute during the transition process is determined according to the first rate and the second rate, specifically including: the rate of change of the first attribute during the transition process is the first rate and the vector superposition of the second rate;

The rate of change of the first attribute during the third animation effect is determined according to the first rate and the second rate, specifically including: the rate of change of the first attribute during the third animation effect is the vector superposition of the first rate and the second rate.
The method according to claim 1, characterized in that,

The properties of the first control include a first property, the first property changes at a first rate during the first animation effect; the first property changes at a second rate during the second animation effect;

The third animation effect includes a transition process and an animation process, and the first attribute is continuous, first-order derivable or second-order derivable during the transition process;

Alternatively, the third animation effect is determined according to the display content of the first animation effect at the first moment and the end interface of the second animation effect, and the first attribute is continuous, First-order differentiable or second-order differentiable.
The method according to any one of claims 1-4, characterized in that,

The first animation effect linearly increases the size of the first control, and the second animation effect linearly decreases the size of the first control;

The transition process is determined according to the display content of the first animation effect at the second moment and the second animation effect, and specifically includes: the transition process first increases and then decreases the size of the first control, the The increasing rate of change gradually slows down, and the decreasing rate gradually accelerates;

The third animation effect is determined according to the display content of the first animation effect at the second moment and the end interface of the second animation effect, specifically including: the third animation effect makes the size of the first control first Decrease after increasing, the change speed of the increase gradually slows down, and the speed of decrease gradually accelerates.
The method according to any one of claims 1-5, characterized in that,

The third animation effect includes a transition process and an animation process, and the end time of the transition process is the end time of the first animation effect;

Alternatively, the third animation effect is determined according to the display content of the first animation effect at the second moment and the end interface of the second animation effect, and the end time of the third animation effect is the end time of the second animation. End Time.
The method according to any one of claims 1-6, wherein the method further comprises:

At the second moment, after responding to the second operation, determine the duration of the second animation effect and the end frame description information of the second animation effect;

Determine the transition process according to the display content of the first animation effect at the second moment and the second animation effect, and determine the duration of the transition process and the end frame description information of the transition process; or , generating the third animation effect according to the display content of the first animation effect at the second moment and the end frame description information of the second animation effect, and determining the duration of the third animation effect and the first animation effect The end frame description information of three animation effects, the end frame description information of the third animation effect is the same as the end frame description information of the second animation effect;

During the duration of the transition process, when generating the display data of the target frame, determine the description information of the target frame according to the duration of the transition process and the end frame description information of the transition process; or, in the During the duration of the third animation effect, when generating the display data of the target frame, determine the description information of the target frame according to the duration of the third animation effect and the end frame description information of the third animation effect;

The display data of the target frame is generated according to the description information of the target frame.
An electronic device, characterized in that the electronic device includes: one or more processors and memory;

The memory is coupled to the one or more processors, the memory is used to store computer program code, the computer program code includes computer instructions, and the one or more processors invoke the computer instructions to make the The electronic device executes the method according to any one of claims 1-7.
A system on a chip, the system on a chip is applied to an electronic device, the system on a chip includes one or more processors, and the processor is used to invoke computer instructions so that the electronic device performs any one of claims 1-7 method described in the item.
A computer-readable storage medium, comprising instructions, wherein, when the instructions are run on an electronic device, the electronic device is made to execute the method according to any one of claims 1-7.