Image display method and terminal equipment

Abstract

The invention provides an image display method and terminal equipment, and relates to the technical field of image processing, and the method comprises the steps that the terminal equipment responds to charging start, and a first charging dynamic effect is displayed on a display screen of the terminal equipment; wherein the first charging dynamic effect can be obtained according to multiple frames of second pictures, the multiple frames of second pictures comprise first mapping image elements, and the first mapping image elements are obtained through mapping based on first image elements included in the first picture. According to the scheme, the charging dynamic effect can be realized under the condition of occupying less storage space.

Description

Technical Field

[0001] The present application relates to the field of image processing technology, and in particular to an image display method and terminal device. Background Art

[0002] Currently, when mobile phones and other terminal devices are charging, the terminal interface displays a charging effect. To achieve this charging effect, terminal devices typically use a frame animation solution: the multiple frames that make up the animation are loaded into a texture array, and then the texture array is bound in a loop for rendering and drawing to generate the animation, thus achieving the charging effect.

[0003] However, in the above solution, multiple frames of images occupy a large amount of storage space in the terminal device, which may lead to insufficient storage space of the terminal device, and a large number of images need to be loaded when the animation is first started, resulting in a slow display of the charging animation, thereby affecting the user's charging experience. Summary of the Invention

[0004] The embodiments of the present application provide an image display method and a terminal device, which can achieve charging animation while occupying less storage space.

[0005] To achieve the above objectives, the embodiments of the present application adopt the following technical solutions:

[0006] In a first aspect, an image display method is provided. The method can be applied to a terminal device and, in response to the terminal device starting charging, displays a first charging animation on a display screen of the terminal device. The first charging animation is obtained based on multiple frames of a second image, the multiple frames of the second image include a first mapped image element, and the first mapped image element is obtained by mapping based on a first image element included in the first image.

[0007] By adopting the above technical solution, only one picture needs to be obtained before displaying the charging effect. Since one picture occupies a small storage space, the storage space of the terminal device can be saved. In addition, the terminal device can generate different mapping image elements by obtaining pictures containing different image elements, thereby achieving different charging effects, which is highly flexible. In addition, the terminal device only needs to calculate the mapping relationship between the image elements and the mapping image elements, and does not need to calculate the construction model. Therefore, the calculation amount of the terminal device is small, which can reduce the power consumption of the terminal device, and the calculation speed is fast, which can make the display speed of the charging effect faster and improve the user's charging experience.

[0008] In one possible implementation of the first aspect, the first picture includes one picture; or the first picture includes multiple pictures, each of the multiple pictures includes the first image element, and different pictures include different characteristics of the first image elements; and the number of pictures included in the first picture is less than or equal to a quantity threshold. Compared to a solution that requires many frames of images to form an animation, the terminal device needs to obtain fewer first pictures, thereby saving storage space.

[0009] In a possible implementation of the first aspect, the first picture is pre-stored in the terminal device. Thus, when the terminal device responds to starting charging, it can directly obtain the corresponding first picture from the pictures pre-stored in the terminal device, thereby improving the efficiency of generating charging animations.

[0010] In a possible implementation manner of the first aspect, the terminal device may obtain a current charging state, and in response to the current charging state of the terminal device being the first charging state, determine that the first image element is an image element corresponding to the first charging state.

[0011] In a possible implementation of the first aspect, the charging status includes a charging mode and / or a charge state. Different charging modes may correspond to different image elements, and different charge states may also correspond to different image elements. Alternatively, under the same charging mode, different charge states may correspond to the same image element. Alternatively, under the same charge state, different charging modes may correspond to the same image element.

[0012] In a possible implementation of the first aspect, the terminal device may obtain a correspondence between charging states and image elements. Different charging states correspond to different image elements, or different charging states correspond to at least one image element with different characteristics. In response to the terminal device's current charging state being a first charging state, the correspondence is searched to determine that the first image element is the image element corresponding to the first charging state.

[0013] In a possible implementation of the first aspect, the correspondence between the charging state and the image element is pre-stored in the terminal device, so that the terminal device can directly determine the image element corresponding to the current charging state based on the pre-stored correspondence.

[0014] In one possible implementation of the first aspect, in response to the terminal device's current charging state being the second charging state, the second image element is determined to be an image element corresponding to the second charging state. The terminal device can then map a third image including the second image element to obtain multiple frames of a fourth image, each of which includes the second mapped image element, and display a second charging animation based on the multiple frames of the fourth image. Thus, when charging is resumed, if the terminal device switches the charging state, the corresponding image element can be re-determined, thereby generating a corresponding charging animation.

[0015] In a possible implementation manner of the first aspect, the image element includes at least one of the following features: a shape of the image element, a filling content of the image element, or a color of the image element.

[0016] In one possible implementation of the first aspect, the terminal device may determine a target area in the first image element that matches the first mapped image element to be calculated, and calculate a mapping relationship between the target area and the first mapped image element. The terminal device may then calculate a mapping result for the target area based on the mapping relationship, and compose the first mapped image element based on the mapping result.

[0017] In one possible implementation of the first aspect, the first image element may be in the shape of a ring, and the first mapped image element may be in the shape of a crescent. A ring-shaped region corresponding to the crescent is selected, and the terminal device calculates the positional relationship between feature points in the region and feature points in the crescent, thereby calculating a mapping relationship between the region and the crescent. Finally, the terminal device may perform sampling based on the mapping relationship and the content of the region, mapping the content of the region to the crescent.

[0018] In one possible implementation of the first aspect, the position information of the first mapped image element varies across multiple frames of the second image, where the position information includes at least a display position and a rotation angle. Thus, by rendering multiple frames of the second image, a dynamic image can be generated in which the position information of the first mapped image element changes, thereby achieving a charging effect.

[0019] In a second aspect, the present application provides a terminal device comprising: a display screen, a memory, and one or more processors; the display screen, the memory, and the processor are coupled; wherein the memory stores computer program code, and the computer program code comprises computer instructions, and when the computer instructions are executed by the processor, the terminal device executes any one of the methods described in the first aspect above.

[0020] In a third aspect, the present application provides a computer-readable storage medium having instructions stored therein, which, when executed on a computer, enables the computer to execute any one of the methods described in the first aspect.

[0021] In a fourth aspect, the present application provides a computer program product comprising instructions, which, when executed on a computer, enables the computer to execute any one of the methods described in the first aspect.

