Interface switching method and device, electronic equipment and storage medium

Abstract

The present disclosure provides an interface switching method and device, electronic equipment and storage medium, based on the performance parameters corresponding to the time frames of the preset frame number respectively of the gray vector diagram and the preset frame number respectively, a mask picture corresponding to each time frame is generated; in response to an interface switching instruction, a first interface currently displayed in a graphical user interface and a second interface to be switched are determined, and the mask picture corresponding to each time frame is overlaid in the graphical user interface in time sequence, so as to display the interface elements corresponding to the first interface through the image area corresponding to the first color in the mask picture, and display the interface elements corresponding to the second interface through the image area corresponding to the second color; in response to the completion of the display of the mask picture corresponding to the time frames of the preset frame number, the second interface is displayed in the graphical user interface. In this way, the user can set different performance effects of the mask picture through different performance parameters, so that the switching between interfaces through the mask picture is more novel and vivid.

Description

TECHNICAL FIELD

[0001] The present disclosure relates to the technical field of interface interaction design, and in particular, to an interface switching method and device, an electronic device, and a storage medium. BACKGROUND

[0002] In related technologies, the switching manner between interfaces is usually hard switching or gradual page switching between interfaces, wherein the hard switching refers to directly switching the current interface to the next interface, and the gradual page switching refers to gradually displaying the next interface by changing the transparency of the current interface from 1 to 0. However, the above interface switching manner has a relatively single performance, and it is difficult to realize the stylization and diversity performance of interface switching. SUMMARY

[0003] The present disclosure provides an interface switching method, device, electronic device, and storage medium to make the interface switching more stylized and diverse.

[0004] In a first aspect, the present disclosure provides an interface switching method, which includes: obtaining a grayscale vector diagram and performance parameters corresponding to time frames of a preset frame number; generating mask diagrams corresponding to the time frames of the preset frame number based on the grayscale vector diagram and the performance parameters; wherein the mask diagram includes a first color and a second color; in response to an interface switching instruction, determining a first interface currently displayed in a graphical user interface and a second interface to be switched, and sequentially covering the mask diagrams corresponding to the time frames of the preset frame number in the graphical user interface in time order, so as to display, through an image area corresponding to the first color in the mask diagram displayed by the graphical user interface, interface elements corresponding to the first interface, and display, through an image area corresponding to the second color, interface elements corresponding to the second interface; wherein the image area corresponding to the second color in the mask diagram corresponding to a current time frame is smaller than the image area corresponding to the second color in the mask diagram corresponding to a next time frame of the current time frame; in response to the completion of displaying the mask diagrams corresponding to the time frames of the preset frame number, controlling the display of the second interface in the graphical user interface.

[0005] In a second aspect, the present disclosure provides an interface switching device, comprising: a parameter acquisition module configured to acquire performance parameters corresponding to a grayscale vector diagram and time frames of a preset number of frames; a mask generation module configured to generate mask diagrams corresponding to the time frames of the preset number of frames based on the grayscale vector diagram and the performance parameters; wherein the mask diagrams comprise a first color and a second color; an interface switching module configured to, in response to an interface switching instruction, determine a first interface currently displayed in a graphical user interface and a second interface to be switched, and sequentially cover the mask diagrams corresponding to the time frames of the preset number of frames in the graphical user interface in chronological order, so as to display, through the mask diagrams displayed by the graphical user interface, interface elements corresponding to the first interface in an image area corresponding to the first color in the mask diagrams, and interface elements corresponding to the second interface in an image area corresponding to the second color; wherein an image area corresponding to the second color in a mask diagram corresponding to a current time frame is smaller than an image area corresponding to the second color in a mask diagram corresponding to a next time frame of the current time frame; and a switching completion module configured to, in response to completion of display of the mask diagrams corresponding to the time frames of the preset number of frames, control the second interface to be displayed in the graphical user interface.

[0006] In a third aspect, the present disclosure provides an electronic device, comprising a processor and a memory, the memory storing machine executable instructions capable of being executed by the processor, and the processor executes the machine executable instructions to implement the interface switching method described above.

[0007] In a fourth aspect, the present disclosure provides a computer readable storage medium, the computer readable storage medium storing computer executable instructions, and the computer executable instructions, when invoked and executed by a processor, cause the processor to implement the interface switching method described above.

[0008] The embodiments of the present disclosure bring the following beneficial effects:

[0009] The interface switching method, device, electronic device and storage medium provided by the present disclosure first acquire performance parameters corresponding to a grayscale vector diagram and time frames of a preset number of frames; then generate mask diagrams corresponding to the time frames of the preset number of frames respectively based on the grayscale vector diagram and the performance parameters; wherein the mask diagrams include a first color and a second color; then in response to an interface switching instruction, determine a first interface currently displayed in a graphical user interface and a second interface to be switched, and sequentially cover the mask diagrams corresponding to the time frames of the preset number of frames respectively in the graphical user interface in chronological order, so as to display interface elements corresponding to the first interface in an image area corresponding to the first color in the mask diagram displayed by the graphical user interface, and display interface elements corresponding to the second interface in an image area corresponding to the second color; wherein an image area corresponding to the second color in a mask diagram corresponding to a current time frame is smaller than an image area corresponding to the second color in a mask diagram corresponding to a next time frame of the current time frame; in response to the completion of the display of the mask diagrams corresponding to the time frames of the preset number of frames, control the display of the second interface in the graphical user interface. In this way, the user can set different performance effects of the mask diagrams through different performance parameters, so that the interface switching between the mask diagrams is more novel and vivid.

[0010] Other features and advantages of the present disclosure will be described in the following description, or can be inferred from the description, or can be determined without doubt, or can be known by implementing the above-mentioned technologies of the present disclosure.

[0011] In order to make the above-mentioned purposes, features and advantages of the present disclosure more obvious and easy to understand, the following preferred embodiments are specifically described in detail below, and the accompanying drawings are described as follows. BRIEF DESCRIPTION OF DRAWINGS

[0012] In order to more clearly illustrate the specific embodiments of the present disclosure or the technical solutions in the prior art, the following will briefly introduce the drawings needed to be used in the specific embodiments or the prior art description. Obviously, the drawings in the following description are some embodiments of the present disclosure, and those skilled in the art can also obtain other drawings without creative labor based on these drawings.

[0013] Figure 1 A flowchart of an interface switching method provided by an embodiment of the present disclosure;

[0014] Figure 2 A schematic diagram of a grayscale vector diagram provided by an embodiment of the present disclosure;

[0015] Figure 3 Mask diagrams corresponding to different scaling parameters provided by an embodiment of the present disclosure;

[0016] Figure 4A feathering diagram of a target shape corresponding to different gray bias amounts provided by the embodiment of the present disclosure;

[0017] Figure 5 A schematic diagram of partitioned gray levels corresponding to a plurality of image regions respectively provided by the embodiment of the present disclosure;

[0018] Figure 6 A mask image corresponding to a combination of mask image regions corresponding to a plurality of image regions respectively provided by the embodiment of the present disclosure;

[0019] Figure 7 A schematic diagram of a target gray level diagram provided by the embodiment of the present disclosure;

[0020] Figure 8 A differential image of a target shape in the same image region provided by the embodiment of the present disclosure;

[0021] Figure 9 A mask diagram of triangular differentiation provided by the embodiment of the present disclosure;

[0022] Figure 10 A mask diagram of a plurality of erasing performances provided by the embodiment of the present disclosure;

[0023] Figure 11 A schematic diagram corresponding to a mask diagram after outer hatching and a mask diagram after inner hatching provided by the embodiment of the present disclosure;

[0024] Figure 12 A schematic diagram of a mask diagram after shape hatching based on a preset noise diagram provided by the embodiment of the present disclosure;

[0025] Figure 13 An image effect schematic diagram obtained by using a calculated screen UV sampling map provided by the embodiment of the present disclosure;

[0026] Figure 14 A structural schematic diagram of an interface switching device provided by the embodiment of the present disclosure;

[0027] Figure 15 A structural schematic diagram of an electronic device provided by the embodiment of the present disclosure. DETAILED DESCRIPTION

[0028] To make the purposes, technical solutions and advantages of the embodiments of the present disclosure clearer, the technical solutions in the embodiments of the present disclosure will be described clearly and completely below with reference to the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are part of the embodiments of the present disclosure, rather than all the embodiments of the present disclosure. The components of the embodiments of the present disclosure described and shown in the drawings herein can be arranged and designed in various different configurations.

[0029] The following detailed description of embodiments of the disclosure provided in the accompanying drawings is not intended to limit the scope of the disclosure claimed, but merely represents selected embodiments of the disclosure. Based on the embodiments in the disclosure, all other embodiments obtained by those of ordinary skill in the art without creative labor are within the scope of protection of the disclosure.

[0030] In the related art, the switching mode between interfaces is usually hard switching or gradual page switching between interfaces, wherein the hard switching means that the current interface is directly switched to the next interface, and the gradual page switching means that the transparency of the current interface as a whole changes from 1 to 0, thereby gradually displaying the next interface. However, the above-mentioned mode cannot make the switching between interfaces have a more novel and dynamic performance, nor can it improve the interactive experience of the player.

[0031] Based on the above problems, the embodiments of the present application provide an interface switching method and device, electronic equipment and storage medium, which can be applied to the scene of interface rendering and interface switching.

[0032] In order to facilitate the understanding of the embodiments of the present application, first, a kind of interface switching method disclosed by the embodiments of the present application is introduced in detail, as shown in the figure, the method comprises: Figure 1

[0033] Step S102, the performance parameters corresponding to the time frame of the preset frame number and the gray vector diagram are acquired.

[0034] In specific implementation, the pattern shape contained in the above-mentioned gray vector diagram can be set according to user demand, for example, the pattern shape can be a triangle, a circle or a square, etc. At the same time, the gray value corresponding to the center of the pattern shape in the gray vector diagram is usually the second gray value, the gray value corresponding to the edge of the pattern shape is usually the first gray value, and the gray value between the center and the edge of the pattern shape is linearly transitioned. The above-mentioned preset frame number is matched with the switching time length of subsequent interface switching, usually the more the preset frame number is, the longer the switching time length of interface switching is;The specific frame number corresponding to the above-mentioned preset frame number can be determined according to the research and development demand, for example, the preset frame number can be 3 frames or 5 frames, etc. The specific parameter corresponding to the above-mentioned performance parameter can be determined according to the research and development demand, and the performance parameter is used to control the performance effect of the mask picture obtained subsequently.

[0035] Step S104, based on the gray vector diagram and the performance parameter, the mask picture corresponding to the time frame of the preset frame number is generated respectively;Wherein, the mask picture includes first color and second color.

[0036] ​In a specific implementation, in order to obtain an animation effect of interface switching, different performance parameters are configured for different time frames, and the gray vector diagram is transformed according to the performance parameters corresponding to each time frame to obtain a mask diagram corresponding to each time frame. Specifically, the mask diagrams corresponding to different time frames are different, but the patterns in the mask diagrams corresponding to different time frames are the same, and the size, number and outline of the patterns obtained based on different performance parameters are different.

[0037] The mask diagram usually only includes a first color and a second color, and the specific colors corresponding to the first color and the second color can be determined according to research and development requirements. In a specific embodiment, the mask diagram is usually a black and white image, that is, the mask diagram only includes black or white, and the first color can be determined as black and the second color can be determined as white.

[0038] In step S106, in response to the interface switching instruction, a first interface currently displayed in the graphical user interface and a second interface to be switched are determined, and the mask diagrams corresponding to a preset number of time frames in time sequence are overlaid on the graphical user interface in sequence, so that the image area corresponding to the first color in the mask diagram displayed by the graphical user interface displays the interface element corresponding to the first interface, and the image area corresponding to the second color displays the interface element corresponding to the second interface; wherein the image area corresponding to the second color in the mask diagram corresponding to the current time frame is smaller than the image area corresponding to the second color in the mask diagram corresponding to the next time frame of the current time frame.

[0039] In a specific implementation, the interface switching instruction can be determined according to research and development requirements. For example, the interface switching instruction can be triggered by the user clicking a certain control in the graphical user interface, or can be triggered by the user clicking a certain virtual object in the game scene, or can be triggered by the user clicking a certain key on the gamepad or keyboard. After the user triggers the interface switching instruction, the first interface currently displayed in the graphical user interface and the second interface to be switched are first determined, and then the mask diagrams corresponding to each time frame are overlaid on the graphical user interface in sequence according to the time sequence corresponding to the time frames of the preset number, so that different colors in the mask diagram display the interface elements corresponding to different interfaces, so that the second interface to be switched gradually appears in the graphical user interface according to the performance effect of the mask diagrams corresponding to the time frames of the preset number.

[0040] Specifically, the image region corresponding to the first color in the mask image is used to display the interface element corresponding to the first interface, and the image region corresponding to the second color in the mask image is used to display the interface element corresponding to the second interface; wherein the image region corresponding to the second color in the mask image corresponding to the current time frame is smaller than the image region corresponding to the second color in the mask image corresponding to the next time frame of the current time frame, so that the display area of the second interface in the graphical user interface can be gradually increased as the switching time advances.

[0041] In step S108, in response to the fact that the display of the mask image corresponding to the preset number of time frames is completed, the second interface is displayed in the graphical user interface.

[0042] In a specific implementation, after the mask image corresponding to the last time frame is overlaid on the graphical user interface, only the second interface is displayed in the graphical user interface, and the interface element corresponding to the first interface is not displayed, so that the interface switching or page switching is completed.

[0043] The above interface switching method can set different performance effects of the mask image through different performance parameters, so that the interface switching between interfaces through the mask image is more novel and vivid.

[0044] The following embodiments are used to describe the way of generating the mask image.

[0045] Specifically, the above-mentioned gray vector image contains a target shape; wherein the edge of the target shape in the gray vector image is a first gray value, the center point of the target shape is a second gray value, and the gray value between the center point of the target shape and the edge linearly transitions from the second gray value to the first gray value.

[0046] In a specific implementation, the specific shape corresponding to the target shape can be determined according to the research and development requirements, for example, the target shape can be a triangle, a circle or a square, etc. The specific gray values corresponding to the first gray value and the second gray value can be determined according to the research and development requirements, for example, the first gray value can be 0, and the second gray value can be 1.

[0047] As shown in Figure 2 Fig. 1 is a schematic diagram of a gray vector image provided by an embodiment of the present application, Figure 2 The target shape included in the gray vector image in Fig. 1 is a triangle, and the gray vector image includes two diagonally placed triangles. The gray value of the center point of the triangle in the gray vector image is 1 (i.e. white), the gray value of the edge of the triangle is 0 (i.e. black), and the gray value between the center point and the edge linearly transitions from 1 to 0.

[0048] In an optional embodiment, the image region corresponding to the second color in the mask image is a target shape, i.e., the pattern of the image region corresponding to the second color in the mask image of each time frame includes the target shape.

[0049] In an optional embodiment, the performance parameter includes at least one of a scaling parameter, a partition parameter, and an outline parameter for the target shape. The scaling parameter is used to control the size of the target shape in the mask image. The partition parameter is used to divide the mask image into multiple image regions, and to perform differential scaling on the target shape corresponding to each image region. The outline parameter is used to perform outer or inner outline on the target shape in the mask image. The performance parameter is used to increase the stylization effect of the mask image, e.g., all target shapes are of different sizes, and change in size according to a certain order.

[0050] In an optional embodiment, the performance parameter includes a scaling parameter, which is mainly used to change the size of the target shape in the mask image. Based on this, the specific process of generating the mask image corresponding to each time frame of the preset number of time frames based on the gray vector image and the performance parameter can include: for each time frame in the preset number of time frames, performing the following operation: based on the scaling parameter corresponding to the current time frame, performing gray elimination processing on the gray vector image to obtain the mask image containing the target shape corresponding to the current time frame; wherein the size of the target shape in the mask image matches the scaling parameter. The specific value of the scaling parameter can be determined according to the research and development requirements, which is not limited here.

[0051] In a specific embodiment, the gray elimination processing on the gray vector image can be performed by using a SmoothStep function, which is a common difference function used for smooth interpolation between 0 and 1. The function definition is: smoothstep(minVal, maxVal, value); wherein minVal and maxVal define the two end ranges of interpolation, and value is the input value that needs to be interpolated. This function performs smooth interpolation on the input value value, so that it gradually changes in the range defined by minVal and maxVal, and generates an output value in the range [0, 1].

[0052] In a specific implementation, the process of performing grayscale removal processing on the grayscale vector image based on the scaling parameters corresponding to the current time frame to obtain a mask image containing the target shape corresponding to the current time frame may include: determining a first pixel in the grayscale vector image whose grayscale value is not less than the scaling parameters corresponding to the current time frame, and determining a second pixel in the grayscale vector image whose grayscale value is less than the scaling parameters corresponding to the current time frame; adjusting the grayscale value of the first pixel to the second grayscale value, and adjusting the grayscale value of the second pixel to the first grayscale value, thereby obtaining a mask image containing the target shape corresponding to the current time frame.

[0053] Specifically, the specific gray values ​​corresponding to the first gray value and the second gray value can be determined according to the research and development needs. For example, the first gray value can be 0 and the second gray value can be 1, so that a black and white mask image can be obtained. That is, gray removal is performed in order to obtain a black and white mask image of the target shape.

[0054] like Figure 3 The image shown is a mask diagram corresponding to different scaling parameters provided in this invention. Figure 3 The left and right images in the text are both... Figure 2 The grayscale vector image shown was obtained by removing grayscale values. However, the scaling parameters used for grayscale removal in the left and right images are different, resulting in different sizes of the triangles in the white areas of the resulting mask image.

[0055] In an optional embodiment, the above-mentioned performance parameters further include a grayscale bias, which is used to adjust the feathering degree of the edge of the target shape in the mask image. Based on this, before performing grayscale culling on the grayscale vector image based on the scaling parameters corresponding to the current time frame to obtain the mask image containing the target shape corresponding to the current time frame, it is also necessary to add the grayscale value corresponding to each pixel in the grayscale vector image to the grayscale bias to obtain the final grayscale value corresponding to each pixel in the grayscale vector image, so as to perform grayscale culling based on the final grayscale value.

[0056] In practice, the specific value corresponding to the grayscale offset can be determined according to user needs. Adjusting the value of the grayscale offset changes the softness or hardness of the target shape outline in the mask image, that is, changes the feathering degree of the target shape edge. Increasing the grayscale offset is mainly to avoid the problem of jagged edges caused by the target shape outline being too hard.

[0057] like Figure 4 The image shown is a feathered diagram of the target shape corresponding to different grayscale biases provided in an embodiment of the present invention. Figure 4 The grayscale bias used in the left and right images are different, resulting in different feathering degrees for the edges of the target shape in the resulting mask image.

[0058] In an optional embodiment, the performance parameter includes a scaling parameter and a partition parameter; wherein the partition parameter is mainly used to realize the effect that the size scaling of each partition has difference, and the difference of scaling is caused by the difference of the scaling parameter, and the calculation of the partition is to make the target shape of different regions have different scaling parameters, that is, to affect the corresponding scaling parameter of different regions through the partition parameter, which expands the function of the size change of the target shape. Based on this, the specific process of performing the gray elimination processing on the gray vector graph based on the scaling parameter corresponding to the current time frame to obtain the mask graph containing the target shape corresponding to the current time frame can be implemented through the following steps 10-12:

[0059] Step 10, based on the partition parameter corresponding to the current time frame, the gray vector graph is divided into multiple image regions, and the partition gray corresponding to each of the multiple image regions is determined.

[0060] In a specific implementation, the partition parameter is used to indicate the number of partitions, so that the gray vector graph can be divided into regions based on the number of partitions to divide the gray vector graph into multiple image regions, and then the partition gray corresponding to each column of image regions is calculated.

[0061] In an optional embodiment, the way of determining the partition gray corresponding to each of the multiple image regions includes: determining the number of regions (equivalent to the number of partitions described above) of the image regions in which the gray vector graph is divided; based on the number of regions and the texture coordinates corresponding to the gray vector graph, the partition gray corresponding to each of the multiple image regions is obtained. Specifically, the texture coordinates corresponding to each pixel point in the gray vector graph can be multiplied by the number of regions, and then the multiplication result is divided by the number of regions to obtain the partition gray corresponding to each pixel point.

[0062] In another optional embodiment, the performance parameter further includes a tilt coefficient, which is used to control the tilt degree of the image regions divided by the gray vector graph; thus, before obtaining the partition gray corresponding to each of the multiple image regions based on the number of regions and the texture coordinates corresponding to the gray vector graph, linear interpolation processing can be performed based on the tilt coefficient and the texture coordinates corresponding to the gray vector graph to obtain updated texture coordinates corresponding to the gray vector graph, so that the partition gray corresponding to each of the multiple image regions is obtained based on the updated texture coordinates and the number of regions. The specific value of the tilt parameter can be determined according to the research and development requirements.

[0063] In a specific embodiment, the linear interpolation processing described above can be implemented by a lerp function, which has a basic form of: lerp (y1, y2, weight) = y1 + (y2 - y1) * weight, wherein weight is a real number in the interval [0, 1], which is used to control the degree of interpolation. In actual application, the updated texture coordinates uv.x = abs (uv.x + lerp (tri_slope, 0, uv.y)) in the present disclosure, wherein tri_slope represents a slope coefficient, abs represents an absolute value operation, and uv.x and uv.y after the equal sign represent the X-axis texture coordinate value and the Y-axis texture coordinate value, respectively.

[0064] As shown in Figure 5 the schematic diagram of the partitioned gray scales corresponding to the plurality of image regions provided by the embodiment of the present application is shown, Figure 3 The plurality of image regions include a plurality of columns of image regions, and the image regions in different columns correspond to different partitioned gray scales, and the image regions in the same column correspond to the same partitioned gray scale.

[0065] In step 11, for the plurality of image regions, the partitioned gray scale corresponding to the current image region is added to the scaling parameter to obtain the scaling parameter corresponding to the current image region, and the current image region is subjected to gray scale rejection processing based on the scaling parameter corresponding to the current image region to obtain a mask image region corresponding to the current image region.

[0066] In the specific implementation, the obtained partitioned gray scale value corresponding to each image region is associated with the scaling parameter, and then the scaling calculation of the target shape is performed, so that the scaling parameter corresponding to each image region in the mask image is inconsistent, thereby achieving the effect that the sizes of the target shapes of the plurality of image regions are inconsistent.

[0067] In step 12, the mask image regions corresponding to the plurality of image regions are combined to obtain a mask image corresponding to the current time frame and containing the target shape.

[0068] As shown in Figure 6 the mask image corresponding to the mask image regions corresponding to the plurality of image regions provided by the embodiment of the present application is shown, Figure 6 The sizes of the triangles corresponding to the image regions in different columns in the mask image are different, that is, the triangles in the mask image gradually decrease from left to right.

[0069] In an optional embodiment, the above-mentioned gray-scale vector diagram contains two target shapes, based on which a target gray-scale diagram with the same shape as the gray-scale vector diagram can be obtained; the pixels of the target gray-scale diagram contain two gray-scale values, the first target shape in the target gray-scale diagram is of a first gray-scale value, and the second target shape is of a second gray-scale value; the gray-scale values of the target gray-scale diagram are mapped to a preset interval range to obtain mapped gray-scale values; the preset interval range includes an interval difference value, and the interval difference value is used to adjust the difference size of the target shapes in the same image region in the mask diagram; for each image region, the mapped gray-scale value corresponding to the current image region is multiplied by the partition gray-scale corresponding to the current image region to obtain an updated partition gray-scale corresponding to the current image region.

[0070] In a specific implementation, the gray-scale vector diagram can contain two target shapes diagonally placed, for example, Figure 2 The vector gray-scale diagram in FIG. 1 contains two triangles diagonally placed. Based on this, the above-mentioned target gray-scale diagram also contains two target shapes, and the placement positions of the two target shapes are the same as those of the gray-scale vector diagram, as shown in FIG. 2. Figure 7 FIG. 2 is a schematic diagram of a target gray-scale diagram provided by an embodiment of the present application, which corresponds to the vector gray-scale diagram in FIG. 1. Figure 2 The target gray-scale diagram contains two triangles, the triangle in the lower left corner is black, that is, the gray-scale value is 0, and the triangle in the upper right corner is white, that is, the gray-scale value is 1.

[0071] In actual application, the vector gray-scale diagram is stored in one color channel, and the target vector diagram can be stored in another color channel, then the black and white regions are mapped to different gray-scale values, and the partition gray-scale is established to obtain a difference image of the target shapes in the same image region, as shown in FIG. 3. Figure 8 FIG. 3 is a difference image of target shapes in the same image region provided by an embodiment of the present application, which contains two triangles, and the sizes of the two triangles are different.

[0072] In one specific embodiment, the target grayscale image can be sampled first to obtain its grayscale values. Then, the `remap` function is used to map the grayscale values ​​in the interval (0, 1) (i.e., the grayscale values ​​of the target grayscale image) to a preset interval range (0.5, 0.5 + column_scaleDisparity). This yields the mapped grayscale values ​​(grayscale value 0 is mapped to 0.5, and grayscale value 1 is mapped to 0.5 + column_scaleDisparity). This value is then multiplied by the previously obtained partition grayscale values ​​to obtain the updated partition grayscale values, which are subsequently used for target shape scaling calculations. Here, `column_scaleDisparity` is the interval difference value; adjusting the interval difference value can increase or decrease the difference in the target shape within the same image region during scaling. Figure 9 The image shown is a triangular differentiation mask provided by an embodiment of the present invention. In this mask, the triangles in each column of image regions are of different sizes, and the number of triangles corresponding to the image regions in different columns decreases from left to right, thereby achieving a gradual change in the triangles during interface switching.

[0073] Furthermore, changing the order of grayscale increments and decrements in each column of image regions can achieve different erasing effects, offering a high degree of flexibility. Specifically, when updating the texture coordinates of the grayscale vector graphic, the following method can be used: uv.x = abs (uv.x + uvOffset + lerp( tri_slope, 0, uv.y )); where uvOffset is the grayscale adjustment amount used to change the order of grayscale increments and decrements in the regions. Figure 10 The image shown is a mask diagram illustrating various erasing behaviors provided in embodiments of the present invention. Figure 10 The triangle size values ​​of the mask image corresponding to the left image gradually increase and then decrease. Figure 10 The triangle sizes in the mask image corresponding to the right image change from large to small and then back to large. These triangle sizes are all related to the grayscale of the partitions; how this relationship is established has been explained above. Specifically, Figure 10 The left image in Figure 9 The uvOffset value was changed based on the mask image shown. Figure 10 The right-hand image in the image is flipped. Figure 10 The scaling parameter on the left side of the image is 1 minus the scaling parameter.

[0074] In an optional embodiment, the performance parameter further includes a stroke parameter; based on this, after performing the gray scale elimination processing on the gray scale vector diagram based on the scaling parameter corresponding to the current time frame to obtain the mask diagram corresponding to the current time frame and containing the target shape, the edge of the target shape in the mask diagram corresponding to the current time frame can be further processed based on the stroke parameter to obtain the mask diagram after the edge of the target shape is processed by the stroke. The stroke parameter can be a specific value set by a user or a value obtained based on the input image.

[0075] In a specific implementation, the stroke parameter is used to indicate the stroke thickness, and specifically, the stroke mask diagram can be obtained by performing twice gray scale elimination processing on the vector gray scale diagram. The stroke is divided into outer stroke and inner stroke, as shown in the following figure. Figure 11 The following figure shows the schematic diagram of the mask diagram after the outer stroke and the mask diagram after the inner stroke provided by the embodiment of the application. Figure 11 The left image in the following figure is the mask diagram after the outer stroke of the target shape, and the right image is the mask diagram after the inner stroke of the target shape.

[0076] In another optional embodiment, the stroke parameter is determined by the following method: performing sampling processing on a preset noise diagram to obtain a sampled gray scale value; and determining the sampled gray scale value as the stroke parameter, which is used to control the thickness of the stroke. The preset noise diagram can be an arbitrary image input by a user. After sampling the preset noise diagram, each pixel will obtain a respective gray scale value, which corresponds to the thickness of the stroke (equivalent to the stroke parameter).

[0077] The following figure shows the schematic diagram of the mask diagram after the shape is processed by the stroke based on the preset noise diagram. Figure 12 The following figure shows the schematic diagram of the mask diagram after the shape is processed by the stroke based on the preset noise diagram. Figure 12 The edges of the target shape in the mask diagram in the following figure correspond to different stroke thicknesses, thereby increasing the stylization degree of the target shape.

[0078] The following embodiment is used to describe the way of interface switching based on a game engine.

[0079] Specifically, the material system based on the game engine is mainly applied to the interface interaction module of the game and supports switching between the UI interface and the game scene and the video interface. The application needs to write different colorizers according to different situations, for example, the switching between the scene layer and the video layer is realized by calling the post-processing material, and the switching involving the UI layer is realized by calling the UI material. The scene layer refers to the image layer corresponding to the game scene where the three-dimensional model is placed; the UI layer is the outermost layer, which is usually an image layer stacked on the scene layer; the video layer can be understood as a special UI layer, which is used to play videos or pictures.

[0080] Among them, the post-processing material is a kind of material applied in the last stage of the rendering process, mainly used to enhance the visual effect and improve the picture quality; It is equivalent to a kind of filter, which can further adjust and process the scene after the object rendering is completed. UI material refers to the material used for user interface (UI) design, which allows developers to define visual effects and interactive behaviors for UI elements such as buttons, icons, etc. The use of UI material can enhance the visual effect and user experience of the user interface, making it more rich and interactive.

[0081] In practical application, the above gray vector diagram can be calculated in the material, or quickly generated in DCC software such as SubstanceDesigner.

[0082] In a specific application, the screen can be divided into a certain number of triangular blocks (equivalent to the above target shape) according to the mask diagram corresponding to each time frame, and the switching between interfaces can be completed by scaling and other processing of the triangular blocks. For example, the triangular blocks gradually increase from left to right to make the scene layer interface appear, completing the video layer to scene layer switching; the triangular blocks gradually decrease from left to right to make the scene layer interface disappear, completing the scene layer to video layer switching.

[0083] Based on the above description, the present application can use triangular gray vector diagram to calculate triangular scaling mask to distinguish two interfaces, and based on this, the function module is expanded and the effect is improved. At the same time, according to the screen resolution adaptation rule of UI interface and video interface, the image is scaled in the material. If there is a video interface in the switching interface, the video texture needs to be scaled in the material according to the video resolution adaptation rule. The performance of the triangular block in the scene material needs to be scaled according to the UI resolution adaptation rule.

[0084] The following examples are used to describe the way of screen resolution video.

[0085] Specifically, if screen resolution video is not performed, there will be a picture jump when the interface is switched, which means that the picture content is stretched or compressed, and there is a difference between the effect of the picture during the interface switching and the effect of the picture after the interface switching, so there is a picture jump at the moment of just switching.

[0086] In order to solve the above problem, in response to the interface switching instruction, based on the canvas size where the mask diagram is located and the screen resolution corresponding to the second interface, the interface elements corresponding to the second interface are adapted, and the adapted second interface is obtained, so that the image area corresponding to the second color in the mask diagram displays the interface elements corresponding to the adapted second interface. Different screen resolutions correspond to different adaptation rules.

[0087] For example, when switching between the scene layer and the video layer, the video resolution adaptation rule needs to be used, which is: the canvas size is based on 21.5:9; when the screen ratio (equivalent to the above screen resolution) is between 16:10 and 16:9, the video image is enlarged in proportion to the height of the adapted screen, and the left and right areas outside the screen are cropped; when the screen ratio is between 16:9 and 21.5:9, the left and right areas outside the screen are cropped; when the screen ratio is higher than 21.5:9 or lower than 16:10, the area outside the screen is black.

[0088] The specific algorithm is as follows:

[0089] viewportUV -= float2(0.5, 0.5); / / Move the origin of the screen UV (viewportUV) from the top left corner to the center of the screen, in order to ensure that the UV scaling in the following steps is center scaling;

[0090] viewportUV *= float2 (visibleRes.x / visibleRes.y, 1); / / Get the resolution of the current screen (visibleRes), keep the ratio of XY components unchanged, scale the screen U according to the ratio, and do not scale V, that is, keep the image completely filling the screen height;

[0091] viewportUV *= float2 (9.0 / 21.5, 1); / / Scale the screen UV according to the ratio of 21.5 / 9:1;

[0092] viewportUV += float2(0.5, 0.5); / / Move the origin of the screen UV (viewportUV) from the center to the top left corner; use the calculated screen UV to sample the map.

[0093] When switching between the scene layer and the UI layer, the UI resolution adaptation rule needs to be used, which is: the canvas size is based on 21.5:10; when the screen ratio is between 16:10 and 16:9, the upper and lower display areas are increased, and the upper and lower areas outside the screen are cropped; when the screen ratio is between 16:9 and 21.5:9, the left and right areas outside the screen are cropped; when the screen ratio is higher than 21.5:9 or lower than 16:10, the area outside the canvas is black. The specific algorithm is as follows:

[0094] When the screen ratio is between 16:9 and 21.5:9:

