Display method, electronic equipment and storage medium

Abstract

The embodiment of the invention discloses a display method, electronic equipment and a storage medium, and belongs to the technical field of terminals.The display method comprises the steps that a first content image and a plurality of first content templates are obtained, and each first content template is provided with one or more display areas; in response to the change of a terminal display interface from a first display state to a second display state, playing the plurality of first content templates in the change process; determining a first content template in the current playing sequence and a second content image obtained by processing based on the first content image; and displaying the second content image on at least one display area of the first content template in the current playing sequence.

Description

Technical Field

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

[0002] As smartphones and other terminals have become an indispensable part of daily life, terminal wallpapers, as miniature canvases of personality and emotion, have gradually attracted the attention of many users.

[0003] Although there are many wallpapers in terminals, they are usually colorful static pictures. Even if there are some dynamic video wallpapers, they are only integrated with fixed loop animations or visual effects, which are relatively simple and cannot meet the growing demand for personalization and interactivity. Summary of the invention

[0004] In a first aspect, an embodiment of the present application provides a display method, comprising: Acquire a first content image and a plurality of first content templates, each of the first content templates having one or more display areas; In response to the terminal display interface changing from the first display state to the second display state, playing the plurality of first content templates during the changing process; Determine a first content template in a current playback order and a second content image obtained based on the first content image; The second content image is displayed on at least one display area of ​​the first content template in the current play order.

[0005] In some embodiments, the one or more display areas are determined at least based on multiple first transformation parameters in the corresponding playback order of the first content template, and the second content image is obtained by transforming the first content image using multiple second transformation parameters in the playback order, the multiple first transformation parameters include a first translation vector, a first scaling factor and a first rotation angle, and the multiple second transformation coefficients include a second translation vector and a second scaling factor; wherein in the current playback order, the first translation vector is the same as the second translation vector, and the first scaling factor is different from the second scaling factor.

[0006] In some embodiments, it also includes: Move the central pixel point of the first content template in the current playback order to the origin of the coordinate system of the terminal display interface to obtain the first content template after initial transformation; Using the first translation vector in the current playback order, the first content template after the initial transformation is subjected to translation transformation to obtain the first content template after the translation transformation; Performing a scaling transformation on the first content template after the translation transformation using the aspect ratio of the terminal display interface to obtain the first content template after the scaling transformation; Using the first rotation angle in the current playback order, the first content template after the scaling transformation is rotated to obtain the first content template after the rotation transformation; Performing an inverse scaling transformation on the first content template after the rotation transformation using the aspect ratio to obtain the inverse scaling transformation of the first content template; Performing a secondary scaling transformation on the first content template after the inverse scaling transformation using the aspect ratio and the first scaling coefficient in the current playback order to obtain the first content template after the secondary scaling transformation; The central pixel point of the first content template after the secondary scaling transformation is moved to the central point of the terminal display interface.

[0007] In some embodiments, it also includes: Moving a central pixel point of the first content image to the origin of a coordinate system of a terminal display interface to obtain an initially transformed first content image; Using the second translation vector in the current playback order, the first content image after the initial transformation is subjected to translation transformation to obtain the first content image after the translation transformation; Using the second scaling factor in the current playback order, scaling the first content image after the translation transformation is performed to obtain the first content image after the scaling transformation; The first content image after the scaling transformation is moved to the center point of the terminal display interface to obtain the second content image.

[0008] In some embodiments, before transforming the first content image, the method further includes: Determine the blur radius under the current playback order; Gaussian blur processing is performed on the first content image based on the blur radius in the current playback order.

[0009] In some embodiments, the first display state is the screen off display state, and the second display state is the screen locked display state, and during the process of the terminal display interface changing from the screen off display state to the screen locked display state, the blur radius gradually decreases; or, the first display state is the screen locked display state, and the second display state is the screen off display state, and during the process of the terminal display interface changing from the screen locked display state to the screen off display state, the blur radius gradually increases.

[0010] In some embodiments, it also includes: Determining a convolution area of ​​a first pixel in the first content image in the current playback order based on the blur radius in the current playback order; A weighted sum is performed on the pixel value of each pixel point in the convolution area, and the weighted sum result is used as the blurred pixel value of the first pixel point.

[0011] In some embodiments, it also includes: Determining that the convolution region exceeds an image boundary of the first content image; For a second pixel point in the convolution region that is beyond an image boundary of the first content image, determining a pixel value of the second pixel point as a pixel value of an adjacent boundary pixel point corresponding to the second pixel point; A weighted sum is performed on the pixel value of each pixel point in the convolution area, and the weighted sum result is used as the blurred pixel value of the first pixel point.

[0012] In some embodiments, the one or more display areas include one display area, on which the second content image is displayed; or, the one or more display areas include multiple display areas, on which the second content image is displayed a first display area of ​​the multiple display areas, and a single color is displayed in one or more second display areas of the multiple display areas.

[0013] In some embodiments, it also includes: Extracting a first texture coordinate color from a first content template in a current playback order, wherein the first texture coordinate is a texture coordinate determined after a plurality of first transformation parameters are passed through; Extracting a second texture coordinate color from the transformed second content image, wherein the second texture coordinate is determined after the texture coordinate is subjected to a plurality of second transformation parameters; extracting a dominant color from the first content image; Using a blending function, the black color, the primary color, and the red component in the first texture coordinate color are mixed to obtain a first rendering color; Using the mixing function, the first rendering color, white, and the blue component in the first texture coordinate color are mixed to obtain a second rendering color; Using the blending function, the second rendering color, the second texture coordinate color, and the green component in the first texture coordinate color are mixed to obtain a third rendering color; The third rendering color is displayed on the one or more display areas of the first content template in the current play order, so that the second content image is displayed on at least one display area.

[0014] In a second aspect, an embodiment of the present application provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, any of the methods described above is implemented.

[0015] In a third aspect, an embodiment of the present application provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements any of the methods described above.

[0016] In a fourth aspect, an embodiment of the present application provides a computer program product, including a computer program, which implements any of the methods described above when executed by a processor. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the technical solutions in the present application or the prior art, a brief introduction will be given below to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0018] Figure 1 A schematic diagram of the structure of a terminal provided in one embodiment of the present application; Figure 2 A schematic diagram of a flow chart of a display method provided in one embodiment of the present application; Figure 3 One of the scenario schematic diagrams provided for an embodiment of the present application; Figure 4 A second schematic diagram of a scenario provided for an embodiment of the present application; Figure 5 A schematic diagram of the structure of an electronic device provided for one embodiment of the present application. DETAILED DESCRIPTION

[0019] In order to make the purpose, technical solutions and advantages of this application clearer, the technical solutions in this application will be clearly and completely described below in conjunction with the drawings in this application. Obviously, the described embodiments are part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0020] The terms "first", "second", etc. in the specification and claims of the present application are used to distinguish similar objects, and are not used to describe a specific order or sequence. It should be understood that the terms used in this way are interchangeable under appropriate circumstances, so that the embodiments of the present application can be implemented in an order other than those illustrated or described here, and the objects distinguished by "first" and "second" are generally of the same type, and the number of objects is not limited. For example, the first object can be one or more. In addition, "and / or" in the specification and claims represents at least one of the connected objects, and the character " / " generally represents that the objects associated with each other are in an "or" relationship.

[0021] In today's era where smartphones and other smart terminals are deeply integrated into daily life, wallpapers, as a subtle medium for personalized expression and emotional transmission, are attracting more and more attention from users. Traditional wallpapers are mostly static. Even if there are some dynamic video wallpapers, they are often just simple animation loops, lacking real-time interaction with user emotions or the external environment. They are relatively simple and difficult to meet the growing demand for personalization and interactivity.

[0022] To this end, the present application provides a display method that combines static content images with dynamic content templates to achieve dynamic visual effects related to changes in terminal display status through real-time transformation of parameters.

[0023] The display method provided in the embodiments of the present application can be applied to terminals such as mobile phones, tablet computers, wearable devices, vehicle-mounted devices, augmented reality (AR) / virtual reality (VR) devices, laptop computers, ultra-mobile personal computers (UMPC), netbooks, personal digital assistants (PDA), etc., and can also be applied to databases, servers, and service response systems based on terminal artificial intelligence. The embodiments of the present application do not impose any restrictions on the specific types of terminals.

[0024] For example, the terminal can be a station (STAION, ST) in a WLAN, a cellular phone, a cordless phone, a Session Initiation Protocol (SIP) phone, a Wireless Local Loop (WLL) station, a Personal Digital Assistant (PDA) device, a handheld device with wireless communication function, a computing device or other processing device connected to a wireless modem, a computer, a laptop computer, a handheld communication device, a handheld computing device, and / or other devices for communicating on a wireless system and a next-generation communication system, such as a mobile terminal in a 5G network, a mobile terminal in a future evolved Public Land Mobile Network (PLMN), or a mobile terminal in a future evolved Non-terrestrial Network (NTN), etc.

[0025] As an example but not limitation, when the terminal is a wearable device, the wearable device can also be a general term for wearable devices that are intelligently designed and developed by applying wearable technology to daily wear, such as gloves, watches, AR (Augmented Reality) head-mounted display devices, VR (Virtual Reality) head-mounted display devices or MR (Mixed Reality) head-mounted display devices, etc., which are equipped with far-field communication modules and / or near-field communication modules.

[0026] In some embodiments, the terminal may be a Figure 1 The mobile phone 100 of the hardware structure shown in FIG. Figure 1 As shown, the mobile phone 100 may specifically include: a radio frequency (RF) circuit 110, a memory 120, an input unit 130, a display unit 140, a sensor 150, an audio circuit 160, a short-range wireless communication module 170, a processor 180, and a power supply 190. Those skilled in the art will appreciate that Figure 1 The structure of the mobile phone 100 shown in the figure does not constitute a limitation on the electronic device, and the electronic device may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

[0027] Combine the following Figure 1 A detailed introduction to the various components of the mobile phone: The RF circuit 110 can be used for receiving and sending signals during information transmission or calls. In particular, after receiving the downlink information of the base station, it is sent to the processor 180 for processing; in addition, the designed uplink data is sent to the base station. Generally, the RF circuit includes but is not limited to an antenna, at least one amplifier, a transceiver, a coupler, a low noise amplifier (Low Noise Amplifier, LNA), a duplexer, etc. In addition, the RF circuit 110 can also communicate with the network and other devices through wireless communication. The above-mentioned wireless communication can use any communication standard or protocol, and the wireless communication can include global system for mobile communications (global system for mobile communications, GSM), general packet radio service (general packet radio service, GPRS), code division multiple access (code division multiple access, CDMA), wideband code division multiple access (wideband code division multiple access, WCDMA), time division code division multiple access (time-division code division multiple access, TD-SCDMA), long term evolution (long term evolution, LTE), new radio (new radio, NR), GNSS, FM, low orbit satellite connection and / or IR technology, etc. The GNSS may include a global positioning system (GPS), a global navigation satellite system (GLONASS), a Beidou navigation satellite system (BDS), a quasi-zenith satellite system (QZSS) and / or a satellite based augmentation system (SBAS), etc.

[0028] The memory 120 can be used to store software programs and modules. The processor 180 executes various functional applications and data processing of the mobile phone by running the software programs and modules stored in the memory 120. The memory 120 may mainly include a program storage area and a data storage area, wherein the program storage area may 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 may store data created according to the use of the mobile phone (such as pictures, audio data, phone books, etc.), etc. In addition, the memory 120 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, or other volatile solid-state storage devices. Specifically, the memory 120 may store pictures taken by an electronic device or downloaded via a wireless network.

[0029] The input unit 130 can be used to receive input digital or character information, and to generate key signal input related to the user settings and function control of the mobile phone 100. Specifically, the input unit 130 may include a touch panel 131 and other input devices 132. The touch panel 131, also known as a touch screen, can collect the user's touch operation on or near it (such as the user's operation on the touch panel 131 or near the touch panel 131 using any suitable object or accessory such as a finger, stylus, etc.), and drive the corresponding connection device according to a pre-set program. Optionally, the touch panel 131 may include two parts: a touch detection device and a touch controller. Among them, the touch detection device detects the user's touch orientation, detects the signal brought by the touch operation, and transmits the signal to the touch controller; the touch controller receives the touch information from the touch detection device, converts it into the touch point coordinates, and then sends it to the processor 180, and can receive and execute the command sent by the processor 180. In addition, the touch panel 131 can be implemented in various types such as resistive, capacitive, infrared, and surface acoustic wave. In addition to the touch panel 131, the input unit 130 may also include other input devices 132. Specifically, other input devices 132 may include but are not limited to one or more of a physical keyboard, function keys (such as volume control keys, switch keys, etc.), a trackball, a mouse, a joystick, etc.

[0030] The display unit 140 can be used to display information input by the user or information provided to the user and various menus of the mobile phone. The display unit 140 may include a display panel 141. Optionally, the display panel 141 may be configured in the form of a liquid crystal display (LCD), a light emitting diode (LED), an organic light emitting diode (OLED), an active-matrix organic light emitting diode (AMOLED), etc. Further, the touch panel 131 may cover the display panel 141. When the touch panel 131 detects a touch operation on or near it, it is transmitted to the processor 180 to determine the type of touch event. Subsequently, the processor 180 provides a corresponding visual output on the display panel 141 according to the type of touch event. Although in Figure 1 In the embodiment, the touch panel 131 and the display panel 141 are used as two independent components to realize the input and output functions of the mobile phone, but in some embodiments, the touch panel 131 and the display panel 141 can be integrated to realize the input and output functions of the mobile phone.

[0031] The mobile phone 100 may also include at least one sensor 150, such as a light sensor, a motion sensor, and other sensors. Specifically, the light sensor may include an ambient light sensor and a proximity sensor, wherein the ambient light sensor may adjust the brightness of the display panel 141 according to the brightness of the ambient light, and the proximity sensor may turn off the display panel 141 and / or the backlight when the mobile phone is moved to the ear. As a type of motion sensor, the accelerometer sensor can detect the magnitude of acceleration in all directions (generally three axes), and can detect the magnitude and direction of gravity when stationary. It can be used for applications that identify the posture of the mobile phone (such as horizontal and vertical screen switching, related games, magnetometer posture calibration), vibration recognition related functions (such as pedometer, tapping), etc.; as for other sensors that can be configured in the mobile phone, such as gyroscopes, barometers, hygrometers, thermometers, infrared sensors, etc., they will not be repeated here.

[0032] The audio circuit 160, the speaker 161, and the microphone 162 can provide an audio interface between the user and the mobile phone. The audio circuit 160 can transmit the received audio data to the speaker 161 after converting the received audio data into an electrical signal, which is converted into a sound signal for output; on the other hand, the microphone 162 converts the collected sound signal into an electrical signal, which is received by the audio circuit 160 and converted into audio data, and then the audio data is output to the processor 180 for processing, and then sent to another electronic device through the RF circuit 110, or the audio data is output to the memory 120 for further processing.

[0033] Communication technologies such as Wi-Fi, Bluetooth, and Near Field Communication (NFC) belong to short-range wireless transmission technologies. The mobile phone can help users send and receive emails, browse web pages, access streaming media, etc. through the short-range wireless module 170, which provides users with wireless broadband Internet access. The above-mentioned short-range wireless module 170 may include a Wi-Fi chip, a Bluetooth chip, and an NFC chip. The Wi-Fi chip can realize the function of Wi-Fi Direct connection between the mobile phone 100 and other electronic devices, and can also make the mobile phone 100 work in an AP mode (Access Point mode) that can provide wireless access services and allow other wireless devices to access, or work in a STA mode (Station mode) that can connect to an AP but does not accept wireless devices to access, thereby establishing point-to-point communication between the mobile phone 100 and other Wi-Fi devices.

[0034] The processor 180 is the control center of the mobile phone. It uses various interfaces and lines to connect various parts of the entire mobile phone. It executes various functions of the mobile phone and processes data by running or executing software programs and / or modules stored in the memory 120, and calling data stored in the memory 120, so as to monitor the mobile phone as a whole. Optionally, the processor 180 may include one or more processing units; optionally, the processor 180 may include, for example, an application processor (application processor, AP), a modem processor, a graphics processor (graphics processing unit, GPU), an image signal processor (image signal processor, ISP), a controller, a video codec, a digital signal processor (digital signal processor, DSP), a baseband processor, and / or a neural-network processing unit (neural-network processing unit, NPU), etc. Among them, different processing units can be independent devices or integrated in one or more processors.

[0035] The mobile phone 100 also includes a power source 190 (such as a battery) for supplying power to various components. Preferably, the power source can be logically connected to the processor 180 through a power management system, so that the power management system can manage functions such as charging, discharging, and power consumption.

[0036] The mobile phone 100 may also include a camera. Optionally, the position of the camera on the mobile phone may be front-mounted or rear-mounted, which is not limited in the embodiments of the present application. The mobile phone may collect a scene image of the current scene through the camera, and determine the scene information and the scene type by analyzing the scene image.

[0037] Figure 2 This is one of the flow charts of the display method provided in the embodiment of the present application. Figure 2 As shown, a display method is provided, including the following steps: step 210, step 220, step 230 and step 240. The steps of the method flow are only used as a possible implementation mode of the present application.

[0038] Step 210: Acquire a plurality of first content templates of a first content image, each of which has one or more display areas; Exemplarily, the first content image is a static image, which may be a photo, an icon, or any other image. Multiple first content templates may be video frames obtained from a wallpaper video or other video, or may be a collection of preset images, which is not a limitation of the present application. The first content template may be understood as a container for carrying the transformed second content image, and each first content template includes one or more display areas, each display area carrying different display content.

[0039] For example, each display area may have a different shape, size, position, and color component (e.g., only red component, only blue component, or only green component). In one example, the one or more display areas are determined based on at least a plurality of first transformation parameters in a corresponding playback order of the first content template, such as the size, shape, position, and color component of the display area may change with the playback order (or time), or the size, shape, and position of the display area may change with the playback order, while the color component of each display area is fixed and does not change with the playback order.

[0040] For example, see Figure 3 A- Figure 3 As shown in B, Figure 3 A shows that the first content template 30a includes a first display area 301, a second display area 302a and a second display area 302b, the second display area 302a may surround the first display area 301, and the first display area 301 and the second display area 302a may cover at least a portion of the second display area 302b. The first display area 301 may include only a green component, the second display area 302a may include only a blue component, and the second display area 302b may include only a red component. Figure 3B shows that the first content template 30b includes a third display area 303, and the third display area 303 only includes a green component. The first content template 30a and the second content template 30b represent different playback orders. For example, the first content template 30a is played in the first display state, and the second content template 30b is played in the second display state. It can be understood that in the process of switching from the first display state to the second display state, multiple first content templates in different playback orders can also be included to achieve a smooth visual transition from 30a to 30b. Alternatively, the first content template 30b is played in the first display state, and the second content template 30a is played in the second display state. The number, size, shape and position of the display areas in the first content template under different playback orders are different.

[0041] Specifically, in some embodiments, one or more display areas of the first content template are determined based on a plurality of first transformation parameters associated with each of them, such as translation parameters (i.e., movement of the image on the terminal display interface), scaling parameters (i.e., adjustment of the image size), and rotation parameters (i.e., rotation of the image around a certain point). Specifically, in different playback sequences or time points, the display areas in different first content templates will have different translation amounts, scaling ratios, and rotation angles, and such changes make the first content templates at different time points present different visual effects.

[0042] Step 220: In response to the terminal display interface changing from the first display state to the second display state, playing the plurality of first content templates during the changing process; The terminal display interface state change refers to the terminal display interface of the terminal switching from one display state (such as the screen-off state) to another display state (such as the screen-locked state).

[0043] In this embodiment, when the display interface of the terminal device switches from the first display state to the second display state, the first content template will be played in the order of the playback of the first content template or the time start sequence until the playback ends. Therefore, the embodiment of the present application can realize a dynamic display state switching process, for example, in the process of switching from the screen-off state to the screen-locked state, the animation effect of playing multiple first content templates can be realized. In this process, the change of the display area on the first content template can be reflected in real time on the terminal display interface, for example, in the process of changing, the first content template 30a is smoothly transitioned to the second content template 30b.

[0044] It is understood that in the process of changing from the first display state to the second display state, the play order of the multiple first content templates may be played in forward order, and in the process of changing from the second display state to the first display state of the terminal display interface, the play order of the multiple first content templates may be played in reverse order. Or the above play order may be opposite, which is not a limitation of the present application.

[0045] Step 230: Determine a first content template in the current playback order and a second content image obtained by processing the first content image; The present application determines the first content template in the current playback order, for example, the first content template 30a corresponds to the start of playback and the first content template 30b corresponds to the end of playback, and further processes the first content image, such as translation and scaling, to obtain the second content image, and displays the processed second content image on at least one display area during the subsequent playback of the first content template.

[0046] In one example, the first content image is transformed using a plurality of second transformation parameters in a playback order to obtain the second content image.

[0047] Similarly, when the display interface of the terminal device changes from the first display state to the second display state, a plurality of second transformation parameters, such as translation, scaling, rotation or other image transformation operations, are also determined based on the current playback order.

[0048] Then, the first content image is transformed according to a plurality of second transformation parameters determined in the current play sequence, thereby obtaining a second content image in the current play sequence.

[0049] Step 240: Display the second content image on at least one display area of ​​the first content template in the current playback order.

[0050] Finally, the transformed second content image is superimposed on at least one display area of ​​the first content template in the current playback order. In this way, during the switching of the display state, as the first content template is played, the changes in the display area are dynamically displayed and the visual effect of at least one display area being always coupled with the static content image is realized. This is equivalent to obtaining a dynamic video combining a dynamic template and a static image. The above dynamic video can be used in various switching processes of the display state of the terminal display interface, thereby improving interactive expectations.

[0051] In a Figure 3In the example shown in A, the first content template 30a includes a first display area 301, a second display area 302a and a second display area 302b. The first display area 301 is used to display the second content image obtained after transformation, the second display area 302a displays a pure color image, such as white, to enhance the visual contrast of the wallpaper, and the second display area 302b is used to present the main color of the second content image (i.e., the color block with the highest color ratio in the second content image) to ensure that the overall color tone of the wallpaper remains consistent. Therefore, in the final display effect, the first display area 301 displays the second content image obtained after transformation, the second display area 302a surrounds the first display area 301 and presents a bright monochrome color to highlight the content in the first display area 301, and the second display area 302b displays the extracted main color to enhance the overall visual effect.

[0052] For example, see Figure 4 As shown, it shows that the transformed second content image 410 is displayed on at least one display area (such as the first display area 301) of the aforementioned first content template 30a, thereby forming an image 420 in the current playback order.

[0053] In some other examples, the transformed second content image 410 may also be displayed in the second display area 302a and the second display area 302b, thereby achieving different visual effects.

[0054] It can be understood that since the first content template 30b includes only one third display area 303, when the play order reaches the first content template 30b, the third display area 303 will display a transformed second content image. For example, if the first content template 30b is configured to be displayed in the lock screen state, it can be understood that the third display area 303 and the second content image are completely corresponding to the terminal display interface, that is, the second content image covers the entire terminal display interface.

[0055] It should be noted that the first content template described above in this article may be a video frame in a video (or called an animation video) played during the display state change process. The above video may be, for example, pre-designed by a visual designer, so that during the playback of the above video, a second content image may be displayed on at least one display area of ​​the video frame, following the dynamic change process of at least one display area.

[0056] In an embodiment of the present application, by combining a static first content image and a dynamic first content template, a dynamic and diverse visual effect is provided during the terminal display state switching process; according to the state change of the terminal display interface, the first content template corresponding to the current playback order and the second content image obtained after the transformation processing are determined and displayed in real time, thereby achieving seamless integration of the first content image and the dynamic first content template, and enhancing the smoothness of the visual effect during the display state switching.

[0057] It should be noted that each implementation method of the present application can be freely combined, the order can be changed, or it can be executed separately, and does not need to rely on or depend on a fixed execution order.

[0058] In some embodiments, the one or more display areas include one display area, on which the second content image is displayed; or, the one or more display areas include multiple display areas, on which the second content image is displayed a first display area of ​​the multiple display areas, and a single color is displayed in one or more second display areas of the multiple display areas.

[0059] See, for example, the foregoing Figure 3 An example of Figure 3 The first content template 30a shown in A may include three display areas, namely, a first display area 301, a second display area 302a and a second display area 302b. The first display area 301 is used to display the second content image, and the second display area 302a and the second display area 302b are both used to display monochrome. Figure 3 The first content template 30b shown in B may include a display area, namely, a third display area 303, and the third display area 303 is used to display a second content image.

[0060] It can be understood that when the first content template includes only one display area, the display area directly carries the display of the second content image. Figure 3 The third display area 303 in green in B is used as a display area for displaying the second content image.

[0061] When the first content template includes multiple display areas, the multiple display areas can be divided into two categories, one type of display area (i.e., the first display area 301) is used to display the second content image, and the other type of display area is used to display a single color, such as pure black, pure white, or a single color extracted from the second content image. Figure 3Taking A as an example, this visual effect includes a first display area 301 showing green, a second display area 302a showing blue, and a second display area 302b showing red. The green display area, as the first display area, is used to display the second content image to ensure that the user can intuitively obtain the core visual information. In addition, the red display area and the blue display area, as the second display area, respectively display different monochromes. These monochromes add rich layering and color contrast to the entire one or more display areas.

[0062] In some embodiments, it also includes: Extracting a first texture coordinate color from a first content template in a current playback order, wherein the first texture coordinate is a texture coordinate determined after a plurality of first transformation parameters are passed through; Extracting a second texture coordinate color from the transformed second content image, wherein the second texture coordinate is determined after the texture coordinate is subjected to a plurality of second transformation parameters; extracting a dominant color from the first content image; Using a blending function, black, the primary color, and a red component in the first texture coordinate color are mixed to obtain a first rendering color; Using the mixing function, the first rendering color, white, and the blue component in the first texture coordinate color are mixed to obtain a second rendering color; Using the blending function, the second rendering color, the second texture coordinate color, and the green component in the first texture coordinate color are mixed to obtain a third rendering color; The third rendering color is displayed on the one or more display areas of the first content template in the current play order, so that the second content image is displayed on at least one display area.

[0063] It can be understood that for any texture coordinate of the terminal display interface, it can obtain the texture coordinate under the first content template after passing through multiple first transformation parameters, or it can obtain the texture coordinate under the second content image after passing through multiple second transformation parameters, that is, a mapping relationship between the texture coordinate under the first content template and the texture coordinate under the second content image is established.

[0064] Here, the texture coordinates of the first content template videoTex are defined as videoUV, and the texture coordinates of the second content image blurTex are defined as contentUV. The main color of the first content image is mainColor, black is blackColor, recorded as (0,0,0,1), and white is whiteColor, recorded as (1,1,1,1).

[0065] First, from the first content template videoTex in the current playback order, combined with the texture sampling function texture, the first texture coordinate color videoColor of the pixel point with texture coordinate videoUV is extracted, videoColor=texture(videoTex, videoUV). Similarly, from the second content image blurTex, combined with the texture sampling function texture, the second texture coordinate color blurColor of the pixel point with texture coordinate contentUV is extracted, blurColor=texture(blurTex, contentUV). It can be understood that videoUV and contentUV are mapped to each other.

[0066] Furthermore, a main color mainColor is extracted from the first content image, for example, a color with higher saturation, brightness and other attributes in the first content image is selected as the main color, or a color with a larger display area in the first content image is selected as the main color.

[0067] In one example, a plurality of colors are extracted from the first content image; and a dominant color is extracted from the plurality of colors based on the color proportion of each color in the first content image.

[0068] Here, multiple colors can be automatically identified and extracted from the first content image by a color extraction algorithm (such as the Palette.Swatch color extraction algorithm). After extracting multiple colors, the color proportion of each color in the first content image is calculated, that is, each pixel of the first content image is traversed, and the pixel is classified into a color in the previously extracted color set according to its color value. Then, the number of pixels of each color is counted, and its color proportion is calculated. Finally, based on the color proportion of each color, a color with the highest color proportion is selected from multiple colors as the main color.

[0069] After respectively extracting the first texture coordinate color videoColor, the second texture coordinate color blurColor and the main color mainColor, the mixing function mix is ​​used to mix the black color blackColor, the main color mainColor and the red component videoColor.r in the first texture coordinate color videoColor to obtain the first rendering color color1, color1=mix(blackColor, mainColor, videoColor.r); here, the closer the value of the red component videoColor.r in the first texture coordinate color videoColor is to 1, the closer the first rendering color is to the main color mainColor; conversely, the closer the value of the red component videoColor.r in the first texture coordinate color videoColor is to 0, the closer the mixing result is to black blackColor.

[0070] Next, use the mix function to mix the first rendering color color1, white whiteColor, and the blue component videoColor.b in the first texture coordinate color videoColor to obtain the second rendering color color2, color2=mix(color1, whiteColor, videoColor.b); similarly, the closer the value of the blue component videoColor.b in the first texture coordinate color videoColor is to 1, the closer the second rendering color is to white whiteColor; conversely, the closer the value of the blue component videoColor.b in the first texture coordinate color videoColor is to 0, the closer the mixing result is to the first rendering color color1.

[0071] Finally, the mix function is used to mix the second rendering color color2, the second texture coordinate color blurColor and the green component videoColor.g in the first texture coordinate color videoColor to obtain the third rendering color finalColor, finalcolor=mix(color2, blurColor, videoColor.g); similarly, the closer the value of the green component videoColor.g in the first texture coordinate color videoColor is to 1, the closer the third rendering color is to the second texture coordinate color blurColor, that is, the closer it is to displaying the second content image); conversely, the closer the value of the green component videoColor.g in the first texture coordinate color videoColor is to 0, the closer the mixing result is to the second rendering color color2.

[0072] Finally, the third rendering color is displayed on the one or more display areas of the first content template in the current play order, so that the second content image is displayed on at least one display area.

[0073] It can be understood that in the present application, the texture color of the display area in the first content template affects the final display result of the display area. The display area presenting red texture ultimately displays maincolor, that is, the main color; the display area presenting blue texture ultimately displays whitecolor, that is, white; and the display area presenting green texture ultimately displays the second texture coordinate color, that is, the second content image itself.

[0074] In some embodiments, the plurality of first transformation parameters include a first translation vector, a first scaling factor, and a first rotation angle, and the plurality of second transformation coefficients include a second translation vector and a second scaling factor.

[0075] Specifically, one or more display areas of the first content template are determined based on at least a first translation vector, a first scaling factor, and a first rotation angle.

[0076] Here, the first translation vector determines the movement direction and distance of the first content template on the terminal display interface, so that the first content template can move dynamically on the terminal display interface over time; the first zoom factor controls the size change of the first content template, allowing the first content template to be enlarged to emphasize its importance, or allowing the first content template to be reduced to downplay its importance; the first rotation angle allows the first content template to rotate around the center point to increase visual dynamics.

[0077] Likewise, the first content image is transformed using a second translation vector and a second scaling factor to coordinate with one or more display regions of the first content template.

[0078] Here, the second translation vector allows the first content image to move on the terminal display interface, and the second scaling factor adjusts the size of the first content image to be combined with the first content template.

[0079] In one example, the first translation vector of the first content template in the current playback order is the same as the second translation vector of the first content image. Specifically, if the first content template in the current playback order is moved 10 pixels to the right and 5 pixels downward according to the first translation vector, the first content image in the current playback order will also be translated in the same way, that is, it is also moved 10 pixels to the right and 5 pixels downward. This ensures that the relative position of the first content template and the translated first content image on the terminal display interface is always consistent.

