This lesson is part of the Perspective Components and Bindings course. You can browse the rest of the lessons below.


Autoplay Off

Supplemental Videos


Animated Style Classes


Learn how to use the "Animated" option in your Style Classes. Animation allows style values to change over time.

Video recorded using: Ignition 8.0


(open in window)

[00:00] In this lesson, we'll talk about the animated style classes. An animated style class transitions across multiple style configurations over some period of time. You can see here that I have a label with a style class called 'alarm' already attached to it. I want this style class to act as a flashing alarm indicator so let's go ahead and double click on it to open it up. You'll notice when configuring the style class that in the upper right-hand corner, there's the option to make this style animated. When we enable this, the interface will change just a bit with more options to make the style animated. Now we won't be going over all these properties here. They're all defined in our user manual, but we'll go over some of the important ones. The way the animated style class works is it transitions between two or more different styles. You'll notice first off there is a duration property. The animation is going to occur across the duration period which in this case is set to two seconds. The different stye configurations are then set up on this line down here that goes from zero to 100%. For example, we currently have 0% selected so if I go into my style configuration and set something like a background color, maybe one of these light reds here. Now if I were to apply this and move this edit style window out of the way, you'll notice that my label is transitioning from a red to a white. The white color here comes from the other style which is set up on 100%. Now because I didn't set anything there, it's just going to use the sort of base style where the background color is white, but if I wanted to change that to a different color, I would simply need to select 100%. You'll notice the style configuration sort of resets here. I no longer have that red background color and I can come in and apply maybe a different background color, say maybe a yellow color. I'll go ahead and hit 'apply' to apply that change and if we look at our label now, we can see that it bounces between that red color at 0% and that yellow color at 100% over the duration of two seconds. Finally, if I wanted to add more style configurations to my animation, more stops that the animation has to make along this line, then we simply need to right-click on the line and you'll notice we have the option to add a stop. Just like before, this new stop will have reset all of the style configurations and we can set them as we see fit and I can also move this stop around anywhere along this line to determine when that transition happens.

You are editing this transcript.

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