Image ripple display method and device, electronic equipment and storage medium

Abstract

The invention relates to an image ripple display method and device, electronic equipment and a storage medium, and the method comprises the steps: obtaining a to-be-displayed image and configuration information corresponding to the to-be-displayed image, determining target cycle time, at least one piece of center point information and boundary region information corresponding to the center point information according to the configuration information, and carrying out the calculation of the target cycle time for each piece of center point information; performing pixel point sampling on the to-be-displayed image according to the target period time to obtain a target sampling point, performing analysis based on the target sampling point in combination with the boundary region information to generate offset information corresponding to the target sampling point, and then performing image ripple rendering in combination with the to-be-displayed image according to the offset information to generate a target ripple display image; therefore, image ripple rendering is carried out through one to-be-displayed image, the purpose of displaying the ripple special effect can be achieved, and the problem that in the prior art, when a dynamic special effect image is displayed through a large number of frame pictures, the file size becomes large abnormally is solved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to an image ripple display method, device, electronic device and storage medium. Background Art

[0002] With the development of society, the design of various applications is also becoming increasingly diversified. To present users with more exciting images, dynamic special effects images, such as water ripple effects and fog effects, are often displayed in the interface. To display dynamic special effects images, designers need to design the special effects using professional special effects production software, and then export the corresponding dynamic effect materials to the client R&D department for rendering. For example, when implementing a water ripple dynamic effect simulation, designers can only export the corresponding sequence of frames of the entire dynamic special effect image one by one in the form of frame animation, and then play them in sequence to achieve the dynamic special effect image effect.

[0003] Although the above method can export and play each set of animations in the form of sequence frames in the form of frame animation to achieve the purpose of displaying dynamic special effects images; however, the number of frames that need to be exported in this process is large. For example, a dynamic special effects image contains 8 sets of animations, and each set of animations contains 30 sequence frames. Then, to display the dynamic special effects image, 240 images need to be exported. At this time, the file size will become abnormally large, which is not conducive to the development and maintenance of the application. Summary of the Invention

[0004] The present application provides an image ripple display method, device, electronic device and storage medium to solve the problem of abnormally large file size when displaying dynamic special effect images through a large number of frame images in the existing related technology.

[0005] In a first aspect, the present application provides an image ripple display method, comprising:

[0006] Acquire an image to be displayed and configuration information corresponding to the image to be displayed, wherein the configuration information is information pre-configured for performing special effects display on the image to be displayed;

[0007] Determine, based on the configuration information, a target cycle time, at least one center point information, and boundary area information corresponding to the center point information; wherein the target cycle time is the cycle time for refreshing the special effect display, the center point information is the center point of the special effect display, and the boundary area information is the boundary area for displaying the special effect;

[0008] For each center point information, pixel sampling is performed on the image to be displayed according to the target cycle time to obtain target sampling points;

[0009] Based on the target sampling point, combined with the boundary area information, analysis is performed to generate offset information corresponding to the target sampling point;

[0010] Image ripple rendering is performed based on the offset information and in combination with the image to be displayed to generate a target ripple display image.

[0011] Optionally, for each center point information, sampling pixels of the image to be displayed according to the target cycle time to obtain target sampling points includes:

[0012] For each piece of central point information, determining the central point position corresponding to the central point information;

[0013] Based on the image to be displayed, determining a collection boundary position corresponding to the center point information;

[0014] According to the target cycle time, periodic sampling is performed in combination with the center point position and the acquisition boundary position to obtain periodic sampling points;

[0015] The periodic sampling point is determined as the target sampling point.

[0016] Optionally, the generating offset information corresponding to the target sampling point by analyzing the target sampling point in combination with the boundary area information includes:

[0017] Determine the sampling point location and sampling time corresponding to the target sampling point;

[0018] Determining a boundary position interval corresponding to the boundary area information;

[0019] When the sampling point position is within the boundary position interval, the offset information is determined according to the sampling point position and the sampling time.

[0020] Optionally, determining the offset information based on the sampling point position and the sampling time includes:

[0021] Performing cycle positioning based on the sampling time and the target cycle time to obtain the sampling cycle time;

[0022] Based on the sampling point position, a distance analysis is performed in combination with the center point position corresponding to the center point information to obtain a sampling distance;

[0023] The sampling period and the sampling distance are used to perform offset calculation to obtain the offset information.

[0024] Optionally, performing image ripple rendering based on the offset information and in combination with the image to be displayed to generate a target ripple display image includes:

[0025] Determining a target offset corresponding to the offset information;

[0026] Determine a direction vector corresponding to the target sampling point based on the target sampling point and the center point position corresponding to the center point information;

[0027] generating texture adjustment information based on the direction vector and the target offset;

[0028] The image to be displayed is rendered in ripples using the texture adjustment information to generate the target ripple display image.

[0029] Optionally, performing image ripple rendering on the image to be displayed using the texture adjustment information to generate a target ripple display image includes:

[0030] Based on the image to be displayed, acquiring boundary area texture information corresponding to the boundary area information;

[0031] Using the texture adjustment information to perform texture adjustment on the texture information of the boundary area to obtain the texture information of the target boundary area;

[0032] Image ripple rendering is performed according to the texture information of the target boundary area to generate the target ripple display image.

[0033] Optionally, determining, based on the configuration information, a target cycle time, at least one center point information, and boundary area information corresponding to the center point information includes:

[0034] extracting target cycle time and center point information from the configuration information;

[0035] Obtaining image distribution information corresponding to the image to be displayed, wherein the image distribution information is distribution information of each area in the image to be displayed;

[0036] Based on the center point information and in combination with the image distribution information, boundary area positioning is performed to determine the boundary area information.

[0037] In a second aspect, the present application provides an image ripple display device, comprising:

[0038] An acquisition module, configured to acquire an image to be displayed and configuration information corresponding to the image to be displayed, wherein the configuration information is information pre-configured for performing special effects display on the image to be displayed;

[0039] a determination module, configured to determine, based on the configuration information, a target cycle time, at least one center point information, and boundary area information corresponding to the center point information; wherein the target cycle time is the cycle time for refreshing the special effect display, the center point information is the center point of the special effect display, and the boundary area information is the boundary area for performing the special effect display;

[0040] A sampling module is used to sample pixels of the image to be displayed according to the target cycle time for each center point information to obtain target sampling points;

[0041] An analysis module, configured to analyze the target sampling point in combination with the boundary area information to generate offset information corresponding to the target sampling point;

[0042] A rendering module is used to perform image ripple rendering based on the offset information and in combination with the image to be displayed to generate a target ripple display image.

[0043] In a third aspect, an electronic device is provided, comprising a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other via the communication bus;

[0044] Memory for storing computer programs;

[0045] The processor is configured to implement the image ripple display method described in any one of the first aspects when executing the program stored in the memory.

[0046] In a fourth aspect, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the image ripple display method as described in any one of the first aspects is implemented.

[0047] The image ripple display method, device, electronic device and storage medium provided by the embodiments of the present application obtain the image to be displayed and the configuration information corresponding to the image to be displayed, determine the target cycle time, at least one center point information and the boundary area information corresponding to the center point information based on the configuration information, and for each center point information, perform pixel sampling on the image to be displayed according to the target cycle time to obtain the target sampling point, and perform analysis based on the target sampling point in combination with the boundary area information to generate the offset information corresponding to the target sampling point, and then perform image ripple rendering in combination with the image to be displayed based on the offset information to generate the target ripple display image; thereby, the purpose of displaying ripple special effects can be achieved by performing image ripple rendering on one image to be displayed, without relying on a large number of frame images to display dynamic special effects images, which solves the problem of abnormally large file size when displaying dynamic special effects images through a large number of frame images in the existing related art. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] Figure 1 A schematic diagram of a flow chart of an image ripple display method provided in an embodiment of the present application;

[0049] Figure 2 A schematic diagram of an application scenario of an image ripple display device provided in an embodiment of the present application;

[0050] Figure 3 A schematic structural diagram of an image ripple display device provided in an embodiment of the present application;

[0051] Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0052] The following describes the embodiments of the present invention with reference to the accompanying drawings and preferred embodiments. Those skilled in the art will readily appreciate the other advantages and benefits of the present invention from the disclosure herein. The present invention may also be implemented or applied through various other specific embodiments, and the various details in this specification may be modified or altered based on different viewpoints and applications without departing from the spirit of the present invention. It should be understood that the preferred embodiments are intended only to illustrate the present invention and are not intended to limit the scope of protection of the present invention.

[0053] When displaying dynamic special effects images, existing related technologies usually export the entire animation sequence frame by frame in the form of frame animation. At this time, the number of exported frames is large, and the frame images corresponding to the dynamic special effects images cannot be exported to other smaller formats, such as json. Exporting in the form of json will cause the dynamic special effects to fail; that is, the dynamic special effects images will be larger in size. When there are multiple dynamic special effects images in an application, the size of the application will even increase abnormally. At this time, there will be high difficulties in both the generation of dynamic special effects images and the maintenance and operation of the application.

[0054] In order to solve the problem of abnormally large file size when displaying dynamic special effects images through a large number of frame images in the existing related art, the present application provides an image ripple display method, device, electronic device and storage medium, by obtaining the image to be displayed and the configuration information corresponding to the image to be displayed, determining the target cycle time, at least one center point information and the boundary area information corresponding to the center point information based on the configuration information, and for each center point information, sampling the pixels of the image to be displayed according to the target cycle time to obtain the target sampling point, and then analyzing the target sampling point based on the boundary area information to generate the offset information corresponding to the target sampling point, and then performing image ripple rendering based on the offset information and the image to be displayed to generate the target ripple display image; thereby, the purpose of displaying the ripple special effect can be achieved by performing image ripple rendering on one image to be displayed, without relying on a large number of frame images to display the dynamic special effects image, which solves the problem of abnormally large file size when displaying the dynamic special effects image through a large number of frame images in the existing related art.

[0055] Figure 1 A flowchart of an image ripple display method provided in an embodiment of the present application.

[0056] like Figure 1 As shown, an image ripple display method provided in an embodiment of the present application may specifically include the following steps:

[0057] Step S110: Acquire the image to be displayed and configuration information corresponding to the image to be displayed, where the configuration information is information pre-configured for performing special effects display on the image to be displayed.

[0058] Among them, the image to be displayed can represent an image that needs to be displayed with special effects, and the configuration information can represent the information pre-configured for the special effects display of the image to be displayed, such as the special effects display type, dynamic special effects refresh cycle, etc., among which the special effects display can represent the dynamic special effects pre-configured for the image to be displayed, such as water ripple special effects, fog special effects, etc. This embodiment does not make specific limitations on this.

[0059] Step S120: Based on the configuration information, determine the target cycle time, at least one center point information, and the boundary area information corresponding to the center point information; wherein, the target cycle time is the cycle time for refreshing the special effect display, the center point information is the center point of the special effect display, and the boundary area information is the boundary area for the special effect display.

[0060] Specifically, after obtaining the configuration information, the target cycle time and center point information can be extracted from the configuration information, where the target cycle time can indicate the cycle time for refreshing the special effect display, and the center point information can indicate the center point of the special effect display; then, it can be determined whether the special effect display type in the configuration information belongs to the ripple special effect type. In the case that the special effect display type belongs to the ripple special effect type, the boundary area information corresponding to the center point information can be determined. The boundary area information can indicate the boundary area where special effects display is required, and the boundary area can indicate the area used to display ripple special effects.

[0061] In a specific example, the configuration information corresponding to an image to be displayed may include one or more center point information, and each center point information may have its corresponding special effect display type; that is, for each center point information, the special effect display type corresponding to the center point information can be determined. When the special effect display type is a ripple special effect type, the boundary area information corresponding to the center point information can be determined; of course, the special effect display type can also include other types, such as atomization special effect type, light and shadow special effect type, etc., and different boundary area information or other required information can be determined according to different special effect display types. This embodiment does not make specific limitations on this.

[0062] Step S130: for each center point information, pixel sampling is performed on the image to be displayed according to the target cycle time to obtain target sampling points.

[0063] Specifically, after determining the center point information and the target cycle time, pixel sampling can be performed on the image to be displayed according to the target cycle time for each center point information to obtain target sampling points; the target sampling points can represent sampling points collected in real time, and pixel sampling can represent the process of collecting pixel points outward from the center point represented by the center point information in the image to be displayed.

[0064] Step S140: Analyze the target sampling point in combination with the boundary area information to generate offset information corresponding to the target sampling point.

[0065] Specifically, after obtaining the target sampling point, an analysis can be performed based on the target sampling point and the boundary area information to generate offset information corresponding to the target sampling point. Since the target sampling point can represent a sampling point collected in real time in the image to be displayed, and the boundary area information can represent the boundary area that needs to be displayed with ripples, the degree of deviation between the target sampling point and the boundary area corresponding to the boundary area information can be analyzed. That is, the offset information can represent the degree of deviation between the target sampling point and the boundary area.

[0066] Step S150: performing image ripple rendering based on the offset information and the image to be displayed to generate a target ripple display image.

[0067] Specifically, after obtaining the offset information, image ripple rendering can be performed based on the offset information and combined with the image to be displayed to generate a target ripple display image, where the image ripple rendering can represent ripple rendering with different parameters on the image to be displayed according to the offset information, and the target ripple display image can be used to display an image with ripple special effects.

[0068] It should be noted that, since the target acquisition point is determined by real-time acquisition of each center point information according to the target cycle time, that is, as the time axis progresses, the target acquisition point will be continuously refreshed, and different target acquisition points can determine different offset information, so that different offset information can be used to perform image ripple rendering on the image to be displayed, generating different target ripple display images, and then generating different target ripple display images, that is, this embodiment updates the output target ripple display image through real-time rendering on the time axis, thereby achieving the purpose of displaying the ripple special effect image corresponding to the image to be displayed.

[0069] It can be seen that in the process of displaying the image ripple special effect, this embodiment does not need to rely on a large number of frame images to display the dynamic special effect image. Instead, by obtaining the image to be displayed and the configuration information corresponding to the image to be displayed, the target cycle time, at least one center point information and the boundary area information corresponding to the center point information are determined according to the configuration information. For each center point information, pixel sampling is performed on the image to be displayed according to the target cycle time to obtain the target sampling point. Based on the target sampling point, the boundary area information is combined for analysis to generate the offset information corresponding to the target sampling point. Subsequently, based on the offset information, the image ripple rendering is performed in combination with the image to be displayed to generate the target ripple display image. In this way, only one image to be displayed can be used to continuously render and generate the target ripple display image as the time axis passes, thereby achieving the purpose of displaying the ripple special effect, thereby solving the problem of abnormally large file size when displaying dynamic special effect images through a large number of frame images in the existing related technology.

[0070] In an optional embodiment of the present application, step S130 performs pixel sampling on the image to be displayed for each center point information according to the target cycle time to obtain the target sampling point. Specifically, the step S130 may include the following sub-steps: for each center point information, determining the center point position corresponding to the center point information; based on the image to be displayed, determining the acquisition boundary position corresponding to the center point information; performing periodic sampling according to the target cycle time in combination with the center point position and the acquisition boundary position to obtain a periodic sampling point; and determining the periodic sampling point as the target sampling point.

[0071] In this embodiment, during pixel sampling of the image to be displayed to obtain target sampling points, one or more center point information can be determined based on the configuration information. Therefore, for each center point information, a center point position corresponding to the center point information can be determined. The center point position can represent the specific location of the center point marked by the center point information in the image to be displayed. Furthermore, a collection boundary position corresponding to the center point information can be determined based on the image to be displayed. The collection boundary position can represent the boundary position within the distribution range of the image to which the center point information belongs. Thus, periodic sampling can be performed according to a target periodic time, combining the center point position and the collection boundary position, to obtain periodic sampling points. The periodic sampling points can represent pixels determined by real-time sampling in the image to be displayed. Specifically, the periodic sampling method can be periodic sampling from the center point position toward the collection boundary position, or from the collection boundary position toward the center point position. Of course, other sampling methods can also be used, which are not specifically limited in this embodiment. Subsequently, the periodic sampling points can be determined as target sampling points. That is, after each periodic sampling point is determined, the periodic sampling point can be determined as the target sampling point and subsequent steps can be executed.

[0072] It should be noted that in this embodiment, in the process of performing periodic sampling according to the target cycle time, combining the center point position and the acquisition boundary position to obtain periodic sampling points, the acquisition frequency is determined based on the target cycle time, and then periodic sampling is performed according to the acquisition frequency, combining the center point position and the acquisition boundary position to obtain periodic sampling points; of course, the above is only an example for illustration, and this embodiment does not make any specific limitations on this.

[0073] In an optional embodiment of the present application, step S140 performs analysis based on the target sampling point in combination with the boundary area information to generate offset information corresponding to the target sampling point. Specifically, the step S140 may include the following sub-steps: determining the sampling point position and sampling time corresponding to the target sampling point; determining the boundary position interval corresponding to the boundary area information; and when the sampling point position is within the boundary position interval, determining the offset information based on the sampling point position and sampling time.

[0074] In this embodiment, during the process of generating the offset information corresponding to the target sampling point, the sampling point position and sampling time corresponding to the target sampling point may be determined, where the sampling point position indicates the specific position of the target sampling point in the image to be displayed, and the sampling time may indicate the specific time when the target sampling point is acquired. Furthermore, a boundary position interval corresponding to the boundary region information may be determined, where the boundary position interval may indicate the specific position interval identified by the boundary region information in the image to be displayed. Thus, it may be determined whether the sampling point position is within the boundary position interval. If the sampling point position is within the boundary position interval, the offset information may be determined based on the sampling point position and the sampling time. The specific determination method may be based on a preset model, formula, etc., which is not specifically limited in this embodiment. If the sampling point position is not within the boundary position interval, subsequent steps may not be performed.

[0075] In an optional embodiment of the present application, the offset information is determined based on the sampling point position and the sampling time, which may specifically include the following sub-steps: based on the sampling time, periodic positioning is performed in combination with the target cycle time to obtain the sampling cycle time; based on the sampling point position, distance analysis is performed in combination with the center point position corresponding to the center point information to obtain the sampling distance; and the sampling cycle time and sampling distance are used to perform offset calculation to obtain the offset information.

[0076] In the process of determining the offset information based on the sampling point position and the sampling time in this embodiment, period positioning can be performed based on the sampling time in combination with the target cycle time to obtain the sampling cycle time. The period positioning can map the sampling time to the target cycle time according to a preset mapping relationship to obtain the sampling cycle time corresponding to the sampling time. The sampling cycle time can indicate the specific cycle time of the sampling time within the target cycle time. In addition, distance analysis can be performed based on the sampling point position in combination with the center point position corresponding to the center point information to obtain the sampling distance. The sampling distance can indicate the distance between the target sampling point and the center point. Therefore, the sampling cycle time and the sampling distance can be used to perform offset calculation to obtain the offset information. The specific offset calculation method can use a preset model, formula, etc., which is not specifically limited in this embodiment.

[0077] In a specific example, when the target cycle time is 0.006 seconds, if the sampling time is 16:35:0.001, the sampling time is mapped to the target cycle time according to the preset mapping relationship, and it can be determined that the sampling cycle time corresponding to 16:35:0.001 is 0.001 seconds. If the sampling time is 16:35:0.008, the sampling time is mapped to the target cycle time according to the preset mapping relationship, and it can be determined that the sampling cycle time corresponding to 16:35:0.008 is 0.002 seconds. In this way, while continuously collecting and determining the target sampling points as the time axis progresses, the sampling time corresponding to the target sampling point can also be mapped to the target cycle time to obtain the sampling cycle time within the target cycle time range.

[0078] In addition, in the process of calculating the offset by the sampling cycle time and the sampling distance to obtain the offset information, the difference between the sampling distance and the sampling cycle time can be determined as diff = sampling distance - sampling cycle time, and then the offset move = sin (diff * 2π / target cycle time) is calculated by the sine function. This process combines the sampling distance, sampling cycle time and target cycle time, and adds the periodic fluctuation characteristics through the sin function, so that the subsequent image ripple rendering based on the offset information corresponding to the offset can play the role of adding periodic fluctuations, that is, it can play a control role including but not limited to the period from the appearance to the disappearance of the animation period, the display boundary of the animation, the offset of the movement of the animation element, the color change of the animation, the fluctuation of the animation, and other features. Of course, the above is only an example for illustration, and this embodiment does not make specific limitations on this.

[0079] In an optional embodiment of the present application, step S150 performs image ripple rendering on the image to be displayed based on the offset information to generate a target ripple display image, which may specifically include the following sub-steps: determining the target offset corresponding to the offset information; determining the direction vector corresponding to the target sampling point based on the center point position corresponding to the target sampling point and the center point information; generating texture adjustment information based on the direction vector and the target offset; sampling the texture adjustment information to perform image ripple rendering on the image to be displayed to generate a target ripple display image.

[0080] In this embodiment, in the process of performing image ripple rendering on the image to be displayed based on the offset information and generating a target ripple display image, a target offset corresponding to the offset information can be determined. The target offset can represent a numerical value of the specific degree of deviation of the target sampling point, such as the offset move in the above example; and a direction vector corresponding to the target sampling point can be determined based on the target sampling point and the center point position corresponding to the center point information. The direction vector can represent a vector pointing from the center point position to the target sampling point; thereby, texture adjustment information can be generated based on the direction vector and the target offset. The texture adjustment information can represent information for texture adjustment of the image to be displayed, which can be a texture adjustment vector in this embodiment; and then the texture adjustment information can be sampled to perform image ripple rendering on the image to be displayed to generate a target ripple display image, wherein the image ripple rendering can be to adjust the boundary area texture information corresponding to the boundary area information by sampling the texture adjustment vector corresponding to the texture adjustment information, and determine the adjusted image as the target ripple display image.

