CN117724715A - Method and device for realizing dynamic effect of data, electronic equipment and storage medium - Google Patents
Method and device for realizing dynamic effect of data, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN117724715A CN117724715A CN202311686594.1A CN202311686594A CN117724715A CN 117724715 A CN117724715 A CN 117724715A CN 202311686594 A CN202311686594 A CN 202311686594A CN 117724715 A CN117724715 A CN 117724715A
- Authority
- CN
- China
- Prior art keywords
- dynamic effect
- vue
- effect
- animation
- data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 230000000694 effects Effects 0.000 title claims abstract description 339
- 238000000034 method Methods 0.000 title claims abstract description 42
- 238000011161 development Methods 0.000 claims abstract description 35
- 238000009434 installation Methods 0.000 claims abstract description 10
- 230000003213 activating effect Effects 0.000 claims abstract description 8
- 230000006870 function Effects 0.000 claims description 54
- 238000005457 optimization Methods 0.000 claims description 48
- 238000004806 packaging method and process Methods 0.000 claims description 44
- 238000012545 processing Methods 0.000 claims description 23
- 230000004044 response Effects 0.000 claims description 15
- 230000008859 change Effects 0.000 claims description 12
- 238000009877 rendering Methods 0.000 claims description 10
- 238000005538 encapsulation Methods 0.000 claims description 7
- 230000007704 transition Effects 0.000 description 10
- 238000010586 diagram Methods 0.000 description 7
- 238000004891 communication Methods 0.000 description 5
- 238000013461 design Methods 0.000 description 5
- 230000008676 import Effects 0.000 description 5
- 230000006399 behavior Effects 0.000 description 4
- 238000004422 calculation algorithm Methods 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 239000008186 active pharmaceutical agent Substances 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000004590 computer program Methods 0.000 description 2
- 238000010276 construction Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 238000012549 training Methods 0.000 description 2
- 230000001133 acceleration Effects 0.000 description 1
- 230000006978 adaptation Effects 0.000 description 1
- 230000002411 adverse Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 239000000463 material Substances 0.000 description 1
- 230000010355 oscillation Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000008439 repair process Effects 0.000 description 1
- 238000010561 standard procedure Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Landscapes
- Processing Or Creating Images (AREA)
Abstract
The application provides a method, a device, electronic equipment and a storage medium for realizing a data dynamic effect, relates to the technical field of computers, and aims to solve the problem that in the related art, corresponding functional components need to be manually developed in a front-end page, so that the efficiency of generating the front-end page is low. The method comprises the following steps: responding to the installation operation of the target VUE plugin of the front-end data development page by a user, installing the target VUE plugin, and activating a data dynamic effect component library corresponding to the target VUE plugin in the front-end data development page; the data dynamic effect component library comprises a plurality of dynamic effect functional components; one dynamic effect function component corresponds to one dynamic effect parameter; responding to a dynamic effect instruction input by a user in a target VUE plug-in, and determining input parameters of the dynamic effect instruction; and determining the target dynamic effect parameters which are the same as the input parameters, and displaying the target dynamic effect corresponding to the target dynamic effect parameters.
Description
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to a method and apparatus for implementing a dynamic data effect, an electronic device, and a storage medium.
Background
VUE is a set of progressive JavaScript frames used to build user interfaces. The Component (Component) is one of the most powerful functions of vue. The component may extend the HTML elements, encapsulating the reusable code. Component systems can build large applications with independently reusable gadgets.
The interface that almost all WEB visual projects pursue at present dazzles, and is just that animation effect is good, and if some texts are displayed, such as titles, in the prior art, the texts appear very hard if they are simultaneously displayed.
In the prior art, a dynamic display effect component based on VUE according to the text word number cannot be realized, a user can not conveniently refer to a plurality of pages, service logic is needed to be operated at each page if the same effect is required to be displayed at each page, and the operation is complicated.
Disclosure of Invention
The application provides a method, a device, electronic equipment and a storage medium for realizing a data dynamic effect, which are used for solving the problem that the efficiency of generating a front-end page is lower because corresponding functional components are required to be manually developed in the front-end page in the related technology.
In order to achieve the above purpose, the present application adopts the following technical scheme:
in a first aspect, a method for implementing a dynamic effect of data is provided, where the method includes: responding to the installation operation of the target VUE plugin of the front-end data development page by a user, installing the target VUE plugin, and activating a data dynamic effect component library corresponding to the target VUE plugin in the front-end data development page; the data dynamic effect component library comprises a plurality of dynamic effect functional components; one dynamic effect function component corresponds to one dynamic effect parameter; responding to a dynamic effect instruction input by a user in a target VUE plug-in, and determining input parameters of the dynamic effect instruction; and determining the target dynamic effect parameters which are the same as the input parameters, and displaying the target dynamic effect corresponding to the target dynamic effect parameters.
Optionally, the method further comprises: creating a directory structure of the data dynamic effect item, wherein a component folder is arranged in the directory structure; according to the display requirement of the data dynamic effect project, splitting the components to be developed into at least a dynamic effect functional component, an animation optimization functional component and a transitional effect functional component; developing a dynamic effect function component, an animation optimization function component and a transitional effect function component by using the VUE; storing the developed components in a component folder; after the development of the data dynamic effect project is completed, at least packaging and publishing the components in the data dynamic effect project to obtain a data dynamic effect component library which can be downloaded and used by a front-end user.
Optionally, developing the dynamic effects function component, the animation optimization function component, the transitional effects function component using the VUE includes: acquiring a dynamic effect configuration file input by a developer; the dynamic effect profile includes a first VUE code; responding to the packaging instruction, and packaging the first VUE code to obtain a dynamic effect functional component; acquiring an animation effect configuration file input by a developer; the animation effect profile includes a second VUE code; responding to the packaging instruction, and packaging the second VUE code to obtain an animation effect functional component; acquiring an animation optimization configuration file input by a developer; the animation optimization configuration file comprises a third VUE code; responding to the packaging instruction, and packaging a third VUE code to obtain an animation optimization function assembly; acquiring a transitional effect configuration file input by a developer; the transitional effect profile includes a fourth VUE code; and in response to the packaging instruction, packaging the fourth VUE code to obtain the transition effect functional component.
Optionally, the first VUE code includes a first configuration parameter of the dynamic effect, the first configuration parameter including a duration, a rotation angle, a scaling of the dynamic effect; the second VUE code comprises a second configuration parameter of the animation effect, and the second configuration parameter comprises a rendering mode and a playing mode of the animation effect; the third VUE code comprises a third configuration parameter of animation optimization, and the third configuration parameter comprises an animation curve adjustment mode of animation optimization; the fourth VUE code includes a fourth configuration parameter for the transitional effect, the fourth configuration parameter including a color change, a size change for the transitional effect.
In a second aspect, an implementation apparatus of a dynamic effect of data is provided, where the apparatus includes a processing unit, a determining unit, and a display unit; the processing unit is used for responding to the installation operation of the target VUE plugin of the front-end data development page by a user, installing the target VUE plugin and activating a data dynamic effect component library corresponding to the target VUE plugin on the front-end data development page; the data dynamic effect component library comprises a plurality of dynamic effect functional components; one dynamic effect function component corresponds to one dynamic effect parameter; the determining unit is used for responding to the dynamic effect instruction input by the user in the target VUE plug-in, and determining the input parameters of the dynamic effect instruction; and the display unit is used for determining the target dynamic effect parameters which are the same as the input parameters and displaying the target dynamic effect corresponding to the target dynamic effect parameters.
Optionally, the processing unit is further configured to: creating a directory structure of the data dynamic effect item, wherein a component folder is arranged in the directory structure; according to the display requirement of the data dynamic effect project, splitting the components to be developed into at least a dynamic effect functional component, an animation optimization functional component and a transitional effect functional component; developing a dynamic effect function component, an animation optimization function component and a transitional effect function component by using the VUE; storing the developed components in a component folder; after the development of the data dynamic effect project is completed, at least packaging and publishing the components in the data dynamic effect project to obtain a data dynamic effect component library which can be downloaded and used by a front-end user.
Optionally, the processing unit is specifically configured to: acquiring a dynamic effect configuration file input by a developer; the dynamic effect profile includes a first VUE code; responding to the packaging instruction, and packaging the first VUE code to obtain a dynamic effect functional component; acquiring an animation effect configuration file input by a developer; the animation effect profile includes a second VUE code; responding to the packaging instruction, and packaging the second VUE code to obtain an animation effect functional component; acquiring an animation optimization configuration file input by a developer; the animation optimization configuration file comprises a third VUE code; responding to the packaging instruction, and packaging a third VUE code to obtain an animation optimization function assembly; acquiring a transitional effect configuration file input by a developer; the transitional effect profile includes a fourth VUE code; and in response to the packaging instruction, packaging the fourth VUE code to obtain the transition effect functional component.
Optionally, the first VUE code includes a first configuration parameter of the dynamic effect, the first configuration parameter including a duration, a rotation angle, a scaling of the dynamic effect; the second VUE code comprises a second configuration parameter of the animation effect, and the second configuration parameter comprises a rendering mode and a playing mode of the animation effect; the third VUE code comprises a third configuration parameter of animation optimization, and the third configuration parameter comprises an animation curve adjustment mode of animation optimization; the fourth VUE code includes a fourth configuration parameter for the transitional effect, the fourth configuration parameter including a color change, a size change for the transitional effect.
In a third aspect, there is provided an electronic device comprising: a processor, 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, on which instructions are stored, which when executed by a processor of an electronic device, enable the electronic device to perform a method of implementing a data dynamic effect as described in the first aspect above.
The technical scheme provided by the embodiment of the application at least brings the following beneficial effects: and responding to the installation operation of the target VUE plug-in of the front-end data development page by the user, installing the target VUE plug-in, and activating a data dynamic effect component library corresponding to the target VUE plug-in on the front-end data development page. Because the data dynamic effect component library comprises a plurality of dynamic effect functional components, one dynamic effect functional component corresponds to one dynamic effect parameter. Thus, in response to a dynamic effect instruction entered by a user in a target VUE plug-in, an input parameter of the dynamic effect instruction is determined, a target dynamic effect parameter identical to the input parameter is determined, and a target dynamic effect corresponding to the target dynamic effect parameter is displayed. Therefore, when the user performs front-end development, only needs to input a dynamic effect instruction to endow parameters of the dynamic effect to be realized to the dynamic effect instruction, and the corresponding dynamic effect functional component can be called, so that the corresponding dynamic effect is realized, the corresponding functional component is prevented from being manually developed, and the effect of improving the efficiency of generating the front-end page is further achieved.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described below, it being obvious that the drawings in the following description are only some embodiments of the present application, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
Fig. 1 is a schematic structural diagram of a system for implementing a dynamic effect of data according to an embodiment of the present application;
fig. 2 is a schematic flow chart of a method for implementing a dynamic effect of data according to an embodiment of the present application;
fig. 3 is a second flow chart of a method for implementing a dynamic effect of data according to an embodiment of the present application;
fig. 4 is a schematic flow chart of a package VueMotion library according to an embodiment of the present application;
fig. 5 is a schematic structural diagram of an implementation device according to an embodiment of the present application;
fig. 6 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
Detailed Description
The following description of the embodiments of the present application will be made clearly and fully with reference to the accompanying drawings, in which it is evident that the embodiments described are only some, but not all, of the embodiments of the present application. All other embodiments, which can be made by one of ordinary skill in the art without undue burden from the present disclosure, are within the scope of the present disclosure.
It should be noted that, in the embodiments of the present application, words such as "exemplary" or "such as" are used to mean serving as an example, instance, or illustration. Any embodiment or design described herein as "exemplary" or "for example" should not be construed as preferred or advantageous over other embodiments or designs. Rather, the use of words such as "exemplary" or "such as" is intended to present related concepts in a concrete fashion.
It should be noted that, in the embodiment of the present application, "english: of", "corresponding" and "corresponding" may sometimes be used in combination, and it should be noted that the meaning to be expressed is consistent when the distinction is not emphasized.
In order to clearly describe the technical solutions of the embodiments of the present application, in the embodiments of the present application, the terms "first", "second", and the like are used to distinguish the same item or similar items having substantially the same function and effect, and those skilled in the art will understand that the terms "first", "second", and the like are not limited in number and execution order.
Before explaining the embodiments of the present application in detail, some technical terms and related techniques related to the embodiments of the present application are described.
In the prior art, low-code and code-free development platforms are explored, however, the functions and scenes often supported by the platforms are relatively single, and in the development of a complex front-end function page, the development of requirements is manually completed according to requirements by self-selected front-end frames and UI components. And if a large number of repeated codes exist in the stock codes, the current technical scheme cannot integrate the repeated codes rapidly.
In the process of developing a complex front-end page, the problem of extracting a common component is always faced, because simply stacking codes can cause the problems that the project cannot be maintained in the later period, the codes can not be shared, the readability is poor, and the like. However, if there is no standard method and standard in the process of extracting the components in the prior art, the multiplexing degree of the components is low, and the same components are repeatedly extracted.
Aiming at the problem that the efficiency of generating the front-end page is low because corresponding functional components are required to be manually developed in the front-end page in the related art, no effective solution is proposed at present.
In view of this, the embodiment of the application provides a method for implementing a dynamic effect of data, by using a Vue motion library, front-end developers can easily add various dynamic effects and transitional effects to their Vue application programs, so that the manual development of corresponding functional components is avoided, and the effect of improving the efficiency of generating front-end pages is further achieved.
The method for realizing the data dynamic effect provided by the embodiment of the application is described in detail below with reference to the accompanying drawings.
The implementation method of the data dynamic effect provided by the embodiment of the application can be applied to an implementation system of the data dynamic effect, and fig. 1 shows a schematic structural diagram of the implementation system of the data dynamic effect. As shown in fig. 1, the system for realizing the data dynamic effect includes a data dynamic effect realizing device (hereinafter realizing device) 11 and a server 12. Wherein the implementation means 11 are connected to a server 12. The implementation device 11 and the server 12 may be connected in a wired manner or may be connected in a wireless manner, which is not limited in the embodiment of the present application.
The implementation means 11 may obtain a library of data dynamic effects components from the server 12. In response to a target VUE plug-in installation operation of a user on a front-end data development page, the implementation device 11 may install the target VUE plug-in, and activate a data dynamic effect component library corresponding to the target VUE plug-in on the front-end data development page. In response to a dynamic effect instruction entered by a user in the target VUE plug-in, the implementation device 11 may determine input parameters of the dynamic effect instruction; the implementation means 11 may determine the same target dynamic effect parameter as the input parameter and display the target dynamic effect corresponding to the target dynamic effect parameter.
The implementation means 11 may be an electronic device with a computing processing function. For example, the implementation device 11 may be a mobile phone, a tablet computer, a notebook computer, an ultra-mobile personal computer (ultra-mobile personal computer, UMPC), a netbook, a personal digital assistant (personal digital assistant, PDA), a desktop computer, a cloud server, etc., and the embodiment of the present application does not limit the specific type of the electronic device.
The server 12 may be a single server or may be a server cluster including a plurality of servers. In some implementations, the server cluster may also be a distributed cluster. Optionally, the server may also be implemented on a cloud platform, which may include, for example, a private cloud, public cloud, hybrid cloud, community cloud (community cloud), distributed cloud, inter-cloud (inter-cloud), multi-cloud (multi-cloud), and the like, or any combination thereof. The embodiments of the present application are not limited in this regard.
In fig. 1, the implementation device 11 and the server 12 are described as separate devices, and alternatively, the implementation device 11 and the server 12 may 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 are not limited in this regard.
The implementation main body of the implementation method of the data dynamic effect provided in the embodiment of the present application may be the implementation device 11 described above. As described above, the implementation device 11 may be an electronic device having a calculation processing function, such as a computer or a server. Alternatively, the implementation means 11 may be a processor (e.g., a central processing unit (central processing unit, CPU)) in the aforementioned electronic device; alternatively, the implementation device 11 may be an application program (APP) having a model training function installed in the electronic apparatus; further, the implementation device 11 may be a functional module or the like having a model training function in the electronic apparatus. The embodiments of the present application are not limited in this regard.
FIG. 2 is a flow diagram illustrating a method of implementing a data dynamic effect, according to some example embodiments. In some embodiments, the method for implementing the dynamic data effect may be applied to the implementation apparatus, the electronic device, and other similar devices as shown in fig. 1.
As shown in fig. 2, the method for implementing the dynamic data effect provided in the embodiment of the present application includes the following steps S201 to S203.
S201, responding to the installation operation of the target VUE plug-in of the front-end data development page by a user, installing the target VUE plug-in, and activating a data dynamic effect component library corresponding to the target VUE plug-in on the front-end data development page.
Wherein the data dynamic effect component library comprises a plurality of dynamic effect functional components; one dynamic effect function component corresponds to one dynamic effect parameter.
It should be noted that the data dynamic effect component library is created in advance, for example, the data dynamic effect component library may be a pre-created VueMotion library.
The data dynamic effect component library can be configured with functions of dynamic effects, application of a physical engine, a lightweight animation engine, animation curve optimization, transition merging optimization and the like. Through the packaged components or instructions, developers can conveniently apply the preconfigured dynamic effects and transitional effects, so that the user experience and the page interaction attractiveness are improved.
As one possible implementation, a developer (i.e., a user) may apply the database of data dynamic effects components by way of instruction receipt while performing front-end development. In order to facilitate the use of the developer, the implementation device can provide services in the data dynamic effect component library for the developer in the form of a VUE plug-in corresponding to the data dynamic effect component library. The developer only needs to install the Vuemotion plugin in the VUE application program, so that the instructions and functions provided by the Vuemotion plugin can be used.
For example, the implementation may create a Vue plug-in for registering Vue motion instructions and components. The implementation device may define the Vue plug-in a separate JavaScript file Vue-motion. Js:
import VueMotion from‘vue-motion’；
export default{
install(Vue){
Vue.use(VueMotion)；
}
}
in the code, the implementation device imports the Vuemotion module and then defines a Vue plug-in named Vuemotion. In the add-in's install method, the implementation device registers the VueMotion instruction and components using the vue.use method.
In some embodiments, in a Vue application, the implementation device may register the Vue plug-in as a global plug-in for use throughout the application. Specifically, the implementation device may register a plug-in the entry file of the Vue instance:
import Vue from‘vue’；
import VueMotion from‘./vue-motion’；
Vue.use(VueMotion)；
new Vue({
})；
in the above code, the implementation apparatus imports the Vue and VueMotion plugins, and then registers the VueMotion plugin using the Vue. In this way, when the developer performs front-end development, the implementation device can use the VueMotion instruction and the components in the whole application program.
S202, responding to a dynamic effect instruction input by a user in a target VUE plug-in, and determining input parameters of the dynamic effect instruction.
As one possible implementation manner, the implementation device receives a dynamic effect instruction input by a user in the target VUE plugin, and determines an input parameter input by the user under the dynamic effect instruction.
Illustratively, in the target Vue component, the user can use the v-motion instruction to add dynamic effects. For example, a v-motion instruction may be used in a button assembly to add a fade effect, such as:
<template>
<burron v-motion＝”’fade’”>Click me</button>
</template>
in the above code, the user uses the v-motion instruction to enter a string parameter 'fade' indicating the addition of the fade effect. The realization device can acquire the character string parameters through the codes.
It should be noted that, the user may add different dynamic effects by inputting different character string parameters according to actual requirements, which is not limited in this application.
S203, determining the target dynamic effect parameters which are the same as the input parameters, and displaying the target dynamic effect corresponding to the target dynamic effect parameters.
As a possible implementation manner, the implementation device traverses each dynamic effect parameter based on the input parameter, so as to determine a target dynamic effect parameter identical to the input parameter, and displays a target dynamic effect corresponding to the target dynamic effect parameter.
The technical scheme provided by the embodiment of the application at least brings the following beneficial effects: and responding to the installation operation of the target VUE plug-in of the front-end data development page by the user, installing the target VUE plug-in, and activating a data dynamic effect component library corresponding to the target VUE plug-in on the front-end data development page. Because the data dynamic effect component library comprises a plurality of dynamic effect functional components, one dynamic effect functional component corresponds to one dynamic effect parameter. Thus, in response to a dynamic effect instruction entered by a user in a target VUE plug-in, an input parameter of the dynamic effect instruction is determined, a target dynamic effect parameter identical to the input parameter is determined, and a target dynamic effect corresponding to the target dynamic effect parameter is displayed. Therefore, when the user performs front-end development, only needs to input a dynamic effect instruction to endow parameters of the dynamic effect to be realized to the dynamic effect instruction, and the corresponding dynamic effect functional component can be called, so that the corresponding dynamic effect is realized, the corresponding functional component is prevented from being manually developed, and the effect of improving the efficiency of generating the front-end page is further achieved.
In one design, in order to create the data dynamic effect component library, as shown in fig. 3, the implementation method of the data dynamic effect provided in the embodiment of the present application may further include:
s301, creating a directory structure of the data dynamic effect item, wherein a component folder is arranged in the directory structure.
As a possible implementation manner, the implementation device determines the name of the dynamic effect item of the data to be created, and creates a file structure corresponding to the item.
Illustratively, the implementation device creates a new Vue item through a Vue CLI or user output. The implementation device generates a folder named as vue-motion in the project as a storage position of the Vuemotion library. The implementation device creates the following files and folders in the "vue-motion" folder:
- "src" folder: for storing source code.
- "samples" folder: for storing example codes and presentation pages.
- "dist" folder: for storing the constructed library file.
S302, splitting the components to be developed into at least a dynamic effect functional component, an animation optimization functional component and a transitional effect functional component according to the display requirement of the data dynamic effect project.
As one possible implementation manner, the implementation device splits the components to be developed into at least a dynamic effect functional component, an animation optimization functional component and a transitional effect functional component according to the display requirement of a developer on the dynamic effect project.
S303, developing a dynamic effect functional component, an animation optimization functional component and a transitional effect functional component by using the VUE.
As a possible implementation manner, the implementation device obtains a dynamic effect configuration file input by a developer; the dynamic effect profile includes a first VUE code; and responding to the packaging instruction, and packaging the first VUE code to obtain the dynamic effect functional component.
In practical applications, the implementation device may create a core module named "VueMotion" for providing 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 realization device can integrate a physical engine library, such as 'physical. Js', and takes the physical engine library as a part of a dynamic effect engine, so that the dynamic effect is more real and realistic.
Optionally, the implementation device acquires an animation effect configuration file input by a developer; the animation effect profile includes a second VUE code; and responding to the packaging instruction, and packaging the second VUE code to obtain the animation effect functional component.
In practice, the implementation device may create a lightweight animation engine module called "animation engine" for managing the playback and rendering of animations. In the animation engine, the optimization of a key rendering path is realized, the requestanimation frame is used for rendering, the technologies of hardware acceleration and the like are supported, and the performance and fluency of the animation are improved. The implementation creates a module named "animation optimizer" for optimizing the animation curve. In the module, an algorithm is implemented to smooth and naturally animate curves, removing the adverse effects of jitter, pauses or excessive oscillations.
Optionally, the implementation device acquires an animation optimization configuration file input by a developer; the animation optimization configuration file comprises a third VUE code; and responding to the packaging instruction, and packaging the third VUE code to obtain the animation optimization function component.
In practical applications, the implementation device may create a module named "TransitionOptimizer" for automatically merging and optimizing transitional effects. In the "TransitionOptimizer", an algorithm is implemented to reduce the number of redraws and rearranges, improve performance, and simultaneously maintain the mixed effect of transitional effects. The realization device optimizes responsive transition through a Transmit Optimazer module and simulates the transition effect of real interaction behavior. The implementation device may integrate a library that supports 3D dynamic effects, such as "thread. Js", as part of the VueMotion library. Components or instructions for creating and processing 3D dynamic effects are provided in the VueMotion library.
Optionally, the implementation device acquires a transitional effect configuration file input by a developer; the transitional effect profile includes a fourth VUE code; and in response to the packaging instruction, packaging the fourth VUE code to obtain the transition effect functional component.
In practical applications, the implementation device may create a file in the "src" folder, for example "transitionoptimizer. Js", an algorithm for merging and optimizing transitional effects. The realization device defines a single object in a 'transitionoptimizer. Js' file, and is used for automatically merging and optimizing the transition effect.
Optionally, the first VUE code includes a first configuration parameter of the dynamic effect, the first configuration parameter including a duration, a rotation angle, a scaling of the dynamic effect; the second VUE code comprises a second configuration parameter of the animation effect, and the second configuration parameter comprises a rendering mode and a playing mode of the animation effect; the third VUE code comprises a third configuration parameter of animation optimization, and the third configuration parameter comprises an animation curve adjustment mode of animation optimization; the fourth VUE code includes a fourth configuration parameter for the transitional effect, the fourth configuration parameter including a color change, a size change for the transitional effect.
S304, storing the developed components in a component folder.
As one possible implementation, the implementation device stores the developed components in a component folder in response to the encapsulation instruction of the developer.
For example, a developer may create a Vue component or instruction named "Vue motion" for exposing the functionality of the core module for use by the developer. In the "Vuemotion" component or instruction, appropriate properties and event interfaces are provided so that a developer can configure and control the behavior of the dynamic effects, including configuring highly personalized animation effects, enabling a physical engine, setting animation curves, and the like. In the components or instructions, the aforementioned animation engine and optimizer module is used to ensure the play and rendering of the animation and the merging and optimizing functions of the transition.
A file, e.g., "vuemotion. Vue", is created in the "src" folder for encapsulating the Vue component or instruction.
In the "Vuemotion. Vue" file, the behavior and functionality of the Vue component or instruction is defined using the dynamic effects engine, animation engine, etc., described above.
Appropriate properties and event interfaces are provided so that the developer can configure and control the behavior of the dynamic effects.
S305, after the development of the data dynamic effect project is completed, at least packaging and publishing components in the data dynamic effect project to obtain a data dynamic effect component library which can be downloaded by a front-end user.
As one possible implementation, the implementation uses a Vue CLI or other construction tool to construct the source code as a library file. Further, the implementation device places the constructed library file in the "dist" folder so that other developers can install and use the library file through the CDN or npm.
In some embodiments, to facilitate developer use, the implementation device may create a presentation page in an "examples" folder, exposing various functions and usages of the VueMotion library, including highly personalized animation effects, application of a physics engine, responsive transition, 3D dynamic effects, and the like. A detailed document is written introducing the properties, APIs and example code of the VueMotion library so that other developers can understand and use the library.
FIG. 4 shows the flow of packaging a VueMotion library, including project determination, creation of a Vue plug-in, implementation of foundation components, design of application programming interfaces (Application Programming Interface, APIs), functional implementation, construction and packaging, writing documents and examples, testing and repair. Through the flow, the Vuemotion library can be successfully packaged for use by a developer in front-end development.
The foregoing embodiments mainly describe the solutions provided in the embodiments of the present application from the perspective of the apparatus (device). It will be appreciated that, in order to implement the above-mentioned method, the apparatus or device includes hardware structures and/or software modules corresponding to each of the method flows, and these hardware structures and/or software modules corresponding to each of the method flows may constitute a material information determining apparatus. Those of skill in the art will readily appreciate that the algorithm steps of the examples described in connection with the embodiments disclosed herein may be implemented as hardware or a combination of hardware and computer software. Whether a function is implemented as hardware or computer software driven hardware depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.
The embodiment of the application may divide the functional modules of the apparatus or the device according to the above method example, for example, the apparatus or the device may divide each functional module corresponding to each function, or may integrate two or more functions into one processing module. The integrated modules may be implemented in hardware or in software functional modules. It should be noted that, in the embodiment of the present application, the division of the modules is schematic, which is merely a logic function division, and other division manners may be implemented in actual implementation.
Fig. 5 is a schematic diagram of a structure of an implementation apparatus according to an exemplary embodiment. Referring to fig. 5, the implementation apparatus 40 provided in the embodiment of the present application includes a processing unit 401, a determining unit 402, and a display unit 403.
A processing unit 401, configured to respond to a target VUE plug-in installation operation of a user on a front-end data development page, install the target VUE plug-in, and activate a 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 comprises a plurality of dynamic effect functional components; one dynamic effect function component corresponds to one dynamic effect parameter; the determining unit is used for responding to the dynamic effect instruction input by the user in the target VUE plug-in, and determining the input parameters of the dynamic effect instruction; and the display unit is used for determining the target dynamic effect parameters which are the same as the input parameters and displaying the target dynamic effect corresponding to the target dynamic effect parameters.
Optionally, the processing unit 401 is further configured to: creating a directory structure of the data dynamic effect item, wherein a component folder is arranged in the directory structure; according to the display requirement of the data dynamic effect project, splitting the components to be developed into at least a dynamic effect functional component, an animation optimization functional component and a transitional effect functional component; developing a dynamic effect function component, an animation optimization function component and a transitional effect function component by using the VUE; storing the developed components in a component folder; after the development of the data dynamic effect project is completed, at least packaging and publishing the components in the data dynamic effect project to obtain a data dynamic effect component library which can be downloaded and used by a front-end user.
Optionally, the processing unit 401 is specifically configured to: acquiring a dynamic effect configuration file input by a developer; the dynamic effect profile includes a first VUE code; responding to the packaging instruction, and packaging the first VUE code to obtain a dynamic effect functional component; acquiring an animation effect configuration file input by a developer; the animation effect profile includes a second VUE code; responding to the packaging instruction, and packaging the second VUE code to obtain an animation effect functional component; acquiring an animation optimization configuration file input by a developer; the animation optimization configuration file comprises a third VUE code; responding to the packaging instruction, and packaging a third VUE code to obtain an animation optimization function assembly; acquiring a transitional effect configuration file input by a developer; the transitional effect profile includes a fourth VUE code; and in response to the packaging instruction, packaging the fourth VUE code to obtain the transition effect functional component.
Optionally, the first VUE code includes a first configuration parameter of the dynamic effect, the first configuration parameter including a duration, a rotation angle, a scaling of the dynamic effect; the second VUE code comprises a second configuration parameter of the animation effect, and the second configuration parameter comprises a rendering mode and a playing mode of the animation effect; the third VUE code comprises a third configuration parameter of animation optimization, and the third configuration parameter comprises an animation curve adjustment mode of animation optimization; the fourth VUE code includes a fourth configuration parameter for the transitional effect, the fourth configuration parameter including a color change, a size change for the transitional effect.
Fig. 6 is a schematic structural diagram of an electronic device provided in the present application. As shown in fig. 6, the electronic device 50 may include at least one processor 501 and a memory 502 for storing processor executable instructions, wherein the processor 501 is configured to execute the instructions in the memory 502 to implement the method for implementing the data dynamic effect in the above-described embodiments.
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 processor (central processing units, CPU), micro-processing unit, ASIC, or one or more integrated circuits for controlling the execution of the programs of the present application.
Communication bus 503 may include a path to transfer information between the above components.
Communication interface 504, using any transceiver-like device for communicating with other devices or communication networks, such as ethernet, radio access network (radio access network, RAN), wireless local area network (wireless local area networks, WLAN), etc.
The memory 502 may be, but is not limited to, read-only memory (ROM) or other type of static storage device that can store static information and instructions, random access memory (random access memory, RAM) or other type of dynamic storage device that can store information and instructions, but may also be electrically erasable programmable read-only memory (EEPROM), compact disc-read only memory (compact disc read-only memory) or other optical disk storage, optical disk storage (including compact disc, laser disc, optical disc, digital versatile disc, blu-ray disc, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer. The memory may be implemented by itself and it can be coupled to the processor 501 via a bus. The memory may also be integrated with the processor 501.
The memory 502 is used for storing instructions for executing the present application, and is controlled by the processor 501 to execute the present application. The processor 501 is configured to execute instructions stored in the memory 502 to implement the functions of the methods of the present application.
As an example, in connection with fig. 5, the processing unit 401, the determining unit 402, and the display unit 403 in the implementation apparatus 40 implement the same functions as those of the processor 501 in fig. 6.
In a particular implementation, processor 501 may include one or more CPUs, such as CPU0 and CPU1 of FIG. 6, as an embodiment.
In a particular implementation, as one embodiment, electronic device 50 may include multiple processors, such as processor 501 and processor 507 in FIG. 6. Each of these processors may be a single-core (single-CPU) processor or may be a multi-core (multi-CPU) processor. A processor herein may refer to one or more devices, circuits, and/or processing cores for processing data (e.g., computer program instructions).
In a particular implementation, electronic device 50 may also include an output device 505 and an input device 506, as one embodiment. The output device 505 communicates with the processor 501 and may display information in a variety of ways. For example, the output device 505 may be a liquid crystal display (liquid crystal display, LCD), a light emitting diode (light emitting diode, LED) display device, a Cathode Ray Tube (CRT) display device, or a projector (projector), or the like. The input device 506 communicates with the processor 501 and may accept input of 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 will appreciate that the structure shown in fig. 6 is not limiting of the electronic device 50 and may include more or fewer components than shown, or may combine certain components, or may employ a different arrangement of components.
In addition, the application further provides a computer readable storage medium, which when executed by a processor of the electronic device, enables the electronic device to perform the method for implementing the data dynamic effect provided by the embodiment.
In addition, the application further provides a computer program product, which comprises computer instructions, wherein the computer instructions, when run on an electronic device, cause the electronic device to execute the implementation method of the data dynamic effect provided by the embodiment.
Other embodiments of the present application will be apparent to those skilled in the art from consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the application following, in general, the principles of the application and including such departures from the present disclosure as come within known or customary practice within the art to which the application pertains. 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 implementing a dynamic effect of data, the method comprising:
responding to the target VUE plugin installation operation of a user on a front-end data development page, installing the target VUE plugin, and activating a data dynamic effect component library corresponding to the target VUE plugin on the front-end data development page; the data dynamic effect component library comprises a plurality of dynamic effect functional components; one dynamic effect function component corresponds to one dynamic effect parameter;
responding to a dynamic effect instruction input by a user in the target VUE plug-in, and determining input parameters of the dynamic effect instruction;
and determining the target dynamic effect parameters which are the same as the input parameters, and displaying the target dynamic effect corresponding to the target dynamic effect parameters.
2. The method according to claim 1, wherein the method further comprises:
creating a directory structure of the data dynamic effect item, wherein a component folder is arranged in the directory structure;
splitting the components to be developed into at least a dynamic effect functional component, an animation optimization functional component and a transitional effect functional component according to the display requirement of the data dynamic effect project;
Developing the dynamic effect function component, the animation optimization function component, and the transitional effect function component using VUE;
storing the developed components in the component folder;
after the development of the data dynamic effect project is completed, at least packaging and publishing components in the data dynamic effect project to obtain a data dynamic effect component library which can be downloaded and used by a front-end user.
3. The method of claim 2, wherein the developing the dynamic effects function component, the animation optimization function component, the transitional effects function component using VUE comprises:
acquiring a dynamic effect configuration file input by a developer; the dynamic effect profile includes a first VUE code;
encapsulating the first VUE code in response to an encapsulation instruction to obtain the dynamic effect functional component;
acquiring an animation effect configuration file input by a developer; the animation effect profile includes a second VUE code;
encapsulating the second VUE code in response to an encapsulation instruction to obtain the animation effect functional component;
Acquiring an animation optimization configuration file input by a developer; the animation optimization configuration file comprises a third VUE code;
encapsulating the third VUE code in response to an encapsulation instruction to obtain the animation optimization function assembly;
acquiring a transitional effect configuration file input by a developer; the transitional effect profile includes a fourth VUE code;
and responding to the packaging instruction, packaging the fourth VUE code, and obtaining the transitional effect functional component.
4. The method of claim 3 wherein the first VUE code comprises a first configuration parameter for the dynamic effect, the first configuration parameter comprising a duration, a rotation angle, a scaling of the dynamic effect; the second VUE code comprises a second configuration parameter of the animation effect, and the second configuration parameter comprises a rendering mode and a playing mode of the animation effect; the third VUE code comprises a third configuration parameter of animation optimization, and the third configuration parameter comprises an animation curve adjustment mode of animation optimization; the fourth VUE code includes a fourth configuration parameter for the transitional effect, the fourth configuration parameter including a color change, a size change for the transitional effect.
5. The device for realizing the dynamic effect of the data is characterized by comprising a processing unit, a determining unit and a display unit;
the processing unit is used for responding to the target VUE plugin installation operation of a user on a front-end data development page, installing the target VUE plugin and activating a data dynamic effect component library corresponding to the target VUE plugin on the front-end data development page; the data dynamic effect component library comprises a plurality of dynamic effect functional components; one dynamic effect function component corresponds to one dynamic effect parameter;
the determining unit is used for responding to a dynamic effect instruction input by a user in the target VUE plug-in, and determining input parameters of the dynamic effect instruction;
the display unit is used for determining the target dynamic effect parameters which are the same as the input parameters and displaying the target dynamic effect corresponding to the target dynamic effect parameters.
6. The apparatus of claim 5, wherein the processing unit is further configured to:
creating a directory structure of the data dynamic effect item, wherein a component folder is arranged in the directory structure;
splitting the components to be developed into at least a dynamic effect functional component, an animation optimization functional component and a transitional effect functional component according to the display requirement of the data dynamic effect project;
Developing the dynamic effect function component, the animation optimization function component, and the transitional effect function component using VUE;
storing the developed components in the component folder;
after the development of the data dynamic effect project is completed, at least packaging and publishing components in the data dynamic effect project to obtain a data dynamic effect component library which can be downloaded and used by a front-end user.
7. The apparatus according to claim 6, wherein the processing unit is specifically configured to:
acquiring a dynamic effect configuration file input by a developer; the dynamic effect profile includes a first VUE code;
encapsulating the first VUE code in response to an encapsulation instruction to obtain the dynamic effect functional component;
acquiring an animation effect configuration file input by a developer; the animation effect profile includes a second VUE code;
encapsulating the second VUE code in response to an encapsulation instruction to obtain the animation effect functional component;
acquiring an animation optimization configuration file input by a developer; the animation optimization configuration file comprises a third VUE code;
encapsulating the third VUE code in response to an encapsulation instruction to obtain the animation optimization function assembly;
Acquiring a transitional effect configuration file input by a developer; the transitional effect profile includes a fourth VUE code;
and responding to the packaging instruction, packaging the fourth VUE code, and obtaining the transitional effect functional component.
8. The apparatus of claim 7, wherein the first VUE code comprises a first configuration parameter for a dynamic effect, the first configuration parameter comprising a duration, a rotation angle, a scaling of the dynamic effect; the second VUE code comprises a second configuration parameter of the animation effect, and the second configuration parameter comprises a rendering mode and a playing mode of the animation effect; the third VUE code comprises a third configuration parameter of animation optimization, and the third configuration parameter comprises an animation curve adjustment mode of animation optimization; the fourth VUE code includes a fourth configuration parameter for the transitional effect, the fourth configuration parameter including a color change, a size change for the transitional effect.
9. An electronic device, comprising: a processor, a memory for storing instructions executable by the processor; wherein the processor is configured to execute instructions to implement the method of implementing a data dynamic effect of any of claims 1-4.
10. A computer readable storage medium having instructions stored thereon, which when executed by a processor of an electronic device, cause the electronic device to perform the method of implementing a data dynamic effect according to any of claims 1-4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311686594.1A CN117724715A (en) | 2023-12-08 | 2023-12-08 | Method and device for realizing dynamic effect of data, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311686594.1A CN117724715A (en) | 2023-12-08 | 2023-12-08 | Method and device for realizing dynamic effect of data, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117724715A true CN117724715A (en) | 2024-03-19 |
Family
ID=90199136
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311686594.1A Pending CN117724715A (en) | 2023-12-08 | 2023-12-08 | Method and device for realizing dynamic effect of data, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117724715A (en) |
-
2023
- 2023-12-08 CN CN202311686594.1A patent/CN117724715A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10254848B2 (en) | Cross-platform data visualizations using common descriptions | |
| US11531725B2 (en) | System and method for providing custom component compilation within a cloud-based con tent hub environment | |
| US11216253B2 (en) | Application prototyping tool | |
| EP3005301B1 (en) | Animation editing | |
| US20200089396A1 (en) | Automatically generating and applying graphical user interface resize-contraints based on design semantics | |
| CN103544024A (en) | Method and system for generating browser page and terminal device | |
| KR101552914B1 (en) | Web server application framework web application processing method using the framework and computer readable medium processing the method | |
| US10614158B2 (en) | Methods and systems for state-based web framework architecture | |
| US11347381B2 (en) | Dynamic synchronized image text localization | |
| CN117724715A (en) | Method and device for realizing dynamic effect of data, electronic equipment and storage medium | |
| Johansson et al. | Introduction to computing with python | |
| Wenz | Essential Silverlight 2 Up-to-Date | |
| US10768911B2 (en) | Managing software components for software application development | |
| WO2021051032A1 (en) | System and method for automatic suggestion and automatic selection for dynamic site compilation within a cloud-based content hub environment | |
| bin Uzayr | Mastering Vue. js: A Beginner's Guide | |
| US11238220B1 (en) | Dynamic user interface framework | |
| Lecrenski et al. | Professional Windows 8 programming: application development with C# and XAML | |
| Hipp | Slide Decks in HTML | |
| Steenbergen et al. | Analysis of using browser-native technology to build rich internet applications for image manipulation | |
| Xiao et al. | An MDA Based Widget Development Framework | |
| Del Sole et al. | Building Cross-Platform Apps with Xamarin. Forms | |
| Jackson et al. | Exploring Android App Development: The Lingo of Android and Building Your First Hello World App! | |
| Hrubiš | Knihovna pro tvorbu uživatelského rozhraní | |
| Khadka | Cyberinfrastructure for an online animation of high performance chemical dynamics simulations |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |