Components that Actually Move
To actually move components around during runtime usually involves binding all or part of an image or svg to the value property of a timer or signal generator. The symbol factory components all contain an Angle property. Binding the Angle property of a spinning part of a motor can help us visualize when the motor is running or not.
- Pick out a component that you would like to animate. I used the Single Stage Compressor from the Symbol Factory. You will also want to grab a Timer Component.
- Expand out the Single Stage Compressor component. You will notice that the whole component is made up of many smaller pieces. We want to select the piece called Group_Impeller.
- Bind the Group_Impeller's Angle property to the Value property of the Timer.
- We now need to modify the properties of the timer to ensure a good rotation. Set the Delay (ms) to 200, the Step By to 10, and the Bound to 360.
- You should now be able to set the Timer's Running? property to True, and your component will now animate. You can adjust the Delay (ms) to be lower or higher to adjust the speed at which the component rotates.
Giving the Illusion of Moving
With this method, you can make components look like they are moving without actually moving anything. What we do here is duplicate the component multiple times and modify each component to be a little different than the others, and then show and hide them in the correct order to make it seem like they move.
The following example uses a Signal Generator component to drive the animation, but any incrementing value can be used, such as the Value property on a Timer component, an accumulating value in a PLC, or the current time in seconds.
- Pick out a component to animate. For this example, I selected the Horizontal Conveyor with Perspective from the Symbol Factory. I also dragged a signal generator on the screen.
- Duplicated this component 10 times for a total of 11 conveyors.
- Select the first instance, expanded the Group_Conveyor_Belt, and moved the Path 4 and Path 5 Components. On this instance, I moved them both an equal distance left so that the leftmost component is on the left edge of the conveyor.
- Repeat this with the rest of the components, except move them slightly to the right of the previous instance. Notice how the gray bars slowly move from left to right over all the components when viewed in sequence.
- Next, stack them all on top of each other exactly. This is easily done by selecting all of the conveyors, then going into the Alignment menu and selecting both Align Centers Horizontal and Align Centers Vertical.
Once stacked, select the first Conveyor from the Project Browser (the one that has the bars on the far left), and place an expression binding on its Visible property that looks like this.
Duplicated this across all of the conveyors, but increment the first number by 1 each time. The last conveyor (the one that has the bars on the far right) should have the following expression:
- Select the Signal Generator component. Set the Signal Type to Ramp, the Period to 1000, the Values/Period to 11, the Upper Bound to 11, and the Lower Bound to 0.
- Setting the Running? property of the Signal Generator to True will now cycle through showing all of the conveyors, which will make it look like it is moving.
Animation in Scripting
Additionally, the system.gui.transform function can move and resize components from a Python script. More details can be found in the Scripting Appendix.