与现有元素的数组拉斐尔动画序列 [英] Raphael animation sequence with array of existing elements

问题描述

我，试图创建一个使用Raphael.js一个简单的动画序列。具体来说，我有一组数组中的元素拉斐尔（圆圈），并需要他们一个一个淡出。

I am, trying to create a simple animation sequence using Raphael.js. Specifically I have a set of raphael elements (circles) in an array and need them to fade in one by one.

我发现了一个jQuery插件jQuery.eachStep（），但我无法弄清楚如何得到它的工作。该Rapheal工作，但eachStep不是。

I found a jQuery plugin "jQuery.eachStep()" but I can't figure out how to get it to work. The Rapheal is working, but the "eachStep" is not.

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

或者，如果我能得到一个适当的for循环的工作，这将是足够的。

Or if I could get a proper for loop working that would be sufficient.

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

推荐答案

我觉得你可能不希望的每个功能，除非你在增加它的延迟或东西。该动画的方法有所回调，这将呼吁动画完成函数（第4个参数）。所以，你可以把它递归像这样...

I think you probably don't want an each function unless you increment a delay or something in it. The animate method has a callback which will call a function on completion of the animation (the 4th parameter). So you can make it recursive like this...

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

这里

这篇关于与现有元素的数组拉斐尔动画序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！