Image switching dynamic effect setting method and system, electronic equipment and storage medium

Abstract

The invention provides an image switching dynamic effect setting method and system, electronic equipment and a storage medium, and the method comprises the steps: responding to an image switching instruction, and controlling a new image to move to an old image which is currently displayed in a display region for progressive coverage; if it is monitored that the new image coincides with the old image, setting a gradual change zone area between the new image and the old image; according to a switching progress, a gradient zone mixing coefficient of the gradient zone area is determined, and the switching progress is determined by an overlapping range between the new image and the old image; and setting a switching dynamic effect in the gradual change zone area according to the gradual change zone mixing coefficient. Based on the real-time switching progress in the image switching process, the gradual change zone area and the switching dynamic effect of the gradual change zone area are dynamically set, the visual effect of image switching is optimized, and the user experience is improved.

Description

Technical Field

[0001] The present application relates to the field of image processing technology, and in particular to a method, system, electronic device and storage medium for setting image switching animation effects. Background Art

[0002] With the continuous development of electronic technology, various electronic devices are widely used in people's lives, such as mobile phones, computers, and car computers, which greatly facilitate our daily lives. At present, many electronic devices have image switching functions. For example, image galleries, wallpapers, or multimedia applications all involve image sliding switching. Image sliding switching in these scenarios is not only a common interaction mode, but also a key element in user interface design, which directly affects the user experience.

[0003] In the related art, the image sliding switching process has no transition, is relatively abrupt, and lacks visual continuity, resulting in a stiff and unsmooth user experience. In order to increase the visual effect of the switching process, although some image sliding switching has been optimized, the rendering action in the implementation process occupies a certain amount of CPU (Central Processing Unit) consumption, and there are still problems such as single switching effect, serious homogeneity, and poor customizability, which affects the user experience. Summary of the invention

[0004] In view of the above-mentioned shortcomings of the prior art, the present application discloses a method, system, electronic device and storage medium for setting image switching animation effects, which are used to solve the technical problem of poor image switching visual effects in the prior art.

[0005] In the first aspect, the present application provides a method for setting an image switching animation effect, the method comprising: in response to an image switching instruction, controlling a new image to move toward an old image currently displayed in a display area for progressive coverage; if it is detected that there is an overlap between the new image and the old image, setting a gradient band area between the new image and the old image; determining a gradient band mixing coefficient of the gradient band area according to the switching progress, the switching progress being determined by the overlap range between the new image and the old image; and setting a switching animation in the gradient band area according to the gradient band mixing coefficient.

[0006] In one embodiment of the present application, setting a gradient band area between the new image and the old image includes: calculating the gradient band width according to the switching progress and a preset gradient band initial width, the gradient band width being negatively correlated with the switching progress; and setting the gradient band area between the new image and the old image according to the gradient band width.

[0007] In one embodiment of the present application, determining the gradient band blending coefficient of the gradient band area according to the switching progress includes: determining the first coordinates of the boundary pixel points between the old image and the gradient band area, and determining the second coordinates of each pixel in the gradient band area according to a preset coordinate system, wherein the coordinate system is set based on the display area; calculating the blending coefficient of each pixel in the gradient band area according to the first coordinate, the second coordinate, the gradient band width and the switching progress to obtain the gradient band blending coefficient.

[0008] In one embodiment of the present application, the switching animation is set in the gradient band area according to the gradient band blending coefficient, including: defining the overlapping part of the gradient band area and the old image as a first area, and defining the overlapping part with the new image as a second area; determining the first animation parameters of each pixel in the first area and the second animation parameters of each pixel in the second area according to the gradient blending coefficient, the first animation parameters including at least one of the transparency, brightness and saturation of the old image, and the second animation parameters including at least one of the color fusion ratio, transparency ratio, brightness ratio and saturation ratio of the old image and the new image; setting the switching animation of the first area according to each of the first animation parameters, and setting the switching animation of the second area according to each of the second animation parameters.

[0009] In one embodiment of the present application, the setting of the switching animation also includes: determining the area in the new image that does not overlap with the gradient band area as a texture mixing area; determining the texture mixing coefficient of the texture mixing area according to the switching progress; and setting the switching animation in the texture mixing area according to the texture mixing coefficient.

[0010] In one embodiment of the present application, setting a switching animation in the texture mixing area according to the texture mixing coefficient includes: determining a third animation parameter of the texture mixing area according to the texture mixing coefficient, the third animation parameter including at least one of a color fusion ratio, a transparency ratio, a brightness ratio and a saturation ratio of the old image and the new image; and setting a switching animation of the texture mixing area according to the third animation parameter.

[0011] In one embodiment of the present application, after setting the switching animation in the texture mixing area, it also includes: if the switching progress is completed, the display of the new image is switched from the first texture to the second texture, the first texture is used to display the new image to be cut, and the second texture is used to display the old image to be cut; reset the texture mixing coefficient, and display the next new image to be cut in the first texture, waiting for the next image switching instruction.

[0012] In the second aspect, the present application provides an image switching animation setting system, the system comprising: an instruction response module, used to respond to an image switching instruction, control the new image to move toward the old image currently displayed in the display area for progressive coverage; a gradient band setting module, used to set a gradient band area between the new image and the old image if it is detected that there is an overlap between the new image and the old image; a coefficient determination module, used to determine the gradient band mixing coefficient of the gradient band area according to the switching progress, and the switching progress is determined by the overlap range between the new image and the old image; an animation setting module, used to set the switching animation in the gradient band area according to the gradient band mixing coefficient.

[0013] In a third aspect, the present application provides an electronic device, comprising: one or more processors; a storage device for storing one or more programs, when the one or more programs are executed by one or more processors, the electronic device implements the image switching animation setting method described in the first aspect.

[0014] In a fourth aspect, the present application provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor of a computer, the computer executes the image switching animation setting method described in the first aspect.

[0015] As described above, the image switching effect setting method, system, electronic device and storage medium provided by the embodiments of the present application have the following beneficial effects:

[0016] First, in response to the image switching instruction, the new image is controlled to move toward the old image currently displayed in the display area for progressive coverage. If it is monitored that there is overlap between the new image and the old image, a gradient band area is set between the new image and the old image. Then, according to the switching progress, the gradient band mixing coefficient of the gradient band area is determined. The switching progress is determined by the overlap range between the new image and the old image. Finally, according to the gradient band mixing coefficient, a switching animation is set in the gradient band area. In the switching process where the new image progressively covers the old image, a gradient band area is set between the new image and the old image, and based on the real-time switching progress, the mixing coefficient of the gradient band between the new and old images is adjusted, thereby realizing the dynamic setting of the switching animation in the gradient band area, optimizing the visual effect of image switching, and improving the user experience.

[0017] It should be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] The drawings herein are incorporated into the specification and constitute a part of the specification, showing embodiments consistent with the present application, and together with the specification, are used to explain the principles of the present application. Obviously, the drawings described below are only some embodiments of the present application, and for those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative work. In the drawings:

[0019] Figure 1 is a schematic diagram of an implementation environment of an image switching dynamic effect setting system shown in an exemplary embodiment of the present application;

[0020] Figure 2 is a flowchart of a method for setting image switching dynamic effects shown in an exemplary embodiment of the present application;

[0021] Figure 3 is a schematic diagram of an image left-slide switching animation effect shown in an exemplary embodiment of the present application;

[0022] Figure 4 is a schematic diagram of an image right-swiping switching animation effect shown in an exemplary embodiment of the present application;

[0023] Figure 5 is a block diagram of an image switching dynamic effect setting system shown in an exemplary embodiment of the present application;

[0024] Figure 6 It is a structural schematic diagram of an electronic device provided by an embodiment of the present application. DETAILED DESCRIPTION

[0025] The following will describe the implementation methods of the present application with reference to the accompanying drawings and preferred embodiments. Those skilled in the art can easily understand other advantages and effects of the present application from the contents disclosed in this specification. The present application can also be implemented or applied through other different specific implementation methods, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present application. It should be understood that the preferred embodiments are only for illustrating the present application, not for limiting the scope of protection of the present application.

[0026] It should be noted that the illustrations provided in the following embodiments are only used to illustrate the basic concept of the present application in a schematic manner, and therefore the illustrations only show components related to the present application rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the form, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.

[0027] In the following description, a large number of details are discussed to provide a more thorough explanation of the embodiments of the present application. However, it is obvious to those skilled in the art that the embodiments of the present application can be implemented without these specific details. In other embodiments, well-known structures and devices are shown in the form of block diagrams rather than in detail to avoid making the embodiments of the present application difficult to understand.

[0028] With the popularization of smart terminals such as mobile phones, computers, and car computers, our daily lives have been greatly facilitated, but along with it, higher expectations and demands have been put forward for the performance and functions of these devices. Among them, these devices all have image switching functions. For example, in gallery, wallpaper or multimedia applications, image sliding switching is involved, and the image switching effect directly affects the user experience. At present, in the process of image sliding switching, there is often no transition between images, which is relatively stiff and lacks visual continuity, resulting in a stiff and not smooth user experience. The inventors of this application have found that in order to increase the visual effect of the switching process, although some image sliding switching has been optimized, the rendering action in the implementation process occupies a certain amount of CPU consumption, and there are still problems such as single switching effect, serious homogeneity and poor customizability, which affect the user experience.

[0029] Therefore, see Figure 1 , Figure 1 FIG. 1 is a schematic diagram of an implementation environment of an image switching dynamic effect setting system shown in an exemplary embodiment of the present application. Figure 1 As shown, the implementation environment includes a smart terminal 110 and an image switching dynamic effect setting system 120, wherein the image switching dynamic effect setting system 120 is embedded in the smart terminal 110, and is used to implement the setting of image switching dynamic effects in the smart terminal 110. The smart terminal 110 can be a mobile phone, a computer, a car computer, etc. The image switching dynamic effect setting system 120 sets a gradient band area between the new image and the old image during the switching process in which the new image gradually covers the old image, and adjusts the mixing coefficient of the gradient band between the new and old images based on the real-time switching progress, thereby realizing the dynamic setting of the switching dynamic effect in the gradient band area, optimizing the visual effect of image switching, and improving the user experience.

[0030] See also Figure 2 , Figure 2 is a flowchart of a method for setting image switching effects shown in an exemplary embodiment of the present application. The method can be applied to Figure 1 The implementation environment shown is a schematic diagram. It should be understood that the method may also be applicable to other exemplary implementation environments, and this embodiment does not limit the implementation environment to which the method is applicable.

[0031] like Figure 2As shown, in an exemplary embodiment, the image switching animation setting method includes at least steps S210 to S240, which are described in detail as follows:

[0032] Step S210, in response to the image switching instruction, controlling the new image to move toward the old image currently displayed in the display area to perform progressive coverage.

[0033] Step S220: If it is detected that there is overlap between the new image and the old image, a gradient band area is set between the new image and the old image.

[0034] Step S230, determining the gradient band blending coefficient of the gradient band area according to the switching progress, wherein the switching progress is determined by the overlap range between the new image and the old image.

[0035] Step S240, setting a switching effect in the gradient band area according to the gradient band blending coefficient.

[0036] Among them, progressive overlay refers to the image switching method in which the new image in the display area gradually covers the old image during the process of switching from a new image to a new image; the gradient band area refers to a transition area set between the new image and the old image, which is used to achieve a smooth switching between the old image and the new image, making the transition from the old image to the new image more natural; the gradient band blending coefficient refers to the parameter that controls the switching effect in the gradient band area.

[0037] In step S210, in response to the received image switching instruction, which comes from user interaction (click or slide), the new image is controlled to move toward the old image currently displayed in the display area, and the moving direction is the image switching direction to progressively cover the old image.

[0038] In step S220, when it is detected that there is an overlap between the new image and the old image, a gradient band area is set between the new image and the old image. In addition, when there is an overlap between the new image and the old image, the display area is divided into the old image area and the new image area. The old image area refers to the area in the display area where only the old image is displayed, that is, this part of the area has not been covered by the new image during the switching process; the new image area refers to the area in the image display area where the new image is displayed, that is, this part of the area has been covered by the new image during the switching process. A gradient band area is set between the new image and the old image, that is, a gradient band area is set between the new image area and the old image area.

[0039] In step S230, the gradient band blending coefficient of the gradient band area is determined according to the switching progress, that is, the gradient band blending coefficient will change with the change of the switching progress. The switching progress is determined according to the overlap range between the new image and the old image, that is, the ratio of the overlap area to the entire display area, which is the switching progress, and its range is 0%-100%.

[0040] In step S240, a switching animation is set in the gradient band area according to the gradient band blending coefficient, so that the switching change from the old image to the new image is smooth and not abrupt.

[0041] In this embodiment, during the switching process of the new image gradually covering the old image, a gradient band area is set between the new image and the old image, and based on the real-time switching progress, the mixing coefficient of the gradient band between the new and old images is adjusted, thereby realizing the dynamic setting of the switching effect in the gradient band area, optimizing the visual effect of image switching, and improving the user experience.

[0042] In a possible embodiment, the image switching direction may be one of switching to the left, switching to the right, switching upward, switching downward, and switching in a diagonal direction, wherein the diagonal direction switching may be switching from the upper left corner to the lower right corner, switching from the upper right corner to the lower left corner, switching from the lower left corner to the upper right corner, and switching from the lower right corner to the upper left corner; the image switching instruction carries the image switching direction information.

[0043] As a possible embodiment, in image switching in various image switching direction scenarios, a gradient band area can be set between the new image and the old image during the switching process in which the new image progressively covers the old image, and based on the real-time switching progress, the mixing coefficient of the gradient band between the new and old images can be adjusted to achieve dynamic setting of the switching animation in the gradient band area, thereby optimizing the visual effect of image switching and improving the user experience.

[0044] In a possible embodiment, the overlay method may be a sliding overlay or a diffusion overlay, wherein a sliding overlay refers to an overlay method in which a new image slides in from any side or corner of the display area and gradually covers the old image; a diffusion overlay refers to an overlay method in which a new image gradually expands in the display area according to the image switching direction to gradually cover the old image in a manner of revealing the remaining part.

[0045] For example, taking the image switching direction as switching to the right, sliding coverage means that the right edge of the new image first enters the display area and gradually moves to the right to cover the old image; diffusion coverage means that the left edge of the new image first appears on the display area, and then gradually expands to the right, gradually revealing the remaining part to cover the old image.

[0046] As a possible implementation example, the overlay mode can be freely set, which enhances the visual effect of image switching, meets personalized needs, solves the problem of poor customizability of image switching effects, and is conducive to interactive experience.

[0047] In a possible embodiment, a gradient band area is set between the new image and the old image, including: the gradient band area is entirely in the old image area and adjacent to the new image area, or the gradient band area is entirely in the new image area and adjacent to the old image area, or the gradient band area is partially in the old image area and partially in the new image area.

[0048] As a possible implementation example, the existence of the gradient band area between the new image and the old image can be freely set, which meets personalized needs, solves the problem of poor customizability of image switching effects, and is conducive to interactive experience.

[0049] In one embodiment, a gradient band area is set between the new image and the old image, including: calculating the gradient band width according to the switching progress and the preset gradient band initial width, the gradient band width is negatively correlated with the switching progress; and setting the gradient band area between the new image and the old image according to the gradient band width.

[0050] The preset initial width of the gradient band is a preset value used to calculate the width of the gradient band, and is not the width of the gradient band that will be presented in the display area when the new image begins to overlap with the old image.

[0051] In addition, the gradient band area is set between the new image area and the old image area, and its position will change according to the switching progress.

[0052] In this embodiment, in order to enhance the visual effect, when the switching effect of the gradient band area changes with the switching progress, the position and width of the gradient band area are dynamically controlled according to the switching progress, that is, the position and width of the gradient band area are adjusted according to the switching progress, so that the position and width of the gradient band area change with the switching progress. In this way, the visual effect of image switching is more cool.

[0053] Exemplarily, the calculation formula for the gradient band width is:

[0054] endMixWidth = (1-move_progress)×END_MIX_WIDTH Formula (1)

[0055] Among them, endMixWidth represents the width of the gradient band; move_progress represents the switching progress; END_MIX_WIDTH represents the initial width of the gradient band.

