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.
It relies on a modified theme - but would be a good example of using CSS3 and specifically animations.
3 Likes
Instructions would be highly appreciated 
This is the closest I could find to just wanting a Timer in Perspective. I don't want it for any animations but just a simple Stopwatch type timer for an HMI that a user could start / stop / reset.
*New to ignition so let me know if that is easily accomplished another way.
You can grab current timestamps using expression bindings with the function now().
You can create a custom property on the view that is always the current timestamp and with some clever scripting you could probably create some logic for creating a stop watch style timer with stop/start/reset events.
I haven't specifically seen a stopwatch style timer implemented before on either the Forum or the Ignition Exchange so it might need to be developed from scratch.