Multi-stage animation choreography virtual card selection method and system

Abstract

The application provides a virtual card selection method and system with multi-stage animation arrangement, and relates to the technical field of animation. The method comprises the following steps: providing a plurality of virtual cards initially in a stacked state; unfolding the virtual cards in the stacked state in an animated manner, assigning a target angle to each virtual card, and controlling the virtual cards to rotate from the stacked state to the target angle to obtain an initial interface with a symmetrical fan-shaped layout; based on a card selection operation on the initial interface, triggering multi-stage animation arrangement to obtain a selection result. The application improves user experience and multi-device adaptability.

Description

Technical Field

[0001] This invention relates to the field of animation technology, and in particular to a virtual card selection method and system for multi-stage animation choreography. Background Technology

[0002] With the increasing popularity of virtual card interaction in e-commerce promotions and lightweight entertainment web applications, many platforms use virtual card selection functions to enhance user engagement. For example, to promote user consumption during holidays, an e-commerce platform developed an H5-style card lottery activity. The lottery activity required displaying 18 initially stacked virtual cards. After users clicked, the cards would expand for selection. Selecting 3 cards would unlock the lottery qualification. The technical team used a CSS flex linear arrangement and a simple 2D flip animation solution to achieve this: first, the expanded cards were arranged horizontally using flex layout, and then JavaScript was used to listen for click events and trigger the CSS rotateY property to achieve 2D flipping of the cards to display prize information.

[0003] This solution has the following technical flaws: For example, the animation transition from the card unfolding in a fan shape to its aggregation in the center of the screen after selection lacks a smooth connection. Due to the lack of coordinated design of the animation parameters for the two stages, the unfolded card will suddenly jump to the aggregation starting position without a gradual transition effect, resulting in a visual perception gap for the user and disrupting the continuity of the lottery process. Summary of the Invention

[0004] The technical problem to be solved by the present invention is to provide a method and system for selecting virtual cards with multi-stage animation arrangement, which improves user experience and multi-device compatibility.

[0005] To solve the above-mentioned technical problems, the technical solution of the present invention is as follows: Firstly, a method for selecting virtual cards in multi-stage animation choreography, the method comprising: Provides multiple virtual cards that are initially stacked; The stacked virtual cards are unfolded in an animated manner. By assigning a target angle to each virtual card and controlling the virtual cards to rotate from the stacked state to the target angle, a symmetrical fan-shaped layout initial interface is obtained. Based on the card selection operation on the initial interface, a multi-stage animation is triggered to obtain the selection result; The selection results are processed, the selected cards are highlighted from their original positions in the fan-shaped layout and moved to the center of the display area; at the same time, the unselected cards are moved out of the display area from their original positions in the fan-shaped layout with a gradual animation, completing the transformation from a multi-card browsing interface to a single-card focusing interface, thus obtaining a single-card focusing interface. Based on the single-card focus interface, cards in the aggregated state are separated and laid out in multiple predefined positions in the display area; After the cards are laid out flat, a 3D flip animation is performed on the flat cards to reveal the content; during the flipping of each card, audio or visual media corresponding to the revealed content is played synchronously.

[0006] Furthermore, the stacked virtual cards are animatedly unfolded by assigning a target angle to each virtual card and controlling the virtual cards to rotate from the stacked state to the target angle, thus obtaining an initial interface with a symmetrical fan-shaped layout, including: Based on the predefined total angle range and the number of virtual cards, the angle step size used to control the card distribution density is calculated; Based on the angle step size, assign a symmetrical target angle to each virtual card relative to the center line of the fan-shaped layout; Based on the target perspective, a hierarchical control mechanism is used to assign a display level to each card, resulting in the display level allocation. Based on the allocation results of the symmetrical target angle and display level, the initial interface of the symmetrical fan-shaped layout is obtained by controlling all virtual cards to synchronously execute rotation animation from the stacked state.

[0007] Furthermore, based on the card selection operation on the initial interface, a multi-stage animation choreography is triggered to obtain the selection result, including: Based on the initial interface state, receive interactive event data and parse it to obtain a set of candidate card identifiers; Based on the card identifier set, the candidate cards are validated through a validity verification mechanism, and the card status is updated to the selected status to obtain the updated card status data. Based on card state data and initial interface state data, an animation instruction sequence for transitioning from the current interface state to the next state is obtained through multi-stage animation choreography. Based on the animation instruction sequence, the graphics rendering is triggered to execute multi-stage animations, and the animation execution status is obtained; Based on the animation execution status and the updated card status data, the final user selection result is confirmed.

[0008] Furthermore, the selection results are processed by highlighting the selected cards from their original positions in the fan-shaped layout and moving them to the center of the display area; simultaneously, the unselected cards are gradually moved out of the display area from their original positions in the fan-shaped layout using a gradual animation, completing the transition from a multi-card browsing interface to a single-card focusing interface, resulting in a single-card focusing interface, including: Based on the user's selection, the virtual cards are divided into a set of selected cards and a set of unselected cards, resulting in a card classification result; Based on the card classification results and the initial interface state data, highlighting parameters are generated for the selected card set and the aggregation target position at the center of the display area is calculated. At the same time, animation path parameters for the unselected card set to gradually move out of the display area are generated to obtain the animation parameter set. Based on the animation parameter set, the synchronously executed aggregate animation sequence and move-out animation sequence are obtained through animation timing arrangement; Send animation execution commands to the aggregation animation sequence and the move-out animation sequence to drive the graphics rendering to execute the aggregation movement animation of the selected card and the gradual move-out animation of the unselected card in a synchronous manner; Based on the removal animation, it is confirmed that the selected card has been aggregated in the center of the display area and the unselected card has been completely removed from the display area. The interface state is then updated to a single card focus interface, resulting in a single card focus interface.

[0009] Furthermore, based on the single-card focus interface, cards in a clustered state are separated and tiled into multiple predefined positions in the display area, including: Based on the single card focus interface, the card set in the aggregated state is parsed to obtain the card set data to be separated; Based on the set of cards to be separated, a predefined tiled layout template is called to assign target position coordinates in the display area to each card; Based on the target location coordinates and the set of cards to be separated, the animation path parameters and timing sequence of the cards moving from the aggregation center to their respective target locations are generated through the separation animation to obtain the card separation animation control parameters. Based on the card separation animation control parameters, the graphics rendering unit is controlled to execute the card separation and movement animation from the aggregated state to the tiled state to complete the card separation process; After the card separation process is complete, confirm that all cards are stably positioned in their predefined target locations.

