Блог

 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.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 в этом случае)

Вот скрипка, чтобы показать еще один пример в действии.