Interpolation between 2 SVG's

[Daniel m]

Hello everyone. 

I am new to Snap and was wondering if there is any built in way to interpolate between SVG's

IE: you pass in two different paths with the same number of points, than animate between the two SVG's. Similar to animation keyframes. (Also it would be awesome If you could do the same with shapes).

This is something that an external library could definitely do. But I was hoping there was some functionality lerking in the snap docs that could accomplish this.

Thanks for the help!

-Daniel

[Ian]

SVG can already do this natively, and also Snap can as well (I haven't checked if it uses same method), as long as the number of points are the same...

http://stackoverflow.com/questions/22987836/how-to-animate-path-morphs-using-snap-svg

[Daniel m]

I am more specifically referring to morphing between two imported SVG's. Is there any way to use path.animate() to morph between two imported SVG's with the same number of rects in a transform or same number of nodes in a path. 

[Ian]

The import aspect feels irrelevant, unless I'm missing something. Its not clear to me what you are asking, what is the difference...

You can already morph between two paths, assuming you can draw a rect or a circle etc as a path.

Lets say you have one large rect with 12 points.

You have a circle made via 12 points.

You want to morph between the two, then you animate the rect by passing it the path of the circle to animate to (ie the 'd' attribute which holds the path).

So the principle is the same, but I'm guessing you mean something else, but I'm not quite understanding that.

This is assuming the shapes are pretty straightforward, if one has a rotation applied to it, I would assume to animate between them, it would go a bit odd.

If you wanted to interpolate lots of aspects of 2 different images, I started something ages ago which I never finished, but could be of use to look through...

http://svg.dabbles.info/snaptut-load-compare-work.html

That takes different SVG images, loads them in, and tries to interpolate relevant attributes between each one in the frame, but its quite complex.

[Daniel m]

Sorry If I was unclear. Thanks for the reply as it did answer my question (inadvertently or not). 

The module(s) you linked are exactly what I am looking for. Do you mind if I use and/or extend the linked content? 

[Ian]

Heya feel free to extend it and feed back to the group.

Kind regards,

Ian