Perspective Animation

Ignition
,
1

Hello everyone,

I'm working on a project in Ignition Perspective and would like to add some animations to images in the interface. Specifically, I’m looking for ways to make certain images move, rotate, or pulse based on different triggers or events (e.g., button clicks, value changes, or even alarms).

Has anyone implemented animations in Perspective? If so, what are the best practices and tools to use? Are there any built-in animation components apart from the valve, container and motor or do I need to use custom CSS/JavaScript for this?

I need a moving conveyor in my perspective screen

Looking forward to your insights and recommendations!

2

Perspective style classes have a Animated checkbox in the top right corner. Check it and you'll see some options appear:

image
image765×203 10.3 KB

Now you can define a style for 0% and another one for 100%, and use the options to configure the transition from one state to the other.

You can also use a component's props.style to set up transitions from one state to another.
For example if you set opacity: 0 on some trigger, you can add transition: opacity 500ms linear to make it fade over 500ms instead of disappearing instantly.

The next step is using the stylesheet for animations, using keyframes.

Which method you chose depends on what you want to do.

2 Likes
3

I would recommend using the advanced style sheet for this. You can add an advanced style sheet to your project by right clicking on the "Styles" folder and selecting "Enable Advanced Stylesheet".

You can create custom CSS classes in there. You have to prefix them with ".psc-".

If you make a class called ".psc-flash-image" you would apply it to an object by putting "flash-image" in the "classes" property.

The reason I recommend using the advanced stylesheet is because the UI for the standard styles is limited and specifically the animations are limited. I don't think you can input ranges on the stops but maybe I just missed something. For example, I don't think you could do this blink animation in the standard styles:

.psc-blink-visible{
	animation: blink 1.2s linear infinite;
}

 @keyframes blink {
   0%, 49.9%{
     opacity: 0;
   }
   50%, 100%{
     opacity: 1;
   }
 }