[0095] float2 viewportUV_01 = viewportUV - float2(0.5, 0.5); / / Move the origin of the screen UV (viewportUV) from the top left corner to the center of the screen to ensure that the UV scaling in the following steps is center scaling;

[0096] viewportUV_01 *= float2 (visibleRes.x / visibleRes.y, 1); / / Get the current screen resolution (visibleRes), keep the ratio of XY components unchanged, normalize the Y component, scale the screen U proportionally, and do not scale V, that is, keep the image height that completely fills the screen.

[0097] viewportUV_01 *= float2(9.0 / 10.0, 9.0 / 10.0) * float2 (10.0 / 21.5, 1); / / Scale the screen UVs according to a ratio of 21.5 / 10:1, and then scale the whole screen by 9 / 10 units (this scaling is equivalent to cropping).

[0098] viewportUV_01 += float2(0.5, 0.5); / / Move the origin of the screen UV (viewportUV) from the center to the top left corner.

[0099] When the screen ratio is between 16:10 and 16:9:

[0100] float2 viewportUV_02 = viewportUV - float2(0.5, 0.5); / / Move the origin of the screen UV (viewportUV) from the top left corner to the center of the screen to ensure that the UV scaling in the following steps is center scaling;

[0101] viewportUV_02 *= float2 (1, visibleRes.y / visibleRes.x); / / Get the current screen resolution (visibleRes), keep the ratio of Y and X components unchanged, normalize the X component, scale the screen V proportionally, and do not scale U, that is, keep the image completely filling the width of the screen.

[0102] viewportUV_02 *= float2(16.0 / 21.5, 16.0 / 21.5) * float2 (1, 21.5 / 10.0); / / Scale the screen UVs by a ratio of 1:21.5 / 10, then scale the entire screen by 16 / 21.5 units;

[0103] viewportUV_02 += float2(0.5, 0.5); / / Move the origin of the screen UV (viewportUV) from the center to the top left corner;

[0104] if((visibleRes.x / visibleRes.y)>= (16.0 / 9.0))

[0105] {

[0106] return viewportUV_01;

[0107] }

[0108] else

[0109] {

[0110] return viewportUV_02;

[0111] }

[0112] like Figure 13 The image shown is a schematic diagram of an image effect obtained using a calculated screen UV sampling map according to an embodiment of the present invention. Figure 13 The first image in the image is the screen corresponding to the texture at the canvas size. Figure 13 The second image in the image is the cropped version of the screen when the aspect ratio is 16:9. Figure 13 The third image in the image is the screen image when the aspect ratio is 16:10.

[0113] The above method adapts the screen to different screen ratios, thereby avoiding screen jumps when switching interfaces.

[0114] Corresponding to the above method embodiments, this invention also provides an interface switching device, such as... Figure 14 As shown, the device includes:

[0115] The parameter acquisition module 90 is used to acquire the performance parameters corresponding to the grayscale vector image and the preset number of time frames.

[0116] The mask generation module 91 is used to generate mask images corresponding to a preset number of time frames based on grayscale vector graphics and representation parameters; wherein the mask image includes a first color and a second color.

[0117] The interface switching module 92 is configured to, in response to the interface switching instruction, determine a first interface currently displayed in the graphical user interface and a second interface to be switched, and sequentially cover a preset number of time frames of the mask image in the graphical user interface in chronological order, so that the first interface corresponds to the interface elements displayed in the image area of the first color in the mask image displayed in the graphical user interface, and the second interface corresponds to the interface elements displayed in the image area of the second color.

[0118] The switching completion module 93 is configured to, in response to the display of the mask image corresponding to the preset number of time frames being completed, control the second interface to be displayed in the graphical user interface.

[0119] In the interface switching device, the user can set different performance effects of the mask image through different performance parameters, so that the switching between interfaces through the mask image is more novel and vivid.

[0120] Specifically, the grayscale vector image contains a target shape; an edge of the target shape in the grayscale vector image is a first grayscale value, a center point of the target shape is a second grayscale value, and a grayscale value between the center point of the target shape and the edge linearly transitions from the second grayscale value to the first grayscale value.

[0121] Further, the image area of the second color in the mask image is the target shape.

[0122] Further, the performance parameters include at least one of a scaling parameter, a partition parameter, and a stroke parameter for the target shape.

[0123] Further, the performance parameters include the scaling parameter; based on this, the mask generation module 91 is configured to, for each time frame in the preset number of time frames, perform the following operations: based on the scaling parameter corresponding to the current time frame, performing grayscale removal processing on the grayscale vector image to obtain the mask image containing the target shape corresponding to the current time frame; and the size of the target shape in the mask image matches the scaling parameter.

[0124] Further, the mask generation module 91 is further configured to: determine a first pixel in the grayscale vector image whose grayscale value is not less than the scaling parameter corresponding to the current time frame, and determine a second pixel in the grayscale vector image whose grayscale value is less than the scaling parameter corresponding to the current time frame; adjust the grayscale value of the first pixel to the second grayscale value, and adjust the grayscale value of the second pixel to the first grayscale value to obtain the mask image containing the target shape corresponding to the current time frame.

[0125] Further, the performance parameter further comprises a gray offset, the gray offset being used to adjust a feathering degree of an edge of the target shape in the mask image; based on this, the device further comprises a feathering module, configured to: before performing the gray cut processing on the gray vector image based on the scaling parameter corresponding to the current time frame to obtain the mask image containing the target shape corresponding to the current time frame, add the gray value corresponding to each pixel in the gray vector image to the gray offset to obtain a final gray value corresponding to each pixel in the gray vector image, so as to perform the gray cut processing based on the final gray value.

[0126] Further, the performance parameter further comprises a partition parameter; based on this, the mask generation module 91 is further configured to: divide the gray vector image into a plurality of image regions based on the partition parameter corresponding to the current time frame, and determine a partition gray corresponding to each of the plurality of image regions; for each of the plurality of image regions, add the partition gray corresponding to the current image region to the scaling parameter to obtain the scaling parameter corresponding to the current image region, perform the gray cut processing on the current image region based on the scaling parameter corresponding to the current image region to obtain a mask image region corresponding to the current image region; and combine the mask image regions corresponding to the plurality of image regions to obtain the mask image containing the target shape corresponding to the current time frame.

[0127] Further, the mask generation module 91 is further configured to: determine a region number of the image regions into which the gray vector image is divided; and based on the region number and the texture coordinates corresponding to the gray vector image, obtain the partition grays corresponding to the plurality of image regions respectively.

[0128] Further, the performance parameter further comprises a tilt coefficient, the tilt coefficient being used to control a tilt degree of the image regions into which the gray vector image is divided; based on this, the device further comprises a coordinate adjustment module, configured to: before obtaining the partition grays corresponding to the plurality of image regions based on the region number and the texture coordinates corresponding to the gray vector image, perform linear interpolation processing on the texture coordinates corresponding to the gray vector image based on the tilt coefficient to obtain updated texture coordinates corresponding to the gray vector image.

[0129] Further, the two target shapes are included in the aforementioned grayscale vector diagram; based on this, the device further includes a shape adjusting module configured to: obtain a target grayscale image with the same shape as the grayscale vector diagram; wherein the pixels of the target grayscale image include two grayscale values, a first target shape in the target grayscale image is of a first grayscale value, and a second target shape is of a second grayscale value; map the grayscale values of the target grayscale image to a preset interval range to obtain mapped grayscale values; wherein the preset interval range includes an interval difference value, and the interval difference value is used to adjust the difference size of the target shapes in the same image region in the mask image; and for each image region, multiply the mapped grayscale value corresponding to the current image region and the partition grayscale corresponding to the current image region to obtain an updated partition grayscale corresponding to the current image region.

[0130] Further, the performance parameters further include a stroke parameter; based on this, the device further includes a stroke module configured to: after performing grayscale removal processing on the grayscale vector diagram based on the scaling parameter corresponding to the current time frame to obtain the mask image including the target shape corresponding to the current time frame, perform stroke processing on the edges of the target shape in the mask image corresponding to the current time frame based on the stroke parameter to obtain a mask image after the edges of the target shape are stroked.

[0131] Further, the stroke parameter is determined by: performing sampling processing on a preset noise image to obtain a sampled grayscale value; and determining the sampled grayscale value as the stroke parameter, which is used to control the thickness of the stroke.

[0132] Further, the device further includes an adaptation module configured to: in response to an interface switching instruction, perform adaptation processing on the interface elements corresponding to the second interface based on the canvas size where the mask image is located and the screen resolution corresponding to the second interface to obtain an adapted second interface, so that the image region corresponding to the second color in the mask image displays the interface elements corresponding to the adapted second interface.

[0133] Further, different screen resolutions are respectively configured with corresponding adaptation rules.

[0134] The interface switching device provided in the embodiments of the present disclosure has the same implementation principle, technical effects and the aforementioned method embodiments. For brevity, the part of the device embodiment not mentioned can be referred to the corresponding content in the aforementioned method embodiments.

[0135] The embodiments of the present disclosure further provide an electronic device, as shown in the accompanying drawings, which includes a processor and a memory, the memory stores machine executable instructions executable by the processor, and the processor executes the machine executable instructions to implement the aforementioned interface switching method. Figure 15

[0136] ​Specifically, the interface switching method comprises: obtaining performance parameters corresponding to a grayscale vector graph and time frames of a preset frame number; generating mask graphs corresponding to the time frames of the preset frame number respectively based on the grayscale vector graph and the performance parameters; wherein the mask graphs comprise a first color and a second color; in response to an interface switching instruction, determining a first interface currently displayed in a graphical user interface and a second interface to be switched, and sequentially covering the mask graphs corresponding to the time frames of the preset frame number in the graphical user interface in time sequence, so as to display, through an image area corresponding to the first color in the mask graph displayed by the graphical user interface, interface elements corresponding to the first interface, and display, through an image area corresponding to the second color, interface elements corresponding to the second interface; wherein an image area corresponding to the second color in a mask graph corresponding to a current time frame is smaller than an image area corresponding to the second color in a mask graph corresponding to a next time frame of the current time frame; in response to completion of display of the mask graphs corresponding to the time frames of the preset frame number, controlling display of the second interface in the graphical user interface.

[0137] In the interface switching method, a user can set different performance effects of the mask graphs through different performance parameters, so that the switching between interfaces through the mask graphs is more novel and vivid.

[0138] In an optional embodiment, the grayscale vector graph comprises a target shape; wherein an edge of the target shape in the grayscale vector graph is a first grayscale value, a center point of the target shape is a second grayscale value, and a grayscale value between the center point of the target shape and the edge linearly transitions from the second grayscale value to the first grayscale value.

[0139] In an optional embodiment, the image area corresponding to the second color in the mask graph is the target shape.

[0140] In an optional embodiment, the performance parameters comprise at least one of the following: a scaling parameter, a partition parameter, and an outline parameter for the target shape.

[0141] In an optional embodiment, the performance parameters comprise a scaling parameter; and the step of generating the mask graphs corresponding to the time frames of the preset frame number based on the grayscale vector graph and the performance parameters comprises: for each time frame in the time frames of the preset frame number, performing the following operation: performing grayscale rejection processing on the grayscale vector graph based on the scaling parameter corresponding to the current time frame, to obtain a mask graph corresponding to the current time frame and comprising the target shape; wherein the size of the target shape in the mask graph matches the scaling parameter.

[0142] In an optional embodiment, the step of performing the gray elimination processing on the gray vector graph based on the scaling parameter corresponding to the current time frame to obtain the mask graph corresponding to the current time frame and containing the target shape includes: determining first pixels in the gray vector graph whose gray values are not less than the scaling parameter corresponding to the current time frame, and determining second pixels in the gray vector graph whose gray values are less than the scaling parameter corresponding to the current time frame; adjusting the gray values of the first pixels to a second gray value, and adjusting the gray values of the second pixels to a first gray value to obtain the mask graph corresponding to the current time frame and containing the target shape.

[0143] In an optional embodiment, the performance parameter further includes a gray offset amount, the gray offset amount being used to adjust a feathering degree of an edge of the target shape in the mask graph; and before the step of performing the gray elimination processing on the gray vector graph based on the scaling parameter corresponding to the current time frame to obtain the mask graph corresponding to the current time frame and containing the target shape, the method further includes: adding the gray value corresponding to each pixel in the gray vector graph to the gray offset amount to obtain a final gray value corresponding to each pixel in the gray vector graph, so as to perform the gray elimination processing based on the final gray value.

[0144] In an optional embodiment, the performance parameter further includes a partition parameter; and the step of performing the gray elimination processing on the gray vector graph based on the scaling parameter corresponding to the current time frame to obtain the mask graph corresponding to the current time frame and containing the target shape includes: dividing the gray vector graph into a plurality of image regions based on the partition parameter corresponding to the current time frame, and determining a partition gray corresponding to each of the plurality of image regions; for each of the plurality of image regions, adding the partition gray corresponding to the current image region to the scaling parameter to obtain a scaling parameter corresponding to the current image region, performing the gray elimination processing on the current image region based on the scaling parameter corresponding to the current image region to obtain a mask image region corresponding to the current image region; and combining the mask image regions corresponding to the plurality of image regions to obtain the mask graph corresponding to the current time frame and containing the target shape.

[0145] In an optional embodiment, the step of determining the partition gray corresponding to each of the plurality of image regions includes: determining a region number of the image regions in which the gray vector graph is divided; and obtaining the partition gray corresponding to each of the plurality of image regions based on the region number and a texture coordinate corresponding to the gray vector graph.

[0146] In an optional embodiment, the performance parameter further includes a tilt coefficient; the tilt coefficient is used to control a tilt degree of the image regions in which the gray vector graph is divided; and before the step of obtaining the partition gray corresponding to each of the plurality of image regions based on the region number and the texture coordinate corresponding to the gray vector graph, the method further includes: performing a linear interpolation processing based on the tilt coefficient and the texture coordinate corresponding to the gray vector graph to obtain an updated texture coordinate corresponding to the gray vector graph.

[0147] In an optional embodiment, the grayscale vector diagram contains two target shapes; the method further includes: obtaining a target grayscale diagram with the same shape as the grayscale vector diagram; wherein the pixels of the target grayscale diagram contain two grayscale values, the first target shape in the target grayscale diagram is of a first grayscale value, and the second target shape is of a second grayscale value; mapping the grayscale values of the target grayscale diagram to a preset interval range to obtain mapped grayscale values; wherein the preset interval range includes an interval difference value, and the interval difference value is used to adjust the difference size of the target shapes in the same image region in the mask diagram; for each image region, multiplying the mapped grayscale value corresponding to the current image region by the partition grayscale corresponding to the current image region to obtain the updated partition grayscale corresponding to the current image region.

[0148] In an optional embodiment, the performance parameter further includes a stroke parameter; after the step of performing grayscale removal processing on the grayscale vector diagram based on the scaling parameter corresponding to the current time frame to obtain the mask diagram containing the target shape corresponding to the current time frame, the method further includes: performing stroke processing on the edges of the target shape in the mask diagram corresponding to the current time frame based on the stroke parameter to obtain the mask diagram after the edges of the target shape are stroked.

[0149] In an optional embodiment, the stroke parameter is determined by: performing sampling processing on the preset noise diagram to obtain a sampled grayscale value; determining the sampled grayscale value as the stroke parameter, and the stroke parameter is used to control the thickness of the stroke.

[0150] In an optional embodiment, the method further includes: in response to an interface switching instruction, performing adaptive processing on the interface elements corresponding to the second interface based on the canvas size where the mask diagram is located and the screen resolution corresponding to the second interface to obtain an adapted second interface, so that the image region corresponding to the second color in the mask diagram displays the interface elements corresponding to the adapted second interface.

[0151] In an optional embodiment, different screen resolutions are respectively configured with corresponding adaptive rules.

[0152] Further, Figure 15 The electronic device shown further includes a bus 102 and a communication interface 103, and the processor 101, the communication interface 103, and the memory 100 are connected through the bus 102.

[0153] The memory 100 can include a high-speed random access memory (RAM), and can also include a non-volatile memory, such as at least one disk memory. The communication connection between the system network element and at least one other network element is realized through at least one communication interface 103 (which can be wired or wireless), and the Internet, a wide area network, a local network, a metropolitan area network, etc. can be used. The bus 102 can be an ISA bus, a PCI bus, or an EISA bus, etc. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 15 Only one bidirectional arrow is used to represent the system network element and at least one other network element, but it does not mean that there is only one bus or one type of bus.

[0154] The processor 101 can be an integrated circuit chip with signal processing capability. In the implementation process, each step of the above method can be completed by the integrated logic circuit of hardware in the processor 101 or the instructions in the form of software. The processor 101 described above can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic device, a discrete gate or transistor logic device, a discrete hardware component. Each method, step and logic block disclosed in the embodiment of the present disclosure can be implemented or executed. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor. The steps of the method disclosed in combination with the embodiment of the present disclosure can be directly embodied as a hardware code processor for execution, or a combination of hardware and software modules in the code processor for execution. The software module can be located in a random access memory, a flash memory, a read-only memory, a programmable read-only memory, an electrically erasable programmable memory, a register, etc. The storage medium in the art. The storage medium is located in the memory 100, and the processor 101 reads the information in the memory 100, and combines the hardware to complete the steps of the method of the above embodiment.

[0155] The embodiment of the present disclosure further provides a computer readable storage medium, which stores computer executable instructions. When the computer executable instructions are called and executed by a processor, the computer executable instructions cause the processor to implement the interface switching method. For details, refer to the method embodiment, which will not be repeated here.

[0156] Specifically, the interface switching method comprises: obtaining performance parameters corresponding to a grayscale vector graph and time frames of a preset frame number; generating mask graphs corresponding to the time frames of the preset frame number respectively based on the grayscale vector graph and the performance parameters; wherein the mask graphs comprise a first color and a second color; in response to an interface switching instruction, determining a first interface currently displayed in a graphical user interface and a second interface to be switched, and sequentially covering the mask graphs corresponding to the time frames of the preset frame number in the graphical user interface in time sequence, so as to display, through an image area corresponding to the first color in the mask graph displayed by the graphical user interface, interface elements corresponding to the first interface, and display, through an image area corresponding to the second color, interface elements corresponding to the second interface; wherein an image area corresponding to the second color in a mask graph corresponding to a current time frame is smaller than an image area corresponding to the second color in a mask graph corresponding to a next time frame of the current time frame; in response to completion of display of the mask graphs corresponding to the time frames of the preset frame number, controlling the second interface to be displayed in the graphical user interface.

[0157] In the interface switching method, a user can set different performance effects of the mask graphs through different performance parameters, so that the switching between interfaces through the mask graphs is more novel and vivid.

[0158] In an optional embodiment, the grayscale vector graph comprises a target shape; wherein an edge of the target shape in the grayscale vector graph is a first grayscale value, a center point of the target shape is a second grayscale value, and a grayscale value between the center point and the edge of the target shape linearly transitions from the second grayscale value to the first grayscale value.

[0159] In an optional embodiment, the image area corresponding to the second color in the mask graph is the target shape.

[0160] In an optional embodiment, the performance parameters comprise at least one of the following: a scaling parameter, a partition parameter, and an outline parameter for the target shape.

[0161] In an optional embodiment, the performance parameters comprise a scaling parameter; and the step of generating the mask graphs corresponding to the time frames of the preset frame number based on the grayscale vector graph and the performance parameters comprises: for each time frame in the time frames of the preset frame number, performing the following operation: performing grayscale rejection processing on the grayscale vector graph based on the scaling parameter corresponding to the current time frame, to obtain a mask graph corresponding to the current time frame and comprising the target shape; wherein the size of the target shape in the mask graph matches the scaling parameter.

[0162] In an optional embodiment, the step of performing the gray elimination processing on the gray vector graph based on the scaling parameter corresponding to the current time frame to obtain the mask graph corresponding to the current time frame and containing the target shape includes: determining first pixels in the gray vector graph whose gray values are not less than the scaling parameter corresponding to the current time frame, and determining second pixels in the gray vector graph whose gray values are less than the scaling parameter corresponding to the current time frame; adjusting the gray values of the first pixels to a second gray value, and adjusting the gray values of the second pixels to a first gray value to obtain the mask graph corresponding to the current time frame and containing the target shape.

[0163] In an optional embodiment, the performance parameter further includes a gray offset amount, the gray offset amount being used to adjust a feathering degree of an edge of the target shape in the mask graph; and before the step of performing the gray elimination processing on the gray vector graph based on the scaling parameter corresponding to the current time frame to obtain the mask graph corresponding to the current time frame and containing the target shape, the method further includes: adding the gray value corresponding to each pixel in the gray vector graph to the gray offset amount to obtain a final gray value corresponding to each pixel in the gray vector graph, so as to perform the gray elimination processing based on the final gray value.

[0164] In an optional embodiment, the performance parameter further includes a partition parameter; and the step of performing the gray elimination processing on the gray vector graph based on the scaling parameter corresponding to the current time frame to obtain the mask graph corresponding to the current time frame and containing the target shape includes: dividing the gray vector graph into a plurality of image regions based on the partition parameter corresponding to the current time frame, and determining a partition gray corresponding to each of the plurality of image regions; for each of the plurality of image regions, adding the partition gray corresponding to the current image region to the scaling parameter to obtain a scaling parameter corresponding to the current image region, performing the gray elimination processing on the current image region based on the scaling parameter corresponding to the current image region to obtain a mask image region corresponding to the current image region; and combining the mask image regions corresponding to the plurality of image regions to obtain the mask graph corresponding to the current time frame and containing the target shape.

[0165] In an optional embodiment, the step of determining the partition gray corresponding to each of the plurality of image regions includes: determining a region number of the image regions in which the gray vector graph is divided; and obtaining the partition gray corresponding to each of the plurality of image regions based on the region number and a texture coordinate corresponding to the gray vector graph.

[0166] In an optional embodiment, the performance parameter further includes a tilt coefficient; the tilt coefficient is used to control a tilt degree of the image regions in which the gray vector graph is divided; and before the step of obtaining the partition gray corresponding to each of the plurality of image regions based on the region number and the texture coordinate corresponding to the gray vector graph, the method further includes: performing a linear interpolation processing based on the tilt coefficient and the texture coordinate corresponding to the gray vector graph to obtain updated texture coordinates corresponding to the gray vector graph.

[0167] In an optional embodiment, the grayscale vector diagram contains two target shapes; the method further includes: obtaining a target grayscale diagram with the same shape as the grayscale vector diagram; wherein the pixels of the target grayscale diagram contain two grayscale values, the first target shape in the target grayscale diagram is of a first grayscale value, and the second target shape is of a second grayscale value; mapping the grayscale values of the target grayscale diagram to a preset interval range to obtain mapped grayscale values; wherein the preset interval range includes an interval difference value, and the interval difference value is used to adjust the difference size of the target shapes in the same image region in the mask diagram; for each image region, multiplying the mapped grayscale value corresponding to the current image region by the partition grayscale corresponding to the current image region to obtain the updated partition grayscale corresponding to the current image region.

[0168] In an optional embodiment, the performance parameter further includes a stroke parameter; after the step of performing grayscale removal processing on the grayscale vector diagram based on the scaling parameter corresponding to the current time frame to obtain the mask diagram containing the target shape corresponding to the current time frame, the method further includes: performing stroke processing on the edges of the target shape in the mask diagram corresponding to the current time frame based on the stroke parameter to obtain the mask diagram after the edges of the target shape are stroked.

[0169] In an optional embodiment, the stroke parameter is determined by: performing sampling processing on a preset noise diagram to obtain a sampled grayscale value; determining the sampled grayscale value as the stroke parameter, and the stroke parameter is used to control the thickness of the stroke.

[0170] In an optional embodiment, the method further includes: in response to an interface switching instruction, performing adaptive processing on the interface elements corresponding to the second interface based on the canvas size where the mask diagram is located and the screen resolution corresponding to the second interface to obtain an adapted second interface, so that the image region corresponding to the second color in the mask diagram displays the interface elements corresponding to the adapted second interface.

[0171] In an optional embodiment, different screen resolutions are respectively configured with corresponding adaptive rules.

