Animation switching method and device based on particle model, equipment and storage medium

Abstract

The invention relates to the technical field of Internet, and discloses an animation switching method and device based on a particle model, equipment and a storage medium, and the method comprises the steps: obtaining a first position array of a first particle model in a current particle system; determining a next to-be-switched second particle model according to the first position array, and obtaining a second position array of the second particle model; calculating a target position array of the target particle model according to the first position array and the second position array; and taking the first position array as an initial state, taking the target position array as an end state, and smoothly updating the position state of each particle in the particle system by using an animation transition library based on the initial state and the end state, so that the first particle model is switched to the target particle model. The problem that model switching is stiff and unnatural in an existing three-dimensional graph rendering technology is solved.

Description

Technical Field

[0001] The present invention relates to the field of Internet technology, and in particular to an animation switching method, device, equipment and storage medium based on a particle model. Background Art

[0002] With the development of Internet technology, the WebGL specification has promoted the widespread application of 3D graphics in web pages. As a lightweight 3D graphics library based on WebGL, the Three.js library plays an important role in web page development. As an important form of expression of Three.js, the particle system not only simulates natural phenomena, but is also used to present the appearance of 3D models and switch between models, which puts higher requirements on the flexibility and dynamics of the particle system.

[0003] However, in existing 3D graphics rendering technologies, model switching usually adopts the method of direct replacement or gradual change of transparency, but these traditional methods often result in a stiff and unnatural switching process, poor visual effects, and fail to fully utilize the dynamics and flexibility of the particle system, lacking sufficient visual impact and expressiveness. Summary of the invention

[0004] In view of this, the embodiments of the present invention provide a particle model-based animation switching method, device, equipment and storage medium to solve the problem of abrupt and unnatural model switching in existing three-dimensional graphics rendering technology.

[0005] In a first aspect, an embodiment of the present invention provides an animation switching method based on a particle model, the method comprising:

[0006] Get the first position array of the first particle model in the current particle system;

[0007] Determine a next second particle model to be switched according to the first position array, and obtain a second position array of the second particle model;

[0008] Calculate a target position array of a target particle model according to the first position array and the second position array;

[0009] The first position array is used as a starting state, the target position array is used as an ending state, and based on the starting state and the ending state, the position state of each particle in the particle system is smoothly updated using an animation transition library, so that the first particle model is switched to the target particle model.

[0010] Furthermore, before obtaining the first position array of the first particle model in the current particle system, the method further includes:

[0011] Get the trigger mode of the particle system;

[0012] If the trigger mode is the timing mode, a preset timing time is obtained, and it is detected whether the current time reaches the timing time. If the timing time is reached, a corresponding first trigger instruction is generated, and the animation switching process is started based on the trigger instruction;

[0013] Or, if the trigger mode is the operation mode, a specific operation performed by the user on the particle system is detected, and a corresponding second trigger instruction is generated according to the specific operation, and the animation switching process is started based on the second trigger instruction.

[0014] Furthermore, before obtaining the first position array of the first particle model in the current particle system, the method further includes:

[0015] Load multiple preset particle models;

[0016] Extracting the vertex position of each of the preset particle models, and constructing a position array of the preset particle model using the vertex position;

[0017] A plurality of particles are randomly generated in the particle system using an ellipsoidal formula to obtain an initial state of a particle model on the particle system.

[0018] Furthermore, the step of randomly generating a plurality of particles in the particle system using an ellipsoid formula includes:

[0019] Acquire a maximum radius on a predefined ellipsoid direction axis, wherein the maximum radius includes: a first radius in a horizontal axis direction, a second radius in a vertical axis direction, and a third radius in a vertical axis direction;

[0020] randomly generating a longitudinal coordinate of the first particle according to the second radius, and calculating a vertical axis maximum value based on the longitudinal coordinate and the third radius;

[0021] randomly generating a vertical axis coordinate of the first particle according to the vertical axis maximum value, and calculating a horizontal axis maximum value based on the vertical axis coordinate and the first radius;

[0022] Randomly generate the horizontal axis coordinate of the first particle according to the horizontal axis maximum value;

[0023] The first particle is created in the particle system based on the horizontal axis coordinate, the vertical axis coordinate and the vertical axis coordinate, and a plurality of particles are repeatedly generated until a preset number of particles is reached, thereby obtaining an initial state of a particle model on the particle system.

[0024] Further, calculating a target position array of a target particle model according to the first position array and the second position array includes:

[0025] Obtaining a first array length of the first position array and a second array length of the second position array;

[0026] Comparing the first array length with the second array length;

[0027] If the length of the first array is equal to the length of the second array, assigning the second position array to the target position array;

[0028] If the length of the first array is less than the length of the second array, the second position array is intercepted according to the length of the first array to obtain a first intercepted array, and the first intercepted array is assigned to the target position array;

[0029] If the length of the first array is greater than the length of the second array, the second position array is assigned to the target position array based on a loop mechanism.

[0030] Furthermore, assigning the second position array to the target position array based on a loop mechanism includes:

[0031] Calculate the difference between the first array length and the second array length;

[0032] Calculate the modulus value and remainder value of the difference value and the second array length, and use the modulus value as the number of loops and the remainder value as the interception length;

[0033] In each cycle within the number of cycles, copying the second position array to the target position array;

[0034] After the loop ends, the second position array is intercepted according to the interception length to obtain a second intercepted array, and the second intercepted array is assigned to the target position array.

[0035] Furthermore, based on the starting state and the ending state, the position state of each particle in the particle system is smoothly updated by using an animation transition library, including:

[0036] Input the starting state and the ending state into an animation transition library;

[0037] Calling the callback function in the animation transition library, during the animation execution, generating a position array corresponding to the particle position state at different time points according to the starting state and the ending state;

[0038] The position array at the current time point is cyclically assigned to the current position array of the particle system to smoothly update the position state of each particle in the particle system.

[0039] In a second aspect, an embodiment of the present invention provides an animation switching device based on a particle model, the device comprising:

[0040] An acquisition module is used to obtain the first position array of the first particle model in the current particle system;

[0041] a determination module, configured to determine a second particle model to be switched next according to the first position array, and obtain a second position array of the second particle model;

[0042] A calculation module, used for calculating a target position array of a target particle model according to the first position array and the second position array;

[0043] An updating module is used to use the first position array as a starting state and the target position array as an ending state, and based on the starting state and the ending state, use an animation transition library to smoothly update the position state of each particle in the particle system so that the first particle model switches to the target particle model.

[0044] In a third aspect, an embodiment of the present invention provides a computer device, comprising: a memory and a processor, the memory and the processor being communicatively connected to each other, the memory storing computer instructions, and the processor executing the method of the first aspect or any corresponding embodiment thereof by executing the computer instructions.

[0045] In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium having computer instructions stored thereon, the computer instructions being used to enable a computer to execute the method of the first aspect or any corresponding embodiment thereof.

[0046] The method provided in the embodiment of the present application has the following beneficial effects:

[0047] The method provided in the embodiment of the present application obtains the current particle model position array, determines the next particle model and calculates the target position array, and then uses the animation transition library to update the particle position state, thereby solving the problem of abrupt and unnatural model switching in the prior art and achieving a natural and smooth animation switching effect.

[0048] The method provided in the embodiment of the present application clarifies the maximum radius of the ellipsoid direction axis, ensures that the random generation range of particles is clear, and makes the particle distribution coordinated and beautiful. Calculate the particle coordinates in sequence to make the position of the particles in three-dimensional space both random and reasonable. Repeat the generation of particles to a preset number to solve the problem of insufficient number of particles and enrich the animation effect. By obtaining and comparing the lengths of two position arrays, a basis is provided for the calculation of the target position array when switching particle models of different scales. Calculate the difference, modulus value and remainder value to provide accurate parameters for cyclic copy and interception operations. Input the start and end states into the animation transition library to provide a clear starting point and end point to generate animations. Call the callback function to generate position arrays at different time points, so that the animation switching is delicate and natural, and the visual effect is enhanced. The position array at the current time point is cyclically assigned to solve the problem of non-real-time and non-smooth update of the particle system position state, and improve the animation quality.

[0049] In the timing mode, the method provided by the embodiment of the present application obtains the timing time and detects the current time, and generates a trigger instruction when the timing time is reached, which solves the need for automatic display animation switching and realizes the automatic execution of the switching process. In the operation mode, the trigger instruction is generated by detecting the user's specific operation, which solves the problem of insufficient interactivity between the user and the particle system and enhances the user's sense of participation.

[0050] The method provided in the embodiment of the present application preloads multiple particle models, solves the problem of single animation switching resources, provides rich model selection for animation switching, and increases animation diversity. Extracts the vertex positions of the preset particle model to construct a position array, providing an accurate position data basis for subsequent animation switching calculations. The ellipsoid formula is used to randomly generate particles, which solves the problem of unnatural and lack of dynamics in the initial state of the particle system, and creates an initial state with natural distribution and dynamic effects. BRIEF DESCRIPTION OF THE DRAWINGS

[0051] In order to more clearly illustrate the specific implementation methods of the present invention or the technical solutions in the prior art, the drawings required for use in the specific implementation methods or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some implementation methods of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0052] Figure 1 is a flowchart of an animation switching method based on a particle model according to some embodiments of the present invention;

[0053] Figure 2 is a flow chart of another animation switching method based on a particle model according to some embodiments of the present invention;

[0054] Figure 3 is a structural block diagram of an animation switching device based on a particle model according to an embodiment of the present invention;

[0055] Figure 4 It is a schematic diagram of the hardware structure of a computer device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0056] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present invention.

