search

metafizzy / zdog

Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
https://zzz.dog
10.38k stars 394 forks source link

Animate items independently #69

Closed charlesr1971 closed 5 years ago

charlesr1971 commented 5 years ago

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.

chrisgannon commented 5 years ago

You can animate all properties independently.

Check out this demo: https://codepen.io/chrisgannon/pen/PvVzRG

desandro commented 5 years ago

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.

charlesr1971 commented 5 years ago

@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?

charlesr1971 commented 5 years ago

@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?

chrisgannon commented 5 years ago

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.

desandro commented 5 years ago

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.

charlesr1971 commented 5 years ago

@chrisgannon @desandro Here is a CodePen that demonstrates the difference between what I would deem a half rotation, as compared to a full rotation:

https://codepen.io/charles1971/pen/XLXdmJ

charlesr1971 commented 5 years ago

I have added a commented line of code at Line 14, that you need to uncomment to see the correct version.

chrisgannon commented 5 years ago

@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

charlesr1971 commented 5 years ago

@chrisgannon OK. But why do Groups not rotate intuitively. Is it because, they have no position in the co-ordinate space?

chrisgannon commented 5 years ago

You’re welcome 🙄

charlesr1971 commented 5 years ago

"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?

desandro commented 5 years ago

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.

See eye group demo on CodePen

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.