[0010] Furthermore, after the cards are laid out flat, a 3D flip animation is executed on the flattened cards to reveal their content; during the flipping process of each card, audio or visual media corresponding to the revealed content is played synchronously, including: The card tile interface allows you to obtain a collection of all cards that are currently tiled. Based on the card set, 3D animation parameters with specific timing are obtained for each card through 3D animation; Based on the 3D flipping animation parameters, the instruction sequence for flipping the cards one by one is obtained according to the preset reveal sequence; Based on the instruction sequence, the graphics rendering unit is controlled to execute the 3D flip animation of each card in sequence, and the corresponding audio or visual media playback unit is triggered when each card is flipped to a predetermined angle, so as to complete the card flip animation and media playback.

[0011] Based on the card set, 3D animation parameters with specific timing are obtained for each card through 3D animation, including: Based on the card content to be revealed in the card tiled interface state data, calculate the 3D flip trajectory parameters for each card using 3D animation parameters; The 3D flip trajectory parameters are bound to the corresponding media resource identifiers to obtain the card animation media binding data; Based on the card animation media binding data, the synchronization timeline between the flip animation keyframes and the media playback trigger points is configured to obtain the final time-synchronized animation parameters.

[0012] Secondly, the virtual card selection system with multi-stage animation arrangement includes: The management module is used to provide multiple virtual cards that are initially stacked. The animation module unfolds the stacked virtual cards with animation. By assigning a target angle to each virtual card and controlling the virtual cards to rotate from the stacked state to the target angle, a symmetrical fan-shaped layout initial interface is obtained. Based on the card selection operation on the initial interface, a multi-stage animation arrangement is triggered to obtain the selection result. The selection result is processed to highlight the selected card from its original position in the fan-shaped layout and move it to the center of the display area. At the same time, the unselected card is moved out of the display area from its original position in the fan-shaped layout with a gradual animation, completing the transformation from a multi-card browsing interface to a single-card focused interface, resulting in a single-card focused interface. The layout module is used to separate cards in an aggregated state based on a single card focus interface and tile them to multiple predefined positions in the display area; The reveal module is used to perform a 3D flip animation on the cards after they are laid out to reveal the content; during the flipping process of each card, audio or visual media corresponding to the revealed content is played synchronously.

[0013] Thirdly, a computing device includes: One or more processors; A storage device for storing one or more programs that, when executed by one or more processors, cause the one or more processors to implement the method.

[0014] Fourthly, a computer-readable storage medium storing a program that, when executed by a processor, implements the method.

[0015] The above-described solution of the present invention has at least the following beneficial effects: Because it adopts a symmetrical fan-shaped distribution algorithm, it calculates the angle step size based on the total angle range and the number of cards, allocates symmetrical target angles and performs hierarchical control, and is equipped with a multi-stage animation state machine to manage interface transitions such as card selection, aggregation, tiling, and flipping in stages. Combined with differentiated animation processing for selected and unselected cards, it makes selected cards stand out and aggregates, while unselected cards gradually move out. It is supplemented by 3D flipping animation, combined with perspective effect and Y-axis rotation, as well as an event-driven media synchronization mechanism, which accurately binds the key frames of the flipping animation with the audio and video playback trigger points. This overcomes the visual imbalance of fan-shaped expansion, abrupt transitions between animation stages, stuttering of multi-card synchronous animation, lack of realism in 3D flipping animation, poor interaction and animation coordination, and inaccurate content synchronization in traditional virtual card systems. It achieves visual balance and smoothness, precise interactive response, and efficient content synchronization throughout the entire process of virtual cards from initial stacking to content reveal, improving the user's immersion and operation experience during the card selection process. At the same time, it reduces development and device adaptation costs based on standard Web technology stacks and adapts to various high-end and low-end terminal devices. Attached Figure Description

[0016] Figure 1 This is a flowchart illustrating the virtual card selection method for multi-stage animation arrangement provided in an embodiment of the present invention.

[0017] Figure 2 This is a schematic diagram of a virtual card selection system with multi-stage animation arrangement provided in an embodiment of the present invention. Detailed Implementation

[0018] Exemplary embodiments of the present disclosure will now be described in more detail with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

[0019] like Figure 1 As shown, embodiments of the present invention propose a virtual card selection method for multi-stage animation choreography, the method comprising the following steps: Step 1: Provide multiple virtual cards that are initially stacked. Step 2: Unfold the stacked virtual cards with animation. Assign a target angle to each virtual card and control the virtual cards to rotate from the stacked state to the target angle to obtain the initial interface of the symmetrical fan-shaped layout. Step 3: Based on the card selection operation on the initial interface, trigger a multi-stage animation arrangement to obtain the selection result; Step 4: Process the selection results, highlight the selected cards from their original positions in the fan-shaped layout, and move them to the center of the display area; at the same time, move the unselected cards from their original positions in the fan-shaped layout out of the display area with a gradual animation, completing the transformation from a multi-card browsing interface to a single-card focusing interface, and obtaining a single-card focusing interface. Step 5: Based on the single card focusing interface, separate the cards in the aggregated state and tile them to multiple predefined positions in the display area; Step 6: After the cards are laid out flat, perform a 3D flip animation on the flat cards to reveal the content; during the flipping of each card, play audio or visual media corresponding to the revealed content simultaneously.

[0020] In this embodiment of the invention, by employing an initial stacked virtual card base, a symmetrical fan-shaped layout animation unfolding method, a multi-stage animation arrangement mechanism triggered by card selection operations, differentiated interface transitions where selected cards are highlighted and aggregated to the display center and unselected cards are gradually moved out, a layout adjustment scheme for separating aggregated cards and tiling them to predefined positions, and a content reveal design that executes 3D flip animations one by one after tiling and simultaneously plays corresponding audio or visual media, the technical problems of visual imbalance and irregularity in card unfolding, abrupt and awkward transitions in multi-stage animations, unclear focus of selected cards and interference from unselected cards, lack of three-dimensionality in flip animations, and asynchrony between content display and audio / video in traditional virtual card systems are overcome. This results in a smooth and coordinated visual experience throughout the entire process from the initial state to content reveal, with clear and prominent selected targets, realistic and immersive flip animations, and precise synchronization between content and media. This enhances the user's operational and sensory experience during card selection and content browsing, while also making the interface state transition logic clear and reducing the user's cognitive burden.

[0021] In a preferred embodiment of the present invention, step 1 above may include: Step 1: Provide multiple virtual cards initially in a stacked state. Specifically, this includes: Determining the required number of virtual cards and their matching to the scenario for an H5-style card lottery activity. For example, specifying that 18 virtual cards are needed to meet the activity's requirement for users to select 3 cards to unlock lottery eligibility. Each virtual card is pre-associated with corresponding lottery prize information to ensure it has actual content attributes. Set uniform initial state parameters for all virtual cards, and center the initial display position of each card in the H5 page's display area, ensuring all cards are perfectly aligned. Simultaneously, each... The initial rotation angle of the cards is uniformly set to 0 degrees to avoid misalignment of the initial state due to angle differences. In addition, the display layer of all cards is set to the same value so that the cards visually overlap and cover each other completely. In combination with the cross-terminal adaptation requirements of H5 pages, the coordinate parameters of the initial stacking position are adjusted to ensure that when the H5 activity is opened on mobile devices of different sizes such as mobile phones and tablets, the stacked virtual cards are always in the visual focus area of ​​the screen. Finally, the initial stacking state in which all cards completely overlap in the center of the display area is obtained, providing a unified and stable starting benchmark for the subsequent animation unfolding process.

