continuous morphing over several paths

[plagasul]

When chaining morphs , one can see where the endpoint/startpoint for every morph are, usually because of a change of "direction" of the morph, would there be any way of making the morphing "continuous" ?

I am trying this for shapes that share the same ammount of points. They are actually versions of the same shape. Some sort of abstract blob.

The code looks something like this:

var paths = [ ... ]

var itPath = document.getElementById("itPath")
function pathMorph(){
	itPath
			.animate(duration).plot(paths[1])
			.animate(duration).plot(paths[5])
			.animate(duration).plot(paths[4])
			.animate(duration).plot(paths[2])
			.after(daMorph)
}

Thank you

[Fuzzyma]

You should definitely try verstion 3 of svg.js as soon as it is out. We have conroller there which can give you a continous animation. Actually you could test it already. You need to check out the 776-new-fx branch. It should work for path morphing as long as you dont use this plugin but the basic path morph (same command length, same commands). However, to just see how it works, try a polygon first:

let canvas = SVG().addTo('#canvas').size('100%', '100%')
var randPoint = (x = 50, y = 50) => [
  Math.random() * 100 - 50 + x,
  Math.random() * 100 - 50 + y
]

var poly = canvas.polygon([
  randPoint(),
  randPoint(),
  randPoint(),
  randPoint(),
  randPoint()
]).attr({fill: 'none', stroke: 'black'})

var polyAni = poly.animate(new SVG.PID(0.01, 0.01))

SVG.on(document, 'click', function (e) {
  polyAni.plot([
    randPoint(e.pageX-50, e.pageY-50),
    randPoint(e.pageX+50, e.pageY-50),
    randPoint(e.pageX+50, e.pageY),
    randPoint(e.pageX+50, e.pageY+50),
    randPoint(e.pageX-50, e.pageY+50)
  ])
})

// EDIT: To try this example, edit the dirty file which is our working file to test stuff

[plagasul]

Thank you for replying. I'll test it as soon as I find the time. Is there any estimated release date for v3 ?

[Fuzzyma]

Not yet. We are both short on time but try to work continuously on it

[plagasul]

dear @Fuzzyma , I see that svg.js 3 has been released and it is being constantly updated. I would like to ask if continuous morphin is, as you suggested, possible with v3 and if I should try it.

As I understanded your previous answer, I should not use this plugin but animate 'plot' ?

Thank you and congratulations for the amazing work.

[Fuzzyma]

Yes it is possible. This plugin however is not designed to work with version 3. But even without it, you have basic animation propabilities for paths. Just make sure, that your path commands are the same.

For the continous animations see this example: https://codepen.io/fuzzyma/pen/bOWdrp
The line of interests are:

const poly = mask.polyline(initialData).animate(new SVG.Spring(700))
poly.plot(data)

The above example is ofc for a polyline but paths should work the same

// EDIT: To see the continous animation in the example, use the slider to slide around the datapoints

[plagasul]

Thank you. In the case of paths, am I going to be limited by number of points as it is usually the case ?

[Fuzzyma]

You are limited by your users performance so dont overdo it. Simple paths work best!

[plagasul]

Sorry, I meant if I am limited to animating/morphing among paths that share the same number of points. Thanks !

[Fuzzyma]

Yes, same path commands, same number - because this plugin wasnt renewed