Timer component in perspective

Hi
I want to create some animation like fan rotation, moving arrow, object moving in conveyor,…
In vision I do these kind of animation with timer component and use it’s value in my SVG shapes.
In perspective we don’t have timer and I need to create a tag and simulate timer behaviour on gateway script and bind it’s value to angle of my SVG shape.
The problem is communication between gateway and client is slow and bit stable. So animations are stuttering a lot.
So having a timer component in perspective is good idea which run by JavaScript in browser.
Mean while any idea will be very helpful for this problem.

You can use CSS animations for true animations (will run quite efficient normally).

F.e. for rotating:

Note that the solution does add some mozilla and webkit specific extensions. Those aren’t needed when modern browsers are used.

So just put the following in your global CSS

@keyframes spin { 100% {  transform:rotate(360deg); } }

And add rotation to the element by putting a reference to spin inside the element CSS.

animation:spin 4s linear infinite;
3 Likes

Another alternative is to use SMIL animations (part of the SVG standard) instead of CSS.

They’re better integrated with the SVG coordinate system, but they seem to be heavier on the CPU of the clients (sometimes this causes stutter). Apparently browsers can’t optimize them as well as CSS.

See
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform

1 Like

Hi
Thanks a lot. That’s sounds promising.
I’m quite unfamiliar to ccs3. Could you please send me a ready made example of ccs3 rotating an SVG shape in perspective so I can investigate and quickly start with it?
Thanks.

Not quite sure where the global CSS is for perspective. Can you please elaborate?

Apparently animations are now foreseen in the CSS

https://docs.inductiveautomation.com/display/DOC80/Styles+and+Style+Classes

Style classes support animation, but only for the properties that are already exposed in the style class, which means no rotation/position changes. That is, however, something we’re looking at improving support for.

It’s a delicate balance, unfortunately, between making the software usable for everyone without making it require every user to be a full on web developer.

What is your estimation to implement it?
8.0.3?

There’s really no way to say. Too many unknowns.

i do some post about it

how would the expression be for a smooth animated rotation of 90 degrees?

Add transition: 1s to your style and just change the rotate property by your binding and it works.

1 Like

That works thanks. I have created a flash bit that goes high every 1s.I have bind this to the angle property and writing my angles(0,90).

Expression: if({[default]Flasher}=1,0,-90)

So my selector switch changes angle every second. What I would be more keen is to display the rotation on the range of every point of the angle(0-90) and not just on the 2 points set of 0deg and 90deg. Hope this makes sense?

I recreated this Animate.css resource with Perspective and uploaded it to the Exchange.

Check it out here.

It relies on a modified theme - but would be a good example of using CSS3 and specifically animations.

2 Likes

Instructions would be highly appreciated :relaxed: