-
Notifications
You must be signed in to change notification settings - Fork 27
Problem with rotate animation #129
Comments
Ho @stdalexius, Please share here a simplifoed version of your flow (i.e. an Inject node and an SVG node), so I can easily reproduce your issue. And also explain what it is going wrong, because at the moment I don't know exactly what your problem is (rotate around the center of an object, or somethig else perhaps...). Bart |
|
Also I can give you another example: |
@stdalexius, Can you also answer my second question? Because I see the fan starting to rotate (correctly), so still not really an idea what you are trying to achieve and what the problem is... |
Thanks for trying help me! Thanks in advance! |
Hi @stdalexius, Sorry for the delay! Very busy life unfortunately... I really understand your confusion. At first sight I also thought your animation were correctly. I figured out a solution, and I have explained it in depth below so hopefully you can understand what is happening in your case... Pump is rotating around its centerWhen you activate the tooltip with coordinates in the node settings (like you already did), you can navigate with your mouse near the center point of your pump. That way the center point of your pump is (approximately) displayed: And the transform origin of your rotation animation has the same coordinates as the pump's center point: So you get what you expect, i.e. the animation lets the pump rotate around its center point: The reason it works fine, is because the transformation origin corresponds to the center point of the bounding box of the SVG Note you can check this by executing following two javascript statements in the Developer console window of your browser:
Fan is NOT rotating around its centerAgain when you hover with your mouse to the center of the fan: The same coordinates are being used for the rotation transformation origin: So you would expect again that the animation let's the fan rotate around its center point, but that is NOT the case: The solutionThe reason that the fan is not rotating about it's center point, is that the bounding box of the This bounding box center point will now follow a circular path around the animation origin, when being rotated around that origin. So if we change the transformation origin to have the same coordinates as the bounding box center point: Then the animation will let the fan rotate nicely around its center: Here you can find an updated flow:
The root cause of confusionThe confusing thing is that the center points of your fan (when you hoover above it with your mouse), totally don't correspond to the center point of its bounding box. Which should be the same, because the bounding box is simply a rectangle around your fan's circle. The reason is that your fan What you see in your drawing is your fan (i.e. a |
Note that the section "root cause of confusion" is not fully waterproof. It has also something to do with the different coordinate systems. getBBox returns coordinates in the local coordinate system after the application of transforms. But my time is up for today... |
Thanks it was very useful for me |
I need help with animation rotate. It's working correctly only when I rotate image or text, but when I try rotate other elements it's going something wrong. Maybe for other elements coordinates set up in other way.
The text was updated successfully, but these errors were encountered: