我是 jquery 和学习 snap.svg 的新手，不知道这段代码是如何工作的？有人可以解释一下函数是如何获取值的吗？

Question

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
});

这是代码。这个功能是如何工作的？这些值是什么 parameters/arguments/array 这些是什么？

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

},5000 );

Answer 1

来自SnapSVG docs：

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

所以要分解你对上面 Snap.animate 的调用：

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 );

所以 0、40 只是动画的开始值和结束值。

我相信 'setter' 函数在当前 'value' 的整个持续时间内被调用。该值将介于 0 和 40 之间，具体取决于动画的距离（因此在本例中为 2.5 秒时为 20）

Here's a fiddle 展示另一个例子。

我是 jquery 和学习 snap.svg 的新手，不知道这段代码是如何工作的？有人可以解释一下函数是如何获取值的吗？

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?

javascript

jquery

svg

snap.svg