CODEWITHSUNDEEP
htmlanimationsvgsnap.svg
Dale Sparrow
Dale Sparrow

Reputation: 121

SVG shape morphing with value and not time

I am creating a game using Javascript and snap.svg

I've made a lot of interfaces and UIs with snap.svg before and made extensive use of the tweening provided with the animate function. This includes animations of morphing between two shapes with the same amount of vertices. The question is, can I tween between two SVG paths using a value and not a time? I want to morph between two shapes by putting in my own interpolation value i.e. : morph(PATH_A, PATH_B, 0.76) then it should be 0.76 the way from A to B.

I feel this functionality should already exist since that's what's happening to the SVG with every time step? How do I access this lower down function?

Regards, Dale

Upvotes: 0

Views: 243

Answers (1)

Ian
Ian

Reputation: 13852

There's possible a few different slightly hacky ways to do this. Probably the simplest is to make an animation easing function return the value you want, and don't bother including a duration. So this would look a bit like the following...

var s = Snap("#svg");
var d1 = "M94.2,265.7L82,203.4c43.3-15.6,83.8-29.2,137.1-20.2c61.5-27.6,126.1-56.9,202.6 46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7,231.9,208.2,247.6,94.2,265.7z";

var d2 = "M179.4,83.5l62.4-11.8c15.3,43.4-76,102.6-22.6,111.5c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C250.6,296.7,52.4,259.2,179.4,83.5z"

var path = s.path(d1)

function animatePartial( val ) {
    var a = Snap.animation({ d: d2 }, 0, function(n) { return val })
    path.animate(a)
}

animatePartial(0.1)

setTimeout( function() { animatePartial(0.9) }, 1000 )

So the above example would jump to a percentage of the animation with a value between 0 and 1 being start/end.

jsfiddle

Upvotes: 1

Related Questions