[0022] It can be understood that the terminal device described in the second aspect provided above, the computer-readable storage medium described in the third aspect, and the computer program product described in the fourth aspect are all used to execute the corresponding methods provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects in the corresponding methods provided above, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Figure 1 A schematic diagram of a charging scenario provided in an embodiment of the present application;

[0024] Figure 2 A schematic diagram showing changes in some image frames in a charging animation displayed on a mobile phone interface provided by an embodiment of the present application;

[0025] Figure 3 A schematic diagram of multiple image frames provided in an embodiment of the present application;

[0026] Figure 4 A software structure diagram of a terminal device provided in an embodiment of the present application;

[0027] Figure 5 A flowchart of an image processing method provided in an embodiment of the present application;

[0028] Figure 6 A schematic diagram of a ring filling content provided in an embodiment of the present application;

[0029] Figure 7 A schematic diagram of two circles inscribed in a crescent shape provided in an embodiment of the present application;

[0030] Figure 8 A schematic diagram of two circles intersecting to form a crescent shape provided in an embodiment of the present application;

[0031] Figure 9 A schematic diagram of calculating a mapping relationship after two circles intersect to form a crescent shape, provided in an embodiment of the present application;

[0032] Figure 10 A schematic diagram of the hardware structure of a mobile phone 1000 provided in an embodiment of the present application;

[0033] Figure 11 A schematic structural diagram of a chip system provided in an embodiment of the present application. DETAILED DESCRIPTION

[0034] The following will describe the technical solutions in the embodiments of this application in conjunction with the drawings in the embodiments of this application. Obviously, the embodiments described are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of this application.

[0035] It should be noted that the terms "first", "second", etc. below are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first", "second", etc. may explicitly or implicitly include one or more of the features. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but may optionally include steps or units that are not listed, or may optionally include other steps or units that are inherent to these processes, methods, products or devices.

[0036] References to "one embodiment" or "some embodiments" in this specification mean that a particular feature, structure, or characteristic described in conjunction with that embodiment is included in one or more embodiments of the present application. Thus, phrases such as "in one embodiment," "in some embodiments," "in other embodiments," and "in yet other embodiments" appearing in various places in this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized.

[0037] In the embodiments of this application, words such as "exemplary" or "for example" are used to indicate examples, illustrations, or descriptions. Any embodiment or design described as "exemplary" or "for example" in the embodiments of this application should not be interpreted as being preferred or advantageous over other embodiments or designs. Rather, the use of words such as "exemplary" or "for example" is intended to present the relevant concepts in a concrete manner.

[0038] An embodiment of the present application provides an image display method, which can be applied to the scenario of terminal device charging, wherein terminal device charging can refer to the terminal device responding to a wired charging device being inserted into the terminal device, or the terminal device responding to being placed on a wireless charging device, obtaining the charging power / current of the charging device for charging, and displaying the charging screen on the interface of the terminal device.

[0039] The terminal device may be a device such as a mobile phone, tablet computer, or laptop computer that has a charging port and / or charging capability. The charging port of the terminal device may be a Type-C interface. The Type-C interface is a Universal Serial Bus (USB) interface, also known as a USB Type-C interface. The Type-C interface supports USB standard functions such as charging, data transmission, and display output.

[0040] Among them, taking wired charging as an example, after the charger is plugged into the mobile phone, the mobile phone can display the charging screen in an animated way on the mobile phone interface to prompt the user with charging information. Among them, the charging information may include the charging mode, charging power, etc. The mobile phone interface may refer to the lock screen interface or system desktop of the mobile phone. Among them, the charging mode refers to the working state adopted by the device when it needs to replenish energy (electricity), which usually involves turning off unnecessary functions to reduce energy consumption, while improving energy conversion efficiency to fully charge faster.

[0041] In this application, displaying the charging screen in an animated manner can refer to displaying the charging status through dynamic images or animation effects during the charging process to provide visual feedback to the user. Displaying the charging screen in an animated manner can be replaced by displaying charging dynamic effects or displaying charging animations, without limitation.

[0042] It is understood that after the phone is plugged into a charger, the phone interface can display a charging animation for a preset duration. The preset duration can be 8 seconds, which is not limited here. If the phone screen turns off or the phone is used in response to a user's operation while the charging animation is displayed on the phone interface, the charging animation will no longer be displayed.

[0043] For example, the terminal device is Figure 1 Take the mobile phone 100 shown in FIG. as an example, Figure 1 As shown, after the mobile phone 100 is inserted into the charger 110 , a charging animation 130 may be displayed on the interface of the mobile phone 100 . Figure 1 The charging effect 130 shown in the figure is only a screenshot of a charging effect of a mobile phone at a certain moment. In order to clearly illustrate the changing process of the charging effect, please refer to Figure 2 , Figure 2 This is a schematic diagram of the changes in some image frames in a charging animation displayed on a mobile phone interface provided by an embodiment of the present application. Figure 2 The diagram below shows the changes in the main part of the charging effect, not the overall change of the charging effect. The main part here refers to the crescent-shaped part of the charging effect.

[0044] like Figure 2As shown in (a), the crescent shape 203 formed by the tangent connection between the circle 201 and the circle 202 has its opening facing left. Figure 2 As shown in (b), the opening of the crescent shape 203 formed by the tangent connection between the circle 201 and the circle 202 faces downward. Figure 2 As shown in (c), the opening of the crescent shape 203 formed by the tangency of the circle 201 and the circle 202 faces right.

[0045] Among them, the above Figure 2 (a) to Figure 2 (b), then Figure 2 The process (c) can be considered as the process of the crescent shape 203 rotating counterclockwise from the opening to the left. Figure 2 (a) to Figure 2 (b), then Figure 2 The process (c) can also be considered as the process in which the circle 201 remains stationary and the circle 202 rotates counterclockwise within the circle 201, thereby causing the crescent shape 203 obtained by the tangency between the circles 201 and 202 to rotate counterclockwise.

[0046] The crescent shape 203 is filled with grid lines, and the rotation of the circle 202 can cause the grid lines to deform, creating a spatial change. The crescent shape 203 is the main part of a charging animation for the mobile phone. For ease of explanation, the charging animation in the subsequent embodiments refers to the animation of the main part of the charging screen.

[0047] In one solution, the mobile phone can use a frame animation solution to achieve charging effects. Specifically, the mobile phone loads the multiple frames of images that make up the animation into a texture array, and then loops and binds the texture array for drawing and rendering. At this time, the mobile phone displays the drawn and rendered images in sequence, thereby achieving charging effects. The image elements included in each frame of the multiple frames are all the same or partially the same, without restriction. The position, shape, color, etc. of at least one image element in different frames are different.

[0048] like Figure 3 As shown, the mobile phone can obtain 31 frames of images. There are differences in the positions of the finger part 301 in these 31 frames of images. The mobile phone loads the 31 frames of images into a texture array in sequence. Subsequently, in response to the mobile phone charging, the texture array containing the 31 frames of images is loop-bound for drawing and rendering, and the 31 frames of images are displayed to achieve the charging effect.

[0049] Among them, loop binding means that the mobile phone needs to bind multiple frames of images in the texture array one by one in sequence. For example, after the mobile phone binds a frame of image (image 1), it draws and renders it, and after the display of the frame of image is completed, it cancels the binding of the frame of image, and then the mobile phone binds the next frame of image (image 2) and draws and renders it, and completes the display of the frame of image. And so on, the mobile phone Figure 3 The 31 frames of images are displayed in sequence, thus producing a continuous animation effect.

[0050] However, the above solution has the following disadvantages: the implementation of a charging animation requires multiple frames of images, resulting in a large amount of storage space occupied in the mobile phone, which may lead to insufficient storage space in the mobile phone. In addition, if the multiple frames of images corresponding to a charging animation are used as a set of image resources corresponding to the charging animation, then when the mobile phone has multiple charging styles, multiple sets of corresponding image resources are required. When the mobile phone switches the charging style, it is necessary to switch a whole set of image resources, resulting in a lack of flexibility. In addition, a large number of images need to be loaded when the animation is first started, resulting in a slow display of the charging effect, affecting the user's charging experience.

[0051] In another solution, the phone can achieve a charging animation by controlling the movement of the main part of the charging screen. For example, if the main part of the charging screen is the crescent shape formed by two tangent circles as described above, and the crescent shape is filled with grid lines, the phone can model the grid lines and perform 3D rendering to obtain a grid line model. The phone can then use the graphics engine to control the movement of the grid line model, thereby achieving the crescent rotation effect.

[0052] In the other solution mentioned above, although there is no need to load a large number of images, the control is relatively precise and the flexibility is high. However, to ensure that the charging animation effect is relatively good, the mobile phone needs to perform a lot of calculations, resulting in high power consumption of the mobile phone. If the mobile phone only controls the movement of the main body through simplified calculations, the animation effect often does not meet expectations. In addition, in the charging scenario, the mobile phone interface usually needs to quickly display the charging animation, but the loading time of the graphics engine is relatively long, which affects the speed at which the mobile phone displays the charging animation, and thus affects the user's charging experience.

[0053] Therefore, an embodiment of the present application provides an image display method, which is applied to a terminal device, and displays a first charging animation on a display screen in response to the terminal device starting to charge. The terminal device can obtain a first picture including a first image element, obtain a first mapping image element according to the mapping of the first image element, and generate a charging animation based on multiple frames of a second picture including the first mapping image element. A picture occupies a small storage space, which can save the storage space of the terminal device. In addition, the terminal device can generate different mapping image elements by obtaining pictures containing different image elements, thereby achieving different charging animations, which has high flexibility. In addition, the terminal device only needs to calculate the mapping relationship between the image element and the mapping image element, and does not need to calculate the construction model. Therefore, the terminal device has a small amount of calculation, which can reduce the power consumption of the terminal device, and the calculation speed is fast, which can make the display speed of the charging animation faster, thereby improving the user's charging experience.

[0054] The software system of the terminal device can adopt a layered architecture, an event-driven architecture, a micro-kernel architecture, a micro-service architecture, or a cloud architecture. The embodiment of the present application takes the Android system of the layered architecture as an example to exemplify the software structure of the terminal device.

[0055] Figure 4 It is a software structure block diagram of the terminal device in an embodiment of the present application.

[0056] A layered architecture divides software into several layers, each with distinct roles and responsibilities. Layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into five layers: from top to bottom: the application layer, the application framework layer, the Android runtime (ART) and native C / C++ libraries, the hardware abstraction layer (HAL), and the kernel layer.

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

[0058] like Figure 4 As shown, the application package may include settings, gallery, calendar, call, map, navigation, WLAN, music, video, SMS and other applications.

[0059] The application layer includes a rendering thread. After obtaining the current charging mode, the application layer selects the corresponding texture map, maps the image elements in the texture map to obtain mapped image elements, then controls the rotation of the mapped image elements to generate a dynamic image, which is then rendered and displayed on the terminal device interface. Controlling the rotation of the mapped image elements involves drawing a circle in the fragment shader and multiplying the center of the circle by a rotation matrix to achieve the rotation effect.

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

[0061] For example, the application framework layer may include a basic framework and a battery service (BatteryService). The basic framework includes a window manager, a content provider, a view system, a resource manager, a notification manager, and the like.

[0062] For example, the window manager is used to manage windowed applications. It can obtain the display size, determine whether a status bar is present, lock the screen, take screenshots, and more. The content provider is used to store and retrieve data and make it accessible to applications. This data can include video, images, audio, incoming and outgoing calls, browsing history and bookmarks, and phone books.

[0063] The above view system can be used to build the display interface of an application. Each display interface can be composed of one or more controls. Generally speaking, controls can include icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, widgets, and other interface elements.

[0064] The above resource managers provide various resources for applications, such as localized strings, icons, images, layout files, video files, etc.

[0065] The notification manager allows applications to display notifications in the status bar. These messages can be used to convey informational messages and can disappear automatically after a short pause, without requiring user interaction. For example, the notification manager is used to notify users of completed downloads and message reminders. The notification manager can also display notifications in the form of icons or scrolling text in the system's top status bar, such as notifications from background applications, or in the form of dialog windows on the screen. Examples include displaying text messages in the status bar, emitting alert sounds, vibrating electronic devices, or flashing indicator lights.

[0066] BatteryService provides an interface for obtaining battery information and charging status, such as the charging status, current charging type, and battery level. The charging status indicates whether the phone is properly connected to the charger, and the current charging type indicates the phone's charging type. After obtaining the current charging type, it is uploaded to the application layer in the form of a flag bit.

[0067] The Android runtime consists of the core libraries and the Android runtime. The Android runtime is responsible for converting source code into machine code. It primarily utilizes ahead-of-time (AOT) and just-in-time (JIT) compilation technologies.

[0068] The core library is mainly used to provide basic Java class library functions, such as basic data structures, mathematics, IO, tools, databases, networks, etc. The core library provides an API for users to develop Android applications.

[0069] Native C / C++ libraries can include multiple functional modules, such as surface manager, media framework, libc, OpenGL ES, SQLite, WebKit, etc.

[0070] The surface manager manages the display subsystem and provides fusion of 2D and 3D layers for multiple applications. The media framework supports playback and recording of a variety of common audio and video formats, as well as static image files. The media library supports a variety of audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG. OpenGL ES provides 2D and 3D graphics drawing and manipulation within applications. SQLite provides a lightweight relational database for applications on terminal devices.

[0071] The hardware abstraction layer runs in user space, encapsulates kernel layer drivers, and provides a calling interface to the upper layer. The hardware abstraction layer includes at least the display module.

[0072] The core layer is the layer between hardware and software. It includes at least battery-related drivers, charge and discharge management drivers, and image display drivers. The image display driver sends the image to the display screen.

[0073] The image display method provided in the embodiments of the present application is described below with reference to the accompanying drawings.

[0074] The technical method of the embodiment of the present application can be applied to the charging scenario of the terminal device. Figure 5 This is a flow chart of an image display method provided in an embodiment of the present application. The method can be executed by a terminal device, or by a chip or functional module in the terminal device, without limitation. In the subsequent embodiments, the terminal device is a mobile phone as an example. Figure 5 As shown, it specifically includes the following steps S100 to S103:

[0075] S100: A picture including a first image element is pre-stored in a mobile phone.

[0076] This application does not limit the characteristics of the first image element. The characteristics of the first image element may include, but are not limited to, the shape of the first image element, the color of the first image element, and the fill content of the first image element. Optionally, the shape of the first image element may be a circle, a crescent, or a square ring. The color of the first image element may include, but is not limited to, red, green, blue, and white. The fill content of the first image element may include, but is not limited to, a grid, lines, or a solid color.

[0077] S101: In response to a mobile phone charging, obtain a first picture including a first image element.

[0078] The charging device refers to the phone's charger. When the phone detects that the charger is plugged in, the phone's interface will display a charging animation.

[0079] The mobile phone can generate different charging effects based on a picture containing a first image element having at least one different feature. For example, the mobile phone can generate different charging effects based on different shapes of the first image element.

[0080] The shape of the first image element can be as follows: Figure 6 The circular shape shown. A specified area within the circular shape can be mapped to a crescent shape. Then, by controlling the rotation of the crescent shape, a charging effect can be achieved. The image here refers to a texture map, which is an integral part of model creation and provides detailed visual information about the model's surface.

[0081] The size of the ring is determined by the radius of the inner and outer circles. The phone can change the charging effect by changing the size of the ring.

[0082] In this embodiment, the content filled in the ring is not limited. Figure 6 As shown, the circle can be filled with a grid, lines, or a solid color. The phone can change the form of the content filled in the circle to change the effect of the final animation.

[0083] In this embodiment, the first picture may include one picture, or the first picture may include multiple pictures, all of which include the first image element, the first image elements included in different pictures have different characteristics, and the number of pictures included in the first picture is less than or equal to a quantity threshold. For example, the first picture may include two pictures, and the colors of the first image elements in the two pictures are different. The above-mentioned quantity threshold may refer to the number of pictures required in the frame animation scheme. Therefore, compared with the frame animation scheme that requires dozens of pictures, the number of pictures required in this embodiment is relatively small, saving storage space on the mobile phone.

[0084] In this embodiment, when a mobile phone begins charging, it will be in different charging states. The charging state includes the charging mode and / or the battery level. The mobile phone may pre-store a correspondence between charging states and image elements. Different charging states may correspond to different image elements, or different charging states may correspond to at least one image element with different characteristics.

[0085] Before the mobile phone acquires the image containing the first image element, the mobile phone acquires the current charging state and then obtains the corresponding relationship between the charging state and the image element. In response to the current charging state of the mobile phone being the first charging state, the corresponding relationship is searched and the first image element is determined to be the image element corresponding to the first charging state.

[0086] Charging modes can be categorized as super-fast charging mode, fast charging mode, and normal charging mode. The phone can pre-set a correspondence between charging modes and image elements. Then, after the phone detects that a charger is plugged in, it can select an image containing the corresponding image element based on the current charging mode.

[0087] After a phone is plugged into a charger, it can identify the charging mode it wants to enter by detecting the charger's output power and charging protocol. For example, the phone can detect the model of the charger and charging cable. If the phone detects that the plugged-in charger is a standard charger and a standard charging cable, the phone will enter fast charging mode, as standard chargers typically include a fast charging protocol and corresponding power compatible with the phone. If the phone detects that the plugged-in charger is a non-standard charger and / or non-standard charging cable, the phone will enter normal charging mode.

[0088] The power state can be determined according to the power percentage. For example, the first power state may be less than 30% power, the second power state may be between 30% and 70% power, and the third power state may be greater than 70% power.

[0089] In this embodiment, the mobile phone may be pre-set with a correspondence between the battery status and the image elements. The mobile phone may select a picture containing the corresponding image element according to the acquired battery status.

[0090] In some embodiments, the charging animations corresponding to different battery levels may be differentiated only by color. For example, a red charging animation indicates a first battery level, a blue charging animation indicates a second battery level, and a green charging animation indicates a third battery level.

[0091] When the phone detects a charger is plugged in, it can select an image containing the corresponding image element based on the current charging mode. The phone then calculates the mapped image element based on the image element and selects the corresponding color based on the current battery level. Finally, the mapped image element and the corresponding color generate a charging animation.

[0092] Specifically, after the mobile phone calculates the mapping image elements based on the image elements in the selected picture, it controls the rotation of the mapping image elements and performs rendering processing, and then multiplies the RGBA data of the output rendering result with the color to obtain the mixed color to be displayed as the color of the charging effect.

[0093] The process of multiplying RGBA data with a color involves color mixing and transparency. RGBA represents a color space that represents red, green, blue, and alpha. RGB represents the basic components of a color, while alpha indicates the degree of transparency, ranging from 0 (completely transparent) to 1 (completely opaque).

[0094] In some embodiments, the image elements in the texture map stored in the mobile phone may also contain color data. Then, after the mobile phone is plugged into a charger, it determines the image containing the corresponding image element based on the acquired charging status. After calculating the mapped image element based on the image element in the selected image, it controls the rotation of the mapped image element and performs rendering processing to generate the charging animation.

[0095] In this embodiment, the mobile phone can also achieve different charging effects by controlling the rotation speed of the mapped image element. For example, if the charging mode is fast charging mode, the rotation speed of the mapped image element is high; if the charging mode is normal charging mode, the rotation speed of the mapped image element is low.

[0096] It is understandable that the phone can switch the current charging mode in response to user operation, but it will not generate a new charging animation based on the newly selected charging mode. Only after reinserting the charger will the phone re-determine the corresponding image element based on the current charging status, map the image element based on the image element, and generate the corresponding charging animation.

[0097] For mobile phones, each charging mode corresponds to a texture map, which takes up very little storage space in the phone. The phone only needs to switch a texture map to achieve different charging effects to adapt to different charging modes, which is highly flexible.

[0098] S102: Acquire a mapping picture obtained by collecting mapping results for the first picture, where the mapping picture includes a first mapping image element corresponding to the first image element.

[0099] In this embodiment, the mobile phone can determine the target area in the image element of the first picture that needs to be mapped based on the ultimately obtained mapped image element. Then, the mobile phone can determine the mapping relationship between the mapped image element and the target area in the image element based on the relationship between the two.

[0100] After determining the mapping relationship between the two, the mapping result of the target area can be calculated according to the target area in the image element and the mapping relationship, and the mapping image element can be composed according to the mapping result.

[0101] In this embodiment, a case where the shape of the first image element is a circular ring is taken as an example for detailed description.

[0102] First, the phone determines that the charging animation is a crescent-shaped rotation. Therefore, it can be determined that the shape to be mapped to the circular shape is a crescent. Two circles can form a crescent shape. Specifically, the crescent shape can be formed by tangent or intersecting the two circles.

[0103] Here, two circles are tangent to each other when they are inscribed in two circles with different radii. Inscribed means that one circle is inside the other circle and the two circles have only one intersection point. Figure 7 As shown in (a), circle 601 and circle 602 are tangent to form a crescent shape 603, wherein circle 601 is the outer circle of the ring.

[0104] The mobile phone can control the center of the circle 602 to perform circular motion to achieve the rotation of the crescent shape 603. Figure 7 As shown in (a), the motion trajectory of the center of circle 602 is the dotted circle 604. When the center of circle 602 is at point A of dotted circle 604, the crescent shape is as follows: Figure 7 When the center of circle 602 moves to point B on circle 604, the crescent shape is as shown in (a). Figure 7 As shown in (b).

[0105] Here, the intersection of two circles means that the two circles have two common points. The radii of the two circles can be the same or different. Figure 8 As shown in (a), the intersection of circle 701 and circle 702 forms a crescent shape 703, wherein circle 701 is the outer circle of the ring.

[0106] Similarly, the mobile phone can also realize the rotation of the crescent shape 703 by controlling the center of the circle 702 to perform circular motion. Figure 8 As shown in (a), the motion trajectory of the center of circle 702 is the dotted circle 704. When the center of circle 702 is at point C of dotted circle 704, the crescent shape is as follows: Figure 8 When the center of circle 702 moves to point D on dotted circle 704, the crescent shape is as shown in (a). Figure 8 As shown in (b).

[0107] The above-mentioned rotation of the crescent shape is actually achieved by controlling the rotation of the target circle, which has a spatial sense change and is different from the effect of the rotation of the crescent shape itself.

[0108] The target circle here refers to the circle that is partially or completely inside the outer circle of the ring. For example, the target circle is as follows Figure 7 (a) shown in circle 602 or Figure 8 The circle 702 shown in (a).

[0109] For the target circle, it also needs to be tangent to the inner circle of the annulus. Therefore, the radius of the target circle is larger than the radius of the inner circle.

[0110] For a circular ring of the same size, two different crescent shapes can be obtained by intersecting or tangent-ing the target circle with the outer circle. Furthermore, the phone can also change the resulting crescent shape by changing the size of the target circle.

[0111] The crescent shape has two cusps. When two circles intersect, the two cusps of the crescent shape are also the two intersection points of the two circles. When two circles are tangent, the two cusps of the crescent shape touch each other, which is also the tangent point of the two circles.

[0112] The mobile phone can set any point within the crescent shape as P', and any point within the ring as P. The mapping relationship between the ring and the crescent can be considered the mapping relationship between P and P'.

[0113] Next, the specific process of calculating the mapping relationship between P and P′ is introduced in detail.

[0114] For a point P' within the crescent formed by the target circle and the outer circle at a given moment, if the target circle rotates, point P''s position within the corresponding crescent also moves. Since the center of the target circle is in circular motion, point P' also moves within the corresponding crescent. This means that the trajectory of point P' forms a circle, which we will call trajectory circle 1.

[0115] Correspondingly, according to the mapping relationship between the ring and the crescent shape, the point P located in the ring corresponding to the point P′ in the crescent shape also performs circular motion in the ring, that is, the motion trajectory of point P is a circle, set as trajectory circle 2.

[0116] Based on the relationship between trajectory circles 1 and 2, point P′ establishes a coordinate transformation relationship with point P. Therefore, for each point within the crescent, there is a corresponding point within the ring, based on this coordinate transformation relationship. Ultimately, the contents of the ring can be mapped to the crescent.

[0117] Specifically, if Figure 9 The ring 801 shown in (a) can be mapped as follows Figure 9 The crescent shape 804 shown in (b) .

[0118] like Figure 9 As shown in (b), the intersection of circle 805 and circle 806 forms a crescent shape 804, and the two apexes of crescent shape 804 are points F and G. Among them, the outer circle 802 of ring 801 is equivalent to circle 805, and the inner circle 803 of ring 801 is equivalent to circle 807.

[0119] The motion trajectory of the center of circle 806 is dotted circle 808, the motion trajectory of point P′ in the crescent shape is circle 809, and the motion trajectory of point P in the ring is dotted circle 810. Point P′ and point P are a set of points with a mapping relationship.

[0120] Point P′ is geometrically mapped to point P. That is, if point P is half the width of the ring, then the corresponding point P′ is also half the width of the crescent. The distance between the line connecting the center of the circle and point P′ and the two intersection points of the outer circle and the target circle represents the width of the crescent.

[0121] Since the target circle is tangent to the inner circle, that is, the widest part of the crescent is equal to the width of the ring, then the points inside the crescent will coincide with the corresponding points inside the ring, that is, Figure 8 The tangent point E of the circle 809 and the dotted circle 810.

[0122] Then, by establishing the coordinate transformation relationship between point P′ and point P through circle 809 and dotted circle 810, the circular content with F and G as starting points can be mapped to a crescent shape with F and G as two apexes. The circular content with F and G as starting points refers to the circular content between the line connecting point F and the center of circle 805, and the line connecting point G and the center of circle 805, which is oriented toward the crescent shape.

[0123] After determining the positional relationship between the circles, by constructing the equations of the circles and the known coordinates of the points, the equations of the trajectory circle of point P′ in the crescent shape and the equations of the trajectory circle of point P in the ring can be calculated, and then the mapping relationship between point P′ and point P can be determined.

[0124] First, the radii of the inner and outer circles of the ring, the radius of the target circle, and the radius of the trajectory circle corresponding to the center of the target circle are all known.

[0125] So, if Figure 9 As shown in (b), a rectangular coordinate system is established with the center of circle 805 (outer circle) as the origin, wherein the centers of circle 805 (outer circle), circle 807 (inner circle), dotted circle 808 (motion trajectory of center H of circle 806) and dotted circle 810 (motion trajectory corresponding to point P) coincide.

[0126] Assuming that the radius of circle 807 is R1, the radius of circle 805 is R3, and the radius of dotted circle 808 is R2, then the radius of circle 806 is the sum of the radii of circle 807 and dotted circle 808, R1+R2.

[0127] The line connecting the center H of circle 806 and the center of circle 805 passes through the point of tangency between circle 806 and dashed circle 808, as well as point E. Assuming that the angle between the line connecting point E and the origin and the x-axis is θ1, the coordinates of the center H of circle 806 in the rectangular coordinate system are (R2cos(θ1+π), R2sin(θ1+π)). Assuming that the coordinates of point P′ on circle 809 in the rectangular coordinate system are (x′, y′), solve the equations for circle 809 and dashed circle 810.

[0128] If the target circle (circle 806)'s center H moves counterclockwise on circle 808, the angle value of θ1 will also increase. In other words, a larger angle value of θ1 indicates that the target circle is rotating, and thus the crescent shape is also rotating. If the target circle (circle 806)'s center H is on the negative x-axis, then point E is also on the x-axis, and θ is 0. As the target circle's center moves counterclockwise from the negative x-axis, the generated crescent shape also begins to rotate counterclockwise, and point E also rotates counterclockwise, corresponding to increasing values of θ.

[0129] Based on the coordinates of the center H of the circle 806 , equation 1 of the circle 806 can be constructed as follows:

[0130] (x-R2cos(θ1+π)) 2 +(y-R2sin(θ1+π)) 2 =(R1+R2) 2

[0131] Furthermore, since the center of circle 805 is the origin in the aforementioned rectangular coordinate system, that is, the coordinates of the center of circle 805 are (0, 0), equation 2 of circle 805 can be constructed as follows:

[0132] x 2 +y 2 =R3 2

[0133] Then, based on the above equations 1 and 2, we can simplify equation 3 as follows:

[0134]

[0135] Then, by combining Equation 3 and Equation 2, we can calculate the coordinates of point F and point G. Here, assume that the coordinates of point F are (x1, y1) and the coordinates of point G are (x2, y2).

[0136] After knowing the coordinates of point P', point F, and point G, since these three points are all located on circle 809, the equation of circle 809 can be determined based on the coordinates of point P', point F, and point G. Here, it is assumed that the equation of circle 809 is (xa) 2 +(yb) 2 =r 2 , where r is the radius of circle 809, and (a, b) represents the coordinates of the center of circle 809 in the rectangular coordinate system constructed above.

[0137] Then, the coordinates of point P′, point F, and point G are substituted into the equation of circle 809 as follows:

[0138] (x1-a) 2 +(y1-b) 2 =r 2

[0139] (x2-a) 2 +(y2-b) 2 =r 2

[0140] (x′-a) 2 +(y′-b) 2 =r 2

[0141] Therefore, the above three equations can be solved to obtain a, b and r.

[0142] Assuming the radius of dotted circle 810 is r1, the coordinates of tangent point E on dotted circle 810 in the rectangular coordinate system are (r1cosθ1, r1sinθ1). Since tangent point E also lies on circle 809, the coordinates of tangent point E can be substituted into the equation for circle 809 to calculate r1.

[0143] From this, we can get the equation of the dotted circle 810, that is, x 2 +y 2 =r1 2 .

[0144] Finally, after converting the rectangular coordinates (x', y') of point P' on circle 809 into polar coordinates (r', θ'), the polar coordinates of point P mapped to dashed circle 810 are (r1, θ'). Determining the polar coordinates of points P' and P facilitates intuitive rotation. Rotation of the figure can be achieved by changing the angle (θ) between the polar radius and the positive x-axis.

[0145] Therefore, after calculating the equations of circle 809 and dashed circle 810, we can calculate the mapping relationship between point P' on circle 809 and point P on dashed circle 810. Based on this mapping relationship between point P' and point P, the phone can then map the content in the circular ring to the crescent shape. As can be seen from the above, the phone only needs to calculate the mapping relationship between the circular ring and the crescent shape to be displayed, which reduces the computational effort and saves power consumption.

[0146] Referring to the power consumption comparison table (Table 1), it can be seen that the average power consumption of the mobile phone when the above-mentioned method of generating charging effects is turned on is not much different from the average power consumption of the mobile phone when the above-mentioned method of generating charging effects is turned off. This means that the power consumption of the mobile phone consumed by the above-mentioned method of generating charging effects is very low, which can save the power consumption of the mobile phone and ensure the performance of the mobile phone.

[0147] Start-up power consumption (mA) Power consumption when animation is turned off (mA) 319.62 307.89 317.58 310.10 Average: 318.6 Average: 308.9

[0148] Table 1

[0149] In this embodiment, if the target circle and the outer circle are inscribed to form a crescent shape, the above calculation method can also be applied. Specifically, the mobile phone can calculate the coordinates of the tangent point between the target circle and the outer circle by constructing the equation of the target circle and the equation of the outer circle. Then, the mobile phone substitutes the coordinates of the tangent point and the known coordinates of a point A' in the crescent shape into the corresponding trajectory circle of the point A' to determine the equation of the trajectory circle of the point A' in the crescent shape. In addition, the mobile phone can substitute the tangent point of the trajectory circle of the point A' in the crescent shape and the trajectory circle of the point A' corresponding to the point A' in the ring into the equation of the trajectory circle of the point A' to further determine the equation of the trajectory circle of the point A in the ring. Thus, the mobile phone can calculate the mapping relationship between the point A' in the crescent shape and the corresponding point A in the ring through the equation of the trajectory circle of the point A' in the crescent shape and the equation of the trajectory circle of the corresponding point A in the ring.

[0150] S103: Display the charging animation generated based on the mapped image.

[0151] In this embodiment, after mapping the corresponding content in the circle to the crescent shape, the phone can rotate the crescent shape by controlling the rotation of the target circle, generating multiple frames of crescent-shaped images with different position information, and then rendering these multiple frames to generate the charging animation. The position information includes at least the display position and the rotation angle.

[0152] To sum up, when the terminal device displays a charging animation in response to starting charging, it can obtain a picture containing image elements, obtain mapped image elements according to the image element mapping in the picture, and then generate a charging animation based on multiple frames of pictures including the mapped image elements.

[0153] Exemplarily, the terminal device in the embodiment of the present application includes a display screen, and specifically may include at least one of a mobile phone, a foldable electronic device, a tablet computer, a desktop computer, a laptop computer, a handheld computer, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, a cellular phone, a personal digital assistant (PDA), an augmented reality (AR) device, a virtual reality (VR) device, an artificial intelligence (AI) device, a wearable device, an in-vehicle device, a smart home device, or a smart city device. The embodiment of the present application does not impose any special restrictions on the specific type of the terminal device.

[0154] The following describes the implementation of the embodiment of the present application in detail with reference to the accompanying drawings. Taking the above-mentioned electronic device as a mobile phone as an example, the hardware structure of the mobile phone 1000 is introduced. Figure 10 FIG. 1 shows a schematic diagram of the hardware structure of a mobile phone 1000. Figure 10 As shown, the mobile phone 1000 may include a processor 1010, an external memory interface 1020, an internal memory 1021, a universal serial bus (USB) interface 1030, a charging management module 1040, a power management module 1041, a battery 1042, an antenna 1, an antenna 2, a mobile communication module 1050, a wireless communication module 1060, a sensor module 1080, a display screen 1094, etc.

[0155] The sensor module 1080 may include a pressure sensor, a gyroscope sensor, an air pressure sensor, a magnetic sensor, an acceleration sensor, a distance sensor, a proximity light sensor, a fingerprint sensor, a temperature sensor, a touch sensor, an ambient light sensor, a bone conduction sensor, and the like.

[0156] It should be understood that the structures illustrated in the embodiments of the present application do not constitute a specific limitation on the mobile phone 1000. In other embodiments of the present application, the mobile phone 1000 may include more or fewer components than shown, or may combine or separate certain components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0157] The processor 1010 may include one or more processing units, for example, the processor 1010 may 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 may be independent devices or integrated into one or more processors.

[0158] The controller may be the nerve center and command center of the mobile phone 1000. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0159] Processor 1010 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 1010 is a cache memory. This memory can store instructions or data that have just been used or are being recycled by processor 1010. If processor 1010 needs to use the same instruction or data again, it can directly access the memory. This avoids duplicate accesses, reduces processor 1010 latency, and thus improves system efficiency.

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

[0161] It is understood that the interface connection relationship between the modules illustrated in the embodiments of the present application is merely illustrative and does not constitute a structural limitation on the mobile phone 1000. In other embodiments of the present application, the mobile phone 1000 may also adopt different interface connection methods from the above embodiments, or a combination of multiple interface connection methods.

[0162] The charging management module 1040 is configured to receive charging input from a charger. The charger can be either a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 1040 can receive charging input from the wired charger via the USB interface 1030. In some wireless charging embodiments, the charging management module 1040 can receive wireless charging input via the wireless charging coil of the mobile phone 1000. While charging the battery 1042, the charging management module 1040 can also provide power to the mobile phone 1000 via the power management module 1041.

[0163] The power management module 1041 is used to connect the battery 1042, the charging management module 1040, and the processor 1010. The power management module 1041 receives input from the battery 1042 and / or the charging management module 1040 to provide power to the processor 1010, the internal memory 1021, the external memory, the display 1094, the camera, and the wireless communication module 1060.

[0164] The power management module 1041 can also be used to monitor parameters such as battery capacity, battery cycle count, battery health status (leakage, impedance), etc. In some other embodiments, the power management module 1041 can also be set in the processor 1010. In other embodiments, the power management module 1041 and the charging management module 1040 can also be set in the same device.

[0165] The wireless communication function of the mobile phone 1000 can be implemented through antenna 1, antenna 2, mobile communication module 1050, wireless communication module 1060, modem processor and baseband processor.

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

[0167] Mobile phone 1000 implements display functions through a GPU, display screen 1094, and an application processor. The GPU is a microprocessor for image processing that connects display screen 1094 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. Processor 1010 may include one or more GPUs that execute program instructions to generate or modify display information.

[0168] The display screen 1094 is used to display images, videos, etc. The display screen 1094 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 Mini LED, a MicroLED, a Micro-oLED, or a quantum dot light-emitting diode (QLED). In some embodiments, the mobile phone 1000 may include one or N display screens 194, where N is a positive integer greater than one.

[0169] In the embodiment of the present application, the display screen 1094 can display charging animation.

[0170] The mobile phone 1000 can realize the shooting function through an ISP, a camera, a video codec, a GPU, a display 1094 and an application processor.

[0171] The external memory interface 1020 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the mobile phone 1000. The external memory card communicates with the processor 1010 through the external memory interface 1020 to implement data storage functions. For example, files such as music and videos can be stored on the external memory card.

[0172] The internal memory 1021 can be used to store computer executable program codes, which include instructions. The processor 1010 executes various functional applications and data processing of the mobile phone 1000 by running the instructions stored in the internal memory 1021. The internal memory 1021 may include a program storage area and a data storage area. Among them, the program storage area can store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc. The data storage area can store data created during the use of the mobile phone 1000 (such as audio data, a phone book, etc.), etc. In addition, the internal memory 1021 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash memory (UFS), etc.

