A method, device and medium for generating ocean wave animation based on Vue

Abstract

The embodiments of this specification disclose a Vue-based ocean wave animation generation method, device, and medium, relating to the field of ocean wave animation technology. The method includes: obtaining generation requirement information for an ocean wave animation, including fixed and dynamic parameters of the ocean wave to be generated; generating an ocean wave data model for the ocean wave animation based on the fixed parameters in the generation requirement information, and generating a static ocean wave display result of the ocean wave animation in a pre-built ocean wave animation component through the ocean wave data model; adjusting the static ocean wave display result based on the dynamic parameters in the generation requirement information to determine a dynamic ocean wave display result of the ocean wave animation; and rendering the dynamic ocean wave display result and integrating it into a pre-built Vue page. This method can achieve a highly realistic ocean wave animation effect and improve the user experience. Vue's responsive mechanism enables the ocean wave animation to be linked with other elements of the page, improving the flexibility of the animation effect.

Description

Technical Field

[0001] This specification relates to the field of ocean wave animation technology, and in particular to a Vue-based ocean wave animation generation method, device, and medium. Background Art

[0002] With the development of internet technology, the demand for visual effects in online applications is becoming increasingly demanding. Ocean wave animation, a common natural phenomenon, is widely used in various online applications, such as games, film and television, and advertising. However, real ocean waves are dynamic, and existing methods can only generate static or repetitive waves. This makes the visual effects of ocean wave animations lack realism and fail to meet user needs. Summary of the Invention

[0003] One or more embodiments of this specification provide a Vue-based ocean wave animation generation method, device, and medium to solve the following technical problems: However, existing methods can often only generate static or repetitive ocean waves, which makes the visual effects of ocean wave animations often lack realism and cannot meet user needs.

[0004] One or more embodiments of this specification adopt the following technical solutions:

[0005] One or more embodiments of the present specification provide a Vue-based ocean wave animation generation method, the method comprising: obtaining generation requirement information of an ocean wave animation, wherein the generation requirement information comprises fixed ocean wave parameters and dynamic ocean wave parameters of the ocean wave to be generated; generating an ocean wave data model of the ocean wave animation according to the fixed ocean wave parameters in the generation requirement information, so as to generate a static ocean wave display result of the ocean wave animation in a pre-built ocean wave animation component through the ocean wave data model; adjusting the static ocean wave display result based on the dynamic ocean wave parameters in the generation requirement information to determine a dynamic ocean wave display result of the ocean wave animation; rendering the dynamic ocean wave display result and integrating it into a pre-built Vue page.

[0006] Furthermore, it is integrated into a pre-built Vue page, specifically including: obtaining the application page information of the wave animation; constructing the associated page elements of the wave animation through the application page information; establishing a linkage relationship between the dynamic wave display result and the associated page elements through Vue's responsive mechanism; based on the linkage relationship, linking the rendering effect of the wave animation with the associated page elements.

[0007] Furthermore, based on the wave dynamic parameters in the generation requirement information, the static wave display result is adjusted to determine the dynamic wave display result of the wave animation, specifically including: obtaining a dynamic parameter set in the wave dynamic parameters, wherein the dynamic parameter set includes dynamic parameters corresponding to each of the multiple timestamps, and the dynamic parameters include wave vertex position coordinate parameters and wave color parameters; determining the timestamp in the dynamic parameter set, so as to dynamically adjust the static wave display result according to the specified dynamic parameters corresponding to the timestamp at the timestamp to generate the dynamic wave display result of the wave animation.

[0008] Furthermore, rendering the dynamic ocean wave display result specifically includes: performing dynamic shadow rendering on the dynamic ocean wave display result through a pre-set light source to generate a dynamic shadow rendering effect of the dynamic ocean wave.

[0009] Furthermore, before performing dynamic shadow rendering on the dynamic ocean wave display result through a pre-set light source, the method also includes: obtaining a pre-set light source parameter array, wherein the light source parameter array includes a light source adjustment timestamp and light source parameters corresponding to each light source adjustment timestamp, and the light source parameters include a light source setting height and a light source color; based on the light source adjustment timestamp in the light source parameter array, the light sources are set in sequence according to the light source parameters corresponding to each light source adjustment timestamp.

[0010] Furthermore, dynamic shadow rendering is performed on the dynamic ocean wave display result through a pre-set light source to generate a dynamic shadow rendering effect of the dynamic ocean wave, specifically including: obtaining a current light source adjustment timestamp to determine current light source parameters corresponding to the current light source based on the current light source adjustment timestamp; according to the current light source parameters and pre-acquired ocean wave shadow requirement information, dynamic shadow rendering is performed on the dynamic ocean wave display result to generate a dynamic shadow rendering effect of the dynamic ocean wave.

[0011] Furthermore, before performing dynamic shadow rendering on the dynamic wave display result according to the current light source parameters and the pre-acquired wave shadow requirement information, the method also includes: obtaining the light source setting position and light source direction of the light source under the user's specified trigger; and determining the wave shadow requirement information of the wave animation based on the light source setting position and light source direction of the light source.

[0012] Furthermore, through the wave data model, before generating the static wave display result of the wave animation in the pre-built wave animation component, the method also includes: creating a Vue project and installing the dependent files corresponding to the Vue project; creating a wave animation component in the specified directory of the Vue project.

[0013] One or more embodiments of this specification provide a Vue-based ocean wave animation generation device, including:

[0014] at least one processor; and,

[0015] a memory communicatively connected to the at least one processor; wherein,

[0016] The memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to:

[0017] Obtain generation requirement information of an ocean wave animation, wherein the generation requirement information includes fixed ocean wave parameters and dynamic ocean wave parameters of the ocean wave to be generated; generate an ocean wave data model of the ocean wave animation according to the fixed ocean wave parameters in the generation requirement information, so as to generate a static ocean wave display result of the ocean wave animation in a pre-built ocean wave animation component through the ocean wave data model; adjust the static ocean wave display result based on the dynamic ocean wave parameters in the generation requirement information to determine the dynamic ocean wave display result of the ocean wave animation; render the dynamic ocean wave display result and integrate it into a pre-built Vue page.

[0018] One or more embodiments of this specification provide a non-volatile computer storage medium storing computer-executable instructions, wherein the computer-executable instructions are configured to:

[0019] Obtain generation requirement information of an ocean wave animation, wherein the generation requirement information includes fixed ocean wave parameters and dynamic ocean wave parameters of the ocean wave to be generated; generate an ocean wave data model of the ocean wave animation according to the fixed ocean wave parameters in the generation requirement information, so as to generate a static ocean wave display result of the ocean wave animation in a pre-built ocean wave animation component through the ocean wave data model; adjust the static ocean wave display result based on the dynamic ocean wave parameters in the generation requirement information to determine the dynamic ocean wave display result of the ocean wave animation; render the dynamic ocean wave display result and integrate it into a pre-built Vue page.

[0020] At least one of the above technical solutions adopted in the embodiments of this specification can achieve the following beneficial effects: Through the above technical solution, a pre-built wave animation component can be used to quickly generate static wave display results based on generation requirement information. On this basis, the static results can be adjusted based on dynamic parameters to further shorten the time to generate dynamic wave display results, thereby improving generation efficiency and reducing waiting time. By using a wave data model and adjusting the static results in combination with dynamic parameters, the dynamic wave display results can be made more realistic, thereby improving the realism of the animation. By integrating the rendered dynamic wave display results into a Vue page, Vue's interactive features can be utilized to enable user interaction with the waves. Users can influence the dynamic performance of the waves through controls or interactive methods on the page, increasing the fun and interactivity of the user experience. By obtaining the fixed and dynamic wave parameters from the generation requirement information, the wave animation can be customized according to the user's specific needs. Users can adjust the wave parameters according to their preferences to obtain personalized wave animation effects. Using Vue as a front-end framework can be easily integrated into existing web applications or integrated with other components. The flexibility allows developers to easily expand and customize the functions of the wave animation to meet the needs of different application scenarios. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] In order to more clearly illustrate the embodiments of this specification or the technical solutions in the prior art, the following briefly introduces the drawings required for the embodiments or the description of the prior art. Obviously, the drawings described below are only some of the embodiments described in this specification. For those skilled in the art, other drawings can be obtained based on these drawings without inventive work. In the drawings:

[0022] Figure 1 A schematic diagram of a flow chart of a method for generating ocean wave animation based on Vue provided in an embodiment of this specification;

[0023] Figure 2 This is a structural diagram of a Vue-based ocean wave animation generation device provided in an embodiment of this specification. DETAILED DESCRIPTION

[0024] To help those skilled in the art better understand the technical solutions in this specification, the following will provide a clear and complete description of the technical solutions in the embodiments of this specification, in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of this specification, not all of them. All other embodiments obtained by those skilled in the art based on the embodiments of this specification without creative work should fall within the scope of protection of this specification.

[0025] With the development of internet technology, the demand for visual effects in online applications is becoming increasingly demanding. Ocean wave animation, a common natural phenomenon, is widely used in various online applications, such as games, film and television, and advertising. However, real ocean waves are dynamic, and existing methods can only generate static or repetitive waves. This makes the visual effects of ocean wave animations lack realism and fail to meet user needs.

[0026] The embodiment of this specification provides a method for generating wave animation based on Vue. It should be noted that the execution subject in the embodiment of this specification can be a server or any device with data processing capabilities. Figure 1 A flow chart of a method for generating ocean wave animation based on Vue is provided in the embodiment of this specification, as shown in FIG. Figure 1 As shown, it mainly includes the following steps:

[0027] Step S101: obtaining generation requirement information of ocean wave animation.

[0028] In one embodiment of the present specification, generation requirement information for an ocean wave animation is obtained, wherein the generation requirement information includes fixed ocean wave parameters and dynamic ocean wave parameters of the ocean wave to be generated. The generation requirement information for an ocean wave animation can be determined by actual application requirements. For example, it can be applied in scenarios such as games, movies, advertisements, website design, and application design. Assuming that a website with an ocean theme needs to be designed, the generation requirement information for the ocean wave animation here can be obtained through website design requirements, that is, the specific form or changing form of the ocean wave animation that is finally presented. Fixed ocean wave parameters refer to fixed parameters, such as the height and color of each wave, which are used to represent the form of each ocean wave unit in a fixed state. It can be seen that the fixed here does not mean that the parameters are fixed, but rather the descriptive parameters of the ocean wave unit in a fixed state. Dynamic ocean wave parameters refer to the motion parameters of each ocean wave unit in motion, such as color change parameters, position change parameters, and the change time of the ocean wave unit. Through the above technical solution, combined with the application scenarios of wave animation, the requirements of wave animation are displayed through the fixed parameters and dynamic parameters of the wave unit, which provides a parameter basis for the generation of wave animation, meets the application scenarios of wave animation, and ensures the targeted nature of wave animation.

[0029] Step S102: Generate a wave data model of the wave animation according to the wave fixed parameters in the generation requirement information, so as to generate a static wave display result of the wave animation in the pre-built wave animation component through the wave data model.

[0030] By using the wave data model, before generating the static wave display result of the wave animation in the pre-built wave animation component, the method also includes: creating a Vue project and installing the dependency files corresponding to the Vue project; and creating a wave animation component in the specified directory of the Vue project.

[0031] In one embodiment of this specification, first create a Vue project and install the required dependencies, such as three.js and pixi.js. Note that if the Vue CLI is not installed, you must first install it globally so that it can be used directly in your terminal. Then, create a new Vue project, navigate to the project directory, and install the required dependencies. Create a new file in the Vue project directory and create the wave animation component using code within this file.

[0032] In one embodiment of the present specification, first, based on the fixed wave parameters in the generation requirement information, a suitable data structure is designed to store the wave data. Based on the fixed wave parameters, a wave data model of the wave animation is generated. Through the wave data model, a static wave display result of the wave animation is generated in a pre-built wave animation component. The wave data model is input into the wave animation component to generate a static wave display result. The static wave display result here can be in the form of a geometric figure. Through the pre-built wave animation component, a wave animation can be generated in real time based on the input wave data, making the generation of static wave display results faster and more efficient, helping to meet real-time requirements. The use of pre-built components can simplify the development process, reduce repetitive code writing and debugging work, and the component-based development method can improve development efficiency and code reusability, thereby reducing development costs.

[0033] Step S103: Based on the wave dynamic parameters in the generation requirement information, the static wave display result is adjusted to determine the dynamic wave display result of the wave animation.

[0034] Based on the wave dynamic parameters in the generation requirement information, the static wave display result is adjusted to determine the dynamic wave display result of the wave animation, specifically including: obtaining a dynamic parameter set in the wave dynamic parameters, wherein the dynamic parameter set includes dynamic parameters corresponding to each of multiple timestamps, and the dynamic parameters include wave vertex position coordinate parameters and wave color parameters; determining the timestamp in the dynamic parameter set, so as to dynamically adjust the static wave display result according to the specified dynamic parameters corresponding to the timestamp at the timestamp to generate the dynamic wave display result of the wave animation.

[0035] In one embodiment of the present specification, ocean wave dynamic parameters are obtained. Since the ocean wave dynamic parameters are used to represent parameters of dynamic changes in ocean waves and involve multiple change times, the ocean wave dynamic parameters can be classified according to the timestamps of the change times to obtain a dynamic parameter set including multiple timestamps and dynamic parameters of each timestamp. The dynamic parameters here include wave vertex position coordinate parameters and wave color parameters.

[0036] In one embodiment of the present specification, multiple timestamps in a dynamic parameter set are determined, and according to the specified dynamic parameters corresponding to each timestamp, the static wave display result is dynamically adjusted at the timestamp to generate a dynamic wave display result of the wave animation. In each frame, the geometric position, color and other parameters of the wave are dynamically adjusted according to the timestamp so that the wave presents a dynamic effect on the screen. It should be noted that the dynamic parameter set here refers to the dynamic parameters of each wave unit, that is, each wave unit corresponds to a dynamic parameter combination. By adjusting each wave unit through the dynamic parameter set and determining the dynamic changes of each wave unit, the overall dynamic effect of the wave animation can be achieved.

[0037] Step S104: Render the dynamic ocean wave display result and integrate it into the pre-built Vue page.

[0038] Rendering the dynamic ocean wave display result specifically includes: performing dynamic shadow rendering on the dynamic ocean wave display result through a preset light source to generate a dynamic shadow rendering effect of the dynamic ocean wave.

[0039] In one embodiment of the present specification, to realistically display ocean wave animations on various website pages and application pages, shadow rendering of the waves is also required. Specifically, to enhance the realism of the waves, light and shadow techniques can be used to render the waves. Dynamic shadow rendering is performed on the dynamic wave display using pre-set light sources, generating a dynamic shadow rendering effect for the dynamic waves.

[0040] Before performing dynamic shadow rendering on the dynamic ocean wave display result through a pre-set light source, the method further includes: obtaining a pre-set light source parameter array, wherein the light source parameter array includes a light source adjustment timestamp and light source parameters corresponding to each light source adjustment timestamp, and the light source parameters include a light source setting height and a light source color; based on the light source adjustment timestamp in the light source parameter array, the light sources are set in sequence according to the light source parameters corresponding to each light source adjustment timestamp.

[0041] In one embodiment of this specification, it is necessary to first set up a light source and then set its light source parameters. Since the various light source parameters are not fixed, they can be set in the form of an array. Each light source parameter array corresponds to a timestamp, i.e., a light source adjustment timestamp. The light source is adjusted under the light source adjustment timestamp, and different light source parameters of the same light source are set in sequence. It should be noted that the light source parameters here include the light source setting height and light source color.

