search

alexjlockwood / ShapeShifter

SVG icon animation tool for Android, iOS, and the web
https://shapeshifter.design
Apache License 2.0
3.98k stars 203 forks source link

End of path shows during animation #285

Open mikuhl-dev opened 6 years ago

mikuhl-dev commented 6 years ago

vector.txt (change extension to .shapeshifter)

alexjlockwood commented 6 years ago

Hmm... very strange, because I don't see this behavior at all.

Could you give me some information about your environment? i.e. Browser version, OS version?

mikuhl-dev commented 6 years ago

I'm on Firefox, Windows 10. This extra part shows when I export it too. (Not sure if exporting relies on the browser rendering engine)

mikuhl-dev commented 6 years ago

Exporting on Chrome has the same effect (even though it doesn't show in the viewer) untitled1 You can see the dot appear, and disappear multiple times, and also as the check fades away it also splits up into multiple segments.

alexjlockwood commented 6 years ago

So to be clear...

On Firefox + Windows 10, the bug shows up in the browser AND when you export to an SVG spritesheet?

And on Chrome + Windows 10, the bug DOES NOT show up in the browser but DOES show up when you export to SVG sprite sheet?

alexjlockwood commented 6 years ago

Could you copy/paste the contents of the .shapeshifter file to this bug report (for the second gif you posted... i.e. the one where it splits up into multiple segments as it fades away).

alexjlockwood commented 6 years ago

I'm able to reproduce in SVG spritesheet exports and on FireFox... seems like using strokeLineCap="round" maybe the culprit... hmm.

tylerthurston11 commented 5 years ago

First of all, I'd just like to take a moment to say how awesome Shapeshifter is! I've been looking for a tool that can animate trim paths and still export as SVG and Shapeshifter really fills that gap, so thank you!

However, I'm experiencing this issue as well where the end of the point is showing up in my exported sprite sheets as well (I'm also using rounded end caps). If there is a solution or workaround, please let me know.

Thanks so much!

alexjlockwood commented 5 years ago

@tylerthurston11 Hmm... Yeah, I haven't been able to figure out a good solution to this yet.

If you have an additional shapeshifter project file I could test with that'd be great if you could upload one. :)

tylerthurston11 commented 5 years ago

yeah of course! Try this one

There's quite a few layers because we were trying out Shapeshifter for a logo animation idea we had. But even so, I tried starting a new project with only one layer added from importing an SVG and I seemed to be getting the same end appearing during the animation point issue.

Best of luck finding a solution Alex and thanks for making such a cool tool! Despite the hiccup we've still really enjoyed using it :)

jamesraulw commented 5 years ago

I opened the .svg file created by the Shape Shifter and I could see why this dot is shown. It's a result rounding mistake, probably. Untitled-1

When I sum up the dash and gap value of the objects, I could see that the imperfect frame of the animation has +0.001 ou -0.001 than the perfect frame. Adjusting this values, I could fix the frame.

This extra point is a restart of the stroke of the path that appear due to a math problem that doesn't match correctly the dash and gap value.

Sorry for my bad English. I hope I could help.