GSOC-2019::Export Animation for Web



This task seems to be much difficult than what I thought of. I need insert and remove waypoints from the animation to achieve this. So I am devising an algorithm to take care of all the corner cases.
In the mean time, I will also start working on other layers for a good progress.
So this marks the finish of star layer. I have tested it from my side and everything seems ok till now.
@KonstantinDmitriev could you test this layer? Please inform if anything seems off.


You right, if inner radius is animated, then your code should take this into account and modify/replace waypoints in time segments where polygon parameter changes.

I will test the exporter for Star Layer and get back with my feedback. :slight_smile:

What layer type you would like to implement next?


I will get started with circle layer?
Also should push this new layer’s work on the same PR? Or a new pull request?


Circle layer - good. :slight_smile:

Let’s use the same PR. Just rename it accordingly. :slight_smile:


Weekly Update(19-26 May):

  • Implemented the export of circle layer. (link)
  • Implemented the export of rectangle layer without animations. Lottie format uses origin and length of the 2 sides of rectangle to define the rectangle layer whereas Synfig uses two extreme points of the rectangle to define the layer. Hence I need to devise an algorithm to take care for the export of all the corner cases. But I am facing this issue while doing it. Any suggestions or help on this issue will be much appreciated.
  • Added documentation for the circle layer and the supported features of the layers. (link)
  • An HTML file along with the raw json data is now generated by the plugin as per the feature request by @KonstantinDmitriev. (link)
    In the next week, I will be focusing on solving the issue given in second point and completing the rectangle layer. Also, will start working on the next layer. (That might be simple circle layer)
    Any suggestions or improvements are most welcome! :smile:
    That is it for this week.


Weekly Update(27 May - 1 June):

  • Implemented the export of simple circle layer. (link)
  • Implemented the export of solid color layer. (link)
  • Rectangle layer point1 and point2 animations now working properly. This task required major implementation and thinking!
  • Started working on import image layer.
    In the next week, I will be working on expand parameter of rectangle layer, will be finishing import image layer. Moreover, I will remove code smells introduced till now and write developer documentations for the above implemented layer.
    Any feedbacks or suggestions will be much appreciated!
    That is it for this week.


So I started with the region layer. The export is working perfectly when no animations are introduced in region layer. The problem I am facing is: In Synfig, a bline point's parameters can be animated independent of each other. For example: t1 and t2 are animated independent of each other.
But in Lottie, the 3 parameters: t1, t2 and point have common animation properties(in tangent and out tangent of bezier curves).
The best way to address this problem, according to me, is to generate the data for each frame and save it in Lottie Json format. But this will have an effect on file size generated.
Can anyone suggest a better way besides this? Or should I continue with this only?


Yes, that’s a problem.

Probably, it is possible to generate data for each waypoint. I.e. if one parameter has waypoint at some moment of time, then it is needed to generate waypoints for other parameters. That will require additional calculations to preserve shape of animation curve. But that’s should be possible, as this algorithm already implemented for BLines -


I understand that waypoints can be generated while preserving the shape of animation curve.
But the problem is consider a time t, at this time, consider a situation when t1 has clamped interpolation, t2 has hold interpolation and point has linear interpolation. This can not be handled by Lottie because, at a time t, all these 3 parameters should have same interpolation according to Lottie.
That is why I was suggesting data generation for each frame.
@KonstantinDmitriev, should I then continue with data generation for each frame?
Please correct me if I am wrong here.


You right. :slight_smile:

On the other hand, from my experience it is not very common case when user sets interpolation independently for tangents and point. This case can take place when figure (Region) has not many points. When figure has many points, then it is very likely that t1, t2 and point has same waypoint interpolation.

I suggest to make a combined solution:
Say, we have a segment from one waypoint to another. Then we analyze if t1, t2 and point can have same interpolation (including “calculated” waypoints). If “yes”, then add “calculated” waypoints (keping the shape of animation curve). In “no” - then generate data for each frame on that segment.


The combined solution looks good to me.

One more problem arose while exploring the region layer: At a time t, In lottie format, all the spline points(means all spline points and all it’s parameters) should have same interpolation. This makes it extremely unlikely that all the spline points and it’s parameters will have same kind of interpolation in Synfig animation. Hence, I will first work on generating data for each frame. And then do the analytical part, and if interpolation type is same for each waypoint and spline point, then do as you suggested above.
Is this okay?


Weekly Update(2 June - 8 June):

In the next week, I will be working on animation of region layer according to the discussion with @KonstantinDmitriev above and write developer documentations for the layers implemented till now. Will also try to update the documentation for supported layers.
Any feedbacks or suggestions will be much appreciated!
That is it for this week.


Oh, I see. Yes, then generating data for each frame will take place more frequently.

Good, let’s go for it! :slight_smile:


So vertex animations for region layer is now working.
The remaining part is animation of inserting/deleting vertices from region/polygon layer. This is not directly provided by Lottie. So I tried to understand it’s working, but I am not able to understand it properly. Is there some resource where I can get a good grip over it? Or can someone explain by giving some small example. :slight_smile:

I am attaching an example here, where I inserted a vertex and removed the same vertex. Hence finally, I don’t see any animation in the canvas. I am not able to understand why is this happening?
insert_item_region.sifz (1.2 KB)
@KonstantinDmitriev please have a look at this.


Please take a look at this -

In the example you provided I actually see slight changes in top-left area of the shape.

I guess, you do not see change, because vertex move when it is turned on/off. So, two types of animations are mixed.

I have modified the file by removing vertex movement, so it is more clearly see how disabling vertex works -
insert_item_region.sifz (1.1 KB)


Please notice, there is a bug with indication of disabled segments -


All right, I will take care while dealing with it.
Thanks :smiley:


I have fixed it now :slight_smile: -


Weekly Update(9 June - 15 June):

  • Add support for animation of region layer.
  • Add polygon layer.
  • Add developer documentation for import image, region, and polygon layers.
  • Add support for filled rectangle and rectangle layer as in the stable version 1.2.2

In the next week, I will be evaluating the possibility of adding animation to Addtion/Deletion of vertices for polygon/region layer. I will also try to get started with Outline layer.
Any feedbacks or suggestions will be much appreciated!
That is it for this week. Stay tuned for the next update. :smiley:


Yes, now I see that, there is some movement in the vertex.
Could you provide some clarifications:

  • In the xml file, I see the <entry> is on at 0f and 12f, off at SOT and 3s. What is SOT here? Also, as there is no off point between 0f and 12f. Does this mean, there is no use of 12f off point?
  • How is this(value of <entry> between 12f and 3s) influencing the region? Could you point me to the code, where it is written.

Thank you!