Image display method and terminal device

Abstract

The application provides an image display method and a terminal device, and relates to the technical field of image processing. The method comprises the following steps: in response to starting charging, a terminal device displays a first charging dynamic effect on a display screen of the terminal device. The first charging dynamic effect can be obtained according to a plurality of second pictures. The plurality of second pictures comprise first mapping image elements, and the first mapping image elements are obtained based on first image elements comprised in first pictures. The scheme can realize the charging dynamic effect while occupying less storage space.

Description

Technical Field

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

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

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

[0004] This application provides an image display method and terminal device that can achieve charging animation effects while occupying less storage space.

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

[0006] In a first aspect, an image display method is provided, which can be applied to a terminal device. In response to the terminal device starting to charge, a first charging animation is displayed on the terminal device's screen. The first charging animation is obtained based on multiple frames of second images, each frame including a first mapped image element, which is mapped based on the first image element included in the first images.

[0007] By adopting the above technical solution, only one image needs to be acquired before displaying the charging animation. Since a single image occupies little storage space, it saves storage space on the terminal device. Furthermore, the terminal device can generate different mapped image elements by acquiring images containing different image elements, thereby achieving different charging animations, offering high flexibility. Additionally, the terminal device only needs to calculate the mapping relationship between image elements and mapped image elements, without needing to construct a model. Therefore, the computational load on the terminal device is small, reducing power consumption, and the faster calculation speed allows for faster display of the charging animation, improving the user's charging experience.

[0008] In one possible implementation of the first aspect, the first image comprises a single image; or, the first image comprises multiple images, each including a first image element, with different features of the first image elements included in different images; the number of images included in the first image is less than or equal to a number threshold. Compared to schemes that require many frames to compose an animation, the terminal device needs to acquire fewer first images, thus saving storage space.

[0009] In one possible implementation of the first aspect, the first image is pre-stored in the terminal device. Thus, when the terminal device responds to the start of charging, it can directly retrieve the corresponding first image from the images pre-stored in the terminal device, thereby improving the efficiency of generating charging animation effects.

[0010] In one possible implementation of the first aspect, the terminal device can obtain the current charging state and, in response to the current charging state of the terminal device being a first charging state, determine the first image element as the image element corresponding to the first charging state.

[0011] In one possible implementation of the first aspect, the charging state includes a charging mode and / or a power level. Different charging modes may correspond to different image elements, and different power levels may also correspond to different image elements; alternatively, different power levels may correspond to the same image element under the same charging mode, or different charging modes may correspond to the same image element under the same power level.

[0012] In one possible implementation of the first aspect, the terminal device can obtain the 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 features. Responding to the terminal device's current charging state being a first charging state, by looking up the correspondence, a first image element can be determined to be the image element corresponding to the first charging state.

[0013] In one possible implementation of the first aspect, the correspondence between charging states and image elements is pre-stored in the terminal device. Therefore, 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 a second charging state, a second image element is determined to be the image element corresponding to the second charging state. Then, the terminal device can obtain multiple frames of a fourth image based on a third image mapping including the second image element. These multiple frames of the fourth image include the second mapped image element. Based on these multiple frames of the fourth image, a second charging animation is displayed. Therefore, when charging restarts, if the terminal device switches its charging state, the corresponding image element can be re-determined, thereby generating the corresponding charging animation.

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

[0016] In one possible implementation of the first aspect, the terminal device can determine a target region in the first image elements that matches the first mapped image element to be calculated, and calculate the mapping relationship between the target region and the first mapped image element. Then, based on the mapping relationship, the terminal device can calculate the mapping result of the target region and compose the first mapped image element according to the mapping result.

[0017] In one possible implementation of the first aspect, the first image element can be a circular shape, and the first mapped image element can be a crescent shape. A region of the circular shape corresponding to the crescent shape is selected. The terminal device calculates the positional relationship between feature points in this region and feature points in the crescent shape, thereby calculating the mapping relationship between the region and the crescent shape. Finally, the terminal device can sample based on the mapping relationship and the content of the region, mapping the content of the region onto the crescent shape.

[0018] In one possible implementation of the first aspect, the positional information of the first mapped image elements differs across multiple frames of the second image. This positional information includes at least the display position and rotation angle. Therefore, by rendering multiple frames of the second image, a dynamic image showing the changing positional information of the first mapped image elements can be generated, achieving a charging animation effect.

[0019] In a second aspect, this application provides a terminal device, which includes: a display screen, a memory, and one or more processors; the display screen, the memory, and the processors are coupled; wherein the memory stores computer program code, the computer program code including computer instructions, which, when executed by the processor, cause the terminal device to perform the method described in any one of the first aspects above.

[0020] Thirdly, this application provides a computer-readable storage medium storing instructions that, when executed on a computer, enable the computer to perform the method described in any one of the first aspects above.

[0021] Fourthly, this application provides a computer program product containing instructions that, when run on a computer, enable the computer to perform the method described in any one of the first aspects above.

[0022] It is understood that the terminal device described in the second aspect, 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 they can achieve can be referred to the beneficial effects in the corresponding methods provided above, and will not be repeated here. Attached Figure Description

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

[0024] Figure 2 A schematic diagram illustrating the changes in some image frames in a charging animation displayed on a mobile phone interface, provided in an embodiment of this application.

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

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

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

[0028] Figure 6 A schematic diagram of a circular filling content provided in an embodiment of this application;

[0029] Figure 7 A schematic diagram illustrating a crescent shape formed by two circles inscribed within each other, as provided in an embodiment of this application;

[0030] Figure 8 A schematic diagram illustrating the intersection of two circles to form a crescent shape, provided as an embodiment of this application;

[0031] Figure 9 This is a schematic diagram illustrating the calculation of mapping relationships after two intersecting circles form a crescent shape, as provided in an embodiment of this application.

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

[0033] Figure 11 This is a schematic diagram of a chip system provided in an embodiment of this application. Detailed Implementation

[0034] The technical solutions of the embodiments of this application will now be described with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of them. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this application.

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

[0036] References to "one embodiment" or "some embodiments" as described in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, phrases such as "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of 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, the terms "exemplary" or "for example" are used to indicate that something is an example, illustration, or description. Any embodiment or design that is described as "exemplary" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design. Specifically, the use of the terms "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0038] This application provides an image display method that can be applied to a terminal device charging scenario. The terminal device charging can refer to the terminal device responding to the insertion of a wired charging device or the terminal device responding to being placed on a wireless charging device, obtaining the charging power / current of the charging device and charging, while displaying a charging screen on the terminal device's interface.

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

[0040] Taking wired charging as an example, after the charger is plugged into the phone, the phone can display a charging screen with animations on the phone's interface to provide charging information to the user. This charging information can include the charging mode and the amount of charge. The phone interface can refer to the lock screen or the system desktop. The charging mode refers to the device's operating state when it needs to replenish energy (electricity), typically involving disabling unnecessary functions to reduce energy consumption and improving energy conversion efficiency for faster charging.

[0041] In this application, displaying the charging screen with animation can refer to showing the charging status through dynamic images or animation effects during the charging process to provide visual feedback to the user. Displaying the charging screen with animation can be replaced with describing it as displaying charging animation or charging effects, and is not limited thereto.

[0042] Understandably, after a phone is plugged into a charger, the phone screen can display a charging animation for a preset duration. This preset duration could be 8 seconds, and there is no specific limit. If the phone screen turns off or the phone is used in response to user interaction while the charging animation is displayed, the charging animation will no longer be displayed.

[0043] For example, the terminal device is Figure 1 Taking the mobile phone 100 shown as an example, as Figure 1 As shown, after the charger 110 is plugged into the mobile phone 100, the charging animation 130 can be displayed on the interface of the mobile phone 100. Figure 1 The charging animation 130 shown is merely a screenshot illustrating a specific charging animation on a mobile phone at a particular moment. For a clearer illustration of the animation's progression, please refer to [link / reference needed]. Figure 2 , Figure 2 This is a schematic diagram illustrating the changes in some image frames during a charging animation displayed on a mobile phone interface, as provided in an embodiment of this application. Figure 2 The diagram shown is not of the overall changes to the charging animation, but rather of the changes to the main part of the charging animation. The main part here refers to the crescent-shaped section of the charging animation.

[0044] like Figure 2As shown in (a), the crescent shape 203 formed by the tangency of circles 201 and 202 has its opening facing left. Figure 2 As shown in (b), the crescent shape 203 formed by the tangency of circles 201 and 202 has its opening facing downwards. Figure 2 As shown in (c), the crescent shape 203 obtained by the tangency of circle 201 and circle 202 has its opening facing to the right.

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

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

[0047] In one approach, the phone can use frame animation to achieve the charging effect. Specifically, the phone loads multiple frames of images that make up the animation into a texture array, and then binds the texture array in a loop for drawing and rendering. The phone then displays the drawn and rendered images sequentially to achieve the charging effect. The image elements in each frame can be entirely or partially identical, without restriction. However, at least one image element in different frames must differ in position, shape, or color.

[0048] like Figure 3 As shown, the mobile phone can acquire 31 frames of images. The position of the finger part 301 in these 31 frames of images is different. 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 bound in a loop for drawing and rendering to display these 31 frames of images and achieve the charging effect.

[0049] In this context, "loop binding" refers to the phone binding multiple frames of images from a texture array sequentially, one frame at a time. For example, after binding one frame (Image 1), drawing and rendering it, and displaying that frame, the binding is removed. Then, the phone binds the next frame (Image 2), draws and renders it, and displays that frame. This process continues for each frame. Figure 3 The 31 frames of images are displayed sequentially, thus producing a continuous animation effect.

[0050] However, the above solutions have the following drawbacks: Implementing a charging animation requires multiple frames, resulting in a large storage footprint on the phone and potentially causing storage shortages. Furthermore, if multiple frames corresponding to a single charging animation are used as a single set of image resources, then multiple sets of image resources are needed if the phone supports multiple charging styles. Switching between charging styles requires switching the entire set of image resources, leading to a lack of flexibility. Additionally, loading a large number of images upon initial animation startup causes slow display of the charging animation, negatively impacting the user's charging experience.

[0051] In another approach, the phone can achieve charging animations by controlling the movement of the main part of the charging screen. For example, if the main part of the charging screen is a crescent shape formed by two tangent rings, and this crescent shape is filled with grid lines, the phone can model the grid lines and perform 3D rendering to obtain a model of the grid lines. Then, the phone can use its graphics engine to control the movement of the grid line model, thereby achieving the effect of the crescent rotating.

[0052] The other approach described above, while requiring less image loading and offering more precise and flexible control, requires a significant amount of computation from the phone to ensure a good charging animation, resulting in high power consumption. If the phone only controls the movement of the main body through simplified calculations, the animation effect often falls short of expectations. Furthermore, in charging scenarios, the phone interface typically needs to display charging animations quickly; however, the graphics engine's loading time is relatively long, affecting the speed at which the charging animations are displayed and consequently impacting the user's charging experience.

[0053] Therefore, this application provides an image display method applied to a terminal device, which displays a first charging animation on the display screen in response to the terminal device starting to charge. The terminal device can acquire a first image including first image elements, map the first image elements to obtain a first mapped image element, and generate a charging animation based on multiple frames of second images including the first mapped image elements. Each image occupies a small amount of storage space, saving storage space on the terminal device. Furthermore, the terminal device can acquire images containing different image elements to generate different mapped image elements, thereby achieving different charging animations, offering high flexibility. Also, the terminal device only needs to calculate the mapping relationship between the image elements and the mapped image elements, without needing to construct a model, thus reducing the computational load and power consumption of the terminal device. The faster computation speed also allows for faster display of the charging animation, improving the user's charging experience.

[0054] The software system of the terminal device can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application uses the layered architecture Android system as an example to illustrate the software structure of the terminal device.

[0055] Figure 4 This is a software structure block diagram of a terminal device according to an embodiment of this application.

[0056] A layered architecture divides software into several layers, each with a clear role and function. 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 can include applications such as Settings, Gallery, Calendar, Calls, Maps, Navigation, WLAN, Music, Video, and SMS.

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

[0060] The application framework layer provides application programming interfaces (APIs) and a programming framework for applications in the application layer. The application framework layer includes some predefined functions.

[0061] For example, the application framework layer may include the base framework and the BatteryService. The base framework includes the window manager, content provider, view system, resource manager, notification manager, etc.

[0062] For example, the window manager described above is used to manage window programs. The window manager can obtain the screen size, determine if a status bar is present, lock the screen, and capture the screen, etc. The content provider described above is used to store and retrieve data, and make this data accessible to applications. The data may include videos, images, audio, made and received phone calls, browsing history and bookmarks, phone books, etc.

[0063] The aforementioned view system can be used to construct the display interface of an application. Each display interface can consist of one or more controls. Generally, controls can include interface elements such as icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, and widgets.

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

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

[0066] The BatteryService provides interfaces for obtaining battery information, charging status, etc., such as charging plug-in / plug-out status, current charging type, and battery level. The charging plug-in / plug-out status indicates whether the phone and charger are properly connected, and the current charging type indicates the phone's charging type. After obtaining the current charging type, it is uploaded to the application layer as a flag.

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

