Display method, and device

Abstract

The present application relates to the technical field of terminal display. Provided in the embodiments are a display method and a device. The method comprises: an electronic device may display a first interface, and in response to an interface switching operation for the first interface, display a transition animation, wherein the transition animation is a dynamic picture displayed during the process of switching from the first interface to a second interface, a target image frame in the transition animation comprises a contour region, the transparency corresponding to the contour region gradually increases in a target direction, the target direction is a direction pointing from the inside to the outside of the target image frame, and the contour region is determined on the basis of an edge movement speed corresponding to each edge in the target image frame during the playback of the transition animation; and the electronic device may also display the second interface. Regions of which the transparency needs to be adjusted are determined on the basis of the edge movement speed corresponding to each edge in the target image frame, such that a smoother and more harmonious transition during interface switching can be achieved, thus improving visual experience when users use mobile phones.

Description

Display method and device

[0001] This application claims priority to the Chinese Patent Application No. 202410797206.5, filed on June 19, 2024, and entitled "A display method and device", the content of which is incorporated herein by reference in its entirety. TECHNICAL FIELD

[0002] The present application relates to the technical field of terminal display, and in particular to a display method and device. BACKGROUND

[0003] With the continuous development of terminals, in order to be able to present a better user interface (UI) to the user, based on the powerful performance of the terminal, the interface of the application is becoming more and more complex, and the conversion between interfaces is also becoming more and more frequent. For example, the switching (or transition) effect between different interfaces and the switching effect between the horizontal screen interface and the vertical screen interface after the horizontal and vertical screen switching.

[0004] In the interface switching process, the interface contents in the two interfaces are different, and the commonly used switching effect will be particularly conspicuous, resulting in a relatively fragmented visual effect. The user's perception of the effect is not smooth and harsh. Therefore, the user's experience is reduced. SUMMARY

[0005] The embodiments of the present application provide a display method and device, by adjusting the transparency of the contour region of the target image frame in the transition animation, the transition between the image edge region and the display background around the image can be more natural, and there will be no ghosting problem. The user perceives that the interface switching process is more soft and coherent.

[0006] To achieve the above purpose, the present application adopts the following technical scheme:

[0007] In a first aspect, the present application provides a display method applied to an electronic device, the method comprising: the electronic device can display a first interface, and in response to an interface switching operation on the first interface, display a transition animation. The transition animation is a dynamic picture displayed in the process of switching from the first interface to a second interface. The target image frame in the transition animation includes a contour region, the transparency corresponding to the contour region gradually increases along a target direction, the target direction is a direction from the inside of the target image frame to the outside, and the contour region is determined according to the edge movement speed corresponding to each edge in the target image frame during playing the transition animation. The electronic device can also display the second interface.

[0008] Thus, on one hand, by adjusting the transparency of the contour region in the target image frame, the application can make the transition between the image edge region and the display background of the image periphery more natural, and there will be no ghosting problem. In this way, the transition animation displayed after the scaling or stretching operation of each target image frame will also have a more soft and coherent dynamic effect.

[0009] On the other hand, the contour region in the target image frame is determined according to the edge moving speed corresponding to each edge in the target image frame during the playing of the transition animation. The edge moving speed corresponding to each edge in the target image frame can be the same or different.

[0010] In the scenario where the edge moving speed corresponding to each edge in the target image frame is the same, the area of the region corresponding to the four edges of the target image frame in the contour region is also the same. In this way, during the playing of the transition animation, the four edges of the target image frame have the same transparency adjustment effect, which can maintain the consistency of the transition effect and at the same time has a more soft and coherent dynamic effect.

[0011] Since the playing time of the transition animation is fixed, the faster the edge moving speed corresponding to the edge, the longer the distance of the edge moving, and the user will more obviously see the edge moving. Therefore, in the scenario where the edge moving speed corresponding to each edge in the target image frame is different, the area of the region corresponding to the four edges of the target image frame in the contour region is also different, which further makes the user perceive that the contour region of the transition animation is more soft and coherent, and at the same time can realize flexible adjustment of the contour region.

[0012] Similarly, in the multiple target image frames, the area of the region corresponding to the contour region of each target image frame is also different when the edge moving speed corresponding to each edge is different. The faster the edge moving speed of the target image frame, the larger the area of the contour region, which further makes the user perceive the soft transition between the contour region and the display background of the image periphery, and improves the user's visual experience.

[0013] In some implementable manners, the contour region includes a sub-contour region corresponding to each edge, and the larger the edge moving speed corresponding to each edge, the larger the area of the sub-contour region corresponding to each edge.

[0014] Thus, each edge corresponds to a sub-contour region, and the larger the edge moving speed corresponding to each edge, the larger the area of the corresponding sub-contour region. That is, in the scenario where the edge moving speed corresponding to each edge in the target image frame is different, the area of the region corresponding to the four edges of the target image frame in the contour region is also different, which further makes the user perceive that the contour region of the transition animation is more soft and coherent, and at the same time can realize flexible adjustment of the contour region.

[0015] In some implementable manners, the method further includes that the electronic device can draw a target image frame, the target image frame is generated according to the interface content information of the first interface or the interface content information of the second interface, and the target image frame includes one layer.

[0016] In this way, the embodiment of the present application can draw a target image frame according to the interface content information of the first interface or the interface content information of the second interface, and the target image frame includes one layer. That is, the image needs to be drawn only once in one layer to generate the target image frame. On the basis of guaranteeing the visual effect of the user, the performance power consumption of the mobile phone is reduced without performing multiple image drawing processes on one image.

[0017] In some implementable manners, the target image frame can be generated according to the interface content information of the second interface. The transition animation is used to present the zoom-in display effect or the fade-in display effect corresponding to the target image frame, and the last image frame of the transition animation is the same as the image content displayed by the second interface.

[0018] The target image frame can also be generated according to the interface content information of the first interface. The transition animation is used to present the zoom-out display effect or the fade-out display effect corresponding to the target image frame, and the first image frame of the transition animation is the same as the image content displayed by the first interface.

[0019] In this way, in the scenario where the target image frame is generated based on the interface content information of the second interface, the transition animation is used to present the zoom-in display effect or the fade-in display effect corresponding to the target image frame. In the scenario where the target image frame is generated based on the interface content information of the first interface, the transition animation is used to present the zoom-out display effect or the fade-out display effect corresponding to the target image frame. In this way, the transition animation can be applied to the different display scenarios, and in different display scenarios, the user can perceive that the outline area of the transition animation is more soft and coherent, thereby improving the visual experience of the user.

[0020] In some implementable manners, the switching operation is used to indicate that the target application is started or the target application is exited, and the transition animation is a zoom animation, which is used to present the zoom-in display effect or the zoom-out display effect corresponding to the target image frame.

[0021] Alternatively, the switching operation is used to indicate that the interface switching is performed in the target application, and the transition animation is a displacement animation, which is used to present the fade-in display effect or the fade-out display effect corresponding to the target image frame.

[0022] Therefore, the embodiment of the present application can display a transition animation in the process of starting a target application, exiting the target application, or switching interfaces in the target application. The transition animation can be a scaling animation or a displacement animation. In this way, the transition animation can be displayed in different interface switching scenarios corresponding to an application, so that a user can perceive that the outline area of the transition animation is more soft and coherent in various interface switching scenarios, thereby improving the visual experience of the user.

[0023] In some implementable manners, the scaling animation includes a direct scaling animation and a displacement scaling animation, the direct scaling animation includes a direct enlargement animation and a direct reduction animation, the target image frame in the direct enlargement animation is gradually enlarged from a first position in the first interface, and the target image frame in the direct reduction animation is gradually reduced to a first position in the second interface.

[0024] The displacement scaling animation includes a displacement enlargement animation and a displacement reduction animation, the target image frame in the displacement enlargement animation is gradually enlarged in the process of moving from a first position to a second position in the first interface, and the target image frame in the displacement reduction animation is gradually reduced in the process of moving from the second position to the first position in the second interface, the first position in the first interface and the first position in the second interface are the same or different from the application control position corresponding to the target application.

[0025] Therefore, the scaling animation of the embodiment of the present application can include a direct scaling animation and a displacement scaling animation. In the direct scaling animation, the target image frame can be directly enlarged or directly reduced from one position to another position. In the displacement scaling animation, the target image frame can be displaced in the process of enlargement or reduction. This can enable a user to perceive that the outline area of the animation is more soft and coherent in different types of scaling animations, thereby improving the visual experience of the user.

[0026] In some implementable manners, in the process of drawing the target image frame, the electronic device can obtain an edge movement speed of the target image frame and each edge of the target image frame. The electronic device can also determine a first area and a second area corresponding to the target image frame according to the edge movement speed of each edge of the target image frame, the first area being an area close to each edge in the target image frame, and the second area being an area close to each edge outside the target image frame. The electronic device adjusts the transparency of the first area and the second area to generate an updated target image frame, and the outline area in the transition animation is the first area and the second area in the updated target image frame.

[0027] Thus, the embodiment of the present application can determine the first region and the second region corresponding to the target image frame according to the edge moving speed of each edge of the target image frame, the first region and the second region are the regions close to each edge inside and outside the target image frame respectively, and the subsequent transparent gradient effect can be ensured by setting the first region and the second region. The first region and the second region can also be adjusted in transparency to make the outline of the image more soft. Since the user's eyes can better perceive the edge position when identifying the speed of the moving object, the outline region can improve the visual effect of the user after the transparency adjustment, so that the user looks more smooth.

[0028] In some implementable manners, in the process of determining the first region and the second region corresponding to the target image frame according to the edge moving speed of each edge of the target image frame, the electronic device can determine the feathering distance corresponding to each edge of the target image frame according to the edge moving speed of each edge of the target image frame, and determine the first region according to the feathering distance, the area of the region corresponding to the first region is positively correlated with the feathering distance. The electronic device can also expand the pixel points corresponding to the first region along the target direction to obtain the second region.

[0029] Thus, the edge moving speed of each edge of the embodiment of the present application is the same, and the corresponding feathering distance is the same. The edge moving speed of each edge is different, and the corresponding feathering distance is different. The greater the feathering distance, the greater the area of the first region, and the smaller the feathering distance, the smaller the area of the first region. In the scenario where the edge moving speed of each edge corresponding to the target image frame is different, the corresponding first region and second region are also different. Further, the user can perceive that the outline region of the transition animation is more soft and coherent, and flexible adjustment of the outline region can be realized.

[0030] In some implementable manners, in the first region, the distance from one end away from the edge of the target image frame to the edge of the target image frame is equal to the feathering distance, and in the second region, the distance from one end away from the edge of the target image frame to the edge of the target image frame is equal to the feathering distance.

[0031] In some implementable manners, in the process of obtaining the edge moving speed of each edge of the target image frame, the electronic device can obtain the moving distance between the center point positions in the adjacent image frames in the transition animation and the playing speed corresponding to the transition animation when the transition animation is a motion animation or a zoom animation, and determine the center moving speed corresponding to the center point positions according to the moving distance. The electronic device can also add the center moving speed and the playing speed corresponding to the transition animation to obtain the target moving speed of each vertex of the target image frame, and perform average value calculation on the target moving speed of the vertex corresponding to each edge of the target image frame to obtain the edge moving speed of each edge of the target image frame.

[0032] Thus, in the embodiment of the present application, when the transition animation is a displacement animation or a direct scaling animation, the edge movement speed of each edge in the target image frame is generally changed according to the change of the center movement speed corresponding to the center point position in the target image frame and the playing speed of the transition animation. The center movement speed and the playing speed corresponding to the transition animation can be added to obtain the target movement speed of each vertex in the target image frame, and then the average value of the target movement speed of each vertex corresponding to the edge in the target image frame is calculated. The edge movement speed of each edge in the target image frame can be accurately obtained, which facilitates the subsequent determination of the area corresponding to the contour region. Thus, the transition animation can realize a more smooth and coordinated connection transition in the process of interface switching, and the transition will not appear harsh. Therefore, the visual experience of the user when using the mobile phone is improved.

[0033] In some implementable manners, in the process of obtaining the edge movement speed of each edge in the target image frame, the electronic device can obtain the movement distance between the center point positions in adjacent image frames in the transition animation, the movement direction of the center point positions in the adjacent image frames, and the playing speed corresponding to the transition animation when the transition animation is a displacement scaling animation. In the displacement scaling animation, the target image frame is gradually enlarged during displacement or is displaced during gradual reduction. The electronic device can determine the center movement speed corresponding to the center point position according to the movement distance, and calculate the target movement speed of each vertex in the target image frame according to the movement direction of the center point position and the playing speed corresponding to the transition animation. The electronic device can also calculate the average value of the target movement speed of each vertex corresponding to the edge in the target image frame to obtain the edge movement speed of each edge in the target image frame.

[0034] Thus, in the embodiment of the present application, when the transition animation is a displacement scaling animation, the edge movement speed of each edge in the target image frame is changed according to the change of the center movement speed corresponding to the center point position in the target image frame, the center movement direction, and the playing speed of the transition animation. Therefore, the target movement speed of each vertex in the target image frame is determined by calculating the center movement speed and the playing speed corresponding to the transition animation according to the movement direction of the center point position. The edge movement speed of each edge in the target image frame can be accurately obtained, which facilitates the subsequent determination of the area corresponding to the contour region. Thus, the transition animation can realize a more smooth and coordinated connection transition in the process of interface switching, and the transition will not appear harsh. Therefore, the visual experience of the user when using the mobile phone is improved.

[0035] In some possible implementation manners, in the process of determining the feathering distance corresponding to each edge in the target image frame according to the edge movement speed of each edge of the target image frame, the electronic device can obtain the feathering distance corresponding to each edge in the target image frame according to the edge movement speed corresponding to each edge and the preset time threshold.

[0036] In this way, the preset time threshold can be set, and the edge movement speed corresponding to each edge can be converted into the feathering distance corresponding to each edge. This facilitates subsequent determination of the corresponding contour region in the target image frame and rendering of the contour region with a transparent gradient effect. In the process of interface switching, a more smooth and coordinated connection transition can be implemented, and the visual experience of a user when using the mobile phone can be improved.

[0037] In a second aspect, the embodiments of the present application further provide a display device, which includes a display module, an acquisition module and a processing module.

[0038] The display module is configured to display a first interface; the processing module is configured to draw a target image frame; the processing module is configured to generate a transition animation according to the target image frame; the transition animation is a dynamic picture displayed in the process of switching from the first interface to a second interface, the target image frame in the transition animation includes a contour region, the transparency of the contour region increases along a target direction, the target direction is a direction from the inside of the target image frame to the outside, and the contour region is determined according to the edge movement speed of each edge of the target image frame in the process of playing the transition animation; the display module is further configured to display the transition animation; and the display module is further configured to display the second interface.

[0039] In this way, the display device provided by the embodiments of the present application can determine the region whose transparency needs to be adjusted according to the edge movement speed of each edge in the target image frame, which can further improve the display effect of the transition animation, implement a more smooth and coordinated connection transition in the process of interface switching, and the transition will not appear harsh. Therefore, the visual experience of a user when using the mobile phone can be improved.

[0040] In a third aspect, the embodiments of the present application further provide an electronic device, which includes a memory, one or more processors, and a display screen; the memory is coupled with the processors; the display screen is used to display a user interface; the memory stores computer program codes, and the computer program codes include computer instructions, which, when executed by the processors, cause the electronic device to perform the display method in the first aspect.

[0041] In a fourth aspect, the embodiments of the present application further provide a computer readable storage medium, which stores instructions, and the instructions, when executed on an electronic device, cause the electronic device to perform the display method in the first aspect.

[0042] In a fifth aspect, the embodiments of the present application further provide a computer program product, which comprises instructions. When the instructions are executed on a computer or a processor, the computer or the processor performs the display method in the first aspect. BRIEF DESCRIPTION OF DRAWINGS

[0043] FIG. 1 is a schematic diagram of an image frame in a related art according to an embodiment of the present application;

[0044] FIG. 2 is a schematic diagram of a hardware structure of a mobile phone according to an embodiment of the present application;

[0045] FIG. 3 is a schematic diagram of a software structure of a mobile phone according to an embodiment of the present application;

[0046] FIG. 4 is a schematic diagram of interface switching of a weather application according to an embodiment of the present application;

[0047] FIG. 5 is a schematic diagram of interface switching of a memo application according to an embodiment of the present application;

[0048] FIG. 6 is a schematic diagram of interface switching of setting a storage function in an application according to an embodiment of the present application;

[0049] FIG. 7 is a schematic diagram of a flow of determining a first region and a second region according to an embodiment of the present application;

[0050] FIG. 8 is a schematic diagram of a first region and a second region corresponding to a target image frame according to an embodiment of the present application;

[0051] FIG. 9 is a schematic diagram of a flow of determining a first region and a second region according to an edge moving speed according to an embodiment of the present application;

[0052] FIG. 10 is a schematic diagram of a first region and a second region determined according to an edge moving speed according to an embodiment of the present application;

[0053] FIG. 11 is a schematic diagram of each edge in a target image frame according to an embodiment of the present application;

[0054] FIG. 12 is a schematic diagram of a target image frame in a displacement scaling animation according to an embodiment of the present application;

[0055] FIG. 13 is a schematic diagram of calculating an edge moving distance according to an embodiment of the present application;

[0056] FIG. 14 is a schematic diagram of a hardware structure of a mobile phone according to an embodiment of the present application. DETAILED DESCRIPTION

[0057] The technical solutions in the embodiments of the present application will be described below with reference to the drawings in the embodiments of the present application. In the description of the present application, unless otherwise specified, " / " represents an "or" relationship between the objects before and after the " / ", for example, A / B can represent A or B; in the present application, "and / or" is only a description of the relationship between the associated objects, which means that there can be three relationships, for example, A and / or B, which can represent: A exists alone, A and B exist together, and B exists alone, where A and B can be singular or plural. In addition, in the description of the present application, unless otherwise specified, "multiple" means two or more than two. "At least one of the following" or the like means any combination of the items, including any combination of single item or multiple items. For example, at least one of a, b, or c can represent: a, b, c, a-b, a-c, b-c, or a-b-c, where a, b, and c can be single or multiple. In addition, in order to clearly describe the technical solutions of the embodiments of the present application, in the embodiments of the present application, "first", "second", and the like are used to distinguish the same items or similar items with basically the same function and effect.

[0058] Those skilled in the art can understand that the "first", "second", and the like do not limit the quantity and execution order, and the "first", "second", and the like do not necessarily mean different. At the same time, in some embodiments of the present application, the words "exemplary" or "for example" are used to represent an example, illustration or description. Any embodiment or design scheme described as "exemplary" or "for example" in the embodiments of the present application should not be interpreted as more preferred or more advantageous than other embodiments or design schemes. Rather, the words "exemplary" or "for example" are intended to present the relevant concept in a specific manner, for ease of understanding.

[0059] In addition, the device architecture and business scenarios described in the embodiments of the present application are used to more clearly illustrate the technical solutions of the embodiments of the present application, and do not constitute a limitation on the technical solutions provided by the embodiments of the present application. Those skilled in the art can know that as the evolution of device architecture and the emergence of new business scenarios, the technical solutions provided by the embodiments of the present application are also applicable to similar technical problems.

[0060] With the continuous development of terminals, in order to be able to present a better user interface (UI) to the user, based on the powerful terminal, the interface of the application is more and more complex, and the conversion between interfaces also becomes more and more. For example, the switching (or transition) effect between different interfaces (such as the switching effect corresponding to the display interface and the exit interface) and the switching effect between the horizontal screen interface and the vertical screen interface after the horizontal screen interface and the vertical screen interface are switched. The above effects can be realized by scaling or stretching the interface in the interface switching scenario. During the scaling or stretching display of the interface, the color difference between the edge region of the interface and the display background around the interface is too large, resulting in a relatively fragmented visual effect.

[0061] Referring to FIG. 1, the image frame in the transition animation in the related art includes multiple layers, and each layer needs to draw a corresponding image. Specifically, in the process of drawing the corresponding image of each layer, the edge region of the corresponding image in each layer needs to be adjusted in different degrees, and the pixels in the adjusted region also need to be modified. For example, the edge regions corresponding to the first layer, the second layer and the third layer are enlarged in turn. In this way, the image frame formed by superimposing the multiple layers can achieve an effect similar to motion blur. However, when the number of layers is smaller, the display effect of the image frame will look worse, like multiple layers of ghosting rather than delicate directional blur, and the user's visual effect for the interface is not smooth and harsh. When the number of layers is larger, the real-time performance power consumption will also increase accordingly. Thus, the user's experience is reduced.

[0062] Based on the above content, an embodiment of the present application provides a display method applied to an electronic device, the method comprising: the electronic device can display a first interface, and in response to an interface switching operation for the first interface, display a transition animation. Wherein the transition animation is a dynamic picture displayed in the process of switching from the first interface to the second interface, a target image frame in the transition animation includes an outline region, the transparency of the outline region gradually increases along a target direction, the target direction is a direction from the inside of the target image frame to the outside, and the outline region is determined according to the edge movement speed of each edge in the target image frame during playing of the transition animation. The electronic device can also display a second interface.

[0063] That is, in the conversion process between interfaces in the embodiment of the present application, a transition animation can be displayed, a target image frame in the transition animation includes an outline region, and the transparency of the outline region gradually becomes transparent along the direction from the inside of the target image frame to the outside. At the same time, the outline region is determined according to the edge movement speed of each edge in the target image frame during playing of the transition animation.

[0064] Thus, on one hand, by adjusting the transparency of the contour region in the target image frame, the present application can make the transition between the image edge region and the display background of the image periphery more natural, and there will be no ghosting problem. In this way, the transition animation displayed after the scaling or stretching operation of each target image frame will also have a more soft and coherent dynamic effect.

[0065] On the other hand, the contour region in the target image frame is determined according to the edge moving speed of each edge corresponding to the target image frame in the process of playing the transition animation. The edge moving speed of each edge corresponding to the target image frame can be the same or different.

[0066] In the scenario where the edge moving speed of each edge corresponding to the target image frame is the same, the area of the region corresponding to the four edges of the target image frame in the contour region is also the same. In this way, during the playing of the transition animation, the four edges of the target image frame have the same transparency adjustment effect, which can maintain the consistency of the transition effect and at the same time have a more soft and coherent dynamic effect.

[0067] Since the playing time of the transition animation is fixed, the faster the edge moving speed of the edge corresponding to the edge, the longer the distance of the edge moving, and the user will more obviously see the edge moving. Therefore, in the scenario where the edge moving speed of each edge corresponding to the target image frame is different, the area of the region corresponding to the four edges of the target image frame in the contour region is also different, which further makes the user perceive that the contour region of the transition animation is more soft and coherent, and at the same time can realize flexible adjustment of the contour region.

[0068] Similarly, in the multiple target image frames, the area of the contour region corresponding to each target image frame is different. The faster the edge moving speed of the target image frame, the larger the area of the contour region, which further makes the user perceive the soft transition between the contour region and the display background of the image periphery, and improves the user's visual experience.

[0069] In summary, according to the edge moving speed of each edge corresponding to the target image frame, the region whose transparency needs to be adjusted is determined, which can further improve the display effect corresponding to the transition animation, realize a more smooth and coordinated connection transition in the process of interface switching, and the transition will not appear harsh. Thus, the visual experience of the user when using the mobile phone is improved.

[0070] The electronic device provided in the embodiments of the present application can include a mobile phone, a smart watch, a tablet computer, a foldable electronic device, a desktop computer, a laptop computer, a handheld computer, a notebook computer, an Ultra-Mobile Personal Computer (UMPC), a netbook, a cellular phone, a Personal Digital Assistant (PDA), an Augmented Reality (AR) device, a Virtual Reality (VR) device, an Artificial Intelligence (AI) device, a wearable device, a vehicle-mounted device, and the like, which have a communication capability. The embodiments of the present application do not specially limit the specific type of the electronic device.

[0071] Moreover, the operating system installed in the electronic device includes, but is not limited to or other operating systems. The embodiments of the present application do not specially limit the specific type of the electronic device and the type of the operating system installed in the electronic device. Those skilled in the art can determine the type of the electronic device and the installed operating system according to actual needs, and these designs do not exceed the protection scope of the embodiments of the present application.

[0072] The electronic device in the embodiments of the present application can be implemented through a mobile phone 100 in FIG. 2. FIG. 2 shows a hardware structure schematic diagram of a mobile phone provided in the embodiments of the present application.

[0073] As shown in FIG. 2, the mobile phone 100 can include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a loudspeaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, and the like.

[0074] The sensor module 180 can include a pressure sensor 180A, a gyro sensor 180B, a barometric sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, and the like.

[0075] It can be understood that the structure illustrated in the embodiments of the present application does not constitute a specific limitation on the mobile phone 100. In other embodiments of the present application, the mobile phone 100 can include more or fewer components than illustrated, or combine certain components, or split certain components, or different component arrangements. The illustrated components can be implemented in hardware, software, or a combination of software and hardware.

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

[0077] The controller can be the nerve center and command center of the mobile phone 100. The controller can generate operation control signals according to instruction operation codes and timing signals to complete the control of fetching and executing instructions.

[0078] The memory in the processor 110 can also be provided for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory can save instructions or data that the processor 110 has just used or repeatedly uses. If the processor 110 needs to use the instructions or data again, it can be directly called from the memory. This avoids repeated access and reduces the waiting time of the processor 110, thus improving the efficiency of the system.

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

[0080] The wireless communication function of the mobile phone 100 can be implemented by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor, and the baseband processor, etc.

[0081] The antenna 1 and the antenna 2 are used for transmitting and receiving electromagnetic wave signals. Each antenna in the mobile phone 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be multiplexed to improve the utilization of the antennas. For example, the antenna 1 can be multiplexed as a diversity antenna of a wireless local area network. In some other embodiments, the antennas can be used in combination with a tuning switch.

[0082] The mobile communication module 150 can support 2G / 3G / 4G / 5G / future communication networks or more advanced communication standards, which are not limited in the present application.

[0083] The wireless communication module 160 can provide solutions for wireless communication including wireless local area networks (WLAN) (e.g., wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR) technology, etc. The wireless communication module 160 can 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, frequency-modulates and filters the electromagnetic wave signals, and transmits the processed signals to the processor 110. The wireless communication module 160 can also receive signals to be transmitted from the processor 110, frequency-modulate them, amplify them, and radiate them as electromagnetic waves via the antenna 2.

[0084] The phone 100 implements display functions through a GPU, a display screen 194, an application processor, etc. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 can include one or more GPUs that execute program instructions to generate or change display information.

[0085] The display screen 194 is used to display user interfaces, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a Miniled, a MicroLed, a Micro-oLed, a quantum dot light emitting diode (QLED), etc. In some embodiments, the phone 100 can include 1 or N display screens 194, where N is a positive integer greater than 1.

[0086] The phone 100 can implement a shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, an application processor, etc.

[0087] ISP is used to process the data feedback by the camera 193. For example, when taking a photo, the shutter is opened, the light is transmitted to the camera photosensitive element through the lens, the light signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to the ISP for processing, and is converted into an image visible to the naked eye. ISP can also optimize the noise, brightness, and skin color of the image. ISP can also optimize the exposure, color temperature, and other parameters of the shooting scene. In some embodiments, the ISP can be provided in the camera 193.

[0088] The mobile phone 100 can realize audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the earphone interface 170D, and the application processor, etc. For example, music playing, recording, etc.

[0089] In some examples, the display screen in the mobile phone can display a first interface, and in response to an interface switching operation for the first interface, display a transition animation. The transition animation is a dynamic picture displayed in the process of switching from the first interface to the second interface. The target image frame in the transition animation includes an outline area, the transparency of the outline area gradually increases along a target direction, the target direction is a direction from the inside of the target image frame to the outside, and the outline area is determined according to the edge movement speed of each edge in the target image frame during the playing of the transition animation. After displaying the transition animation, the electronic device can also display the second interface to complete the process of switching from the first interface to the second interface.

[0090] The software system of the mobile phone 100 can adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture. The embodiment of the application takes the Android system with a layered architecture as an example to exemplarily illustrate the software structure of the mobile phone 100.

[0091] FIG. 3 is a schematic diagram of the software structure of the mobile phone according to an embodiment of the application.

[0092] The layered architecture divides the software into several layers, and each layer has a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom, the application program layer, the application program framework layer, the Android runtime and the system library, and the kernel layer.

[0093] The application program layer can include a series of application program packages.

[0094] As shown in FIG. 3, the application program package can include camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, etc.

[0095] The application framework layer provides application programming interfaces (APIs) and programming frameworks for applications in the application layer. The application framework layer includes some pre-defined functions.

[0096] As shown in FIG. 3, the application framework layer can include a window manager, a content provider, a view system, a telephony manager, a resource manager, a notification manager, etc.

[0097] The window manager is used to manage window programs. The window manager can acquire a display screen size, determine whether there is a status bar, lock a screen, and capture a screen, etc.

[0098] The content provider is used to store and acquire data, and make the data accessible to applications. The data can include videos, images, audios, dialed and received calls, browsing history and bookmarks, a phone book, etc.

[0099] The view system includes visual controls, such as a control for displaying text, a control for displaying pictures, etc. The view system can be used to build an application. A display interface can be composed of one or more views. For example, a display interface including a short message notification icon can include a view for displaying text and a view for displaying pictures.

[0100] The telephony manager is used to provide communication functions of the mobile phone 100. For example, management of a call state (including call connection, call hang-up, etc.).

[0101] The resource manager provides various resources for applications, such as localized strings, icons, pictures, layout files, video files, etc.

[0102] The notification manager enables an application to display notification information in a status bar. The notification manager can be used to convey a message of the notification type, which can automatically disappear after a short stay without user interaction. For example, the notification manager is used to notify a download completion, a message reminder, etc. The notification manager can also be a notification appearing in a system top status bar in a form of a graph or a scrolling bar text, such as a notification of an application running in the background, or a notification appearing on a screen in a form of a dialogue window. For example, a text information is prompted in a status bar, a prompt sound is emitted, an electronic device is vibrated, an indicator light is blinked, etc.

[0103] The Android Runtime includes a core library and a virtual machine. The Android Runtime is responsible for scheduling and management of the Android system.

[0104] The core library includes two parts: one part is a function function called by the java language, and the other part is the core library of the Android.

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

[0106] The system library can include a plurality of functional modules. For example, a display module and a processing module.

[0107] In some examples, the display module is configured to display a first interface. The processing module is configured to, in response to an interface switching operation on the first interface, generate a transition animation according to a target image frame. The target image frame includes a contour region, a transparency corresponding to the contour region gradually increases along a target direction, the target direction is a direction from inside to outside of the target image frame, and the contour region is determined according to an edge movement speed of each edge in the target image frame during playing of the transition animation. The display module is configured to display the transition animation and display a second interface after displaying the transition animation, so as to complete a process of switching from the first interface to the second interface.

[0108] The kernel layer is a layer between hardware and software. The kernel layer at least includes a display driver, a camera driver, an audio driver, and a sensor driver.

[0109] The display method provided in the embodiments of the present application can make the display of the transition animation more smooth and soft, and the connection more close, so as to improve the user experience. In order to make the person skilled in the art better understand the display method in the embodiments of the present application, the application scenarios of the transition animation are briefly introduced below. The transition animation (which can also be referred to as transition animation effect, transition effect, etc.) can correspond to a plurality of image frames (which can also be referred to as video frames, etc.). The mobile phone can display the transition animation in the process of switching from a first interface to a second interface. It should be understood that the first interface is a to-be-switched interface, and the second interface is a switched interface.

[0110] It should be noted that the transition animation involved in the embodiments of the present application can be understood as an animation effect used in the process of switching between different interfaces, or an animation effect used in the process of converting between different modes, etc. The embodiments of the present application do not make specific limitations on this.

[0111] In the specific scenario of switching between different modes, the modes in the embodiments of the present application include but are not limited to: a screen-off mode, a lock screen mode, and an unlock mode. For example, the transition animation of the screen-off mode can be a dynamic picture played on the display screen of the mobile phone when the desktop screen mode is switched to the screen-off mode. The transition animation of the lock screen mode can be a dynamic picture played on the display screen of the mobile phone when the screen-off mode is switched to the lock screen mode. The transition animation of the unlock mode can be a dynamic picture played on the display screen of the mobile phone when the lock screen mode is switched to the desktop mode. The embodiments of the present application do not make specific limitations on the mode type corresponding to the mode.

[0112] In specific scenarios of switching between different interfaces, the interface switching scenarios in the embodiments of the present application include but are not limited to starting application scenarios, exiting application scenarios, and in-app transition scenarios.

[0113] In some embodiments of the present application, the transition animation includes a first transition animation, a second transition animation, and a third transition animation. Different types of transition animations can be classified according to different display scenarios.

[0114] Specifically, in the scenarios of starting an application or exiting an application, the phone can display a first transition animation. The first transition animation can have a dynamic effect of transitioning from an application icon (or an application card) in a first interface to a second interface (such as an application interface), or a dynamic effect of transitioning from the application interface to the application icon (or the application card), that is, the application interface can appear or disappear from the position corresponding to the application icon (or the application card).

[0115] In the scenarios of starting an application or exiting an application, the phone can display a second transition animation. The second transition animation can have a dynamic effect of transitioning from a preset position in the first interface to the application interface, or a dynamic effect of transitioning from the application interface to the preset position in the second interface, that is, the application interface can appear from the preset position of the first interface or disappear from the preset position of the second interface, and the preset positions of the first interface and the second interface are different from the position corresponding to the application icon (or the application card).

[0116] In the in-app transition scenarios, the phone can display a third transition animation. The third transition animation can have a fade-in dynamic effect of transitioning the application interface from one side of the first interface to the other side, or a fade-out dynamic effect of transitioning the application interface from one side of the first interface to the other side.

[0117] The first transition animation, the second transition animation, and the third transition animation will be described below.

[0118] In an implementable manner, in the scenarios of starting an application or exiting an application, the phone can display a first interface, which can include at least one application corresponding application control, the at least one application including a target application, and the application control can include an application icon and an application card. The phone can display a first transition animation in response to a switching operation on the first interface. The switching operation can be a triggering operation on the application control corresponding to the target application in the first interface, the first transition animation can be a zoom-in animation, and the image frames in the zoom-in animation are gradually zoomed in from a first position in the first interface. The first position can be associated with the position of the application control corresponding to the target application. The phone can further display a second interface after displaying the transition animation, and the second interface can include an application interface corresponding to the target application.

[0119] For example, the target application is a weather application. Referring to (A) of FIG. 4, a front view of a mobile phone is provided. The main screen interface of the mobile phone displays a first interface, and the first interface includes a weather card control 401. A user can click the weather card control 401 to trigger the entering of a second interface, and the second interface can be a weather interface corresponding to the weather application. As shown in (D) of FIG. 4, the mobile phone displays the weather interface in response to the click operation on the weather card control 401. It can be seen that, in the process of switching from the first interface to the second interface, the mobile phone can display a transition animation, which is a dynamic picture displayed in the process of switching from the first interface to the second interface, and the transition animation is a zoom-in animation.

[0120] Specifically, as shown in (A) of FIG. 4 to (D) of FIG. 4, the transition animation is realized by zooming in on the weather interface 402 corresponding to the weather application. It can be seen that the image frames in the zoom-in animation are gradually zoomed in from the position corresponding to the weather card control 401 in the first interface to cover the entire display screen to display the weather interface 402.

[0121] It should be noted that the scenario of exiting the application is opposite to the scenario of starting the application. The mobile phone can display a first transition animation in response to a switching operation on the first interface. The switching operation can be an exit operation on the application interface in the first interface, the first transition animation can be a zoom-out animation, and the image frames in the zoom-out animation can be gradually zoomed out from covering the entire display screen to a first position in the first interface, and the first position is associated with the position of the application control corresponding to the target application.

[0122] In another implementable manner, in the scenario of starting the application or exiting the application, the mobile phone can display a first interface, and the first interface can include at least one application control corresponding to at least one application, the at least one application including a target application, and the application control can include an application icon and an application card. The mobile phone can display a second transition animation in response to a switching operation on the first interface. The switching operation can be a triggering operation on the application control corresponding to the target application in the first interface, the second transition animation can be a zoom-in animation, and the image frames in the zoom-in animation are gradually zoomed in from a preset position in the first interface. The mobile phone can further display a second interface after displaying the transition animation, and the second interface can include an application interface corresponding to the target application.

[0123] The preset position can be pre-set, and the preset position can be different from the first position, i.e., not associated with the position of the application control corresponding to the target application. That is, the image frames in the second transition animation can suddenly appear at other positions in the first interface.