[0081] In one example, when the target offset corresponding to the offset information is move = sin (diff * 2π / target cycle time), and the direction vector unitDirectionVec corresponding to the target sampling point is determined, the texture adjustment information texCoord + = unitDirectionVec * move. Since move contains a sin function, the periodic fluctuation of the sin function in this process forms a ripple form, so that the target sampling point and texture adjustment information are continuously updated as the time axis passes. At this time, image ripple rendering is performed based on the texture adjustment information, which can simulate the ups and downs of the waves and achieve the effect of displaying ripple special effects. Of course, if other special effects need to be displayed, other functions or models can be used for calculation, and this embodiment does not specifically limit this.

[0082] In an optional embodiment of the present application, the sampling texture adjustment information performs image ripple rendering on the image to be displayed to generate a target ripple display image, which may specifically include the following sub-steps: based on the image to be displayed, obtaining boundary area texture information corresponding to the boundary area information; sampling the texture adjustment information to perform texture adjustment on the boundary area texture information to obtain target boundary area texture information; performing image ripple rendering based on the target boundary area texture information to generate a target ripple display image.

[0083] In this embodiment, when sampling texture adjustment information to perform image ripple rendering on an image to be displayed and generating a target ripple display image, boundary region texture information corresponding to the boundary region information can be obtained based on the image to be displayed. Since the boundary region information can represent the boundary region where ripple display is required, the boundary region texture information can represent the texture information contained in the boundary region corresponding to the boundary region information of the image to be displayed. Therefore, the texture adjustment information can be sampled to perform texture adjustment on the boundary region texture information to obtain target boundary region texture information. Since the texture adjustment information can be an adjustment vector, the adjustment vector can be used to perform texture adjustment on the boundary region texture information to obtain target boundary region texture information. The target boundary region texture information can represent texture information for rendering output. For example, the adjustment vector and the texture coordinates corresponding to the boundary region texture information are calculated to obtain adjusted target texture coordinates. The boundary region texture information is mapped to the target texture coordinates to achieve texture adjustment. Then, image ripple rendering can be performed based on the target boundary region texture information to generate a target ripple display image. Image ripple rendering can mean rendering according to the texture information corresponding to the sampled target boundary region texture information, so that the target ripple display image can exhibit a ripple special effect.

[0084] In an optional embodiment of the present application, based on the configuration information, the target cycle time, at least one center point information and the boundary area information corresponding to the center point information are determined, which can specifically include the following sub-steps: extracting the target cycle time and center point information from the configuration information; obtaining the image distribution information corresponding to the image to be displayed, the image distribution information is the distribution information of each area in the image to be displayed; based on the center point information, combined with the image distribution information, the boundary area is located to determine the boundary area information.

[0085] In the process of determining the target cycle time, at least one center point information and the boundary area information corresponding to the center point information based on the configuration information, this embodiment can extract the target cycle time and the center point information from the configuration information. That is, in this embodiment, the target cycle time and the center point information in the configuration information can be adjusted according to needs, so that when processing different pictures to be displayed, different configuration information can be used for adaptive processing; and image distribution information corresponding to the image to be displayed can be obtained. The image distribution information can represent the distribution information of each area in the image to be displayed. For example, the image to be displayed contains areas such as a TV screen, audio A, audio B, and a TV cabinet. At this time, the image distribution information that can be obtained can include TV screen distribution information, audio A distribution information, audio B distribution information, and TV cabinet distribution information. This embodiment does not make specific limitations on this. Therefore, based on the center point information, the boundary area can be located in combination with the image distribution information to determine the boundary area information.

[0086] Specifically, in the process of locating the boundary area, this embodiment can determine the target distribution information where the center point information corresponds to the center point based on the image distribution information. The target distribution information indicates the layout information of the center point included in the image distribution information. Thus, the boundary area corresponding to the target distribution information can be determined, and boundary area information is generated based on the boundary area. For example, the image distribution information can include the distribution information of the TV screen, the distribution information of the audio A, the distribution information of the audio B, and the distribution information of the TV cabinet. At this time, if the center point is within the distribution information of the audio B, the distribution information of the audio B can be determined as the target distribution information, and the boundary area information corresponding to the distribution information of the audio B can be determined according to the preset boundary determination method. Figure 2 As shown, the boundary area information can be generated based on the area between [cycle_time-boundary, cycle_time+boundary]. Of course, the above is only an example, and this embodiment does not make any specific limitation to this.

[0087] In specific implementation, the OpenGL model can be used to implement the above-mentioned image ripple display method. The specific configuration process can be as follows:

[0088] Step 1: Create a custom View that inherits from the GLSurfaceView class in the Android SDK OpenGL module to display OpenGL rendering. This means creating a custom View class that inherits from GLSurfaceView. This custom View will be used to carry the OpenGL rendering content.

[0089] Step 2: Implement the OpenGL renderer interface GLSurfaceView.Renderer provided by the Android SDK OpenGL module to create an OpenGL renderer. In other words, create a class that implements the GLSurfaceView.Renderer interface. This class will define how to render OpenGL content.

[0090] Step 3: Set the renderer created in the second step for the View created in the first step and set the rendering mode to RENDERMODE_WHEN_DIRTY mode. When the data changes, the UI is automatically rendered to achieve a consistent special effect refresh. That is, set the renderer created in the second step in the custom view and set the rendering mode.

[0091] Step 4: Implement the vertex shader to handle the calculation and setting of the special effect display position. This shader is used to calculate and set the special effect display position and output the texture coordinates to the fragment shader. The shader defines several key parameters and implements a main function. The main parameters are as follows:

