Morphing Shape with Path and Animate

[kevin7]

does SVG.js support this:
http://svg-mitchallen.blogspot.com.au/2005/03/morphing-shapes-in-svg.html

I read through the documentation, but I couldn't seem to find something related to it.

[wout]

I am working on a morph plugin that will use this technique but it is not yet ready for release.

[kevin7]

oh.. cool, do you have an ETA. I'm from queness.com, and working on a tutorial about this plugin. btw, good job.

[wout]

In fact it is already working but I need to overcome one problem. I can't really give an ETA because the plugin can only be released when I found a decent solution. This can be tomorrow or next month.

[kevin7]

Ok, looking forward to it.

[wout]

If you need any help on the tutorial, please let me know.
I am looking forward to it.
Thanks.

[hyperboreans]

@wout why don't you tell us what is the problem? You might find help :-)

[wout]

Well, my main concern with SMIL animations is that they are difficult to control. For example, you can't simply stop an animation halfway the defined duration. In case of a path morph that would result in the element returning to its initial state, or at best with a bit of tweaking to its destination. This is a huge problem if you want to use those animations in combination with mouse events.

Another, more dramatic problem with SMIL is that if paths get complicated no animation happens at all. It seems points in a path needs to match. The result is a hard switch from one shape to the other at the end of the given duration.

Therefore I am looking into forging a path recalculation module. This will take more time and it's a lot more complex but it will be much more flexible and it will integrate nicely with our the built-in SVG.FX module.

[hyperboreans]

So the problem is realizing the animations while sticking to SMIL -- while as far as I can see most of the libraries out there (Raphael, D3) simply keep track of the animation in the code and modify the attributes in the SVG accordingly (e.g. on a frame-by-frame basis).

A "dummy" path recalculation function should be an easy task, if one is not too picky 😄. I wrote a piece of code that does exactly that by simply adding points to the original path without modifying its appearance, such that the total count of points before/after the animation stays the same. That was enough in the context I wrote it for. I would advise against more complex solutions, unless the result is a simple and flexible way for the developer to specify what section of the path should be "affected" by the animation.

[wout]

Yes, the questions was about SMIL animations. I have briefly walked this path but quickly realised that SMIL is absolutely not the way to go. In fact I don't think there is any future for it unless they would completely rewrite SMIL to make it dynamically controllable.

I have also looked at path tweening/recalculations and it is absolutely manageable. Although time is not on my hands an I am developing svg.js as I go. Currently I am only implementing features when I need them myself. Of course I would love to add some fancy features and any help with that would be greatly appreciated.

My plan is to add this kind of functionality in a plugin. Any interest in working together on this?

[hyperboreans]

Sure, I can spend some time (few hours per week) on this. I'm only afraid a plugin is not enough if we need to work on individual points of the paths. As soon as you have an initial idea for the design of the plugin just let me know and let's move on from there.

[wout]

There is no difference to a plugin or native modules in svg.js. It's architecture allows extension of core classes without limitations. I will set up a draft so we can work from there.

[marthijn]

Any news on this guys? I'm interested in this functionality as well!

[wout]

The good news is that it will be a plugin. The bad news is that I have very little time on my hands, so no ETA.

[marthijn]

Any chance you can send me an early development version? I really need it! :-)

[wout]

I would but I haven't started yet :)