[0124] For example, the target application is a memo application. Referring to (A) of FIG. 5, the first interface is displayed on the home screen of the mobile phone, and the first interface includes an application icon 501 corresponding to the memo application. The user can click the application icon 501 corresponding to the memo application to trigger the entering of the second interface, which can be a memo interface corresponding to the memo application. As shown in (D) of FIG. 5, the mobile phone displays the memo interface in response to the click operation on the application icon 501 corresponding to the memo application. It can be seen that, in the process of switching from the first interface to the second interface, the mobile phone can display a second transition animation, which is a dynamic picture displayed in the process of switching from the first interface to the second interface, and the transition animation is an enlargement animation.

[0125] Specifically, as shown in (A) of FIG. 5 to (D) of FIG. 5, the transition animation is realized by performing an enlargement operation on the memo interface 502 corresponding to the memo application. It can be seen that the image frames in the enlargement animation are gradually enlarged from a preset position in the first interface to a preset interface size, and of course can be gradually enlarged to cover the entire display screen to display the memo interface 502.

[0126] It should be noted that the scenario of exiting the application is opposite to the scenario of starting the application described above. The mobile phone can display a second transition animation in response to a switching operation on the first interface. The switching operation can be an exit operation on the application interface in the second interface, and the second transition animation can be a reduction animation. The image frames in the reduction animation can be gradually reduced from the preset interface size to the preset position in the second interface, or from covering the entire display screen to the preset position in the second interface.

[0127] In another implementation manner, the same application transition scenario includes using a function in the application or exiting the function in the application. In the scenario of using the function in the application, the mobile phone can display a first interface. The first interface can include at least one function control corresponding to the target application, and the at least one function control includes a target function. The mobile phone can display a third transition animation in response to a switching operation on the first interface. The switching operation can be a trigger operation on the function control corresponding to the target function in the first interface, and the third transition animation can be an fade-in animation. The image frames in the fade-in animation are gradually displaced from one side to the other side of the first interface until covering the entire display screen. The mobile phone can further display a second interface after displaying the transition animation, and the second interface can include a function interface corresponding to the target function.

[0128] For example, the target application is a settings application, and the target function is a storage function. Referring to (A) of FIG. 6, the first interface is displayed on the home screen of the mobile phone, and the first interface includes a function control 601 corresponding to the storage function. The user can click the function control 601 to trigger the second interface, and the second interface can be a function interface corresponding to the storage function. As shown in (D) of FIG. 6, the mobile phone displays the function interface corresponding to the storage function in response to the click operation on the function control 601. It can be seen that during the switching from the first interface to the second interface, the mobile phone can display a transition animation, which is a dynamic picture displayed during the switching from the first interface to the second interface, and the transition animation is a fade-in animation.

[0129] Specifically, as shown in (A) of FIG. 6 to (D) of FIG. 6, the transition animation is realized by performing a displacement operation on the function interface 602. The image frames in the fade-in animation are gradually displaced from the right side of the first interface to the left side until covering the entire display screen, so as to display the function interface 602 corresponding to the storage function.

[0130] It should be noted that the scenario of exiting the function in the application is opposite to the scenario of starting the function in the application. The mobile phone can display a third transition animation in response to the switching operation on the first interface. The switching operation can be an exit operation on the function interface in the first interface, and the third transition animation can be a fade-out animation, and the image frames in the fade-out animation can be gradually displaced from the left side of the first interface to the right side until disappearing.

[0131] In some embodiments of the present application, the mobile phone can display the above-mentioned transition animation in response to the switching operation on the first interface. The switching operation is used to indicate starting the target application or exiting the target application. The transition animation is a scaling animation, and the scaling animation is used to present an enlarged display effect or a reduced display effect corresponding to the target image frame.

[0132] Alternatively, the switching operation is used to indicate interface switching in the target application. The transition animation is a displacement animation, and the displacement animation is used to present a fade-in display effect or a fade-out display effect corresponding to the target image frame.

[0133] In one implementation manner, the scaling animation (scale transition) is used to realize the magnification effect or the reduction effect of the target image frame. The scaling animation can include a reduction animation or an enlargement animation. The reduction animation can be used to realize the magnification effect of the target image frame, and the enlargement animation can be used to realize the reduction effect of the target image frame. The displacement animation (position transition) is used to realize the fade-in effect or the fade-out effect of the target image frame. It can be understood that the displacement animation can also be used to realize the translation effect of the target image frame.

[0134] It should be noted that the scaling animation and the moving animation are merely illustrative, and the transition animation can also include a rotating animation, a custom animation, etc. The embodiments of the present application do not limit the type of the animation corresponding to the transition animation, nor the specific implementation form of the animation.

[0135] In this way, the embodiments of the present application can display the transition animation in the process of starting the target application, exiting the target application, or switching the interface in the target application. The transition animation can be a scaling animation or a moving animation. In this way, the transition animation can be displayed in different interface switching scenarios corresponding to the application, so that the user can perceive that the outline area of the transition animation is more soft and coherent in various interface switching scenarios, thereby improving the visual experience of the user.

[0136] In some embodiments of the present application, the transition animation can include at least one target image frame. In the scenarios of starting the application and using the function in the application, in order to transition from the first interface to the second interface, the target image frame needs to be generated based on the interface content information of the second interface. In the scenarios of exiting the application and exiting the function in the application, in order to make the first interface disappear and display the second interface, the target image frame needs to be generated based on the interface content information of the first interface. The target image frame can include one layer. The mobile phone can draw in the one layer based on the interface content information of the second interface or the interface content information of the first interface to generate the target image frame.

[0137] Specifically, the mobile phone can draw the target image frame, which is generated according to the interface content information of the first interface or the interface content information of the second interface. The target image frame can include one layer.

[0138] In an implementable manner, the target image frame can be generated according to the interface content information of the second interface. The transition animation is used to present the zoom-in display effect or the fade-in display effect corresponding to the target image frame. The last image frame of the transition animation is the same as the image content displayed by the second interface.

[0139] For example, in the process of starting the application, the target image frame can be generated according to the interface content information of the application interface. Continuing to refer to (A)-(D) in FIG. 4, the transition animation is used to present the zoom-in display effect corresponding to the target image frame. Continuing to refer to (D) in FIG. 4, the last image frame of the transition animation is the same as the image content displayed by the application interface.

[0140] For another example, in the process of using the function in the application, the target image frame can be generated according to the interface content information of the function interface. Continuing to refer to (A)-(D) in FIG. 6, the transition animation is used to present the fade-in display effect corresponding to the target image frame. Continuing to refer to (D) in FIG. 6, the last image frame of the transition animation is the same as the image content displayed by the function interface.

[0141] In another implementable manner, the target image frame can be generated according to the interface content information of the first interface, and the transition animation is used to present a zoom-out display effect or a fade-out display effect corresponding to the target image frame, and a first image frame of the transition animation is the same as image content displayed by the first interface.

[0142] For example, in the process of exiting the application, the target image frame can be generated according to the interface content information of the application interface, and continuing to refer to (D)-(A) in FIG. 4, the transition animation is used to present a zoom-out display effect corresponding to the target image frame. Continuing to refer to (D) in FIG. 4, a first image frame of the transition animation is the same as image content displayed by the application interface.

[0143] For another example, in the process of exiting a function in the application, the target image frame can be generated according to the interface content information of the function interface, and continuing to refer to (D)-(A) in FIG. 6, the transition animation is used to present a fade-out display effect corresponding to the target image frame. Continuing to refer to (D) in FIG. 6, a first image frame of the transition animation is the same as image content displayed by the function interface.

[0144] In this way, the embodiments of the present application can draw the target image frame, and the target image frame includes one layer. That is, the image needs to be drawn only once in one layer to generate the target image frame, and the outline area of the target image frame presents a transparency gradient. In the process of displaying the transition animation, the performance power consumption of the mobile phone is reduced without performing multiple image drawing processes on one image on the basis of guaranteeing the visual effect of the user.

[0145] Meanwhile, in the scenario where the target image frame is generated based on the interface content information of the second interface, the transition animation is used to present a zoom-in display effect or a fade-in display effect corresponding to the target image frame. In the scenario where the target image frame is generated based on the interface content information of the first interface, the transition animation is used to present a zoom-out display effect or a fade-out display effect corresponding to the target image frame. In this way, the transition animation can be applied to the different display scenarios, and in the different display scenarios, the user can perceive that the outline area of the transition animation is more soft and coherent, thereby improving the visual experience of the user.

[0146] In some embodiments of the present application, as shown in FIG. 7, the target image frame in the transition animation includes a contour region, and the transparency corresponding to the contour region gradually increases along a direction from the inside of the target image frame to the outside. During the process of drawing the target image frame, the mobile phone can obtain the edge moving speed of each edge of the target image frame (step 701). The mobile phone can also determine the first region and the second region corresponding to the target image frame according to the edge moving speed of each edge of the target image frame (step 702), the first region being the region close to each edge inside the target image frame, and the second region being the region close to each edge outside the target image frame. The mobile phone can also adjust the transparency of the first region and the second region to generate an updated target image frame, the contour region in the updated target image frame including the adjusted first region and the second region (step 703), and the target image frame in the transition animation being the updated target image frame.

