Question

使用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链接中所示），但在jquery对象上使用animate()不允许我为raphael属性设置动画。 ..任何评论都会非常感激！

Answer 1

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

您可以像这样定义

var triangles = Paper.set();

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

  triangles.push(tri);
}

triangles.animate(
  // ...
);

Answer 2

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

Raphael JS选择路径/对象/节点的特定实例

2 个答案: