CN117724715A - Methods, devices, electronic equipment and storage media for realizing data dynamic effects - Google Patents

Abstract

This application provides a method, device, electronic equipment and storage medium for realizing dynamic effects of data, involving the field of computer technology, to solve the problem of the need to manually develop corresponding functional components in front-end pages in related technologies, resulting in relatively low efficiency in generating front-end pages. The problem. The method includes: responding to the user's target VUE plug-in installation operation on the front-end data development page, installing the target VUE plug-in, and activating the data dynamic effect component library corresponding to the target VUE plug-in on the front-end data development page; the data dynamic effect component library includes multiple Dynamic effect function component; a dynamic effect function component corresponds to a dynamic effect parameter; responds to the dynamic effect instruction input by the user in the target VUE plug-in, determines the input parameter of the dynamic effect instruction; determines the target dynamic effect parameter that is the same as the input parameter, and Displays the target dynamic effect corresponding to the target dynamic effect parameter.

Description

Methods, devices, electronic equipment and storage media for realizing data dynamic effects

Technical field

The present application relates to the field of computer technology, and in particular to a method, device, electronic equipment and storage medium for realizing dynamic effects of data.

Background technique

VUE is a progressive JavaScript framework for building user interfaces. Component is one of the most powerful features of Vue.js. Components can extend HTML elements and encapsulate reusable code. The component system can use independent and reusable small components to build large applications.

At present, almost all WEB visualization projects pursue a dazzling interface. In fact, the animation effect is better. In the existing technology, if some texts, such as titles, are displayed at the same time, it will look very stiff.

In the existing technology, it is impossible to implement dynamic display effect components based on the number of text words based on VUE, which is inconvenient for users to reference on multiple pages. If the same effect needs to be displayed on each page, business logic must be applied to each page, which is cumbersome.

Contents of the invention

This application provides a method, device, electronic device and storage medium for realizing dynamic effects of data to solve the problem in related technologies that corresponding functional components need to be manually developed in the front-end page, resulting in relatively low efficiency in generating the front-end page.

In order to achieve the above purpose, this application adopts the following technical solutions:

The first aspect provides a method for realizing the dynamic effect of data. The method includes: responding to the user's target VUE plug-in installation operation on the front-end data development page, installing the target VUE plug-in, and activating the target VUE plug-in corresponding to the front-end data development page. Data dynamic effect component library; the data dynamic effect component library includes multiple dynamic effect functional components; one dynamic effect functional component corresponds to one dynamic effect parameter; in response to the dynamic effect command input by the user in the target VUE plug-in, determine the input of the dynamic effect command Parameters; determine the target dynamic effect parameters that are the same as the input parameters, and display the target dynamic effect corresponding to the target dynamic effect parameters.

Optionally, the method also includes: creating a directory structure of the data dynamic effect project, with component folders set in the directory structure; according to the display requirements of the data dynamic effect project, split the components to be developed into at least dynamic effect functional components, animation Effect functional components, animation optimization functional components, and transition effect functional components; use VUE to develop dynamic effect functional components, animation effect functional components, animation optimization functional components, and transition effect functional components; store the developed components in the component folder; in After the development of the data dynamic effect project is completed, at least the components in the data dynamic effect project will be packaged and published to obtain a data dynamic effect component library that can be downloaded and used by front-end users.

Optionally, use VUE to develop dynamic effect functional components, animation effect functional components, animation optimization functional components, and transition effect functional components, including: obtaining the dynamic effect configuration file input by the developer; the dynamic effect configuration file includes the first VUE code; responding In the encapsulation instruction, encapsulate the first VUE code to obtain the dynamic effect functional component; obtain the animation effect configuration file input by the developer; the animation effect configuration file includes the second VUE code; in response to the encapsulation instruction, encapsulate the second VUE code to obtain the animation effect Functional component; obtain the animation optimization configuration file input by the developer; the animation optimization configuration file includes the third VUE code; respond to the encapsulation instruction, encapsulate the third VUE code to obtain the animation optimization functional component; obtain the transition effect configuration file input by the developer; The transition effect configuration file includes the fourth VUE code; in response to the encapsulation instruction, the fourth VUE code is encapsulated to obtain the transition effect functional component.

Optionally, the first VUE code includes the first configuration parameters of the dynamic effect, and the first configuration parameters include the duration, rotation angle, and scaling ratio of the dynamic effect; the second VUE code includes the second configuration parameters of the animation effect, and the second configuration parameter The parameters include the rendering method and playback method of the animation effect; the third VUE code includes the third configuration parameter of animation optimization, and the third configuration parameter includes the animation curve adjustment method of animation optimization; the fourth VUE code includes the fourth configuration parameter of the transition effect, The fourth configuration parameter includes color changes and size changes of the transition effect.

In a second aspect, a device for realizing a data dynamic effect is provided. The device includes a processing unit, a determination unit and a display unit; the processing unit is used to install the target VUE plug-in in response to the user's target VUE plug-in installation operation on the front-end data development page. , and activate the data dynamic effect component library corresponding to the target VUE plug-in on the front-end data development page; the data dynamic effect component library includes multiple dynamic effect functional components; one dynamic effect functional component corresponds to one dynamic effect parameter; the determination unit is used to respond to The dynamic effect instructions input by the user in the target VUE plug-in determine the input parameters of the dynamic effect instructions; the display unit is used to determine the target dynamic effect parameters that are the same as the input parameters, and display the target dynamic effects corresponding to the target dynamic effect parameters.

Optionally, the processing unit is also used to: create a directory structure of the data dynamic effect project, with component folders set in the directory structure; and split the components that need to be developed into at least dynamic effect functional components according to the display requirements of the data dynamic effect project , animation effect functional components, animation optimization functional components, transition effect functional components; use VUE to develop dynamic effect functional components, animation effect functional components, animation optimization functional components, and transition effect functional components; store the developed components in the component folder ; After the development of the data dynamic effect project is completed, at least the components in the data dynamic effect project will be packaged and released to obtain a data dynamic effect component library that can be downloaded and used by front-end users.

Optional, processing unit, specifically used to: obtain the dynamic effect configuration file input by the developer; the dynamic effect configuration file includes the first VUE code; respond to the encapsulation instruction, encapsulate the first VUE code to obtain the dynamic effect functional component; obtain the development The animation effect configuration file input by the personnel; the animation effect configuration file includes the second VUE code; in response to the encapsulation instruction, the second VUE code is encapsulated to obtain the animation effect functional component; the animation optimization configuration file input by the developer is obtained; the animation optimization configuration file includes The third VUE code; in response to the encapsulation instruction, encapsulate the third VUE code to obtain the animation optimization functional component; obtain the transition effect configuration file input by the developer; the transition effect configuration file includes the fourth VUE code; in response to the encapsulation instruction, encapsulate the fourth VUE code to get the transition effect functional component.

Optionally, the first VUE code includes the first configuration parameters of the dynamic effect, and the first configuration parameters include the duration, rotation angle, and scaling ratio of the dynamic effect; the second VUE code includes the second configuration parameters of the animation effect, and the second configuration parameter The parameters include the rendering method and playback method of the animation effect; the third VUE code includes the third configuration parameter of animation optimization, and the third configuration parameter includes the animation curve adjustment method of animation optimization; the fourth VUE code includes the fourth configuration parameter of the transition effect, The fourth configuration parameter includes color changes and size changes of the transition effect.

In a third aspect, an electronic device is provided, including: a processor and a memory for storing instructions executable by the processor; wherein the processor is configured to execute instructions to implement the method for implementing the data dynamic effect of the first aspect. .

In a fourth aspect, a computer-readable storage medium is provided. Instructions are stored on the computer-readable storage medium. When the instructions in the computer-readable storage medium are executed by the processor of the electronic device, the electronic device can execute the above-mentioned first step. Methods to achieve dynamic effects on data.

The technical solution provided by the embodiment of the present application at least brings the following beneficial effects: in response to the user's target VUE plug-in installation operation on the front-end data development page, the target VUE plug-in is installed, and the data dynamic effect corresponding to the target VUE plug-in is activated on the front-end data development page Component library. Since the data dynamic effect component library includes multiple dynamic effect functional components, one dynamic effect functional component corresponds to one dynamic effect parameter. Therefore, in response to the dynamic effect instruction input by the user in the target VUE plug-in, the input parameter of the dynamic effect instruction is determined, the target dynamic effect parameter that is the same as the input parameter is determined, and the target dynamic effect corresponding to the target dynamic effect parameter is displayed. In this way, users only need to enter dynamic effect instructions when performing front-end development to assign the parameters of the dynamic effect they want to achieve to the dynamic effect instructions, and then the corresponding dynamic effect functional components can be called to achieve the corresponding dynamic effects. It avoids the manual development of corresponding functional components, thereby improving the efficiency of generating front-end pages.

Description of the drawings

In order to explain the embodiments of the present application or the technical solutions in the prior art more clearly, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings in the following description are only These are some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without exerting creative efforts.

Figure 1 is a schematic structural diagram of a system for realizing dynamic data effects provided by an embodiment of the present application;

Figure 2 is a schematic flowchart 1 of a method for realizing a data dynamic effect provided by an embodiment of the present application;

Figure 3 is a schematic flowchart 2 of a method for realizing a data dynamic effect provided by an embodiment of the present application;

Figure 4 is a schematic flowchart of encapsulating the VueMotion library provided by an embodiment of the present application;

Figure 5 is a schematic structural diagram of an implementation device provided by an embodiment of the present application;

FIG. 6 is a schematic structural diagram of an electronic device provided by an embodiment of the present application.

Detailed ways

The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only some of the embodiments of the present application, rather than all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by those of ordinary skill in the art without creative efforts fall within the scope of protection of this application.

It should be noted that in the embodiments of this application, words such as "exemplary" or "for example" are used to represent examples, illustrations or explanations. Any embodiment or design described as "exemplary" or "such as" in the embodiments of the present application is not to be construed as preferred or advantageous over other embodiments or designs. Rather, use of the words "exemplary" or "such as" is intended to present the concept in a concrete manner.

It should also be noted that in the embodiments of this application, "of", "corresponding (English: corresponding, relevant)" and "corresponding (English: corresponding)" can sometimes be used interchangeably. It should be noted that , when the difference is not emphasized, the meaning they want to express is the same.

In order to facilitate a clear description of the technical solutions of the embodiments of the present application, in the embodiments of the present application, words such as “first” and “second” are used to distinguish the same or similar items with basically the same functions and effects. Skilled persons can understand that words such as "first" and "second" do not limit the quantity and execution order.

Before explaining the embodiments of the present application in detail, some technical terms and related technologies involved in the embodiments of the present application are first introduced.

The existing technology is exploring low-code and no-code development platforms. However, these platforms often support relatively single functions and scenarios. In the development of complex front-end functional pages, you must choose the front-end framework and UI components according to your choice. Complete the development of requirements manually according to the requirements. And if there are a large number of duplicate codes in the existing code, the current technical solution cannot quickly integrate these duplicate codes.

In the process of developing complex front-end pages, you will definitely face the problem of extracting common components, because simply stacking codes will cause the project to be unable to be maintained later, and the code will be unable to be shared and have poor readability. However, if there are no standard methods and specifications in the process of extracting components in the existing technology, problems such as low reusability of components and repeated extraction of the same components will also occur.

Regarding the problem in related technologies that corresponding functional components need to be manually developed in the front-end page, resulting in relatively low efficiency in generating the front-end page, no effective solution has yet been proposed.

In view of this, the embodiment of this application provides a method for realizing dynamic effects of data. By using the VueMotion library, front-end developers can easily add various dynamic effects and transition effects to their Vue applications, avoiding the need to manually develop the corresponding Functional components, thereby achieving the effect of improving the efficiency of generating front-end pages.

The method for realizing the data dynamic effect provided by the embodiment of the present application will be described in detail below with reference to the accompanying drawings.

The method for realizing the data dynamic effect provided by the embodiment of the present application can be applied to the system for realizing the data dynamic effect. Figure 1 shows a schematic structural diagram of the system for realizing the data dynamic effect. As shown in FIG. 1 , the data dynamic effect implementation system includes a data dynamic effect implementation device (hereinafter implementation device) 11 and a server 12 . Among them, the device 11 is connected to the server 12 . The implementation device 11 and the server 12 may be connected in a wired manner or in a wireless manner, which is not limited in the embodiment of the present application.

The implementation device 11 can obtain the data dynamic effect component library from the server 12 . In response to the user's target VUE plug-in installation operation on the front-end data development page, the implementation device 11 can install the target VUE plug-in, and activate the data dynamic effect component library corresponding to the target VUE plug-in on the front-end data development page. In response to the dynamic effect instruction input by the user in the target VUE plug-in, the implementation device 11 may determine the input parameters of the dynamic effect instruction; the implementation device 11 may determine the target dynamic effect parameter that is the same as the input parameter, and display the target The target dynamic effect corresponding to the dynamic effect parameter.

The implementation device 11 may be an electronic device with computing processing functions. For example, the implementation device 11 can be a mobile phone, a tablet computer, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, a personal digital assistant (personal digital assistant, PDA), a desktop computer, a cloud server, etc. , the embodiments of this application do not limit the specific type of electronic equipment.

The server 12 may be a single server, or may be a server cluster composed of multiple servers. In some implementations, the server cluster may also be a distributed cluster. Optionally, the server can also be implemented on a cloud platform. For example, the cloud platform can include private cloud, public cloud, hybrid cloud, community cloud, distributed cloud, inter-cloud, and multi-cloud ( multi-cloud), etc., or any combination thereof. The embodiments of the present application do not limit this.

It should be noted that the above-mentioned FIG. 1 takes the implementation device 11 and the server 12 as independent devices as an example. Alternatively, the implementation device 11 and the server 12 can also be combined into one device. For example, the server 12 or its corresponding functions, and the implementation device 11 or its corresponding functions may be integrated in one device. The embodiments of the present application do not limit this.

The execution subject of the method for implementing data dynamic effects provided by the embodiment of the present application may be the above-mentioned implementation device 11. As mentioned above, the implementation device 11 may be an electronic device with computing processing functions such as a computer or a server. Optionally, the implementation device 11 may also be a processor (such as a central processing unit (CPU)) in the aforementioned electronic device; or, the implementation device 11 may also be a model training function installed in the aforementioned electronic device. An application (APP); or, the implementation device 11 may also be a functional module with a model training function in the aforementioned electronic device. The embodiments of the present application do not limit this.

Figure 2 is a schematic flowchart of a method for implementing a data dynamic effect according to some exemplary embodiments. In some embodiments, the above method for implementing dynamic data effects can be applied to the implementation device and electronic equipment shown in Figure 1 , and can also be applied to other similar equipment.

As shown in Figure 2, the implementation method of data dynamic effects provided by the embodiment of the present application includes the following S201-S203.

S201. In response to the user's target VUE plug-in installation operation on the front-end data development page, install the target VUE plug-in, and activate the data dynamic effect component library corresponding to the target VUE plug-in on the front-end data development page.

Among them, the data dynamic effect component library includes multiple dynamic effect functional components; one dynamic effect functional component corresponds to one dynamic effect parameter.

It should be noted that the data dynamic effect component library is pre-created. For example, the data dynamic effect component library can be a pre-created VueMotion library.

The data dynamic effect component library can configure dynamic effects, physics engine applications, lightweight animation engines, animation curve optimization, transition merge optimization and other functions. Through encapsulated components or instructions, developers can easily apply these pre-configured dynamic effects and transition effects, thereby improving the user experience and the attractiveness of page interactions.

As a possible implementation method, developers (i.e. users) can apply the data dynamic effect component library by receiving instructions when performing front-end development. In order to facilitate the use of developers, the implementation device can provide developers with services in the data dynamic effect component library in the form of VUE plug-ins corresponding to the data dynamic effect component library. Developers only need to install the VueMotion plug-in in their VUE application to use the instructions and functions provided there.

For example, the implementation device can create a Vue plug-in for registering VueMotion instructions and components. The implementation can define the Vue plug-in in a separate JavaScript file vue-motion.js:

import VueMotion from ‘vue-motion’;

export default{

install(Vue){

Vue.use(VueMotion);

}

}

In the above code, the implementation device imports the VueMotion module, and then defines a Vue plug-in named VueMotion. In the plug-in's install method, the implementation uses the Vue.use method to register the VueMotion directive and component.

In some embodiments, in a Vue application, the implementation device can register the above-mentioned Vue plug-in as a global plug-in so that it can be used in the entire application. Specifically, the implementation device can register the plug-in in the entry file of the Vue instance:

import Vue from‘vue’;

import VueMotion from‘./vue-motion’;

Vue.use(VueMotion);

newVue({

});

In the above code, the implementation device imports Vue and VueMotion plug-ins, and then uses the Vue.use method to register the VueMotion plug-in. This way, when developers do front-end development, the implementation can use VueMotion directives and components throughout the application.

S202. In response to the dynamic effect instruction input by the user in the target VUE plug-in, determine the input parameters of the dynamic effect instruction.

As a possible implementation manner, the implementation device receives the dynamic effect instruction input by the user in the target VUE plug-in, and determines the input parameters input by the user under the dynamic effect instruction.

For example, in the target Vue component, the user can use the v-motion directive to add dynamic effects. For example, you can use the v-motion directive in a button component to add a fade effect, for example:

<template>

<burron v-motion="’fade’”>Click me</button>

</template>

In the above code, the user uses the v-motion command to pass in a string parameter 'fade', which means adding a fade effect. The implementation device can obtain the string parameter through the above code.

It should be noted that users can add different dynamic effects by passing in different string parameters according to actual needs. This application does not limit this.

S203. Determine the target dynamic effect parameter that is the same as the input parameter, and display the target dynamic effect corresponding to the target dynamic effect parameter.

As a possible implementation method, the implementation device traverses each dynamic effect parameter based on the input parameter to determine the target dynamic effect parameter that is the same as the input parameter, and displays the target dynamic effect corresponding to the target dynamic effect parameter.

The technical solution provided by the embodiment of the present application at least brings the following beneficial effects: in response to the user's target VUE plug-in installation operation on the front-end data development page, the target VUE plug-in is installed, and the data dynamic effect corresponding to the target VUE plug-in is activated on the front-end data development page Component library. Since the data dynamic effect component library includes multiple dynamic effect functional components, one dynamic effect functional component corresponds to one dynamic effect parameter. Therefore, in response to the dynamic effect instruction input by the user in the target VUE plug-in, the input parameter of the dynamic effect instruction is determined, the target dynamic effect parameter that is the same as the input parameter is determined, and the target dynamic effect corresponding to the target dynamic effect parameter is displayed. In this way, users only need to enter dynamic effect instructions when performing front-end development to assign the parameters of the dynamic effect they want to achieve to the dynamic effect instructions, and then the corresponding dynamic effect functional components can be called to achieve the corresponding dynamic effects. It avoids the manual development of corresponding functional components, thereby improving the efficiency of generating front-end pages.

In one design, in order to create a data dynamic effect component library, as shown in Figure 3, the implementation method of the data dynamic effect provided by the embodiment of the present application may also include:

S301. Create a directory structure of the data dynamic effect project, and a component folder is set in the directory structure.

As a possible implementation manner, the implementation device determines the name of the data dynamic effect project to be created, and creates a file structure corresponding to the project.

For example, the implementation device creates a new Vue project through Vue CLI or user output. The implementation device generates a folder named "vue-motion" in the project as the storage location of the VueMotion library. The implementation creates the following files and folders in the "vue-motion" folder:

-"src" folder: used to store source code.

-"examples" folder: used to store sample code and demonstration pages.

-"dist" folder: used to store built library files.

S302. According to the display requirements of the data dynamic effect project, split the components to be developed into at least dynamic effect functional components, animation effect functional components, animation optimization functional components, and transition effect functional components.

As a possible implementation method, the implementation device splits the components to be developed into at least dynamic effect functional components, animation effect functional components, animation optimization functional components, and transition effect functions based on the developer's display requirements for data dynamic effect projects. components.

S303. Use VUE to develop dynamic effect functional components, animation effect functional components, animation optimization functional components, and transition effect functional components.

As a possible implementation method, the implementation device obtains the dynamic effect configuration file input by the developer; the dynamic effect configuration file includes the first VUE code; in response to the encapsulation instruction, the first VUE code is encapsulated to obtain the dynamic effect functional component.

In actual applications, the implementation device can create a core module named "VueMotion" to provide the main dynamic effect function. In the core module, a highly configurable dynamic effects engine is generated, allowing developers to define, combine and customize various animation effects through configuration files or code. The implementation device can integrate the physics engine library, such as "physic.js", and use it as part of the dynamic effects engine to make the dynamic effects more realistic and realistic.

Optionally, the implementation device obtains the animation effect configuration file input by the developer; the animation effect configuration file includes the second VUE code; in response to the encapsulation instruction, the second VUE code is encapsulated to obtain the animation effect functional component.

In actual applications, the implementation device can create a lightweight animation engine module named "AnimationEngine" to manage the playback and rendering of animations. In "AnimationEngine", we optimize the key rendering path, use requestAnimationFrame for rendering, and support technologies such as hardware acceleration to improve the performance and fluency of animation. The implementation device creates a module called "AnimationOptimizer" for optimizing animation curves. In this module, algorithms are implemented to smooth and naturalize animation curves and remove undesirable effects such as jitter, stuttering, or excessive oscillation.

Optionally, the implementation device obtains the animation optimization configuration file input by the developer; the animation optimization configuration file includes the third VUE code; in response to the encapsulation instruction, the third VUE code is encapsulated to obtain the animation optimization functional component.

In practical applications, the implementation device can create a module called "TransitionOptimizer" for automatically merging and optimizing transition effects. In "TransitionOptimizer", implement algorithms to reduce the number of redraws and reflows, improving performance while maintaining the blending effect of transition effects. The implementation device uses the "TransitionOptimizer" module to optimize responsive transitions and simulate the transition effects of real-life interaction behaviors. Implementation devices can integrate libraries that support 3D dynamic effects, such as "three.js", as part of the VueMotion library. The VueMotion library provides components or instructions for creating and processing 3D dynamic effects.

Optionally, the implementation device obtains the transition effect configuration file input by the developer; the transition effect configuration file includes the fourth VUE code; in response to the encapsulation instruction, the fourth VUE code is encapsulated to obtain the transition effect functional component.

In actual applications, the implementation can create a file in the "src" folder, such as "transitionOptimizer.js", for merging and optimizing algorithms for transition effects. The implementation is implemented in the "transitionOptimizer.js" file, defining a singleton object for automatically merging and optimizing transition effects.

Optionally, the first VUE code includes the first configuration parameters of the dynamic effect, and the first configuration parameters include the duration, rotation angle, and scaling ratio of the dynamic effect; the second VUE code includes the second configuration parameters of the animation effect, and the second configuration parameter The parameters include the rendering method and playback method of the animation effect; the third VUE code includes the third configuration parameter of animation optimization, and the third configuration parameter includes the animation curve adjustment method of animation optimization; the fourth VUE code includes the fourth configuration parameter of the transition effect, The fourth configuration parameter includes color changes and size changes of the transition effect.

S304. Store the developed component in the component folder.

As a possible implementation manner, in response to the developer's packaging instruction, the implementation device stores the developed component in the component folder.

For example, developers can create a Vue component or directive named "VueMotion" to expose the functions of the core module to developers. In the "VueMotion" component or directive, provide appropriate properties and event interfaces so that developers can configure and control the behavior of dynamic effects, including configuring highly personalized animation effects, enabling physics engines, setting animation curves, etc. In components or directives, use the previously mentioned animation engine and optimizer modules to ensure the playback and rendering of animations and the merging and optimization of transitions.

Create a file in the "src" folder, such as "VueMotion.vue", to encapsulate Vue components or instructions.

In the "VueMotion.vue" file, use the above dynamic effects engine, animation engine, etc. to define the behavior and functions of Vue components or instructions.

Provides appropriate property and event interfaces so that developers can configure and control the behavior of dynamic effects.

S305. After the development of the data dynamic effect project is completed, at least package and publish the components in the data dynamic effect project to obtain a data dynamic effect component library that can be downloaded and used by front-end users.

As a possible implementation method, the implementation device uses Vue CLI or other build tools to build the source code into a library file. Furthermore, the implementation device places the built library files in the "dist" folder so that other developers can install and use them through CDN or npm.

In some embodiments, in order to facilitate developers' use, the implementation device can create a demonstration page in the "examples" folder to demonstrate various functions and usages of the VueMotion library, including highly personalized animation effects, physics engine applications, Responsive transitions and 3D dynamic effects, etc. Write detailed documentation to introduce the features, API and sample code of the VueMotion library so that other developers can understand and use the library.

Figure 4 shows the process of encapsulating the VueMotion library, including project determination, creating Vue plug-ins, implementing basic components, designing application programming interfaces (Application Programming Interface, API), function implementation, building and packaging, writing documents and examples, testing and repair. Through the above process, the VueMotion library can be successfully encapsulated for developers to use in front-end development.

The above embodiments mainly introduce the solutions provided by the embodiments of the present application from the perspective of devices (equipment). It can be understood that in order to implement the above method, the device or equipment includes hardware structures and/or software modules corresponding to the execution of each method flow. These hardware structures and/or software modules corresponding to the execution of each method flow can constitute a determination of material information. device. Persons skilled in the art should readily appreciate that, in conjunction with the algorithm steps of each example described in the embodiments of the invention herein, the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is performed by hardware or computer software driving the hardware depends on the specific application and design constraints of the technical solution. Skilled artisans may implement the described functionality using different methods for each specific application, but such implementations should not be considered beyond the scope of this application.

Embodiments of the present application can divide the device or equipment into functional modules according to the above method examples. For example, the device or equipment can be divided into functional modules corresponding to each function, or two or more functions can be integrated into one processing module. . The above integrated modules can be implemented in the form of hardware or software function modules. It should be noted that the division of modules in the embodiment of the present application is schematic and is only a logical function division. In actual implementation, there may be other division methods.

Figure 5 is a schematic structural diagram of an implementation device according to an exemplary embodiment. Referring to FIG. 5 , the implementation device 40 provided by the embodiment of the present application includes a processing unit 401, a determining unit 402, and a display unit 403.

The processing unit 401 is configured to respond to the user's target VUE plug-in installation operation on the front-end data development page, install the target VUE plug-in, and activate the data dynamic effect component library corresponding to the target VUE plug-in on the front-end data development page; the data dynamic effect component library includes Multiple dynamic effect function components; one dynamic effect function component corresponds to one dynamic effect parameter; a determination unit is used to determine the input parameters of the dynamic effect instruction in response to the dynamic effect instruction input by the user in the target VUE plug-in; a display unit is used to Determine the target dynamic effect parameters that are the same as the input parameters, and display the target dynamic effect corresponding to the target dynamic effect parameters.

Optionally, the processing unit 401 is also used to: create a directory structure of the data dynamic effect project, with component folders set in the directory structure; and split the components that need to be developed into at least dynamic effect functions according to the display requirements of the data dynamic effect project. Components, animation effect functional components, animation optimization functional components, and transition effect functional components; use VUE to develop dynamic effect functional components, animation effect functional components, animation optimization functional components, and transition effect functional components; store the developed components in the component folder Medium; After the development of the data dynamic effects project is completed, at least the components in the data dynamic effects project will be packaged and released to obtain a data dynamic effects component library that can be downloaded and used by front-end users.

Optionally, the processing unit 401 is specifically configured to: obtain the dynamic effect configuration file input by the developer; the dynamic effect configuration file includes the first VUE code; respond to the encapsulation instruction, encapsulate the first VUE code to obtain the dynamic effect function component; obtain The animation effect configuration file input by the developer; the animation effect configuration file includes the second VUE code; in response to the encapsulation instruction, the second VUE code is encapsulated to obtain the animation effect functional component; the animation optimization configuration file input by the developer is obtained; the animation optimization configuration file Includes the third VUE code; in response to the encapsulation instruction, encapsulates the third VUE code to obtain the animation optimization functional component; obtains the transition effect configuration file input by the developer; the transition effect configuration file includes the fourth VUE code; in response to the encapsulation instruction, encapsulates the third VUE code Four VUE codes to get the transition effect functional component.

Optionally, the first VUE code includes the first configuration parameters of the dynamic effect, and the first configuration parameters include the duration, rotation angle, and scaling ratio of the dynamic effect; the second VUE code includes the second configuration parameters of the animation effect, and the second configuration parameter The parameters include the rendering method and playback method of the animation effect; the third VUE code includes the third configuration parameter of animation optimization, and the third configuration parameter includes the animation curve adjustment method of animation optimization; the fourth VUE code includes the fourth configuration parameter of the transition effect, The fourth configuration parameter includes color changes and size changes of the transition effect.

Figure 6 is a schematic structural diagram of an electronic device provided by this application. As shown in Figure 6, the electronic device 50 may include at least one processor 501 and a memory 502 for storing instructions executable by the processor. The processor 501 is configured to execute instructions in the memory 502 to implement the data in the above embodiments. How to achieve dynamic effects.

In addition, the electronic device 50 may also include a communication bus 503 and at least one communication interface 504.

The processor 501 may be a central processing unit (CPU), a microprocessing unit, an ASIC, or one or more integrated circuits used to control the execution of the program of the present application.

Communication bus 503 may include a path that carries information between the above-mentioned components.

The communication interface 504 uses any device such as a transceiver to communicate with other devices or communication networks, such as Ethernet, wireless access network (radio access network, RAN), wireless local area networks (WLAN), etc.

The memory 502 may be a read-only memory (ROM) or other type of static storage device that can store static information and instructions, a random access memory (random access memory (RAM)) or other type that can store information and instructions. The dynamic storage device can also be electrically erasable programmable read-only memory (EEPROM), compact disc read-only memory (CD-ROM) or other optical disk storage, optical disc storage ( Including compressed optical discs, laser discs, optical discs, digital versatile discs, Blu-ray discs, etc.), magnetic disk storage media or other magnetic storage devices, or can be used to carry or store desired program code in the form of instructions or data structures and can be stored by a computer. any other medium, but not limited to this. The memory may exist independently and be connected to the processor 501 through a bus. Memory may also be integrated with processor 501.

Among them, the memory 502 is used to store instructions for executing the solution of the present application, and the processor 501 controls the execution. The processor 501 is used to execute instructions stored in the memory 502 to implement the functions in the method of the present application.

As an example, with reference to FIG. 5 , the functions implemented by the processing unit 401 , the determining unit 402 and the display unit 403 in the device 40 are the same as those of the processor 501 in FIG. 6 .

In specific implementation, as an embodiment, the processor 501 may include one or more CPUs, such as CPU0 and CPU1 in FIG. 6 .

In specific implementation, as an embodiment, the electronic device 50 may include multiple processors, such as the processor 501 and the processor 507 in FIG. 6 . Each of these processors may be a single-CPU processor or a multi-CPU processor. A processor here may refer to one or more devices, circuits, and/or processing cores for processing data (eg, computer program instructions).

In specific implementation, as an embodiment, the electronic device 50 may also include an output device 505 and an input device 506. Output device 505 communicates with processor 501 and can display information in a variety of ways. For example, the output device 505 may be a liquid crystal display (LCD), a light emitting diode (LED) display device, a cathode ray tube (CRT) display device, or a projector. wait. Input device 506 communicates with processor 501 and can accept input from user objects in a variety of ways. For example, the input device 506 may be a mouse, a keyboard, a touch screen device, a sensing device, or the like.

Those skilled in the art can understand that the structure shown in FIG. 6 does not constitute a limitation on the electronic device 50, and may include more or fewer components than shown, or combine certain components, or adopt different component arrangements.

In addition, the present application also provides a computer-readable storage medium. When the instructions in the computer-readable storage medium are executed by the processor of the electronic device, the electronic device can execute the method for realizing the data dynamic effect provided in the above embodiments. .

In addition, this application also provides a computer program product, which includes computer instructions. When the computer instructions are run on an electronic device, the electronic device causes the electronic device to execute the method for realizing the dynamic effect of data provided in the above embodiments.

Other embodiments of the present application will be readily apparent to those skilled in the art from consideration of the specification and practice of the invention herein. This application is intended to cover any variations, uses, or adaptations of this application that follow the general principles of this application and include common knowledge or customary technical means in the technical field not invented by this application. . It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the application being indicated by the following claims.

Claims (10)

1. A method for realizing dynamic effects of data, characterized in that the method includes: In response to the user's target VUE plug-in installation operation on the front-end data development page, install the target VUE plug-in, and activate the data dynamic effect component library corresponding to the target VUE plug-in on the front-end data development page; the data dynamic effect component The library includes multiple dynamic effect functional components; one dynamic effect functional component corresponds to one dynamic effect parameter; In response to the dynamic effect instruction input by the user in the target VUE plug-in, determine the input parameters of the dynamic effect instruction; Determine the target dynamic effect parameter that is the same as the input parameter, and display the target dynamic effect corresponding to the target dynamic effect parameter. 2. The method according to claim 1, characterized in that, the method further comprises: Create a directory structure for the data dynamic effect project, with component folders set in the directory structure; According to the display requirements of the data dynamic effect project, the components to be developed are at least split into dynamic effect functional components, animation effect functional components, animation optimization functional components, and transition effect functional components; Use VUE to develop the dynamic effect functional component, the animation effect functional component, the animation optimization functional component, and the transition effect functional component; Store the developed components in the component folder; After the development of the data dynamic effect project is completed, at least the components in the data dynamic effect project are packaged and released to obtain a data dynamic effect component library that can be downloaded and used by front-end users. 3. The method according to claim 2, wherein the use of VUE to develop the dynamic effect functional component, the animation effect functional component, the animation optimization functional component, and the transition effect functional component includes: Obtain the dynamic effect configuration file input by the developer; the dynamic effect configuration file includes the first VUE code; In response to the encapsulation instruction, encapsulate the first VUE code to obtain the dynamic effect functional component; Obtain the animation effect configuration file input by the developer; the animation effect configuration file includes the second VUE code; In response to the encapsulation instruction, encapsulate the second VUE code to obtain the animation effect functional component; Obtain the animation optimization configuration file input by the developer; the animation optimization configuration file includes the third VUE code; In response to the encapsulation instruction, encapsulate the third VUE code to obtain the animation optimization functional component; Obtain the transition effect configuration file input by the developer; the transition effect configuration file includes the fourth VUE code; In response to the encapsulation instruction, the fourth VUE code is encapsulated to obtain the transition effect functional component. 4. The method according to claim 3, wherein the first VUE code includes a first configuration parameter of a dynamic effect, and the first configuration parameter includes a duration, rotation angle, and scaling ratio of the dynamic effect; The second VUE code includes the second configuration parameter of the animation effect, and the second configuration parameter includes the rendering mode and playback mode of the animation effect; the third VUE code includes the third configuration parameter of animation optimization, and the third configuration The parameters include an animation curve adjustment method for animation optimization; the fourth VUE code includes a fourth configuration parameter of the transition effect, and the fourth configuration parameter includes a color change and a size change of the transition effect. 5. A device for realizing dynamic effects of data, characterized in that the device includes a processing unit, a determining unit and a display unit; The processing unit is configured to respond to the user's target VUE plug-in installation operation on the front-end data development page, install the target VUE plug-in, and activate the data dynamic effect component library corresponding to the target VUE plug-in on the front-end data development page. ; The data dynamic effect component library includes multiple dynamic effect functional components; one dynamic effect functional component corresponds to one dynamic effect parameter; The determination unit is configured to determine the input parameters of the dynamic effect instruction in response to the dynamic effect instruction input by the user in the target VUE plug-in; The display unit is used to determine the target dynamic effect parameter that is the same as the input parameter, and display the target dynamic effect corresponding to the target dynamic effect parameter. 6. The device according to claim 5, characterized in that the processing unit is also used to: Create a directory structure for the data dynamic effect project, with component folders set in the directory structure; According to the display requirements of the data dynamic effect project, the components to be developed are at least split into dynamic effect functional components, animation effect functional components, animation optimization functional components, and transition effect functional components; Use VUE to develop the dynamic effect functional component, the animation effect functional component, the animation optimization functional component, and the transition effect functional component; Store the developed components in the component folder; After the development of the data dynamic effect project is completed, at least the components in the data dynamic effect project are packaged and released to obtain a data dynamic effect component library that can be downloaded and used by front-end users. 7. The device according to claim 6, characterized in that the processing unit is specifically used for: Obtain the dynamic effect configuration file input by the developer; the dynamic effect configuration file includes the first VUE code; In response to the encapsulation instruction, encapsulate the first VUE code to obtain the dynamic effect functional component; Obtain the animation effect configuration file input by the developer; the animation effect configuration file includes the second VUE code; In response to the encapsulation instruction, encapsulate the second VUE code to obtain the animation effect functional component; Obtain the animation optimization configuration file input by the developer; the animation optimization configuration file includes the third VUE code; In response to the encapsulation instruction, encapsulate the third VUE code to obtain the animation optimization functional component; Obtain the transition effect configuration file input by the developer; the transition effect configuration file includes the fourth VUE code; In response to the encapsulation instruction, the fourth VUE code is encapsulated to obtain the transition effect functional component. 8. The device according to claim 7, wherein the first VUE code includes a first configuration parameter of a dynamic effect, and the first configuration parameter includes a duration, rotation angle, and scaling ratio of the dynamic effect; The second VUE code includes the second configuration parameter of the animation effect, and the second configuration parameter includes the rendering mode and playback mode of the animation effect; the third VUE code includes the third configuration parameter of animation optimization, and the third configuration The parameters include an animation curve adjustment method for animation optimization; the fourth VUE code includes a fourth configuration parameter of the transition effect, and the fourth configuration parameter includes a color change and a size change of the transition effect. 9. An electronic device, characterized by comprising: a processor and a memory for storing instructions executable by the processor; wherein the processor is configured to execute instructions to implement claims 1-4 Method for realizing the dynamic effect of data described in any one of the above. 10. A computer-readable storage medium with instructions stored on the computer-readable storage medium, characterized in that when the instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device causes the electronic device to The device is capable of executing the method for implementing data dynamic effects as described in any one of claims 1-4.