[0147] For example, as shown in (A) of FIG. 8, the target image frame obtained by the mobile phone can be generated according to the application interface information corresponding to the weather application. The mobile phone can determine the first region and the second region corresponding to the target image frame according to the edge moving speed of each edge of the target image frame. As shown in (B) of FIG. 8, the first region is the region close to each edge inside the target image frame, and the second region is the region close to each edge outside the target image frame. As shown in (C) of FIG. 8, the mobile phone can also adjust the transparency of the first region and the second region to generate an updated target image frame, the contour region in the updated target image frame including the adjusted first region and the second region. In this way, the transparency of the contour region in the target image frame can gradually increase, i.e., the contour region gradually becomes transparent along the target direction, so that the difference between the contour region of the target image frame and the display background around the image becomes smaller, facilitating the transition animation to have a more soft and coherent dynamic effect.

[0148] In some embodiments of the present application, during the process of adjusting the transparency of the first region and the second region, the mobile phone can gradually increase the transparency along the target direction. For example, the transparency of the first region is gradually adjusted from 100% to 50% along the target direction, and the transparency of the second region is gradually adjusted from 50% to 0 along the target direction. For another example, the transparency of the contour region including the first region and the second region can be gradually adjusted from 100% to 0 along the target direction. It should be noted that the specific implementation of adjusting the transparency is not limited in the embodiments of the present application.

[0149] Thus, the embodiment of the present application can determine the first region and the second region corresponding to the target image frame according to the edge moving speed of each edge of the target image frame, the first region and the second region are respectively the regions close to each edge inside and outside the target image frame, and the first region and the second region can ensure that there is a sufficient region to present the transparent gradient effect. The first region and the second region can also be adjusted in transparency to make the outline of the image more soft. Since the user's eyes can more obviously perceive the position of the edge when identifying the speed of the moving object, the outline region can improve the visual effect of the user after the transparency adjustment, so that the user looks more smooth.

[0150] In some embodiments of the present application, as shown in FIG. 9, in the process of determining the first region and the second region corresponding to the target image frame according to the edge moving speed of each edge of the target image frame, the mobile phone can determine the feathering distance corresponding to each edge in the target image frame according to the edge moving speed of each edge of the target image frame (step 901). The mobile phone can also determine the first region according to the feathering distance (step 902), and the area of the region corresponding to the first region is positively correlated with the feathering distance. The mobile phone can also expand the pixel points corresponding to the first region along the target direction to obtain the second region (step 903).

[0151] Specifically, referring to (A) in FIG. 10, the mobile phone can determine the feathering distance corresponding to each edge in the target image frame according to the edge moving speed of each edge of the target image frame. The feathering distance can determine the first region inside the target image frame with the edge in the target image frame as the middle point. Referring to (B) in FIG. 10, the mobile phone determines the second region outside the target image frame. The distance between one end far away from the edge in the target image frame and the edge in the target image frame in the first region is equal to the feathering distance, and the distance between one end far away from the edge in the target image frame and the edge in the target image frame in the second region is equal to the feathering distance.

[0152] In some embodiments of the present application, the edge moving speed of each edge is the same, and the feathering distance corresponding to each edge is the same. The edge moving speed of each edge is different, and the feathering distance corresponding to each edge is different. The greater the feathering distance, the greater the area of the first region, and the smaller the feathering distance, the smaller the area of the first region.

[0153] In one implementation manner, the outline region includes the sub-outline region corresponding to each edge, and the greater the edge moving speed of each edge, the greater the area of the sub-outline region corresponding to each edge.

[0154] For example, referring to FIG. 11, when the target image frame in the transition animation gradually enlarges from the lower left corner of the screen, the edge movement speed of each edge corresponding to the target image frame is different, and the edge movement distance of the first edge 1110 and the second edge 1111 is greater than the edge movement distance of the third edge 1112 and the fourth edge 1113. Since the display time of the transition animation is fixed, the edge movement speed of the first edge 1110 and the second edge 1111 is greater than the edge movement speed of the third edge 1112 and the fourth edge 1113. Further, the feathering distance of the first edge 1110 and the second edge 1111 is greater than the feathering distance of the third edge 1112 and the fourth edge 1113. Therefore, the area of the first sub-contour region and the second sub-contour region is greater than the area of the third sub-contour region and the fourth sub-contour region.

[0155] It should be noted that the present application does not specifically limit the division of the area of the first sub-contour region and the second sub-contour region, and the division of the area of the third sub-contour region and the fourth sub-contour region.

[0156] In some embodiments of the present application, different types of transition animations can correspond to different contour regions. For example, the contour region of the target image frame in the scaling animation can be the area corresponding to the edges of the target image frame. The contour region of the target image frame in the panning animation can be the area corresponding to one side edge of the target image frame. It can be understood that since only one side edge of the target image frame moves in the panning animation, the area corresponding to the one side edge of the target image frame will present a transparency gradient effect.

[0157] In this way, each edge corresponds to a sub-contour region, and the greater the edge movement speed of each edge, the greater the area of the corresponding sub-contour region. In the scenario where the edge movement speed of each edge in the target image frame is different, the area of the contour region corresponding to the four edges of the target image frame is also different in the present application, which further enables the user to perceive that the contour region of the transition animation is more soft and coherent, and at the same time, enables flexible adjustment of the contour region.

[0158] In some embodiments of the present application, the mobile phone can perform pixel expansion of the pixel points corresponding to the first region outward along a direction perpendicular to the edge in the process of expanding the pixel points corresponding to the first region along the target direction to obtain the second region. The pixel point information corresponding to the pixel points in the second region is the same as the pixel point information corresponding to the pixel points in the first region.

[0159] In the present application, the feathering distance is calculated according to the edge movement speed of each edge, and the process of obtaining the edge movement speed of each edge in the target image frame will be exemplarily described below.

[0160] In some embodiments of the present application, the scaling animation can include a direct scaling animation and a displacement scaling animation. In the direct scaling animation, the target image frame can be directly scaled up or down. In the displacement scaling animation, the target image frame can be scaled up or down while being displaced.

[0161] In some implementable manners, the direct scaling animation includes a direct scaling up animation and a direct scaling down animation. In the direct scaling up animation, the target image frame is gradually scaled up from a first position in a first interface. In the direct scaling down animation, the target image frame is gradually scaled down to a first position in a second interface.

[0162] In some implementable manners, the displacement scaling animation includes a displacement scaling up animation and a displacement scaling down animation. In the displacement scaling up animation, the target image frame is gradually scaled up while being displaced from a first position to a second position in a first interface. In the displacement scaling down animation, the target image frame is gradually scaled down while being displaced from a second position to a first position in a second interface. The first position in the first interface and the first position in the second interface can be the same or different from the position of the application control corresponding to the target application.

[0163] For example, referring to (A) in FIG. 12, the target image frame can also be displaced from the first position to the second position in the first interface. Referring to (B)-(C) in FIG. 12, the target image frame can be gradually scaled up while being displaced to the second position until covering the entire display screen. Similarly, in the scaling down animation, the target image frame can also be gradually scaled down while being displaced or be displaced while being scaled down.

[0164] Thus, the scaling animation of the embodiments of the present application can include the direct scaling animation and the displacement scaling animation. In the direct scaling animation, the target image frame can be directly scaled up from a position or directly scaled down to a position. In the displacement scaling animation, the target image frame can be displaced while being scaled up or down. This can enable the user to perceive that the outline area of the animation is more soft and coherent in different types of scaling animation, thereby improving the visual experience of the user.

[0165] In some embodiments of the present application, when the transition animation is a displacement animation or a direct scaling animation, the edge movement speed corresponding to each edge in the target image frame is generally changed according to the change of the center movement speed corresponding to the center point position in the target image frame and the playing speed of the transition animation.

[0166] In some embodiments of the present application, when the transition animation is a displacement scaling animation, the edge movement speed corresponding to each edge in the target image frame is changed according to the change of the center movement speed corresponding to the center point position in the target image frame, the center movement direction, and the playing speed of the transition animation.

[0167] In an implementation, when the transition animation is a displacement animation or a direct scaling animation, i.e., the target image frame is directly displaced or directly scaled, the mobile phone can obtain the moving distance between the center point positions in adjacent image frames in the transition animation and the playing speed corresponding to the transition animation. The mobile phone can determine the center moving speed corresponding to the center point positions according to the moving distance. The mobile phone can further add the center moving speed and the playing speed corresponding to the transition animation to obtain the target moving speed of each vertex in the target image frame. Then, the mobile phone can perform average value calculation on the target moving speed of each vertex corresponding to each edge of the target image frame to obtain the edge moving speed of each edge of the target image frame.

[0168] In another implementation, when the transition animation is a displacement scaling animation, the mobile phone can obtain the moving distance between the center point positions in adjacent image frames in the transition animation, the moving direction of the center point positions, and the playing speed corresponding to the transition animation. The mobile phone can determine the center moving speed corresponding to the center point positions according to the moving distance. The mobile phone can further calculate the target moving speed of each vertex in the target image frame according to the moving direction of the center point positions and the center moving speed and the playing speed corresponding to the transition animation. Then, the mobile phone can perform average value calculation on the target moving speed of each vertex corresponding to each edge of the target image frame to obtain the edge moving speed of each edge of the target image frame.

[0169] In the embodiments of the present application, the playing speed of the transition animation can be obtained according to the scaling ratio or the displacement ratio and the preset time interval. The preset time interval can be the time interval between each image frame in the scaling or displacement process. For example, the preset time interval can be 33 milliseconds, 50 milliseconds, or 100 milliseconds, etc. The specific value corresponding to the preset time interval is not limited in the embodiments of the present application.

[0170] For example, the mobile phone can determine the center moving speed corresponding to the center point positions according to the moving distance. Specifically, the center moving speed can be obtained by dividing the moving distance between the center point positions in adjacent image frames by the time interval between the adjacent image frames. For example, the center moving speed is (V x , V y ), and the unit of the center moving speed is px / s. The origin can be set at the upper left corner of the mobile phone, the X axis is positive to the right, and the Y axis is positive downward. The moving direction of the center point positions is (V x / |V x |, V y / |V y |). The playing speed of the transition animation (S x1, S y1 ) and the screen size of the display screen, to obtain the updated playing speed of the transition animation (S x2 , S y2 ). The unit of the updated playing speed of the transition animation is px / s. It can be understood that the initial playing speed of the transition animation and the unit of the center moving speed are inconsistent, and the playing speed of the transition animation needs to be normalized.

[0171] When the transition animation is a translation animation or a scaling animation, that is, the target image frame directly translates or directly scales, the mobile phone can add the center moving speed and the playing speed corresponding to the transition animation to obtain the target moving speed of each vertex in the target image frame. Referring to (A) in FIG. 13, the speed of point A is (S x2 + V x , S y + V y2 ), the speed of point B is (S x2 + V x , S y2 + V y ).

[0172] When the transition animation is a translation scaling animation, the mobile phone can calculate the target moving speed of each vertex in the target image frame according to the moving direction of the center point position and the center moving speed and the playing speed corresponding to the transition animation.

[0173] Referring to (B) in FIG. 13, for point A, the moving direction of the center point position is opposite to the scaling direction corresponding to the scaling animation, that is, the playing speed corresponding to the transition animation needs to be subtracted from the center moving speed, such as the speed of point A (S x2 -V x , S y2 -V y ). For point B, the moving direction of the center point position in the X-axis direction is the same as the scaling direction corresponding to the scaling animation, that is, the playing speed corresponding to the transition animation needs to be added to the center moving speed. The moving direction of the center point position in the Y-axis direction is opposite to the scaling direction corresponding to the scaling animation, that is, the playing speed corresponding to the transition animation needs to be subtracted from the center moving speed, such as the speed of point B (S x2 + V x , S y2 -V y ). For point C, the moving direction of the center point position in the X-axis direction is opposite to the scaling direction corresponding to the scaling animation, that is, the playing speed corresponding to the transition animation needs to be subtracted from the center moving speed. The moving direction of the center point position in the Y-axis direction is the same as the scaling direction corresponding to the scaling animation, that is, the playing speed corresponding to the transition animation needs to be added to the center moving speed, such as the speed of point C (S x2 -V x , Sy2 +V y For point D, the moving direction of the center point position is the same as the zoom-in direction corresponding to the zoom-in animation, that is, the playing speed corresponding to the transition animation is added to the center moving speed, such as the speed of point D is (S x2 +V x , S y2 +V y ).

[0174] In some embodiments of the present application, the distances between all points on each edge in the target image frame and the center point are linearly changed, the mobile phone can calculate the target moving speeds of the four vertices in the edge respectively, and then weighted calculation is performed on the target moving speeds of the four vertices to obtain the edge moving speeds of each edge in the target image frame.

[0175] In an implementable manner, after the target moving speeds of the vertices corresponding to each edge in the target image frame are obtained, average value calculation can be performed on the target moving speeds of the vertices corresponding to each edge in the target image frame to obtain the edge moving speeds of each edge in the target image frame.

[0176] For example, referring to (A) in FIG. 13, average value calculation is performed on the speeds of points A and B to obtain the edge moving speed of the edge in the target image frame. Referring to (B) in FIG. 13, average value calculation is performed on the speeds of points A, B, C and D to obtain the edge moving speeds of the four edges in the target image frame.

[0177] In another implementable manner, after the target moving speeds of the vertices corresponding to each edge in the target image frame are obtained, the target moving speeds of the vertices corresponding to each edge in the target image frame can also be assigned with corresponding weight proportions.

[0178] For example, the vertices corresponding to longer moving distances are set with a weight proportion of 0.7, and the vertices corresponding to shorter moving distances are set with a weight proportion of 0.3. The embodiments of the present application do not limit the specific values of the weight proportions.

[0179] In another implementable manner, the target moving speeds of all points on each edge in the target image frame can be the same or different. The mobile phone can also determine target points according to a preset rule, and perform weighted calculation on the target moving speeds corresponding to the target points to obtain the edge moving speeds of each edge in the target image frame. The preset rule can include determining the points corresponding to the maximum target moving speed and the minimum target moving speed on each edge as the target points. It should be noted that the embodiments of the present application do not limit the determination process of the edge moving speed, and also do not specifically limit the preset rule.

[0180] In some embodiments of the present application, in the process of determining the feathering distance corresponding to each edge in the target image frame according to the edge moving speed of each edge of the target image frame, the feathering distance corresponding to each edge in the target image frame can be obtained according to the edge moving speed corresponding to each edge and a preset time threshold. The preset time threshold can be set based on the shutter speed in the camera. For example, the preset time threshold can be 1 second, 2 seconds, 4 seconds, 8 seconds, 15 seconds, 30 seconds, 50 seconds, etc. The embodiments of the present application do not specifically limit the preset time threshold.

[0181] In some schemes, the embodiments of the present application can be combined, and the combined scheme is implemented. Optionally, some operations in the flow of each method embodiment are optionally combined, and / or the order of some operations is optionally changed. Moreover, the execution order between the steps of each flow is only exemplary, and does not constitute a limitation on the execution order between the steps, and other execution orders between the steps can also be used. It is not intended to indicate that the execution order is the only execution order in which these operations can be performed.

[0182] A person of ordinary skill in the art can think of various ways to reorder the operations described in the embodiments of the present application. In addition, it should be pointed out that the process details related to a certain embodiment of the present application are also applicable in a similar manner to other embodiments, or different embodiments can be combined for use.

[0183] In addition, some steps in the method embodiments can be equivalently replaced by other possible steps. Alternatively, some steps in the method embodiments can be optional and can be deleted in some use scenarios. Alternatively, other possible steps can be added to the method embodiments.

[0184] Moreover, each method embodiment can be implemented individually or in combination.

[0185] The embodiments of the present application also provide a display device, which comprises a display module and a processing module. The display module is configured to display a first interface; the processing module is configured to draw a target image frame. The processing module is configured to generate a transition animation according to the target image frame. The transition animation is a dynamic picture displayed in the process of switching from the first interface to a second interface, and the target image frame in the transition animation comprises an outline area. The transparency of the outline area along a target direction is increased, the target direction is a direction from the inside to the outside of the target image frame, and the outline area is determined according to the edge moving speed of each edge of the target image frame in the process of playing the transition animation. The display module is further configured to display the transition animation. The display module is further configured to display the second interface.

[0186] The embodiment of the present application further provides an electronic device, which can be the mobile phone described above, as shown in FIG. 14. The mobile phone can include one or more processors 1410, a memory 1420 and a communication interface 1430.

[0187] The memory 1420 and the communication interface 1430 are coupled with the processor 1410. For example, the memory 1420, the communication interface 1430 and the processor 1410 can be coupled together through a bus 1440.

[0188] The communication interface 1430 is configured to perform data transmission with other devices. The memory 1420 stores computer program code. The computer program code includes computer instructions, which, when executed by the processor 1410, cause the electronic device to perform the related method steps in the embodiment of the present application.

[0189] The processor 1410 can be a processor or a controller, for example, a central processing unit (CPU), a general-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, transistor logic devices, hardware components or any combination thereof. The processor can implement or execute the various exemplary logical blocks, modules and circuits described in combination with the present disclosure. The processor can also be a combination of computing functions, such as one or more microprocessor combinations, combinations of DSP and microprocessor, etc.

[0190] The bus 1440 can be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus, etc. The bus 1440 described above can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, only one thick line is shown in FIG. 14, but it does not mean that there is only one bus or only one type of bus.

[0191] The embodiment of the present application further provides an electronic device, which includes a memory, one or more processors; the memory is coupled with the processor; wherein the memory stores computer program code, and the computer program code includes computer instructions, which, when executed by the processor, cause the electronic device to perform the related method steps in the above method embodiment.

[0192] The embodiment of the present application further provides a communication device, which comprises a memory and one or more processors; the memory is coupled with the processors; wherein the memory stores computer program codes, the computer program codes comprise computer instructions, and when the computer instructions are executed by the processors, the communication device executes the related method steps in the above method embodiments.

[0193] The embodiment of the present application further provides a computer readable storage medium, which stores computer program codes, and when the above processor executes the computer program codes, the electronic device executes the related method steps in the above method embodiments.

[0194] The embodiment of the present application further provides a computer program product, which comprises instructions, and when the instructions are run on the computer or the processor, the computer or the processor executes the related method steps in the above method embodiments.

[0195] The embodiment of the present application further provides a chip system, which comprises a processor and a memory; the memory is used for storing programs or instructions, and when the programs or instructions are executed by the processor, the chip system realizes the method in any of the above method embodiments.

[0196] Optionally, the processor in the chip system can be one or more. The processor can be realized by hardware or software. When realized by hardware, the processor can be a logic circuit, an integrated circuit, etc. When realized by software, the processor can be a general-purpose processor, which realizes by reading the software codes stored in the memory.

[0197] Optionally, the memory in the chip system can also be one or more. The memory can be integrated with the processor or set separately from the processor, and the embodiment of the present application is not limited. Exemplarily, the memory can be a non-transient processor, for example, a read-only memory (ROM), which can be integrated with the processor on the same chip or set on different chips, and the embodiment of the present application does not make specific limitation on the type of the memory and the setting mode of the memory and the processor.

[0198] For example, the chip system can be a field programmable gate array (FPGA), can be an application specific integrated circuit (ASIC), can also be a system on chip (SoC), can also be a central processor unit (CPU), can also be a network processor (NP), can also be a digital signal processor (DSP), can also be a micro controller unit (MCU), can also be a programmable logic device (PLD) or other integrated chip.

[0199] The electronic device, computer storage medium or computer program product provided in the application are used for executing the corresponding method provided in the above, and thus the beneficial effects that can be achieved are referable to the beneficial effects in the corresponding method provided in the above, and will not be described herein again.

[0200] Through the description of the above embodiments, those skilled in the art can clearly understand that, for the convenience and brevity of description, only the division of the above functional modules is taken as an example for illustration, and in actual application, the above functions can be completed by different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above.

[0201] In several embodiments provided in the application, it should be understood that the disclosed device and method can be implemented in other ways. For example, the device embodiments described above are only schematic, for example, the division of the modules or units is only a logical function division, and actual implementation can have another division manner, for example, a plurality of units or components can be combined or integrated into another device, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the units shown or discussed can be indirect coupling or communication connection through some interface, device or unit, and can be electrical, mechanical or other forms.

[0202] The units described as separate components can or can not be physically separate, and the components shown as units can be one physical unit or multiple physical units, and can be located in one place or distributed in multiple different places. According to actual needs, part or all of the units can be selected to achieve the purpose of the embodiment scheme.

[0203] In addition, each function unit in each embodiment of the present application can be integrated in one processing unit, or each unit can be physically present separately, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of a software function unit.

[0204] When the integrated unit is realized in the form of a software function unit and sold or used as an independent product, it can be stored in a readable storage medium. Based on such understanding, the technical solutions of the embodiments of the present application can be embodied in the form of a software product in essence or in the form of a part or all of the technical solutions of the present application, and the software product is stored in a storage medium, including a plurality of instructions for causing an apparatus (which can be a single-chip microcomputer, a chip, etc.) or a processor to execute all or part of the steps of the method of each embodiment of the present application. The foregoing storage medium includes a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various storage medium capable of storing program codes.

[0205] The above is only a specific embodiment of the present application, but the protection scope of the present application is not limited thereto, and any change or replacement within the technical scope disclosed in the present application should be covered in the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A display method, characterized in that, Applied to electronic devices, including: Display the first screen; In response to a switching operation on the first interface, a transition animation is displayed. The transition animation is a dynamic scene displayed during the switching from the first interface to the second interface. The target image frame in the transition animation includes a contour region. The transparency of the contour region increases along the target direction. The target direction is the direction from the inside of the target image frame to the outside. The contour region is determined according to the edge movement speed of each edge of the target image frame during the playback of the transition animation. The second interface is displayed.

2. The method according to claim 1, characterized in that, The contour region includes sub-contour regions corresponding to each edge. The greater the edge movement speed corresponding to each edge, the larger the area of ​​the sub-contour region corresponding to each edge.

3. The method according to claim 1 or 2, characterized in that, The method further includes: The target image frame is drawn, and the target image frame is generated based on the interface content information of the first interface or the interface content information of the second interface. The target image frame includes a layer.

4. The method according to claim 3, characterized in that, The target image frame is generated based on the interface content information of the second interface; the transition animation is used to present the magnified display effect or fade-in display effect corresponding to the target image frame, and the last image frame of the transition animation is the same as the image content displayed on the second interface.

5. The method according to claim 3, characterized in that, The target image frame is generated based on the interface content information of the first interface; the transition animation is used to present the shrinking display effect or fade-out display effect corresponding to the target image frame, and the first image frame of the transition animation is the same as the image content displayed on the first interface.

6. The method according to any one of claims 1-5, characterized in that, The switching operation is used to indicate whether to launch or exit the target application. The transition animation is a scaling animation, which is used to present the zoom-in or zoom-out display effect corresponding to the target image frame. Alternatively, the switching operation is used to instruct the target application to switch the interface to a displacement animation, and the displacement animation is used to present the fade-in display effect or fade-out display effect corresponding to the target image frame.

7. The method according to claim 6, characterized in that, The scaling animation includes direct scaling animation and displacement scaling animation. The direct scaling animation includes direct zoom-in animation and direct zoom-out animation. In the direct zoom-in animation, the target image frame gradually zooms in from a first position in the first interface, and in the direct zoom-out animation, the target image frame gradually zooms out to a first position in the second interface. The displacement scaling animation includes a displacement magnification animation and a displacement shrinking animation. In the displacement magnification animation, the target image frame gradually magnifies as it moves from a first position to a second position on the first interface. In the displacement shrinking animation, the target image frame gradually shrinks as it moves from a second position to a first position on the second interface. The first position on the first interface and the first position on the second interface are the same as or different from the position of the application control corresponding to the target application.

8. The method according to any one of claims 3-5, characterized in that, The drawing of the target image frame includes: Obtain the target image frame and the edge movement speed of each edge of the target image frame; Based on the edge movement speed of each edge of the target image frame, a first region and a second region corresponding to the target image frame are determined. The first region is the region within the target image frame that is close to each edge, and the second region is the region outside the target image frame that is close to each edge. The transparency of the first region and the second region is adjusted to generate the updated target image frame. The contour region in the updated target image frame includes the adjusted first region and the second region. The target image frame in the transition animation is the updated target image frame.

9. The method according to claim 8, characterized in that, The step of determining the first region and the second region corresponding to the target image frame based on the edge movement speed of each edge of the target image frame includes: The feathering distance corresponding to each edge in the target image frame is determined based on the edge movement speed of each edge in the target image frame; The first region is determined based on the feathering distance, and the area of ​​the region corresponding to the first region is positively correlated with the feathering distance; The pixels corresponding to the first region are expanded along the target direction to obtain the second region.

10. The method according to claim 9, characterized in that, In the first region, the distance from one end away from the edge of the target image frame to the edge of the target image frame is equal to the feathering distance, and in the second region, the distance from one end away from the edge of the target image frame to the edge of the target image frame is equal to the feathering distance.

11. The method according to any one of claims 8-10, characterized in that, The step of obtaining the edge movement speed of each edge of the target image frame includes: When the transition animation is a displacement animation or a scaling animation, the movement distance between the center points of adjacent image frames in the transition animation and the playback speed corresponding to the transition animation are obtained; Based on the distance traveled, determine the center movement speed corresponding to the center point position; The target movement speed of each vertex in the target image frame is obtained by adding the center movement speed and the playback speed corresponding to the transition animation. The average value of the target movement speed at each vertex corresponding to each edge of the target image frame is calculated to obtain the edge movement speed of each edge of the target image frame.

12. The method according to any one of claims 8-10, characterized in that, The step of obtaining the edge movement speed of each edge of the target image frame includes: When the transition animation is a displacement scaling animation, the movement distance between the center points of adjacent image frames in the transition animation, the movement direction of the center points of adjacent image frames, and the playback speed corresponding to the transition animation are obtained; in the displacement scaling animation, the target image frame is gradually enlarged or gradually reduced during the displacement process; Based on the distance traveled, determine the center movement speed corresponding to the center point position; Based on the direction of movement of the center point, the center movement speed and the playback speed corresponding to the transition animation are calculated to determine the target movement speed of each vertex in the target image frame; The average value of the target movement speed of each vertex corresponding to each edge of the target image frame is calculated to obtain the edge movement speed of each edge of the target image frame.

13. The method according to claim 9, characterized in that, The step of determining the feathering distance corresponding to each edge in the target image frame based on the edge movement speed of each edge includes: The feathering distance of each edge in the target image frame is obtained based on the edge movement speed corresponding to each edge and the preset time threshold.

14. A display device, characterized in that, The display device includes a display module, an acquisition module, and a processing module; The display module is configured to display a first interface; The processing module is configured to draw the target image frame; The processing module is configured to generate a transition animation based on the target image frame; the transition animation is a dynamic scene displayed during the transition from the first interface to the second interface, the target image frame in the transition animation includes a contour region, the transparency of the contour region increases along the target direction, the target direction is the direction from the inside to the outside of the target image frame, and the contour region is determined according to the edge movement speed of each edge of the target image frame during the playback of the transition animation; The display module is also configured to display the transition animation; The display module is also configured to display the second interface.

15. An electronic device, characterized in that, The electronic device includes a memory, one or more processors, and a display screen; the memory is coupled to the processor; wherein the display screen is used to display a user interface, the memory stores computer program code, the computer program code including computer instructions, and when the computer instructions are executed by the processor, the electronic device performs the display method as described in any one of claims 1-13.

16. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores instructions that, when executed on an electronic device, cause the electronic device to perform the display method as described in any one of claims 1-13.

17. A computer program product, characterized in that, The computer program product includes instructions that, when executed on a computer or processor, cause the computer or processor to perform the display method as described in any one of claims 1-13.

Images