[0172] If the functions are implemented in the form of software function units and sold or used as independent products, they can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present disclosure can be embodied in the form of a software product, which is stored in a storage medium and includes a number of instructions for causing a computer device (which can be a personal computer, a terminal device, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present disclosure. The aforementioned storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk or an optical disk, and various program code storage media.

[0173] In the description of the present disclosure, it should be noted that the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer" and the like indicate the orientation or positional relationship shown in the drawings, and are only for the purpose of facilitating the description of the present disclosure and simplifying the description, and do not indicate or imply that the device or element referred to must have a particular orientation, be constructed and operated in a particular orientation, and therefore cannot be understood as a limitation on the present disclosure. In addition, the terms "first", "second", "third" are only for the purpose of description, and cannot be understood as indicating or implying relative importance.

[0174] Finally, it should be noted that: the above-described embodiments are only specific embodiments of the present disclosure, used to illustrate the technical solutions of the present disclosure, and not to limit them, the protection scope of the present disclosure is not limited thereto, although the present disclosure has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand: any skilled person familiar with the technical field of the present disclosure within the technical range disclosed by the present disclosure, they can still modify or easily think of changes to the technical solutions recorded in the foregoing embodiments, or make equivalent replacements to part of the technical features; and these modifications, changes or replacements do not make the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present disclosure, and should be covered within the protection scope of the present disclosure. Therefore, the protection scope of the present disclosure should be subject to the protection scope of the claims.

Claims

1. A method for switching interfaces, characterized in that, The method includes: Obtain the performance parameters corresponding to the grayscale vector image and the preset number of time frames; Based on the grayscale vector image and the representation parameters, mask images corresponding to the preset number of time frames are generated; wherein, the mask image includes a first color and a second color; In response to an interface switching command, the system determines the currently displayed first interface and the second interface to be switched in the graphical user interface (GUI). Then, according to chronological order, it sequentially overlays the GUI with mask images corresponding to the preset number of time frames. This allows the first interface's interface elements to be displayed through the image area corresponding to the first color in the mask image displayed by the GUI, and the second interface's interface elements to be displayed through the image area corresponding to the second color. The image area corresponding to the second color in the mask image of the current time frame is smaller than the image area corresponding to the second color in the mask image of the next time frame. Once the mask images corresponding to the preset number of time frames have all been displayed, the second interface is displayed in the graphical user interface.

2. The method according to claim 1, characterized in that, The grayscale vector image contains a target shape; wherein, the edge of the target shape in the grayscale vector image is a first grayscale value, the center point of the target shape is a second grayscale value, and the grayscale value between the center point of the target shape and the edge linearly transitions from the second grayscale value to the first grayscale value.

3. The method according to claim 2, characterized in that, The image region corresponding to the second color in the mask image is the target shape.

4. The method according to claim 2, characterized in that, The performance parameters include at least one of the following: scaling parameters, partitioning parameters, and stroke parameters for the target shape.

5. The method according to claim 4, characterized in that, The performance parameters include the scaling parameters; The step of generating mask images corresponding to the preset number of time frames based on the grayscale vector image and the representation parameters includes: For each time frame in the preset number of time frames, perform the following operations: Based on the scaling parameters corresponding to the current time frame, grayscale removal processing is performed on the grayscale vector image to obtain a mask image containing the target shape corresponding to the current time frame; wherein, the size of the target shape in the mask image matches the scaling parameters.

6. The method according to claim 5, characterized in that, The step of performing grayscale removal processing on the grayscale vector image based on the scaling parameters corresponding to the current time frame to obtain a mask image containing the target shape corresponding to the current time frame includes: A first pixel in the grayscale vector image whose grayscale value is not less than the scaling parameter corresponding to the current time frame is determined, and a second pixel in the grayscale vector image whose grayscale value is less than the scaling parameter corresponding to the current time frame is determined. The grayscale value of the first pixel is adjusted to the second grayscale value, and the grayscale value of the second pixel is adjusted to the first grayscale value to obtain a mask image containing the target shape corresponding to the current time frame.

7. The method according to claim 5, characterized in that, The performance parameters also include grayscale bias, which is used to adjust the feathering degree of the edge of the target shape in the mask image; Before the step of performing grayscale removal processing on the grayscale vector image based on the scaling parameters corresponding to the current time frame to obtain a mask image containing the target shape corresponding to the current time frame, the method further includes: The gray value corresponding to each pixel in the grayscale vector image is added to the grayscale bias to obtain the final gray value corresponding to each pixel in the grayscale vector image, and grayscale removal processing is performed based on the final gray value.

8. The method according to claim 5, characterized in that, The performance parameters also include the partition parameters; The step of performing grayscale removal processing on the grayscale vector image based on the scaling parameters corresponding to the current time frame to obtain a mask image containing the target shape corresponding to the current time frame includes: Based on the partition parameters corresponding to the current time frame, the grayscale vector map is divided into multiple image regions, and the partition grayscale corresponding to each of the multiple image regions is determined. For the multiple image regions, the grayscale value of the partition corresponding to the current image region is added to the scaling parameter to obtain the scaling parameter corresponding to the current image region. Based on the scaling parameter corresponding to the current image region, grayscale removal processing is performed on the current image region to obtain the masking image region corresponding to the current image region. By combining the mask image regions corresponding to the multiple image regions, a mask image containing the target shape corresponding to the current time frame is obtained.

9. The method according to claim 8, characterized in that, The step of determining the partition grayscale corresponding to the plurality of image regions includes: Determine the number of regions in the image area to which the grayscale vector graphic is divided; Based on the number of regions and the texture coordinates corresponding to the grayscale vector image, the partitioned grayscale values ​​corresponding to multiple image regions are obtained respectively.

10. The method according to claim 9, characterized in that, The performance parameters also include a tilt coefficient; the tilt coefficient is used to control the degree of tilt of the image regions divided by the grayscale vector graphic. Before the step of obtaining the partitioned gray levels corresponding to multiple image regions based on the number of regions and the texture coordinates corresponding to the grayscale vector image, the method further includes: Linear interpolation is performed based on the tilt coefficient and the texture coordinates corresponding to the grayscale vector image to obtain the updated texture coordinates corresponding to the grayscale vector image.

11. The method according to claim 8, characterized in that, The grayscale vector graphic contains two target shapes; the method further includes: Obtain a target grayscale image with the same shape as the grayscale vector image; wherein, the pixels of the target grayscale image contain two grayscale values, the first target shape in the target grayscale image is the first grayscale value, and the second target shape is the second grayscale value; The grayscale values ​​of the target grayscale image are mapped to a preset range to obtain the mapped grayscale values; wherein, the preset range includes an interval difference value, which is used to adjust the difference in the target shape in the same image region of the mask image; For each image region, the mapped grayscale value corresponding to the current image region is multiplied by the partition grayscale value corresponding to the current image region to obtain the updated partition grayscale value corresponding to the current image region.

12. The method according to claim 5, characterized in that, The performance parameters also include outline parameters; After the step of performing grayscale removal processing on the grayscale vector image based on the scaling parameters corresponding to the current time frame to obtain a mask image containing the target shape corresponding to the current time frame, the method further includes: Based on the stroke parameters, the edges of the target shape in the mask image corresponding to the current time frame are stroked to obtain the mask image after the edges of the target shape are stroked.

13. The method according to claim 12, characterized in that, The stroke parameters are determined in the following manner: The preset noise map is sampled to obtain the sampled grayscale value; The sampled grayscale value is determined as the stroke parameter, which is used to control the thickness of the stroke.

14. The method according to claim 1, characterized in that, The method further includes: In response to the interface switching command, based on the canvas size of the mask image and the screen resolution corresponding to the second interface, the interface elements corresponding to the second interface are adapted to obtain the adapted second interface, so that the image area corresponding to the second color in the mask image displays the interface elements corresponding to the adapted second interface.

15. The method according to claim 14, characterized in that, Different screen resolutions require different adaptation rules.

16. An interface switching device, characterized in that, The device includes: The parameter acquisition module is used to acquire the performance parameters corresponding to the grayscale vector image and the preset number of time frames. A mask generation module is used to generate mask images corresponding to the preset number of time frames based on the grayscale vector image and the representation parameters; wherein, the mask image includes a first color and a second color; The interface switching module is used to respond to an interface switching command, determine the currently displayed first interface and the second interface to be switched in the graphical user interface, and sequentially overlay the mask images corresponding to the preset number of time frames onto the graphical user interface in chronological order, so that the interface elements corresponding to the first interface are displayed through the image area corresponding to the first color in the mask image displayed by the graphical user interface, and the interface elements corresponding to the second interface are displayed through the image area corresponding to the second color in the mask image; wherein, the image area corresponding to the second color in the mask image corresponding to the current time frame is smaller than the image area corresponding to the second color in the mask image corresponding to the next time frame of the current time frame; The switching completion module is used to control the display of the second interface in the graphical user interface in response to the completion of the display of the mask images corresponding to the preset number of time frames.

17. An electronic device, characterized in that, The electronic device includes a processor and a memory, the memory storing machine-executable instructions that can be executed by the processor, the processor executing the machine-executable instructions to implement the interface switching method according to any one of claims 1 to 15.

18. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when invoked and executed by a processor, cause the processor to implement the interface switching method according to any one of claims 1 to 15.

Images