Animate items independently
charlesr1971 opened this issue · comments
I have noticed that the only way to animate a shape rotation one full turn, is to animate the entire Illustration. The problem with this, is that every other item in the Illustration has to rotate. For instance, if I want to animate only the scale of a starfield, whilst animating only the full rotation of planets, there does not seem to be a way to achieve this, currently.
You can animate all properties independently.
Check out this demo:
https://codepen.io/chrisgannon/pen/PvVzRG
As Chris mentioned, all properties are animate-able. However, the docs only show animation using illo.rotate. I left off how to animate child shapes or translate for the sake of brevity. I've seen a couple demos where devs have figured out how to animate other stuff. I feel like this is a case where I'd rather keep it un-documented than try to document everything.
@chrisgannon Thanks for the animation demo. The problem occurs when I try and rotate a group of shapes. The group only rotates a maximum of a half turn. If I animate the entire scene [illo], the rotation happens without any problems. But, for some reason, my groups will not rotate more than half turn?
@chrisgannon @desandro I think I have worked out what is going wrong. When I try and animate a full rotation of a Group of shapes, it will only rotate in the Y axis a maximum of 180 degrees. Then it animates in reverse back to 0. However, when I replace the Group object with an Anchor object, the rotation works correctly. Please could you explain why I cannot rotate a Group in such a manner?
The Y axis is a 3D axis in rotation. And because Zdog has no shading and no perspective I suspect the Group is animating a full 360 but it appears to go to 180 and then back again.
This lolly looks like it only rotates 180 and then back again but it's actually rotating a full 360.
https://codepen.io/chrisgannon/pen/7b6080e562cd0e64e398464dff630737
Here's a different version with a drip on one side but not on the other - I did this precisely because of the effect you're talking about:
https://codepen.io/chrisgannon/pen/qGeKwd
Btw it would be useful if you could post demos of what you are working on.
Please could you explain why I cannot rotate a Group in such a manner?
From the Group docs
Shapes will be rendered in the order they are added to the Group. Groups are useful for positioning shapes within other shapes, like windows in walls or pupils in eyes.
@chrisgannon @desandro Here is a CodePen that demonstrates the difference between what I would deem a half rotation, as compared to a full rotation:
I have added a commented line of code at Line 14, that you need to uncomment to see the correct version.
@charlesr1971 Your logoAnchor should indeed have been an Anchor but it was a Group. Changing that to Anchror and setting its z: -50 goes somewhere towards fixing it.
https://codepen.io/chrisgannon/pen/f6b59a8b80ae348a0aff55412943d1cc
@chrisgannon OK. But why do Groups not rotate intuitively. Is it because, they have no position in the co-ordinate space?
You’re welcome 🙄
"Is it because, they have no position in the co-ordinate space?"
Is this question really that offensive? I'm sorry, but I like to know why something works the way it does, not just "how"...
My apologies if I have offended you, but I thought I was asking a perfectly innocent question?
Groups have special behavior how they do z-sorting, unlike all other items. When in a Group ( with updateSort disabled`) shapes will NOT update their sort position. So if you have a group that spins directly on its central axis, it will appear that the Group is only spinning 180. But what is actually happening is that the group is spining 360 degress AND their shapes are not updating.
On another note: I'd like to use this issue tracker to track issues, not as a discussion forum or a support channel. In my experience, GitHub issues does not work well for a general support channel. You're better off trying Stack Overflow, or pinging colleagues.