0

ここでの例：http：//jsfiddle.net/dhREK/32/

Raphael JSを使用して、forループを使用して一連の三角形を作成しています。三角形を作成した後、次のように、インデックスでラファエルオブジェクトを選択することにより、三角形のいずれかをアニメーション化できるようにします。

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オブジェクトで使用すると、ラファエルのプロパティをアニメーション化できません...それに関するコメントは次のようになります同様に大いに感謝します！

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 に答える