[0022] In this embodiment of the invention, by adopting the technical means of setting an initial stacking state for virtual cards, that is, providing multiple virtual cards that are in an overlapping stacking state from the beginning, the inconsistency of animation start points, visual clutter of the initial interface, and difficulty in forming a clear visual focus caused by the initial state of traditional virtual card systems are overcome. This achieves a unified initial benchmark for the virtual card animation process, allowing animations such as fan-shaped unfolding to have a regular starting state, while maintaining the simplicity of the initial interface to avoid distracting the user's attention, and laying a clear and orderly visual foundation for the user's subsequent card selection operation.

[0023] In a preferred embodiment of the present invention, step 2 above may include: Step 2.1: Based on the predefined total angle range and the number of virtual cards, calculate the angle step size used to control the card distribution density. Specifically, for the H5 card lottery activity that requires displaying 18 virtual cards, first, combine the visual display range of the mobile H5 page to predefine a fan-shaped total angle range suitable for user browsing, for example, set the total angle to 36 degrees. To calculate the angle step size to control the card distribution density and ensure that the 18 cards can be evenly distributed within the total angle range, divide the predefined total angle value by the number of virtual cards minus one, i.e., 36 degrees divided by 17, to obtain the angle interval between each card. The angle interval is the angle step size. By using the angle step size, the 18 cards can be evenly arranged within the total angle range, avoiding situations where some areas are crowded with cards and some areas are empty.

[0024] Step 2.2: Based on the angle step size, assign a symmetrical target angle relative to the center line of the fan-shaped layout to each virtual card. Specifically, using the center line of the fan-shaped layout as a reference, and based on the calculated angle step size, assign a symmetrical target angle relative to the center line to each of the 18 virtual cards one by one. Starting from the center line to the left, the target angle assigned to the first card is half of the total angle minus a negative value. After that, for each card moved to the right, the target angle increases by one angle step size. Starting from the center line to the right, the target angle assigned to the first card is half of the total angle minus a positive value. For each card moved to the left, the target angle decreases by one angle step size. Through this allocation method, the 18 cards are symmetrically distributed around the center line, and the target angle of each card maintains a fixed angle step size with the adjacent cards, resulting in a regular symmetrical fan-shaped structure.

[0025] Step 2.3: Based on the target angle, a hierarchical control mechanism is used to assign a display level to each card, resulting in the following allocation: According to the distribution of target angles of the 18 cards, a hierarchical control mechanism is used to assign a display level to each card. Following the order of the target angles from left to right, cards on the left are assigned a higher display level, and cards on the right are assigned a relatively lower display level. For example, the leftmost card with a target angle of -18 degrees is assigned the highest display level; adjacent cards on the right are assigned a lower display level than the previous one, and so on, with the rightmost card with a target angle of 18 degrees assigned the lowest display level. This hierarchical allocation method ensures that after the fan-shaped layout, cards on the left are not obscured by cards on the right, and each card is fully presented to the user, avoiding the possibility of some cards being covered due to hierarchical confusion, which would affect the user's viewing and selection of cards.

[0026] Step 2.4: Based on the allocation results of the symmetrical target angle and display level, control all virtual cards to synchronously execute rotation animations from their stacked state to obtain the initial interface of the symmetrical fan-shaped layout. Specifically, this includes: first, confirming the initial stacking state of the 18 virtual cards: all cards overlap at the center of the display area of ​​the H5 page, with an initial rotation angle of 0 degrees and the same initial display level. Based on the symmetrical target angle of each card and the display level allocation results obtained in Step 2.3, simultaneously triggering the rotation animation of all cards. During the animation execution, each card starts from the initial 0 degrees and gradually rotates to its respective target angle according to the preset animation speed; simultaneously, the display level of each card is adjusted synchronously during the rotation to ensure that the card on the left always maintains a higher level than the card on the right. Throughout the entire rotation animation process, the 18 cards maintain synchronous movement, without some cards completing rotation prematurely or some cards rotating late. Finally, all cards stabilize at their respective target angles and display levels, resulting in the initial card selection interface of the symmetrical fan-shaped layout, which facilitates users to view and select cards in the H5 lottery activity.

[0027] In this embodiment of the invention, by employing the method of calculating the angle step size for controlling the card distribution density based on a predefined total angle range and the number of virtual cards, assigning a symmetrical target angle relative to the center line of the fan-shaped layout to each virtual card based on the angle step size, assigning a display level to each card through a hierarchical control mechanism in combination with the target angle distribution, and then controlling all virtual cards to synchronously execute rotation animation from a stacked state based on the symmetrical target angle and display level, this invention overcomes the problems of irregular card distribution leading to visual imbalance, uneven density affecting browsing, chaotic hierarchy causing occlusion, and asynchronous animation causing a stiff unfolding process in traditional virtual card unfolding schemes. It achieves a symmetrical and aesthetically pleasing fan-shaped layout after the virtual cards are unfolded, with uniform and controllable layout density, no occlusion between cards and visual harmony, and smooth synchronous rotation animation, providing users with a clear and orderly initial card selection interface and reducing the cognitive burden of card recognition and selection for users.

[0028] In a preferred embodiment of the present invention, step 3 above may include: Step 3.1: Based on the initial interface state, receive interaction event data and parse it to obtain a set of candidate card identifiers. Specifically, in the symmetrical fan-shaped layout initial interface of the H5 card lottery activity, first confirm that all 18 virtual cards are in an interactive state and maintain a stable fan-shaped distribution. Use this as the baseline of the initial interface state. When the user clicks on a virtual card in this interface, receive the user's click interaction event data. This data includes the coordinate information of the user's click position and the basic interaction signal of the clicked card. Based on the correspondence between the position coordinate range of each card in the initial interface and the unique identifier, parse the received click interaction event data, identify the unique identifier of each virtual card corresponding to the click coordinate, and organize these identifiers into a set of candidate card identifiers to obtain the parsing result of the candidate card identifiers.

[0029] Step 3.2: Based on the card identifier set, the candidate cards are validated using a validity verification mechanism, and their status is updated to the selected state. This process involves extracting the current selectable state of 18 virtual cards from the initial interface status data, along with the card selection rules set in the H5 lottery activity. Combined with the obtained candidate card identifier parsing results, the candidate cards are validated using a validity verification mechanism. The validation checks whether the number of cards in the candidate card identifier set meets the requirement of 3, whether there are duplicate selected cards, and whether the clicked card is in a selectable state. After validation, the status of the candidate cards that meet the requirements is updated to the selected state, for example, by marking these cards as selected. Simultaneously, the current position, angle, and other status information of each selected card are recorded, ultimately yielding the updated card status data.

[0030] Step 3.3: Based on the card state data and the initial interface state data, an animation instruction sequence for transitioning from the current interface state to the next state is obtained through multi-stage animation choreography. Specifically, this includes: acquiring the updated card state data and the initial interface state data; combining the requirements of the H5 lottery activity for transitioning from the fan-shaped browsing interface to the central aggregation interface; designing transition animations through multi-stage animation choreography logic; determining the animation stage sequence as: highlighting the selected card, the selected card moving towards the center, and the unselected card moving out; then designing corresponding animation parameters for each stage, such as the magnification ratio of the highlighted selected card, the movement path and speed towards the center, and the direction and transparency change rate of the unselected card moving out; and organizing these animation stage sequences, parameters, and corresponding execution objects into ordered instructions to obtain the animation instruction sequence for transitioning from the current fan-shaped interface state to the central aggregation interface state, thus obtaining the multi-stage animation choreography instruction sequence.

[0031] Step 3.4: Based on the animation instruction sequence, trigger the graphics rendering to execute multi-stage animation and obtain the animation execution status. Specifically, this includes: converting the obtained multi-stage animation arrangement instruction sequence into a format recognizable by the H5 page graphics rendering unit to obtain the corresponding animation execution instructions; sending these animation execution instructions to the H5 page graphics rendering unit through the system's internal instruction distribution channel; and after receiving the instructions, the graphics rendering unit executes the animation sequentially according to the stage order and parameters in the instruction sequence. For example, first enlarge the three selected cards according to a set ratio to highlight them, and then drive them to move towards the center of the screen along a preset path. At the same time, drive the 15 unselected cards to gradually move out of the display area according to a set direction. During the animation execution, monitor the execution feedback of the graphics rendering unit in real time to obtain information such as whether the animation has started normally, which stage it is currently executing, and the progress of each stage of the animation, thereby obtaining the animation execution status.

[0032] Step 3.5: Based on the animation execution status and the updated card status data, confirm the final user selection result. This includes continuously monitoring the animation execution status. When it is detected that the 3 selected cards have completed the aggregation action towards the center of the screen and are stably stationary in the center position, and the 15 unselected cards have completely moved out of the display area and are no longer displayed, it is confirmed that the animation execution has been completed and the expected interface transition effect has been achieved. At this time, combined with the updated card status data, it is checked again whether the cards currently in the selected state are the 3 cards that have passed the verification before. After ensuring that there are no card status abnormalities or animation execution deviations that cause card selection errors, the unique identifier, selection time, current aggregation position, and other information of these 3 selected cards are recorded in the user selection result storage module of the H5 lottery activity. Finally, the user's final selection result is confirmed and recorded.

[0033] In this embodiment of the invention, by receiving interactive event data based on the initial interface state and parsing it to obtain a set of candidate card identifiers, and combining the parsing results with the initial interface state data to verify the status of the candidate cards through a validity verification mechanism and update them to the selected state, a multi-stage animation instruction sequence for transitioning from the current interface state to the next state is arranged based on the card state data and the initial interface state data. The animation execution instruction is issued to trigger the graphics rendering to execute the multi-stage animation and obtain the animation execution status. Finally, the final user selection result is confirmed and recorded by combining the animation execution status with the updated card state data. This overcomes the technical problems in the traditional virtual card selection process, such as inaccurate parsing of interactive events leading to incorrect or missing candidate card identifiers, failure to verify the validity of candidate cards leading to invalid card selection, lack of systematic arrangement of animation instructions leading to chaotic connection with the next interface state, and failure to confirm the selection result by combining the animation execution status with the recording error. Thus, it achieves the effects of accurate parsing of candidate card identifiers, effective and compliant card selection operation, orderly connection between multi-stage animation and interface state transition, and accurate recording of user selection results. This ensures that the card selection process is logically rigorous, avoids affecting user operation due to parsing errors or lack of verification, and improves the smooth experience of users in the card selection process.

[0034] In a preferred embodiment of the present invention, step 4 above may include: Step 4.1: Based on the user's selection results, the virtual cards are divided into a selected card set and an unselected card set to obtain the card classification results. Specifically, in the H5 card lottery activity, the user's final selection results are retrieved first. The user's final selection results contain unique identifiers for 3 selected cards. Based on these 3 card identifiers, from the 18 virtual cards displayed in the activity, the 3 cards with these identifiers are grouped into the selected card set, and the remaining 15 cards without these identifiers are grouped into the unselected card set. Through this classification, the processing objects of the two types of cards are clearly distinguished, ensuring that animation operations are only performed on cards in the corresponding sets, avoiding confusion or misoperation, and ultimately obtaining clear card classification results.

[0035] Step 4.2: Based on the card classification results and initial interface state data, generate highlighting parameters for the selected card set and calculate the aggregation target position of the display area center. Simultaneously, generate animation path parameters for the unselected card set to gradually move out of the display area, resulting in an animation parameter set. Specifically, this includes: extracting initial interface state data, including the current fan-shaped distribution position, size, and display transparency of the 18 cards; combining this with the obtained card classification results; generating highlighting parameters for the selected 3 card sets: setting the card size magnification ratio, for example, magnifying it to 1.2 times the initial size; adding a highlight border style, such as a 2-pixel wide orange border, to make the selected cards more visually prominent; and calculating the center of the H5 display area. Aggregation target position: Based on the display area of ​​the H5 page, half the page width is taken as the horizontal coordinate and half the page height is taken as the vertical coordinate. This coordinate point is the aggregation target position of the selected card. For the set of 15 unselected cards, the animation path parameters for gradually moving out of the display area are obtained: According to the initial position of each card in the fan-shaped layout, the moving direction is set, such as the left card moving to the left, the right card moving to the right, the top card moving up, and the bottom card moving down, to avoid obscuring the selected card during the moving process. At the same time, the transparency change curve is set, gradually decreasing from the initial 1 to 0, and the size reduction ratio is gradually reduced from the initial size to 0.3 times. Finally, the animation parameter set for the selected and unselected cards is obtained.

[0036] Step 4.3: Based on the animation parameter set, obtain the synchronously executed aggregate animation sequence and move-out animation sequence through animation timing arrangement. Specifically, based on the obtained two types of card animation parameter sets, determine the total animation duration to be 1.5 seconds. This duration can ensure smooth animation transition without making the user wait too long. Ensure the synchronous execution of the two types of animations through animation timing arrangement. In terms of timing design, the first stage is from 0 to 0.3 seconds: the selected card begins to execute the highlighting animation, enlarges according to the set ratio and displays a highlighted border, while the unselected card begins to execute the transparency reduction animation, with the transparency decreasing from 1 to 0.7; the second stage is from 0.3 to 1.5 seconds: the selected card moves from the initial fan-shaped position to the central aggregation target position, maintaining the highlighting state during the movement; the unselected card continues to reduce its transparency from 0.7 to 0, while moving towards the edge of the display area according to the set path, and simultaneously executes the size reduction animation, reducing from the initial size to 0.3 times. Through this timing arrangement, the aggregation animation of the selected card and the movement animation of the unselected card advance in an orderly manner within the same time period, resulting in a synchronized and coordinated animation sequence, and finally obtaining a coordinated animation arrangement scheme.

[0037] Step 4.4 involves sending animation execution instructions to the aggregation animation sequence and the move-out animation sequence, driving the graphics rendering to synchronously execute the aggregation movement animation of the selected card and the gradual move-out animation of the unselected card. Specifically, this includes converting the obtained collaborative animation arrangement scheme into animation execution instructions that can be recognized by the H5 page graphics rendering unit, such as the browser's DOM rendering engine. The instructions include the animation stages, time nodes, and specific parameters such as movement path coordinates, transparency values, and size ratios for the two types of cards. These animation execution instructions are sent to the graphics rendering unit through the system's internal instruction transmission channel. After receiving the instructions, the rendering unit synchronously starts the aggregation movement animation of the selected card according to the timing arrangement requirements, first enlarging and highlighting it, then moving it towards the center, and the gradual move-out animation of the unselected card, decreasing transparency, shrinking size, and moving it towards the edge. During the animation execution, the position, style, and state of the cards are adjusted in real time to ensure that the two types of animations strictly follow the collaborative scheme and avoid a disconnect where one type of animation ends prematurely while the other is still executing.

[0038] Step 4.5: Based on the removal animation, confirm that the selected cards have completed aggregation in the center of the display area and that the unselected cards have completely moved out of the display area. Update the interface state to a single-card focused interface. This includes: during the animation execution, real-time monitoring of the removal status of the unselected cards: confirming whether the unselected cards have completely moved out by judging whether the transparency of each unselected card has dropped to 0, whether the size has shrunk to 0.3 times, and whether the position has exceeded the boundary of the H5 display area. At the same time, monitoring the aggregation status of the selected cards: determining whether all three selected cards have moved to the calculated center coordinates of the display area and are stable in position, with no change in coordinates for 50 consecutive milliseconds and normal highlighting effect. Once it is confirmed that the 15 unselected cards have been completely moved out of the display area and the 3 selected cards have been stably aggregated in the center of the display area, the system updates the interface status parameters and marks the interface as a single card focus interface. At this time, only the 3 selected cards aggregated in the center are retained in the interface, and the unselected cards are no longer displayed, completing the conversion from a multi-card browsing interface to a single card focus interface, and finally obtaining the single card focus interface.

[0039] In this embodiment of the invention, by employing a technique that distinguishes virtual cards into a set of selected cards and a set of unselected cards based on user selection results, and by combining card classification results with initial interface state data to generate highlighting parameters for the set of selected cards and calculate the aggregation target position at the center of the display area, and to generate animation path parameters for the set of unselected cards to gradually move out of the display area, and by arranging and executing synchronous aggregation and movement animation sequences based on the animation parameter sets of the two types of cards to form a collaborative animation arrangement, and by issuing animation execution instructions to drive graphics rendering to synchronously execute the two types of animations, and updating the interface to a single-card focused interface after confirmation, this invention overcomes the problems of traditional virtual card systems, such as undifferentiated animation processing for selected and unselected cards, asynchronous animations leading to interface chaos, abrupt transitions between aggregation and movement lacking coherence, and untimely interface state updates. It achieves visual prominence and orderly aggregation of selected cards to the center, gradual movement of unselected cards without interference, and smooth synchronous connection between the two types of animations, quickly completing the interface transition from multi-card browsing to single-card focused viewing, allowing users to clearly focus on the selected target, and improving the interface interaction coherence and visual experience.

[0040] In a preferred embodiment of the present invention, step 5 above may include: Step 5.1: Based on the single-card focus interface, parse the card set in the aggregation state to obtain the card set data to be separated. Specifically, in the single-card focus interface of the H5 card lottery activity, only 3 selected cards aggregated in the center of the display area are currently displayed. First, obtain the state data of the interface, including the display identifier of the aggregated cards, the current superposition position coordinates, size and display level, etc. Based on this information, the system parses out the card set in the aggregation state, that is, the 3 virtual cards previously selected by the user. Further extract the unique identifier of each card, the precise coordinates of the current aggregation position, and the current size parameters. Organize these data into structured card set data to be separated to ensure that the subsequent separation operation can accurately locate each card that needs to be processed.

[0041] Step 5.2: Based on the set of cards to be separated, call the predefined tiled layout template to assign target position coordinates in the display area to each card. Specifically, this includes: first, calling the predefined tiled layout template from the H5 card lottery activity. This template is designed for mobile screen sizes and adopts a horizontal three-position distribution structure (left, center, and right), with equal spacing between adjacent positions. Based on the obtained set of cards to be separated, assign target position coordinates to each card according to the template's position rules: using the width and height of the H5 display area as a reference, the left position coordinate is taken as one-quarter of the display area's width as the horizontal coordinate and half of the height as the vertical coordinate; the middle position coordinate is taken as half of the display area's width as the horizontal coordinate and half of the height as the vertical coordinate; the right position coordinate is taken as three-quarters of the display area's width as the horizontal coordinate and half of the height as the vertical coordinate. Associate the unique identifier of each card with the corresponding target position coordinates to finally obtain the card tiled position allocation result.

[0042] Step 5.3: Based on the target location coordinates and the set of cards to be separated, generate animation path parameters and timing sequences for the cards to move from the aggregation center to their respective target locations through separation animation. This yields the card separation animation control parameters. Specifically, this includes: combining the obtained card tile placement results with the obtained set of cards to be separated, calculating the animation path parameters for each card from the aggregation center to its respective target location: generating a straight-line movement path with the aggregation center coordinates as the starting point and the target location coordinates as the ending point, setting the movement speed parameters, and adding easing effects. In terms of timing sequence design, the separation animations of the three cards are set to start synchronously, that is, they start moving towards their respective target locations along their respective paths from the same time point, without any delay, ensuring overall animation coordination and uniformity. Integrate the path parameters, speed parameters, easing parameters, and timing information of each card to obtain the card separation animation control parameters.

[0043] Step 5.4: Based on the card separation animation control parameters, control the graphics rendering unit to execute the card separation and movement animation from the aggregated state to the tiled state to complete the card separation process. Specifically, this includes: converting the obtained card separation animation control parameters into animation execution instructions that the H5 page graphics rendering unit can recognize. The instructions specify the starting and ending points of each card's movement path, movement duration, speed change pattern, and timing start requirements. Through the internal instruction transmission channel, these animation execution instructions are sent to the graphics rendering unit. After receiving the instructions, the rendering unit synchronously starts the separation and movement animation of the three cards according to the requirements of the control parameters: each card starts from the aggregated position in the center of the display area, moves along a preset straight path, and moves to its respective target position at a speed with easing effect. During the movement, the card's coordinate position is adjusted in real time to ensure that the movement trajectory is consistent with the preset path, and the animation progress of the three cards remains synchronized, finally completing the separation process from the aggregated state to the tiled state.

[0044] Step 5.5: After the card separation process is completed, confirm that all cards are stably in their predefined target positions. Specifically, this includes: after the separation and movement animation of the three cards is completed, the system detects the current position of each card: obtains the real-time coordinates of each card and compares them with the assigned predefined target position coordinates to determine whether the coordinate deviation is within the allowable range. At the same time, it monitors the position stability of each card to confirm that the card's coordinates do not change within 50 milliseconds to avoid slight shaking after the animation ends. When it is confirmed that the current positions of the three cards accurately match the predefined target positions and the positions are stable without deviation, the card separation process is determined to be completely completed, ensuring that the card flipping animation can be executed in the accurate position, laying a stable interface foundation for the process.

[0045] In this embodiment of the invention, the card set in the aggregated state is parsed based on a single card focusing interface to obtain the card set data to be separated. A predefined tiling layout template is called to assign target position coordinates within the display area to each card. The card tiling position allocation result and the card set data to be separated are combined to generate separation animation path parameters and timing sequence from the aggregation center to their respective target positions. The graphics rendering unit is controlled to execute the separation movement animation of the cards from aggregation to tiling. After the animation is completed, it is confirmed that all cards are stably in the predefined target positions. This overcomes the problems of disordered position allocation and lack of unified layout standards when separating aggregated cards in traditional virtual card systems, which leads to a cluttered interface. The lack of synchronous timing design in the separation animation causes stiff and discontinuous movement. Furthermore, the failure to verify the final position state of the cards can easily affect the operation. This invention achieves orderly separation of aggregated cards according to a regular layout, clear target positions of each card that conform to visual logic, smooth and synchronous separation animation without gaps, and ensures that the cards are stably stationary in the target positions. This lays a precise positional foundation for the card flipping animation and improves the user's visual comfort and operational anticipation.

[0046] In a preferred embodiment of the present invention, step 6 above may include: Step 6.1: Obtain the set of all cards in a tiled state through the card tiling interface. Specifically, in the card tiling interface of the H5 card lottery activity, the interface currently displays 3 selected cards tiled in left-center-right order. First, obtain the set of all cards in a tiled state within the interface, extract the unique identifier of each card, and then retrieve the prize configuration data of the H5 lottery activity to clarify the content to be revealed for each tiled card, as well as the audio or visual media resources that match these prize contents. Correspond one-to-one with the unique identifier of each card and the corresponding prize content to be revealed, the associated audio resources, and the associated visual media resources to obtain a structured mapping relationship of the content to be revealed for the cards, ensuring that the flip animation can be accurately associated with the corresponding display content and media resources.

[0047] Step 6.2: Based on the card set, obtain 3D flip animation parameters with specific timing for each card using 3D animation. Specifically, this includes: generating 3D flip animation parameters for each tiled card based on the obtained mapping relationship of the card content to be revealed; setting the flip axis as the Y-axis, the flip angle range as 0 to 180 degrees, and the total flip duration as 1 second; adding perspective effect parameters; associating the 3D flip animation parameters with the media resources corresponding to each card; for example, if a card corresponds to a 5 yuan coupon prize, its flip animation parameters need to be bound to the 5 yuan coupon winning notification audio and coupon image resources, and the predetermined angle for media triggering is set to 90 degrees. Finally, integrate the 3D flip animation parameters of each card with the associated media resource information to obtain card flip animation and media association data.

[0048] Step 6.3: Based on the 3D flip animation parameters, obtain the instruction sequence for flipping the cards one by one according to the preset reveal sequence. Specifically, referring to the user experience design specifications of H5 lottery activities, the preset card reveal sequence is to flip the cards one by one from left to right, and the time interval between the flipping start of two adjacent cards is 0.5 seconds. Based on the obtained card flip animation and media association data, generate corresponding flip execution instructions for each card according to the preset left-to-right sequence. The instructions include the 3D flip animation parameters of the card, media resource trigger conditions, and start time nodes. Arrange these instructions in the order of start time to obtain an ordered sequence of card flipping instructions, which is the timing synchronization control instruction, to ensure that the timing of the flip animation and media playback is accurately matched.

[0049] Step 6.4: Based on the instruction sequence, control the graphics rendering unit to execute the 3D flip animation of each card sequentially, and trigger the corresponding audio or visual media playback unit when each card flips to a predetermined angle to complete the card flip animation and media playback. Specifically, this includes: converting the obtained timing synchronization control instructions into an execution format recognizable by the H5 page graphics rendering unit, and sending them to the rendering unit through the system's internal instruction transmission channel. After receiving the instructions, the rendering unit executes the flip animation sequentially according to the timing requirements: at 0 seconds, start the 3D flip animation of the left card, controlling the card to slowly flip from 0 degrees to 180 degrees along the Y-axis. When the card is flipped 90 degrees, the corresponding winning notification audio is played, and a 5 yuan coupon image is displayed on the back of the card. At 0.5 seconds, the 3D flip animation of the middle card is started, repeating the above flip and media triggering process, displaying the prize content and associated media corresponding to the card. At 1 second, the 3D flip animation of the right card is started, completing the flip and media playback of the last card. Throughout the process, the rendering unit adjusts the 3D perspective effect and angle change of the cards in real time to ensure that the flip animation is smooth and natural, while ensuring that the audio playback, visual media display and flip animation are precisely synchronized, until the flip animation and media playback of all cards are completed.

[0050] In this embodiment of the invention, a set of all tiled cards is obtained based on the card tiling interface to obtain the mapping relationship of the card content to be revealed. Based on this mapping relationship, 3D flip animation parameters with a specific timing are generated for each card using 3D animation, and card flip animation and media association data are obtained. A sequence of instructions for flipping the cards one by one is generated according to a preset reveal timing sequence to obtain timing synchronization control instructions. Based on the flip instructions, the graphics rendering unit is controlled to execute the 3D flip animation of each card in sequence, and when a card is flipped to a predetermined angle, the corresponding audio or visual media playback is triggered. After all flip animations and media playback are completed, the content reveal stage is confirmed to be over, and the interface state is updated to content. The technical means used to display the completed interface overcomes the shortcomings of traditional virtual card systems, such as the lack of three-dimensionality in the 2D flipping animation, the asynchrony between card flipping and audio / video media playback, the chaotic and irregular flipping sequence of multiple cards, and the lack of clear confirmation at the end of the content reveal stage, which can easily lead to errors in subsequent operations. It achieves realistic and immersive card flipping animation, precise matching and synchronization between the flipping animation and audio / video media, clear and easy-to-follow logic for the sequential flipping of multiple cards, a closed-loop content reveal process, and accurate interface status updates. This improves the user's sensory experience and operational continuity during the card content browsing process, and provides a stable interface foundation for functions such as lottery result interpretation and card detail viewing.

[0051] In a preferred embodiment of the present invention, step 6 above may include: Step 6.21: Based on the card content to be revealed in the card tile interface state data, calculate the 3D flip trajectory parameters for each card using 3D animation parameters. Specifically, this includes: In the card tile interface of the H5 card lottery activity, first obtain the interface state data, which contains the mapping relationship of the card content to be revealed. The mapping relationship records the unique identifier of each of the three tiled cards and the corresponding content to be revealed. For example, the left card corresponds to a 5 yuan coupon, the right card corresponds to "thank you for participating," and the middle card corresponds to a 10 yuan coupon. Based on these mapping relationships, calculate the 3D flip trajectory parameters for each card: First, determine the flip axis as the Y-axis, and then... The system simulates the action of flipping a card horizontally in real life. Next, it sets the flip angle range, starting from 0 degrees (the front of the card facing the user) and gradually flipping to 180 degrees (the back of the card revealing the content). The total flipping time is then set to 1 second to ensure the user can clearly observe the entire flipping process. Simultaneously, perspective effect parameters are added, setting the perspective distance to 800 pixels to create a more realistic three-dimensional visual effect. Finally, the flipping speed curve is set, using a gradual curve that starts slow, then speeds up, and then slows down again to avoid abrupt flipping. Through this combination of parameters, a unique three-dimensional flipping trajectory is generated for each card.

[0052] Step 6.22: Bind the 3D flip trajectory parameters to the corresponding media resource identifiers to obtain card animation media binding data. Specifically, this includes: first, retrieving the media resources corresponding to the content to be revealed for each card from the resource library of the H5 card lottery activity, and obtaining the identifiers of these media resources. For example, the media resource identifiers corresponding to the 5 yuan coupon include the resource number of the winning notification audio and the storage path of the coupon image; the media resource identifiers corresponding to the "thank you for participating" include the resource number of the "not winning" notification audio and the storage path of the encouragement icon; and the media resource identifiers corresponding to the 10 yuan coupon include the resource number of the "large prize" notification audio and the storage path of the 10 yuan coupon image. Then, associate and bind the calculated 3D flip trajectory parameters of each card with the corresponding media resource identifiers one by one. For example, bind the trajectory parameters of the left card that flips from 0 degrees to 180 degrees on the Y-axis for 1 second to the winning notification audio number and coupon image path of the 5 yuan coupon. Repeat this process to complete the binding operation for the other two cards, ultimately forming card animation media binding data containing the association between the flip trajectory of each card and the corresponding media identifier.

[0053] Step 6.23: Based on the card animation media binding data, configure the synchronization timeline between the flip animation keyframes and the media playback trigger points to obtain the final timing synchronization animation parameters. Specifically, based on the card animation media binding data obtained in Step 6.22, first configure keyframes for the 3D flip animation of each card: set 0 seconds as the initial keyframe, at which point the card is at 0 degrees facing the user; set 0.5 seconds as the intermediate keyframe, at which point the card flips to 90 degrees and is perpendicular to the screen; set 1 second as the end keyframe, at which point the card flips to 180 degrees and displays the content to be revealed on the back. Determine the media playback trigger point and set the playback trigger timing of the media resource corresponding to each card to be set when flipping to the back. The 90-degree mid-key frame is crucial because it marks the visual transition of the card from front to back. Triggering media playback at this point enhances the user's sensory engagement. Using time as the axis, the keyframes of each card's flipping animation are integrated with the corresponding media playback trigger points onto the same timeline. For example, the left card starts flipping at 0 seconds, reaches 90 degrees at 0.5 seconds, triggers the playback of the 5 yuan coupon winning audio, loads the coupon image, and completes a 180-degree flip in 1 second. The middle and right cards are also configured into the timeline using the same keyframe and trigger point logic, ensuring that the keyframes of each card's flipping animation precisely correspond to the media playback trigger points. Ultimately, this yields the final timing synchronization control parameters that control the synchronization of the flipping animation and media playback.

[0054] In this embodiment of the invention, by employing a mapping relationship of the card content to be revealed based on the card tile interface state data, three-dimensional flip trajectory parameters are calculated for each card using three-dimensional animation parameters. These parameters are then bound to the corresponding media resource identifiers. Finally, a synchronized timeline is configured between the flip animation keyframes and the media playback trigger points based on the card animation media binding data. This overcomes the shortcomings of traditional virtual card three-dimensional flip animations, which suffer from inconsistent flip paths and stiff animations due to a lack of precise calculation of the flip trajectory, loose binding of three-dimensional flip parameters to media resources leading to mismatches, and the absence of a synchronized timeline causing asynchrony between the flip animation and media playback. This invention achieves a unified and smooth three-dimensional flip trajectory for each card, meeting content display requirements, precise correspondence between three-dimensional flip parameters and media resources without mismatches, and strict synchronization between the flip animation keyframes and the media playback trigger points. This enhances the user's stereoscopic visual experience and immersive audio-visual synchronization during the card content reveal process, laying a precise parameter foundation for the sequential execution of the flip animation.

[0055] like Figure 2 As shown, embodiments of the present invention also provide a virtual card selection system with multi-stage animation choreography, including: The management module is used to provide multiple virtual cards that are initially stacked. The animation module unfolds the stacked virtual cards with animation. By assigning a target angle to each virtual card and controlling the virtual cards to rotate from the stacked state to the target angle, a symmetrical fan-shaped layout initial interface is obtained. Based on the card selection operation on the initial interface, a multi-stage animation arrangement is triggered to obtain the selection result. The selection result is processed to highlight the selected card from its original position in the fan-shaped layout and move it to the center of the display area. At the same time, the unselected card is moved out of the display area from its original position in the fan-shaped layout with a gradual animation, completing the transformation from a multi-card browsing interface to a single-card focused interface, resulting in a single-card focused interface. The layout module is used to separate cards in an aggregated state based on a single card focus interface and tile them to multiple predefined positions in the display area; The reveal module is used to perform a 3D flip animation on the cards after they are laid out to reveal the content; during the flipping process of each card, audio or visual media corresponding to the revealed content is played synchronously.

[0056] The above description represents the preferred embodiments of the present invention. It should be noted that those skilled in the art can make various improvements and modifications without departing from the principles of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.

Claims

1. A method for selecting virtual cards in multi-stage animation choreography, characterized in that, The method includes: Provides multiple virtual cards that are initially stacked; The stacked virtual cards are unfolded in an animated manner. By assigning a target angle to each virtual card and controlling the virtual cards to rotate from the stacked state to the target angle, a symmetrical fan-shaped layout initial interface is obtained. Based on the card selection operation on the initial interface, a multi-stage animation is triggered to obtain the selection result; The selection results are processed, highlighting the selected cards from their original positions in the fan-shaped layout and moving them to the center of the display area; simultaneously, the unselected cards are gradually moved out of the display area from their original positions in the fan-shaped layout using a gradual animation, completing the transition from a multi-card browsing interface to a single-card focused interface, resulting in a single-card focused interface, including: Based on the user's selection, the virtual cards are divided into a set of selected cards and a set of unselected cards, resulting in a card classification result; Based on the card classification results and the initial interface state data, highlighting parameters are generated for the selected card set and the aggregation target position at the center of the display area is calculated. At the same time, animation path parameters for the unselected card set to gradually move out of the display area are generated to obtain the animation parameter set. Based on the animation parameter set, the synchronously executed aggregate animation sequence and move-out animation sequence are obtained through animation timing arrangement; Send animation execution commands to the aggregation animation sequence and the move-out animation sequence to drive the graphics rendering to execute the aggregation movement animation of the selected card and the gradual move-out animation of the unselected card simultaneously; Based on the removal animation, it is confirmed that the selected card has been aggregated in the center of the display area and the unselected card has been completely removed from the display area. The interface state is then updated to a single card focus interface, thus obtaining the single card focus interface. Based on the single-card focus interface, cards in a clustered state are separated and tiled into multiple predefined positions in the display area, including: Based on the single card focus interface, the card set in the aggregated state is parsed to obtain the card set data to be separated; Based on the set of cards to be separated, a predefined tiled layout template is called to assign target position coordinates in the display area to each card; Based on the target location coordinates and the set of cards to be separated, the animation path parameters and timing sequence of the cards moving from the aggregation center to their respective target locations are generated through the separation animation to obtain the card separation animation control parameters. Based on the card separation animation control parameters, the graphics rendering unit is controlled to execute the card separation and movement animation from the aggregated state to the tiled state to complete the card separation process; After the card separation process is completed, confirm that all cards are stably in their predefined target positions; After the cards are laid out flat, a 3D flip animation is performed on the flat cards to reveal the content; during the flipping of each card, audio or visual media corresponding to the revealed content is played synchronously.

2. The virtual card selection method for multi-stage animation choreography according to claim 1, characterized in that, The stacked virtual cards are animatedly unfolded by assigning a target angle to each virtual card and controlling the cards to rotate from their stacked state to the target angle, resulting in a symmetrical fan-shaped layout initial interface, including: Based on the predefined total angle range and the number of virtual cards, the angle step size used to control the card distribution density is calculated; Based on the angle step size, assign a symmetrical target angle to each virtual card relative to the center line of the fan-shaped layout; Based on the target perspective, a hierarchical control mechanism is used to assign a display level to each card, resulting in the display level allocation. Based on the allocation results of the symmetrical target angle and display level, the initial interface of the symmetrical fan-shaped layout is obtained by controlling all virtual cards to synchronously execute rotation animation from the stacked state.

3. The virtual card selection method for multi-stage animation choreography according to claim 2, characterized in that, Based on the card selection operation on the initial interface, a multi-stage animation is triggered to obtain the selection result, including: Based on the initial interface state, receive interactive event data and parse it to obtain a set of candidate card identifiers; Based on the card identifier set, the candidate cards are validated through a validity verification mechanism, and the card status is updated to the selected status to obtain the updated card status data. Based on card state data and initial interface state data, an animation instruction sequence for transitioning from the current interface state to the next state is obtained through multi-stage animation choreography. Based on the animation instruction sequence, the graphics rendering is triggered to execute multi-stage animations, and the animation execution status is obtained; Based on the animation execution status and the updated card status data, the final user selection result is confirmed.

4. The virtual card selection method for multi-stage animation choreography according to claim 3, characterized in that, After the cards are laid out, a 3D flip animation is performed on the laid-out cards to reveal their contents; During the flipping of each card, audio or visual media corresponding to the revealed content is played simultaneously, including: The card tile interface allows you to obtain a collection of all cards that are currently tiled. Based on the card set, 3D animation parameters with specific timing are obtained for each card through 3D animation; Based on the 3D flipping animation parameters, the instruction sequence for flipping the cards one by one is obtained according to the preset reveal sequence; Based on the instruction sequence, the graphics rendering unit is controlled to execute the 3D flip animation of each card in sequence, and the corresponding audio or visual media playback unit is triggered when each card is flipped to a predetermined angle, so as to complete the card flip animation and media playback.

5. The virtual card selection method for multi-stage animation choreography according to claim 4, characterized in that, Based on the card set, 3D animation parameters with specific timing are obtained for each card using 3D animation, including: Based on the card content to be revealed in the card tiled interface state data, the 3D flip trajectory parameters are calculated for each card using 3D animation parameters; The 3D flip trajectory parameters are bound to the corresponding media resource identifiers to obtain the card animation media binding data; Based on the card animation media binding data, the synchronization timeline of the flip animation keyframes and media playback trigger points is configured to obtain the final time-synchronized animation parameters.

6. A virtual card selection system with multi-stage animation choreography, wherein the system implements the method as described in any one of claims 1 to 5, characterized in that, include: The management module is used to provide multiple virtual cards that are initially stacked. The animation module is used to unfold stacked virtual cards in an animated manner. By assigning a target angle to each virtual card and controlling the virtual cards to rotate from the stacked state to the target angle, a symmetrical fan-shaped layout initial interface is obtained. Based on the card selection operation on the initial interface, a multi-stage animation is triggered to obtain the selection result; The selection results are processed, the selected cards are highlighted from their original positions in the fan-shaped layout and moved to the center of the display area; at the same time, the unselected cards are moved out of the display area from their original positions in the fan-shaped layout with a gradual animation, completing the transformation from a multi-card browsing interface to a single-card focusing interface, thus obtaining a single-card focusing interface. The layout module is used to separate cards in an aggregated state based on a single card focus interface and tile them to multiple predefined positions in the display area; The reveal module is used to perform a 3D flip animation on the cards after they are laid out to reveal the content; during the flipping process of each card, audio or visual media corresponding to the revealed content is played synchronously.

7. A computing device, characterized in that, include: One or more processors; A storage device for storing one or more programs, which, when executed by one or more processors, cause the one or more processors to implement the method as described in any one of claims 1 to 5.

8. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a program that, when executed by a processor, implements the method as described in any one of claims 1 to 5.

Images