Client Animation

The Client Animation feature allow you to animate visualizations fast and easy. The animation runs independently of the task cycle of the visualization task VISU_TASK. The necessary computing resources for the animation are executed directly in the client.

Movement
Overlay
Time animation
Image animation
Activating the client animation
Configuring the visualization element

Movement

For example, a visualization element can approach a target position, rotate dynamically, or appear in smooth transitions.

Animatable Property	Movement
Absolute movement, Movement, X, Y	The specified target position is approached.
Absolute movement, Interior rotation Absolute movement, Exterior rotation	The rotation is animated from the previous angle to the new angle. Groups, frames, and native controls can also rotate.

Animatable Property

Movement

Absolute movement, Movement, X, Y

The specified target position is approached.

Absolute movement, Interior rotation

Absolute movement, Exterior rotation

The rotation is animated from the previous angle to the new angle.

Groups, frames, and native controls can also rotate.

Overlay

Visualization elements and native controls can be overlaid or superimposed by elements or dialog elements.

Time animation

Dialogs are shown and hidden with smooth transitions.
Elements are shown and hidden with smooth transitions. You can control the use the State variable, Invisible property to the visibility of a visualization element.
Menus are displayed smoothly.
Frame visualizations change seamlessly, moving in and out of view with smooth transitions.

Image animation

Images in GIF graphics format or as SVG vector graphics are interpreted as animations and displayed in motion at runtime.

Activating the client animation

Requirement: The CODESYS project contains an application with a visualization.

In the Devices view, open the Visualization Manager.
Select the Support client animations and overlay of native elements option.

Note: This option is displayed only when CODESYS WebVisu clients have been inserted below the Visualization Manager.

⇒ The visualization elements are configured with the Animation duration and Bring to foreground properties. Now the client animation is enabled.

Configuring the visualization element

A visualization element is animated automatically when at least one animatable property changes its value at runtime. In this case, the duration of the animation is not 0 and has been configured in the Animation duration property. The animation is processed by the client.

Requirement: The client animation is enabled.

Select a visualization element.
In the respective Properties view, in the Animation duration input field, specify the value 500.

⇒ Now the animation lasts 500 milliseconds.
Declare the position variables, for exampling in the interface editor of the visualization.

⇒
Interface editor
```
VAR
 iXPosition : INT;
 iYPosition : INT;
END_VAR
```
Select the Absolute movement, Movement, X property and assign the variable iXPosition.
Select the Absolute movement, Movement, Y property and assign the variable iYPosition.
Program an input configuration, for example to control a position change.

⇒ Property Input configuration, OnMouseClick: Execute ST Code.
Execute ST Code
```
iXPosition := 100;
iYPosition := 100;
```
Build, start, and download the application.

⇒ The application with the visualization is running. When the user clicks the visualization element, it travels dynamically to the set position.