[0042] In one embodiment of this specification, the light source height and color are both related to the shadow display requirements of the application scenario. Generally, the light source height can be related to the wave height. For example, a distance of 3 meters can be added to the wave height. The specific setting can be set according to actual needs. In addition, the timestamps corresponding to different light source parameter arrays are related to the time period of wave changes to be displayed in the application scenario. For example, to display the changes in waves within a day, the timestamps can be split up by day to obtain multiple timestamps within the same day.

[0043] Through a pre-set light source, dynamic shadow rendering is performed on the dynamic ocean wave display result to generate a dynamic shadow rendering effect of the dynamic ocean wave, specifically including: obtaining the current light source adjustment timestamp, and determining the current light source parameters corresponding to the current light source based on the current light source adjustment timestamp; according to the current light source parameters and pre-acquired ocean wave shadow requirement information, dynamic shadow rendering is performed on the dynamic ocean wave display result to generate a dynamic shadow rendering effect of the dynamic ocean wave.

[0044] In one embodiment of the present specification, a current light source adjustment timestamp is determined in a light source parameter array, and the current light source parameters at this timestamp are determined based on the current light source adjustment timestamp. Wave shadow requirement information is pre-acquired. This shadow requirement information can include design requirements for shadow depth, where a darker shadow indicates a more intense wave effect. It can also include user interaction requirements, such as the position and orientation of the light source corresponding to a user click or other triggering action. Dynamic shadow rendering is performed on the dynamic wave display results based on the current light source parameters and the wave shadow requirement information, generating a dynamic shadow rendering effect for the dynamic waves.

[0045] According to the current light source parameters and the pre-acquired wave shadow requirement information, before performing dynamic shadow rendering on the dynamic wave display result, the method also includes: obtaining the light source setting position and light source direction of the light source under the user's specified trigger; and determining the wave shadow requirement information of the wave animation based on the light source setting position and light source direction of the light source.

[0046] In one embodiment of this specification, when the ocean wave shadow requirement information is a user interaction requirement, upon a user click trigger, the user's trigger location and selected orientation information are obtained, the user trigger location is determined as the light source setting position, and the user's selected orientation information is determined as the light source orientation. Based on the light source setting position and light source orientation, the ocean wave shadow requirement information for the ocean wave animation is determined. This allows the ocean waves to be illuminated based on the light source's position and orientation, and the shadow position and depth to be calculated.

[0047] Integrating it into a pre-built Vue page specifically includes: obtaining the application page information of the wave animation; building the associated page elements of the wave animation through the application page information; establishing a linkage relationship between the dynamic wave display result and the associated page elements through Vue's responsive mechanism; and based on the linkage relationship, linking the rendering effect of the wave animation with the associated page elements.

[0048] In one embodiment of the present specification, the application page information of the wave animation is obtained. Since the wave animation is part of the web page design or application design, in addition to the wave animation, there is other application page information. The associated page element of the wave animation is constructed through the application page information. Through the responsive mechanism of Vue, a linkage relationship between the dynamic wave display result and the associated page element is established. According to the linkage relationship, the rendering effect of the wave animation is linked with the associated page element, which can achieve a highly realistic wave animation effect and improve the user experience. At the same time, due to the responsive mechanism of Vue, the wave animation can be linked with other elements of the page, which improves the flexibility of the animation effect.

[0049] Through the above technical solution, a pre-built wave animation component can be used to quickly generate static wave display results based on generation requirement information. On this basis, the static results can be adjusted based on dynamic parameters to further shorten the time it takes to generate dynamic wave display results, thereby improving generation efficiency and reducing waiting time. By using a wave data model and adjusting the static results in combination with dynamic parameters, the dynamic wave display results can be made more realistic, thereby improving the realism of the animation. By integrating the rendered dynamic wave display results into a Vue page, Vue's interactive features can be utilized to enable user interaction with the waves. Users can influence the dynamic performance of the waves through controls or interactive methods on the page, increasing the fun and interactivity of the user experience. By obtaining the fixed and dynamic wave parameters from the generation requirement information, the wave animation can be customized according to the user's specific needs. Users can adjust the wave parameters according to their preferences to obtain personalized wave animation effects. Using Vue as a front-end framework can be easily integrated into existing web applications or integrated with other components. The flexibility allows developers to easily expand and customize the functions of the wave animation to meet the needs of different application scenarios.

