错误为数组中的补丁组添加动画

时间:2014-01-29 17:47:25

标签: javascript animation svg raphael

我成功地在这样的元素上移动数组中的路径:

var c = Raphael("canvas", 500, 500);
var p = c.path("most code").attr({
    fill: '#33CCFF',
    stroke: '#000000',
    'stroke-width': 5
});
var times = [most code];
var paths = [most code];
var current=0;

    function nextStep(){
        if (current>paths.length)
           return;
        p.animate({
            path: paths[current]
        }, times[current++],nextStep);
    }
nextStep();

jsfiddle and full code

但是我会通过包含路径的组的数组做同样的事情,我尝试了相同的方式,但是将组放在数组中,我需要成组,因为每个组都会告诉数百个到该元素的路径。 / p>

var rsr = Raphael('rsr', '500', '500');

// frame 1
var path3184 = rsr.path("most code").attr({
    "fill-rule": 'evenodd',
    "clip-rule": 'evenodd',
    fill: '#8FC876',
    id: 'path3184',
    parent: 'g3182',
    'stroke-width': '0',
    'stroke-opacity': '1'
}).data('id', 'path3184');

// frame 2
var path3186 = rsr.path("most code").attr({
    "fill-rule": 'evenodd',
    "clip-rule": 'evenodd',
    fill: '#2FA990',
    id: 'path3186',
    parent: 'g3182',
    'stroke-width': '0',
    'stroke-opacity': '1'
}).data('id', 'path3186');

// group 1
var g3182 = rsr.set();
g3182.push(
    path3184
);

// group 2
var g3183 = rsr.set();
g3183.push(
    path3186
);

// load next group function
var paths = [g3182, g3183];
var times = [1000, 1000];

var current=0

function nextStep(){
    if (current>paths.length)
       return;
    rsr.animate({
        path: paths[current]
    }, times[current++],nextStep);
}

nextStep();

jsfiddle and full code

1 个答案:

答案 0 :(得分:1)

我认为您只需更改一行:

rsr.animate({g3182.animate({

(或者您希望制作动画的组。)