[0057] According to an embodiment of the present invention, a particle model-based animation switching method, apparatus, device and storage medium are provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0058] In this embodiment, a particle model-based animation switching method is provided. Figure 1 is a flow chart of an animation switching method based on a particle model according to an embodiment of the present invention. Figure 1 As shown, the process includes the following steps:

[0059] Step S11, obtaining the first position array of the first particle model in the current particle system.

[0060] In an embodiment of the present application, a particle system is created using Three.js to simulate complex natural phenomena or dynamic visual effects, and seamless switching between different three-dimensional models is achieved by controlling the coordinate transformation of particle vertices. The particle state can generate random points by the ellipsoid formula to distribute them within the ellipsoid, a trigger can be set to trigger the model switching animation, and the camera position can be updated using the tween.js library to allow it to rotate around the model for user observation. The first particle model is a specific model in the current particle system that serves as the starting state of the switching animation, and its position information is represented by the first position array. The next second particle model to be switched is determined based on the array and subsequent operations are performed. The first position array is an array composed of the position information of each particle of the first particle model in the current particle system, which provides a starting data basis for model switching calculations and animation transitions, and can be compared with the length of the second particle model position array to determine the calculation method of the target particle model position array.

[0061] In the embodiment of the present application, before step S11, the following steps A1-A3 are included:

[0062] Step A1, obtaining the trigger mode of the particle system.

[0063] Specifically, the particle system can have different trigger modes to start the animation switching process, where the trigger modes include: timing mode and operation mode. If the trigger mode is timing mode, the animation switching starts when the timing time is reached; if it is operation mode, the switching starts when the user's specific operation is detected. You can choose the appropriate trigger mode to achieve the particle model switching animation effect according to different scene requirements.

[0064] Step A2, if the trigger mode is the timing mode, obtain the preset timing time, detect whether the current time reaches the timing time, if it reaches the timing time, generate the corresponding first trigger instruction, and start executing the animation switching process based on the trigger instruction.

[0065] Specifically, if the trigger mode is the timing mode, first obtain the preset timing time, and then continuously detect whether the current time has reached the timing time. Once the current time reaches the timing time, the corresponding first trigger instruction will be generated, and the animation switching process will be started based on this trigger instruction. In this way, the particle model switching animation can be automatically triggered by setting the time without manual operation by the user, which is suitable for some scenes that need to display different model switching effects at a fixed time.

[0066] Step A3, if the trigger mode is the operation mode, detect the specific operation of the user on the particle system, generate a corresponding second trigger instruction according to the specific operation, and start executing the animation switching process based on the second trigger instruction.

[0067] Specifically, if the trigger mode is the operation mode, the specific operation of the user on the particle system will be detected. When the specific operation is detected, the corresponding second trigger instruction is generated according to the specific operation, and then the animation switching process is started based on the second trigger instruction. The particle model switching animation is triggered according to the user's interactive behavior to meet the user's desire to see different model switching effects under specific operations. For example, the user can trigger the animation switching by scrolling the mouse wheel, clicking a specific button, and other operations, providing the user with a more personalized interactive experience.

[0068] In the embodiment of the present application, before step S11, the following steps B1-B3 are also included:

[0069] Step B1, loading multiple preset particle models.

[0070] Specifically, the preset particle model can be a pre-designed three-dimensional model file, which is stored in a specific location and waits to be called. By loading multiple models, a rich selection can be provided for subsequent model switching. In actual operation, it involves loading model files from local storage or remote servers and parsing them into a format that can be recognized by the Three.js library (animation transition library). At the same time, the loaded models need to be managed and stored so that they can be quickly accessed and used in subsequent steps.

[0071] Step B2, extracting the vertex position of each preset particle model, and constructing a position array of the preset particle model using the vertex position.

[0072] Specifically, first, the vertex position of each preset particle model is extracted to obtain the key geometric information of the model. The vertex position determines the shape and structure of the model. By extracting this position information, the model can be better understood and processed. Specifically, the relevant functions or methods provided by the animation transition library can be used to obtain the vertex data of the model. Then, these vertex positions are used to construct the position array of the preset particle model. The position array can store the specific coordinates of each particle in three-dimensional space. By constructing the position array, the geometric information of the particle model can be expressed in a form that is easy to process and operate. In this way, in the subsequent animation switching process, the new position of the particle can be calculated based on this position array to achieve a smooth model switching effect.

[0073] As an example, the geometry.attributes.position property of Three.js can be used to obtain the vertex data of the model. This property returns a buffer object containing vertex position information. The coordinate value of each vertex can be extracted by traversing this buffer object to obtain the vertex position of the preset particle model. Or use the Object3D.getWorldPosition() method of Three.js to obtain the position of the object in the world coordinate system. By calling this method on the object where each vertex in the model is located, the position information of the vertex can be indirectly obtained. Or use the Raycaster.intersectObject() method of Three.js to interact with the model. When the ray intersects with the model, the position information of the intersection can be obtained, thereby inferring the approximate position of the vertex.

[0074] Step B3, using the ellipsoid formula to randomly generate multiple particles in the particle system, and obtain the initial state of the particle model on the particle system.

[0075] Specifically, step B3 specifically includes the following steps B31-B35:

[0076] Step B31, obtaining the maximum radius on the predefined ellipsoid direction axis, wherein the maximum radius includes: a first radius in the horizontal axis direction, a second radius in the vertical axis direction, and a third radius in the vertical axis direction.

[0077] Specifically, first clarify the shape parameters of the ellipsoid in three-dimensional space. By obtaining the maximum radius in the three directions of the horizontal axis (X axis), the longitudinal axis (Y axis), and the vertical axis (Z) (for example: the maximum radius of the X axis is a, the maximum radius of the Y axis is b, and the maximum radius of the Z axis is c), the size and proportion of the subsequently generated ellipsoid can be determined. These radius values ​​can be pre-set according to the specific animation effect requirements. For example, the flatness or length-to-width ratio of the ellipsoid can be adjusted according to different scene requirements. In actual implementation, these radius values ​​can be defined directly in the code, or they can be read from an external configuration file for flexible adjustment in different application scenarios.

[0078] Step B32, randomly generating the longitudinal coordinate of the first particle according to the second radius, and calculating the maximum value of the vertical axis based on the longitudinal coordinate and the third radius.

[0079] Specifically, the longitudinal coordinate of the first particle is randomly generated according to the second radius in the longitudinal direction. The formula is as follows:

[0080] y=Math.random()*b*bb

[0081] Among them, y is the randomly generated vertical axis coordinate, Math.random is a built-in function in JavaScript, which is used to generate a random decimal greater than or equal to 0 and less than 1, and b is the second radius in the vertical axis direction.

[0082] Generate random vertical axis coordinates within a certain range. This random generation process ensures that the distribution of particles in the vertical axis direction has a certain degree of randomness. Then, based on the obtained vertical axis coordinates and the third radius c in the vertical axis direction, use the ellipsoid formula:

[0083]

[0084] Among them, y is the randomly generated longitudinal axis coordinate, b is the second radius in the longitudinal axis direction, z is the vertical axis coordinate, and c is the third radius in the vertical axis direction.

[0085] The maximum value in the vertical axis direction can be determined by the range of vertical axis coordinate values ​​calculated according to the ellipse formula. The specific calculation formula is:

[0086]

[0087] Among them, MAX Zis the maximum value of the vertical axis, Math.sqrt is a built-in function in JavaScript, which is used to return the square root of a value, y is the vertical axis coordinate, b is the second radius in the vertical axis direction, and c is the third radius in the vertical axis direction.

[0088] This maximum value limits the range of particle coordinates in the vertical axis direction, ensuring that the generated particles are within the ellipsoid.

[0089] Step B33, randomly generating the vertical axis coordinate of the first particle according to the vertical axis maximum value, and calculating the horizontal axis maximum value based on the vertical axis coordinate and the first radius.

[0090] Specifically, after obtaining the maximum value of the vertical axis, a vertical axis coordinate is randomly generated. The specific formula is as follows:

[0091] z=Math.random()*MAX Z *MAX Z -MAX Z

[0092] Among them, z is the randomly generated vertical axis coordinate, Math.random is a built-in function for randomly generating decimals, MAX Z is the maximum value of the vertical axis.

[0093] Next, based on the vertical axis coordinates and the first radius in the horizontal axis direction, the ellipsoid formula is used again:

[0094]

[0095] Among them, x is the coordinate value in the horizontal axis direction, a is the first radius in the horizontal axis direction, y is the vertical axis coordinate, b is the second radius in the vertical axis direction, z is the vertical axis coordinate, and c is the second radius in the vertical axis direction.

[0096] Based on this range, the maximum value in the horizontal direction can be determined. The specific formula is as follows:

[0097] MAX X =Math.sqrt((1-Math.pow(y,2) / b / b-Math.pow(z,2) / a / a)*a*a

[0098] Among them, MAX x is the maximum value of the horizontal axis, Math.sqrt is a built-in function for calculating the square root of a number, and Math.pow is a built-in function in JavaScript that returns the value of a specified power of a base.

[0099] This process ensures that the particle coordinates in the horizontal direction are also within the range of the ellipsoid.

[0100] Step B34, randomly generating the horizontal axis coordinate of the first particle according to the maximum value of the horizontal axis.

[0101] Specifically, after obtaining the maximum value of the horizontal axis, a horizontal axis coordinate is randomly generated. The specific formula is as follows:

[0102] x = Math.random()*MAX X *MAX X -MAX X

[0103] Among them, x is the horizontal axis coordinate, Math.random is a built-in function for randomly generating decimals, MAX X is the maximum value of the horizontal axis.

[0104] The particles are randomly distributed in the horizontal direction. So far, through step-by-step calculation, a three-dimensional space coordinate point (x, y, z) within the range of the ellipsoid is obtained.

[0105] Step B35, creating a first particle in the particle system based on the horizontal axis coordinate, the vertical axis coordinate and the vertical axis coordinate, repeatedly generating multiple particles until a preset number of particles is reached, and obtaining an initial state of the particle model on the particle system.

[0106] Specifically, the first particle is created in the particle system using the generated horizontal, vertical and vertical axis coordinates. Then the above steps are repeated to generate multiple particles until the preset number of particles is reached. In this way, the initial state of the particle model on the particle system is obtained. These particles are evenly distributed within the ellipsoid range, providing a natural initial layout for the subsequent model switching animation. In this way, it can be ensured that the particle system has a good visual effect at the beginning of the animation, and a reasonable starting point is provided for the particle movement during the model switching process.

[0107] Step S12, determining the next second particle model to be switched according to the first position array, and obtaining the second position array of the second particle model.

[0108] In the embodiment of the present application, the next second particle model to be switched is first determined based on the first position array, which can be performed in a pre-set order, a specific rule algorithm (such as time sequence, user interaction history or random selection, etc.). After determination, the vertex positions of the second particle model are obtained through specific functions or methods such as the API provided by Three.js and organized into a position array, which contains the specific coordinate information of each particle of the second particle model in three-dimensional space, providing the necessary data basis for the subsequent target particle model position calculation.

[0109] Step S13, calculating a target position array of the target particle model according to the first position array and the second position array.

[0110] In the embodiment of the present application, step S13 includes the following steps C1-C4:

[0111] Step C1, obtaining a first array length of the first position array and a second array length of the second position array.

[0112] Specifically, the lengths of the first position array and the second position array are obtained through a specific programming language method (for example, using the array.length property in JavaScript, or using the len(array) function in Python). The first position array represents the position information of the current particle model, and the second position array represents the position information of the target particle model to be switched to. Determining the lengths of the two arrays provides basic data for subsequent comparison and calculation.

[0113] Step C2, comparing the first array length and the second array length.

[0114] Specifically, by comparing the lengths of the two arrays, we can determine whether the target model has more, less, or the same number of particles as the current model. This comparison result will determine which method to use to calculate the target position array.

[0115] Step C3: if the length of the first array is equal to the length of the second array, assign the second position array to the target position array.

[0116] Specifically, when the number of particles in the two models is the same, the operation is relatively simple and direct. The second position array can be directly assigned to the target position array to achieve fast model switching. Because the number of particles is the same, there is no need for complex adjustments and calculations, and direct assignment can ensure smooth switching.

[0117] Step C4, if the length of the first array is less than the length of the second array, the second position array is intercepted according to the length of the first array to obtain a first intercepted array, and the first intercepted array is assigned to the target position array.

[0118] Specifically, if the number of particles in the current model is less than that in the target model, the target position array needs to be adjusted to ensure the rationality and smoothness of the switching process. The specific method is to intercept the second position array according to the number of particles in the current model (i.e., the length of the first array), obtain a new first intercepted array, and then assign this intercepted array to the target position array. In this way, the number of particles in the target model can match the current model, avoiding the situation of inconsistent particle numbers during the switching process, thereby ensuring the smoothness of the animation.

[0119] Step C5: if the length of the first array is greater than the length of the second array, assign the second position array to the target position array based on a loop mechanism.

[0120] Specifically, step C5 specifically includes the following steps C51-C54:

[0121] Step C51, calculating the difference between the first array length and the second array length.

[0122] Specifically, the difference between the length of the position array (first position array) of the current particle model and the length of the position array (second position array) of the target particle model is calculated. This difference represents the degree of difference in the number of particles between the two models. By calculating this difference, key data can be provided for subsequent processing. For example, if the difference is large, it means that the number of particles in the two models is quite different, and more complex processing is required to ensure smooth switching.

[0123] Step C52, calculate the modulus value and remainder value of the difference value and the second array length, and use the modulus value as the number of loops and the remainder value as the truncation length.

[0124] Specifically, the modulus and remainder values ​​of the difference and the length of the second array are calculated. The modulus value indicates the number of times the second position array needs to be copied cyclically, and the remainder value determines the length that needs to be intercepted from the second position array in the end. In this way, the target position array can be adjusted more finely to adapt it to the length of the first position array, while keeping the particle distribution as reasonable as possible.

[0125] Step C53, in each cycle within the loop number, copy the second position array to the target position array.

[0126] Specifically, the loop operation is performed according to the determined number of loops. Each loop copies the second position array to the target position array. In this way, the length of the target position array can be gradually increased to be close to the length of the first position array. Through multiple copies, the uniformity and continuity of particle distribution can be maintained to a certain extent, preparing for the subsequent switching animation.

[0127] Step C54, after the loop ends, the second position array is intercepted according to the interception length to obtain a second intercepted array, and the second intercepted array is assigned to the target position array.

[0128] Specifically, after the loop copy is completed, the second position array is intercepted according to the determined interception length. The intercepted array is used as the second interception array, and then assigned to the target position array. This ensures that the length of the target position array is exactly the same as the length of the first position array, thereby achieving smooth switching between the two models. Through this gradual adjustment and interception method, the smoothness and naturalness of the animation can be maintained even when the number of particles is inconsistent.

[0129] Step S14, taking the first position array as the starting state and the target position array as the ending state, and based on the starting state and the ending state, using the animation transition library to smoothly update the position state of each particle in the particle system, so that the first particle model switches to the target particle model.

[0130] In the embodiment of the present application, the starting state and the ending state of the animation switching are first determined. The first position array represents the position state of the current particle model as the starting state; the target position array is the position state of the corresponding target particle model obtained through calculation, as the ending state. An animation transition library (such as tween.js) is used to smoothly update the position state of each particle in the particle system. The animation transition library can generate intermediate states at different time points between a given starting state and an ending state by interpolation and other methods, thereby achieving a smooth transition effect. In this way, the particles can gradually transition from the position of the current model to the position of the target model, achieving a natural and smooth model switching.

[0131] In the embodiment of the present application, based on the starting state and the ending state, the position state of each particle in the particle system is smoothly updated using the animation transition library, including the following steps D1-D3:

[0132] Step D1, input the starting state and the ending state into the animation transition library.

[0133] Specifically, the first position array (starting state) and the target position array (ending state) are passed to the animation transition library. This step provides the animation transition library with basic data for interpolation calculation. The animation transition library will plan the entire transition process based on these two states and preset parameters.

[0134] Step D2, calling the callback function in the animation transition library, during the animation execution, generating a position array corresponding to the particle position state at different time points according to the starting state and the ending state.

[0135] Specifically, during the animation execution, by calling the callback function of the animation transition library, the corresponding particle position state can be obtained at different time points. The animation transition library will generate position arrays at different time points through interpolation calculations based on the starting state and the ending state, as well as the advancement of time. These position arrays represent the specific positions of particles at different times, allowing particles to gradually transition from the starting state to the ending state during the animation process.

[0136] Step D3, cyclically assigning the position array at the current time point to the current position array of the particle system, so as to smoothly update the position state of each particle in the particle system.

[0137] Specifically, the position array generated at the current time point is cyclically assigned to the current position array of the particle system. This can continuously update the position of the particles in three-dimensional space to achieve a smooth animation effect. By repeating this process, as time goes by, the position of the particles will gradually transition from the starting state to the ending state, completing the switch from the first particle model to the target particle model.

[0138] As an example, Figure 2 As shown, the animation switching method first loads multiple preset particle models, then extracts the vertex positions of these models to construct a position array, and then uses the ellipsoid formula to generate the initial state of the particle model. After that, the next second particle model to be switched is determined based on the first position array of the current particle model and its second position array is obtained, and then the target position array of the target particle model is calculated. Finally, the first position array is used as the starting state and the target position array is used as the ending state, and the position state of each particle in the particle system is smoothly updated using the animation transition library to achieve the switching from the first particle model to the target particle model. At the same time, the camera lens is continuously rotated, and it is determined whether to trigger the next model transformation according to the trigger mode.

[0139] In the present embodiment, a particle model-based animation switching device is also provided, which is used to implement the above-mentioned embodiments and preferred implementation modes, and the descriptions that have been made will not be repeated. As used below, the term "module" can implement a combination of software and / or hardware of a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.

[0140] This embodiment provides an animation switching device based on a particle model, such as Figure 3 As shown, including:

[0141] An acquisition module 31 is used to acquire a first position array of a first particle model in a current particle system;

[0142] A determination module 32, used to determine the next second particle model to be switched according to the first position array, and obtain a second position array of the second particle model;

[0143] A calculation module 33, used for calculating a target position array of a target particle model according to the first position array and the second position array;

[0144] The updating module 34 is used to use the first position array as the starting state and the target position array as the ending state, and based on the starting state and the ending state, use the animation transition library to smoothly update the position state of each particle in the particle system so that the first particle model switches to the target particle model.

[0145] In an optional embodiment of the present application, the device also includes: a trigger module, which is used to obtain a trigger mode of the particle system; if the trigger mode is a timing mode, a preset timing time is obtained, and whether the current time reaches the timing time is detected. If the timing time is reached, a corresponding first trigger instruction is generated, and the animation switching process is started based on the trigger instruction; or, if the trigger mode is an operation mode, a specific operation of the user on the particle system is detected, and a corresponding second trigger instruction is generated based on the specific operation, and the animation switching process is started based on the second trigger instruction.

[0146] In an optional embodiment of the present application, the device also includes: a loading module for loading multiple preset particle models; extracting the vertex positions of each preset particle model, and using the vertex positions to construct a position array of the preset particle model; using the ellipsoid formula to randomly generate multiple particles in the particle system to obtain the initial state of the particle model on the particle system.

[0147] In an optional embodiment of the present application, a loading module is used to obtain a maximum radius on a predefined ellipsoid direction axis, wherein the maximum radius includes: a first radius in the horizontal axis direction, a second radius in the vertical axis direction, and a third radius in the vertical axis direction; randomly generate a vertical axis coordinate of a first particle according to the second radius, and calculate a vertical axis maximum value based on the vertical axis coordinate and the third radius; randomly generate a vertical axis coordinate of a first particle according to the vertical axis maximum value, and calculate a horizontal axis maximum value based on the vertical axis coordinate and the first radius; randomly generate a horizontal axis coordinate of the first particle according to the horizontal axis maximum value; create a first particle in a particle system based on the horizontal axis coordinate, the vertical axis coordinate, and the vertical axis coordinate, and repeatedly generate multiple particles until a preset number of particles is reached, thereby obtaining an initial state of a particle model on the particle system.

[0148] In an optional embodiment of the present application, the calculation module 33 is used to obtain a first array length of a first position array and a second array length of a second position array; compare the first array length with the second array length; if the first array length is equal to the second array length, assign the second position array to the target position array; if the first array length is less than the second array length, truncate the second position array according to the first array length to obtain a first truncation array, and assign the first truncation array to the target position array; if the first array length is greater than the second array length, assign the second position array to the target position array based on a loop mechanism.

[0149] In an optional embodiment of the present application, the calculation module 33 is used to calculate the difference between the first array length and the second array length; calculate the modulus value and the remainder value of the difference and the second array length, and use the modulus value as the number of loops and the remainder value as the truncation length; in each loop within the number of loops, copy the second position array to the target position array; after the loop ends, truncate the second position array according to the truncation length to obtain a second truncation array, and assign the second truncation array to the target position array.

[0150] In an optional embodiment of the present application, the update module 34 is used to input the starting state and the ending state into the animation transition library; call the callback function in the animation transition library, and during the execution of the animation, generate a position array corresponding to the particle position state at different time points according to the starting state and the ending state; and cyclically assign the position array at the current time point to the current position array of the particle system to smoothly update the position state of each particle in the particle system.

[0151] See also Figure 4 , Figure 4 is a schematic diagram of the structure of a computer device provided by an optional embodiment of the present invention, such as Figure 4 As shown, the computer device includes: one or more processors 10, a memory 20, and interfaces for connecting various components, including high-speed interfaces and low-speed interfaces. Various components are connected to each other using different buses for communication, and can be installed on a common mainboard or installed in other ways as needed. The processor can process the instructions executed in the computer device, including instructions stored in or on the memory to display the graphical information of the GUI on an external input / output device (such as, a display device coupled to the interface). In some optional embodiments, if necessary, multiple processors and / or multiple buses can be used together with multiple memories and multiple memories. Similarly, multiple computer devices can be connected, and each device provides some necessary operations (for example, as a server array, a group of blade servers, or a multi-processor system).

[0152] The processor 10 may be a central processing unit, a network processor or a combination thereof. The processor 10 may further include a hardware chip. The hardware chip may be a dedicated integrated circuit, a programmable logic device or a combination thereof. The programmable logic device may be a complex programmable logic device, a field programmable gate array, a general purpose array logic or any combination thereof.

[0153] The memory 20 stores instructions executable by at least one processor 10, so that the at least one processor 10 executes the method shown in the above embodiment.

[0154] The memory 20 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created by the use of a computer device based on the presentation of a small program landing page, etc. In addition, the memory 20 may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some optional embodiments, the memory 20 may optionally include a memory remotely arranged relative to the processor 10, and these remote memories may be connected to the computer device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0155] The memory 20 may include a volatile memory, such as a random access memory; the memory may also include a non-volatile memory, such as a flash memory, a hard disk or a solid state drive; the memory 20 may also include a combination of the above types of memory.

[0156] The computer device further comprises a communication interface 30 for the computer device to communicate with other devices or a communication network.

[0157] The embodiment of the present invention also provides a computer-readable storage medium. The method according to the embodiment of the present invention can be implemented in hardware, firmware, or can be implemented as a computer code that can be recorded in a storage medium, or can be implemented as a computer code that is originally stored in a remote storage medium or a non-temporary machine-readable storage medium and will be stored in a local storage medium through a network download, so that the method described herein can be stored in such software processing on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. Among them, the storage medium can be a magnetic disk, an optical disk, a read-only storage memory, a random access memory, a flash memory, a hard disk or a solid-state hard disk, etc.; further, the storage medium can also include a combination of the above types of memories. It can be understood that a computer, a processor, a microprocessor controller, or programmable hardware includes a storage component that can store or receive software or computer code. When the software or computer code is accessed and executed by a computer, a processor, or hardware, the method shown in the above embodiment is implemented.

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

Claims

1. An animation switching method based on a particle model, characterized in that: The method comprises: Get the first position array of the first particle model in the current particle system; Determine a next second particle model to be switched according to the first position array, and obtain a second position array of the second particle model; Calculate a target position array of a target particle model according to the first position array and the second position array; The first position array is used as a starting state, the target position array is used as an ending state, and based on the starting state and the ending state, the position state of each particle in the particle system is smoothly updated using an animation transition library, so that the first particle model is switched to the target particle model.

2. The method according to claim 1, characterized in that Before obtaining the first position array of the first particle model in the current particle system, the method further includes: Get the trigger mode of the particle system; If the trigger mode is the timing mode, a preset timing time is obtained, and it is detected whether the current time reaches the timing time. If the timing time is reached, a corresponding first trigger instruction is generated, and the animation switching process is started based on the trigger instruction; Or, if the trigger mode is the operation mode, a specific operation performed by the user on the particle system is detected, and a corresponding second trigger instruction is generated according to the specific operation, and the animation switching process is started based on the second trigger instruction.

3. The method according to claim 1, characterized in that Before obtaining the first position array of the first particle model in the current particle system, the method further includes: Load multiple preset particle models; Extracting the vertex position of each of the preset particle models, and constructing a position array of the preset particle model using the vertex position; A plurality of particles are randomly generated in the particle system using an ellipsoidal formula to obtain an initial state of a particle model on the particle system.

4. The method according to claim 3, characterized in that The method of randomly generating a plurality of particles in the particle system by using an ellipsoid formula comprises: Acquire a maximum radius on a predefined ellipsoid direction axis, wherein the maximum radius includes: a first radius in a horizontal axis direction, a second radius in a vertical axis direction, and a third radius in a vertical axis direction; randomly generating a longitudinal coordinate of the first particle according to the second radius, and calculating a vertical axis maximum value based on the longitudinal coordinate and the third radius; randomly generating a vertical axis coordinate of the first particle according to the vertical axis maximum value, and calculating a horizontal axis maximum value based on the vertical axis coordinate and the first radius; Randomly generate the horizontal axis coordinate of the first particle according to the horizontal axis maximum value; The first particle is created in the particle system based on the horizontal axis coordinate, the vertical axis coordinate and the vertical axis coordinate, and a plurality of particles are repeatedly generated until a preset number of particles is reached, thereby obtaining an initial state of a particle model on the particle system.