[0056] It can be seen from formula (1) that as the switching progress increases, the gradient band width gradually decreases.

[0057] As a possible embodiment, since the image switching direction can be one of switching to the left, switching to the right, switching upward, switching downward, and switching in a diagonal direction, in switching to the left and switching to the right, the gradient band width is the distance between the left and right edges of the gradient band area, in switching upward and switching downward, the gradient band width is the distance between the upper and lower edges of the gradient band area, and in switching in a diagonal direction, the gradient band width is the distance between the upper left and lower right edges of the gradient band area or the distance between the lower left and upper right edges.

[0058] In one embodiment, the gradient band mixing coefficient of the gradient band area is determined according to the switching progress, including: determining the first coordinates of the boundary pixel points between the old image and the gradient band area according to a preset coordinate system, and determining the second coordinates of each pixel point in the gradient band area, wherein the coordinate system is set based on the display area; calculating the mixing coefficient of each pixel point in the gradient band area according to the first coordinate, the second coordinate, the gradient band width and the switching progress to obtain the gradient band mixing coefficient.

[0059] The coordinate system is set based on the display area, specifically, the coordinate system is established with a corner point of the display area as the coordinate origin; the gradient band blending coefficient includes the blending coefficient of each pixel point in the gradient band area.

[0060] In this embodiment, based on the dynamically changing switching progress, combined with the first coordinates of the boundary pixels between the old image and the gradient band area, the second coordinates of each pixel in the gradient band area, and the gradient band width, the gradient band mixing coefficient changes with the switching progress, thereby enabling the switching animation of the gradient band area to change dynamically, thereby improving the visual effect of image switching. In addition, because the coordinates of each pixel in the gradient band area are different, the mixing coefficients corresponding to each pixel in the gradient band area are different, thereby making the switching in the gradient band area under the same switching progress also present different effects, bringing a more delicate visual experience to users and further improving the visual effect of image switching.

[0061] Exemplarily, the calculation formula of the mixing coefficient of each pixel point in the gradient band area is:

[0062] newPct=(P÷endMixWidth)×move_progress formula (2)

[0063] Among them, newPct represents the mixing coefficient of any pixel point in the gradient band area; P represents the difference between the first coordinate and the second coordinate; endMixWidth represents the gradient band width; move_progress represents the switching progress.

[0064] As a possible embodiment, since the image switching direction can be one of switching to the left, switching to the right, switching upward, switching downward, and switching in a diagonal direction, and the coordinate origin can be any corner point of the display area, in order to ensure that P is a positive value, the calculation method of P can be P1-P2 or P2-P1 according to the image switching direction and the coordinate system setting, where P1 represents the first coordinate and P2 represents the second coordinate.

[0065] As a possible embodiment, since the image switching direction can be one of switching to the left, switching to the right, switching upward, switching downward, and switching in a diagonal direction, the difference calculation between the first coordinate and the second coordinate may be calculated based on the horizontal coordinate x1 in the first coordinate and the horizontal coordinate x2 in the second coordinate, or may be calculated based on the vertical coordinate y1 in the first coordinate and the vertical coordinate y2 in the second coordinate.

[0066] See also Figure 3 , Figure 3 FIG. 1 is a schematic diagram of an image left-slide switching effect shown in an exemplary embodiment of the present application. Figure 3 As shown, the blue area is the old image area, and the coordinates of the lower left corner (leftBottomDotX, leftBottomDotY) and the upper right corner (RightTopDotX, RightTopDotY) of the area are shown. The orange area is the new image area. A gradient band area is set between the old image area and the new image area, and the coordinates of the lower left corner (RightTopDotX, leftBottomDotY) and the upper right corner (RightTopDotX+endMixWidth, RightTopDotY) of the area are shown. Part of the gradient band area is in the old image area, and part of it is in the new image area. As the switching progress changes, the new image progressively covers the old image, and the position and width of the gradient band and the gradient mixing coefficient will also change.

[0067] exist Figure 3 In the example, if the coordinate system is established with the lower left corner of the display area as the origin, the calculation formula for the mixing coefficient of each pixel point in the gradient band area is:

[0068] newPct=((cur_x-RightTopDotX)÷endMixWidth)×move_progress Formula (3)

[0069] Among them, cur_x is the horizontal coordinate in the second coordinate, and RightTopDotX is the horizontal coordinate in the first coordinate.

[0070] See also Figure 4 , Figure 4FIG. 1 is a schematic diagram of an image right-slide switching effect shown in an exemplary embodiment of the present application. Figure 4 As shown, the blue area is the old image area, showing the lower left corner coordinates (leftBottomDotX, leftBottomDotY) and the upper right corner coordinates (RightTopDotX, RightTopDotY) of the area; the orange area is the new image area; a gradient band area is set between the old image area and the new image area, showing the lower left corner coordinates (RightTopDotX-endMixWidth, leftBottomDotY) and the upper right corner coordinates (leftTopDotX, RightTopDotY) of the area; part of the gradient band area is in the old image area and part of it is in the new image area; as the switching progress changes, the new image progressively covers the old image, and the position and width of the gradient band and the gradient mixing coefficient will also change.

[0071] exist Figure 4 In the example, if the coordinate system is established with the lower left corner of the display area as the origin, the calculation formula for the mixing coefficient of each pixel point in the gradient band area is:

[0072] newPct=((leftTopDotX-cur_x)÷endMixWidth)×move_progress Formula (4)

