CN115543503A - Image animation control method - Google Patents

Abstract

The invention discloses an image animation control method, which relates to the field of visualization system development and comprises the following steps: s1, carrying out continuous snapshot screenshot on a specific image body hidden on a screen and positioned on a system background; s2, processing each snapshot screenshot in real time by using a time-varying image trimming program; and S3, transmitting the processed snapshot screenshot to a screen in real time for image updating so as to form an animation. The invention makes the animation effect of specific images such as UI chart and the like more diversified, and has low development cost and wide universality.

Description

Image animation control method

Technical Field

The invention relates to the field of visualization system development, in particular to an image animation control method.

Background

The visualization system is a system capable of displaying data information in visual charts and graphs; the animation effects of UIs such as charts in a visualization system in the prior art have the following characteristics:

1. when the UI is displayed or hidden, the transparency, the position and the size of the whole UI are directly subjected to gradual change processing, so that the animation effect is achieved. The method has the defects of single effect, only three effects and no expansion of more animation effects.

2. When the UI is displayed or hidden, the gradation processing of the transparency, position, and size as described in 1 is added to each element (such as a title) inside the UI, thereby achieving the effect of animation. The method has the disadvantages that animation effects need to be added aiming at a large number of UI elements in the UI, so that the development workload is large, the maintenance is difficult, the expansion is difficult, and the internal UI elements need to be processed when one UI is made.

Disclosure of Invention

The technical problem to be solved by the invention is to provide an image animation control method, which can facilitate the display and hiding operation of a UI chart by a system, has high expansibility, can quickly and efficiently expand more animation effects, not only can enrich the interface effect of a visualization system, but also improve the development efficiency of the UI and reduce the development cost.

In order to achieve the purpose, the invention adopts the following technical scheme:

an image animation control method comprises the following steps:

s1, continuously snapshotting a specific image body hidden on a screen and located in a system background;

s2, processing each snapshot screenshot in real time by using a time-varying image trimming program;

and S3, transmitting the processed snapshot screenshot to a screen in real time for image updating so as to form an animation.

Preferably, the steps further include a pre-step S0, S0 including:

s01: carrying out initial snapshot screenshot on a specific image displayed on a screen;

s02: displaying the initial snapshot screenshot on a screen instead of the specific image while hiding the specific image ontology on the screen.

Optionally, the specific image is a UI chart.

Optionally, the retouching program is a shader program.

Optionally, in S1, a snapshot screenshot is performed on the specific image at a time interval t. Where preferred, t =50 milliseconds.

Optionally, when a particular image needs to be animated: the image repairing program in the S2 changes along with time to enable the specific image to be complete from disappearance to deformity; and the method further comprises S4: and when the snapshot screenshot of the specific image displayed on the screen is changed into a complete snapshot, hiding the snapshot screenshot on the screen and displaying the specific image body.

Optionally, the process of changing the cropping program over time to make the specific image complete from disappearance to disappearance includes, but is not limited to, any one of the following: gradually displaying from left to right; gradually displaying from right to left; gradually displaying from the upper left corner to the lower right corner; gradually from the lower right corner to the upper left corner.

Optionally, when animation hiding of a particular image is required: the retouching procedure in S2 changes over time such that the particular image goes from complete to incomplete to vanishing. The process of the retouching procedure changing over time such that the specific image is complete to incomplete to disappear includes, but is not limited to, any of the following: gradually hiding from left to right; gradually hiding from right to left; gradually hiding from the upper left corner to the lower right corner; gradually hiding from the lower right corner to the upper left corner.

Optionally, the method further includes, in S1, a preparation step:

s11: compiling a picture repairing program changing along with time according to the animation effect requirement;

s12: creating a snapshot component for the specific image, wherein the snapshot component is used for storing snapshot screenshots and managing a retouching program;

s13: a camera is created for capturing a snapshot screenshot of the particular image.

Optionally, the method is used for Unity engine software.

The above-mentioned time-varying retouching program may be: over time, the retouch changes, such as changing from one shader to another; it is also possible that parameters within the repairer are changed, such as still using the same shader, but the shader parameters change over time. The changing processes are preset through programs, when the animation starts, the retouching program is controlled by an external program (for example, a snapshot component is adopted, the snapshot component updates a snapshot along with the change of time and modifies a certain parameter of the shader program) to change, and therefore the processing of the retouching program on the image changes along with the change of time.

Compared with the prior art, the invention has the advantages that:

1. according to the invention, more animation effects can be rapidly and efficiently expanded only by writing a new map repairing program or changing the map repairing program and exposing new parameters, and the interface presentation of a visual system is greatly enriched.

2. Because the invention can realize the animation effect by operating the whole UI chart after screenshot, the invention does not need to independently adjust the display effect of each element in the chart in the animation operation process, improves the development efficiency of the UI and can obviously reduce the development cost.

3. The method has simpler process and can realize smooth animation effect on equipment with lower performance.

4. The method has modularized implementation steps, and can be expanded to different UI charts and any other images after the program is compiled, thereby greatly improving the universality and simultaneously reducing the development cost.

Advantages of additional aspects of the invention will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention.

Drawings

FIG. 1 is a general flow diagram of a display animation method of the present invention;

FIG. 2 is a flow chart of the present invention display animation method for a UI diagram;

FIG. 3 is a snapshot screenshot of the UI diagram of the present invention in its complete state;

FIG. 4 is a block diagram of the invention after adding a snapshot component to the UI diagram in the Unity software;

FIG. 5 is a first schematic diagram of the animation display process from the top left corner to the bottom right corner according to the present invention;

FIG. 6 is a second schematic view of the animation display process applied from the top left to the bottom right according to the present invention;

FIG. 7 is a third schematic diagram of the animation display process applied to the upper left corner to the lower right corner of the present invention;

FIG. 8 is a fourth schematic diagram of the animation display process applied to the upper left corner to the lower right corner of the present invention;

FIG. 9 is a fifth schematic diagram of the animation display process applied to the upper left corner to the lower right corner of the present invention;

FIG. 10 is a first schematic diagram of the present invention applied to dissolve hidden animation;

FIG. 11 is a second schematic diagram of the present invention applied to dissolve a hidden animation;

FIG. 12 is a third schematic diagram of the present invention applied to a dissolve hide animation;

FIG. 13 is a shader parameter panel shot for implementing a clipping effect in Unity software.

Detailed Description

The following description of the embodiments of the present invention will be made with reference to the accompanying drawings 1 to 13.

The algorithm of the present invention is a general algorithm, and the following detailed description uses Unity Engine software to exemplify the implementation of the algorithm, and some contents will relate to technical details of Unity Engine, but it should be clear that the algorithm is not limited to the software.

A control method of image animation, when needing to display a UI diagram of the animation, the computer backstage supporter presumes the UI diagram to be hidden state invisible to the screen and carry on a snapshot screenshot to the UI diagram at the interval of time t1 in the computer backstage supporter in advance, set up a shader program used for processing the snapshot screenshot corresponding to each snapshot screenshot, the shader program changes with time, the shader program makes the picture processed turn from disappearing into incomplete and become intact again under the change; the computer system sends the snapshot screenshot processed by the shader program to a position where the UI diagram is supposed to be displayed in real time and displays the snapshot screenshot on a screen in an updating mode; when the UI chart snapshot screenshot displayed on the screen is in a complete state, hiding the snapshot screenshot and displaying the original UI chart on the screen.

When a UI chart needs to be hidden in an animation mode, the system firstly shoots a snapshot screenshot of a complete UI chart and displays the snapshot screenshot in a screen area where the UI chart is located, and meanwhile the UI chart is set to be in a hidden state that a screen is not visible; next, the computer background carries out snapshot screenshot on the UI diagram at intervals of t2, a shader program used for processing the screenshot is arranged corresponding to each snapshot screenshot, the shader program changes along with time, and the change of the shader program enables the processed image to be changed from complete to incomplete and then to disappear; the computer system sends the snapshot screenshot processed by the shader program to a position where a UI chart is supposed to be displayed in real time and updates and displays the snapshot screenshot on a screen; and when the UI chart snapshot screenshot displayed on the screen is in a disappearing state, hiding the snapshot screenshot on the screen and continuously hiding the original UI chart on the screen.

Preferably, the method further comprises a preparation phase comprising: s1: compiling a shader program which changes along with time according to animation effect requirements; s2: creating a snapshot component for a UI chart needing animation display or hiding, wherein the snapshot component is used for storing a snapshot screenshot and managing a retouching program; s3: a camera is created for capturing a snapshot screenshot of the UI chart.

Preferably, t1 is set to 50 milliseconds.

Preferably, t2 is set to 50 milliseconds.

Optionally, the process of the shader changing the processed image from disappearing to being a remnant to being a complete image includes cropping an animation display form, the cropping animation form including any one of: gradually displaying from left to right; gradually displaying from right to left; gradually displaying from the upper left corner to the lower right corner; gradually displayed from the lower right corner to the upper left corner.

Optionally, the process of the shader making the processed image change from complete to incomplete to disappear includes a cropping animation hiding form, and the cropping animation hiding form includes any one of the following: gradually hiding from left to right; gradually hiding from right to left; gradually hiding from the upper left corner to the lower right corner; and gradually hiding from the lower right corner to the upper left corner.

Optionally, the method is used for Unity engine software.

More specifically: as shown in fig. 2, when the system needs to be entered first, each UI diagram is created, and then the UI diagram needs to be animated or hidden, a preparation phase is performed first:

the first step is as follows: loading a shader for realizing a map animation effect;

the second step is that: creating a snapshot component for each UI diagram;

the third step: creating a camera that captures a UI snapshot;

the following is the implementation phase:

the fourth step: before the animation begins, capturing a snapshot of the UI chart body on the screen at the moment, displaying the snapshot on the screen where the UI chart body is located, and hiding the UI chart body on the screen (but the UI chart body still exists in the system, so that the UI chart body does not prevent the computer from carrying out screenshot even if the UI chart body is hidden in the screen);

the fifth step: performing animation processing on the snapshot (continuously performing screenshot on the hidden UI chart body in the background, and processing by using a shader program which changes along with time to obtain different pictures of each frame, wherein all the pictures are combined to form an animation) and then updating and displaying the animation on a screen;

and a sixth step: ending the animation, hiding the snapshot, displaying the UI diagram body (if this is a display animation) or continuing to hide the UI diagram body (if this is a hide animation).

Each step is explained in detail below:

the first step is as follows:

1. the chartlet refers to a static picture used for rendering in an Image component in the Unity Engine;

2. the Shader refers to a Shader in the Unity Engine, is a section of program code running on the GPU and is used for determining the final rendering effect of the picture;

3. the shader implements certain charting effects, such as clipping, dynamic blurring, etc.;

4. the shader exposes parameters for the outside to dynamically adjust the expression degree of the mapping effect.

5. The shader key parameters are floating point numbers with the range limited between 0 and 1, 0 is a state that a map is completely invisible, 1 is a state of the map, and the middle of 0 to 1 is a state that the map effect is changed.

6. By writing different shaders, the animation effect can be quickly expanded.

FIG. 13 is a screenshot of a shader parameter panel for clipping effects, where one shader can achieve multiple effects:

clipping Left: cutting from left to right;

clipping Right: cutting from right to left;

clipping Up: cutting from top to bottom;

clipping Down: cutting from bottom to top;

clipping Diagnonal: and obliquely cutting the parallel diagonal lines from top left to bottom right.

The second step:

1. the UI diagram refers to the minimum unit for carrying out UI animation, and is a diagram with complete business expression, such as a bar chart, a line chart and the like. For each UI chart, an animation effect, duration of animation playing and an animation motion curve are configured in advance; the animation is realized in the subsequent process by a shader or the like.

2. Snapshot or snapshot screenshot, wherein a pointer carries out one-time snapshot on a UI chart to obtain a static picture;

3. the snapshot component is used for storing snapshot screenshots and managing a retouching program and is an extension of an Image component in the Unity Engine; FIG. 4 is a schematic diagram showing the location of the snapshot component in the software;

4. according to the animation effect name configured by the UI, a corresponding shader can be added to the snapshot component; the snapshot component updates the snapshot and modifies a certain parameter of the shader program along with the change of time, so that the shader program processes the snapshot along with the change of time, which is the process of generating the animation. The shader program can be added or modified as required, so as to achieve different animation effects.

The third step:

1. camera refers to the Camera component in Unity Engine;

2. the camera may be configured to render a layer, the camera configured to render only UI charts;

3. the camera is used for capturing and capturing a UI snapshot, and as shown in FIG. 3, capturing of one complete UI is performed;

the fourth step:

1. firstly, acquiring the position and the size of a UI chart;

2. calling a screenshot interface of the camera to obtain a screenshot of the current visual system, wherein the screenshot only comprises a UI chart due to the setting in the third step;

3. then according to the position and the size of the UI diagram, capturing the UI part in the screenshot as a snapshot, and transmitting the snapshot to a snapshot component of the UI for storage management;

4. and hiding the UI body and displaying the snapshot at the position of the UI body on the screen.

The fifth step:

1. acquiring animation duration and an animation motion curve preset by a UI chart, and starting playing the animation;

2. at each frame of the animation play:

2.1 get a new snapshot of the UI body in order to synchronize the UI contents (since the values in the UI body may change in real time).

