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
});
代码如下。这个函数是如何工作的?这些值是什么某种参数/参数/数组这些是什么?
Snap.animate(0,40, function( value ){ // 0,40 what are these?...
innerCircle.attr({ 'strokeDashoffset': value })
alert(value);
},5000 );
来自SnapSVG文档:
Snap.animate(from, to, setter, duration, [easing], [callback])
把你给Snap的电话分开。动画上图:
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)