[0173] A touch sensor, also known as a "touch device," can be provided on the display screen 1094. The touch sensor and the display screen 1094 form a touch screen, also known as a "touch screen." The touch sensor is used to detect touch operations applied thereto or in the vicinity thereof. The touch sensor can transmit the detected touch operations to an application processor to determine the type of touch event. Visual output related to the touch operations can be provided via the display screen 1094. In other embodiments, the touch sensor can also be provided on the surface of the electronic device 1000, at a location different from that of the display screen 1094.

[0174] In an embodiment of the present application, the touch sensor can detect click operations, sliding operations, etc. performed by the user on the display screen. The USB connector 1030 is an interface that complies with USB standard specifications and can be used to connect the mobile phone 1000 and peripheral devices. Specifically, it can be a Mini USB connector, a Micro USB connector, a USB Type C connector, etc. The USB connector 1030 can be used to connect a charger to enable the charger to charge the mobile phone 1000, and can also be used to connect other terminal devices to enable data transmission between the mobile phone 1000 and other terminal devices. It can also be used to connect headphones to output audio stored in the terminal device through the headphones. The connector can also be used to connect other terminal devices, such as VR devices, etc. In some embodiments, the standard specifications of the universal serial bus can be USB1.x, USB2.0, USB3.x and USB4.

[0175] The methods in the following embodiments can all be implemented in the mobile phone 1000 having the above hardware structure.

[0176] The present application also provides a chip system. Figure 11 As shown, the chip system 1100 includes at least one processor 1101 and at least one interface circuit 1102. The processor 1101 and the interface circuit 1102 can be interconnected via lines. For example, the interface circuit 1102 can be used to receive signals from other devices (such as the memory of the terminal device). For another example, the interface circuit 1102 can be used to send signals to other devices (such as the processor 1101). Exemplarily, the interface circuit 1102 can read the instructions stored in the memory and send the instructions to the processor 1101. When the instructions are executed by the processor 1101, the terminal device can execute the various steps in the above embodiments. Of course, the chip system can also include other discrete devices, which are not specifically limited in the embodiments of the present application.

[0177] An embodiment of the present application also provides a computer storage medium, which includes computer instructions. When the computer instructions are executed on the above-mentioned terminal device, the terminal device executes each function or step executed by the mobile phone in the above-mentioned method embodiment.

[0178] The embodiment of the present application further provides a computer program product, which, when executed on a computer, enables the computer to execute the functions or steps executed by the mobile phone in the above method embodiment.

[0179] Through the description of the above implementation methods, technical personnel in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional modules is used as an example. In actual applications, the above-mentioned functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above.

[0180] In the several embodiments provided in this application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are merely schematic. For example, the division of the modules or units is merely a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another device, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0181] The units described as separate components may or may not be physically separate, and the components shown as units may be one physical unit or multiple physical units, that is, they may be located in one place or distributed in multiple places. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0182] In addition, the functional units in the various embodiments of the present application may be integrated into a single processing unit, or each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.

[0183] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium. Based on this understanding, the technical solution of the embodiment of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for enabling a device (which can be a single-chip microcomputer, chip, etc.) or a processor (processor) to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0184] The above content is only a specific embodiment of this application, but the scope of protection of this application is not limited to this. Any changes or replacements within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

Claims

1. An image display method, characterized in that: include: In response to the terminal device starting to charge, displaying a first charging animation on the display screen of the terminal device; The first charging animation effect is obtained based on multiple frames of the second picture, and the multiple frames of the second picture include a first mapped image element, which is mapped based on the first image element included in the first picture.

2. The method according to claim 1, characterized in that The first picture includes a picture; or, The first picture includes multiple pictures, all of the multiple pictures include the first image element, and different pictures include different features of the first image element; the number of pictures included in the first picture is less than or equal to a quantity threshold.

3. The method according to claim 1 or 2, characterized in that The first image is pre-stored in the terminal device.

4. The method according to any one of claims 1 to 3, characterized in that The method further comprises: Obtaining the current charging status of the terminal device; In response to the current charging state of the terminal device being a first charging state, the first image element is determined to be an image element corresponding to the first charging state.

5. The method according to claim 4, characterized in that The charging status includes a charging mode and / or a charge status.

6. The method according to claim 4 or 5, characterized in that In response to the terminal device currently being in a first charging state, determining that the first image element is an image element corresponding to the first charging state includes: Obtaining a correspondence between a charging state and an image element; different charging states correspond to different image elements, or different charging states correspond to at least one image element with different characteristics; In response to the current charging state of the terminal device being the first charging state, the corresponding relationship is searched to determine that the first image element is the image element corresponding to the first charging state.

7. The method according to any one of claims 4 to 6, characterized in that The corresponding relationship between the charging status and the image elements is pre-stored in the terminal device.

8. The method according to any one of claims 4 to 7, characterized in that The method further comprises: In response to the current charging state of the terminal device being a second charging state, determining that the second image element is an image element corresponding to the second charging state; Obtaining a plurality of frames of fourth pictures based on the third picture including the second image element, wherein the plurality of frames of fourth pictures include the second mapped image element; Based on the multiple frames of the fourth picture, a second charging animation is displayed.

9. The method according to any one of claims 1 to 8, characterized in that Image elements include at least one of the following characteristics: The shape of the image element, the filling content of the image element, or the color of the image element.

10. The method according to any one of claims 1 to 9, characterized in that The method further comprises: determining a target area in the first image element that matches the first mapped image element to be calculated; Calculating a mapping relationship between the target area and the first mapping image element; Based on the mapping relationship, calculating a mapping result of the target area; The first mapping image element is composed according to the mapping result.

11. The method according to any one of claims 1 to 10, characterized in that The position information of the first mapped image element in the multiple frames of the second picture is different, and the position information at least includes a display position and a rotation angle.

12. A terminal device, characterized in that: The terminal device includes: a display screen, a memory, and one or more processors; the display screen, the memory, and the processor are coupled; the memory is used to store computer program code, and the computer program code includes computer instructions. When the computer instructions are executed by the terminal device, the terminal device executes the method described in any one of claims 1 to 11.

13. A computer-readable storage medium, characterized in that The computer-readable storage medium stores instructions, and when the instructions are executed in a terminal device, the terminal device executes the method according to any one of claims 1 to 11.

14. A computer program product, characterized in that The computer program product includes instructions, and when the instructions are executed in a terminal device, the terminal device executes the method according to any one of claims 1 to 11.

Images