Implementation method and device of flash card effect, equipment, storage medium and program product

Abstract

The invention relates to the technical field of computer graphics, and provides a flash card effect implementation method and device, equipment, a storage medium and a program product, and the flash card effect implementation method comprises the steps: obtaining a rotation parameter of a mobile terminal; on one hand, basic texture coordinates are updated based on rotation parameters to obtain target texture coordinates, and at least one mask is generated from target components of the target texture coordinates; on the other hand, different texture offsets are applied to texture coordinates of the multiple image layers based on the rotation parameters, so that the image layers with the parallax effect are obtained; and finally, mixing the plurality of image layers with the parallax effect through at least one mask so as to obtain an image with a flash card effect. According to the method, texture coordinate updating and texture offset are driven at the same time by using the rotation parameter, and the results of the two are mixed, so that the flash card effect in the graphical user interface is realized.

Description

Technical Field

[0001] This disclosure relates to the field of computer graphics technology, specifically to methods, apparatus, devices, storage media, and program products for implementing flashcard effects. Background Technology

[0002] In existing computer graphics technologies, adding rich interactive visual effects to graphical user interfaces (GUIs) has become an important means of enhancing user experience. Among the many visual effects, simulating the appearance of physical flashcards (such as laser cards and holographic cards) in the real world has attracted much attention due to its strong visual impact and fun. The core visual feature of physical flashcards is that when the viewing angle changes, the image simultaneously presents a stereoscopic parallax effect with a sense of depth, as well as the switching effects of dynamic content such as patterns and gloss. However, most solutions in related technologies focus on functional controls, such as aiming in games, and lack solutions for simultaneously realizing the above two complex visual phenomena in a two-dimensional UI.

[0003] Therefore, there is an urgent need for a method to achieve the effect of flash cards, in order to solve the problem that it is difficult to realistically simulate the visual characteristics of physical flash cards in related technologies. Summary of the Invention

[0004] This disclosure provides a method, apparatus, device, storage medium, and program product for achieving flash card effects, addressing the problem in related technologies of the difficulty in realistically simulating the visual characteristics of physical flash cards.

[0005] In a first aspect, this disclosure provides a method for implementing a flashcard effect, which provides a graphical user interface via a mobile terminal. The graphical user interface contains multiple image layers. The method includes: Obtain the rotation parameters of the mobile terminal; Based on the rotation parameters, the base texture coordinates of the graphical user interface are updated to obtain the target texture coordinates; Generate at least one mask based on the target components of the target texture coordinates; Based on rotation parameters, different texture offsets are applied to the texture coordinates of multiple image layers to obtain multiple image layers with parallax effects. An image with a flashcard effect is obtained by using at least one mask and blending multiple image layers.

[0006] The flashcard effect implementation method disclosed herein first obtains the rotation parameters of the mobile terminal. On one hand, the base texture coordinates are updated based on the rotation parameters, and at least one mask is generated using the target component of the updated target texture coordinates, enabling the mask to dynamically change in response to device rotation. On the other hand, different texture offsets are applied to the texture coordinates of multiple image layers based on the rotation parameters, thereby generating a dynamic parallax effect between multiple layers in response to device rotation. Finally, the multiple image layers with parallax effects are blended using the dynamically changing mask. Through the above technical means, the device rotation parameters are simultaneously used to drive the generation of dynamic masks and multi-layer parallax offsets, and these two effects are combined, thereby realizing a flashcard image that dynamically changes according to device rotation and has both layer switching and parallax effects in the graphical user interface.

[0007] In one optional implementation, the rotation parameters include horizontal rotation parameters and vertical rotation parameters. Obtaining the rotation parameters of the mobile terminal includes: Obtain the horizontal and vertical rotation angles of the mobile terminal; Map the horizontal rotation angle to the first numerical range to obtain the horizontal rotation parameters; The vertical rotation angle is mapped to the second numerical range to obtain the vertical rotation parameters.

[0008] This allows inputs along both the horizontal and vertical rotation axes to be processed independently. It also allows for setting different response ranges or sensitivities for different rotation directions based on specific application scenarios or user habits.

[0009] In one optional implementation, obtaining the horizontal and vertical rotation angles of the mobile terminal includes: Within a first angular range, the horizontal rotation angle of the mobile terminal is obtained; the first angular range is used to characterize the effective rotation range of the mobile terminal in the horizontal direction. Within the second angle range, the vertical rotation angle of the mobile terminal is obtained; the second angle range is used to characterize the effective rotation range of the mobile terminal in the vertical direction.

[0010] This disclosure also ensures that only normal rotational operations by the user within a specific range are processed, while extreme or invalid rotations beyond these ranges are ignored, thus improving the accuracy of rotational parameters.

[0011] In one alternative implementation, the method further includes: If the horizontal rotation angle exceeds the first angle range, the horizontal rotation parameter is set to the maximum or minimum value of the first numerical range. If the vertical rotation angle exceeds the second angle range, the vertical rotation parameter will be set to the maximum or minimum value of the second numerical range.

[0012] This truncation process ensures that even if the mobile terminal undergoes extreme rotation beyond the expected range, the output rotation parameters are always constrained within a valid, preset numerical range, preventing invalid parameter values ​​from being passed to subsequent calculations, thereby guaranteeing the stability of the flash card effect.

[0013] In one alternative implementation, updating the base texture coordinates of the graphical user interface to obtain the target texture coordinates includes: If the absolute value of the vertical rotation parameter is less than or equal to the absolute value of the horizontal rotation parameter, then the first rotation angle will be obtained based on the vertical rotation parameter and the horizontal rotation parameter. Based on the first rotation angle, the base texture coordinates are updated to obtain the target texture coordinates.

[0014] This processing enables the identification of scenes dominated by horizontal rotation and the calculation of target texture coordinates using a specific first rotation angle, providing a basis for differentiated processing of rotations in different dominant directions.

[0015] In one alternative implementation, updating the base texture coordinates of the graphical user interface to obtain the target texture coordinates includes: If the absolute value of the vertical rotation parameter is greater than the absolute value of the horizontal rotation parameter, then a second rotation angle is generated; The base texture coordinates are updated based on the second rotation angle to obtain the target texture coordinates.

[0016] In scenarios where vertical rotation is dominant, a second rotation angle, different from that used when horizontal rotation is dominant, is employed to update the texture coordinates, thereby achieving a specific response effect for vertical rotation that differs from that for horizontal rotation.

[0017] In one alternative implementation, updating the underlying texture coordinates of the graphical user interface includes: Subtract the preset center point coordinates from the base texture coordinates to obtain the first texture coordinates; Construct a rotation matrix based on the cosine and sine values ​​of the first or second rotation angle; The target texture coordinates are obtained by performing matrix multiplication between the rotation matrix and the first texture coordinates, and then adding the center point coordinates to the result.

[0018] This ensures that the texture coordinates are updated around the center point, avoiding unwanted edge translation or stretching during rotation and guaranteeing the visual center stability of the rotation effect.

[0019] In one alternative implementation, the target component of the target texture coordinates is the horizontal coordinate component of the target texture coordinates.

[0020] This allows the generated mask to produce a dynamic effect that sweeps or changes along a specific direction (such as the horizontal).

[0021] In one alternative implementation, at least one mask is generated based on the target components of the target texture coordinates, including: Based on the target component, preset offset parameters, and preset smoothness parameters, the smooth transition values ​​of the target component at multiple preset thresholds are calculated in a preset smooth interpolation function. Combine smooth transition values ​​to generate a mask with smooth transition edges.

[0022] Compared to simple binarization thresholding, this method of generating a mask using a smooth interpolation function produces a smooth transition edge. When this mask is used to blend image layers, it can achieve a soft, gradual blending effect, avoiding harsh, jagged edges when switching layers.

[0023] In one alternative implementation, generating a mask with smooth transition edges based on the target component includes: A first mask is generated based on the target component, offset parameter, and smoothness parameter. The target component is added to the preset phase offset to obtain the phase offset component; A second mask is generated based on the phase offset component, offset parameter, and smoothness parameter.

[0024] By generating two masks with a phase difference, more complex, asynchronous layer blending effects can be achieved (for example, one image appears first, and the other effect appears slightly later).

[0025] In one optional implementation, the texture offset includes positive and negative offsets, and different texture offsets are applied to the texture coordinates of multiple image layers, including: A positive offset is applied to at least one image layer and a negative offset is applied to at least another image layer, so that the multiple image layers move in opposite directions in response to rotation parameters.

[0026] This causes these layers to move in opposite directions when responding to the same rotation parameters. This reverse movement greatly enhances the visual separation, making the parallax effect more pronounced and improving the image's three-dimensionality.

[0027] In one alternative implementation, prior to the step of applying different texture offsets, the following steps are also included: The texture coordinates of multiple image layers are scaled down, and the texture sampling addressing mode of multiple image layers is set to truncation mode.

[0028] By scaling down the texture coordinates before applying the texture offset and using a truncation sampling mode, a safe boundary is provided for subsequent offset operations. This ensures that even when the layer moves to the edge, the texture sampling will not exceed its effective range, thus effectively preventing visual defects such as repeated tiling or sampling errors at image edges.

[0029] In one alternative implementation, the method of blending the plurality of image layers includes: Using at least one mask, multiple image layers with parallax effects are blended layer by layer using a preset linear interpolation function.

[0030] The layer-by-layer blending structure disclosed herein enables the orderly and step-by-step overlay of the effects of multiple layers and masks to construct a final flashcard image with rich layers.

[0031] Secondly, this disclosure provides a device for implementing a flashcard effect, which provides a graphical user interface via a mobile terminal. The graphical user interface includes multiple image layers. The device includes: The acquisition module is used to acquire the rotation parameters of the mobile terminal; The update module is used to update the base texture coordinates of the graphical user interface based on rotation parameters to obtain the target texture coordinates; The generation module is used to generate at least one mask based on the target components of the target texture coordinates. The offset module is used to apply different texture offsets to the texture coordinates of multiple image layers based on rotation parameters, so as to obtain multiple image layers with parallax effect. The blending module is used to obtain an image with a flashcard effect by blending multiple image layers using at least one mask.

[0032] Thirdly, this disclosure provides an electronic device, including: a memory and a processor, which are communicatively connected to each other. The memory stores computer instructions, and the processor executes the computer instructions to perform the flash card effect implementation method of the first aspect or any corresponding embodiment described above.

[0033] Fourthly, this disclosure provides a computer-readable storage medium storing computer instructions for causing a computer to execute the flash card effect implementation method of the first aspect or any corresponding embodiment described above.

[0034] Fifthly, this disclosure provides a computer program product, including computer instructions for causing a computer to execute the flash card effect implementation method of the first aspect or any corresponding embodiment described above. Attached Figure Description

[0035] To more clearly illustrate the technical solutions in the specific embodiments of this disclosure or the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this disclosure. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0036] Figure 1 This is a schematic diagram illustrating an application scenario according to an embodiment of this disclosure; Figure 2 This is a schematic flowchart of a first method for implementing a flashcard effect according to an embodiment of the present disclosure; Figure 3 This is a second flowchart illustrating a method for implementing a flashcard effect according to an embodiment of the present disclosure; Figure 4 This is a schematic diagram of a three-segment masking operation according to an embodiment of the present disclosure; Figure 5 This is a schematic diagram of a three-segment masking result according to an embodiment of the present disclosure; Figure 6 These are schematic diagrams of layers00_a and layer00_b according to embodiments of this disclosure; Figure 7 These are schematic diagrams of layers0_a and layer0_b according to embodiments of this disclosure; Figure 8 These are schematic diagrams of layers01_a and layer01_b according to embodiments of this disclosure; Figure 9 These are schematic diagrams of layers02_a and layer02_b according to embodiments of this disclosure; Figure 10 These are schematic diagrams of layers03_a and layer03_b according to embodiments of this disclosure; Figure 11 This is an enlarged schematic diagram of an image according to an embodiment of the present disclosure; Figure 12 This is a structural block diagram of a device for implementing a flashcard effect according to an embodiment of the present disclosure; Figure 13 This is a schematic diagram of the hardware structure of an electronic device according to an embodiment of the present disclosure. Detailed Implementation

[0037] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this disclosure, and not all embodiments. Based on the embodiments of this disclosure, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this disclosure.

[0038] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0039] The terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this disclosure, "a plurality of" means two or more, unless otherwise expressly specified.

[0040] Before providing a detailed description of the embodiments of this disclosure, some of the nouns and terms involved in the embodiments of this disclosure will be explained.

[0041] Splendor Editor: A UI resource editor primarily used for creating UI shader effects.

[0042] Desaturation function: A desaturation function that reduces the saturation of an image.

[0043] The Smoothstep function allows interpolation between 0 and 1. Minimum and maximum thresholds can be set. It accepts three parameters: Min: The lower bound of the interpolation. If less than or equal to this value, the function returns 0 (black). Max: The upper bound of the interpolation. If greater than or equal to this value, the function returns 1 (white). Alpha: The source of the interpolation, such as a gradient map or grayscale texture map. This function is used to smooth edges or create a sharpening effect.

[0044] The Clamp function restricts the input value to a set maximum and minimum value.

[0045] Addressing modes include wrap (tiling / repeating), clamp (truncating), and mirror (mirroring). In clamp addressing mode, image sampling only occurs within the UV coordinate range of 0 to 1. If the sampling coordinates exceed the range of 0-1, the image will not be displayed repeatedly but will instead appear as black.

[0046] As one optional application scenario of this disclosure embodiment, such as Figure 1 As shown, the terminal device 110 has an application 101 (such as a game or a graphical interactive application) installed on it, and the user 130 can interact with the application 101 through the terminal device 110 and / or the access device of the terminal device 110.

[0047] For example, application 101 could be a game application, a digital collection display application, or any application that includes a graphical user interface (GUI) that needs to respond to physical user interactions. Figure 1 In the application scenario shown, if application 101 is active, the terminal device 110 can display the interface 102 of application 101. The interface 102 may include various pages that application 101 can provide, such as a card details page for displaying game characters or items, a collection display page, or a card draw result display page, etc.

[0048] In some embodiments, terminal device 110 is communicatively connected to server 120 to provide services to application 101. Terminal device 110 may be a mobile terminal, fixed terminal, or portable terminal equipped with attitude sensors such as a gyroscope, including but not limited to mobile phones, desktop computers, laptops, multimedia tablets, e-book devices, gaming devices, or any combination thereof, including accessories and peripherals of these devices or any combination thereof. In some embodiments, terminal device 110 may also support any type of interface, and server 120 may be various types of computing systems or servers capable of providing computing power, including but not limited to mainframes, edge computing nodes, computing devices in cloud environments, etc.

[0049] It should be noted that, Figure 1 This is merely an example of an application scenario and does not limit the scope of protection of this disclosure.

[0050] The embodiments of this disclosure will now be described with reference to the accompanying drawings. It should be understood that the pages shown in the drawings are merely examples, and various page designs are possible in practice. The various graphic elements on the page may have different arrangements and different visual representations, one or more elements may be omitted or replaced, and one or more other elements may also be present; no limitations are imposed on the embodiments described in this disclosure. Furthermore, the embodiments are primarily described below with reference to terminal device 110. It should be understood that the actions described relative to terminal device 110 can be performed by application 101 on terminal device 110, or can be performed by application 101 in conjunction with its server (e.g., server 120).

[0051] To address the issues of flat and lacking three-dimensional visual effects in graphical user interfaces in related technologies, this disclosure provides a method for achieving a flash card effect. This method obtains the rotation parameters of a mobile terminal, generates a dynamic mask and multiple image layers with parallax effects based on these parameters, and then uses the mask to blend the layers to obtain a flash card effect image that can respond to device rotation, has a three-dimensional effect, and exhibits dynamic visual changes.

[0052] According to the embodiments of this disclosure, an embodiment of a method for implementing a flashcard effect is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0053] This embodiment provides a method for implementing a flashcard effect, which can be used in the aforementioned mobile terminals, such as mobile phones and tablets. The mobile terminal provides a graphical user interface (GUI), which contains multiple image layers. For example, the GUI could be an interface displaying character cards, where each card is composed of a background layer, a character layer, and a foreground effect layer superimposed on top of each other.

[0054] Figure 2 This is a flowchart of a method for implementing a flashcard effect according to an embodiment of the present disclosure, such as... Figure 2 As shown, the process includes the following steps: Step S201: Obtain the rotation parameters of the mobile terminal.

[0055] In this step, it is necessary to obtain data representing changes in the physical posture of the mobile terminal.

[0056] Rotation parameters are numerical values ​​used to quantify how a mobile terminal rotates in space. For example, they can be one or more values ​​representing the magnitude of the device's rotation around its horizontal and vertical axes, respectively.

[0057] Acquisition refers to reading raw data through sensors built into the mobile terminal (such as a gyroscope or accelerometer) and processing it into rotation parameters that can be used by the program. For example, when a user tilts the phone 30 degrees to the left from a vertical position, a parameter value representing a 30-degree rotation to the left will be acquired.

[0058] In this step, as the user holds and rotates the mobile terminal, its real-time orientation information is read from the device's hardware sensors. For example, the device's gyroscope is continuously monitored, and the detected left-right tilt and forward-backward pitch angles are converted into standardized values, i.e., rotation parameters, that can be used in subsequent steps.

[0059] Step S202: Based on the rotation parameters, update the base texture coordinates of the graphical user interface to obtain the target texture coordinates.

[0060] In this step, the obtained rotation parameters are used to dynamically change the texture mapping method of the entire interface.

[0061] Base texture coordinates refer to the default coordinate system (often called UV coordinates) used to apply a 2D image (i.e., texture) to the interface without any rotation. Target texture coordinates, on the other hand, are a new, transformed coordinate system calculated based on rotation parameters, built upon the base texture coordinates.

[0062] An update refers to a computational process that takes rotation parameters as input and performs mathematical transformations on each base texture coordinate point to obtain a new target texture coordinate point. For example, a rotation transformation algorithm can be applied to rotate the base coordinates around a center point.

[0063] Continuing with the previous example, after obtaining the rotation parameter of 30 degrees to the left, a rotation operation will be performed on the basic texture coordinates of the entire interface. This is similar to rotating a coordinate grid paper that was originally laid flat on the interface according to the tilt direction and angle of the user's phone; the rotated coordinate grid is the target texture coordinate. This new coordinate system is dynamic and changes in real time as the user's phone rotates.

[0064] Step S203: Generate at least one mask based on the target component of the target texture coordinates.

[0065] This step uses the target texture coordinates obtained in the previous step to create a dynamic template for controlling image blending.

[0066] The target component of a target texture coordinate refers to a single-dimensional value selected from a coordinate system (e.g., U, V), such as taking only the horizontal U component. In computer graphics, a mask is typically a grayscale image, where grayscale values ​​(from black to white) at different locations are used to control the transparency when two images are blended.

[0067] Generation refers to the process of calculating the color value of each pixel in a masked image using a specific algorithm based on the input values ​​(i.e., the target components). For example, a simple generation rule could be: the grayscale value of the mask is equal to the value of the target component.

[0068] Based on the target texture coordinates obtained in the previous step, the horizontal component value of each pixel on the screen is read. Since the coordinate system has been rotated, these horizontal component values ​​exhibit a gradient distribution. This gradient value is used to generate a grayscale mask. For example, the horizontal component values ​​on the left side of the screen are smaller, resulting in a black mask area; the values ​​on the right side are larger, resulting in a white mask area; and the middle area transitions smoothly. Because the target texture coordinates are continuously rotated in step S202, the generated mask (e.g., a white stripe) appears as a white stripe dynamically sweeping across the interface.

[0069] Step S204: Based on the rotation parameters, apply different texture offsets to the texture coordinates of multiple image layers to obtain multiple image layers with parallax effects.

[0070] Texture offset is a numerical value used to fine-tune texture coordinates, causing a slight positional shift in the image during display. Parallax is a visual phenomenon where objects at different distances appear to move at different speeds as the observer's viewpoint moves, creating a sense of depth. Applying means adding the calculated offset to the original texture coordinates of each layer.

[0071] This step uses the obtained rotation parameters again. For multiple layers in the interface (such as foreground, character, and background), a different texture offset is calculated for each layer. For example, when the user rotates the phone to the left, a small offset to the right might be applied to the foreground layer, while a larger offset to the left might be applied to the background layer. After this processing, the user will see the foreground and background moving at different speeds and in different directions when rotating the phone, thus creating a parallax effect and making the originally flat 2D image appear to have a 3D sense of depth.

[0072] Step S205: By using at least one mask, an image with a flashcard effect is obtained based on the blending of multiple image layers.

