Hello,
Would like use Symbol factory, but I haven't idea to animate it.
For exemple, on perspective , if I choose a motor component, I can make annimation binding PROPS of motor.
But I haven't idea how to animate component of Symbol Factory.
Maybe there is lesson that I forgot see on IU.
Somme one car telle me how Symbol Factory work on Ignition ?
Those are just static pictures. There isn't really anything to bind to. Maybe visible, the label in the symbol, background color etc... They don't animate, ie spin etc...
Thank you @bschroeder
If I understood correctly, you mean that we cannot animate symbol factories? even for example this FAN ?
can probably be done with css
1 Like
This is probably the only way, if at all.
1 Like
@victordcq thank you, I would like to know how to do it.
add this to stylesheet
@keyframes rotateCenter {
0%{
transform: rotate(0deg);
transform-origin: 50% 50%
}
100%{
transform: rotate(360deg);
transform-origin: 50% 50%
}
}
and this to the correct style object in the svg
{
"classes": "",
"animation": "rotateCenter 2s linear infinite"
}
(note transform-origin: wont always be needed for every svg, it just depends how it is made, so if you are rotating around something else change this value)
(in this case you could see it rotating around the corner)
you can use biding to change the animation prop, but dont use biding to change rotations, only use animations for fast, repeating rotations
2 Likes
[quote="victordcq, post:7, topic:90734"]
stylesheet
[/quote] thank you.
But I don't Understood sommething.
How I will know if this stylesheet.css is for Fan component ?
what is @keyframes rotateCenter
?
You create a animation (keyframe) with a name (rotateCenter)
Which you can refer to in the rotate css animition "animation": rotateCenter
Everywhere you put this animation, the object will rotate around its center
For the fan you'll want to select the group "impeller" to apply this too
1 Like
I dot it:
When I click on preview mode, nothing is happen. Fan is not rotating
Spot the difference:
Figure 1. Victor's instruction.
Figure 2. What you did.
Remove the " .... "
quotes.
1 Like
omg, thank you I remove it and it work.
You can also use the predefined animation class that @lrose pointed out in this thread.
1 Like