[0073] Among them, leftTopDotX is the horizontal coordinate in the first coordinate; cur_x is the horizontal coordinate in the second coordinate.

[0074] As a possible implementation example, during calculation, the coordinate values ​​are normalized to ensure the calculation efficiency of the gradient band blending coefficients, thereby ensuring the efficiency of the motion effect setting.

[0075] In one embodiment, a switching animation is set in a gradient band area according to a gradient band blending coefficient, including: defining the overlapping portion of the gradient band area with the old image as a first area, and defining the overlapping portion with the new image as a second area; determining first animation parameters of each pixel in the first area and second animation parameters of each pixel in the second area according to the gradient blending coefficient, the first animation parameters including at least one of the transparency, brightness and saturation of the old image, and the second animation parameters including at least one of the color fusion ratio, transparency ratio, brightness ratio and saturation ratio of the old image and the new image; setting the switching animation of the first area according to each first animation parameter, and setting the switching animation of the second area according to each second animation parameter.

[0076] In this embodiment, since the setting of the gradient band area can be: the gradient band area is entirely in the old image area and adjacent to the new image area, or the gradient band area is entirely in the new image area and adjacent to the old image area, or the gradient band area is partially in the old image area and partially in the new image area, and only the texture of the old image exists in the old image area, and the new image area is the new image covering the old image, wherein the texture of the old image and the texture of the new image coexist, therefore, only the texture of the old image exists in the first area, and the texture of the old image and the texture of the new image coexist in the second area, so the first motion effect parameter includes at least one of the transparency, brightness and saturation of the old image, and the second motion effect parameter includes at least one of the color fusion ratio, transparency ratio, brightness ratio and saturation ratio of the old image and the new image.

[0077] Exemplarily, the first motion effect parameter includes at least one of the transparency, brightness and saturation of the old image, and the arrangement and combination include: transparency; brightness; saturation; transparency, brightness; brightness, saturation; transparency, saturation; transparency, brightness, saturation; transparency, brightness, saturation.

[0078] Exemplarily, the second motion effect parameter includes at least one of the color fusion ratio, transparency ratio, brightness ratio and saturation ratio of the old image and the new image, and the combination includes: color fusion ratio; transparency ratio; brightness ratio; saturation; color fusion ratio, transparency ratio; color fusion ratio, brightness ratio; color fusion ratio, saturation ratio; transparency ratio, brightness ratio; transparency ratio, saturation ratio; brightness ratio, saturation ratio; color fusion ratio, transparency ratio, brightness ratio; color fusion ratio, transparency ratio, saturation ratio; color fusion ratio, brightness ratio, saturation ratio; color fusion ratio, transparency ratio, saturation ratio; color fusion ratio, brightness ratio, saturation ratio; transparency ratio, brightness ratio, saturation ratio; color fusion ratio, transparency ratio, brightness ratio, saturation ratio.

[0079] In addition, in this embodiment, the first motion effect parameter of each pixel in the first area is determined according to the gradient blending coefficient, that is, the transparency, brightness and saturation of the old image in the first area are determined according to the gradient blending coefficient. Exemplarily, the percentages of transparency, brightness and saturation are the values ​​of the gradient blending coefficient; according to the gradient blending coefficient, the color fusion ratio, transparency ratio, brightness ratio and saturation ratio of the old image and the new image in the second area are determined. Exemplarily, the proportion of the color fusion ratio, transparency ratio, brightness ratio and saturation ratio of the new image is the difference between 100% and the gradient blending coefficient, and the proportion of the color fusion ratio, transparency ratio, brightness ratio and saturation ratio of the old image is the value of the gradient blending coefficient.

[0080] Therefore, the switching animation of the first area is set according to each first animation parameter, that is, each pixel point in the first area sets at least one of its transparency, brightness and saturation according to its own mixing coefficient.

[0081] Therefore, in the switching animation of the second area set according to each second animation parameter: the color fusion animation effect refers to the color of each pixel point in the second area fusing the pixel values ​​of the new image and the old image according to their respective color fusion ratios; the transparency animation effect refers to setting the transparency of the new image and the old image respectively according to the transparency ratio; the brightness animation effect refers to setting the brightness of the new image and the old image respectively according to the brightness ratio; the saturation animation effect refers to setting the saturation of the new image and the old image respectively according to the saturation ratio.

[0082] In the embodiment, different switching animation setting strategies are formulated in consideration of the texture conditions of the gradient band area, and the switching animation setting strategies in different areas can be a variety of permutations and combinations, which solves the problem of single image switching effects and serious homogeneity. In addition, a variety of permutations and combinations can be freely set to meet personalized needs and solve the problem of poor customizability of image switching effects.

[0083] In one embodiment, setting the switching animation also includes: determining the area in the new image that does not overlap with the gradient band area as a texture mixing area; determining the texture mixing coefficient of the texture mixing area according to the switching progress; and setting the switching animation in the texture mixing area according to the texture mixing coefficient.

[0084] The texture mixing area is the area where the texture of the overlapping part of the new image and the old image is mixed; the texture mixing coefficient refers to the parameter that controls the switching effect in the texture mixing area.

[0085] In this embodiment, when the switching effect of the gradient band area changes with the switching progress, the width and mixing coefficient of the texture mixing area are dynamically controlled according to the switching progress, so as to dynamically set the switching effect of the texture mixing area and further enhance the visual effect of the image switching.

[0086] Exemplarily, the texture mixing coefficient of the texture mixing area is determined according to the switching progress, that is, the value of the texture mixing coefficient is the value of the switching progress.