[0050] The embodiment of this specification also provides a wave animation generation device based on Vue, such as Figure 2 As shown, the device includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to:

[0051] Obtain generation requirement information for an ocean wave animation, wherein the generation requirement information includes fixed ocean wave parameters and dynamic ocean wave parameters of the ocean wave to be generated; generate an ocean wave data model for the ocean wave animation according to the fixed ocean wave parameters in the generation requirement information, so as to generate a static ocean wave display result of the ocean wave animation in a pre-built ocean wave animation component through the ocean wave data model; adjust the static ocean wave display result based on the dynamic ocean wave parameters in the generation requirement information to determine a dynamic ocean wave display result of the ocean wave animation; render the dynamic ocean wave display result and integrate it into a pre-built Vue page.

[0052] The embodiments of this specification also provide a non-volatile computer storage medium storing computer-executable instructions, wherein the computer-executable instructions are configured as follows:

[0053] Obtain generation requirement information for an ocean wave animation, wherein the generation requirement information includes fixed ocean wave parameters and dynamic ocean wave parameters of the ocean wave to be generated; generate an ocean wave data model for the ocean wave animation according to the fixed ocean wave parameters in the generation requirement information, so as to generate a static ocean wave display result of the ocean wave animation in a pre-built ocean wave animation component through the ocean wave data model; adjust the static ocean wave display result based on the dynamic ocean wave parameters in the generation requirement information to determine a dynamic ocean wave display result of the ocean wave animation; render the dynamic ocean wave display result and integrate it into a pre-built Vue page.

[0054] The various embodiments in this specification are described in a progressive manner. Similar portions between the various embodiments can be referenced to each other, and each embodiment focuses on the differences from the other embodiments. In particular, the device, apparatus, and non-volatile computer storage medium embodiments are generally similar to the method embodiments, so their descriptions are relatively simplified. For relevant details, refer to the descriptions of the method embodiments.

[0055] The foregoing description of this specification describes specific embodiments. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims can be performed in an order different from that described in the embodiments and still achieve the desired results. Furthermore, the processes depicted in the accompanying drawings do not necessarily require the specific order shown or the sequential order to achieve the desired results. In certain embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0056] The devices and media provided in the embodiments of this specification correspond one-to-one to the methods. Therefore, the devices and media also have similar beneficial technical effects to their corresponding methods. Since the beneficial technical effects of the methods have been described in detail above, the beneficial technical effects of the devices and media will not be repeated here.

[0057] Those skilled in the art will appreciate that the embodiments of this specification may be provided as methods, systems, or computer program products. Therefore, this specification may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Furthermore, this specification may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0058] This specification is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of this specification. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0059] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.

[0060] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1 a process or multiple processes and / or boxes Figure 1 The steps for the function specified in one or more boxes.

[0061] In a typical configuration, a computing device includes one or more processors (CPUs), input / output interfaces, network interfaces, and memory.

[0062] Memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. Memory is an example of a computer-readable medium.

[0063] Computer-readable media includes permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. The information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include transitory computer-readable media (transitory media), such as modulated data signals and carrier waves.

[0064] It should also be noted that the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, commodity, or apparatus that includes a series of elements includes not only those elements but also other elements not explicitly listed, or includes elements inherent to such process, method, commodity, or apparatus. In the absence of further limitations, an element defined by the phrase "comprises a ..." does not exclude the presence of other identical elements in the process, method, commodity, or apparatus that includes the element.

[0065] The foregoing description is merely one or more embodiments of this specification and is not intended to limit this specification. It will be apparent to those skilled in the art that various modifications and variations may be made to one or more embodiments of this specification. Any modifications, equivalent substitutions, or improvements made within the spirit and principles of one or more embodiments of this specification are intended to be within the scope of the claims of this specification.

Claims

