Creating dynamic movement animations

Introduction

Hello and welcome to a new guide on how to best use Movicon.NExT™.

In this technote, we will use an example to show you how to animate an object by making it follow a predefined path.

Example

To obtain movement animations, Movicon.NExT offers an animation feature called Composed Movement to enable you to do this.
This guide uses an example to give you a better idea of how this is done.
This example is very simple: an object will be overlapped on a polyline object on screen. The polyline will represent the path which the object will follow. A switch will also be placed on the screen to control the animation.

Tag creation

After having launched the Movicon.NExT development environment and created, or loaded, a project, proceed with creating the tag which will be used to animate the objects. To do this:

• Open the I/O Data Server from the project tree in the Project Explorer window and select the Tag List tab.
• Right-click on the workspace and select the Add New Tag option from the menu that appears.
• Configure the tag using its Properties window in the following way:
• 
  

  Name	boolTag
  Model Tyoe	Variable
  Data Type	Boolean

  
  
• Confirm the changes by clicking the Accept Changes icon on the toolbar at the top of the tag’s Properties window.

Once you have finished configuring the tag, save the project by clicking Save all icon on the Movicon.NExT editor’s toolbar.

Screen creation

Now create a screen if not already done so:

• Look for the Screens resource in the project's tree structure in the Project Explorer window and select it.
• Right-click it and select the New option from the menu which opens.
• A New Screen popup will appear through which you can set the screen's main properties. Configure the screen as follows:
• • Width: 1920
  • Height: 1080
  • Name: Main
• Click the OK button to confirm the configuration.

Once the screen has been created, you can then change the project's properties by inserting the screen as the project's Main screen which will show when the project starts up. To do this:

• Select the name of the project from the application's tree structure.
• Open the Properties window.
• Change the following project properties in this way:
• • Startup Page Type: Main Screen
  • Startup Screen Name: Main

Once you have finished configuring the project startup page, click on the Save All icon located on the toolbar at the top to save the project.

Double-check that the Main screen is open then click on the Toolbox tab on the far right of the editor next to the Properties window.
Drag the Rectangle and Polyline objects from the Draws folder onto the screen. Then drag a Simple Switch from the Switches>Toggle Switches folder onto the screen.

Assign the boolTag tag to the switch by filling in the Tag field in the Properties window, or by dragging the tag from the project tree onto it and resize the rectangle to look like a square.

Select the polyline and configure it:

• Add an intersection point by clicking on the object while keeping the Shift key from the keyboard pressed down.
• Place the polyline in such a way to create a path.

Select the square and place it on one of the polyline’s ends.

Double-check that you have selected the square, open the Animations tab located at the bottom of the Movicon.NExT development environment.
Open the animations panel, scroll the available options and select the Composed Movement animation from the list.
Now that the Composed Movement animation has been added to the list of animations associated to the object, enter the boolTag tag in the Tag field, select the Trigger option in the Execution Type field, and enter Polyline in the Path Line Control name field. Enable the Use Barycenter and Auto-Reverse options and increase the Animation Time from 1000 to 5000 milliseconds.

Click on the Save All icon located on the toolbar at the top of Movicon.NExT editor to save the project.

Test Runtime

To test everything, launch the project into runtime by clicking on the Start Runtime icon.
When clicking on the switch at runtime, the boolTag tag’s value should change from 0 to 1 triggering the square to follow the path defined by the polyline.