[0087] In one embodiment, a switching animation is set in a texture mixing area according to a texture mixing coefficient, including: determining a third animation parameter of the texture mixing area according to the texture mixing coefficient, the third animation parameter including at least one of a color fusion ratio, a transparency ratio, a brightness ratio and a saturation ratio of the old image and the new image; and setting a switching animation of the texture mixing area according to the third animation parameter.

[0088] Exemplarily, the third motion effect parameter includes at least one of the color fusion ratio, transparency ratio, brightness ratio and saturation ratio of the old image and the new image, and the combination includes: color fusion ratio; transparency ratio; brightness ratio; saturation; color fusion ratio, transparency ratio; color fusion ratio, brightness ratio; color fusion ratio, saturation ratio; transparency ratio, brightness ratio; transparency ratio, saturation ratio; brightness ratio, saturation ratio; color fusion ratio, transparency ratio, brightness ratio; color fusion ratio, transparency ratio, saturation ratio; color fusion ratio, brightness ratio, saturation ratio; color fusion ratio, transparency ratio, saturation ratio; color fusion ratio, brightness ratio, saturation ratio; transparency ratio, brightness ratio, saturation ratio; color fusion ratio, transparency ratio, brightness ratio, saturation ratio.

[0089] In addition, in this embodiment, according to the texture mixing coefficient, the color fusion ratio, transparency ratio, brightness ratio and saturation ratio of the old image and the new image in the texture mixing area are determined. By way of example, the color fusion ratio, transparency ratio, brightness ratio and saturation ratio of the new image is a difference between 100% and the texture mixing coefficient, and the color fusion ratio, transparency ratio, brightness ratio and saturation ratio of the old image is the value of the texture mixing coefficient.

[0090] Therefore, in the switching animation of the texture mixing area set according to the third animation parameter: the color fusion animation refers to the color of the texture mixing area being the fusion of the pixel values ​​of the new image and the old image; the transparency animation refers to setting the transparency of the new image and the old image respectively according to the transparency ratio; the brightness animation refers to setting the brightness of the new image and the old image respectively according to the brightness ratio; the saturation animation refers to setting the saturation of the new image and the old image respectively according to the saturation ratio.

[0091] In this embodiment, at the beginning of image switching, the texture mixing coefficient is close to 0, and the old image is mainly displayed. As the switching progresses, the texture mixing coefficient gradually increases to 1, at which time the new image is fully displayed, thereby achieving a smooth transition from the old image to the new image.

[0092] Exemplarily, if the third motion effect parameter is the transparency ratio, then at the beginning of the image switching, the texture mixing coefficient is close to 0, that is, in the transparency ratio, the transparency ratio of the old image is close to 0, indicating that the more opaque, the transparency ratio of the new image is close to 100%, the more transparent, mainly displaying the old image, as the switching progresses, the texture mixing coefficient is close to 1, that is, in the transparency ratio, the transparency ratio of the old image is close to 100%, indicating that the more transparent, the transparency ratio of the new image is close to 0%, the more opaque, and the new image is fully displayed. When the image switches, the old image gradually becomes perspective, and the new image gradually becomes non-perspective.

[0093] In this embodiment, a switching animation setting strategy is formulated in the texture mixing area. The strategy can be a variety of permutations and combinations, which solves the problem of single image switching effect and serious homogeneity. In addition, a variety of permutations and combinations can be freely set to meet personalized needs, solve the problem of poor customizability of image switching effects, and make the visual effect of image switching cooler.

[0094] In a possible embodiment, the setting of the image switching effect includes: dynamically setting the gradient band width, gradient band mixing coefficient, texture mixing area width and texture mixing coefficient according to the switching progress; dynamically controlling the gradient band range, gradient band area switching effect display, texture mixing range and texture mixing area switching effect display according to the above four control elements, thereby realizing the dynamic setting of the image switching effect.

[0095] As a possible embodiment, the four control factors of gradient band width, gradient band blending coefficient, texture blending area width and texture blending coefficient are combined to realize the dynamic setting of image switching effect, thereby further enhancing the visual effect of image switching.

[0096] In one embodiment, after setting the switching animation in the texture mixing area, it also includes: if the switching progress is completed, the display of the new image is switched from the first texture to the second texture, the first texture is used to display the new image to be cut, and the second texture is used to display the old image to be cut; reset the texture mixing coefficient, and display the next new image to be cut in the first texture, waiting for the next image switching instruction.

[0097] The switch between the old and new images goes through a "switching process" until the new image is fully presented, that is, "when the switch is completed". When the image switch is completed, it will wait for the next image switch interaction.

[0098] In this embodiment, the first texture in the display area is used to display the new image to be cut (ie, the aforementioned new image), and the second texture is used to display the old image to be cut (ie, the aforementioned old image).

[0099] In this embodiment, if the switching progress is completed, the display of the new image is switched from the first texture to the second texture, and the texture mixing coefficient is reset, and the next new image to be cut is displayed in the first texture, waiting for the next image switching instruction to be issued. In this way, the loading of the next new image to be cut is realized, and the display of the current new image is kept unaffected, thereby ensuring the response speed of the dynamic effect display during the next image switching process, thereby further improving the user experience.

[0100] As a possible embodiment, after the image switching is completed, the display switching of the texture can be divided into four steps, as shown in Table 1:

[0101] Table 1: Texture display switching steps

[0102]

[0103] As shown in Table 1, Picture 1, Picture 2, and Picture 2 are defined as the old image, the new image, and the new image to be switched next time, respectively. First, when the switch is completed, the texture mixing coefficient is 1, Image 1 is in Texture 1, Picture 2 is in Texture 2, and Picture 2 is fully displayed and needs to remain displayed, so no control action is performed; second, after the switch is completed, the texture mixing coefficient is still 1, and Picture 2 is still in Texture 2, but Texture 1 needs to load Picture 2. At this time, Picture 2 is still fully displayed; third, Picture 2 is still in Texture 2, but Picture 2 in Texture 1 has been loaded. At this time, the texture mixing coefficient is reset to 0, and Picture 2 is still fully displayed; fourth, Picture 1 is in Texture 1, and Texture 2 loads Picture 3. At this time, Picture 2 is still displayed, and Picture 3 is loaded into Texture 2 as the next image to be switched. It can be seen that the new image is in display state when the switch is completed until the next image switch starts.

[0104] In a possible embodiment, the motion effect is realized based on OpenGL ES (Open Graphics Library for Embedded Systems) 3.0 multi-texture technology.

[0105] As a possible implementation example, OpenGLES can be deployed in cross-platform wallpaper, photo album, multimedia and other applications. Therefore, the above-mentioned image switching animation setting solution can be cross-platform and has a wide range of applications, such as gallery, wallpaper, multimedia and other applications.

[0106] In a possible embodiment, a GPU (Graphics Processing Unit) is used to draw the motion effect.

[0107] As a possible implementation example, less CPU resources can be occupied, which is beneficial to the reasonable allocation of system resources.

[0108] The above-mentioned method for setting image switching animation effects first responds to the image switching instruction, controls the new image to move toward the old image currently displayed in the display area for progressive coverage, and if it is detected that there is overlap between the new image and the old image, sets a gradient band area between the new image and the old image, and then determines the gradient band mixing coefficient of the gradient band area according to the switching progress, and the switching progress is determined by the overlap range between the new image and the old image. Finally, according to the gradient band mixing coefficient, sets the switching animation effect in the gradient band area. In the switching process where the new image progressively covers the old image, a gradient band area is set between the new image and the old image, and based on the real-time switching progress, the mixing coefficient of the gradient band between the new and old images is adjusted, thereby realizing the dynamic setting of the switching animation in the gradient band area, optimizing the visual effect of image switching, and improving the user experience.

[0109] See also Figure 5 , Figure 5 is a block diagram of an image switching effect setting system shown in an exemplary embodiment of the present application. The system can be applied to Figure 1 The implementation environment shown is a schematic diagram. It should be understood that the system may also be applicable to other exemplary implementation environments, and this embodiment does not limit the implementation environment to which the system is applicable.

[0110] like Figure 5 As shown, in an exemplary embodiment, the image switching dynamic effect setting system 500 includes at least a command response module 510, a gradient band setting module 520, a coefficient determination module 530 and a dynamic effect setting module 540, which are described in detail as follows:

[0111] The instruction response module 510 is used to control the new image to move to the old image currently displayed in the display area to perform progressive coverage in response to the image switching instruction;

[0112] A gradient band setting module 520 is used to set a gradient band area between the new image and the old image if it is detected that there is an overlap between the new image and the old image;

[0113] A coefficient determination module 530, for determining a gradient band blending coefficient of a gradient band region according to a switching progress, wherein the switching progress is determined by an overlap range between a new image and an old image;

[0114] The dynamic effect setting module 540 is used to set the switching dynamic effect in the gradient band area according to the gradient band mixing coefficient.

[0115] It should be noted that the image switching animation effect setting system provided in the above embodiment and the image switching animation effect setting method provided in the above embodiment belong to the same concept, wherein the contents of the operations performed by each module have been described in detail in the method embodiment and will not be repeated here.

[0116] See also Figure 6 , Figure 6 It is a structural schematic diagram of an electronic device provided by an embodiment of the present application. Figure 6 The structure diagram of the computer system suitable for implementing the electronic device of the embodiment of the present application is shown. It should be noted that: Figure 6 The computer system 600 of the vehicle-mounted terminal shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0117] like Figure 6 As shown, the computer system 600 includes a central processing unit (CPU) 601, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 602 or the program loaded from the storage part 608 to the random access memory (RAM) 603, such as executing the method in the above embodiment. In the RAM 603, various programs and data required for system operation are also stored. The CPU 601, the ROM 602 and the RAM 603 are connected to each other through the bus 604. The input / output (I / O) interface 605 is also connected to the bus 604.

[0118] The following components are connected to the I / O interface 605: an input section 606 including a keyboard, a mouse, etc.; an output section 607 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 608 including a hard disk, etc.; and a communication section 609 including a network interface card such as a LAN (Local Area Network) card, a modem, etc. The communication section 609 performs communication processing via a network such as the Internet. A drive 610 is also connected to the I / O interface 605 as needed. A removable medium 611, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 610 as needed so that a computer program read therefrom is installed into the storage section 608 as needed.

[0119] In particular, according to an embodiment of the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present application includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a computer program for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication section 609, and / or installed from a removable medium 611. When the computer program is executed by a central processing unit (CPU) 601, various functions defined in the system of the present application are executed.

[0120] The present application also provides a computer-readable storage medium on which a computer program is stored. When the computer program is executed by a computer processor, the computer executes the above-mentioned method for setting image switching effects. The computer-readable storage medium may be included in the vehicle-mounted terminal described in the above-mentioned embodiment, or may exist independently without being assembled into the vehicle-mounted terminal.