[0068] The core library primarily provides basic Java class library functionalities, such as libraries for fundamental data structures, mathematics, I / O, tools, databases, and networking. It also provides APIs for users to develop Android applications.

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

[0070] The Surface Manager manages the display subsystem and provides 2D and 3D layer blending for multiple applications. The Media Framework supports playback and recording of various common audio and video formats, as well as still image files. The Media Library supports multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG. OpenGL ES provides drawing and manipulation of 2D and 3D graphics in applications. SQLite provides a lightweight relational database for applications on terminal devices.

[0071] The Hardware Abstraction Layer (HAL) runs in user space, encapsulates kernel-level drivers, and provides calling interfaces to higher layers. The HAL includes at least a display module.

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

[0073] The image display method provided in the embodiments of this application will now be described with reference to the accompanying drawings.

[0074] The technical method described in this application can be applied to the charging scenario of terminal devices. Figure 5 This is a flowchart illustrating an image display method provided in an embodiment of this application. This method can be executed by a terminal device, or by a chip or functional module within the terminal device, without limitation. In subsequent embodiments, a mobile phone will be used as an example for illustration. Figure 5 As shown, the specific steps include S100-S103:

[0075] S100: The mobile phone has a picture pre-stored, which includes the first image element.

[0076] This application does not limit the features of the first image element, which may include, but is not limited to, the shape, color, and fill content of the first image element. Optionally, the shape of the first image element may be a ring, a crescent, or a square ring, etc. 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, etc.

[0077] S101. In response to mobile phone charging, acquire a first image 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 animations based on an image containing at least one first image element with different features. For example, the mobile phone can generate different charging animations based on the different shapes of the first image element.

[0080] The shape of the first image element can be as follows: Figure 6 The image shown is a circular ring shape. A designated area within this ring can be mapped to a crescent shape. Then, by controlling the rotation of the crescent shape, a charging animation effect is achieved. Here, "image" refers to a texture map, an essential part of model creation that provides detailed visual information about the model's surface.

[0081] The size of the ring is determined by the radii of the inner and outer circles that make up the ring. The phone can change the generated charging animation by changing the size of the ring.

[0082] In this embodiment, the content filling the annulus is not limited. For example... Figure 6 As shown, the ring can be filled with a grid, lines, or a solid color. The phone can change the final animation effect by altering the form of the content filled within the ring.

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

[0084] In this embodiment, the mobile phone will be in different charging states when it starts charging. These charging states include charging mode and / or battery level. The mobile phone can pre-store the 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 features.

[0085] Before the phone acquires the image containing the first image element, it obtains the current charging state and then establishes the correspondence between the charging state and the image element. Responding to the phone's current charging state being the first charging state, the aforementioned correspondence is looked up, thus determining that the first image element corresponds to the first charging state.

[0086] The charging modes can be divided into SuperCharge, FastCharge, and NormalCharge. The phone can be pre-set with a mapping between charging modes and image elements. Then, after the phone detects the charger is plugged in, it can select an image containing the corresponding image elements 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 and charging cable are the standard charger and cable, since the standard charger usually includes a fast charging protocol and corresponding power compatible with the phone, the phone will enter fast charging mode. If the phone detects that the plugged-in charger and / or charging cable are non-standard chargers and / or non-standard charging cables, the phone will enter normal charging mode.

[0088] The battery status can be determined based on the battery percentage. For example, the first battery status is less than 30%, the second battery status is between 30% and 70%, and the third battery status is greater than 70%.

[0089] In this embodiment, the mobile phone can be pre-set with a correspondence between battery status and image elements. The mobile phone can select an image containing the corresponding image elements based on the obtained battery status.

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

[0091] When the phone detects a charger plugged in, it can select an image containing the corresponding image elements based on the current charging mode. Then, the phone calculates the mapped image elements based on these elements, selects the corresponding color based on the current battery level, and finally generates a charging animation based on the mapped image elements and the corresponding colors.

[0092] Specifically, after the phone calculates the mapped image elements based on the image elements in the selected image, it controls the rotation of the mapped image elements and performs rendering processing. Then, it multiplies the RGBA data of the output rendering result with the color to obtain the mixed color to be displayed, which is used as the color of the charging animation.

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

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

[0095] In this embodiment, the mobile phone can also control the rotation speed of the mapped image elements to achieve different charging animations. For example, if the charging mode is fast charging mode, the rotation speed of the mapped image elements is larger; if the charging mode is normal charging mode, the rotation speed of the mapped image elements is smaller.

[0096] Understandably, while a phone can switch charging modes in response to user input, it doesn't generate new charging animations based on the newly selected mode. Only after the charger is plugged back in will the phone re-determine the corresponding image elements based on the current charging status, map these image elements to obtain the mapped image elements, and then generate the corresponding charging animation.

[0097] For mobile phones, each charging mode corresponds to a texture map, which occupies very little storage space on the phone. The phone only needs to switch a single texture map to achieve different charging animations to adapt to different charging modes, offering high flexibility.

[0098] S102. Obtain the mapping image collected for the mapping result of the first image. The mapping image includes the first mapping image element corresponding to the first image element.

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

[0100] After determining the mapping relationship between the two, the mapping result of the target region can be calculated based on the target region in the image element and the mapping relationship, and the mapping image element can be formed based on the mapping result.

[0101] In this embodiment, the first image element is described in detail as having a circular shape.

[0102] First, since the phone's charging animation involves a crescent-shaped rotation, we can determine that the mapped shape of the annular shape needs to be calculated as a crescent shape. Specifically, two circles can form a crescent shape. This crescent shape can be obtained by two circles being tangent to or intersecting each other.

[0103] Here, "two circles tangent" means two circles with different radii are internally tangent. Internal tangency means that one circle is inside the other, and the two circles intersect at exactly one point. For example... Figure 7 As shown in (a), the crescent shape 603 is obtained by the tangency of circle 601 and circle 602, where circle 601 is the outer circle of the annulus.

[0104] The mobile phone can control the center of circle 602 to move in a circular motion, thereby rotating the crescent shape 603. For example... Figure 7 As shown in (a), the trajectory of the center of circle 602 is the dashed circle 604. When the center of circle 602 is at point A of the dashed circle 604, the crescent shape is as follows: Figure 7 As shown in (a), when the center of circle 602 moves to point B on circle 604, the crescent shape is as follows. Figure 7 As shown in (b).

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

[0106] Similarly, the mobile phone can also control the center of circle 702 to make it rotate, thus rotating the crescent shape 703. For example... Figure 8 As shown in (a), the trajectory of the center of circle 702 is the dashed circle 704. When the center of circle 702 is at point C of the dashed circle 704, the crescent shape is as follows: Figure 8 As shown in (a), when the center of circle 702 moves to point D on the dashed circle 704, the crescent shape is as follows: Figure 8 As shown in (b).

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

[0108] Here, the target circle refers to a circle that is partially or entirely inside the outer circle of the annulus. For example, the target circle is as follows: Figure 7 Circle 602 shown in (a) or Figure 8 Circle 702 is shown in (a).

[0109] For the target circle to be valid, 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 shape of the same size, two different crescent shapes can be obtained by intersecting or tangenting the target circle with the outer circle. Furthermore, by changing the size of the target circle, the phone can also change the final mapped crescent shape.

[0111] The crescent shape has two cusps. When two circles intersect, the two cusps of the resulting crescent shape are also the two points of intersection of the two circles. When two circles are tangent, the two cusps of the resulting crescent shape meet, which are also the points of tangency of the two circles.

[0112] In this scenario, the phone can define any point falling within the crescent shape as P′, and any point falling within the annulus as P. The mapping relationship between the annulus and the crescent can be considered as the mapping relationship between P and P′.

[0113] Next, we will explain in detail the process of calculating the mapping relationship between P and P′.

[0114] For a point P′ within the crescent shape formed by the target circle and the outer circle at a certain moment, if the position of point P′ within the corresponding crescent shape also moves as the target circle rotates, and since the center of the target circle undergoes circular motion, point P′ also undergoes circular motion within the corresponding crescent shape, that is, the trajectory of point P′ is a circle, denoted as trajectory circle 1.

[0115] Correspondingly, based on the mapping relationship between the annulus and the crescent shape, the point P located inside the annulus, which corresponds to the point P′ inside the crescent shape, also moves in a circle within the annulus. That is, the trajectory of point P is a circle, which is denoted as trajectory circle 2.

[0116] Based on the relationship between trajectory circle 1 and trajectory circle 2, a coordinate transformation relationship is established between point P′ and point P. Therefore, for each point within the crescent shape, according to the coordinate transformation relationship, there is a corresponding point within the annulus. Ultimately, the contents of the annulus can be mapped onto the crescent shape.

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

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

[0119] The trajectory of the center of circle 806 is the dashed circle 808, the trajectory of point P′ within the crescent shape is circle 809, and the trajectory of point P within the annulus is the dashed circle 810. Point P′ and point P form a pair with a mapping relationship.

[0120] Point P′ is a proportional mapping to point P. That is, if point P is located at half the width of the annulus, then the corresponding point P′ is also located at half the width of the crescent shape. The distance between the two intersection points of the line connecting the center of the circle and point P′ with the outer circle and the target circle represents the width of the crescent shape.

[0121] Since the target circle is tangent to the inner circle, meaning the widest part of the crescent shape is equal to the width of the annulus, points within the crescent shape will coincide with corresponding points within the annulus. Figure 8 The point of tangency E between circle 809 and dashed circle 810.

[0122] Therefore, after establishing the coordinate transformation relationship between point P′ and point P through circle 809 and dashed circle 810, the annular content starting from points F and G can be mapped to the crescent shape with F and G as its two cusps. The annular content starting from points F and G refers to the annular content facing the crescent shape between the line connecting point F to the center of circle 805 and the line connecting point G to the center of circle 805.

[0123] After determining the positional relationship between the circles, by constructing the equations of each circle and the known coordinates of each point, the equations of the locus of point P′ inside the crescent shape and the locus of point P inside the annulus can be calculated, thereby determining the mapping relationship between point P′ and point P.

[0124] First, the radii of the inner and outer circles of the annulus, 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. The centers of circle 805 (outer circle), circle 807 (inner circle), dashed circle 808 (the trajectory of the center H of circle 806), and dashed circle 810 (the trajectory of the point P) coincide.

[0126] Assuming the radius of circle 807 is R1, the radius of circle 805 is R3, and the radius of dashed circle 808 is R2, then the radius of circle 806 is the sum of the radii of circle 807 and dashed 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 the dashed circle 808, and point E. Assuming 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 aforementioned rectangular coordinate system are (R2cos(θ1+π), R2sin(θ1+π)). Assuming the coordinates of a point P′ on circle 809 in the aforementioned rectangular coordinate system are (x′, y′), solve the equations of circle 809 and the dashed circle 810.

[0128] If the center H of the target circle (circle 806) moves counterclockwise on circle 808, the angle value of θ1 will also increase. That is, the larger the angle value of θ1, the more the target circle is rotating, and therefore the crescent shape is also rotating. If the center H of the target circle (circle 806) is on the negative x-axis, then point E is also on the x-axis, and θ is 0. As the center of the target circle moves counterclockwise on the circle from the negative axis, the generated crescent shape also begins to rotate counterclockwise, and point E also rotates counterclockwise, with the corresponding value of θ increasing.

[0129] Based on the coordinates of the center H of circle 806, equation 1 of 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 of the aforementioned rectangular coordinate system, that is, the coordinates of the center of circle 805 are (0, 0), then equation 2 of circle 805 can be constructed as follows:

[0132] x 2 +y 2 =R3 2

[0133] Then, based on Equations 1 and 2 above, we can simplify to obtain Equation 3, as follows:

[0134]

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

[0136] Given the coordinates of point P′, point F, and point G, and since all three points lie on circle 809, we can determine the equation of circle 809 by simultaneously solving the equations of P′, F, and G. Here, we assume 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] Substituting the coordinates of point P′, point F, and point G into the equation of circle 809 above, we get the following:

[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, by solving the three equations above simultaneously, we can obtain a, b, and r.

[0142] Then, assuming the radius of the dashed circle 810 is r1, the coordinates of the point of tangency E on the dashed circle 810 in the aforementioned rectangular coordinate system are (r1cosθ1, r1sinθ1). Since the point of tangency E is also located on circle 809, the coordinates of the point of tangency E can be substituted into the equation of circle 809 obtained above, and then r1 can be calculated.

[0143] Therefore, the equation of the dashed circle 810 can be obtained, that is, x. 2 +y 2 =r1 2 .

[0144] Finally, after converting the coordinates (x′, y′) of point P′ on circle 809 in the rectangular coordinate system to polar coordinates (r′, θ′), the polar coordinates of point P on the dashed circle 810 are (r1, θ′). Determining the polar coordinates of points P′ and P facilitates a more intuitive representation of rotation; the 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, the mapping relationship between point P′ on circle 809 and point P on dashed circle 810 can be calculated. Then, the phone can map the content of the annulus to the crescent shape based on the mapping relationship between point P′ and point P. As can be seen, the phone only needs to calculate the mapping relationship between the annulus and the crescent shape to be displayed, resulting in low computational load and saving power consumption.

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

[0147] Startup efficiency power consumption (mA) Power consumption (mA) off for motion effects 319.62 307.89 317.58 310.10 Average: 318.6 Average: 308.9

[0148] Table 1

[0149] In this embodiment, the same calculation method can be applied to obtain a crescent shape by the inner tangency of the target circle and the outer circle. Specifically, the mobile phone can calculate the coordinates of the tangency point between the target circle and the outer circle by constructing the equations of the target circle and the outer circle. Then, the mobile phone substitutes the coordinates of the tangency point and the known coordinates of a point A′ inside the crescent shape into the corresponding trajectory circle of point A′ to determine the equation of the trajectory circle of point A′ inside the crescent shape. Furthermore, the mobile phone can substitute the tangency point between the trajectory circle of point A′ inside the crescent shape and the trajectory circle of point A corresponding to point A′ inside the ring into the equation of the trajectory circle of point A′ to determine the equation of the trajectory circle of point A inside the ring. Thus, the mobile phone can calculate the mapping relationship between a point A′ inside the crescent shape and the corresponding point A inside the ring by using the equations of the trajectory circles of the crescent shape and the corresponding points A inside the ring.

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

[0151] In this embodiment, after mapping the corresponding content in the ring to the crescent shape, the mobile phone can control the rotation of the target circle to rotate the crescent shape, generating multiple frames of crescent-shaped images containing different positional information. Then, the multiple frames are rendered to generate a charging animation. The positional information includes at least the display position and rotation angle.

[0152] In summary, when a terminal device displays a charging animation in response to the start of charging, it can obtain an image containing image elements, map the image elements in the image to obtain mapped image elements, and then generate a charging animation based on multiple frames of images including the mapped image elements.

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

[0154] The embodiments of this application will now be described in detail with reference to the accompanying drawings. Taking a mobile phone as an example, the hardware structure of the mobile phone 1000 will be described. Figure 10 A schematic diagram of the hardware structure of a mobile phone 1000 is shown. (For example...) 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 pressure sensors, gyroscope sensors, barometric pressure sensors, magnetic sensors, accelerometers, distance sensors, proximity sensors, fingerprint sensors, temperature sensors, touch sensors, ambient light sensors, bone conduction sensors, etc.

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

[0157] Processor 1010 may include one or more processing units, such as: application processor (AP), modem processor, graphics processing unit (GPU), image signal processor (ISP), controller, memory, video codec, digital signal processor (DSP), baseband processor, and / or neural network processing unit (NPU), etc. The different processing units may be independent devices or integrated into one or more processors.

[0158] The controller can serve as the central nervous system and command center of the mobile phone 1000. Based on the instruction operation code and timing signals, the controller generates operation control signals to control the fetching and execution of instructions.

[0159] The processor 1010 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 1010 is a cache memory. This memory can store instructions or data that the processor 1010 has just used or that are used repeatedly. If the processor 1010 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 1010, and thus improves the efficiency of the system.

[0160] In some embodiments, the processor 1010 may include one or more interfaces. 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 subscribing identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc.

[0161] It is understood that the interface connection relationships between the modules illustrated in the embodiments of this application are merely illustrative and do not constitute a structural limitation on the mobile phone 1000. In other embodiments of this application, the mobile phone 1000 may also adopt different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

[0162] The charging management module 1040 receives charging input from a charger. The charger can be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 1040 receives charging input from the wired charger via a USB interface 1030. In some wireless charging embodiments, the charging management module 1040 receives 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 supply 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 power the processor 1010, internal memory 1021, external memory, display 1094, camera, and wireless communication module 1060, etc.

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

[0165] The wireless communication function of 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 one or more 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 some other embodiments, the antennas can be used in conjunction with a tuning switch.

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

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

[0169] In this embodiment, the display screen 1094 can display charging animation.

[0170] The 1000 mobile phone can achieve shooting functions through ISP, camera, video codec, GPU, display 1094 and application processor.

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

[0172] The internal memory 1021 can be used to store computer executable program code, which includes 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. The program storage area may store the operating system, at least one application program required for a function (such as sound playback, image playback, etc.), etc. The data storage area may store data created during the use of the mobile phone 1000 (such as audio data, phonebook, etc.). Furthermore, the internal memory 1021 may include high-speed random access memory and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc.

[0173] A touch sensor, also known as a "touch device," can be located on the display screen 1094. The touch sensor and the display screen 1094 together form a touchscreen, also known as a "touchscreen." The touch sensor detects touch operations applied to or near it. The touch sensor can then transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 1094. In some embodiments, the touch sensor may also be located on the surface of the electronic device 1000, in a different position than the display screen 1094.

[0174] In this embodiment, the touch sensor can detect user clicks, swipes, and other actions on the display screen. The USB connector 1030 is a USB standard-compliant interface used to connect the mobile phone 1000 to peripheral devices, specifically a Mini USB connector, Micro USB connector, USB Type-C connector, etc. The USB connector 1030 can be used to connect a charger to charge the mobile phone 1000, or to connect other terminal devices to enable data transfer 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. This connector can also be used to connect other terminal devices, such as VR devices. In some embodiments, the Universal Serial Bus standard specification can be USB 1.x, USB 2.0, USB 3.x, and USB 4.

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

[0176] This application also provides a chip system, such as... 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 are interconnected via lines. For example, the interface circuit 1102 can be used to receive signals from other devices (e.g., the memory of a terminal device). As another example, the interface circuit 1102 can be used to send signals to other devices (e.g., the processor 1101). Exemplarily, the interface circuit 1102 can read instructions stored in the memory and send those instructions to the processor 1101. When the instructions are executed by the processor 1101, the terminal device can perform the steps in the above embodiments. Of course, the chip system may also include other discrete devices, and this application embodiment does not specifically limit this.

[0177] This application also provides a computer storage medium that includes computer instructions. When the computer instructions are executed on the terminal device, the terminal device performs various functions or steps performed by the mobile phone in the above method embodiment.

[0178] This application also provides a computer program product that, when run on a computer, causes the computer to perform various functions or steps performed by the mobile phone in the above method embodiments.

[0179] Through the above description of the embodiments, those skilled in the art can clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In actual applications, the above 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 apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another device, or some features may be ignored or not executed. Furthermore, the mutual coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms.

[0181] The units described as separate components may or may not be physically separate. A component shown as a unit can be one or more physical units; that is, it can be located in one place or distributed in multiple different locations. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0182] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0183] If the integrated unit is implemented as 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 solutions of the embodiments of this application, essentially, or the parts that contribute to the prior art, or all or part of the technical solutions, can be embodied in the form of a software product. This software product is stored in a storage medium and includes several instructions to cause a device (which may be a microcontroller, chip, etc.) or processor to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0184] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. An image display method, characterized in that, include: In response to the terminal device starting to charge, a first charging animation is displayed on the display screen of the terminal device; The first charging animation is obtained based on multiple frames of second images. The multiple frames of second images include a first mapped image element. The first mapped image element is mapped based on the first image element included in the first image. The first image includes one or more images, and the number of images included in the first image is less than or equal to a number threshold.

2. The method according to claim 1, characterized in that, The first image element is included in all of the multiple images, but the features of the first image element included in different images are different.

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

4. The method according to claim 1, characterized in that, The method further includes: Obtain the current charging status of the terminal device; In response to the terminal device's current charging state 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 charging mode and / or power status.

6. The method according to claim 4, characterized in that, The step of determining the first image element as the image element corresponding to the first charging state in response to the current charging state of the terminal device being a first charging state includes: Obtain the correspondence between charging state and image elements; different charging states correspond to different image elements, or different charging states correspond to at least one image element with different features; In response to the terminal device's current charging state being a 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-6, characterized in that, The correspondence 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-6, characterized in that, The method further includes: In response to the terminal device's current charging state being a second charging state, the second image element is determined to be the image element corresponding to the second charging state; A multi-frame fourth image is obtained based on a third image mapping that includes the second image elements, wherein the multi-frame fourth image includes the second mapped image elements; Based on the aforementioned multi-frame fourth image, a second charging animation is displayed.

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

10. The method according to any one of claims 1-6, characterized in that, The method further includes: Determine the target region in the first image element that matches the first mapped image element to be calculated; Calculate the mapping relationship between the target region and the first mapped image element; Based on the mapping relationship, the mapping result of the target region is calculated; The first mapped image elements are formed based on the mapping results.

11. The method according to any one of claims 1-6, characterized in that, The position information of the first mapped image element in the multiple frames of the second image is different, and the position information includes at least the display position and the 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 processors are coupled; the memory is used to store computer program code, the computer program code including computer instructions, which, when executed by the terminal device, cause the terminal device to perform the method as described in any one of claims 1-11.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores instructions that, when executed in a terminal device, cause the terminal device to perform the method as described in any one of claims 1 to 11.

14. A computer program product, characterized in that, The computer program product includes instructions that, when executed in a terminal device, cause the terminal device to perform the method as described in any one of claims 1 to 11.

Images