The release of next stable version of Synfig is approaching fast and we have a lot to add to our previous sneak peek at upcoming features.

In this post I will focus on new features implemented as part of Google Summer of Code program.

We had two students working on Synfig with summer thanks to Google’s sponsorship and results of their work will be shipped in upcoming stable release.

So, what features they did?

1. Export animation for web

Anish Gulati created a plugin which exports Synfig animations in Lottie JSON format. Lottie format allows to play animations natively in web browser and on mobile platforms. This format is also used for creating Telegram’s animated stickers!

Currently plugin is capable to export most main graphic elements, with animation applied to their parameters (various types of interpolations supported), some converters can be applied to parameters (see detailed list of supported layers and parameters on this page).

To access this plugin, choose “Plugins” – “Export to Lottie” from menu. This will export the currently opened file to Lottie format.

After the export, you’ll have 3 files in the same directory as your animation: FILE.html, FILE.json and FILE.log.

  • To watch exported animation, just open FILE.html with any browser like Firefox or Google Chrome.
  • FILE.json is the main file where the Lottie format animation resides. Use it if you want to embed your animation to some webpage. Here is an example implementation at codepen.io. FILE.json can be directly played using lottiefiles.com.
  • FILE.log stores all messages/errors appeared during the export. If a layer is not supported, it will be notified in this file.

Limitations:

  • Exporting Bones (Skeleton) animation is not implemented yet.
  • Layers like region, outline, and polygon are exported frame-by-frame because there is no exact alternative provided by Lottie and hence the animations might lag on larger displays.
  • Animation of addition/deletion of spline points is not supported as Lottie format does not provides this feature.

2. Vectorization of bitmap images

This feature allows to convert raster (bitmap) image into vector image constructed from vector outlines. Our student Ankit Kumar Dwivedi ported this algorithm from OpenToonz animation software.

Now you can right-click on any image layer and select “Convert to Vectors…” command.

Convert-to-vector command in menu

 

This will bring a vectorizer settings dialog where you can set parameters:

  • Threshold – sets the value of the darkest pixels to be taken into account to detect lines to be converted to vector
  • Acurracy – sets how much the vector stroke will follow the shape of the original drawing lines. High values create more precise strokes but makes them more complex.
  • Despeckling – allows to ignore small areas generated by the image noise; the higher the value, the larger the areas ignored.
  • Max thickness – sets the maximum vector stroke thickness; if this value is low very thick lines will be converted in two strokes defining the line outline; if this value is high, they will be converted in a single stroke.

Output example 1
Output example 2

When?

We are very close to release of version 1.4.0, still, before the stable release happen we will publish at least one development version to properly test all new features. If everything will be fine, you can expect development version published next week.

I would like to say much thanks to everyone who supporting our project through donations and Patreon, many thanks to Google Summer of Code program for supporting development features highlighted in this post!

 

This Post Has 2 Comments

  1. Julius

    Hi! Is there any way to embed an image sequence into the Lottie file on export using your plugin? I would like to use an animation in Webflow but it won’t work since I can only import the JSON file which doesn’t contain my image sequence. Thanks in advance for your help!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.