Creatide / AnimateMate

Create your animations directly in Sketch using AnimateMate.
http://AnimateMate.com
MIT License
1.33k stars 78 forks source link

Animating object inside a group results in shifted position for the child object. #27

Closed ghost closed 7 years ago

ghost commented 7 years ago

Animating an object within a group results in that object X and Y position shifted by the sum of respectivelly X and Y position of the group + X and Y position of the object itself.

I've attached a screenshot, the left artboard is how it was set in the keyframe, X and Y position at the top left corner. The right artboard is how it gets exported.

If not clear I can elaborate a bit more, but I'm not sure if Sketchapp X and Y behaviour has changed within groups but it appears the reference point is not the group itself but rther the top left corner of the canvas even inside a group.

screen shot 2017-05-23 at 09 26 18

ghost commented 7 years ago

I suggest to change line 228 and 229 in file library > Animation.js from

returnObj.x = Math.round((layer.frame().x() + parentGroupValues.x) * 100) / 100;
returnObj.y = Math.round((layer.frame().y() + parentGroupValues.y) * 100) / 100;

to

returnObj.x = Math.round((layer.frame().x()) * 100) / 100;
returnObj.y = Math.round((layer.frame().y()) * 100) / 100;

This solved the problem for the few tests I've done.

Test sketch file I'm using: anim.sketch.zip

niittymaa commented 7 years ago

Thanks ghost.

I'm not sure where's the problem, because if I use "Return Keyframe" after export it'll put back child to the original place. So only exporting make it to jump wrong place for me. And after all it seems that exported images is correct and stays on parent group top left corner.

I tested out those changes that you suggest but it seems that there is no affect with this problem for me. Strange if it works for you.

I just got newest 44.1 sketch licence today, so I have tested plugin only with this problem atm. Please, inform if you find more about this issue. Great to see that you try to figure out the problem!

nakele commented 7 years ago

Hey niittymaa

Thanks for getting in touch :)

Have a look at this video, I'm animating the square inside the group, keep an eye out for the position of the square in comparison to the rectangle. When I export to GIF the position of the square is incorrect: bug.mov.zip

Try to animate the square from left to right using this file: exporting it will result in the square widely in the wrong place: test_animate.sketch.zip

I'm also using v44.1

The issue appears only on the exported output, not while working :)

niittymaa commented 7 years ago

@nakele I got your point. Thanks for good explain!

Actually that's not bug. That's the problem with groups atm. There is couple workarounds if you use groups. Here is 2 videos where other I create animation to parent group BEFORE I animate child. And the other workaround is to create "bounds" layer to prevent wrong calculation.

I know it's not the best way to work with groups but...

WorkaroundVideosForGroups.zip

niittymaa commented 7 years ago

Actually you @ghost were right. Changing those lines will make it to prevent it jumping wrong position when exporting, even exported gif looks ok. I found that while testing @nakele example. Need to test more if it works. Thanks to both of you!

nakele commented 7 years ago

ghost was another account I had which I deleted, no point in having 2 account, im the same person :)

niittymaa commented 7 years ago

Ah, thanks for letting us to know ;)