[0092] vec4 a_position: vertex position of four-dimensional vector type, input type;

[0093] mat4 u_MvpMatrix: 4x4 model view projection matrix. This matrix is ​​used to transform vertices from model space to clip space and is an input type;

[0094] vec2 a_texCoord: Texture table mark of 2D vector type, input type;

[0095] vec2 v_texCoord: 2D vector texture table logo, output type (output to the fragment shader in step 5);

[0096] There are two operations that need to be performed in the main function:

[0097] gl_Position = u_MvpMatrix * a_position: This formula calculates the position of the vertex in the clip space and assigns it to the shader's built-in position parameter gl_Position to ensure that the animation screen can be displayed correctly in our View;

[0098] v_texCoord = a_texCoord: The input texture table is directly assigned to the fragment shader in step 5;

[0099] Step 5: Implement the fragment shader. This part is also the main part of implementing the water ripple effect through OpenGL. Figure 2The content shown is the continuous refresh time parameter in the renderer controller implemented in step three, that is, the target cycle time in the configuration information; this target cycle time is passed to the fragment shader, so that within the target cycle time, the process of the sampling point C in the fragment shader moving outward from the center point A to the boundary of the screen simulates the propagation of water ripples, that is, for each center point information, according to the target cycle time, the pixel point sampling of the image to be displayed is obtained to obtain the target sampling point; and the periodic positioning is performed based on the sampling time combined with the target cycle time to obtain the sampling cycle time, that is, the sampling cycle time cycle_time is calculated. Specifically, when the distance from the sampling point C to the center point A falls within the boundary interval [cycle_time-boundary,cycle_time+boundary], that is, the sampling point position is within the boundary position interval, the pixels in the boundary area will be affected and move outward, and the offset of each frame is calculated by the difference between the current sampling distance and the sampling cycle time diff=distance-cycle_time, and then the target offset move=sin(diff*2π / cycle_duration) is calculated by the sine function, and this target offset is multiplied by the distance from the sampling point C to the center point A. The unit direction vector from the center point A to the sampling point C is applied to the texture coordinate texCoord + = unitDirectionVec * move, that is, based on the direction vector and the target offset, the texture adjustment information is generated; in this process, the periodic fluctuation of the sin() function forms a ripple form, controls the movement of the texture coordinates, and simulates the ups and downs of the waves. Therefore, this part of the fragment shader contains the main control of the special effect, including the cycle time from the appearance to the disappearance of the animation cycle, as well as the display boundary of the animation, the offset of the movement of the animation element, the animation color, and the control of the ups and downs of the animation. The fragment parameters and control functions are as follows:

[0100] Target cycle time (cycle_duration): The constant is obtained based on debugging, for example, the value can be 0.325;

[0101] Sampling time (time): provided by the code program, the current system millisecond time modulo 2000 and then divided by 3000:

[0102] Sampling cycle time (cycle_time): Calculation formula: cycle_time = mod(time, cycle_duration);

[0103] Dynamic boundary: The constant is obtained from debugging, boundary = (1-cycle_time)*0.0385

[0104] Center point coordinate array (positionXY): passed when the specific Java object is initialized, in array form, supports multiple coordinates, and several coordinates will generate several ripples;

[0105] Texture size (tex_size): used to adjust the aspect ratio of texture coordinates to ensure that the image is not distorted;

[0106] s_TextureMap (2D texture sampler): reads the color information of the texture image and draws the background map

[0107] The main contents of the fragment shader function control part are:

[0108] Define time, control width and height, 2D texture sampler, ripple source array

[0109] Initialize constant parameter: cycle_duration

[0110] Texture converted to 2D vector: float ratio = u_TexSize.y / u_TexSize.x;

[0111] vec2 texCoord=v_texCoord*vec2(1.0,ratio);

[0112] Calculate cycle time: cycle_time = mod(u_Time, cycleDuration);

[0113] The center point is converted to a two-dimensional vector coordinate: positionXY[i]*vec2(1.0,ratio);

[0114] Distance calculation: distance(texCoord, positionXY);

[0115] Boundary calculation: (1.0-cycle_time)*0.0385;

[0116] Boundary control: distance <= (cycleTime + boundary) && distance >= (cycleTime - boundary)

[0117] Offset calculation: diff = distance - cycle_time; move = sin(diff*2π /

[0118] cycle_duration)

[0119] Calculate the direction vector: unitDirectionVec = normalize(texCoord - positionXY)

[0120] Update texture coordinates: texCoord + = unitDirectionVec × move

[0121] Step 6: In order to achieve the purpose of making this component reusable and suitable for dynamically controlling the number of ripples, the renderer part must abstract and implement a rendering controller, which is used to dynamically pass the ripple center point array during construction, dynamically load the texture shader program script, and control the internal encapsulation of the class to realize the reading and refreshing of shader parameters.

[0122] like Figure 3 As shown, the present application also discloses an embodiment, which provides an image ripple display device, comprising:

[0123] An acquisition module 310 is configured to acquire an image to be displayed and configuration information corresponding to the image to be displayed, wherein the configuration information is information pre-configured for performing special effects display on the image to be displayed;

[0124] Determination module 320, configured to determine, based on the configuration information, a target cycle time, at least one center point information, and boundary area information corresponding to the center point information; wherein the target cycle time is the cycle time for refreshing the special effect display, the center point information is the center point of the special effect display, and the boundary area information is the boundary area for displaying the special effect;

[0125] The sampling module 330 is configured to sample pixels of the image to be displayed according to the target cycle time for each center point information to obtain target sampling points;

[0126] An analysis module 340 is configured to analyze the target sampling point in combination with the boundary area information to generate offset information corresponding to the target sampling point;

[0127] The rendering module 350 is configured to perform image ripple rendering based on the offset information and the image to be displayed, so as to generate a target ripple display image.

[0128] In an optional embodiment of the present application, the sampling module 340 may include:

[0129] A first determining unit is configured to determine, for each piece of central point information, a central point position corresponding to the central point information;

[0130] A second determining unit is configured to determine, based on the image to be displayed, a collection boundary position corresponding to the center point information;

[0131] A sampling unit, configured to perform periodic sampling according to the target cycle time, in combination with the center point position and the acquisition boundary position, to obtain periodic sampling points;

[0132] The third determining unit is configured to determine the periodic sampling point as the target sampling point.

[0133] In an optional embodiment of the present application, the analysis module 350 may include:

[0134] a fourth determining unit, configured to determine a sampling point position and a sampling time corresponding to the target sampling point;

[0135] a fifth determining unit, configured to determine a boundary position interval corresponding to the boundary area information;

[0136] A sixth determining unit is configured to determine the offset information according to the sampling point position and the sampling time when the sampling point position is within the boundary position interval.

[0137] In an optional embodiment of the present application, the sixth determining unit may include:

[0138] a cycle positioning subunit, configured to perform cycle positioning based on the sampling time and the target cycle time to obtain the sampling cycle time;

[0139] a distance analysis subunit, configured to perform distance analysis based on the sampling point positions and the center point position corresponding to the center point information to obtain a sampling distance;

[0140] The offset calculation subunit is configured to perform offset calculation using the sampling cycle time and the sampling distance to obtain the offset information.

[0141] In an optional embodiment of the present application, the rendering module 360 ​​may include:

[0142] a seventh determining unit, configured to determine a target offset corresponding to the offset information;

[0143] an eighth determining unit, configured to determine a direction vector corresponding to the target sampling point according to a center point position corresponding to the target sampling point and the center point information;

[0144] A first generating unit, configured to generate texture adjustment information based on the direction vector and the target offset;

[0145] The second generating unit is configured to perform image ripple rendering on the image to be displayed by using the texture adjustment information to generate the target ripple display image.

[0146] In an optional embodiment of the present application, the second generating unit includes:

[0147] an acquiring subunit, configured to acquire, based on the image to be displayed, boundary area texture information corresponding to the boundary area information;

[0148] a texture adjustment subunit, configured to perform texture adjustment on the texture information of the boundary area using the texture adjustment information to obtain the texture information of the target boundary area;

[0149] The image ripple rendering subunit is used to perform image ripple rendering according to the texture information of the target boundary area to generate the target ripple display image.

[0150] In an optional embodiment of the present application, the determining module 320 may include:

[0151] An extraction unit, configured to extract target cycle time and center point information from the configuration information;

[0152] an acquiring unit, configured to acquire image distribution information corresponding to the image to be displayed, wherein the image distribution information is distribution information of each region in the image to be displayed;

[0153] A boundary area positioning unit is used to perform boundary area positioning based on the center point information in combination with the image distribution information to determine the boundary area information.

[0154] The implementation process of the functions and effects of each module in the above-mentioned device is specifically described in the implementation process of the corresponding steps in the above-mentioned method, and will not be repeated here.

[0155] like Figure 4 As shown, an embodiment of the present application provides an electronic device, including a processor 410, a communication interface 420, a memory 430 and a communication bus 440, wherein the processor 410, the communication interface 420, and the memory 430 communicate with each other through the communication bus 440;

[0156] Memory 430, for storing computer programs;

[0157] In one embodiment of the present application, the processor 410 is used to execute the program stored in the memory 430 to implement the image ripple display method provided by any of the aforementioned method embodiments, by obtaining the image to be displayed and the configuration information corresponding to the image to be displayed, determining the target cycle time, at least one center point information and the boundary area information corresponding to the center point information based on the configuration information, and for each center point information, performing pixel sampling on the image to be displayed according to the target cycle time to obtain the target sampling point, and performing analysis based on the target sampling point in combination with the boundary area information to generate the offset information corresponding to the target sampling point, and then performing image ripple rendering based on the offset information in combination with the image to be displayed to generate the target ripple display image; thereby, the purpose of displaying the ripple special effect can be achieved by performing image ripple rendering on one image to be displayed, without relying on a large number of frame pictures to display the dynamic special effect image, that is, solving the problem of abnormally large file size when displaying the dynamic special effect image through a large number of frame pictures in the existing related technology.

[0158] An embodiment of the present application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the image ripple display method provided in any of the aforementioned method embodiments, by obtaining an image to be displayed and configuration information corresponding to the image to be displayed, determining a target cycle time, at least one center point information, and boundary area information corresponding to the center point information based on the configuration information, and for each center point information, performing pixel sampling on the image to be displayed according to the target cycle time to obtain a target sampling point, performing analysis based on the target sampling point in combination with the boundary area information to generate offset information corresponding to the target sampling point, and then performing image ripple rendering based on the offset information in combination with the image to be displayed to generate a target ripple display image; thereby, the purpose of displaying ripple special effects can be achieved by performing image ripple rendering on one image to be displayed, without relying on a large number of frame images to display dynamic special effects images, which solves the problem of abnormally large file size when displaying dynamic special effects images through a large number of frame images in the existing related art.

[0159] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of the modules may be selected based on actual needs to achieve the objectives of this embodiment.

[0160] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus a general hardware platform, or of course, by hardware. Based on this understanding, the above technical solution, in essence, or the part that contributes to the relevant technology, can be embodied in the form of a software product. The computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a magnetic disk, an optical disk, etc., and includes a number of instructions for enabling 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 certain parts of the embodiment.