2.2 the snapshot component updates and renders the newly acquired snapshot;

2.3, calculating parameter values required to be transmitted to the shader according to the animation playing time and the animation motion curve;

2.4, modifying the exposed parameters of the shader according to the calculated parameter values;

3. the animation is played forward, namely the parameters are from 0 to 1, and the display process of the UI is expressed;

4. the animation is played back, namely the parameters are from 1 to 0, and the hiding process of the UI is represented.

And a sixth step:

1. when the animation is finished, hiding the snapshot;

2. and displaying the UI chart body (if displaying the animation) or hiding the UI chart body (if hiding the animation), and ending the whole animation process.

Taking the following two groups of pictures as an example, the animation process of two UI animation effects achieved by this technique is represented, but by changing the shader program, the displayed or hidden animation effect can be changed. Effect 1: oblique cutting type display: as shown in fig. 5 to 9; effect 2: soluble hiding: as shown in fig. 10 to 12.

One shader program may correspond to one or more animation effects:

the dissolve effect of fig. 10-12 is "one shader program for one animation effect" which is a single effect shader.

From left to right, from top to bottom and obliquely clipping, the effects are realized by another shader, and only different parameters in the shader are adjusted, and the effects belong to the fact that one shader corresponds to a plurality of animation effects.

The reader should understand that in the description of this specification, reference to the description of the terms "one embodiment," "some embodiments," "an example," "a specific example," or "some examples," etc., means that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the invention. In this specification, the schematic representations of the terms used above are not necessarily intended to refer to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples. Moreover, various embodiments or examples and features of various embodiments or examples described in this specification can be combined and combined by one skilled in the art without being mutually inconsistent.

In the embodiments provided in the present application, it should be understood that the disclosed method can be implemented in other ways. For example, the above-described method embodiments are merely illustrative, and for example, the division of steps into only one logical functional division may be implemented in practice in another way, for example, multiple steps may be combined or integrated into another step, or some features may be omitted, or not implemented.

The above method, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention essentially or partially contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product stored in a storage medium and including instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-only memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.

While the invention has been described with reference to specific embodiments, it will be understood by those skilled in the art that various changes in form and details may be made therein without departing from the spirit and scope of the invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims (10)

1. An image animation control method is characterized by comprising the following steps:

s1, continuously snapshotting a specific image body hidden on a screen and located in a system background;

s2, processing each snapshot screenshot in real time by using a picture repairing program changing along with time;

and S3, transmitting the processed snapshot screenshot to a screen in real time for image updating so as to form an animation.

2. An image animation control method as claimed in claim 1, wherein the steps further include a preceding step S0, and S0 includes:

s01: carrying out initial snapshot screenshot on a specific image displayed on a screen;

s02: displaying the initial snapshot screenshot on a screen instead of the specific image while hiding the specific image ontology on the screen.

3. An image animation control method according to claim 1 or 2, wherein the specific image is a UI chart.

4. The method of claim 1, wherein the cropping program is a shader program.

5. An image animation control method as claimed in claim 1 or 2, wherein when a specific image is required to be animated:

the image repairing program in the S2 changes along with time to enable the specific image to be complete from disappearance to deformity;

and the method further comprises S4: when the snapshot screenshot of the specific image displayed on the screen becomes complete, hiding the snapshot screenshot on the screen and displaying the specific image body.

6. The image animation control method according to claim 1, wherein the process of the retouching program changing with time to make the specific image from disappearing to incomplete to complete comprises any one of the following: gradually displaying from left to right, from right to left, from upper left to lower right, and from lower right to upper left.

7. An image animation control method as claimed in claim 1 or 2, wherein, when a specific image is required to be hidden by animation:

the retouching procedure in S2 changes over time such that the particular image goes from complete to incomplete to vanishing.

8. The image animation control method according to claim 7, wherein the process of the retouching program changing with time to make the specific image complete to incomplete and disappear comprises any one of the following: gradually hiding from left to right; gradually hiding from right to left; gradually hiding from the upper left corner to the lower right corner; and gradually hiding from the lower right corner to the upper left corner.

9. An image animation control method as claimed in claim 1, further comprising, in S1, a preparation step of:

s11: compiling a picture repairing program changing along with time according to the animation effect requirement;

s12: creating a snapshot component for the specific image, wherein the snapshot component is used for storing snapshot screenshots and managing a retouching program;

s13: a camera is created for capturing a snapshot screenshot of the particular image.

10. An image animation control method as claimed in claim 1, 2 or 9, wherein the method is used in Unity engine software.

Images