Learn how to resize, rotate, and move components on a screen. SVG images have X, Y, width, height, and angle properties to make animation easy.

Video recorded using: Ignition 8.1


(open in window)

[00:00] In this lesson, I'll show you how to animate a component which is a useful way to visualize whether a machine is running or not with a quick glance. For a basic example, I'll start by creating a basic shape with the drawing tools and vision. Once I click my shape you can see that there are these position properties here which include the X Y width height and angle. In order to animate something we can bind these to something Dynamic like a tag or an expression. For example, I have these tags my tag browser that I can bind to these properties and you'll see that when the tags change the property values change and the component will move around the screen. Normally, we'd want to animate an SVG. So I'll pull one in from the simple Factory. I'll look for a fan like this one and I'll drag it onto my window. We wouldn't expect a tag the represents the angle of our fan blades. But instead we might expect some sort of tag that tells us our fan is on like my fan status tag here in the tag browser.

[01:07] So, how are we going to spin these blades when the fan status is one? I'll do this with a timer component that can be found towards the bottom of the component palette. I'll drag this onto my window and this component has a running property that I can bind to my fan status tag, when the running property is true. It will increase the value up to the Bound in an increments by the step by property. So we'll quickly set up these properties for my fan. A shapes angle property is some value from 0 to 360 since there are 360 degrees in a circle. So I'll set the bound to 360 and I'll make it increment by let's say 30. Also going to set the delay to 250 milliseconds and I'll remove the initial delay. Now I only want to animate the blades on this fan. So we'll have to drill into the SVG until I find that group we can see it's here. It's called group impeller blades. All I have to do is bind the angle property to the timer's value property and set the fan status to one. And now I have spinning fan blades.

[02:07] If you'd like to see the blades spin a different speeds you can play around with the delay and step by properties until you find something you like.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.