Question

我正在尝试使用Raphael.js创建一个简单的动画序列。具体来说，我在一个数组中有一组raphael元素（圆圈），需要它们逐个淡入淡出。

我发现了一个jQuery插件“jQuery.eachStep（）”，但我无法弄清楚如何让它工作。 Rapheal正在运作，但“everyStep”不是。

var rsr = Raphael('rsr', '600', '300');
var fillColor = {fill: '#00A651','stroke-width': '0','stroke-opacity': '0'}

var circle_b = rsr.circle(513, 128, 4).attr(fillColor);
var circle_c = rsr.circle(477, 128, 4).attr(fillColor);
var circle_d = rsr.circle(441, 128, 4).attr(fillColor);
var circle_e = rsr.circle(406, 128, 4).attr(fillColor);
var circle_f = rsr.circle(370, 128, 4).attr(fillColor);
var circle_g = rsr.circle(334, 128, 4).attr(fillColor);
var circle_h = rsr.circle(298, 128, 4).attr(fillColor);
var circle_i = rsr.circle(262, 128, 4).attr(fillColor);
var circle_j = rsr.circle(226, 128, 4).attr(fillColor);
var circle_k = rsr.circle(191, 128, 4).attr(fillColor);
var circle_l = rsr.circle(155, 128, 4).attr(fillColor);


var collection = [ 
    circle_b, circle_c, circle_d, circle_e, circle_f, circle_g, circle_H, circle_i, circle_j, circle_k, circle_l 
];

$.eachStep(collection, '600', function(i, val, duration){
    val.animate({'opacity': '0'},  duration, 'linear'); 
});

或者如果我能够获得适当的循环工作就足够了。

http://jsfiddle.net/s5vAL/3/

Answer 1

我认为你可能不想要每个函数，除非你增加一个延迟或其中的东西。 animate方法有一个回调函数，它将在动画完成时调用一个函数（第4个参数）。所以你可以像这样递归......

var rsr = Raphael('rsr', '600', '300');
var fillColor = {fill: '#00A651','stroke-width': '0','opacity': '1'}

var circle_b = rsr.circle(513, 128, 4).attr(fillColor);
var circle_c = rsr.circle(477, 128, 4).attr(fillColor);
var circle_d = rsr.circle(441, 128, 4).attr(fillColor);   
var circle_e = rsr.circle(406, 128, 4).attr(fillColor);
var circle_f = rsr.circle(370, 128, 4).attr(fillColor);
var circle_g = rsr.circle(334, 128, 4).attr(fillColor);
var circle_h = rsr.circle(298, 128, 4).attr(fillColor);
var circle_i = rsr.circle(262, 128, 4).attr(fillColor);
var circle_j = rsr.circle(226, 128, 4).attr(fillColor);
var circle_k = rsr.circle(191, 128, 4).attr(fillColor);
var circle_l = rsr.circle(155, 128, 4).attr(fillColor);


var collection = [ 
    circle_b, circle_c, circle_d, circle_e, circle_f, circle_g, circle_h, circle_i, circle_j, circle_k, circle_l 
];

function nextAnim( count ) {
    if( count >= collection.length ) { return }
    collection[ count ].animate( {'opacity': '0'}, 1000, 'linear', nextAnim.bind(null,count+1 ) );
};
 nextAnim(0);

jsfiddle here

Raphael动画序列与现有元素的数组

1 个答案: