CODEWITHSUNDEEP
javascriptjquerysvgsnap.svg
Lucky
Lucky

Reputation: 7

I'm new to jquery and learning snap.svg and don't kow how this code work? Can someone Please explain how the function is getting values?

var s = Snap("#svgout");

var innerCircle = s.circle(150, 150, 80).attr({
    fill: "none",
    stroke: 'red',
    strokeWidth: 30,
    strokeDasharray: "10 300 40 10 10 10 10 10 10 10 10 10 10 10 10 10 10",
    strokeDashoffset: 50
});

Here is the Code. how this function is working? what are these values somekind of parameters/arguments/array what are these?

Snap.animate(0,40, function( value ){ // 0,40 what are these?...
       innerCircle.attr({ 'strokeDashoffset': value })
alert(value);

},5000 );

Upvotes: 0

Views: 59

Answers (1)

Spen
Spen

Reputation: 542

From the SnapSVG docs:

Snap.animate(from, to, setter, duration, [easing], [callback])

So to break down your call to Snap.animate above:

var from = 0; // starting value
var to = 40; // ending value

var setter = function ( value ) { // value will be somewhere between 0 and 40
    innerCircle.attr({ 'strokeDashoffset': value })
}; // called by SnapSVG to change the strokeDashoffset

var duration = 5000; // 5000 milliseconds (or 5 seconds)

// Using the above values, this is the equivalent to your original call 
Snap.animate( from, to, setter, duration );

So the 0, 40 are just your start and end values for the animation.

I believe that the 'setter' function is called throughout the duration with the current 'value'. That value will be somewhere between 0 and 40, depending on how far in to the animation it is (so at 2.5 seconds it will be 20 in this case)

Here's a fiddle to show another example in action.

Upvotes: 1

Related Questions