0

这里的例子：http: //jsfiddle.net/dhREK/32/

使用 Raphael JS，我正在使用 for 循环创建一系列三角形。创建三角形后，我希望能够通过按索引选择 raphael 对象来为其中任何一个设置动画，例如：

tri[1]

或者

tri.1

但我不确定正确的语法。在任何情况下，使用

tri.animate({fill: '#ff0000'}, 400)

仅动画最后一个三角形。

如何具体选择其他节点？

谢谢！

var paper = new Raphael(0, 0, 500, 500);

for(var i = 0; i < 6; i++) {
    var coords = 'M 43 0 L 74 63 L 13 63 Z';

    if(i % 2) {
        coords = 'M 43 63 L 74 0 L 13 0 Z';                      
    }

    var tri = paper.path(coords).attr({
       'fill' : '#000',
        'stroke-width' : '0'
    });

    tri.transform('T'+i * 34+',0');
}


tri.animate({fill: '#ff0000'}, 400)

PS：我能够将我论文的所有子项都作为 jquery 对象（如 jsfiddle 链接中所示），但是animate()在 jquery 对象上使用不允许我为 raphael 属性设置动画......对此的任何评论都是非常感谢！

4

2 回答 2

4

更适合这种情况的是类似数组Paper.set

你可以这样定义

var triangles = Paper.set();

for(var i = 0; i < 6; i++) {
  // ....
  var tri = paper.path(coords) //

  triangles.push(tri);
}

triangles.animate(
  // ...
);
于 2012-08-06T08:06:16.357 回答
1

变成tri一个数组。

var paper = new Raphael(0, 0, 500, 500),
    tri = [];

for(var i = 0; i < 6; i++) {
    var coords = 'M 43 0 L 74 63 L 13 63 Z';

    if(i % 2) {
        coords = 'M 43 63 L 74 0 L 13 0 Z';                      
    }

    tri[i] = paper.path(coords).attr({
       'fill' : '#000',
        'stroke-width' : '0'
    });

    tri[i].transform('T'+i * 34+',0');
}


tri[1].animate({fill: '#ff0000'}, 400);
于 2012-08-06T08:01:12.943 回答