Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Add lottie-converter plugin for below mentioned layers #756

Open
wants to merge 22 commits into
base: master
from

Conversation

Projects
None yet
4 participants
@AnishGG
Copy link
Member

commented Mar 8, 2019

Feature: #704
Supported Layers:

  • Star Layer
  • Circle Layer
  • Rectangle Layer
  • Simple Circle Layer
  • Solid Color Layer
  • Import Image Layer
  • Region Layer
  • Polygon Layer

I added the plugin to convert the layers from .sif format to lottie json format. I have verified it's working.
Keyframes and the waypoints are also supported.
This plugin can be accessed by the name "Export to lottie format" under the plugins tab. I have not made the changes to the translation files. Will need some help with text conversion to other languages.
@morevnaproject Please have a look at changes. 馃檪

@morevnaproject morevnaproject changed the title Add lottie-convertor plugin for star layer [WIP] Add lottie-convertor plugin for star layer Mar 8, 2019

@morevnaproject

This comment has been minimized.

Copy link
Member

commented Mar 8, 2019

@AnishGG Great! I did a quick overview and it looks good so far! I will test it tomorrow.

P.S. Marked this issue as [WIP] and leaving it open for now. So, you can push more commits in the same branch when you get done with animation thing - it will get updated automatically.

Keep up the good work! ^__^

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Mar 9, 2019

@morevnaproject, Does the ordering of the star layers depend on the value of z_depth?
I made three stars layers, in the synfig studio it is showing the z_depth parameter as 0, 1, 2. But when I save it in .sif format, all the z_depth parameters have value equal to 0.
Is it a bug or the layer ordering depends on the order they are present in the .sif format file?
Here is the .sif xml file.
Here is the screenshot for the above
Screenshot from 2019-03-09 14-29-07

@morevnaproject

This comment has been minimized.

Copy link
Member

commented Mar 9, 2019

@AnishGG Yes, the values in Z-Depth column of Layers Panel indicate order of layers. They are given as reference only.

You can notice each layer also has Z-Depth parameter, which allows to set a shift of layer's depth, relatively to its place in the stack of layers.

Positive values of layer's Z-Depth parameter mean that layer is moved lower in stack. Negative values mean that layer is raised upper.

By default this value is = 0 (so, layer has no shift by default).

For details see https://wiki.synfig.org/Z_Depth_Parameter.

@morevnaproject

This comment has been minimized.

Copy link
Member

commented Mar 9, 2019

Hey, I tested and it's so cool! ^__^

screenshot_011

@morevnaproject

This comment has been minimized.

Copy link
Member

commented Mar 9, 2019

Regarding the layout: wouldn't it be reasonable to merge both shapes into single layer? I wonder, if that will make any impact on speed.

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Mar 9, 2019

Regarding the layout: wouldn't it be reasonable to merge both shapes into single layer? I wonder, if that will make any impact on speed.

I didn't catch up. merge both shapes into single layer, do you mean both stars in a single layer?
If yes, I guess lottie does not have that feature. I tried doing that but only of the stars would get rendered then.
Regarding the speed part, yes it might have an impact on speed, but I 'll have to figure out how lottie is rendering all the layers.

@morevnaproject

This comment has been minimized.

Copy link
Member

commented Mar 11, 2019

I didn't catch up. merge both shapes into single layer, do you mean both stars in a single layer?

Yes, if we have two star layers (Synfig layers), then in Lottie they can use one layer (Lottie layer here), which includes several shapes.

I did some experimenting and found that this is possible, BUT in this case all stars will share the same fill color. Here is an example - https://gist.github.com/morevnaproject/f4686b5b0868447af64f5b620d0ad669

screenshot_001

I am not sure if we need this now, but we can consider this for future optimization.

@morevnaproject

This comment has been minimized.

Copy link
Member

commented Mar 11, 2019

One more note: if you look at screenshot in #756 (comment), then you might notice the stars in Synfig and in browser has slightly different colors. This is because Synfig internally uses gamma value = 2.2. Exporter should handle that and do proper correction for colors.

Please check this post on the hints how to deal with gamma - https://forums.synfig.org/t/hack-to-import-gimp-palette/1882/5?u=konstantindmitriev

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Mar 11, 2019

One more note: if you look at screenshot in #756 (comment), then you might notice the stars in Synfig and in browser has slightly different colors. This is because Synfig internally uses gamma value = 2.2. Exporter should handle that and do proper correction for colors.

Please check this post on the hints how to deal with gamma - https://forums.synfig.org/t/hack-to-import-gimp-palette/1882/5?u=konstantindmitriev

Sure, I will do the correction for color calculation as per the gamma value.

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Mar 11, 2019

I didn't catch up. merge both shapes into single layer, do you mean both stars in a single layer?

Yes, if we have two star layers (Synfig layers), then in Lottie they can use one layer (Lottie layer here), which includes several shapes.