[0161] It should be understood that the terms used herein are for the purpose of describing specific example embodiments only and are not intended to be limiting. Unless the context clearly indicates otherwise, the singular forms "one", "an" and "said" as used herein may also be meant to include plural forms. The terms "comprise", "include", "contain" and "have" are inclusive and therefore specify the presence of stated features, steps, operations, elements and / or parts, but do not exclude the presence or addition of one or more other features, steps, operations, elements, parts, and / or combinations thereof. The method steps, processes, and operations described herein are not to be construed as necessarily requiring them to be performed in the specific order described or illustrated, unless the order of execution is clearly indicated. It should also be understood that additional or alternative steps may be used.

[0162] The foregoing description is intended only to provide specific embodiments of the present invention, which will enable those skilled in the art to understand and implement the present invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention is not intended to be limited to the embodiments shown herein, but is intended to be accorded the widest scope consistent with the principles and novel features claimed herein.

Claims

1. A method for displaying image ripples, characterized in that: include: Acquire an image to be displayed and configuration information corresponding to the image to be displayed, wherein the configuration information is information pre-configured for performing special effects display on the image to be displayed; Determine, based on the configuration information, a target cycle time, at least one center point information, and boundary area information corresponding to the center point information; wherein the target cycle time is the cycle time for refreshing the special effect display, the center point information is the center point of the special effect display, and the boundary area information is the boundary area for displaying the special effect; For each center point information, pixel sampling is performed on the image to be displayed according to the target cycle time to obtain target sampling points; Based on the target sampling point, combined with the boundary area information, analysis is performed to generate offset information corresponding to the target sampling point; Image ripple rendering is performed based on the offset information and in combination with the image to be displayed to generate a target ripple display image.

2. The image ripple display method according to claim 1, characterized in that: The step of sampling pixels of the image to be displayed according to the target cycle time for each center point information to obtain target sampling points includes: For each piece of central point information, determining the central point position corresponding to the central point information; Based on the image to be displayed, determining a collection boundary position corresponding to the center point information; According to the target cycle time, periodic sampling is performed in combination with the center point position and the acquisition boundary position to obtain periodic sampling points; The periodic sampling point is determined as the target sampling point.

3. The image ripple display method according to claim 1, characterized in that: The step of analyzing the target sampling point in combination with the boundary area information to generate offset information corresponding to the target sampling point includes: Determine the sampling point location and sampling time corresponding to the target sampling point; Determining a boundary position interval corresponding to the boundary area information; When the sampling point position is within the boundary position interval, the offset information is determined according to the sampling point position and the sampling time.

4. The image ripple display method according to claim 3, characterized in that: The determining the offset information according to the sampling point position and the sampling time includes: Performing cycle positioning based on the sampling time and the target cycle time to obtain the sampling cycle time; Based on the sampling point position, a distance analysis is performed in combination with the center point position corresponding to the center point information to obtain a sampling distance; The sampling period and the sampling distance are used to perform offset calculation to obtain the offset information.

5. The image ripple display method according to claim 1, characterized in that: The step of performing image ripple rendering based on the offset information and combining the image to be displayed to generate a target ripple display image includes: Determining a target offset corresponding to the offset information; Determine a direction vector corresponding to the target sampling point based on the target sampling point and the center point position corresponding to the center point information; generating texture adjustment information based on the direction vector and the target offset; The image to be displayed is rendered in ripples using the texture adjustment information to generate the target ripple display image.

6. The image ripple display method according to claim 5, characterized in that: The step of performing image ripple rendering on the image to be displayed by using the texture adjustment information to generate a target ripple display image includes: Based on the image to be displayed, acquiring boundary area texture information corresponding to the boundary area information; Using the texture adjustment information to perform texture adjustment on the texture information of the boundary area to obtain the texture information of the target boundary area; Image ripple rendering is performed according to the texture information of the target boundary area to generate the target ripple display image.

7. The image ripple display method according to any one of claims 1 to 6, characterized in that: The determining, based on the configuration information, a target cycle time, at least one center point information, and boundary area information corresponding to the center point information includes: extracting target cycle time and center point information from the configuration information; Obtaining image distribution information corresponding to the image to be displayed, wherein the image distribution information is distribution information of each area in the image to be displayed; Based on the center point information and in combination with the image distribution information, boundary area positioning is performed to determine the boundary area information.

8. An image ripple display device, characterized in that: include: An acquisition module, configured to acquire an image to be displayed and configuration information corresponding to the image to be displayed, wherein the configuration information is information pre-configured for performing special effects display on the image to be displayed; a determination module, configured to determine, based on the configuration information, a target cycle time, at least one center point information, and boundary area information corresponding to the center point information; wherein the target cycle time is the cycle time for refreshing the special effect display, the center point information is the center point of the special effect display, and the boundary area information is the boundary area for performing the special effect display; A sampling module is used to sample pixels of the image to be displayed according to the target cycle time for each center point information to obtain target sampling points; An analysis module, configured to analyze the target sampling point in combination with the boundary area information to generate offset information corresponding to the target sampling point; A rendering module is used to perform image ripple rendering based on the offset information and in combination with the image to be displayed to generate a target ripple display image.

9. An electronic device, characterized in that: It includes a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other via the communication bus; Memory for storing computer programs; The processor is configured to implement the image ripple display method according to any one of claims 1 to 7 when executing a program stored in the memory.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the image ripple display method according to any one of claims 1 to 7 is implemented.

Images