search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.54k stars 2.87k forks source link

Bodymovin AE Export looks strange on some edges #1590

Open wirnico opened 5 years ago

wirnico commented 5 years ago

May somebody help me. I get strange artefacts on the edges when I export this in After Effects. Is there somethin I am missing or doing wrong?

calibration_finished.json.zip

bodymovin commented 5 years ago

Hi, what kind of artifacts are you getting? What browser and renderer are you using?

wirnico commented 5 years ago

Thanks for answering so fast. I am using the bodymovin plugin in Adobe After Effects CC2019. Have you seen my json file I attached in my last comment. The browser question is interesting. I did not try this yet to show it in another one. When I throw the JSON inside Lottie Preview in the browser (I am using Firefox) it shows the artefacts https://lottiefiles.com/share/EUvgC7

If I go to Chrome there is nothing to see.

We want to use the animation inside an IOS App. There it seem to be the same problem as in Firefox. I am using a trim path in After Effects to animate the arrow.

bodymovin commented 5 years ago

Can you detail what is the artifact you are seeing? or attach a screenshot? I don't see anything in FF or Chrome to identify the problem.

wirnico commented 5 years ago

Yes of course. From frame 12 to 20 it looks like this.

Bildschirmfoto 2019-04-28 um 08 50 27
wirnico commented 5 years ago

Do you have any idea on this?

bodymovin commented 5 years ago

It seens an issue with linejoins. Can you share the .aep?

wirnico commented 5 years ago

Of course. See attached my project. calibration_finished.aep.zip

In After Effects it does look good with no breakouts. Thanks for your help and all the work you put in this amazing plugin.

bodymovin commented 5 years ago

It seems to be a glitch on Chrome at certain screen resolutions. Try resizing the window and you'll see it goes away. It is indeed related to the Line Join property of strokes. Although it won't look exactly the same, if you change it to Round Join, it will look fine.

wirnico commented 5 years ago

This helped a lot. Thank you. Solved my problem.

ZainlessBrombie commented 5 years ago

@bodymovin This problem occurs because the svg generated uses Cubic Bézier Curves (e.g. C1,4 in a path element) and not straight lines (L) for straight lines (e.g. L1,4 in a path element)

Edit: will fix

Keks89 commented 4 years ago

@bodymovin I think I have a similar problem here. When I export my animation with bodymovin, the stroke effect is not working as it should. :) I ll leave the ZIP here, maybe you can help me with that. test.zip

bodymovin commented 4 years ago

@Keks89 hi, can you share the .aep?

BenParish commented 4 years ago

@bodymovin Im having a glitch when exporting outlined type with bodymovin. The counters fill-in which isnt part of the design. Any suggestions on how to solve it? Screenshot and .aep attached.

Ori_Animation_6.aep.zip

Screenshot 2019-12-24 at 10 25 10
bodymovin commented 4 years ago

@BenParish you are using difference masks for the outlines which are not ideal for performance and don't have full support. Can you use regular shapes instead?