2012-05-03 8 views
2

これで私を助けてください。Raphaelを使用してマウスオーバーでサークルを拡大する

ラファエルを使用して円を描いています。マウスを動かすと、円はズームインとズームアウト(スケーリング)されます。

円のサイズを簡単に増やすことはできますが、円のサイズを増やしていく間にいくつかの効果が必要です。それは弾力的に増加するはずです。

私はRaphelを使用してそのアニメーションを開発したいと思います。 はあなたがこれは私が書いたコードである私

助けてくださいすることができます

smallCircles[0].hover(function() { 
    smallCircles[0].animate({ fill: 'rgb(231,88,88)', opacity: 0.95, r: 55,r:45,r:55, 'stroke-width': 0 }, 100); 
    }, 
    function() { 
    smallCircles[0].animate({ fill: 'rgb(240,153,153)', opacity: 0.8, r: 35, 'stroke-width': 0 }, 300); 
}); 

おかげで、 龍樹

+0

リンクが機能しないためeasingパラメータとして「弾性」を追加し、私はあなたが...すぐに新しい直径サークルの増加をい何を言ってるのか分からない、とあなたは増加をアニメーション化(スムーズ)したいですか? – corazza

+0

はい、私は円にマウスを置いた後に、円のサイズはアニメーションと共に増加するはずです。 例: 最初に円の半径は20mmです。 マウスを置いた後、半径は40mmに増加するはずです。 ここで私が必要とするのは、円の上にマウスを置いた後、半径が40mmに増えるはずですが、再び30mmに減り、再び40mm、次に30mm減ります。最後に、40mmの円を描きます。 完全に弾力のあるタイプ減少し、円の大きさを増大させる。.. はIAMはRaphaël.jsのライブラリでこれを実装する。.. おかげで、 龍樹 –

+0

こんにちはベイン は私が最終的に こちらの例をご覧くださいhttp://jsfiddle.net/ryWH3それをやりました/ 74/ 助けてくれてありがとう –

答えて

0

は、あなたが修飾を容易に構築されたを使用してみましたか?

以下はテストしていませんが、おそらく動作します。私はanimate方法

smallCircles[0].hover(function() { 
    smallCircles[0].animate({ fill: 'rgb(231,88,88)', opacity: 0.95, r: 55,r:45,r:55, 'stroke-width': 0 }, 100, 'elastic'); 
    }, 
    function() { 
    smallCircles[0].animate({ fill: 'rgb(240,153,153)', opacity: 0.8, r: 35, 'stroke-width': 0 }, 300, 'elastic'); 
}); 
関連する問題