Raphaelで縦方向にスケールする方法は？

Question

次のコードスニペットを考えてみてください：

jQuery(function() 
{ 
    drawLogo(); 
}); 

function drawLogo() 
{ 
    var paper = Raphael('logo', 100, 100);//creates canvas width=height=100px 
    var rect = paper.rect(1,1,98,98, 10);//chessboard background 
    rect.attr("fill","#efd5a4"); 
    var circle1 = paper.circle(20,20,12); 
    var circle2 = paper.circle(50,20,12); 
    var circle3 = paper.circle(80,20,12); 
    var circle4 = paper.circle(20,50,12); 
    var circle5 = paper.circle(50,50,12); 
    var circle6 = paper.circle(80,50,12); 
    var circle7 = paper.circle(20,80,12); 
    var circle8 = paper.circle(50,80,12); 
    var circle9 = paper.circle(80,80,12); 
    paper.path("M35,0 L35,100"); 
    paper.path("M65,0 L65,100"); 
    paper.path("M0,35 L100,35"); 
    paper.path("M0,65 L100,65"); 

    circle1.animate({scale:"0"}, 2000); 
    //setTimeout(circle1.animate({scale:"1"}, 2000), 2000); 

} 

私が達成したいアニメーションは2つの部分、まず、垂直スケールの100％から0％までアニメーション、二、垂直スケールアニメーションのチェーンです0％から100％の範囲である。上記のコードは縦横両方向に縮尺されているので、間違っています。

Raphaelのドキュメントをチェックしましたが、特に正しい構文が表示されないため、取得できませんでした。jQueryのような優れたAPIリファレンスはありますか？私は次のように変更を加えた場合

はまた、その後、Firefoxがあまりにも多くの再帰を言って、エラーを示しています

transform(circle1); 
function transform(item) 
{ 
    item.animate({scale:"0"}, 2000, transform(item)); 
} 

私はこれは悪いですけど、無限の「ループ」を取得するための正しい方法は何ですかアニメーション？

編集：私は、これは、少なくとも5円のために、アニメーションの最初の部分を実行することを期待して、次の

transform([circle1, circle3, circle5, circle7, circle9]); 
function transform(elements) 
{ 
    for(var e in elements) 
    { 
     e.animate({scale:"0"}, 2000); 
    } 
} 

にコードを変更し、残念ながら、それだけで電子を言ってエラーが発生します.animate（）は関数ではありません。おそらく理由は、配列から要素を取り戻すと、その要素は「型を失う」ということでしょうか？ （あなたは、昔ながらのArrayListから要素を取得するときにだけ、Javaのように、明示的に意気消沈したり、すべてしなければならないことがちょうど型オブジェクトのものであろう。）

第二編集ベッド に一度のために、少なくとも以下の作品を行く前に！

var elements = [circle1, circle3, circle5, circle7, circle9]; 
for(var i = 0; i < elements.length; i++) 
    transform(elements[i]); 
function transform(e) 
{ 
    e.animate({scale: 0},2000, function(){this.animate({scale:1}, 
    2000, transform(this));}); 
} 

達成部品は：5円のために、2つのスケーリングアニメーションを次々に連鎖し、 故障した部品：依然として無限ループではなく、垂直スケールだけでなく、

Answer 1

1. 一方向だけの円のスケーリングができないようです。代わりに、楕円を使用します。 scale属性は、 "1 0"のような文字列をとります。これは、x（水平方向）とy（垂直方向）のスケール100％を意味します。 attr-scale

だからあなたのアニメーションが

ellipse.animate({"50%": {scale: "1 0"}, "100%": {scale: "1 1"}}, 2000); 

によって達成することができるが、楕円は縦に0％をスケーリングする必要があるアニメーションの50％に意味animate

における第三の方法（キーフレーム）を参照してくださいを参照してくださいと100％アニメーションでは100％に戻ります。

1. 関数を呼び出すと、すぐに評価されます。トランスフォーム（アイテム）を再度アニメーション化する前にトランスフォームが呼び出されます。代わりに関数にラップして渡す必要があります。

ここラファエル2.0+で完全なソース

jQuery(function() 
{ 
    drawLogo(); 
}); 

function drawLogo() 
{ 
    var paper = Raphael('logo', 100, 100);//creates canvas width=height=100px 
    var rect = paper.rect(1,1,98,98, 10);//chessboard background 
    rect.attr("fill","#efd5a4"); 
    var ellipse1 = paper.ellipse(20,20,12, 12); 
    var ellipse2 = paper.ellipse(50,20,12, 12); 
    var ellipse3 = paper.ellipse(80,20,12, 12); 
    var ellipse4 = paper.ellipse(20,50,12, 12); 
    var ellipse5 = paper.ellipse(50,50,12, 12); 
    var ellipse6 = paper.ellipse(80,50,12, 12); 
    var ellipse7 = paper.ellipse(20,80,12, 12); 
    var ellipse8 = paper.ellipse(50,80,12, 12); 
    var ellipse9 = paper.ellipse(80,80,12, 12); 
    paper.path("M35,0 L35,100"); 
    paper.path("M65,0 L65,100"); 
    paper.path("M0,35 L100,35"); 
    paper.path("M0,65 L100,65"); 

    var elements = [ellipse1, ellipse3, ellipse5, ellipse7, ellipse9]; 
    for(var i = 0; i < elements.length; i++) 
     transform(elements[i]); 

} 

function transform(e) 
{ 
    e.animate({ 
        "50%": {scale: "1 0"}, 
        "100%": {scale: "1 1", callback: function() {transform(e);}} 
       }, 2000); 
}