[0073] This step combines the parallax layer and dynamic mask generated in the previous steps to output the final effect.

[0074] The flashcard effect is the visual effect that this embodiment aims to achieve, which combines a sense of depth (from parallax) and pattern variation (from mask blending).

[0075] Blending refers to the process of combining two or more layers into a single image based on the grayscale values ​​of a mask. For example, in areas where the mask is white, the upper layer image is fully displayed; in areas where it is black, the lower layer image is fully displayed; and in areas where it is gray, the upper and lower layers are blended proportionally with a semi-transparent effect.

[0076] In this step, a generated dynamic grayscale mask is used to blend multiple image layers that already have a parallax effect. For example, this mask can be used to blend character layer A and character layer B. As the user rotates the phone, the mask dynamically sweeps from left to right, and the image displayed on the screen smoothly transitions from character layer A to character layer B. Because these layers already have a parallax effect, the final result is a holographic effect with depth and a pattern that dynamically changes with the viewing angle.

[0077] In summary, the flashcard effect implementation method provided in this disclosure first obtains the rotation parameters of the mobile terminal. On one hand, the base texture coordinates are updated based on the rotation parameters, and at least one mask is generated using the target component of the updated target texture coordinates, enabling the mask to dynamically change in response to device rotation. On the other hand, different texture offsets are applied to the texture coordinates of multiple image layers based on the rotation parameters, thereby creating a dynamic parallax effect between multiple layers in response to device rotation. Finally, the multiple image layers with parallax effects are blended using the dynamically changing mask. Through the above technical means, the device rotation parameters are used simultaneously to drive the generation of dynamic masks and multi-layer parallax offsets, and these two effects are combined, thus realizing a flashcard image that dynamically changes according to device rotation and has both layer switching and parallax effects in the graphical user interface.

[0078] This embodiment provides a method for implementing a flash card effect, which can be used in the aforementioned mobile terminals, such as mobile phones and tablets. The mobile terminal provides a graphical user interface, which contains multiple image layers.

[0079] Figure 3 This is a flowchart of a method for implementing a flashcard effect according to an embodiment of the present disclosure, such as... Figure 3 As shown, the process includes the following steps: Step S301: Obtain the rotation parameters of the mobile terminal.

[0080] In a specific implementation, the rotation parameters include horizontal rotation parameters and vertical rotation parameters. The process of obtaining these two rotation parameters includes: First, acquire the horizontal and vertical rotation angles of the mobile terminal in physical space. The horizontal rotation angle can be understood as the phone's rotation around its vertical axis (similar to shaking its head), while the vertical rotation angle can be understood as the phone's rotation around its horizontal axis (similar to nodding). Next, acquire and read raw data from sensors such as the mobile terminal's gyroscope or inertial measurement unit (IMU).

[0081] Subsequently, the horizontal rotation angle is mapped to the first numerical range, and the vertical rotation angle is mapped to the second numerical range. This yields the standardized horizontal and vertical rotation parameters.

[0082] Mapping refers to using a function or algorithm to transform a range of values ​​(such as -90 degrees to +90 degrees) to another range (such as -1 to 1).

[0083] One possible implementation is linear mapping, for example, mapping -90 degrees to -1, +90 degrees to +1, and 0 degrees to 0. In a preferred example of this scheme, the first and second numerical intervals can be equal. For example, both numerical intervals are set to -1 to 1. For instance, a horizontal rotation angle within the range of -90 to +90 degrees will be linearly mapped to the first numerical interval of -1 to 1; similarly, a vertical rotation angle within the range of -180 to +180 degrees will also be linearly mapped to the second numerical interval of -1 to 1.

[0084] It should be understood that in other possible implementations, the first and second numerical ranges may also be unequal. For example, to reduce sensitivity to vertical rotation, the first numerical range (horizontal) may be set to -1 to 1, while the second numerical range (vertical) may be set to -0.5 to 0.5.

[0085] Another possible approach is nonlinear mapping, such as using a easing curve, which allows for more sensitive parameter changes in small rotations near the center position, while the changes become smoother as the angle approaches its limit, thus improving the user's control experience.

[0086] The aforementioned angles are obtained within a preset first angle range and a second angle range. The first angle range is for horizontal rotation and represents the effective rotation range of the mobile terminal in the horizontal direction; the second angle range is for vertical rotation and represents the effective rotation range of the mobile terminal in the vertical direction. This is to make the interactive experience more in line with user habits.

[0087] This is equivalent to setting input dead zones and saturation zones. Only when the user's rotation angle enters this preset range will the effective rotation parameters be calculated. This effectively filters out unconscious slight shaking when the user holds the device, resulting in a more stable visual effect. These two ranges can be set to different sizes depending on the application scenario (such as landscape or portrait mode). For example, in a landscape application, the user's left and right rotation of the phone is usually less than the forward and backward rotation, so the effective rotation range in the horizontal direction (first angle range) can be set to -90 degrees to +90 degrees, while the effective rotation range in the vertical direction (second angle range) can be set to -180 degrees to +180 degrees.

[0088] To ensure stability, a boundary handling mechanism is also included: if the user's actual rotation angle exceeds the preset mapping range, such as a horizontal rotation exceeding 90 degrees, the parameter will not continue to increase, but will be set to the maximum or minimum value of the preset range (e.g., 1 or -1). This truncation operation can effectively prevent image tearing or abnormal effects caused by excessive rotation, ensuring the stability of the visual effect.

[0089] Step S302: Based on the rotation parameters, update the base texture coordinates of the graphical user interface to obtain the target texture coordinates.

[0090] This step determines the user's current primary rotation direction by comparing the absolute values ​​of the vertical rotation parameters with the absolute values ​​of the horizontal rotation parameters.

[0091] If horizontal rotation is dominant (i.e., the absolute value of the vertical rotation parameter is less than or equal to the absolute value of the horizontal rotation parameter), then the first rotation angle is calculated based on these two parameters to achieve a smooth oblique rotation.

[0092] If vertical rotation is dominant (i.e., the absolute value of the vertical rotation parameter is greater than the absolute value of the horizontal rotation parameter), a second rotation angle is generated. One possible implementation is to directly set the rotation angle to a fixed value (such as 90 degrees) when vertical rotation is detected as dominant, thereby producing a clean and crisp vertical sweeping effect instead of a slightly tilted and blurred transition.

[0093] Regardless of whether the first or second rotation angle is used, the update of the base texture coordinates adopts the standard method of rotating around the center point.

[0094] First, the base texture coordinates are subtracted from the preset center point coordinates (e.g., (0.5, 0.5)). This step is to move the rotation center to the geometric center of the texture. Then, a standard 2D rotation matrix is ​​constructed based on the cosine and sine values ​​of the calculated rotation angle (first or second rotation angle). The rotated coordinates are obtained by performing matrix multiplication with the first texture coordinates. Finally, the result is added to the previously subtracted center point coordinates to complete the coordinate realignment. This process ensures that the entire texture coordinate system rotates around its center point, avoiding unwanted translations or distortions during rotation and guaranteeing the correctness of the visual effect.