1. A method for generating ocean wave animation based on Vue, characterized in that: The method comprises: Acquiring generation requirement information of an ocean wave animation, wherein the generation requirement information includes ocean wave fixed parameters and ocean wave dynamic parameters of the ocean wave to be generated; Generating a wave data model of the wave animation according to the wave fixed parameters in the generation requirement information, so as to generate a static wave display result of the wave animation in a pre-built wave animation component through the wave data model; Adjusting the static ocean wave display result based on the ocean wave dynamic parameters in the generation requirement information to determine the dynamic ocean wave display result of the ocean wave animation; Render the dynamic ocean wave display result and integrate it into the pre-built Vue page; Adjusting the static ocean wave display result based on the ocean wave dynamic parameters in the generation requirement information to determine the dynamic ocean wave display result of the ocean wave animation specifically includes: Obtaining a dynamic parameter set from the ocean wave dynamic parameters, wherein the dynamic parameter set includes dynamic parameters corresponding to each of the multiple timestamps, and the dynamic parameters include wave vertex position coordinate parameters and wave color parameters; The timestamp in the dynamic parameter set is determined, so that at the timestamp, the static ocean wave display result is dynamically adjusted according to the specified dynamic parameters corresponding to the timestamp to generate a dynamic ocean wave display result of the ocean wave animation.

2. A Vue-based ocean wave animation generation method according to claim 1, characterized in that: Integrates into pre-built Vue pages, including: Obtain application page information of the ocean wave animation; Constructing the associated page elements of the ocean wave animation through the application page information; Through Vue's responsive mechanism, a linkage relationship between the dynamic wave display result and the associated page elements is established; Based on the linkage relationship, the rendering effect of the wave animation is linked with the associated page element.

3. The method for generating ocean wave animation based on Vue according to claim 1, characterized in that: Rendering the dynamic ocean wave display result specifically includes: The dynamic ocean wave display result is dynamically shadow rendered by a pre-set light source to generate a dynamic shadow rendering effect of the dynamic ocean wave.

4. A Vue-based ocean wave animation generation method according to claim 3, characterized in that: Before performing dynamic shadow rendering on the dynamic ocean wave display result using a preset light source, the method further includes: Obtaining a preset light source parameter array, wherein the light source parameter array includes a light source adjustment timestamp and light source parameters corresponding to each light source adjustment timestamp, and the light source parameters include a light source setting height and a light source color; Based on the light source adjustment timestamp in the light source parameter array, light sources are set in sequence according to the light source parameters corresponding to each light source adjustment timestamp.

5. A Vue-based ocean wave animation generation method according to claim 4, characterized in that: Performing dynamic shadow rendering on the dynamic ocean wave display result through a preset light source to generate a dynamic shadow rendering effect of the dynamic ocean wave specifically includes: Acquire a current light source adjustment timestamp, and determine a current light source parameter corresponding to the current light source based on the current light source adjustment timestamp; According to the current light source parameters and the pre-acquired ocean wave shadow requirement information, dynamic shadow rendering is performed on the dynamic ocean wave display result to generate a dynamic shadow rendering effect of the dynamic ocean wave.

6. A Vue-based ocean wave animation generation method according to claim 5, characterized in that: Before performing dynamic shadow rendering on the dynamic ocean wave display result according to the current light source parameters and the pre-acquired ocean wave shadow requirement information, the method further includes: Under a user's specified trigger, obtaining a light source setting position and a light source direction of the light source; The ocean wave shadow requirement information of the ocean wave animation is determined according to the light source setting position and the light source direction of the light source.

7. The method for generating ocean wave animation based on Vue according to claim 1, characterized in that: Before generating a static wave display result of the wave animation in a pre-built wave animation component using the wave data model, the method further includes: Create a Vue project and install the dependency files corresponding to the Vue project; Create an ocean wave animation component in the specified directory of the Vue project.

8. A Vue-based ocean wave animation generation device, characterized in that: The device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor. The instructions are executed by the at least one processor to enable the at least one processor to perform the method according to any one of claims 1 to 7.

9. A non-volatile computer storage medium storing computer executable instructions, characterized in that: The computer executable instructions are configured to execute the method according to any one of claims 1 to 7.

Images