[0080] In one example, the first scaling factor of the first content template and the second scaling factor of the first content image in the current playback order are different. Specifically, in the subsequent image processing process, in order to ensure that the first content template can perfectly adapt to the size of the terminal display interface while maintaining its original aspect ratio and shape, it is also necessary to perform an appropriate scaling transformation on the first content template based on the first scaling factor. Similarly, the first content image also needs to be scaled according to the second scaling factor to adapt to the requirements of one or more sub-display areas combined with the first content template. However, due to the difference in size between the first content template and the first content image, the first scaling factor of the first content template and the second scaling factor of the first content image will also be different.

[0081] It can be understood that after the first content image undergoes the above translation and scaling processing, the second content image described in this article is obtained.

[0082] In some embodiments, it also includes: Move the central pixel point of the first content template in the current playback order to the origin of the coordinate system of the terminal display interface to obtain the first content template after initial transformation; Using the first translation vector in the current playback order, the first content template after the initial transformation is subjected to translation transformation to obtain the first content template after the translation transformation; Performing a scaling transformation on the first content template after the translation transformation using the aspect ratio of the terminal display interface to obtain the first content template after the scaling transformation; Using the first rotation angle in the current playback order, the first content template after the scaling transformation is rotated to obtain the first content template after the rotation transformation; Performing an inverse scaling transformation on the first content template after the rotation transformation using the aspect ratio to obtain the inverse scaling transformation of the first content template; Performing a secondary scaling transformation on the first content template after the inverse scaling transformation using the aspect ratio and the first scaling coefficient in the current playback order to obtain the first content template after the secondary scaling transformation; The central pixel point of the first content template after the secondary scaling transformation is moved to the central point of the terminal display interface.

[0083] Here, the original texture coordinates of the first content template are defined as originUV1, translate is a first translation vector of type vec2, which indicates the offset of translating the first content template on a two-dimensional plane; videoScale is a first scaling factor of type float, which is used to control the size of the first content template on the terminal display interface. By increasing or decreasing this factor, the first content template can be made to look larger or smaller. aspect is a variable of type float, which indicates the aspect ratio of the terminal display interface. videoRotate is a variable of type float, which indicates the first rotation angle of the content template around its center point.

[0084] In this embodiment, first, the original texture coordinates originUV1 of the first content template are subtracted by (0.5, 0.5) to perform an initial transformation, and the texture coordinates uv1 of the first content template after the initial transformation are uv1=originUV1-(0.5,0.5).

[0085] Typically, the texture coordinate range of the first content template is a square area of ​​[0, 1]. The center pixel of the first content template is located at (0.5, 0.5). In this embodiment, by taking the center pixel of the first content template as a reference, the original texture coordinate originUV1 of the first content template is subtracted from (0.5, 0.5), and the center pixel of the first content template is moved to the origin of the coordinate system of the terminal display interface, so that subsequent scaling, rotation and other operations will be performed based on the new center pixel (0, 0).

[0086] Then, the first translation vector translate is applied to perform a translation transformation on the first content template after the initial transformation, and the texture coordinates uv2=uv1+translate of the first content template after the translation transformation.

[0087] It should be understood that when rotating the first content template, if the aspect ratio of the image does not match the aspect ratio of the screen, the rotated image may be stretched or compressed, resulting in image deformation. Therefore, in this embodiment, before the rotation transformation, the aspect ratio aspect of the terminal display interface is used to perform a scaling transformation on the first content template after the translation transformation. Specifically, the texture coordinates v3=uv2×(1,1 / aspect) of the first content template after the scaling transformation.

[0088] Here, the rotateRadian function is used to perform a rotation transformation on uv3 in combination with the first rotation angle videoRotate, and the texture coordinate v4=rotateRadian(uv3,videoRotate) of the first content template after the rotation transformation is obtained.

[0089] in, , here, uv=uv3, α=videoRotate.

[0090] Here, since the scaling transformation of the first content template after the translation transformation using the aspect ratio of the terminal display interface changes the actual proportion of the image in the texture space, in order to restore the correct proportion of the image after rotation, the first content template after the rotation transformation is also reversely adjusted in this embodiment. The texture coordinates of the first content template after the inverse scaling transformation are uv5=uv4 / (1,1 / aspect).

[0091] Then, the first scaling factor videoScale is applied to perform a secondary scaling transformation on the first content template after the inverse scaling transformation. Here, since the aspect ratio of the first content template may be different from the aspect ratio of the screen, directly mapping the first content template may cause the image to be stretched or compressed when displayed on the screen. Therefore, in this embodiment, the aspect ratio aspect of the terminal display interface is continued to be used for scaling transformation, and the texture coordinates of the first content template after the secondary scaling transformation are v6=uv5×videoScale×(1,1 / aspect).

[0092] Finally, since the center pixel of the first content template is initially moved to the origin of the coordinate system of the terminal display interface, the center pixel of the first content template after the secondary scaling transformation is finally moved to the center point of the terminal display interface. Specifically, the texture coordinates of the first content template after translation, rotation, and scaling transformation are videoUV=uv6+(0.5,0.5).

[0093] In an embodiment of the present application, the first content template is translated, rotated, and scaled by taking into account multiple factors such as the aspect ratio of the terminal display interface, the first translation vector, the first rotation angle, and the first scaling factor, thereby ensuring that the first content template after the translation, rotation, and scaling transformation can adapt to the size of the terminal display interface and maintain the integrity of the image content.

[0094] In some embodiments, it also includes: Moving a central pixel point of the first content image to the origin of a coordinate system of a terminal display interface to obtain an initially transformed first content image; Using the second translation vector in the current playback order, the first content image after the initial transformation is subjected to translation transformation to obtain the first content image after the translation transformation; Using the second scaling factor in the current playback order, scaling the first content image after the translation transformation is performed to obtain the first content image after the scaling transformation; The first content image after the scaling transformation is moved to the center point of the terminal display interface to obtain the second content image.

[0095] Similarly, the original texture coordinates of the first content image are defined as originUV2, translate is a second translation vector of type vec2, indicating the offset of translating the first content image on the two-dimensional plane; contentScale is a second scaling factor of type float, used to control the size of the first content image on the terminal display interface.

[0096] In this embodiment, first, the original texture coordinates originUV2 of the first content image are subtracted by (0.5, 0.5) to perform an initial transformation, and the texture coordinates uv7 of the first content image after the initial transformation are equal to originUV2-(0.5, 0.5).

