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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: Add Lottie export format #704

Open
ec1oud opened this issue Jan 11, 2019 · 52 comments
Open

Feature request: Add Lottie export format #704

ec1oud opened this issue Jan 11, 2019 · 52 comments
Assignees
Projects

Comments

@ec1oud
Copy link

@ec1oud ec1oud commented Jan 11, 2019

It seems popular, and a good animation format for the web and for mobile devices (but I just discovered it ;-) I haven't found a proper spec for the JSON but there are open-source viewers, and JSON schema files here https://github.com/airbnb/lottie-web/tree/master/docs/json


Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

@adampiskorski

This comment has been minimized.

Copy link

@adampiskorski adampiskorski commented Jan 28, 2019

I think this would be a killer feature, as otherwise to have a nice modern pipeline for animations on web + mobile you would need Adobe AE.
Synfig could certainly reduce the barrier to entry and keep the pipeline in the open source world.

@ThobyV

This comment has been minimized.

Copy link

@ThobyV ThobyV commented Feb 27, 2019

I support this move too. This would be very useful to have in synfig as also the web community Is large and svg-based animation on the web is growing. The thought of Having to use a great tool like synfig to make animations for the web makes me happy.

May I ask, What are the core requirements that could make this happen.

@morevnaproject

This comment has been minimized.

Copy link
Member

@morevnaproject morevnaproject commented Feb 28, 2019

We need someone who can code a converter from .sif (Synfig format) to Lottie. This could be done in simple language, like Python.

This task requires knowledge of .sif format (this is just XML and easy to understand) and Lottie format (can be figured out from
https://github.com/airbnb/lottie-web/tree/master/docs/json).

@dinolinjob

This comment has been minimized.

Copy link

@dinolinjob dinolinjob commented Mar 2, 2019

I want to implement this feature. Can I work on this one?

@ThobyV

This comment has been minimized.

Copy link

@ThobyV ThobyV commented Mar 2, 2019

We need someone who can code a converter from .sif (Synfig format) to Lottie. This could be done in simple language, like Python.

This task requires knowledge of .sif format (this is just XML and easy to understand) and Lottie format (can be figured out from
https://github.com/airbnb/lottie-web/tree/master/docs/json).

This would mean writing a Python converter that parses XML into structured JSON. Lottie uses JSON and uses a Javascript interface so it's works well for the web.

@ThobyV

This comment has been minimized.

Copy link

@ThobyV ThobyV commented Mar 2, 2019

Am I right to assume this? Also Would it be some sort of plugin written for Synfig?

@AnishGG

This comment has been minimized.

Copy link
Member

@AnishGG AnishGG commented Mar 2, 2019

Hi,
I am Anish from IIIT Hyderabad. I would like to contribute to this project in GSOC. I was going through the idea list and this seems interesting. Could anyone help me get started with this?

@morevnaproject

This comment has been minimized.

Copy link
Member

@morevnaproject morevnaproject commented Mar 3, 2019

@ThobyV Yes, you right. I think this can be implemented as Python plugin - https://wiki.synfig.org/Doc:Plugins

@dinolinjob @AnishGG welcome to the tread! I suggest to start by implementing a demo plugin that does some very simple conversion. I.e. converts some Synfig file with one simple layer (Rectangle or Circle or Image) to Lottie JSON.

@morevnaproject

This comment has been minimized.

Copy link
Member

@morevnaproject morevnaproject commented Mar 3, 2019

@dinolinjob @AnishGG @ThobyV Before starting, please let me know which simple layer you choose to implement - so we make sure each one is taking different task. ^__^

@ThobyV

This comment has been minimized.

Copy link

@ThobyV ThobyV commented Mar 3, 2019

@morevnaproject I think I'll go with a rectangle svg shape. I will make sure to update us here on my progress. 😄

@dinolinjob

This comment has been minimized.

Copy link

@dinolinjob dinolinjob commented Mar 3, 2019

@morevnaproject I will go with a circle.

@JagsPvr

This comment has been minimized.

Copy link

@JagsPvr JagsPvr commented Mar 3, 2019

@morevnaproject I am interested either. I'll go with the circle layer Synfig file. I will make sure to update you here. Most of my stuff is on Gitlab with id prasadPVR.

@morevnaproject

This comment has been minimized.

Copy link
Member

@morevnaproject morevnaproject commented Mar 4, 2019

Hi @JagsPvr ! The Circle layer task is already allocated to @dinolinjob. Please choose some other layer type. I suggest to take Image Layer or Star Layer (https://wiki.synfig.org/Star_Layer).

@morevnaproject

This comment has been minimized.

Copy link
Member

@morevnaproject morevnaproject commented Mar 4, 2019

This might be helpful - https://wiki.synfig.org/Sif_Format

@morevnaproject morevnaproject changed the title suggestion: add Lottie export format Feature request: Add Lottie export format Mar 4, 2019
@AnishGG

This comment has been minimized.

Copy link
Member

@AnishGG AnishGG commented Mar 4, 2019

@morevnaproject, I will go with the star layer.

@dinolinjob

This comment has been minimized.

Copy link

@dinolinjob dinolinjob commented Mar 4, 2019

Which parameter from synfig file format should be referenced to "$ref": "#/properties/valueKeyframe" in lottie json format?
eg:
"k": { "description": "Property Value", "extended_name": "Value", "type": "number" }, "x": { "description": "Property Expression. An AE expression that modifies the value.", "extended_name": "Expression", "type": "string" }, "ix": { "description": "Property Index. Used for expressions.", "extended_name": "Property Index", "type": "string" }, "a": { "description": "Defines if property is animated", "extended_name": "Animated", "type": "number" }
what are the paramters for these in synfig file format?

@morevnaproject

This comment has been minimized.

@morevnaproject

This comment has been minimized.

Copy link
Member

@morevnaproject morevnaproject commented Mar 5, 2019

For everyone: Important information about this project - https://forums.synfig.org/t/gsoc-2019-export-for-web/9507/17?u=konstantindmitriev

@ThobyV

This comment has been minimized.

Copy link

@ThobyV ThobyV commented Mar 5, 2019

Truly the information from the page is awesome. I think it may be possible to export simple SVG-only animations and work on other issues on time. The lottie library does not seem to support all AE effects itself. Anyways I made this simple animation in synfig (Exported svg as .sif from Inkscape)_for testing the exporter which I will be really happy if it animates on the web. I love the web and being a developer there it will be cool to have synfig do that,

synfarrow

@dinolinjob

This comment has been minimized.

Copy link

@dinolinjob dinolinjob commented Mar 5, 2019

@dinolinjob Are you referring to this? - https://github.com/airbnb/lottie-web/blob/master/docs/json/properties/valueKeyframe.json

Yeah, @morevnaproject I want to know what is the parameter for "k", "x", "ix" in synfig format?

@morevnaproject

This comment has been minimized.

Copy link
Member

@morevnaproject morevnaproject commented Mar 5, 2019

@ThobyV On SVG topic: I remember one user requested the possibility to export frames from Synfig into SVG image - https://www.facebook.com/synfig.org/posts/10156102720090920?comment_id=10156104482200920

being able to export individual frames as svg files would be great for mechandising my characters without having to repose them using inkscape but by snyfig outputing to svg format would mean synfig could be used to setup poses for my characters inside synfig and if we could output individual frames as svg i think that would really help when i finish my project and attempt to create a merchandisable product in t shirts and mug printing of my characters

@dinolinjob Sorry, I do not see "k", "x", "ix" in https://github.com/airbnb/lottie-web/blob/master/docs/json/properties/valueKeyframe.json ^_^"
Can you please clarify what do you mean?

@dinolinjob

This comment has been minimized.

Copy link

@dinolinjob dinolinjob commented Mar 5, 2019

@morevnaproject

This comment has been minimized.

Copy link
Member

@morevnaproject morevnaproject commented Mar 6, 2019

@dinolinjob I am not very familiar with Lottie format yet, so I cannot say for sure.

But, as far as I can see, https://github.com/airbnb/lottie-web/blob/master/docs/json/properties/value.json describes just an arbitrary value of some parameter. I.e., Circle Layer has Radius Parameter, which is defined by some value. This is what https://github.com/airbnb/lottie-web/blob/master/docs/json/properties/value.json defines. The "k" parameter seems to be defines the value itself.

I recommend to try constructing simple Lottie JSON file first, to understand how it works. Also, you can check some demos here - https://github.com/airbnb/lottie-web/tree/master/demo (you might want to use JSON prettifier to improve readability - https://jsonformatter.curiousconcept.com/).
For specific questions, you might want to contact Lottie authors via - https://github.com/airbnb/lottie-web/blob/master/demo/adrock/data.json
Finally, you can try to create simple Lottie JSON files by exporting from AE (Adobe gives free trial versions of AE - https://www.adobe.com/products/aftereffects/free-trial-download.html).

@dinolinjob

This comment has been minimized.

Copy link

@dinolinjob dinolinjob commented Mar 7, 2019

Thanks @morevnaproject I have created a simple lottie json by exporting from AE via bodymovin.
Now, I 'm mapping the required parameters between sif and json.

@susmita97

This comment has been minimized.

Copy link

@susmita97 susmita97 commented Mar 10, 2019

This might be helpful - https://wiki.synfig.org/Sif_Format

Is there any layer task that I can start working on that has not been assigned yet?

@susmita97

This comment has been minimized.

Copy link

@susmita97 susmita97 commented Mar 18, 2019

Hi @susmita97! This is highly encouraged! You can push code to a branch in your GitHub account and make a PR to this repository (just as @AnishGG did - #756). ^__^

Thank you I will do that

@susmita97

This comment has been minimized.

Copy link

@susmita97 susmita97 commented Mar 18, 2019

Hi @susmita97! This is highly encouraged! You can push code to a branch in your GitHub account and make a PR to this repository (just as @AnishGG did - #756). ^__^

Also should I share my pre-proposal with you?Could you provide me with a few suggestions about the format and other things?

@morevnaproject

This comment has been minimized.

Copy link
Member

@morevnaproject morevnaproject commented Mar 18, 2019

@susmita97

The best is to share pre-proposal privately by mailing me using PM on forums or via https://www.synfig.org/contact/ .

Application template can be found at the bottom of this page - https://summerofcode.withgoogle.com/organizations/6502365465673728/

@susmita97

This comment has been minimized.

Copy link

@susmita97 susmita97 commented Mar 19, 2019

@susmita97

The best is to share pre-proposal privately by mailing me using PM on forums or via https://www.synfig.org/contact/ .

Application template can be found at the bottom of this page - https://summerofcode.withgoogle.com/organizations/6502365465673728/

Thank you :)

@amanbora

This comment has been minimized.

Copy link

@amanbora amanbora commented Mar 30, 2019

Hi, I am interested in working on this feature as my gsoc project. Could you pls assign me a layer I could work on.

@morevnaproject

This comment has been minimized.

Copy link
Member

@morevnaproject morevnaproject commented Mar 31, 2019

Hi @amanbora! This feature is already got first prototype and quite a competition around. I encourage you to choose a different project from our Ideas List - https://synfig-docs-dev.readthedocs.io/en/latest/gsoc/2019/ideas.html - ore come up with your own idea. Thank you! ^__^

@LaPingvino

This comment has been minimized.

Copy link

@LaPingvino LaPingvino commented Jul 6, 2019

Telegram's new TGS format (https://telegram.org/blog/animated-stickers/) seems to be a variant of Lottie JSON compressed with GZ... because they have very specific restrictions, it might be relatively easy to get this implemented on top of your work?

@AnishGG

This comment has been minimized.

Copy link
Member

@AnishGG AnishGG commented Jul 7, 2019

Telegram's new TGS format (https://telegram.org/blog/animated-stickers/) seems to be a variant of Lottie JSON compressed with GZ... because they have very specific restrictions, it might be relatively easy to get this implemented on top of your work?

Yes, this seems to be a viable option. I will explore this furthur when I get more time(won't be able to focus on two things together). Or it will be much appreciated if someone can explore this option in the mean time.

@mbasaglia

This comment has been minimized.

Copy link

@mbasaglia mbasaglia commented Jul 7, 2019

I'm interested in telegram sticker export as well, I'll be testing out adding support for that myself

@mbasaglia

This comment has been minimized.

Copy link

@mbasaglia mbasaglia commented Jul 7, 2019

It was easy enough, I've made very minor changes to the lottie exporter to export tgs, my fork of the plugin is in here: https://gitlab.com/mattia.basaglia/tgs/tree/master/synfig

@AnishGG

This comment has been minimized.

Copy link
Member

@AnishGG AnishGG commented Jul 7, 2019

It was easy enough, I've made very minor changes to the lottie exporter to export tgs, my fork of the plugin is in here: https://gitlab.com/mattia.basaglia/tgs/tree/master/synfig

This is great! I myself have never dealt with telegram before, so I might not be able to test it.
But I guess this feature would be awesome!
@morevnaproject your views regarding this please. ^__^

@morevnaproject

This comment has been minimized.

Copy link
Member

@morevnaproject morevnaproject commented Jul 7, 2019

This is absolutely exciting! ^__^

@AnishGG AnishGG self-assigned this Jul 7, 2019
@LaPingvino

This comment has been minimized.

Copy link

@LaPingvino LaPingvino commented Jul 8, 2019

@mbasaglia can you give an example output file so I can test if my Telegram picks it up independently? Also would you be able to create a command line tool just to convert Lottie JSON to tgs? I think that would be really helpful to get other people up to speed.

@mbasaglia

This comment has been minimized.

Copy link

@mbasaglia mbasaglia commented Jul 8, 2019

@LaPingvino
Here's a test file (Note: I had to add the gz suffix to upload it to github, for telegram remove ".gz" from the file name, without extracting it)
test.sifz.D35E47A0.tgs.gz

Also keep in mind currently the Lottie exporter is very basic so it can't yet be used to export anything but the most trivial shapes and animations.

I already have utility scripts in the same repo I've linked above. I'm also working on a python library based off the Lottie json schema

@mbasaglia

This comment has been minimized.

Copy link

@mbasaglia mbasaglia commented Jul 8, 2019

Quick question: What kind of reference/documentation has been used to describe the lottie format for exporting from synfig? I see some discrepancies between the json schema in the lottie repo and the output from the synfig plugin.
The schema itself seems a bit low quality so I was wondering if there was a better source of info on the format.

@AnishGG

This comment has been minimized.

Copy link
Member

@AnishGG AnishGG commented Jul 8, 2019

Basically the above mentioned JSoN schema has been used. The keys which are serving no purpose have been removed intentionally. Even the schema has some mistakes in it.
So to be fully sure, you can create the shape/layer in After Effects and use bodymovin plugin to export it to lottie format. This will give you the correct results.

@AnishGG

This comment has been minimized.

Copy link
Member

@AnishGG AnishGG commented Jul 8, 2019

@mbasaglia
I had a look at the tgs code on gitlab. I noticed that you cloned the lottie-exporter's part which is merged in the master. It does not support splines yet.
But the lattest version #756 supports splines. You might want to clone this instead of the previous version

@mbasaglia

This comment has been minimized.

Copy link

@mbasaglia mbasaglia commented Jul 8, 2019

thanks, I've subscribed to that PR, I'll keep my version up to date based on that

@mbasaglia

This comment has been minimized.

Copy link

@mbasaglia mbasaglia commented Jul 10, 2019

btw, I did a lot of work on making sense of the lottie format so I developed a python framework that can be used to read and write these files. If there's ever the need to import lottie files into synfig my framework is capable of doing so.

@GraithTiger

This comment has been minimized.

Copy link

@GraithTiger GraithTiger commented Jul 20, 2019

I've picked up Synfig and have been trying out the lottie exporter, and I've found that it fails on this file:
noises_graithtiger.zip, giving the error:

Traceback (most recent call last):
  File "lottie-exporter.py", line 161, in <module>
    new_file_name = parse(FILE_NAME)
  File "lottie-exporter.py", line 66, in parse
    gen_layers(settings.lottie_format["layers"], root, len(root) - 1)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\layers\driver.py", line 82, in gen_layers
    itr)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\layers\group.py", line 85, in gen_layer_group
    asset = add_precomp_asset(settings.lottie_format["assets"][-1], canvas[0], len(canvas[0]))
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\sources\precomp.py", line 26, in add_precomp_asset
    layers.driver.gen_layers(lottie["layers"], root, layer_itr-1)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\layers\driver.py", line 82, in gen_layers
    itr)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\layers\group.py", line 85, in gen_layer_group
    asset = add_precomp_asset(settings.lottie_format["assets"][-1], canvas[0], len(canvas[0]))
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\sources\precomp.py", line 26, in add_precomp_asset
    layers.driver.gen_layers(lottie["layers"], root, layer_itr-1)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\layers\driver.py", line 82, in gen_layers
    itr)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\layers\group.py", line 72, in gen_layer_group
    group.update_pos(pos)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\synfig\group.py", line 75, in update_pos
    add(waypoint[0], offset)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\synfig\group.py", line 91, in add
    vector[0].text = str(float(vector[0].text) + offset[0])
ValueError: could not convert string to float: 

Looking into it a little it appears that the script is operating on a scalar when it's expecting a vector and erroring out. Adding

if vector.tag != "vector":
    return

before the offending line seems to fix that issue, but a similar error crops up later:

Traceback (most recent call last):
  File "lottie-exporter.py", line 161, in <module>
    new_file_name = parse(FILE_NAME)
  File "lottie-exporter.py", line 66, in parse
    gen_layers(settings.lottie_format["layers"], root, len(root) - 1)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\layers\driver.py", line 82, in gen_layers
    itr)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\layers\group.py", line 85, in gen_layer_group
    asset = add_precomp_asset(settings.lottie_format["assets"][-1], canvas[0], len(canvas[0]))
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\sources\precomp.py", line 26, in add_precomp_asset
    layers.driver.gen_layers(lottie["layers"], root, layer_itr-1)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\layers\driver.py", line 82, in gen_layers
    itr)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\layers\group.py", line 85, in gen_layer_group
    asset = add_precomp_asset(settings.lottie_format["assets"][-1], canvas[0], len(canvas[0]))
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\sources\precomp.py", line 26, in add_precomp_asset
    layers.driver.gen_layers(lottie["layers"], root, layer_itr-1)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\layers\driver.py", line 82, in gen_layers
    itr)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\layers\group.py", line 76, in gen_layer_group
    gen_helpers_transform(lottie["ks"], layer.get_layer(), pos[0], anchor[0], scale[0], angle[0], opacity[0])
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\helpers\transform.py", line 53, in gen_helpers_transform
    index.inc())
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\properties\multiDimensionalKeyframed.py", line 32, in gen_properties_multi_dimensional_keyframed
    gen_properties_offset_keyframe(lottie["k"], animated, i)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\properties\offsetKeyframe.py", line 353, in gen_properties_offset_keyframe
    cur_pos = parse_position(animated, i)
  File "G:\Program Files\Synfig\share\synfig\plugins\lottie-exporter\common\misc.py", line 90, in parse_position
    pos = [float(animated[i][0][0].text),
ValueError: could not convert string to float: 

and it's seeming to fail on this part of the xml:

<animated type="vector">
  <waypoint time="0s" before="constant" after="constant"><add type="vector">
                        <lhs>
                          <vector>
                            <x>0.0000000000</x>
                            <y>0.0000000000</y>
                          </vector>
                        </lhs>
                        <rhs>
                          <vector>
                            <x>0.0000000000</x>
                            <y>0.0000000000</y>
                          </vector>
                        </rhs>
                        <scalar>
                          <real value="1.0000000000"/>
                        </scalar>
                      </add>
                    </waypoint>
  <waypoint time="0.1s" before="constant" after="constant"><add type="vector">
                        <lhs>
                          <vector>
                            <x>0.0000000000</x>
                            <y>0.0000000000</y>
                          </vector>
                        </lhs>
                        <rhs>
                          <vector>
                            <x>0.0000000000</x>
                            <y>0.0000000000</y>
                          </vector>
                        </rhs>
                        <scalar>
                          <real value="1.0000000000"/>
                        </scalar>
                      </add>
                    </waypoint>
</animated>
@AnishGG

This comment has been minimized.

Copy link
Member

@AnishGG AnishGG commented Jul 20, 2019

<add type="vector">

Convert methods like add are not supported yet. These are yet to be implemented.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Releases
In Progress
You can’t perform that action at this time.