feat: adds rotation property #14028
feat: adds rotation property #14028
Conversation
|
|
Shouldn't the rotation be computed from the |
|
Yeah. In this case it's just some arbitrary rotation that'll be played using the About using "from" and "to" I don't think it's doable without much changes since But If you think it's better I can swap to something like But a question that pops up is that when the animation ends svelte does removes it's style so I think that's somewhat counterintuitive to have an end another than "0" which would be the "default" rotate. |
|
Thank you but this doesn't really solve the feature request. The goal is to be able to morph arbitrary elements into each other based on their rotations (and sizes and positions and whatever else) — you shouldn't have to manually specify a rotation any more than you have to specify To do it reliably will be tricky — it should account for the current transform matrix of each element (accounting for all their ancestor elements) and use matrix decomposition to compute a sensible set of transforms. If options are involved they should be to do things like increase the scale at the midpoint (for a 'bump' effect) or ensure that the rotation is clockwise/anticlockwise or add an extra spin etc. |
|
Oh. Now I get it. I totally missed what was expected from the rotation behavior. I'll dedicate more time to this issue. Thanks! |
|
That's probably my best shot. I'm feeling kinda stucked rn. Tried to achieve it without changing that much the current structure. Would love to recieve pointers/feedback. Cheers, Reproducible playground: https://svelte.dev/playground/6e2424425ad44ae3968707b755f34266?version=5.1.9 |
brenoliradev
force-pushed
the
feat/rotate_on_flip
branch
2 times, most recently
from
ac917fd to
ac3c7bb
Compare
commit: |
Co-authored-by: Mathias Picker <[email protected]>
|
preview: https://svelte-dev-git-preview-svelte-14028-svelte.vercel.app/ this is an automated message |
…/svelte into feat/rotate_on_flip
| var dsx = from.width / to.width; | ||
| var dsy = from.height / to.height; | ||
|
|
||
| var dx = (from.left + dsx * ox - (to.left + ox)) / zoom; | ||
| var dy = (from.top + dsy * oy - (to.top + oy)) / zoom; | ||
| var { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params; | ||
|
|
||
| var rf = Math.atan2(m.m21, m.m11) + Math.atan2(from.bottom - from.top, from.right - from.left); |
There was a problem hiding this comment.
What about validating this calculation like this:
function get_initial_angle(transform) {
if (typeof transform === 'string') return 0
var m = new DOMMatrixReadOnly(transform);
return Math.atan2(m.m21, m.m11);
}
var rf = get_initial_angle(transform) + Math.atan2(from.bottom - from.top, from.right - from.left);I think skipping these calculations if transform is none would be cool when multiple elements without initial transforms are animated but I'm unsure how much it would impact complex transformations
I saw the following issue #14024 and give it a shot since it seamed something easy to adopt.
Ping me if the pattern isn't as expected or if I missed anything.
Cheers,