[0097] Typically, the texture coordinate range of the first content image is a square area of ​​[0, 1]. The center pixel of the first content image is located at (0.5, 0.5). Similarly, by taking the center pixel of the first content image as a reference, subtracting (0.5, 0.5) from the original texture coordinate originUV2 of the first content image, the center pixel of the first content image is moved to the origin of the coordinate system of the terminal display interface, so that subsequent scaling, rotation and other operations will be performed based on the new center pixel (0, 0).

[0098] Then, the second translation vector translate is applied to perform a translation transformation on the first content image after the initial transformation, and the texture coordinates of the first content image after the translation transformation are uv8=uv7+translate.

[0099] Next, the second scaling factor contentScale is applied to scale the first content image after the translation transformation. The texture coordinates v9 of the first content image after the scaling transformation are v9=uv8×contentScale.

[0100] Finally, since the center pixel point of the first content image is initially moved to the origin of the coordinate system of the terminal display interface, the center pixel point of the first content image after scaling transformation is finally moved to the center point of the terminal display interface to obtain the second content image. Specifically, the texture coordinates of the first content image after translation and scaling transformation are contentUV=uv9+(0.5,0.5).

[0101] In some embodiments, before transforming the first content image, the method further includes: Determine the blur radius under the current playback order; Gaussian blur processing is performed on the first content image based on the blur radius in the current playback order.

[0102] Specifically, a blur radius is determined according to the current playback order. The blur radius is a key parameter that determines the intensity of the subsequent Gaussian blur processing.

[0103] In one example, the blur radius can be determined based on a preset time point, such as setting a series of key time points according to the progress of playing the multiple first content templates, each key time point corresponding to a specific blur radius value. As the multiple first content templates are played, the current time point is automatically detected and the blur radius is adjusted accordingly.

[0104] In another example, when the terminal display interface changes from the off-screen display state to the locked screen display state, that is, the first display state is the off-screen display state and the second display state is the locked screen display state. In order to enhance the user's visual experience and clearly display the information on the lock screen interface (such as time, date, notification, etc.), the blur radius gradually decreases from the maximum blur radius maxBlurRadius to 0.

[0105] On the contrary, when the terminal display interface changes from the lock screen display state to the off screen display state, that is, the first display state is the lock screen display state, and the second display state is the off screen display state, the blur radius gradually increases from 0 to the maximum blur radius maxBlurRadius, so that the image gradually becomes blurred.

[0106] Here, the maximum blur radius maxBlurRadius may be determined based on the set blur effect. The stronger the blur effect, the larger the value of the maximum blur radius maxBlurRadius. The weaker the blur effect, the smaller the value of the maximum blur radius maxBlurRadius.

[0107] In one example, it also includes: Determining a convolution area of ​​a first pixel in the first content image in the current playback order based on the blur radius in the current playback order; A weighted sum is performed on the pixel value of each pixel point in the convolution area, and the weighted sum result is used as the blurred pixel value of the first pixel point.

[0108] After the blur radius is determined, Gaussian blur processing is performed on the first content image in combination with the blur radius, and pixel values ​​in the image are smoothed to reduce the details and clarity of the image, thereby generating a blur effect.

[0109] It should be understood that Gaussian blur is a blur effect achieved through a convolution operation. The convolution operation involves a matrix called a "convolution kernel" that slides over the image and takes a weighted sum of the area around each pixel (the convolution area).

[0110] In this embodiment, the size of the convolution region of each pixel is determined based on the blur radius in the current playback order. The larger the blur radius, the larger the convolution region. When determining the convolution region, a square or circular convolution region is usually defined based on the size of the blur radius, with the current first pixel as the center. For example, when the convolution region is a square region, the width of the convolution region is usually twice the blur radius plus one to ensure that all relevant pixels are included.

[0111] Then, the pixel values ​​of each pixel in the convolution area are weighted and summed in combination with the Gaussian function. The Gaussian function assigns weights according to the distance between each pixel and the central pixel. The closer the distance, the greater the weight, and the farther the distance, the smaller the weight. Specifically, for each pixel in the convolution area of ​​the first pixel, calculate its distance from the first pixel, and obtain the corresponding weight value from the Gaussian function based on this distance. Then, multiply the pixel value of each pixel by its weight value, and add all the weighted pixel values ​​to obtain the weighted sum result. Finally, the weighted sum result is used as the blurred pixel value of the first pixel.

[0112] In some embodiments, it also includes: Determining that the convolution region exceeds an image boundary of the first content image; For a second pixel point in the convolution region that is beyond an image boundary of the first content image, determining a pixel value of the second pixel point as a pixel value of an adjacent boundary pixel point corresponding to the second pixel point; A weighted sum is performed on the pixel value of each pixel point in the convolution area, and the weighted sum result is used as the blurred pixel value of the first pixel point.

[0113] Here, in the Gaussian blur processing, when the convolution operation is performed on the first pixel at the edge of the image, there may be a situation where the convolution area exceeds the image boundary. Therefore, in this embodiment, when it is detected that the convolution area exceeds the image boundary of the first content image, that is, the texture coordinates of a certain pixel in the convolution area exceed the texture coordinate range of the first content image, such as [0, 1], then for the second pixel in the convolution area that is outside the texture coordinate range of the first content image, the pixel value of the corresponding adjacent boundary pixel is used to fill the pixel value of the second pixel that exceeds the boundary. If the texture coordinate of the second pixel is less than 0, the pixel value of the corresponding adjacent boundary pixel is 0, and if the texture coordinate of the second pixel is greater than 1, the pixel value of the corresponding adjacent boundary pixel is 1.

[0114] Finally, the pixel value of each pixel in the convolution area is weighted and summed in combination with the Gaussian function, and the weighted sum result is used as the blurred pixel value of the first pixel.

[0115] In an embodiment of the present application, by performing a convolution operation on the first pixel point of the convolution area that exceeds the image boundary and filling it with the pixel values ​​of the adjacent boundary pixels, it is ensured that the Gaussian blur processing can obtain a consistent and natural effect on the entire image.

[0116] Figure 5 An example of a physical structure diagram of an electronic device is shown in FIG. Figure 5 As shown, the electronic device may include: a processor 510, a communication interface 520, a memory 530 and a communication bus 540, wherein the processor 510, the communication interface 520 and the memory 530 communicate with each other through the communication bus 540. The processor 510 may call the logic instructions in the memory 530 to execute the display method, which includes: Acquire a first content image and a plurality of first content templates, each of the first content templates having one or more display areas; In response to the terminal display interface changing from the first display state to the second display state, determining a first content template in a current playback order and a second content image obtained by processing the first content image; The second content image is displayed on at least one display area of ​​the first content template in the current play order.

