Skip to content

bigxixi/bodymovin_fix

Repository files navigation

This issue has been fixed since bodymovin 5.1.16, get the latest version here:

https://github.com/airbnb/lottie-web/tree/master/build/extension

___ ▽ ▽ ▽ in case you are using bodymovin older than 5.1.15, of just for reseach purpose ▽ ▽ ▽___

bodymovin_fix

-2018.04.23 update ->5.1.12  

-2018.04.08 update ->5.1.10  

Fix the 'png dark outline' issue.
The fixed zxp file Download here(v5.1.9). Use the downloaded file to reinstall bodymovin, I recommand you use https://aescripts.com/learn/zxp-installer/

about the fix tool

I uplaod the fix tool(for Mac), if bodymovin updates in the future, this tool may help fix the problem in new versions.

  1. Download the files, unzip the '[Mac]pngFixTool(fix_and_ZXP_repack).zip'.
  2. Run Terminal, type in 'chmod +x ' then drag the pngFixTool.command to terminal. Hit ENTER.
  3. Now you can double click the pngFixTool.command, or just drag it to the terminal, hit ENTER, to execute it.
  4. Drag bodymovin.zxp to the terminal, hit ENTER.

If everything goes well, a bodymovin_fixed.zxp will be generated next to the original one. Now install the fixed bodymovin(I recommand you use https://aescripts.com/learn/zxp-installer/), then run AE, try export an animation through bodymovin with png asset, check if the dark outline is gone.

about the 'png dark outline' issue

Bodymovin uses an undocumented function saveFrameToPng() to generate pngs.   see: https://github.com/bodymovin/bodymovin-extension/blob/16c2ba27a5b0fcaf5a0f043d7c2704259661f3eb/bundle/jsx/utils/sourceHelper.jsx#L145

But this method exports pngs not premultiplied(with black matt), if the png has alpha channel, it will looks like there are black outlines around the edges.
If we export pngs through Render Queue, there won't be any unnecessary black outlines.
So I write a script function to do that, and replace the saveFrameToPng() in bodymovin, repack the zxp.
I've run some test and everything seems OK, if you suffer form this issue, just have a try.
I hope it helps.


PNG through Render Queue

PNG through saveFrameToPng()

Donation:

Thank you very much!

About

fix the 'png dark outline' issue

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published