CN115994006A

CN115994006A - Animation effect display method and electronic equipment

Info

Publication number: CN115994006A
Application number: CN202111526842.7A
Authority: CN
Inventors: 张朋; 王亮; 金成铭; 赵啸宇; 陈路路
Original assignee: Huawei Technologies Co Ltd
Current assignee: Huawei Technologies Co Ltd
Priority date: 2021-10-18
Filing date: 2021-12-14
Publication date: 2023-04-21
Also published as: WO2023066165A1

Abstract

The application provides an animation effect display method and electronic equipment, and relates to the technical field of electronics. According to the animation effect display method, under the condition that animation effects conflict, one animation effect can be newly generated to smooth the overlapped position or the joint position of the two animation effects, so that the attributes such as the size, the position and the transparency of the control on the interface cannot jump, the change of the control on the interface is continuous, and the animation effect is smoother.

Description

Animation effect display method and electronic equipment

Technical Field

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

Background

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

The application program can display the animation effect to the user by adjusting the size, width, height, transparency and other attributes of the control displayed on the interface.

However, at the joint or overlapping position of different animation effects, as the different animation effects can modify the attribute of the control on the application program interface with different logics, the change of the control may be discontinuous, thereby causing jump of the interface of the application program and poor user experience.

Disclosure of Invention

In a first aspect, an embodiment of the present application provides an animation effect display method, including: displaying a first interface, wherein the first interface comprises a first control; displaying the first control in a first animation effect in response to a first operation at a first moment when the first interface is displayed; responding to a second operation at a second moment after the first moment, and if the second moment is after the end of the first animation effect, displaying the first control with a second animation effect; at the second moment, responding to the second operation, and if the second moment is within the duration time of the first animation effect, displaying the first control with a third animation effect; the third animation effect comprises a transition process and an animation process, the animation process is a part of the second animation effect, the ending interface of the animation process is the same as the ending interface of the second animation effect, and the transition process is determined according to the display content of the first animation effect at the second moment and the second animation effect; or determining the third animation effect according to the display content of the first animation effect at the second moment and the ending interface of the second animation effect, wherein the ending interface of the third animation effect is the same as the ending interface of the second animation effect.

In the above embodiment, in the case of collision of animation effects, an animation effect is newly generated to smooth the overlapping or joint of two animation effects, so that the attributes such as the size, the position, the transparency and the like of the control on the interface are not jumped, but the change of the control on the interface is continuous, and the animation effect is smoother.

With reference to some embodiments of the first aspect, in some embodiments, the attribute of the first control includes a first attribute that changes at a first rate in the first animation effect and a second rate in 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, and specifically comprises the following steps: the change rate of the first attribute in the transition process is determined according to the first rate and the second rate; the third animation effect is determined according to the display content of the first animation effect at the second moment and the ending interface of the second animation effect, and specifically comprises the following steps: the rate of change of the first attribute during the third animated effect is determined based on the first rate and the second rate.

In the above embodiment, the rate of change of the attribute of the control in the third animation effect may be related to the rate of change of the attribute of the control in the first animation effect and the rate of change of the attribute of the control in the second animation effect. And further, the change of the control on the interface keeps the trend of the first animation effect and the trend of the second animation effect, so that smooth transition is realized.

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

In the above embodiment, the attribute of the control may be adjusted by vector superposition of the changing speeds of the attribute of the control in different animation effects, so as to realize smooth transition at the overlapping or joining positions of the different animation effects.

With reference to some embodiments of the first aspect, in some embodiments, the attribute of the first control includes a first attribute that changes at a first rate in the first animation effect; the first attribute changes at a second rate in the second animation effect; the third animated effect includes a transition process and an animation process, the first attribute being continuous, first-order-derivative, or second-order-derivative during the transition process; or the third animation effect is determined according to the display content of the first animation effect at the first moment and the ending interface of the second animation effect, and the first attribute is continuous, first-order conductive or second-order conductive in the process of the third animation effect.

In the above embodiment, according to the attribute of the control at the second moment and the attribute of the control at the end of the third animation effect, the change of the attribute of the control can be directly determined by an interpolation method, so that the attribute of the control is continuous, first-order conductive and second-order conductive at the overlapping or connecting position of different animation effects.

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 determined according to the display content of the first animation effect at the second moment and the second animation effect, and specifically comprises the following steps: the transition process enables the size of the first control to be increased and then decreased, the changing speed of the increase is gradually slowed down, and the decreasing speed is gradually increased; the third animation effect is determined according to the display content of the first animation effect at the second moment and the ending interface of the second animation effect, and specifically comprises the following steps: the third animation effect enables the size of the first control to be increased and then decreased, the changing speed of the increase is gradually slowed down, and the decreasing speed is gradually increased.

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, the size of the control may be smoothly transitioned at the junction/overlap of the first animation effect and the second animation effect by increasing the size of the first control before decreasing, and adjusting the increasing speed and the decreasing speed.

With reference to some embodiments of the first aspect, in some embodiments, the third animation effect includes a transitional process and an animation process, and an end time of the transitional process is an end time of the first 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 ending interface of the second animation effect, and the ending time of the third animation effect is the ending time of the second animation.

With reference to some embodiments of the first aspect, in some embodiments, at the second time instant, in response to the second operation, determining a duration of the second animation effect, ending frame description information of the second animation effect; determining the transition process according to the display content of the first animation effect at the second moment and the second animation effect, and determining 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 time of the third animation effect and the end frame description information of the third animation effect, wherein the end frame description information of the third animation effect is identical with the end frame description information of the second animation effect; determining 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 when generating the display data of the target frame in the duration of the transition process; or determining the description information of the target frame according to the duration time of the third dynamic picture effect and the description information of the ending frame of the third dynamic picture effect when the display data of the target frame is generated in the duration time of the third dynamic picture effect; and generating display data of the target frame according to the description information of the target frame.

In the above embodiment, the electronic device needs to obtain the ending interfaces of different animation effects, so as to obtain the attribute of the control on the ending interface of the animation effect. After the electronic equipment knows the attribute of the control on the starting interface of the animation effect and the attribute of the control on the ending interface of the animation effect, the attribute of the control can be adjusted so that the attribute of the control cannot jump, and further the interface cannot jump in the process of displaying the animation effect.

In a second aspect, embodiments of the present application provide an electronic device, including: one or more processors and memory; the memory is coupled to the one or more processors, the memory for storing computer program code, the computer program code comprising computer instructions that the one or more processors call to cause the electronic device to perform: displaying a first interface, wherein the first interface comprises a first control; displaying the first control in a first animation effect in response to a first operation at a first moment when the first interface is displayed; responding to a second operation at a second moment after the first moment, and if the second moment is after the end of the first animation effect, displaying the first control with a second animation effect; at the second moment, responding to the second operation, and if the second moment is within the duration time of the first animation effect, displaying the first control with a third animation effect; the third animation effect comprises a transition process and an animation process, the animation process is a part of the second animation effect, the ending interface of the animation process is the same as the ending interface of the second animation effect, and the transition process is determined according to the display content of the first animation effect at the second moment and the second animation effect; or determining the third animation effect according to the display content of the first animation effect at the second moment and the ending interface of the second animation effect, wherein the ending interface of the third animation effect is the same as the ending interface of the second animation effect.

In the above embodiment, in the case of the collision of the animation effects, one animation effect is newly generated to smooth the overlapping or joining position of the two animation effects, so that the attributes such as the size, the position, the transparency and the like of the control on the interface are not jumped, but the change of the control on the interface is continuous, and the animation effect is 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 perform: the attributes of the first control include a first attribute that changes at a first rate in the first animation effect, a second attribute that changes at a second rate in the second animation effect, and a rate of change of the first attribute during the transition is determined based on the first rate and the second rate; or, the rate of change of the first attribute during the third animated 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 invoke the computer instructions to cause the electronic device to perform: the rate of change of the first attribute during the transition is a vector superposition of the first rate and the second rate; or, the rate of change of the first attribute during the third animated effect is a vector superposition of the first rate and the second rate.

With reference to some embodiments of the second aspect, in some embodiments, the attribute of the first control includes a first attribute that changes at a first rate in the first animation effect; the first attribute changes at a second rate in the second animation effect; the third animated effect includes a transition process and an animation process, the first attribute being continuous, first-order-derivative, or second-order-derivative during the transition process; or the third animation effect is determined according to the display content of the first animation effect at the first moment and the ending interface of the second animation effect, and the first attribute is continuous, first-order conductive or second-order conductive in the process of 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 invoke the computer instructions to cause the electronic device to perform: the first animation effect enables the size of the first control to be linearly increased, and the second animation effect enables the size of the first control to be linearly reduced; the transition process enables the size of the first control to be increased and then decreased, the changing speed of the increase is gradually slowed down, and the decreasing speed is gradually increased; or, the third animation effect makes the size of the first control increase and then decrease, the change speed of the increase gradually slows down, and the decrease speed gradually increases.

With reference to some embodiments of the second aspect, in some embodiments, the third animation effect includes a transitional process and an animation process, and an end time of the transitional process is an end time of the first 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 ending interface of the second animation effect, and the ending time of the third animation effect is the ending time of the second animation.

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 perform: at the second moment, determining duration time of the second animation effect and end frame description information of the second animation effect after responding to the second operation; determining the transition process according to the display content of the first animation effect at the second moment and the second animation effect, and determining 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 time of the third animation effect and the end frame description information of the third animation effect, wherein the end frame description information of the third animation effect is identical to the end frame description information of the second animation effect; determining 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 when generating the display data of the target frame in the duration of the transition process; or determining the description information of the target frame according to the duration time of the third dynamic picture effect and the description information of the ending frame of the third dynamic picture effect when the display data of the target frame is generated in the duration time of the third dynamic picture effect; and generating display data of the target frame according to the description information of the target frame.

In a third aspect, embodiments of the present application provide a chip system for application to an electronic device, the chip system comprising one or more processors for invoking computer instructions to cause the electronic device to perform a method as described in the first aspect and any possible implementation of the first aspect.

In a fourth aspect, embodiments of the present application provide a computer program product comprising instructions which, when run on an electronic device, cause the electronic device to perform a method as described in the first aspect and any possible implementation of the first aspect.

In a fifth aspect, embodiments of the present application provide a computer-readable storage medium comprising instructions that, when executed on an electronic device, cause the electronic device to perform a method as described in the first aspect and any possible implementation of the first aspect.

It will be appreciated that the electronic device provided in the second aspect, the chip system provided in the third aspect, the computer program product provided in the fourth aspect and the computer storage medium provided in the fifth aspect described above are all configured to perform the method provided by the embodiments of the present application. Therefore, the advantages achieved by the method can be referred to as the advantages of the corresponding method, and will not be described herein.

Drawings

Fig. 1A and 1B are schematic diagrams illustrating an exemplary interface according to an embodiment of the present application.

Fig. 2A and 2B are another exemplary schematic diagrams of an interface provided in an embodiment of the present application.

Fig. 3 is an exemplary schematic diagram of an animation effect display method according to an embodiment of the present application.

Fig. 4 is an exemplary schematic diagram of another animation effect display method according to an 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-6F are exemplary diagrams illustrating interface changes under multiple animation conflicts provided by embodiments of the present application.

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

Fig. 8 is a schematic diagram of an example of a flow of an animation effect display method according to an embodiment of the present application.

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

FIG. 10 is an exemplary diagram of determining attributes of views in each frame interface according to an embodiment of the present application.

FIGS. 11A-11D are exemplary diagrams of animation parameter variations provided by embodiments of the present application.

Fig. 12A and 12B are schematic diagrams illustrating an exemplary interface change in the multiple animation case according to the embodiments of the present application.

Fig. 13A, 13B, and 13C are an exemplary schematic diagram of a rendering thread or a rendering process according to an embodiment of the present application when updating a rendering tree.

Fig. 14 is another exemplary schematic diagram of a rendering thread for updating animation parameters according to an embodiment of the present application.

Fig. 15A and 15B are exemplary schematic diagrams of an animation effect process provided in an embodiment of the present application.

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

FIG. 17 is an exemplary diagram of determining view properties for UI thread data provided by embodiments of the application.

FIG. 18A is an exemplary diagram of a change in a rendering tree during execution of the method of FIG. 3, as provided by an embodiment of the present application.

Fig. 18B and 18C are exemplary diagrams illustrating a change in a rendering tree during execution of the method shown in fig. 4 according to an embodiment of the present application.

Fig. 19 is an exemplary schematic diagram of an electronic device hardware architecture according to an embodiment of the present application.

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

Detailed Description

The terminology used in the following embodiments of the application is for the purpose of describing particular embodiments only and is not intended to be limiting of the application. As used in the specification of this application, the singular forms "a", "an", "the" and "the" are intended to include the plural forms as well, unless the context clearly indicates to the contrary. It should also be understood that the term "and/or" as used in this application refers to and encompasses any or all possible combinations of one or more of the listed items.

The terms "first," "second," and the like, are used below for descriptive purposes only and are not to be construed as implying or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defining "a first" or "a second" may explicitly or implicitly include one or more such feature, and in the description of embodiments of the present application, unless otherwise indicated, the meaning of "a plurality" is two or more.

The term "User Interface (UI)" in the following embodiments of the present application is a media interface for interaction and information exchange between an application program or an operating system and a user, which enables conversion between an internal form of information and an acceptable form of the user. The user interface is a source code written in a specific computer language such as java, extensible markup language (extensible markup language, XML) and the like, and the interface source code is analyzed and rendered on the electronic equipment to finally be presented as content which can be identified by a user. A commonly used presentation form of the user interface is a graphical user interface (graphic user interface, GUI), which refers to a user interface related to computer operations that is displayed in a graphical manner. It may be a visual interface element of text, icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, widgets, etc., displayed in a display of the electronic device.

The interface serves as a medium interface for interaction and information interaction between the application and the user, and the electronic device needs to generate an interface of the application for a foreground application each time a vertical synchronization signal (Vsync-APP) arrives. Wherein the frequency of the vertical synchronization signal is related to the refresh rate of the screen of the electronic device, e.g. 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 the electronic device refreshes the content displayed on the screen, an interface for the application needs to be generated for the foreground application to present the newly generated interface for the application to the user at the time of screen refresh.

Animation (animation) effects act on an animation object, which may be an interface (or window) of an application, or an animation object may be one or more controls (views, or also referred to as views) of an application. From the perspective of the user, the animation object comprises one or more controls and from the perspective of the application, the animation object comprises one or more views. Where a view is a basic element that constitutes an application interface, one control on the interface of the application as seen by the user may correspond to one or more views.

In the embodiment of the present application, unless specifically described otherwise, the meanings of the control and the view expression may be the same.

From the time dimension disassembly, the continuous and smooth change process of the animation object in a period of time (at least two vertical synchronous signal interval durations) is the animation effect.

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

(1.1) interface configured with animation effects

In an embodiment of the present application, the animation may include: animation effects on appearance, animation effects on location, transformation-based animation effects, animation effects on content. Wherein, the animation effect that acts on the appearance includes: transparency, rounded corners, boundary colors, boundary line widths, background colors, shadows, etc.; animation effects acting on a location include a wide/high configuration, x/y/z coordinates, x/y/z anchor points; the transformation-based animation effects include: translation, rotation, scaling, 3D transformation; the animation effects acting on the content include: filter effects such as blurring, color enhancement, gray level variation, added mottle, etc.

All animations can be used as configurable attributes of the control, and the attributes of the control are used for determining a display mode of the control, wherein the display mode comprises the animation effect acting on the appearance, the animation effect acting on the position, the animation effect based on transformation, the animation effect acting on the content and the like.

The following exemplary description is provided of an interface configured with animation effects.

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

Desktop applications may also include icons for other applications, such as icons for gallery applications, icons for dialing applications, icons for information applications, icons for contacts applications.

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

Wherein, during the zooming in of control 1A01, control 1A02 appears on the interface. The enlargement process of the control 1A01 is an animation. Where the control 1a02 is progressively displayed in a clear (e.g., a change in transparency), then the process by which the control 1a02 progressively displays in a clear fashion is also an animation.

As shown in fig. 2A, the interface displayed on the screen of the electronic device is an interface of a desktop application, and the interface of the desktop application includes a control 2A01. The control 2A01 is a folder 1 and comprises a control 2A02, a control 2A03 and a control 2A04, wherein the control 2A02 is an icon of a game application program, the control 2A03 is an icon of a flashlight application program and the control 2A04 is an icon of a gallery application program.

In response to the user clicking on control 2a02, control 2a01 expands and moves, and controls 2a02, 2a03, 2a04 expand and move.

The expansion and movement processes of the controls 2A01, 2A02, 2A03 and 2A04 are also an animation.

(1.2) method for displaying animation effects

Implementing the interfaces shown in fig. 1A and 1B requires configuring an animation event for control 1A 01; implementing the interfaces shown in fig. 2A and 2B requires configuring animation events for control 2A01, control 2A02, control 2A03, and control 2A 04.

As shown in fig. 3, the animation effect display method may include four steps: step S301: creating an animation event 1; step S302: after receiving the vertical synchronizing signal, triggering callback of the animation event 1, and modifying the attribute of the view according to the logic of the animation event 1; step S303: measurement (measure), layout (layout), drawing record (draw, which may also be referred to as drawing in software rendering) to generate a rendering tree; step S304: a rendering tree is received and a bitmap is drawn based on the rendering tree. The UI thread needs to execute step S301, step S302, and step S303; the rendering thread needs to perform step S304. In the first frame of the animation effect, the electronic device needs to perform step 301, step 302, step 303, and step 304, and in each frame of the duration of the animation effect, the electronic device needs to perform step S302, step S303, and step S304.

Step S301: creating animation event 1

The animation event may be created at any time in relation to the logic of the application, for example, it may be created after receiving user input, a message event sent by other threads or processes to the application, a network data request update. The animation event includes internal logic for implementing the animation effect, such as an end condition of the animation effect, and a modifier of each frame of the video attribute in the duration of the animation effect.

After the animation event is created, a callback (equivalent to registering the animation event) is registered in the UI thread, for example, the callback is registered on an editor (chord) of the UI thread, and the callback is used for triggering the UI thread to process the animation event after the UI thread receives a vertical synchronization signal (Vsync-APP) each time, and the attribute of the view is modified according to the logic of the animation event.

When the animation effect is finished, the UI thread actively cancels the callback registered by the animation event in the UI thread according to the logic of the animation event.

Step S302: after receiving the vertical synchronizing signal, triggering callback of the animation event 1, and modifying attributes of the view according to logic of the animation event 1

After receiving the vertical synchronization signal (Vsync-APP), the UI thread of the application processes the INPUT event (callback_input), the ANIMATION event (callback_animate), the traverse event (callback_ TRAVERSAL), and the COMMIT event (callback_commit) in sequence, as in vertical synchronization signal 1, vertical synchronization signal 2, and vertical synchronization signal 3 of fig. 3.

The UI thread of the application may modify the properties of the view according to the logic of the ANIMATION event during processing of the ANIMATION event (e.g., docallback_animation).

For example, in the interface shown in fig. 1A and 1B, the size of the control 1A02 is enlarged from a rectangle of 200px wide and high to a rectangle of 300px wide and high for 20 frames. Then, each frame needs to change the size of the control 1a02, i.e. the first frame of the animation modifies the rectangle with width and height of 205px of the view corresponding to the control 1a02, and the second frame of the animation modifies the rectangle with width and height of 210px of the view corresponding to the control 1a 02.

Step S303: measuring, laying out, drawing recording to generate a rendering tree

The change of the view attribute can trigger the UI thread to measure, lay out, draw and record the interface of the application program. Wherein the measurement is used to determine the size of each view, the 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 program and stored in the drawing instruction list of the rendering tree.

Wherein, the input event and the animation event may affect the content of any one or more views on the interface of the application program, so that the main thread of the application program needs to process the input event and the animation event first and then process the traversal event. In the process of processing the traversing event, the main thread of the application program measures, lays out, draws and records the interface of the application program by the UI thread of the application program, determines the attribute of each view, further determines the rendering node corresponding to each view, and generates a rendering tree. Wherein, the rendering node comprises rendering attributes (properties) and a drawing instruction list (displayist).

Wherein the rendering tree is generated by a UI thread for generating a data structure of the application interface. That is, the rendering tree records all information that generates a one-frame interface of the application. The rendering tree may include a plurality of rendering nodes, each rendering node including a rendering attribute and a list of drawing instructions including one or more drawing operations therein.

Wherein the drawing operation is a data structure for drawing graphics, such as drawing lines, drawing widenings, drawing rectangles, drawing text, and the like. The rendering operations, when executed by the rendering thread, are translated into API calls, such as OpenGL's interface calls, for the image processing library. For example, drawLineOp is a data structure body, and the data structure body contains information such as length, width and the like of drawn data, and can also contain interface calls corresponding to DrawLineOp of an underlying graphics processing library.

The drawing instruction list may be a buffer area, where all drawing operations or identifiers of all drawing operations, such as addresses and serial numbers, included in a frame interface of an application program are recorded in the buffer area. When an application program has a plurality of windows or is displayed on different display areas (display), a plurality of rendering trees need to be independently generated, wherein a plurality of drawing instruction lists corresponding to the different windows and display areas are 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 of the electronic device that is used to carry content displayed on the screen when the screen is recorded.

Step S304: receiving a rendering tree and drawing a bitmap based on the rendering tree

After the UI thread generates the rendering tree, the rendering thread generates a bitmap based on the rendering tree after transmitting the rendering tree to the rendering thread. 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 is passed to a surface synthesizer (SurfaceFlinger) and hardware synthesis policy module (Hardware Composer, HWC) to be retrieved and an interface generated for display.

Unlike fig. 3, the embodiment of the present application provides another animation effect display mode, as shown in fig. 4.

As shown in fig. 4, the display method of the animation effect may include five steps: step S401: creating an animation event 2; step S402: after receiving the vertical synchronization signal, acquiring description information (also called as end frame description information) of an end interface of the animation effect and description information of duration time of the animation effect from the animation event 2; s403: measuring, laying out and drawing an ending interface of the animation effect to determine a rendering tree 1; step S404: receiving description information of a rendering tree 1 and an end interface based on the animation effect, and description of duration time of the animation effect; s405: the rendering tree 1 is updated 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 a bitmap is generated based on the updated rendering tree 1.

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

Step S401: creating animation event 2

The UI thread of the application creates an animation event 2 through the animation interface. The description of the animation interface may refer to the description in step S802 below, which is not described herein.

Unlike animation event 1, animation event 2 may not register a callback with the UI thread for the duration of the animation effect.

The creation timing of the animation event 2 may refer to the text description in step S301, which is not described herein.

Step S402: after receiving the vertical synchronizing signal, the description information of the end interface of the animation effect and the description information of the duration of the animation effect are obtained from the animation event 2

Unlike step S302, after receiving the vertical synchronization signals, as in vertical synchronization signal 1, vertical synchronization signal 2, and vertical synchronization signal 3 in the figure, the ui thread acquires description information of the end interface of the animation effect and description information of the duration of the animation effect from the animation event 2. And the UI thread does not modify the properties of the view, nor trigger step S303.

Alternatively, in some embodiments of the present application, the UI thread may obtain the description information of the step amount of the animation effect, the description information of the duration of the animation effect from the action event 2; alternatively, the UI thread may acquire description information of the end interface, description information of the step amount of the animation effect, or the like from the animation event 2, which is not limited herein.

It should be noted that, the UI thread may directly obtain the end interface of the animation effect from the animation event 2; alternatively, an end interface for the animation effect is determined indirectly from the animation event 2.

S403: measuring, laying out and drawing an end interface of the animation effect to determine a rendering tree 1

The UI thread actively measures, lays out, draws and records the ending interface of the animation effect, and then generates a rendering tree 1. The UI thread synchronizes the rendering tree 1, description information of the end interface of the animation effect, 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, the description information of the step size of the animation effect to the rendering thread or rendering process.

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

Optionally, in some embodiments of the present application, the UI thread synchronizes at least two of the description information of the ending interface of the animation effect, the description information of the step amount of the animation effect, and the description information of the step amount of the animation effect to the rendering thread, without synchronizing the rendering tree 1. In this case, in step S405, the rendering thread updates and updates the rendering tree 0 based on the description information of the end interface of the animation effect, 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 determine the attribute of the view in each frame interface within the duration of the animation effect based on at least two of the description information of the ending 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, so that the attribute value of the view in each frame interface and the rendering tree 1 within the duration of the animation effect may be synchronized to the rendering thread or the rendering process.

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

The rendering thread of the application program can receive data sent by the UI thread through the message queue, and the rendering process can receive the data sent by the UI thread through a cross-process communication mode. The rendering process may also request and acquire data from the UI thread after receiving the vertical synchronization signal and the independent request.

S405: updating the rendering tree 1 based on the description information of the end interface of the animation effect and the description information of the duration of the animation effect, and generating a bitmap based on the updated rendering tree 1

The rendering thread or rendering process of the application determines a view of the property change based on the description information of the ending interface of the animation effect and the pre-starting interface of the animation effect. The rendering thread determines the step size of the attribute based on the duration of the animation effect, and thus the attribute of the view in each frame interface for the duration of the animation effect.

For the generation of a frame interface within an animation effect, the rendering thread or rendering process of the application may first determine the order of the frame within the animation effect, i.e., what frame the frame is of the animation effect. Further, the attribute of the view on the frame interface, that is, the animation effect description information of the frame, may be determined.

Wherein the determination of which frame is the animation effect can be determined by the time of the frame, the frequency of the vertical synchronization signal, and the start time of the animation effect. The 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 fig. 4, or the starting time of the animation effect may also be the time of the animation triggering event, which is not limited herein.

After determining the attribute of the view in each frame interface within the duration of the animation effect, the rendering thread may update the parameters corresponding to the view attribute in the rendering tree 1 after receiving the vertical synchronization signal, such as the vertical synchronization signal 2 and the vertical synchronization signal 3 in fig. 4, and then generate a bitmap based on the updated rendering tree 1.

And (3) drawing each frame interface in the animation effect only by executing the rendering thread or the rendering process of the application program in step S405 for each frame after the first frame is removed within the duration of the animation, so as to display the animation effect.

It should be noted that the execution of the UI thread and the rendering thread or rendering process may 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 having the same period and different phases (having a fixed time difference).

It is apparent that, with the animation effect display method shown in fig. 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 the bitmap before the arrival of the vertical synchronization signal 2, and a frame dropping, a jam, or the like may occur. However, with the animation effect display method shown in fig. 4, in the process of generating each frame interface except for the first frame in the duration of animation, the rendering thread or the rendering process updates the rendering tree to generate the multi-frame interface in the duration of the animation, so that the UI thread does not participate in or the calculation amount or the task amount borne by the UI thread is small, and when the UI thread is blocked by other tasks, the situations such as frame dropping, blocking and the like are not easy to occur.

In addition, for the animation effect display method shown in fig. 3, when there are multiple animation events, different animation effects conflict with each other, so that only one animation effect is displayed, and further, the interface jumps, which is not beneficial to the user experience.

In the following exemplary description, the reasons for the collision of multiple animation effects and the interface jump caused by multiple animation effects are described.

(1.3) conflict of animation effects

As shown in fig. 5, the process of the electronic device performing the method of animation effects shown in fig. 3 includes:

s501: creating 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 in the UI thread.

S502: after receiving the vertical synchronizing signal, triggering callback of the animation event 3 and callback of the animation event 4, modifying the attribute of the view according to the logic of the animation event 3, and then modifying the attribute of the view according to the logic of the animation event 4

After receiving the vertical synchronization signal 1, triggering the callback of the animation event 3 and the callback of the animation event 4, and respectively modifying the attribute of the view by the UI thread according to the logic of the animation event 3 and the attribute of the view according to the logic of the animation event 4. In this case, the logic of animation event 4 may override the modification of the properties of the view by animation event 3.

For example, the animation event 3 modified view comprises view 1 and the animation event 4 modified view comprises view 1. View 1 is a 20 pixel square prior to modification, animation event 3 logically modifies view 1 to a 30 pixel square, and animation event 4 logically modifies view 1 to a 15 pixel square. The UI thread modifies the attributes of view 1 according to the logic of animation event 3 and view 1 finally becomes a 15-pixel square according to the logic of animation event 4, respectively.

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 properly displayed, resulting in a jump of the interface. The interface transitions are shown in fig. 6A-6F.

Then, step S303 and step S304 are executed, and the contents of step S303 and step S304 may refer to the text description corresponding to fig. 3, which is not repeated here.

As shown in fig. 6A, an interface of a desktop application is displayed on a screen of the electronic device. Control 2a01 is included on the interface of the desktop application, and control 2a01 can also include a plurality of child controls as parent controls, including control 2a02, control 2a03 and control 2a04, for example.

Control 2a01 may be a folder or card on a desktop application, for example, control 2a01 is folder 1 in fig. 6A-6E, control 2a02 includes an icon of a game application, control 2a03 includes an icon of a flashlight application, and control 2a04 includes an icon of a gallery application.

The interface shown in fig. 6A can be regarded as a pre-start interface of the animation effect 1.

In response to the user clicking on control 2A01, the interaction may trigger animation effect 1. Animation effect 1 acts on control 2A01, control 2A02, control 2A03, control 2A04, namely control 2A01, control 2A02, control 2A03, control 2A04 are animation objects of animation effect 1, animation effect 1 enables the size of animation objects to gradually become larger and the positions of animation objects to move towards the center of an interface.

As shown in fig. 6B, the control 2a02 becomes progressively larger in size, such as height and/or width, and changes in position. The interfaces shown in fig. 6B include a start interface of animation effect 1 and an intermediate interface of animation effect 1.

As shown in fig. 6C, as the size of the control 2a02 becomes larger, i.e., the interface displayed on the electronic device changes as: the process of changing the middle interface of the animation effect 1 to the end interface of the animation effect 1.

As shown in FIG. 6D, before animation effect 1 ends, the user clicks on a portion of the desktop that does not belong to control 2A01, or returns to the interface shown in FIG. 6A through other interaction means, such as a "back" interaction gesture, where the interaction triggers animation effect 2. The animation effect 2 acts on the controls 2a01, 2a02, 2a03 and 2a04, that is, the controls 2a01, 2a02, 2a03 and 2a04 are animation objects of the animation effect 2, and the animation effect 2 has the effect that the size of the animation objects is gradually reduced and the position of the animation objects moves to the position of the control 2a01 in fig. 1A.

Since animation effect 1 has not yet ended, animation effect 2 occurs at this time, and animation objects on which animation effect 1 and animation effect 2 act have intersections, and both animation effect 1 and animation effect 2 need to pass through the size and position of the view corresponding to the animation objects, resulting in collision between animation effect 1 and animation effect 2. In this case, the interface may be the interface shown in fig. 6E and the interface shown in fig. 6F, respectively, in two variations.

As shown in fig. 6E, in response to the user clicking on a portion of the desktop that does not belong to control 2a01, or by other interaction means, such as a "back" interaction gesture, the middle interface of animation effect 1 is made the starting interface of animation effect 2, and the property of the view is started to be modified according to the logic of animation effect 2, for example, the middle interface of animation effect 1 starts to change, and then changes to the ending interface of animation effect 2.

Alternatively, as shown in fig. 6F, in response to the user clicking a portion of the desktop that does not belong to the control 2a01, or through other interaction means, such as a "back" interaction gesture, the change in the display interface of the electronic device is divided into two steps:

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

Fig. 6F (2): 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 changing to 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 change of the interface is jumped or the speed of the change of the interface is jumped, so that the change of the interface is incoherent and does not accord with the visual habit of a user, as shown in fig. 7A, 7B and 7C, and the experience of the user is further reduced.

As shown in fig. 7A, the predicted duration of animation effect 1 is T1 to T3, the predicted duration of animation effect 2 is T2 to T4, where T1 is less than T2, T2 is less than T3, and T3 is less than T4, the predicted duration is the time that the animation effect is configured by the application program, and animation effect 1 increases the height of the view; animation effect 2 will reduce the height of the view.

In the case shown in fig. 7A, the case where the view property is changed is shown in fig. 7B or fig. 7C.

As shown in fig. 7B, at T1 to T2, the view properties change according to the logic of animation effect 1, for example, the height of the view increases linearly; at time T2, due to the collision of animation effect 1 and animation effect 2, view properties such as height jump; at T2 to T4, the view properties change according to the logic of animation effect 2, e.g. the height of the view decreases linearly.

It is apparent that at time T2, a jump occurs in the view attribute, e.g., height, where animation effect 1 and animation effect 2 join.

As shown in fig. 7C, at T1 to T2, the view properties change according to the logic of animation effect 1, for example, the height of the view increases linearly; at time T2, as animation effect 1 and animation effect 2 conflict, a change in logic of animation effect 2, such as a linear decrease in the height of the view, begins.

It is apparent that at time T2, transitions occur at the junction view properties, e.g., the rate of change of height, of animation effect 1 and animation effect 2. In fig. 7B and 7C, the actual duration of the animation effect 1 is T2-T1. The duration of animation effect 2 is T2 to T4.

It should be noted that, in addition to the contents shown in fig. 7A, 7B, and 7C, different kinds of animation effects may also cause incorrect interface display or interface jump in case of conflict.

(2) Animation effect display method provided by the embodiment of the application

According to the animation effect display method provided by the embodiment of the application, firstly, an animation interface for realizing the animation effect is provided, the animation interface can be one or more functions and methods, and an application program can set information such as attributes of a control or the animation effect through the animation interface, so that an animation framework provided by the application generates a corresponding animation interface according to the information. Wherein, the information that can set up in the animation interface includes: an end interface of the animation effect and a duration of the animation effect; or, the step amount description information of the animation effect and the duration time of the animation effect; or, step amount description information of the animation effect, end interface description information of the animation effect, and the like. The animation interface helps to reduce the workload of application developers. And, the developer of the application program may not configure the interface of each frame in the animation effect process, and the rendering thread or the rendering process independently determines the interface of each frame in the animation effect process.

According to the animation effect display method, in the display process of the animation effect, the attribute of the view is not modified, and the interface of each frame in the continuous process of the animation effect is drawn by adding and modifying the animation parameters in the rendering attribute of the rendering tree. That is, the animation parameters may be parameters for updating a rendering tree, and may include attributes of controls that change on a frame interface during an animation effect.

In the animation effect display method provided by the embodiment of the application, in the animation process, the UI thread can not respond to the animation event, and measure, layout and draw the record, so that the frame dropping is avoided. Wherein modifying the rendering properties of the rendering tree is responsible for the rendering thread or rendering process.

Finally, in the case of multiple animation effect conflicts, the animation effect display method provided by the embodiment of the application modifies the display content based on the ending interface of the animation effect, so that continuous change of the interface (or continuous speed of interface change) can be realized, a smoother interface is further realized, and user experience is improved.

The following exemplarily describes an animation effect display method provided in the embodiments of the present application.

(2.1) flow of animation Effect display method

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

S801: UI thread creation of an application animation event

The animation event may be created at any time in relation to the logic of the application, for example, it may be created after receiving user input, a message event sent by other threads or processes to the application, a network data request update. The animation event includes internal logic for implementing an animation effect. For convenience of description, these messages that trigger the UI thread of the application to create an animation event are referred to as animation triggering events.

In the embodiment of the application, after the animation event is created, a callback is registered on an editor of a UI thread of the application program. The callback is used for triggering the UI thread of the application program to process the animation event according to the first vertical synchronous signal after the animation event is created.

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

It should be noted that the implicit animation and the non-implicit animation are merely an abbreviation for convenience in comparing the descriptions of fig. 3 and fig. 4, and are not limited in any way to the animation events created by the animation interface in the embodiments of the present application.

Alternatively, in some embodiments of the present application, implicit animations may be converted to non-implicit animations. The conversion process may occur during installation or first start of the application, or the conversion process may be sent during compilation, which is not limited herein.

For example, the non-implicit animation determines that there are callback to the drawing object, vertical synchronization signal per frame, modification of the attribute of view, etc., end condition of animation, etc. Wherein, the callback of the vertical synchronization signal of each frame is used for always triggering the UI thread to process the animation event when the animation does not meet the ending condition. In this case, the process of converting the animation event into the implicit animation may include the following two steps:

firstly, the callback of each frame of vertical synchronization signal of the non-implicit animation is blocked or intercepted, so that the non-implicit animation can not modify the attribute of the view, and can not trigger the UI thread of the application program to measure, lay out and draw records.

Second, parameters required for implicit animation are determined. For example, the end interface and duration of the animation are determined by modifying the time information of the vertical synchronization signal (Vsync-APP). Alternatively, for some non-implicit animations, the animation objects of the animation, the amount of steps per attribute per animation object, the duration of the animation, the ending interface of the animation, etc. may be determined directly.

S802: after receiving the vertical synchronizing signal, the UI thread of the application program determines the end interface of the animation effect in the action event, and the duration of the animation effect

The UI thread of the application will process the animation event after receiving the vertical synchronization signal. Wherein, the animation event is configured by an animation interface, and the format of the animation interface can be as follows: the name of the animation interface (duration, end interface description information), the name of the animation interface (duration, change curve, end interface description information), the name of the animation interface (step amount description information, end interface description information), the name of the animation interface (duration, end interface description information), and the like are not limited herein.

The description of the ending interface may further include a theme (style) besides the position, size, transparency, etc. of the view. Wherein the description of the ending interface may be relative to the increment of the interface before the beginning of the animation effect, such as how much wider view 1 is.

The step amount description information may include a change amount of an attribute of the interface to be rendered currently compared with the control in the previous frame interface.

The format of the animation interface is as follows: in the case of the name of the animation interface (duration, change curve, final interface), the animation interface may be:

animateTo({duration：3000，cure：Curve.Linear},()＝>{

view1.Heigt＝800

view1.Width＝400

})

Wherein animateTo is the name of the animation interface, duration:3000 denotes a duration of 3000ms, cure: curve. Linear represents a linear curve; "view1. Heigt=800view 1. Width=400" indicates that view1 has a height of 800 and a width of 400 in the end interface of the moving picture, that is, the end frame description information of the moving picture.

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

In the running process of the application program, after the application program receives the animation triggering event, the information of the animation effect can be provided to the system through the animation interface, and the system can further generate each frame interface in the animation process based on the information.

In this format, the electronic device can determine the animation object based on the difference between the ending interface of the animation and the pre-starting interface of the animation.

It is worth noting that the animation event may register a callback only once in the editor of the UI thread.

S803: rendering threads of a rendering process or application program update a rendering tree based on an end interface of an animation effect, a duration of the animation effect, and generate a bitmap based on the updated rendering tree

After determining the end interface of the animation effect and the duration of the animation effect, the UI thread can transmit the end interface of the animation effect and the duration of the animation effect to the rendering thread of the rendering process or the application program, so that the rendering thread of the rendering process or the application program can determine the attribute of the view in each frame interface within the duration of the animation effect, further can directly update the rendering tree, and generates a bitmap based on the updated rendering tree.

In the process of generating a frame interface, a rendering process or a rendering thread of an application program needs to determine what frame in the animation effect the current frame is, and further determine the attribute of the view on the frame interface. The number of vertical synchronization signals received, the time in the vertical synchronization signals, and the like can be used by the rendering process or the rendering thread of the application program to determine which frame in the animation effect the current frame is, and the method is not limited herein. Wherein, what frame the current frame is within the animation effect may also be referred to as the order of the frame within the animation effect. I.e. the description information of the frame includes the properties of the view on the frame interface.

The interface which the application program needs to display is composed of a plurality of view nests, and the different views have parent-child relations, so that the parent-child relations among rendering nodes of the rendering tree generated by traversing the views are the same as the parent-child relations of the views. Namely, the parent-child relationship between views determines the nesting relationship between different rendering nodes, and then the rendering thread can correctly render the interface of the application program when generating a bitmap according to the rendering tree.

One view may correspond to one or more rendering nodes, and a root view (DecorView) corresponds to a root rendering node (rootrenderernode). I.e. the nested relationship between rendering nodes corresponds to the parent-child relationship of the view.

For example, the structure of the interface of the application program is: the application program has a root view carried on the PhoneWindow, the sub-views of the root view are view 1 and view 2, and the sub-view of view 2 is view 3. The UI thread of the application generates a structure of a rendering tree as: the root rendering node corresponding to PhoneWindow is the root node of the rendering tree, the child node of the root rendering node is the rendering node 0 corresponding to the root view, the child nodes of the rendering node 0 are the rendering node 1 corresponding to the view 1 and the rendering node 2 corresponding to the view 2, and the child node of the rendering node 2 is the rendering node 3 corresponding to the view 3. The corresponding relation between the view and the rendering node means that all drawing operations in the corresponding view are included in the rendering node. Wherein one view may correspond to one or more rendering nodes.

An exemplary method for determining the attributes of views in each frame interface for the duration of an animation effect is described below in conjunction with the description of fig. 9 and 10. The attribute of the view in a frame interface may also be referred to as description information of the frame interface.

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

When view 2 is configured with an animation effect that transforms the width from B1 to B2, where B2 is greater than B1 is greater than 0. It is apparent that view 2 is an animation object of a non-implicit animation, but the position of view 3 is changed due to the width change of view 2 by comparing the interface before the start of the animation effect and the interface after the end of the animation effect. Therefore, the UI thread of the method shown in fig. 3, which requires an application program, needs to measure, layout, draw and record after modifying the attribute of the view according to the logic of the non-implicit animation, so as to ensure the correctness of the interface after the animation.

It is apparent that, in comparison with the methods shown in fig. 4 and fig. 8, since the attributes of the views 2 and 3 are changed, it is possible to determine that the animation object is the views 2 and 3.

Optionally, in some embodiments of the present application, the animation object may only change at the middle interface of the animation effect, and no change occurs at the end interface of the animation and the interface before the start of the animation, and the UI thread of the application may determine that the set of views that change for each frame in the animation process is the animation object by adjusting the time information of the vertical synchronization signal.

As shown in fig. 10, the animation event is an implicit animation, and it is determined that there is a pre-start interface of the animation and an end interface 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 of the animation, and determine that the changed control is an animation object related to the animation. For example, the animation object includes control 2A01.

The position of the control 2a01 changes from (x 0, y 0) to (x 1, y 1), that is, the control 2a01 is an animation object related to the animation event. In addition, the height/width of the control 2a01 becomes S times as large as the original, and the duration of the animation is 30 frames. Further, the position and size of the control 2a01 on each frame interface can be determined. The Q-th 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.

The value of each frame of animation parameter is (x0+q×δx, y0+q×δy), and the step amount description information of the animation parameter may be δx= (X1-X0)/30, δy= (Y1-Y0)/30. That is, the animation parameters are information including attributes for determining a view on a frame interface in the animation effect, such as description information of an end interface of the animation effect, description information of a duration of the animation effect, and the like, as described above, or the animation parameters are information of attributes of a view on a frame interface in the animation effect.

Hereinafter, for convenience of description, an animation parameter is referred to as an attribute of a view on a frame interface or a parameter for determining an attribute of a view on a frame interface, that is, an animation parameter is referred to as description information of a frame interface or an animation parameter is a parameter for determining 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 describes the process of determining animation parameters in the case of a plurality of animation events.

Alternatively, in some embodiments of the present application, in a case where the animation parameters of the animation object are modified by a plurality of animation events, vector addition is performed based on the animation parameters independently determined for each animation event to determine the final animation parameters for updating the rendering tree in step S1002.

Alternatively, in some embodiments of the present application, in a case where animation parameters of an animation object are modified by a plurality of animation effects, for example, in a case where animation parameters of an animation object are modified by animation effects 1 and 2 (animation effects 2 occur during the duration of animation effects 1), animation effects 3 may be generated based on animation effects 1 and animation events 2, and a modifier of animation parameters may be determined based on logic of animation effects 3, where the logic of animation effects 3 is determined by the logic of animation effects 1 and the effects of animation events 2.

Wherein the animation effect 3 modifies animation parameters such that the view properties are continuous for the duration of the animation effect; alternatively, further animation parameters may be first-order extensible; or further second order derivatives of animation parameters, etc. 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 the intersection between the animation effect 1 and the animation effect 2 is from the beginning to the end of the animation effect 1 or the end of the animation effect 2.

It should be noted that, since the end interface of the animation effect and the pre-start interface of the animation effect are known, the attribute of each frame view within the duration of the animation effect can be determined by the interpolator, so that the attribute of each frame view is continuous, first-order-derivative and second-order-derivative along with the change of time.

Wherein the animation parameters may be determined by a rendering thread or a rendering process; alternatively, there may be a UI thread determination that passes the value of each frame of animation parameters to a rendering thread or rendering process, where the data is used to communicate between the UI thread and the rendering thread and carry the changing animation parameters, or an ending interface to calculate the changing animation parameters, which may be referred to as a starting rendering tree.

The process of determining animation parameters in the case of multiple animations is described below in connection with the description of fig. 11A-11D.

The content shown in fig. 11A may refer to the content shown in fig. 7A, and will not be described here.

As shown in fig. 11B, at T2, the application receives an animation trigger event corresponding to animation effect 2 and determines that animation effect 2 involves a modification to the height of the view, then animation effect 3 is generated for smoothing the junction of animation effect 1 and animation effect 1.

Wherein the duration of animation effect 3 is the intersection of the durations of animation effect 1 and animation effect 2, i.e., T2 to T3. Since the starting interface of the animation effect 3 and the ending interface of the animation effect 3 are known, the animation effect 3 is used as an animation effect for connecting the animation effect 1 and the animation effect 2, and the modification of the attribute of the view makes the attribute of the view continuously or first-order or second-order conductive between T2 and T3. Wherein the animation effect within T2 to T3 may be referred to as a transition process.

As shown in fig. 11C, at T2, the application receives an animation trigger event corresponding to animation effect 2, and determines that animation effect 2 involves a modification to the altitude, then animation effect 3 is generated for smoothing the junction of animation 1 and animation 2.

The duration of the animation effect 3 is T2 to T4, and the interface corresponding to the animation effect 1 when the initial interface of the animation effect 3 is T2, and the end interface of the animation effect 3 is the end interface of the animation effect 2. Thus, animation effect 3 serves as an animation effect that joins animation effect 1 and animation effect 2, and modification of the properties of the view makes the properties of the view continuous or first or second order extensible between T2 and T4.

As shown in fig. 11D, at T2, the application receives an animation trigger event corresponding to animation effect 2 and determines that animation effect 2 involves a modification to the altitude, and then generates animation effect 3 for smoothing the junction of animation 1 and animation 2.

The duration of the animation effect 3 is T3 to T4, the starting interface of the animation effect 3 is the ending interface of the animation effect 1, and the ending interface of the animation effect 3 is the ending interface of the animation effect 2. Thus, animation effect 3 serves as an animation effect that joins animation effect 1 and animation effect 2, and modification of the properties of the view makes the properties of the view continuous or first or second order extensible between T3 and T4.

Next, the change of the interface of the application program is described in connection with the animation parameter change shown in fig. 11B, and the change of the interface of the application program is shown in fig. 12A and 12B.

Fig. 6A-6D, and fig. 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 embodiments of the present application.

Fig. 6A and fig. 6D have been described above correspondingly, and are not described here again.

As shown in fig. 12A, after receiving the user clicking the interaction not belonging to the control 2A01 on the desktop, or through other interaction means, such as a "back" interaction gesture, the expansion speed of the control 2A01 is slowed down, and the movement speed is slowed down, which corresponds to the "expansion speed is slowed down" in fig. 7B.

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

Before T4 after T3, the expansion speed of control 2a01 slows down and then starts to shrink. The process of shrinking control 2a01 is shown as "shrink speed increase" in fig. 12B and 12B, and the speed of control 2a01 is continuously increased until it is unchanged.

Wherein the change of control 2a01 may be the same as the child control change of control 2a 01.

The display process of "expansion and expansion speed decrease" in fig. 12A and "reduction and reduction speed first increase" in fig. 12B is a transition process.

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

There are many ways to implement step S803, and an embodiment of step S803 is implemented in the following exemplary descriptions of step S8031, step S8032, and step S8033.

S8031: the UI thread of the application program executes measurement, layout and drawing recording on the end interface of the animation effect to generate a first rendering tree

And the UI thread of the application program executes measurement, layout and drawing recording on the ending interface of the animation effect to generate a first rendering tree. The interface corresponding to the first rendering tree is an ending interface.

S8032: rendering process or UI thread of application program or rendering thread of application program, determining animation parameters corresponding to each frame interface in duration of animation effect based on end interface of animation effect and duration of animation effect

And determining animation parameters of a rendering tree corresponding to each frame interface in the duration of the animation effect based on the end interface of the animation effect, the duration of the animation effect and the starting time of the animation effect. The animation parameters may be located in a rendering attribute of the rendering tree, where the animation parameters are used to modify a display manner of the view on the interface.

Optionally, in some embodiments of the present application, the animation parameters may replace an animation effect that can be achieved only by modifying the drawing instruction list, so that the drawing instruction list does not need to be changed within the duration of the animation effect, and further, the UI thread is not required to measure, layout, and draw records to update the rendering tree.

Wherein the added animation parameters include: wide (holes), high (holes), POSITION (holes), anchor Point (PIVOT), rounded corner (round), 2D transform (TRANSLATE), 3D transform (raw_3d), Z-coordinate (position_z), BACKGROUND COLOR (BACKGROUND COLOR), SHADOW OFFSET (shadow_color), FOREGROUND COLOR (shadow_color), FRAME COLOR (frame_color), FRAME WIDTH (frame_width), transparency (ALPHA), CONTENT rectangle (frame_window, frame_height), CONTENT adaptation mode (degree), BACKGROUND FILTER (BACKGROUND FILTER), CONTENT FILTER (content_filter), BACKGROUND and CONTENT FILTER (FILTER), SHADOW COLOR (shadow_color), SHADOW OFFSET (shadow_ X, SHADOW _shadow), SHADOW (shadow_radius), SHADOW PATH (SHADOW PATH).

Alternatively, 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 attributes of the rendering tree, the display mode of the view on the interface is directly affected, and therefore the view attributes in the animation process can be enabled to be continuous or first-order or second-order by enabling the animation parameters to be continuous or first-order or second-order. The determination of the animation parameters may refer to the text descriptions corresponding to fig. 9 and fig. 10, which are not described herein.

Since the interface changes are implemented by modifying animation parameters without requiring measurement, layout, and recording of drawing by the UI thread of the application, the UI thread of the application may not handle operations related to the animation, such as handling animation events, e.g., updating view attributes, e.g., measurement, layout, recording of drawing, etc., during the animation. The division of the UI thread and the rendering thread or the rendering process may refer to the following (a) to determine the content in the data flow of the animation parameters, which is not described herein.

In the process of animation, the UI thread of the application program and the rendering thread are independent from each other in the process of realizing the animation, so that the UI thread of the application program notifies the rendering thread to update animation parameters after receiving a vertical synchronization signal (Vsync-APP); or a vertical synchronization signal (Vsync-Render) may be independently requested by the rendering process, the frequency of the vertical synchronization signal (Vsync-Render) and the vertical synchronization signal (Vsync-APP) may be different, and so on. The timing at which the rendering thread or rendering process starts to update the animation parameters may refer to the content in the timing at which the rendering thread or rendering process updates the animation parameters, which will not be described herein. In order to distinguish the vertical synchronization signals received by different threads or processes, the vertical synchronization signal (Vsync-APP) refers to the vertical synchronization signal received by the UI thread, and the vertical synchronization signal (Vsync-Render) refers to the vertical synchronization signal received by the rendering thread or rendering process.

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

(a) Timing for a rendering thread or rendering process to update a rendering tree

The timing of the rendering thread or rendering process updating the rendering tree may be as shown in fig. 13A, 13B, 13C.

As shown in fig. 13A, first, the UI thread executes step S1301: the animation event is processed after receiving a vertical synchronization signal (Vsync-APP). Next, the UI thread performs step S1302: the final interface of the animation effect and the duration of the animation effect are determined. Then, the UI thread performs step S1303: the final interface of the animation effect, the duration of the animation effect, is sent. Finally, the rendering process or the rendering thread of the application program performs step S1304 to update the rendering tree.

As shown in fig. 13B, first, the UI thread executes step S1305: receiving a vertical synchronization signal (Vsync-APP); then, the UI thread performs step S1306: forwarding a vertical synchronization signal or other parameter indicative of a trigger timing; finally, the rendering process or the rendering thread of the application program performs step S1304 to update the rendering tree.

As shown in fig. 13C, the rendering process or the rendering thread of the application program performs step S1307: receiving a vertical synchronization signal (Vsync-Render); the rendering process or rendering thread of the application then performs step S1304: updating the rendering tree.

In the process of generating the first frame interface of the animation effect, the time for updating the rendering tree by the rendering thread or the rendering process may be as shown in fig. 13A; in the generation of the non-first frame interface of the animation effect, the timing at which the rendering thread or rendering process updates the rendering tree may be as shown in fig. 13A, 13B, or 13C.

It should be noted that, in the case where the UI thread of the application program transfers data to the rendering process, the data interaction needs to be completed through inter-process communication (InterProcess Communication, IPC), and the application program may implement IPC communication through modes such as a Binder, an AIDL, a shared memory, a Socket, and the like, which is not limited herein.

As shown in fig. 14, in the animation process, the rendering thread may independently request the vertical synchronization signal (Vsync-APP), and in the T-Delay time when the vertical synchronization signal (Vsync-APP) is received, the UI thread does not transfer information for updating the rendering tree to the rendering thread due to blocking or other reasons, and the rendering thread starts updating the rendering tree after the T-Delay time, so as to generate an interface; in the T-Delay time of receiving the vertical synchronization signal (Vsync-APP), the UI thread processes the input event or other logic (which may not include processing the animation event), and can transfer information for updating the rendering tree to the rendering thread, and the rendering thread updates the rendering tree after receiving the information for updating the rendering tree, so as to generate an interface.

It will be appreciated that configuring a Delay T-Delay for the rendering thread facilitates rapid generation of a changed interface where non-animated logic results in a change while the animation is being implemented.

The value of T-Delay may be smaller than or equal to the period of the vertical synchronization signal.

Alternatively, 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, generating the interface. It will be appreciated 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, this may result in a delayed start of the animation, but the maximum processing time generated by the Shan Zhen interface is beneficial to reduce the probability of dropping frames.

The timing of the rendering process to update the animation parameters is different from the timing of the rendering thread to update the animation parameters, and the frequency and time of the vertical synchronization signal (Vsync-Render) and the vertical synchronization signal (Vsync-APP) which are independently requested by the rendering process may be different and may be the same.

(b) Modification of a list of drawing instructions

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 the drawing instruction list of the interface after the end of the animation effect, starting from the first frame of the animation effect to the end interface of the animation effect, generating the interface by modifying animation parameters of the rendering tree based on a rendering tree corresponding to the end interface of the animation effect, and (i) not modifying the animation effect process of the drawing instruction list as follows.

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 the drawing instruction list of the interface after the end of the animation effect, starting from the first frame of the animation effect to the end interface of the animation effect, generating the interface by modifying animation parameters of the rendering tree based on the rendering tree corresponding to the interface before the start of the animation effect, and (i) does not modify the animation effect process of the drawing instruction list.

Alternatively, in some embodiments of the present application, in the case where the drawing instruction list of the interface before the start of the animation effect is different from the drawing instruction list of the end interface of the animation effect, the drawing operation in the drawing instruction list may be modified by a rendering thread or a rendering process, and the animation effect parameter generation interface in the rendering tree may be modified, as described in (ii) below, to modify the animation effect process of the drawing instruction list.

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 drawing instruction list of the interface after the end of the animation effect may be different.

(i) Animation effect process without modifying drawing instruction list

The drawing content of the interface before the end of the animation effect and the drawing content of the interface before the start of the animation effect are different, and therefore the drawing instruction list is different. In the animation effect display method provided by the embodiment of the application, the rendering tree is updated by modifying animation parameters based on the drawing instruction list of the rendering tree of the final interface, so that the interface is generated, and the interfaces shown in fig. 15A and 15B are realized.

As shown in fig. 15A, the interface before the beginning of the animation effect includes a control 1501, the control 1501 carries the text "please input account", then the control may include a text view 1 and a rectangular view, the text view 1 carries the text "please input account", and the text view 1 has the same size as the control 1501.

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

When the control 1501 is configured with the animation effect, at the end interface of the animation effect, the width of the control 1501 becomes short, the text "please input account" becomes two lines, the first line "please input", and the second line "account". That is, control 1501 includes text view 1, text view 1 carrying "please enter" and "account".

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

Since the UI thread is required to measure, layout and record the drawing of the interface in real time to update the drawing instruction list, in order to avoid updating the drawing instruction list in the process of animation effect, the rendering tree of the ending interface is used as the rendering tree of the animation effect parameter update and generation interface from the first frame interface of the animation effect to the ending interface of the animation effect, as shown in fig. 15B.

As shown in fig. 15B, even though the width of the control 1501 is sufficient to accommodate the words "please input account" in one line, the "please input account" is still presented in two lines of text, respectively, "please input", "account". In this case, in the duration of the animation effect, the rendering node to which the control 1501 corresponds is the rendering node 2, and the drawing operation included in the drawing instruction list of the rendering node 2 is: "drawText (please input) and drawText (account)".

That is, in the animation effect process, the drawing instruction list is not changed, the rendering thread or the rendering process modifies the animation effect parameters to generate an interface as shown in fig. 15B, the width of the control 1501 is gradually reduced, and the characters are always divided into two rows.

(ii) Animation effect process for modifying a list of drawing instructions

The drawing content of the interface before the end of the animation effect and the drawing content of the interface before the start of the animation effect are different, and therefore the drawing instruction list is different. In the animation effect display method provided by the embodiment of the application, in the process of generating the interface, the drawing operation in the drawing instruction list is continuously modified, and the animation effect parameter is modified to realize the generation of the interface, so that the interfaces shown in fig. 16A and 16B are realized.

As shown in fig. 16A, the pre-start interface of the animation effect includes a control 1601, where the control 1601 carries a picture 1, where the control 1601 may be an image view.

The drawing operation in the drawing instruction list corresponding to the display of the picture 1 on the control 1601 is drawBitmap (picture 1, src, dst 1), where the picture 1 is a source image, scr indicates an area where the source image needs to be displayed, and dst1 indicates what area of the control 1601 to draw the scr in the picture 1.

When the control 1601 is configured with an animation effect, the width of the control 1601 becomes smaller and the width of the image view 1 becomes smaller in the same proportion at the end interface of the animation effect. The drawing operation in the drawing instruction list corresponding to the 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).

In the process of the animation effect, the rendering thread or the rendering process updates the drawing operation corresponding to the control 1601, and the interface as shown in fig. 16B is implemented.

As shown in fig. 16B, in the animation effect process, the rendering thread or the rendering process modifies the drawing operation and the animation effect parameters in the rendering tree every frame, so that the width of the image view 1 in the animation effect process is continuously reduced. Rendering threads or rendering processes modify drawing operations such as: drawBitmap (picture 1, src, dst 2), …, drawBitmap (picture 1, src, dst n).

It should be noted that, the processing policy of the picture affects the modification manner of the rendering thread or the rendering process to the drawing operation. The processing strategy of the picture can comprise: CENTER (picture centered, picture size over the size of the view carrying the picture, then the picture is cropped), center_INSIDE (picture is scaled so that the picture is complete and centered in the view carrying the picture), FIT_center (picture is scaled so that the picture is not larger than the size of the view carrying the picture and centered), FIT_END (picture is scaled so that the picture is not larger than the size of the view carrying the picture and centered), FIT_START (picture is scaled so that the picture is not larger than the size of the view carrying the picture and centered), FIT_XY (picture is not scaled so that the picture is not larger than the size of the view carrying the picture), and the like, without limitation herein.

The CENTER, CENTER _INSIDE, FIT_CENTER, FIT_END, FIT_START, FIT_XY may be implemented by modifying dst and src parameters in the drawing operation drawBitmap.

As shown in fig. 16C and 16D, the drawing operation in the drawing instruction list is modified to scale or crop the picture carried on the control, so as to adapt to the size change of the control.

As shown in fig. 16C, the control 1602 carries an image 1 therein, wherein as the size of the control becomes smaller, the picture can be scaled according to the changing scale of the control size, as described above for center_ins.

Alternatively, as shown in fig. 16D, when the size of the control becomes smaller, the picture may be cut according to the changing ratio of the size of the control. Alternatively, as shown in fig. 16E, when the size of the control becomes larger, the animation effect as shown in fig. 16E may be realized by first enlarging the image 1 to the size of the end interface of the animation effect and then cutting according to the size of the control.

In summary, the rendering thread or rendering process may 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 the change of the continuous interface.

S8033: rendering process or rendering thread of application program, updating rendering tree based on animation parameter, and generating bitmap based on updated rendering tree

After the rendering thread or the rendering process acquires the rendering tree with updated animation parameters, the rendering tree can be traversed, the rendering operation in the drawing instruction list is traversed and executed on the canvas, and when the rendering operation is executed each time, the rendering attribute of the rendering node is combined, the parameters of the drawing operation are adjusted or the graphics processing library call corresponding to the drawing operation is adjusted, so that a bitmap is generated.

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

The bitmap may be obtained by a rendering process or surface compositor (surfeflinger), which generates an interface after layer compositing.

S804: optionally, the rendering process or the rendering thread of the application synchronizes the attributes of the view to the UI thread of the application

After the interface is generated, the UI thread does not sense the actual position and size of the control on the interface in the animation process, and optionally, in some embodiments of the present application, the rendering thread or rendering process may send the position and size of the control to the UI thread of the application. The location and size of the control may be communicated through a data structure such as a rendering tree, and is not limited herein.

As shown in fig. 17, the step of UI thread data determining view attributes includes:

s1701 determining and communicating information for updating a rendering tree

After determining the information for updating the rendering tree, the UI thread of the application may pass the information for updating the rendering tree, such as animation parameters of the rendering tree per frame interface for the duration of the animation effect, to the rendering process or the rendering thread of the application.

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

In the display of the animation effect, the first frame of the animation is not included, and the UI thread of the application may not pass information for updating the animation parameters to the rendering thread or rendering process.

During the display of the animation effect, the UI thread of the application may pass to the rendering thread or rendering process the rendering tree modified by the logic in the input event or other UI thread (excluding the animation event) excluding the first frame of the animation.

S1702, determining and communicating attributes of view

In the display process of the animation effect, the rendering thread or the rendering process determines the attribute of the view, such as the size and the position, based on the rendering tree, and transmits the size and the attribute of the view to the UI thread of the application program, so that the UI thread of the application program can determine the position and the size of the view.

Alternatively, in some embodiments of the present application, a rendering thread or rendering process may communicate the location and size of the view, as well as other attributes, to the UI thread of the application in response to a request by the UI thread of the application.

It can be appreciated that in the process of displaying the animation effect, the attribute of the view is determined without the UI thread of the application program through measurement, layout and drawing, so that the load of the UI thread of the application program is reduced.

Finally, the differences between the two animation effect display modes shown in fig. 3 and 4 will be exemplarily described below with reference to fig. 18A, 18B, and 18C.

As shown in fig. 18A, before the animation effect 1 starts, the 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 20-pixel square.

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

Then, after receiving the vertical synchronization signal 2, the UI thread determines that the size of the control 1a01 in the first frame interface of the animation effect 1 is 30 pixels by 30 pixels, generates a rendering tree 3 corresponding to the second frame interface of the animation effect 1, and synchronizes the rendering tree 3 into the rendering thread of the application program. The rendering thread generates a bitmap based on the rendering tree 2, the control 1a01 in the bitmap having a size of 30 pixels by 30 pixels.

As shown in fig. 18B, before the animation effect, the 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 20-pixel square.

After the animation effect 1 starts, the UI thread of the application receives the vertical synchronization signal 1, and determines logic of the animation effect 1 as follows: control 1a01 becomes 5 pixels larger per frame and eventually 100 pixels, and generates rendering tree 2 based on the ending interface of animation effect 1. And then, the logic of the animation effect 1 and the rendering tree 2 are transmitted to a rendering thread of a rendering process or an application program, the rendering thread of the rendering process or the application program updates the rendering tree 2 based on the logic of the animation effect 1, and a bitmap is generated based on the updated rendering tree 2, wherein the size of a control 1A01 in the bitmap is 25 pixels by 25 pixels.

Then, after receiving the vertical synchronization signal 2, the rendering process or the rendering thread of the application updates the rendering tree 2 based on the logic of the animation effect 1, and generates a bitmap based on the updated rendering tree 2, wherein the size of the control 1a01 in the bitmap is 30 pixels by 30 pixels.

As shown in fig. 18C, unlike fig. 18B, a rendering process or a rendering thread of an 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 by 20 pixels.

(3) Electronic equipment provided by the embodiment of the application

First, a hardware architecture of the electronic device provided in the embodiment of the present application is described.

The electronic device may be a cell phone, tablet, desktop, laptop, handheld, notebook, ultra-mobile personal computer (ultra-mobile personal computer, UMPC), netbook, as well as a cellular telephone, personal digital assistant (personal digital assistant, PDA), augmented reality (augmented reality, AR) device, virtual Reality (VR) device, artificial intelligence (artificial intelligence, AI) device, wearable device, vehicle-mounted device, smart home device, and/or smart city device, with the specific types of such electronic devices not being particularly limited by the embodiments of the present application.

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 charge management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, keys 190, a motor 191, an indicator 192, a camera 193, a display 194, and a subscriber identity module (subscriber identification module, SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyro sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, and the like.

It should be understood that the structure illustrated in the embodiments 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 less components than illustrated, or certain components may be combined, or certain components may be split, or different arrangements of components. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

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

The controller can generate operation control signals according to the instruction operation codes and the time sequence signals to finish the control of instruction fetching and instruction execution.

A memory may also be provided in the processor 110 for storing instructions and data. In some embodiments, the memory in the 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 reuse the instruction or data, it can be called directly from the memory. Repeated accesses are avoided and the latency of the processor 110 is reduced, thereby improving the efficiency of the system.

In some embodiments, the processor 110 may include one or more interfaces. The interfaces 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 receiver transmitter (universal asynchronous receiver/transmitter, UART) interface, a mobile industry processor interface (mobile industry processor interface, MIPI), a general-purpose input/output (GPIO) interface, a subscriber identity module (subscriber identity module, SIM) interface, and/or a universal serial bus (universal serial bus, USB) interface, among others.

The I2C interface is a bi-directional synchronous serial bus comprising a serial data line (SDA) and a serial clock line (derail clock line, SCL). In some embodiments, the processor 110 may contain multiple sets of I2C buses. The processor 110 may be coupled to the touch sensor 180K, charger, flash, camera 193, etc., respectively, through different I2C bus interfaces. For example: the processor 110 may be coupled to the touch sensor 180K through an I2C interface, so that the processor 110 and the touch sensor 180K communicate through an I2C bus interface to implement a touch function of the electronic device.

The I2S interface may be used for audio communication. In some embodiments, the processor 110 may contain multiple sets of I2S buses. The processor 110 may be coupled to the audio module 170 via an I2S bus to enable communication between the processor 110 and the audio module 170. In some embodiments, the audio module 170 may transmit an audio signal to the wireless communication module 160 through the I2S interface, to implement a function of answering a call through the bluetooth headset.

PCM interfaces may also be used for audio communication to sample, quantize and encode analog signals. In some embodiments, the audio module 170 and the wireless communication module 160 may be coupled through a PCM bus interface. In some embodiments, the audio module 170 may also transmit audio signals to the wireless communication module 160 through the PCM interface to implement a function of answering a call through the bluetooth headset. Both the I2S interface and the PCM interface may be used for audio communication.

The UART interface is a universal serial data bus for asynchronous communications. The bus may be a bi-directional communication bus. It converts the data to be transmitted between serial communication and parallel communication. In some embodiments, a UART interface is typically used to connect the processor 110 with the wireless communication module 160. For example: the processor 110 communicates with a bluetooth module in the wireless communication module 160 through a UART interface to implement a bluetooth function. In some embodiments, the audio module 170 may transmit an audio signal to the wireless communication module 160 through a UART interface, to implement a function of playing music through a bluetooth headset.

The MIPI interface may be used to connect the processor 110 to peripheral devices such as a display 194, a camera 193, and the like. The MIPI interfaces include camera serial interfaces (camera serial interface, CSI), display serial interfaces (display serial interface, DSI), and the like. In some embodiments, processor 110 and camera 193 communicate through a CSI interface to implement the photographing function of the electronic device. The processor 110 and the display screen 194 communicate via a DSI interface to implement the display functionality of the electronic device.

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

The USB interface 130 is an interface conforming to the USB standard specification, and may specifically be a Mini USB interface, a Micro USB interface, a USB Type C interface, or the like. The USB interface 130 may be used to connect a charger to charge an electronic device, or may be used to transfer data between the electronic device and a peripheral device. And can also be used for connecting with a headset, and playing audio through the headset. The interface may also be used to connect other electronic devices, such as AR devices, etc.

It should be understood that the connection relationship between the modules illustrated in the embodiments of the present invention is only illustrative, and does not limit the structure of the electronic device. In other embodiments of the present application, the electronic device may also use different interfacing manners in the foregoing embodiments, or a combination of multiple interfacing manners.

The charge management module 140 is configured to receive a charge input from a charger. The charger can be a wireless charger or a wired charger. In some wired charging embodiments, the charge management module 140 may receive a charging input of a wired charger through the USB interface 130. In some wireless charging embodiments, the charge management module 140 may receive wireless charging input through a wireless charging coil of the electronic device. The charging management module 140 may also supply power to the electronic device through the power management module 141 while charging the battery 142.

The power management module 141 is used for connecting the battery 142, and the charge management module 140 and the processor 110. The power management module 141 receives input from the battery 142 and/or the charge management module 140 to power the processor 110, the internal memory 121, the display 194, the camera 193, the wireless communication module 160, and the like. The power management module 141 may also be configured to monitor battery capacity, battery cycle number, battery health (leakage, impedance) and other parameters. In other embodiments, the power management module 141 may also be provided in the processor 110. In other embodiments, the power management module 141 and the charge management module 140 may be disposed in the same device.

The wireless communication function of the electronic device may be implemented by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, a modem processor, a baseband processor, and the like.

The antennas 1 and 2 are used for transmitting and receiving electromagnetic wave signals. Each antenna in the electronic device may be used to cover a single or multiple communication bands. Different antennas may also be multiplexed to improve the utilization of the antennas. For example: the antenna 1 may be multiplexed into 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 may provide a solution for wireless communication including 2G/3G/4G/5G, etc. applied on an electronic device. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (low noise amplifier, LNA), etc. The mobile communication module 150 may receive electromagnetic waves from the antenna 1, perform processes such as filtering, amplifying, and the like on the received electromagnetic waves, and transmit the processed electromagnetic waves to the modem processor for demodulation. The mobile communication module 150 can amplify the signal modulated by the modem processor, and convert the signal into electromagnetic waves through the antenna 1 to radiate. In some embodiments, at least some of the functional modules of the mobile communication module 150 may be disposed in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 may be provided in the same device as at least some of the modules of the processor 110.

The modem processor may include a modulator and a demodulator. The modulator is used for modulating the low-frequency baseband signal to be transmitted into a medium-high frequency signal. The demodulator is used for demodulating the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low frequency baseband signal to the baseband processor for processing. The low frequency baseband signal is processed by the baseband processor and then transferred to the application processor. The application processor outputs sound signals through an audio device (not limited to the speaker 170A, the receiver 170B, etc.), or displays images or video through the display screen 194. In some embodiments, the modem processor may be a stand-alone device. In other embodiments, the modem processor may be provided in the same device as the mobile communication module 150 or other functional module, independent of the processor 110.

The wireless communication module 160 may provide solutions for wireless communication including wireless local area network (wireless local area networks, WLAN) (e.g., wireless fidelity (wireless fidelity, wi-Fi) network), bluetooth (BT), global navigation satellite system (global navigation satellite system, GNSS), frequency modulation (frequency modulation, FM), near field wireless communication technology (near field communication, NFC), infrared technology (IR), etc. for application on an electronic device. The wireless communication module 160 may be one or more devices that integrate at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, modulates the electromagnetic wave signals, filters the electromagnetic wave signals, and transmits the processed signals to the processor 110. The wireless communication module 160 may also receive a signal to be transmitted from the processor 110, frequency modulate it, amplify it, and convert it to electromagnetic waves for radiation via the antenna 2.

In some embodiments, the antenna 1 and the mobile communication module 150 of the electronic device are coupled, and the antenna 2 and the wireless communication module 160 are coupled, so that the electronic device can communicate with the network and other devices through wireless communication technology. The wireless communication techniques may include the Global System for Mobile communications (global system for mobile communications, GSM), general packet radio service (general packet radio service, GPRS), code division multiple access (code division multiple access, CDMA), wideband 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, among others. The GNSS may include a global satellite positioning system (global positioning system, GPS), a global navigation satellite system (global navigation satellite system, GLONASS), a beidou satellite navigation system (beidou navigation satellite system, BDS), a quasi zenith satellite system (quasi-zenith satellite system, QZSS) and/or a satellite based augmentation system (satellite based augmentation systems, SBAS).

The electronic device implements display functions via a GPU, a display screen 194, an application processor, and the like. The GPU is a microprocessor for image processing, and is connected to the display 194 and the application processor. The GPU is 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 194 includes a display panel. The display panel may employ a liquid crystal display (liquid crystal display, LCD). The display panel may also be manufactured using organic light-emitting diode (OLED), active-matrix organic light-emitting diode (AMOLED) or active-matrix organic light-emitting diode (active-matrix organic light emitting diode), flexible light-emitting diode (FLED), mini, micro-OLED, quantum dot light-emitting diode (quantum dot light emitting diodes, QLED), or the like. In some embodiments, the electronic device may include 1 or N display screens 194, N being a positive integer greater than 1.

The electronic device may implement shooting functions through an ISP, a camera 193, a video codec, a GPU, a display screen 194, an application processor, and the like.

The ISP is used to process data fed back by the camera 193. For example, when photographing, the shutter is opened, light is transmitted to the camera photosensitive element through the lens, the optical signal is converted into an electric signal, and the camera photosensitive element transmits the electric signal to the ISP for processing and is converted into an image visible to naked eyes. ISP can also optimize the noise, brightness and color of the image. The ISP can also optimize parameters such as exposure, color temperature and the like of a shooting scene. In some embodiments, the ISP may be provided in the camera 193.

The camera 193 is used to capture still images or video. The object generates an optical image through the lens and projects the optical image onto the photosensitive element. The photosensitive element may be a charge coupled device (charge coupled device, CCD) or a Complementary Metal Oxide Semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, which is then transferred to the ISP to be converted into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV, or the like format. In some embodiments, the electronic device may include 1 or N cameras 193, N being a positive integer greater than 1.

The digital signal processor is used for processing digital signals, and can process other digital signals besides digital image signals. For example, when the electronic device selects a frequency bin, the digital signal processor is used to fourier transform the frequency bin energy, and so on.

Video codecs are used to compress or decompress digital video. The electronic device may support one or more video codecs. In this way, the electronic device may play or record video in a variety of encoding formats, such as: dynamic picture experts group (moving picture experts group, MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

The NPU is a neural-network (NN) computing processor, and can rapidly process input information by referencing a biological neural network structure, for example, referencing a transmission mode between human brain neurons, and can also continuously perform self-learning. Applications such as intelligent cognition of electronic devices can be realized through the NPU, for example: 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 (NVM).

The random access memory may include a static random-access memory (SRAM), a dynamic random-access memory (dynamic random access memory, DRAM), a synchronous dynamic random-access memory (synchronous dynamic random access memory, SDRAM), a double data rate synchronous dynamic random-access memory (double data rate synchronous dynamic random access memory, DDR SDRAM, such as fifth generation DDR SDRAM is commonly referred to as DDR5 SDRAM), etc.;

the nonvolatile memory may include a disk storage device, a flash memory (flash memory).

The FLASH memory may include NOR FLASH, NAND FLASH, 3D NAND FLASH, etc. divided according to an operation principle, may include single-level memory cells (SLC), multi-level memory cells (MLC), triple-level memory cells (TLC), quad-level memory cells (QLC), etc. divided according to a storage specification, may include universal FLASH memory (english: universal FLASH storage, UFS), embedded multimedia memory cards (embedded multi media Card, eMMC), etc. divided according to a storage specification.

The random access memory may be read directly from and written to by the processor 110, may be used to store executable programs (e.g., machine instructions) for an operating system or other on-the-fly programs, may also be used to store data for users and applications, and the like.

The nonvolatile memory may store executable programs, store data of users and applications, and the like, and may be loaded into the random access memory in advance for the processor 110 to directly read and write.

The external memory interface 120 may be used to connect external non-volatile memory to enable expansion of the memory capabilities of the electronic device. The external nonvolatile 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 nonvolatile memory.

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

The audio module 170 is used to convert digital audio information into an analog audio signal output and also to convert an analog audio input into a 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 disposed in the processor 110, or a portion of the functional modules of the audio module 170 may be disposed in the processor 110.

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

A receiver 170B, also referred to as a "earpiece", is used to convert the audio electrical signal into a sound signal. When the electronic device picks up a phone call or voice message, the voice can be picked up by placing the receiver 170B close to the human ear.

Microphone 170C, also referred to as a "microphone" or "microphone", is used to convert sound signals into electrical signals. When making a call or transmitting voice information, the user can sound near the microphone 170C through the mouth, inputting a sound signal to the microphone 170C. The electronic device may be provided with at least one microphone 170C. In other embodiments, the electronic device may be provided with two microphones 170C, and may implement a noise reduction function in addition to collecting sound signals. In other embodiments, the electronic device may also be provided with three, four, or more microphones 170C to enable collection of sound signals, noise reduction, identification of sound sources, directional recording functions, etc.

The earphone interface 170D is used to connect a wired earphone. The headset interface 170D may be a USB interface 130 or a 3.5mm open mobile electronic device platform (open mobile terminal platform, OMTP) standard interface, a american cellular telecommunications industry association (cellular telecommunications industry association of the USA, CTIA) standard interface.

The pressure sensor 180A is used to sense a pressure signal, and may convert the pressure signal into an electrical signal. In some embodiments, the pressure sensor 180A may be disposed on the display screen 194. The pressure sensor 180A is of various types, such as a resistive pressure sensor, an inductive pressure sensor, a capacitive pressure sensor, and the like. The capacitive pressure sensor may be a capacitive pressure sensor comprising at least two parallel plates with conductive material. The capacitance between the electrodes changes when a force is applied to the pressure sensor 180A. The electronics determine the strength of the pressure from the change in capacitance. When a touch operation is applied to the display screen 194, the electronic apparatus detects the intensity of the touch operation according to the pressure sensor 180A. The electronic device may also calculate the location of the touch based on the detection signal of the pressure sensor 180A. In some embodiments, touch operations that act on the same touch location, but at different touch operation strengths, may correspond to different operation instructions. For example: and executing an instruction for checking the short message when the touch operation with the touch operation intensity smaller than the first pressure threshold acts on the short message application icon. And executing an instruction for newly creating the short message when the touch operation with the touch operation intensity being greater than or equal to the first pressure threshold acts on the short message application icon.

The gyro sensor 180B may be used to determine a motion gesture of the electronic device. In some embodiments, the angular velocity of the electronic device about three axes (i.e., x, y, and z axes) may be determined by the gyro sensor 180B. The gyro sensor 180B may be used for photographing anti-shake. For example, when the shutter is pressed, the gyro sensor 180B detects the shake angle of the electronic device, calculates the distance to be compensated by the lens module according to the angle, and makes the lens counteract the shake of the electronic device through the reverse motion, thereby realizing anti-shake. The gyro sensor 180B may also be used for navigating, somatosensory game scenes.

The air pressure sensor 180C is used to measure air pressure. In some embodiments, the electronics calculate altitude from barometric pressure values measured by barometric pressure sensor 180C, aiding in positioning and navigation.

The magnetic sensor 180D includes a hall sensor. The electronic device may detect the 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 may detect the opening and closing of the flip according to the magnetic sensor 180D. And then according to the detected opening and closing state of the leather sheath or the opening and closing state of the flip, the characteristics of automatic unlocking of the flip and the like are set.

The acceleration sensor 180E may detect the magnitude of acceleration of the electronic device in various directions (typically three axes). The magnitude and direction of gravity can be detected when the electronic device is stationary. The electronic equipment gesture recognition method can also be used for recognizing the gesture of the electronic equipment, and is applied to horizontal and vertical screen switching, pedometers and other applications.

A distance sensor 180F for measuring a distance. The electronic device may measure the distance by infrared or laser. In some embodiments, the scene is photographed and the electronic device can range using the distance sensor 180F to achieve quick focus.

The proximity light sensor 180G may include, for example, a Light Emitting Diode (LED) and a light detector, such as a photodiode. The light emitting diode may be an infrared light emitting diode. The electronic device emits infrared light outwards through the light emitting diode. The electronic device uses a photodiode to detect infrared reflected light from nearby objects. When sufficient reflected light is detected, it may be determined that an object is 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 may detect that the user holds the electronic device near the ear to talk using the proximity light sensor 180G, so as to automatically extinguish the screen for power saving purposes. The proximity light sensor 180G may also be used in holster mode, pocket mode to automatically unlock and lock the screen.

The ambient light sensor 180L is used to sense ambient light level. The electronic device can adaptively adjust the brightness of the display 194 based on the perceived ambient light level. The ambient light sensor 180L may also be used to automatically adjust white balance when taking a photograph. Ambient light sensor 180L may also cooperate with proximity light sensor 180G to detect if the electronic device is in a pocket to prevent false touches.

The fingerprint sensor 180H is used to collect a fingerprint. The electronic equipment can utilize the collected fingerprint characteristics to realize fingerprint unlocking, access the application lock, fingerprint photographing, fingerprint incoming call answering and the like.

The temperature sensor 180J is for detecting temperature. In some embodiments, the electronic device performs a temperature processing strategy using the temperature detected by temperature sensor 180J. For example, when the temperature reported by temperature sensor 180J exceeds a threshold, the electronics perform a reduction in performance of a processor located near temperature sensor 180J in order to reduce power consumption to implement thermal protection. In other embodiments, when the temperature is below another threshold, the electronic device heats the battery 142 to avoid low temperatures causing the electronic device to shut down abnormally. In other embodiments, the electronic device performs boosting of the output voltage of the battery 142 when the temperature is below a further threshold to avoid abnormal shutdown caused by low temperatures.

The touch sensor 180K, also referred to as a "touch device". The touch sensor 180K may be disposed on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, which is also called a "touch screen". The touch sensor 180K is for detecting a touch operation acting thereon or thereabout. The touch sensor may communicate the detected touch operation to the application processor to determine the touch event type. Visual output related to touch operations may be provided through the display 194. In other embodiments, the touch sensor 180K may also be disposed on the surface of the electronic device at a different location than the display 194.

The bone conduction sensor 180M may acquire a vibration signal. In some embodiments, bone conduction sensor 180M may acquire a vibration signal of a human vocal tract vibrating bone pieces. The bone conduction sensor 180M may also contact the pulse of the human body to receive the blood pressure pulsation signal. In some embodiments, bone conduction sensor 180M may also be provided in a headset, in combination with an osteoinductive headset. The audio module 170 may analyze the voice signal based on the vibration signal of the sound portion vibration bone block obtained by the bone conduction sensor 180M, so as to implement a voice function. The application processor may analyze the heart rate information based on the blood pressure beat signal acquired by the bone conduction sensor 180M, so as to implement a heart rate detection function.

The keys 190 include a power-on key, a volume key, etc. The keys 190 may be mechanical keys. Or may be a touch key. The electronic device may receive key inputs, generating key signal inputs related to user settings and function controls of the electronic device.

The motor 191 may generate a vibration cue. The motor 191 may be used for incoming call vibration alerting as well as for touch vibration feedback. For example, touch operations acting on different applications (e.g., photographing, audio playing, etc.) may correspond to different vibration feedback effects. The motor 191 may also correspond to different vibration feedback effects by touching different areas of the display screen 194. Different application scenarios (such as time reminding, receiving information, alarm clock, game, etc.) can also correspond to different vibration feedback effects. The touch vibration feedback effect may also support customization.

The indicator 192 may be an indicator light, may be used to indicate a state of charge, a change in charge, a message indicating a missed call, a notification, etc.

The SIM card interface 195 is used to connect a SIM card. The SIM card may be inserted into the SIM card interface 195, or removed from the SIM card interface 195 to enable contact and separation with the electronic device. The electronic device may support 1 or N SIM card interfaces, N being a positive integer greater than 1. The SIM card interface 195 may support Nano SIM cards, micro SIM cards, and the like. The same SIM card interface 195 may be used to insert multiple cards simultaneously. The types of the plurality of cards may be the same or different. The SIM card interface 195 may also be compatible with different types of SIM cards. The SIM card interface 195 may also be compatible with external memory cards. The electronic equipment interacts with the network through the SIM card, so that the functions of communication, data communication and the like are realized. In some embodiments, the electronic device employs esims, namely: an embedded SIM card. The eSIM card can be embedded in the electronic device and cannot be separated from the electronic device.

Next, a software architecture of the electronic device provided in the embodiment of the present application is described.

As shown in fig. 20, the layered architecture divides the software into several layers, each with a clear role and division of work. The layers communicate with each other through a software interface. In some embodiments, the system is divided into four layers, from top to bottom, an application layer, an application framework layer, a system library, and a kernel layer, respectively.

The application layer may include a series of application packages. As shown in fig. 20, the application package may include applications (also referred to as applications) such as cameras, gallery, calendar, phone calls, maps, navigation, WLAN, bluetooth, music, video, short messages, etc.

The application framework layer provides an application programming interface (application programming interface, API) and programming framework for application programs of the application layer. The application framework layer includes a number of predefined functions.

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

The window management service is responsible for starting, adding, deleting and the like of the window, and can determine the application program displayed on the window, determine the creation, destruction, attribute change and the like of the layer of the application program, judge whether a status bar exists, lock a screen, intercept the screen and the like.

The display management service may obtain the number, size, and the like of the display areas and be responsible for starting, adding, deleting, and the like of the display areas.

The content provider is used to store and retrieve data and make such data accessible to applications. The data may include video, images, audio, calls made and received, browsing history and bookmarks, phonebooks, etc.

The telephony manager is for providing communication functions of the electronic device. Such as the management of call status (including on, hung-up, etc.).

The resource manager provides various resources for the application program, such as localization strings, icons, pictures, layout files, video files, and the like.

The notification manager allows the application to display notification information in a status bar, can be used to communicate notification type messages, can automatically disappear after a short dwell, and does not require user interaction. Such as notification manager is used to inform that the download is complete, message alerts, etc. The notification manager may also be a notification presented in the form of a chart or scroll bar text in the system top status bar, such as a notification of a background running application, or a notification presented on a screen in the form of a dialog interface. For example, a text message is prompted in a status bar, a prompt tone is emitted, the electronic device vibrates, and an indicator light blinks, etc.

The view system includes visual controls, such as controls to display text, controls to display pictures, and the like. The view system may be used to build applications. The display interface may be composed of one or more views. For example, a display interface including a text message notification icon may include a view displaying text and a view displaying a picture.

The application framework layer may also include an animation system.

As shown in fig. 20, the animation system executes the animation effect display mode provided in the embodiment of the present application, including:

s2001: configuring animation effects through an animation interface

The animation system provides an animation interface to the developer of the application. A developer of an application may configure an animation effect for any one or more controls by invoking an animation interface.

S2002: determining duration of animation effect, end frame description information of animation effect, etc

After the application begins running, upon receiving an animation triggering event, the animation system may determine a duration of the animation effect, end frame description information of the animation effect, and so on.

S2003: determining descriptive information for each frame within an animation effect duration

The animation system may then determine description information for the frame currently to be rendered based on the duration of the animation effect, the end frame description information for the animation effect, the start time of the animation effect, and the time of the frame currently to be rendered. Wherein the description information of the frame to be rendered currently comprises the attribute of the control on the frame.

S2004: updating rendering tree based on descriptive information of each frame

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

And finally, transmitting the updated rendering tree to a bottom graphic processing library, and calling the GPU or the CPU by the bottom graphic processing library to execute specific drawing operation to generate a bitmap. The bitmap is received by the display driver and sent to the display.

The runtime includes a core library and a 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 a function which needs to be called by java language, and the other part is a core library.

The application layer and the application framework layer run in a virtual machine. The virtual machine executes java files of the application program layer and the application program framework layer as binary files. The virtual machine is used for executing the functions of object life cycle management, stack management, thread management, security and exception management, garbage collection and the like. The system library may include a plurality of functional modules. For example: surface manager (surface manager), media Libraries (Media Libraries), graphics processing Libraries, wherein graphics processing Libraries include three-dimensional graphics processing Libraries (e.g., openGL ES), two-dimensional graphics engines (e.g., SGL), and the like. The surface manager is used to manage the display subsystem and provides a fusion of two-Dimensional (2D) and three-Dimensional (3D) layers for multiple applications. Media libraries support a variety of commonly used audio, video format playback and recording, still image files, and the like. The media library may support a variety of audio video encoding formats, such as: MPEG4, h.264, MP3, AAC, AMR, JPG, PNG, etc. The three-dimensional graphic processing library is used for realizing 3D graphic drawing, image rendering, layer synthesis, layer processing and the like. The 2D graphics engine is a drawing engine for 2D drawing. The kernel layer is a layer between hardware and software. The kernel layer at least comprises a display driver, a camera driver, an audio driver, a sensor driver and a virtual card driver.

As used in the above embodiments, the term "when …" may be interpreted to mean "if …" or "after …" or "in response to determination …" or "in response to detection …" depending on the context. Similarly, the phrase "at the time of determination …" or "if detected (a stated condition or event)" may be interpreted to mean "if determined …" or "in response to determination …" or "at the time of detection (a stated condition or event)" or "in response to detection (a stated condition or event)" depending on the context.

In the above embodiments, it may be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented in software, 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 loaded and executed on a computer, produces, in whole or in part, a flow or function consistent with embodiments of the present application. The computer may be a general purpose computer, a special purpose computer, a computer network, or other programmable apparatus. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transmitted from one website, computer, server, or data center to another website, computer, server, or data center by a wired (e.g., coaxial cable, fiber optic, digital subscriber line), or wireless (e.g., infrared, wireless, microwave, etc.). 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, data center, etc. that contains an integration of one or more available media. The usable medium may be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid state disk), etc.

Those of ordinary skill in the art will appreciate that implementing all or part of the above-described method embodiments may be accomplished by a computer program to instruct related hardware, the program may be stored in a computer readable storage medium, and the program may include the above-described method embodiments when executed. And the aforementioned storage medium includes: ROM or random access memory RAM, magnetic or optical disk, etc.

Claims

1. An animation effect display method applied to electronic equipment is characterized by comprising the following steps:

displaying a first interface, wherein the first interface comprises a first control;

when the first interface is displayed, responding to a first operation at a first moment, and displaying the first control with a first animation effect;

responding to a second operation at a second moment after the first moment, and if the first animation effect is finished at the second moment, displaying the first control with a second animation effect;

at the second moment, responding to the second operation, and if the second moment is within the duration time of the first animation effect, displaying the first control with a third animation effect;

The third animation effect comprises a transition process and an animation process, the animation process is a part of the second animation effect, the ending interface of the animation process is the same as the ending interface of the second animation effect, and the transition process is determined according to the display content of the first animation effect at the second moment and 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 ending interface of the second animation effect, and the ending interface of the third animation effect is the same as the ending interface of the second animation effect.

2. The method of claim 1, wherein the step of determining the position of the substrate comprises,

the attributes of the first control include a first attribute that changes at a first rate in the first animation effect and a second attribute that changes at a second rate in 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, and specifically comprises the following steps: the change rate of the first attribute in the transition process is determined according to the first rate and the second rate;

The third animation effect is determined according to the display content of the first animation effect at the second moment and the ending interface of the second animation effect, and specifically comprises the following steps: the rate of change of the first attribute during the third animated effect is determined from the first rate and the second rate.

3. The method of claim 2, wherein the step of determining the position of the substrate comprises,

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

the change rate of the first attribute in the third animated effect process is determined according to the first rate and the second rate, and specifically includes: the rate of change of the first attribute during the third animated effect is a vector superposition of the first rate and the second rate.

4. The method of claim 1, wherein the step of determining the position of the substrate comprises,

the attributes of the first control include a first attribute that changes at a first rate in the first animation effect; the first attribute changes at a second rate in the second animation effect;

The third animation effect comprises a transition process and an animation process, wherein the first attribute is continuous, first-order conductive or second-order conductive in the transition process;

or the third animation effect is determined according to the display content of the first animation effect at the first moment and the ending interface of the second animation effect, and the first attribute is continuous, first-order conductive or second-order conductive in the process of the third animation effect.

5. The method according to any one of claims 1 to 4, wherein,

the first animation effect enables the size of the first control to be linearly increased, and the second animation effect enables the size of the first control to be linearly decreased;

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 comprises the following steps: the transition process enables the size of the first control to be increased and then decreased, the increasing change speed is gradually slowed down, and the decreasing speed is gradually increased;

the third animation effect is determined according to the display content of the first animation effect at the second moment and the ending interface of the second animation effect, and specifically comprises the following steps: the third animation effect enables the size of the first control to be increased and then decreased, the increasing change speed is gradually slowed down, and the decreasing speed is gradually increased.

6. The method according to any one of claims 1 to 5, wherein,

the third animation effect comprises a transition process and an animation process, and the ending time of the transition process is the ending time of the first 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 ending interface of the second animation effect, and the ending time of the third animation effect is the ending time of the second animation.

7. The method according to any one of claims 1-6, further comprising:

determining duration time of the second animation effect and end frame description information of the second animation effect after responding to the second operation at the second moment;

determining the transition process according to the display content of the first animation effect at the second moment and the second animation effect, and determining 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 time of the third animation effect and the end frame description information of the third animation effect, wherein the end frame description information of the third animation effect is identical with the end frame description information of the second animation effect;

Determining 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 when generating the display data of the target frame in the duration of the transition process; or in the duration of the third animated effect, determining the description information of the target frame according to the duration of the third animated effect and the description information of the ending frame of the third animated effect when generating the display data of the target frame;

and generating display data of the target frame according to the description information of the target frame.

8. An electronic device, the electronic device comprising: one or more processors and memory;

the memory is coupled with the one or more processors, the memory for storing computer program code comprising computer instructions that the one or more processors invoke to cause the electronic device to perform the method of any of claims 1-7.

9. A chip system for application to an electronic device, the chip system comprising one or more processors to invoke computer instructions to cause the electronic device to perform the method of any of claims 1-7.

10. A computer readable storage medium comprising instructions which, when run on an electronic device, cause the electronic device to perform the method of any of claims 1-7.