[0095] Step S303: Generate at least one mask based on the target component of the target texture coordinates.

[0096] In this step, only one component of the target texture coordinates, typically its horizontal component (i.e., the U-value), is used to drive the mask generation. Because the target texture coordinates are dynamically rotated, its horizontal component creates a gradient in screen space that varies with rotation. Choosing the horizontal component can produce a dynamic mask that varies from left to right or from top to bottom (depending on the rotation angle), and this directional change is ideal for simulating the effect of light sweeping across or card content switching.

[0097] The mask is generated using a preset smoothing interpolation function (such as the smoothstep function). This function receives the target component, preset offset parameters, and preset smoothness parameters, and calculates a series of smooth transition values, ultimately combining them to generate a mask with smooth transition edges. This method avoids the jaggedness caused by hard edges, resulting in a more refined visual effect. The preset offset parameters control the center position of the transition area in the mask, while the preset smoothness parameters control the width of the transition area.

[0098] This embodiment can also generate multiple associated masks. For example, a first mask can be generated based on a target component, then a preset phase offset can be added to the target component, and a second mask can be generated using the same method. The phase offset is a constant used to spatially offset the two masks. The two masks generated in this way will move synchronously with the user's rotation, but they will always maintain a fixed spatial distance. This can be used to achieve more complex visual effects, such as using the first mask to blend two forms of a character, while using the second mask to blend an energy halo effect that changes with the form.

[0099] Step S304: Based on the rotation parameters, apply different texture offsets to the texture coordinates of multiple image layers to obtain multiple image layers with parallax effects.

[0100] This step is used to create a sense of depth in the interface, and specifically includes the following steps: Step S3041: Before applying the offset, the texture coordinates of multiple image layers are scaled down, and the texture sampling addressing mode of multiple image layers is set to truncation mode.

[0101] Downsizing (e.g., multiplying UV coordinates by a factor less than 1, such as 0.9) can create a safe zone at the image edges. Combined with truncation sampling mode, this ensures that when texture offsets are subsequently applied, even if the coordinates are moved outside the original range (e.g., 0 to 1), the sampling points will be truncated at the image edges, preventing image duplication by sampling the other side and thus avoiding visual artifacts.

[0102] Step S3042: Apply a positive offset to at least one image layer and a negative offset to at least another image layer, so that the multiple image layers move in opposite directions in response to rotation parameters.

[0103] This means that when a user rotates the phone in one direction, at least one layer will move to the left, and at least another layer will move to the right. For example, when the horizontal rotation parameter is positive, the texture coordinates of the foreground layer can be reduced by an offset (moving its image content to the right), while the texture coordinates of the background layer can be increased by an offset (moving its image content to the left). This reverse movement greatly enhances the visual sense of peeling and depth illusion, thus effectively creating a three-dimensional parallax effect.

[0104] Step S305: By using at least one mask, an image with a flashcard effect is obtained based on the blending of multiple image layers.

[0105] This step uses the dynamic mask generated in step S303 to blend the multiple layers with parallax effect generated in step S304 layer by layer. For example, the first mask is used to blend background layer A and background layer B to obtain a blended background; then the second mask is used to blend character layer A and character layer B to obtain a blended character; finally, the blended background and blended character are composited. The entire process seamlessly combines dynamic pattern switching with a three-dimensional parallax effect, ultimately presenting a responsive, layered, and dynamically changing flashcard effect.

[0106] In summary, the flashcard effect implementation method provided in this embodiment first obtains the horizontal and vertical rotation angles of the mobile terminal, maps them to a preset numerical range, and performs boundary truncation processing to obtain a set of stable and standardized rotation parameters. Based on this, on one hand, a dynamic mask is generated using these rotation parameters. This embodiment can distinguish the dominant direction of horizontal or vertical rotation and updates the basic texture coordinates by rotating around a center point. Then, the horizontal component of the rotated texture coordinates is extracted, and a mask with smooth transition edges is generated based on this. On the other hand, a parallax effect is achieved using these rotation parameters. This embodiment, after preprocessing the layer texture coordinates with a shrinking and truncation mode to prevent visual errors, applies positive and negative texture offsets to different layers, causing the layers to move in opposite directions in response to the rotation parameters, thereby enhancing the sense of parallax. Finally, through layer-by-layer linear interpolation, these two effects driven by the same rotation parameters are combined: that is, the dynamic mask with smooth edges generated by path one (which can even generate multiple asynchronous masks using phase offset) is used to blend multiple image layers with obvious reverse motion parallax effects generated by path two. By unifying and superimposing the two core effects of rotation-driven dynamic mask switching and rotation-driven multi-layer parallax offset, a flash card image that dynamically changes according to device rotation, while possessing a sense of layer switching, three-dimensional layering, and smooth transition edges, is realized in the graphical user interface of a mobile terminal.

[0107] To better illustrate the technical solution of this disclosure, a preferred embodiment will be provided below. This embodiment is intended to describe the implementation process of this disclosure in detail, but is not intended to limit the scope of protection of this disclosure.

[0108] This embodiment provides a 2D UI flashcard solution implemented in the Splendor UI editor, aiming to simulate the effect of real-world laser flashcards changing patterns as the viewing angle rotates, utilizing the gyroscope function of a mobile terminal. This embodiment treats the flashcard as a UI resource, implemented within the UI editor using shaders, rather than using the general shaders of a game engine.

[0109] Since gyroscope data cannot be directly obtained in the Splendor UI editor, this embodiment first defines two floating-point material parameters, Rotate_Vertical and Rotate_Horizental, to replace the rotational input of the gyroscope in the vertical and horizontal axes, respectively. The value range of these two parameters is set to -1 to 1 for subsequent calculations.

[0110] In the final game application, the program will input the actual gyroscope data into these two parameters. Before inputting, the program will smooth the raw gyroscope data to filter out high-frequency jitter. The mapping from the gyroscope's physical rotation angle to these two parameters in the range of -1 to 1 is linear. The specific mapping relationship is as follows: The range of -1 to 1 in Rotate_Horizental corresponds to a horizontal rotation of the phone from -90 degrees to +90 degrees.

[0111] The range of -1 to 1 for Rotate_Vertical corresponds to a vertical rotation of the phone from -180 degrees to +180 degrees (this range is set for landscape gaming scenarios and can be adjusted according to the actual situation). If the user's rotation angle exceeds the above range, the corresponding parameter value will be truncated to -1 or 1 to ensure stability.

[0112] To calculate the UV rotation driven by the gyroscope, this approach constructs a custom function node named MF_RotateUV. This function receives three inputs: Rotate_Vertical, Rotate_Horizental, and BaseUV (the base texture coordinates of the 2D UI). Its internal calculation logic is as follows: First, calculate the basic rotation angle Angle.

