【Raphael.js】エレメント毎に固有のデータを記憶させる方法 - RAPHAELIST
data関数 data関数を使用すると、エレメント固有の情報をエレメントごとに持たせておくことが出来ます。名札をつけて雑多なエレメントの中から目的のものを探すといった使い方から、グラフのデータを格納したりと様々な利用方法があります。地味な関数ながらも、これがあるのとないのとではコーディング効率が全く変わってくるでしょう。 実行結果 FullScreen http://jsfiddle.net/nekosmash/7gAeF/embedded/result/ 解説 まず、５つのcircleエレメントを描画する際に、それぞれのcircleエレメントに"index"というキーでカウンタを格納しています。そして、クリックされた時にこの”index”で保存されているデータを取り出し、その値が3であった場合は黒で塗り、それ以外を白で塗っています。実際にクリックして試してみてください。キー管理になります
【Raphael.js】Raphaelエレメントをアニメーションする - RAPHAELIST
animate関数 Raphael.jsの中で最も光り輝いている部分があるとすればずばりコレ！アニメーション機能です。この関数を使えば、様々なアニメーションが可能になります。 使い方はattr関数と非常によく似ています。animate関数はアニメーションさせる属性に加え、アニメーションが完了するまでの秒数やアニメーションタイプを指定する事で様々なアニメーションが可能になります。 実行結果 FullScreen http://jsfiddle.net/nekosmash/n9NdW/embedded/result/ Raphael最強伝説 このSVGのアニメーション処理は、モダンブラウザの中には対応しているものもあります。ですが、IE8以前のものはもちろんSVGに対応していませんし、あのIE9もSVGは対応していますがSVGのアニメーションには対応していません(oh...)。 その違いを見事
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