I did some experimenting and found that this is possible, BUT in this case all stars will share the same fill color. Here is an example - https://gist.github.com/morevnaproject/f4686b5b0868447af64f5b620d0ad669

screenshot_001

I am not sure if we need this now, but we can consider this for future optimization.

Oh, I was trying to fit more than 1 star in a single layer plus more than 1 fills also. That might be the reason the star was not rendering.
In future we might use this somehow for optimization, like may be for all the layers with same fills. I will check this out.

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Mar 16, 2019

@morevnaproject, the color correction as per the gamma value has been done.馃檪 Please have a look at it.
The animation part is not working properly yet. For now this is only the initial version. I will keep you posted regarding the progress.
This is the link that I am referring for the animation part.

@morevnaproject

This comment has been minimized.

Copy link
Member

commented Mar 16, 2019

Yes, I've tested it already. Thank you for keeping me updated! ^__^

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Mar 18, 2019

@morevnaproject, TCB only animations are now working. Please have a look at this. ^_^

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Apr 10, 2019

@morevnaproject, So I modularized the code written till now. I am able to run this code properly using command line interface. But I am facing issues in Makefile.am while installing it as a plugin.
Please guide me regarding the Makefiles part.
Here is the error I am getting when this plugin is run:
Screenshot from 2019-04-11 01-23-04

I think I need to add SUBDIRS in this Makefile. But I am not able to figure what will be written in the Makefile.am for the helpers directory or any other subdirectory.

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Apr 11, 2019

@morevnaproject, I tried using SUBDIRS, but in the final build the sub-directories are not getting created.
Could you point out where am I making a mistake as I am not that well versed with Makefiles.
Thanks

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Apr 11, 2019

I have observed that instead of installing the lottie-exporter/helpers/ files to the corresponding path, the Makefile is installing it to build/share/doc/synfigstudio.
Any suggestions on to why this could be happening would be highly apprecited.

Here is the expanded output:
Making install in helpers
make[3]: Entering directory '/home/anishg/GSOC/try/synfig/_debug/synfig-studio/plugins/lottie-exporter/helpers'
make[4]: Entering directory '/home/anishg/GSOC/try/synfig/_debug/synfig-studio/plugins/lottie-exporter/helpers'
make[4]: Nothing to be done for 'install-exec-am'.
/bin/mkdir -p '/home/anishg/GSOC/try/synfig/_debug/build/share/doc/synfigstudio'
/usr/bin/install -c -m 644 /home/anishg/GSOC/try/synfig/synfig-studio/plugins/lottie-exporter/helpers/transform.py '/home/anishg/GSOC/try/synfig/_debug/build/share/doc/synfigstudio'

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Apr 11, 2019

Please guide me regarding the Makefiles part.
Here is the error I am getting when this plugin is run:

Fixed ^__^

@morevnaproject

This comment has been minimized.

Copy link
Member

commented Apr 12, 2019

Awesome!

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Apr 18, 2019

Just keeping the discussion alive and posting the progress here.
This is how a star layer with animation when converted to lottie looks like as of now:
Test file: lottie-test.sif

Synfig Studio
synfig_studio

Lottie Web Animation
lottie

P.S. The FPS of my screen-recorder is bad, hence the bad quality.

@AnishGG AnishGG changed the title [WIP] Add lottie-convertor plugin for star layer [WIP] Add lottie-converter plugin for star layer Apr 28, 2019

@morevnaproject

This comment has been minimized.

Copy link
Member

commented May 15, 2019

Looks impressive! keep up the good work! ^__^

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented May 17, 2019

Things not supported by lottie:

  1. Animation of polygon/star parameter
  2. Animation of z-depth parameter.
  3. TCB interpolation of color parameter.

Currently, I am devising an algorithm for the first point. I have ideas to make the third point work in lottie format, but I am keeping it for later.
But I have no clue how to deal with the second point(z-depth animation). Any suggestions or ideas on this point are welcome ^_^. So I am leaving this point as of now.
Also I will start working with other layers.
@morevnaproject could you test this layer? Please inform if anything seems off

@morevnaproject

This comment has been minimized.

Copy link
Member

commented May 18, 2019

But I have no clue how to deal with the second point(z-depth animation).

If this is not supported by Lottie, then I suggest just drop this. This is a format limitation that is beyond of our scope.

BTW, it would be nice to keep track of unsupported features in some document. ^__^

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented May 18, 2019

BTW, it would be nice to keep track of unsupported features in some document. ^__^

Sure, I will update the documentation in a day or two.

If this is not supported by Lottie, then I suggest just drop this. This is a format limitation that is beyond of our scope.

Okay, I will leave it for now.
Just thinking out loudly 馃槢 : If this project goes on well and good, we could even ask lottie developers to add support for some Synfig dedicated features. For example: z-depth animation.

@morevnaproject

This comment has been minimized.

Copy link
Member

commented May 18, 2019

Just thinking out loudly: If this project goes on well and good, we could even ask lottie developers to add support for some Synfig dedicated features. For example: z-depth animation.

Oh, yeah! That would be absolutely awesome!

@AnishGG AnishGG changed the title [WIP] Add lottie-converter plugin for star layer [WIP] Add lottie-converter plugin for below mentioned layers May 18, 2019

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented May 21, 2019

@morevnaproject, Circle layer is now complete.
I am waiting for your reviews on it. ^_^
Now I will get started with the rectangle layer.

morevnaproject added a commit to morevnaproject/synfig that referenced this pull request Jun 7, 2019

Merge Lottie exporter from PR synfig#756: Basic layers
Supported Layers:

-    Star Layer
-    Circle Layer
-    Rectangle Layer
-    Simple Circle Layer
-    Solid Color Layer
-    Import Image Layer
@morevnaproject

This comment has been minimized.

Copy link
Member

commented Jun 7, 2019

All features up to commit b81c598 are merged into master branch now. ^__^

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Jun 7, 2019

All features up to commit b81c598 are merged into master branch now. ^__^

So eager to see how this works out for other people! 馃槃

@gradha

This comment has been minimized.

Copy link

commented Jun 10, 2019

Exciting! Now I have my test animation working! 馃帀
http://www.konstantindmitriev.ru/lottie-demos/001/001.html

Source file - http://www.konstantindmitriev.ru/lottie-demos/001/test-1-geometry-animation.sif

I wanted to try the export myself so I checked out the repository up to commit ea88ab8 which contains the recent code. Then I downloaded the .sif file and ran the exporter from the command line python3 lottie-exporter.py test-1-geometry-animation.sif. This generated an html and json file but nothing shows up in Safari. After downloading the working .json and prettifying it, I compared it to the one I generated and found several differences. I have no idea what the difference is and why the version I have does not render.

Comparing the safari js console I can see the version I generated locally generates one additional mistake:

[Error] TypeError: undefined is not an object (evaluating 'data.k.length')
	getProp (lottie.js:2489)
	getProp (lottie.js:12821)
	RectShapeProperty (lottie.js:3224)
	getShapeProp (lottie.js:3301)
	getShapeProp (lottie.js:12973)
	createShapeElement (lottie.js:8625)
	searchShapes (lottie.js:8716)
	createContent (lottie.js:8510)
	initElement (lottie.js:7225)
	SVGShapeElement (lottie.js:8493)
	createShape (lottie.js:5913)
	buildItem (lottie.js:6004)
	buildAllItems (lottie.js:5770)
	initItems (lottie.js:5797)
	checkLoaded (lottie.js:11485)
	waitForFontsLoaded (lottie.js:11472)
	configAnimation (lottie.js:11464)
	(funci贸n an贸nima)
	onreadystatechange (lottie.js:4331)

鈥hich I guess is preventing the render.

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Jun 11, 2019

I wanted to try the export myself so I checked out the repository up to commit ea88ab8 which contains the recent code. Then I downloaded the .sif file and ran the exporter from the command line python3 lottie-exporter.py test-1-geometry-animation.sif. This generated an html and json file but nothing shows up in Safari. After downloading the working .json and prettifying it, I compared it to the one I generated and found several differences. I have no idea what the difference is and why the version I have does not render.

Comparing the safari js console I can see the version I generated locally generates one additional mistake:

鈥hich I guess is preventing the render.

@gradha
The source file that @morevnaproject uploaded uses previous Synfig version(it's rectangle layer had no bevel parameter), and hence you are not able to render the JSON file.
I have added the same demo file with updated Synfig version here: (demo)
If you want to use the same demo file, please use the latest development version of this P.R.(I have provided a patch): c699183

@gradha

This comment has been minimized.

Copy link

commented Jun 11, 2019

Ufff鈥 that sounds troubling. A diff between both sif versions doesn't show any significative change other than the new parameters. Given the amount of meta tags I'd have expected the format version to be embedded somewhere for tools like this exportation plugin to read and warn users about incompatible versions.

With regards to versions, does this mean the plugin will not generate animations for sif files generated by the currently published stable version of synfig (1.3.11)?

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Jun 11, 2019

With regards to versions, does this mean the plugin will not generate animations for sif files generated by the currently published stable version of synfig (1.3.11)?

This is absolutely not the case.
The stable version(1.3.11) has two type of rectangle layers: Filled Rectangle layer and Rectangle layer. Now in the latest development branch, these two are clubbed to form a single layer, and hence the difference.
As already stated, I have provided a patch and the exporter should work fine with the stable version(1.3.11).

@AnishGG

This comment has been minimized.

Copy link
Member Author

commented Jun 17, 2019

@morevnaproject
I was wondering if some users might want to use this plugin using command line, should I add a feature to export .sifz files also?
This will make it easier for them to export both .sif and .sifz files. 馃槃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.