[0117] In addition, the logic instructions in the above-mentioned memory 530 can be implemented in the form of a software functional unit and can be stored in a computer-readable storage medium when it is sold or used as an independent product. Based on this understanding, the technical solution of the present application can be essentially or partly embodied in the form of a software product that contributes to the prior art. The computer software product is stored in a storage medium, including several instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc. Various media that can store program codes.

[0118] On the other hand, the present application further provides a computer program product, the computer program product comprising a computer program, the computer program may be stored on a non-transitory computer-readable storage medium, and when the computer program is executed by a processor, the computer can execute the display method provided by the above-mentioned method embodiments, the method comprising: Acquire a first content image and a plurality of first content templates, each of the first content templates having one or more display areas; In response to the terminal display interface changing from the first display state to the second display state, determining a first content template in a current playback order and a second content image obtained by processing the first content image; The second content image is displayed on at least one display area of ​​the first content template in the current play order.

[0119] In another aspect, the present application further provides a non-transitory computer-readable storage medium having a computer program stored thereon, and when the computer program is executed by a processor, the display method provided by the above-mentioned method embodiments is implemented, and the method includes: Acquire a first content image and a plurality of first content templates, each of the first content templates having one or more display areas; In response to the terminal display interface changing from the first display state to the second display state, determining a first content template in a current playback order and a second content image obtained by processing the first content image; The second content image is displayed on at least one display area of ​​the first content template in the current play order.

[0120] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative labor.

[0121] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, can also be implemented by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0122] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit it. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A display method, comprising: Acquire a first content image and a plurality of first content templates, each of the first content templates having one or more display areas; In response to the terminal display interface changing from the first display state to the second display state, playing the plurality of first content templates during the changing process; Determine a first content template in a current playback order and a second content image obtained based on the first content image; The second content image is displayed on at least one display area of ​​the first content template in the current play order.

2. The display method according to claim 1, wherein: The one or more display areas are determined based on at least a plurality of first transformation parameters in a playback order corresponding to the first content template, the second content image is obtained by transforming the first content image using a plurality of second transformation parameters in the playback order, the plurality of first transformation parameters include a first translation vector, a first scaling factor, and a first rotation angle, and the plurality of second transformation coefficients include a second translation vector and a second scaling factor; in In the current playback order, the first translation vector is the same as the second translation vector, and the first scaling factor is different from the second scaling factor.

3. The display method according to claim 2, further comprising: Move the central pixel point of the first content template in the current playback order to the origin of the coordinate system of the terminal display interface to obtain the first content template after initial transformation; Using the first translation vector in the current playback order, the first content template after the initial transformation is subjected to translation transformation to obtain the first content template after the translation transformation; Performing a scaling transformation on the first content template after the translation transformation using the aspect ratio of the terminal display interface to obtain the first content template after the scaling transformation; Using the first rotation angle in the current playback order, the first content template after the scaling transformation is rotated to obtain the first content template after the rotation transformation; Performing an inverse scaling transformation on the first content template after the rotation transformation using the aspect ratio to obtain the inverse scaling transformation of the first content template; Performing a secondary scaling transformation on the first content template after the inverse scaling transformation using the aspect ratio and the first scaling coefficient in the current playback order to obtain the first content template after the secondary scaling transformation; The central pixel point of the first content template after the secondary scaling transformation is moved to the central point of the terminal display interface.

4. The display method according to claim 2, further comprising: Moving a central pixel point of the first content image to the origin of a coordinate system of a terminal display interface to obtain an initially transformed first content image; Using the second translation vector in the current playback order, the first content image after the initial transformation is subjected to translation transformation to obtain the first content image after the translation transformation; Using the second scaling factor in the current playback order, scaling the first content image after the translation transformation is performed to obtain the first content image after the scaling transformation; The first content image after the scaling transformation is moved to the center point of the terminal display interface to obtain the second content image.

5. The display method according to claim 2, wherein: Before transforming the first content image, the method further includes: Determine the blur radius under the current playback order; Gaussian blur processing is performed on the first content image based on the blur radius in the current playback order.

6. The display method according to claim 5, wherein: The first display state is the screen off display state, the second display state is the screen locked display state, and during the process of the terminal display interface changing from the screen off display state to the screen locked display state, the blur radius gradually decreases; or, the first display state is the screen locked display state, the second display state is the screen off display state, and during the process of the terminal display interface changing from the screen locked display state to the screen off display state, the blur radius gradually increases.

7. The display method according to claim 5, further comprising: Determining a convolution area of ​​a first pixel in the first content image in the current playback order based on the blur radius in the current playback order; A weighted sum is performed on the pixel value of each pixel point in the convolution area, and the weighted sum result is used as the blurred pixel value of the first pixel point.

8. The display method according to claim 7, further comprising: Determining that the convolution region exceeds an image boundary of the first content image; For a second pixel point in the convolution region that is beyond an image boundary of the first content image, determining a pixel value of the second pixel point as a pixel value of an adjacent boundary pixel point corresponding to the second pixel point; A weighted sum is performed on the pixel value of each pixel point in the convolution area, and the weighted sum result is used as the blurred pixel value of the first pixel point.

9. The display method according to claim 1, wherein: The one or more display areas include one display area, and the second content image is displayed on the one display area; or, the one or more display areas include multiple display areas, and the second content image is displayed on a first display area of ​​the multiple display areas, and a monochrome image is displayed on one or more second display areas of the multiple display areas.

10. The display method according to claim 1, further comprising: Extracting a first texture coordinate color from a first content template in a current playback order, wherein the first texture coordinate is a texture coordinate determined after a plurality of first transformation parameters are passed through; Extracting a second texture coordinate color from the transformed second content image, wherein the second texture coordinate is determined after the texture coordinate is subjected to a plurality of second transformation parameters; extracting a dominant color from the first content image; Using a blending function, the black color, the primary color, and the red component in the first texture coordinate color are mixed to obtain a first rendering color; Using the mixing function, the first rendering color, white, and the blue component in the first texture coordinate color are mixed to obtain a second rendering color; Using the blending function, the second rendering color, the second texture coordinate color, and the green component in the first texture coordinate color are mixed to obtain a third rendering color; The third rendering color is displayed on the one or more display areas of the first content template in the current play order, so that the second content image is displayed on at least one display area.

11. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the method according to any one of claims 1 to 10 is implemented.

12. A non-transitory computer-readable storage medium having a computer program stored thereon, wherein the computer program implements the method according to any one of claims 1 to 10 when executed by a processor.

Images