【Raphael.js】CreateJSの超クールなデモ(TweenCircle)と似たようなものをRaphaelで頑張ってオマージュしてみる
今回パクオマージュするのはコレ
「かっこいいやんけ・・・・」
CreateJSで公開されているデモです。クール。ただ、これ・・・Raphaelでもできそうやないの！ちょっと試してみるかあ！という事でオマージュしてみたいと思います。CreateJSと違ってraphael.jsはオールインワンなのがいいですね！果たしてどこまで再現できるでしょうか・・・！
実行結果
FullScreen http://jsfiddle.net/nekosmash/FXxgH/embedded/result/
漂う「コレジャナイ」感
とりあえず塗の透明度を0、境界線の透明度をグラデーション状にした同心円をクリックした位置にelascicでアニメーションさせています。何というか、動きそのものはいいんですが、光っている感じが全く無いですね・・・。こう・・・限界まで頑張っている蛍光灯というか、「どう？俺の部屋…？この間接照明オシャレでしょ？」とドヤ顔で言われたものの電球が明らかにW数不足な感じ、というか・・・。CreateJsのEasel.jsライブラリはどうもエレメントの重なりを表現する能力「オーバレイ」に長けているようです。raphaeljsではエレメントをただ重ねることしか出来ません。まぁ、これは仕方がない。うん！誰だって不得意なものはある！さらば！
【Raphael.js】指定時間後にアニメーションを動かす方法
【Raphael.js】指定時間後にアニメーションを動かす方法
delay関数
基本的にアニメーションはanimate関数の後に即実行されます。数秒後に動かすディレイ効果を追加したい場合、delay関数を使用します。delay関数はアニメーションオブジェクトが持っている関数なので、まずはアニメーションオブジェクトから作成してやる必要があります。以下の例では3秒後にサークルが小さくなっていきます。
実行結果
FullScreen http://jsfiddle.net/nekosmash/Z8tTU/embedded/result/
解説
アニメーションオブジェクトの中にある関数という事で少し使いにくいですね。animate関数に渡す配列に関連付け出来たら1ラインで書けて楽なのですが。。ひとまずこれでアニメーションのディレイはOKですね！
Animation.delay(time);
- Animation: アニメーションの定義だけを格納したオブジェクト
- time: 何ミリ秒後に動かすかを定義
- 返り値: ディレイ効果が付与されたアニメーションオブジェクト
Android標準ブラウザはver3.0からSVGに対応しているらしい
最近、テザリング欲しさにAndroid機種に変更したのですが、この標準ブラウザがSVGに対応していないらしく、早速挫折感を味わっています。
raphael.jsでさえその実行結果が表示されないという事は、あのIEでさえ実装していたVMLにさえ対応していないという事。これは・・・（あかん）・・・！
調べてみると、大半のユーザーは標準ブラウザを捨てて、Playストアに用意されているOperaやDorphinブラウザを採用している様子。しかしその避難先のブラウザも、大半はSVGには対応していません。
raphael.jsによるSVGの動作確認ができたのは、Firefox と Opera Mobileです。Opera MiniやOpera Mini NextはSVGに対応していませんでした。
うーむ。
ところがよくよく調べてみると、どうやらAndroid3.0の標準ブラウザはSVGに対応しているようです。これは導入するしかない・・・！Android3.0といえば、HoneyCombですね。
ってこれ、タブレット端末限定やないか・・・(あかん)・・・！
つまり、スマートフォン用のAndroidでSVGがサポートされるのは実際はAndroid4.0からになります。で、今のところこのAndroid4.0はまだダウンロードできない状態。僕の持っている端末はGalaxy SII LTE(SC-03D)ですが、docomoからのお知らせによると、Android4.0がダウンロード可能になるのは今年の7月。
気の長い話ですなー。
【Raphael.js】SVGで円弧を描く関数を作ってみた。
SVGで円の弧を描く
今日のテーマは円弧の描画です。Raphael.jsではそれは可能ですが、SVGの規約に則ったパス文字列を指定しなければ正しい円弧を描く事はできません。パス文字列…あのややこしいやつです。Raphael標準の描画メソッドにあってもよさそうなものですが、今のところ存在しないようです。という事でつくってみました。パイプ状？のグラフなどに使ってみてください。中心座標、半径、角度を与えると、パス文字列を返してくれます。
実行結果
FullScreen http://jsfiddle.net/nekosmash/eUTFw/embedded/result/
解説
あとは、作った関数をtransformで回転させたりすれば、どのような弧でも描けます。このパスはSVG共通の書式になっているので、Raphael.jsに限らず使用できると思います。 ファンキーグラマラスな円弧を作っちゃってください。
getArc(cx,cy,r,rad);
- Element: データを記憶させるRaphaelエレメント
- cx: 中心点のY座標
- cy: 中心点のX座標
- r: 半径
- rad: 弧の角度
- 返り値: 円弧のパス文字列
【Raphael.js】エレメント毎に固有のデータを記憶させる方法
data関数
data関数を使用すると、エレメント固有の情報をエレメントごとに持たせておくことが出来ます。名札をつけて雑多なエレメントの中から目的のものを探すといった使い方から、グラフのデータを格納したりと様々な利用方法があります。地味な関数ながらも、これがあるのとないのとではコーディング効率が全く変わってくるでしょう。
実行結果
FullScreen http://jsfiddle.net/nekosmash/7gAeF/embedded/result/
解説
まず、５つのcircleエレメントを描画する際に、それぞれのcircleエレメントに"index"というキーでカウンタを格納しています。そして、クリックされた時にこの”index”で保存されているデータを取り出し、その値が3であった場合は黒で塗り、それ以外を白で塗っています。実際にクリックして試してみてください。キー管理になりますので、複数のデータを持たせることが可能です。
Element.data(key,item);
- Element: データを記憶させるRaphaelエレメント
- key: 記憶するデータのキーとなる値
- key: キーにくっつける値
- 返り値: データを記憶したエレメント
Raphaelが2.1.0へアップデート
Raphaelがアップデートされているようです。
内容は大まかに
・新しい関数の追加
・paper.Fontが改行に対応し、関数の戻り値を
・eveイベントがraphael名前空間の中に
・matrixなどのバグフィックス
などなど。関数はエレメントの情報を取得するBBox系が大幅に強化されてるっぽいです。Raphaelは凄く精力的にアップデートされてていいですねー。
https://github.com/DmitryBaranovskiy/raphael/blob/master/history.md
【Raphael.js】Raphaelエレメントにマウスホバーのイベントを追加する方法
hover関数
hover関数を使用すると、マウスがエレメント内部に侵入した場合と出て行った時の両方のイベントを追加できます。使用頻度は何気に高そうです。
実行結果
FullScreen http://jsfiddle.net/nekosmash/gerWz/embedded/result/
解説
エレメント内にマウスが入ればポヨヨンと縮小するアニメーション。出ていけばポヨヨンと元に戻るアニメーションをさせています。基本的に第2引数までの指定でもOKですが、第3、第4引数でエレメントを渡して処理させる事も出来ます。
Element.hover(hover_in_handler, hover_out_handler, in_item, out_item);
- Element: ホバーイベントを追加するエレメント
- hover_in_handler: ホバー時に処理させる関数
- hover_in_handler: ホバー終了時に処理させる関数
- (省略可能)in_item: hover_in_handlerにエレメントを渡すことができる。
- (省略可能)out_item: hover_out_handlerにエレメントを渡すことができる。
- 返り値: ホバーイベントを追加したRaphaelエレメント