5. The method according to claim 1, characterized in that The step of calculating a target position array of a target particle model according to the first position array and the second position array comprises: Obtaining a first array length of the first position array and a second array length of the second position array; Comparing the first array length with the second array length; If the length of the first array is equal to the length of the second array, assigning the second position array to the target position array; If the length of the first array is less than the length of the second array, the second position array is intercepted according to the length of the first array to obtain a first intercepted array, and the first intercepted array is assigned to the target position array; If the length of the first array is greater than the length of the second array, the second position array is assigned to the target position array based on a loop mechanism.

6. The method according to claim 5, characterized in that The assigning the second position array to the target position array based on a loop mechanism includes: Calculate the difference between the first array length and the second array length; Calculate the modulus value and remainder value of the difference value and the second array length, and use the modulus value as the number of loops and the remainder value as the interception length; In each cycle within the number of cycles, copying the second position array to the target position array; After the loop ends, the second position array is intercepted according to the interception length to obtain a second intercepted array, and the second intercepted array is assigned to the target position array.

7. The method according to claim 1, characterized in that The step of smoothly updating the position state of each particle in the particle system by using an animation transition library based on the starting state and the ending state includes: Input the starting state and the ending state into an animation transition library; Calling the callback function in the animation transition library, during the animation execution, generating a position array corresponding to the particle position state at different time points according to the starting state and the ending state; The position array at the current time point is cyclically assigned to the current position array of the particle system to smoothly update the position state of each particle in the particle system.

8. An animation switching device based on a particle model, characterized in that: The device comprises: An acquisition module is used to obtain the first position array of the first particle model in the current particle system; a determination module, configured to determine a second particle model to be switched next according to the first position array, and obtain a second position array of the second particle model; A calculation module, used for calculating a target position array of a target particle model according to the first position array and the second position array; An updating module is used to use the first position array as a starting state and the target position array as an ending state, and based on the starting state and the ending state, use an animation transition library to smoothly update the position state of each particle in the particle system so that the first particle model switches to the target particle model.

9. A computer device, characterized in that: include: A memory and a processor, wherein the memory and the processor are communicatively connected to each other, the memory stores computer instructions, and the processor executes the method according to any one of claims 1 to 7 by executing the computer instructions.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a computer to execute the method according to any one of claims 1 to 7.

Images