[0113] The base influence factor is determined by taking the larger of the horizontal and vertical rotation amplitudes using `max(abs(Rotate_Horizental), abs(Rotate_Vertical))`. This value is then multiplied by 3.1415926 to map the parameter range of -1 to 1 to approximately -π to π radians. Subsequently, the `min` function is used to limit the calculated angle to within ±45 degrees (π / 4 radians) to prevent excessive rotation from distorting the visual effect.

[0114] Next, to provide clearer visual feedback when the user performs a purely vertical rotation, this embodiment calculates HVmask = saturate((abs(Rotate_Vertical) - abs(Rotate_Horizental)) * 2.0) to determine whether the vertical rotation is significantly greater than the horizontal rotation. If HVmask approaches 1, the final rotation angle Angle will be forced to approach 90 degrees (π / 2 radians) through linear interpolation (lerp).

[0115] Finally, using standard 2D rotation matrix operations, the calculation formula is as follows: mul(BaseUV-float2(0.5,0.5),float2x2(cos(Angle),-sin(Angle),sin(Angle),cos(Angle)))+float2(0.5,0.5); Rotate BaseUV around its center point (0.5, 0.5) and return the rotated RotateUV.

[0116] The code example is as follows: ; To achieve the switching of the flash card effect, this embodiment generates a three-segment mask based on the rotated UVs. This mask is calculated based on UV0 and UV-1 to the left of UV0 and UV1 to the right of UV0 (a symmetrical mask calculated based on UV0), as shown below. Figure 4 As shown.

[0117] Because this calculation needs to be reused multiple times, it is encapsulated in another custom function node named MF_UV3Mask. This function accepts four inputs: BaseUVmask: A component of the UV after rotation (such as the U component, i.e., .r).

[0118] UVoffset: Controls the offset value of the mask's base position.

[0119] SM (Smoothness): Controls the width of the transition region in the smoothstep function, affecting the smoothness of the mask edges.

[0120] ColorMaskOffset: Used to calculate the additional offset when using the second offset mask.

[0121] The function internally constructs a mask using a series of smoothstep functions: Calculate the first base mask mask0 and the second base mask mask1.

[0122] Add the two together and truncate them with saturate to get the final base mask colormask.

[0123] Similarly, by adding ColorMaskOffset to the input BaseUVmask, the first offset mask mask2 and the second offset mask mask3 are calculated.

[0124] The offset masks are added together and truncated to obtain the final offset mask colormask2. The function ultimately returns a two-dimensional vector float2(colormask, colormask2), where the R channel stores the base mask and the G channel stores the offset mask.

[0125] The three-segment mask obtained using this function is as follows: Figure 5 As shown, the code example is as follows: ; To simulate the 3D depth and parallax effect of the flashcard, the MF_UV3Mask function was used to calculate five different masks. These five masks were created by blending ten images. The image diagrams for layer00_a and layer00_b are shown below. Figure 6 As shown; schematic diagrams of layer0_a and layer0_b are as follows. Figure 7 As shown; schematic diagrams of the images of layer01_a and layer01_b are as follows. Figure 8 As shown; schematic diagrams of layer02_a and layer02_b are as follows. Figure 9 As shown; schematic diagrams of layer03_a and layer03_b are as follows. Figure 10 As shown.

[0126] The first mask is used to blend the effects of four images: layer00_a, layer00_b, layer0_a, and layer0_b. The second mask is used to blend the effects of layer01_a and layer01_b. The third mask is used to blend the effects of the first and second masks. The fourth mask is used to blend the effects of four images: layer02_a, layer02_b, layer03_a, and layer03_b. The fifth mask is used to blend the effects of the third and fourth masks.

[0127] Among them, layer00_a and layer00_b serve as static background base images, directly sampling using the basic UV coordinates. The remaining eight images undergo UV offset based on gyroscope input to simulate perspective. To prevent sampling outside the image edges after offset, the UV coordinates of all layers requiring offset are first scaled (multiplied by 0.9) based on the center before sampling, and the sampler addressing mode of these textures is set to clamp to avoid repeated tiling when the UV range is exceeded. Figure 11 As shown.

[0128] The UV offset of each layer is achieved by multiplying Rotate_Horizental and Rotate_Vertical by different coefficients, thus creating parallax. The specific UV calculation is as follows: Sampling layer0_a and layer0_b: layer0UV = scaled UV + float2(Rotate_Horizental * -0.03, Rotate_Vertical * -0.03), used to sample layer0_a and layer0_b.

[0129] Sampling layer01_a and layer01_b: layer01UV = scaled UV + float2(Rotate_Horizental * 0.03, Rotate_Vertical * 0.03), used to sample layer01_a and layer01_b.

[0130] Sampling layer02_a and layer02_b: layer02UV = scaled UV + float2(Rotate_Horizental * -0.03, Rotate_Vertical * -0.03), used to sample layer02_a and layer02_b.

[0131] Sampling layer03_a and layer03_b: layer03UV = scaled UV + float2(Rotate_Horizental * -0.05, Rotate_Vertical * -0.05), used to sample layer03_a and layer03_b.

[0132] The flash card effect consists of three main visual layers: the bottom layer (Layer 00) is used to place static background images; the middle layer (Layer 0 / Layer 1) is used to place core characters, objects, buildings, etc.; and the top layer (Layer 2 / Layer 3) is used to place foreground effects, particles, light effects, petals, and other miscellaneous elements.

[0133] The 10 sampled images were initially blended to obtain two versions, A and B, for the three main visual layers: Layer 0, Layer 1, and Layer 2. Layer0_A = lerp(layer00_a.rgb, layer0_a.rgb, layer0_a.a); Layer0_B = lerp(layer00_b.rgb, layer0_b.rgb, layer0_b.a); Layer1_A = layer01_a.rgb; Layer1_B = layer01_b.rgb; Layer2_A = lerp(layer02_a.rgb, layer03_a.rgb, layer03_a.a); Layer2_B = lerp(layer02_b.rgb, layer03_b.rgb, layer03_b.a); Layer2alpha = clamp(layer02_a.a + layer02_b.a,0,1); This embodiment calculates five different masks to blend with the aforementioned main visual layer. The calculation of these masks all calls the MF_UV3Mask function, but the input parameters are different for each.

[0134] Calculate the horizontal and vertical blending parameters: Horizontal and vertical blending parameters = Lerp ( Rotate_Horizental, Rotate_Vertical, 2*(Abs(Rotate_Vertical) - Abs(Rotate_Horizental)).

[0135] Five masks are calculated: the BaseUVmask of each mask is derived from the calculated UVRotateUV.r and offset according to the blending parameters and a series of empirical constants. These constants (such as 3, 1.2, 0.2, 0.5, etc.) are used to move the initial effective area of ​​the mask out of the field of view and control the transition effect between different layers.

[0136] First mask: Calculated using MF_UV3Mask, with input parameters UVoffset=0.2, SM=0.5, ColorMaskOffset=0, and the .r channel of the returned value is retrieved.

[0137] Second mask: Calculated using MF_UV3Mask, with input parameters UVoffset=1, SM=0.3, ColorMaskOffset=0.2, and the .g channel of the returned value is retrieved.

[0138] The third mask: Calculated using MF_UV3Mask, with input parameters UVoffset=1.5, SM=0.2, ColorMaskOffset=0, and the .r channel of the returned value is retrieved.

[0139] Fourth mask: Calculated using MF_UV3Mask, with input parameters UVoffset=2.5, SM=0.3, ColorMaskOffset=0.5, and the .g channel of the returned value is retrieved.

[0140] Fifth mask: Calculated using MF_UV3Mask, with input parameters UVoffset=2.5, SM=0.3, ColorMaskOffset=0, and the .r channel of the returned value is retrieved.

[0141] The final effect compositing uses five calculated masks, and blends the main visual layer layer by layer through a series of lerp (linear interpolation) operations.

[0142] Final result 0 = lerp(Layer0_A, Layer0_B, 1st mask); Final result 1 = lerp(Layer1_A, Layer1_B, second mask); Final Effect 3 = lerp(Final Effect 0, Final Effect 1, 3rd Mask); Final result 4 = lerp(Layer2_A, Layer2_B, 4th mask); Final effect = lerp(final effect 3, final effect 4, 5th mask * Layer2alpha).

[0143] Finally, the calculated final effect is connected to the emissive interface of the Splendor editor as the final color output of the 2D UI. Through the above steps, this embodiment realizes a gyroscope flash card effect for UI resources. This effect has a certain three-dimensionality and can change the flash card effect as the phone is rotated.

[0144] In summary, this embodiment cleverly simulates a parallax effect with a sense of depth and three-dimensionality on a 2D interface by layering multiple images and applying differentiated UV offsets to different layers according to the rotation of the phone. Simultaneously, a dynamic mask is generated using the rotated UV coordinates to smoothly blend and switch between different images, ultimately achieving an interactive experience where the flashcard pattern dynamically changes as the user rotates the phone and changes their viewing angle.

[0145] This embodiment also provides a device for implementing a flashcard effect, which is used to implement the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can refer to a combination of software and / or hardware that implements a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0146] This embodiment provides a device for implementing a flashcard effect, which provides a graphical user interface via a mobile terminal. The graphical user interface includes multiple image layers, such as... Figure 12 As shown, it includes: The acquisition module 1201 is used to acquire the rotation parameters of the mobile terminal; Update module 1202 is used to update the base texture coordinates of the graphical user interface based on rotation parameters to obtain the target texture coordinates; Generation module 1203 is used to generate at least one mask based on the target components of the target texture coordinates; Offset module 1204 is used to apply different texture offsets to the texture coordinates of multiple image layers based on rotation parameters, so as to obtain multiple image layers with parallax effect; The blending module 1205 is used to obtain an image with a flashcard effect by blending multiple image layers using at least one mask.

[0147] In one optional implementation, the rotation parameters include horizontal rotation parameters and vertical rotation parameters, and the acquisition module 1201 is specifically used for: Obtain the horizontal and vertical rotation angles of the mobile terminal; Map the horizontal rotation angle to the first numerical range to obtain the horizontal rotation parameters; The vertical rotation angle is mapped to the second numerical range to obtain the vertical rotation parameters.

[0148] In an optional implementation, the acquisition module 1201 is further configured to: Within the first angular range, obtain the horizontal rotation angle of the mobile terminal; Within the second angular range, the vertical rotation angle of the mobile terminal is obtained.

[0149] In an optional implementation, the acquisition module 1201 is further configured to: If the horizontal rotation angle exceeds the horizontal mapping range, the horizontal rotation parameter will be set to the maximum or minimum value of the preset numerical range. If the vertical rotation angle exceeds the vertical mapping range, the vertical rotation parameter will be set to the maximum or minimum value of the preset numerical range.

[0150] In one optional implementation, the update module 1202 is specifically used for: If the absolute value of the vertical rotation parameter is less than or equal to the absolute value of the horizontal rotation parameter, then the first rotation angle will be obtained based on the vertical rotation parameter and the horizontal rotation parameter. Based on the first rotation angle, the base texture coordinates are updated to obtain the target texture coordinates.

[0151] In an optional implementation, the update module 1202 is further configured to: If the absolute value of the vertical rotation parameter is greater than the absolute value of the horizontal rotation parameter, then a second rotation angle is generated; The base texture coordinates are updated based on the second rotation angle to obtain the target texture coordinates.

[0152] In an optional implementation, the update module 1202 is further configured to: Subtract the preset center point coordinates from the base texture coordinates to obtain the first texture coordinates; Construct a rotation matrix based on the cosine and sine values ​​of the first or second rotation angle; The target texture coordinates are obtained by performing matrix multiplication between the rotation matrix and the first texture coordinates, and then adding the center point coordinates to the result.

[0153] In one optional implementation, the generation module 1203 is specifically used for: Based on the target component, preset offset parameters, and preset smoothness parameters, the smooth transition values ​​of the target component at multiple preset thresholds are calculated in a preset smooth interpolation function. Combine smooth transition values ​​to generate a mask with smooth transition edges.

[0154] In one optional implementation, the generation module 1203 is specifically used for: A first mask is generated based on the target component, offset parameter, and smoothness parameter. The target component is added to the preset phase offset to obtain the phase offset component; A second mask is generated based on the phase offset component, offset parameter, and smoothness parameter.

[0155] In one alternative implementation, the offset module 1204 is specifically used for: A positive offset is applied to at least one image layer and a negative offset is applied to at least another image layer, so that the multiple image layers move in opposite directions in response to rotation parameters.

[0156] In an alternative implementation, the offset module 1204 is further configured to: The texture coordinates of multiple image layers are scaled down, and the texture sampling addressing mode of multiple image layers is set to truncation mode.

[0157] In one alternative implementation, the mixing module 1205 is specifically used for: Using at least one mask, multiple image layers with parallax effects are blended layer by layer using a preset linear interpolation function.

[0158] The flashcard effect implementation apparatus provided in this disclosure can execute the flashcard effect implementation method provided in any embodiment of this disclosure, and has the corresponding functional modules and beneficial effects for executing the method. Further functional descriptions of the above modules and units are the same as in the corresponding embodiments described above, and will not be repeated here.

[0159] Figure 13 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure.

[0160] The following is a detailed reference. Figure 13 The diagram illustrates a structural schematic suitable for implementing an electronic device according to embodiments of the present disclosure. The electronic device may include a processor (e.g., a central processing unit, graphics processor, etc.) 1301, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 1302 or a program loaded from memory 1308 into random access memory (RAM) 1303. The RAM 1303 also stores various programs and data required for the operation of the electronic device. The processor 1301, ROM 1302, and RAM 1303 are interconnected via a bus 1304. An input / output (I / O) interface 1305 is also connected to the bus 1304.

[0161] Typically, the following devices can be connected to I / O interface 1305: input devices 1306 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 1307 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; memory devices 1308 including, for example, magnetic tapes, hard disks, etc.; and communication devices 1309. Communication device 1309 allows electronic devices to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 13 Electronic devices with various devices are shown, but it should be understood that it is not required to implement or have all of the devices shown, and more or fewer devices may be implemented or have instead.

