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 Enhanced 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.
When searching Symbol Factory, make sure to select the Enhanced radio button in the search window. The enhanced symbols have groupings that enable you to more easily animate them.
- Pick out a component that you would like to animate. For this example, we used the Single Stage Compressor from Symbol Factory. You will also want to drag a Timer component onto your window.
- In the Project Browser, click the Expand
- 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.
- Set the Timer's Running? property to True.
- Your Compressor symbol 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, we chose the Horizontal Conveyor with Perspective from the Symbol Factory. We also placed a signal generator symbol on the window.
- Duplicate this component 10 times for a total of 11 conveyors on the window.
- Select the first instance of the component then choose Component > Ungroup.
- In the Project Browser, expand the Group_Conveyor_Belt. Select Path 5.
- Move Path 5 to the left and then move Path 4 the same distance to the left. In this example, we 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.
Select each Conveyor image individually select Component > Group.
Next, 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:
Repeat Step 8 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:
- Next, stack all of the conveyer images them all on top of each other exactly. This is easily done by selecting all of the conveyors, going into the Alignment menu, then selecting Align Centers Horizontal icon and Align Centers Vertical icon.
- 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.
- Set the Running? property of the Signal Generator to True and it will now cycle through showing all of the conveyors, which will make it look like it is moving.
- Save the project.