[0121] It should be noted that the computer-readable medium shown in the embodiment of the present application can be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium can be, for example, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media can include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM), a flash memory, an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present application, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, wherein a computer-readable computer program is carried. This propagated data signal can take a variety of forms, including but not limited to an electromagnetic signal, an optical signal, or any suitable combination of the above. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. A computer program contained on a computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wired, etc., or any suitable combination of the above.

[0122] The flowchart and block diagram in the accompanying drawings illustrate the possible architecture, functions and operations of the system, method and computer program product according to various embodiments of the present application. Wherein, each box in the flowchart or block diagram can represent a module, a program segment, or a part of the code, and the above-mentioned module, program segment, or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flowchart, and the combination of boxes in the block diagram or flowchart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0123] The units involved in the embodiments described in this application may be implemented by software or hardware, and the units described may also be set in a processor. The names of these units do not, in some cases, constitute limitations on the units themselves.

[0124] The above embodiments are merely illustrative of the principles and effects of the present application, and are not intended to limit the present application. Anyone familiar with the technology may modify or change the above embodiments without violating the spirit and scope of the present application. Therefore, all equivalent modifications or changes made by a person of ordinary skill in the art without departing from the spirit and technical ideas disclosed in the present application shall still be covered by the claims of the present application.

Claims

1. A method for setting image switching dynamic effects, characterized in that: The method comprises: In response to the image switching instruction, controlling the new image to move toward the old image currently displayed in the display area to perform progressive coverage; If it is detected that there is an overlap between the new image and the old image, a gradient zone is set between the new image and the old image; Determining a gradient band mixing coefficient of the gradient band area according to a switching progress, wherein the switching progress is determined by an overlap range between the new image and the old image; According to the gradient band blending coefficient, a switching animation is set in the gradient band area.

2. The method for setting image switching effects according to claim 1, characterized in that: The step of setting a gradient zone between the new image and the old image comprises: Calculating the width of the gradient band according to the switching progress and the preset initial width of the gradient band, wherein the width of the gradient band is negatively correlated with the switching progress; The gradient band area is set between the new image and the old image according to the gradient band width.

3. The method for setting image switching effects according to claim 1, characterized in that: The step of determining the gradient band mixing coefficient of the gradient band area according to the switching progress includes: Determining first coordinates of boundary pixel points between the old image and the gradient zone area, and determining second coordinates of each pixel point in the gradient zone area according to a preset coordinate system, wherein the coordinate system is set based on the display area; The mixing coefficient of each pixel point in the gradient band area is calculated according to the first coordinate, the second coordinate, the gradient band width and the switching progress to obtain the gradient band mixing coefficient.

4. The method for setting image switching effects according to claim 1, characterized in that: The step of setting a switching effect in the gradient band area according to the gradient band blending coefficient includes: The overlapping portion of the gradient band region with the old image is defined as a first region, and the overlapping portion of the gradient band region with the new image is defined as a second region; Determine, according to the gradient blending coefficient, a first motion effect parameter of each pixel point in the first area and a second motion effect parameter of each pixel point in the second area, wherein the first motion effect parameter includes at least one of transparency, brightness and saturation of the old image, and the second motion effect parameter includes at least one of a color fusion ratio, a transparency ratio, a brightness ratio and a saturation ratio of the old image and the new image; The switching animation of the first area is set according to each of the first animation effect parameters, and the switching animation of the second area is set according to each of the second animation effect parameters.

5. The method for setting image switching effects according to any one of claims 1 to 4, characterized in that: The setting of the switching effect also includes: Determine the area in the new image that does not overlap with the gradient band area as a texture mixing area; Determining a texture mixing coefficient of the texture mixing area according to the switching progress; According to the texture mixing coefficient, a switching animation is set in the texture mixing area.

6. The method for setting image switching effects according to claim 5, characterized in that: The step of setting a switching animation in the texture mixing area according to the texture mixing coefficient includes: Determine a third motion effect parameter of the texture mixing area according to the texture mixing coefficient, wherein the third motion effect parameter includes at least one of a color fusion ratio, a transparency ratio, a brightness ratio, and a saturation ratio of the old image and the new image; According to the third animation parameter, the switching animation of the texture mixing area is set.

7. The method for setting image switching effects according to claim 5, characterized in that: After setting the switching effect in the texture mixing area, the method further includes: If the switching progress is switching completion, the display of the new image is switched from the first texture to the second texture, the first texture is used to display the new image to be switched, and the second texture is used to display the old image to be switched; The texture mixing coefficient is reset, and the next new image to be cut is displayed in the first texture, waiting for the next image switching instruction.

8. A system for setting image switching dynamic effects, characterized in that: The system comprises: An instruction response module, used for controlling the new image to move to the old image currently displayed in the display area to perform progressive coverage in response to the image switching instruction; A gradient band setting module, configured to set a gradient band area between the new image and the old image if it is detected that there is an overlap between the new image and the old image; A coefficient determination module, used for determining the gradient band mixing coefficient of the gradient band area according to the switching progress, wherein the switching progress is determined by the overlap range between the new image and the old image; The dynamic effect setting module is used to set the switching dynamic effect in the gradient band area according to the gradient band mixing coefficient.

9. An electronic device, characterized in that: include: one or more processors; A storage device for storing one or more programs, which, when executed by the one or more processors, enables the electronic device to implement the image switching animation setting method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the computer program is executed by a processor of a computer, the computer is caused to execute the method for setting image switching animation effects as described in any one of claims 1 to 7.

Images