[0162] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication device 1309, or installed from memory 1308, or installed from ROM 1302. When the computer program is executed by processor 1301, it performs the functions defined in the method for implementing the flash card effect according to embodiments of this disclosure.

[0163] Figure 13 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.

[0164] This disclosure also provides a computer-readable storage medium in which the methods described in this disclosure can be implemented in hardware or firmware, or implemented as recordable on a storage medium, or implemented as computer code downloaded over a network and originally stored on a remote storage medium or a non-transitory machine-readable storage medium and subsequently stored on a local storage medium. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium can also include combinations of the above types of memory. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code. When the software or computer code is accessed and executed by the computer, processor, or hardware, the flash card effect implementation method shown in the above embodiments is implemented.

[0165] A portion of this disclosure can be applied to computer program products, such as computer program instructions, which, when executed by a computer, can invoke or provide methods and / or technical solutions according to this disclosure through the operation of the computer. Those skilled in the art will understand that the forms in which computer program instructions exist in a computer-readable medium include, but are not limited to, source files, executable files, and installation package files. Accordingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executing the instructions; the computer compiling the instructions and then executing the corresponding compiled program; the computer reading and executing the instructions; or the computer reading and installing the instructions and then executing the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer.

[0166] Although embodiments of the present disclosure have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of the present disclosure, and such modifications and variations all fall within the scope defined by the appended claims.

Claims

1. A method for implementing a flashcard effect, characterized in that, The method of providing a graphical user interface via a mobile terminal, wherein the graphical user interface includes multiple image layers, includes: Obtain the rotation parameters of the mobile terminal; Based on the rotation parameters, the base texture coordinates of the graphical user interface are updated to obtain the target texture coordinates; At least one mask is generated based on the target components of the target texture coordinates; Based on the rotation parameters, different texture offsets are applied to the texture coordinates of multiple image layers to obtain multiple image layers with parallax effects. An image with a flashcard effect is obtained by using at least one mask and blending the multiple image layers.

2. The method according to claim 1, characterized in that, The rotation parameters include horizontal rotation parameters and vertical rotation parameters. Obtaining the rotation parameters of the mobile terminal includes: Obtain the horizontal and vertical rotation angles of the mobile terminal; The horizontal rotation angle is mapped to a first numerical range to obtain the horizontal rotation parameters; The vertical rotation angle is mapped to a second numerical range to obtain the vertical rotation parameters.

3. The method according to claim 2, characterized in that, The process of obtaining the horizontal and vertical rotation angles of the mobile terminal includes: Within a first angular range, the horizontal rotation angle of the mobile terminal is obtained; the first angular range is used to characterize the effective rotation range of the mobile terminal in the horizontal direction. Within the second angle range, the vertical rotation angle of the mobile terminal is obtained; the second angle range is used to characterize the effective rotation range of the mobile terminal in the vertical direction.

4. The method according to claim 3, characterized in that, The method further includes: If the horizontal rotation angle exceeds the first angle range, the horizontal rotation parameter is set to the maximum or minimum value of the first numerical range. If the vertical rotation angle exceeds the second angle range, the vertical rotation parameter is set to the maximum or minimum value of the second numerical range.

5. The method according to claim 2, characterized in that, The step of updating the base texture coordinates of the graphical user interface to obtain the target texture coordinates includes: If the absolute value of the vertical rotation parameter is less than or equal to the absolute value of the horizontal rotation parameter, then the first rotation angle will be obtained based on the vertical rotation parameter and the horizontal rotation parameter. The base texture coordinates are updated based on the first rotation angle to obtain the target texture coordinates.

6. The method according to claim 5, characterized in that, The step of updating the base texture coordinates of the graphical user interface to obtain the target texture coordinates includes: If the absolute value of the vertical rotation parameter is greater than the absolute value of the horizontal rotation parameter, then a second rotation angle is generated; The base texture coordinates are updated based on the second rotation angle to obtain the target texture coordinates.

7. The method according to claim 6, characterized in that, Updating the base texture coordinates of the graphical user interface includes: Subtract the preset center point coordinates from the base texture coordinates to obtain the first texture coordinates; Construct a rotation matrix based on the cosine and sine values ​​of the first or second rotation angle; The target texture coordinates are obtained by performing matrix multiplication between the rotation matrix and the first texture coordinates, and then adding the center point coordinates to the result.

8. The method according to claim 1, characterized in that, The target component of the target texture coordinates is the horizontal coordinate component of the target texture coordinates.

9. The method according to claim 1, characterized in that, The generation of at least one mask based on the target components of the target texture coordinates includes: Based on the target component, preset offset parameters, and preset smoothness parameters, the smooth transition values ​​of the target component at multiple preset thresholds are calculated in the preset smooth interpolation function. The smooth transition values ​​are combined to generate the mask with smooth transition edges.

10. The method according to claim 9, characterized in that, The process of generating a mask with smooth transition edges based on the target component includes: A first mask is generated based on the target component, the offset parameter, and the smoothness parameter; The target component is added to a preset phase offset to obtain the phase offset component; A second mask is generated based on the phase offset component, the offset parameter, and the smoothness parameter.

11. The method according to claim 1, characterized in that, The texture offset includes positive and negative offsets, and applying different texture offsets to the texture coordinates of multiple image layers includes: A positive offset is applied to at least one image layer and a negative offset is applied to at least another image layer, so that the plurality of image layers move in opposite directions in response to the rotation parameters.

12. The method according to claim 1, characterized in that, Before the step of applying different texture offsets, the method further includes: The texture coordinates of the multiple image layers are scaled down, and the texture sampling addressing mode of the multiple image layers is set to truncation mode.

13. The method according to claim 1, characterized in that, The methods for blending the multiple image layers include: Using the at least one mask, the multiple image layers with parallax effects are blended layer by layer through a preset linear interpolation function.

14. A device for implementing a flashcard effect, characterized in that, The device provides a graphical user interface via a mobile terminal, the graphical user interface including multiple image layers, and includes: An acquisition module is used to acquire the rotation parameters of the mobile terminal; The update module is used to update the base texture coordinates of the graphical user interface based on the rotation parameters to obtain the target texture coordinates; A generation module is used to generate at least one mask based on the target components of the target texture coordinates; An offset module is used to apply different texture offsets to the texture coordinates of multiple image layers based on the rotation parameters, so as to obtain multiple image layers with parallax effects. A blending module is used to obtain an image with a flashcard effect by means of blending the multiple image layers through the at least one mask.

15. An electronic device, characterized in that, include: A memory and a processor are communicatively connected, the memory stores computer instructions, and the processor executes the computer instructions to perform the method for implementing the flash card effect as described in any one of claims 1 to 13.

16. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing a computer to execute the method for implementing the flash card effect according to any one of claims 1 to 13.

17. A computer program product, characterized in that, Includes computer instructions, which are used to cause a computer to execute the method for implementing the flash card effect as described in any one of claims 1 to 13.

Images