今回パクオマージュするのはコレ TweenJS | Tween Circles Demo 「かっこいいやんけ・・・・」 CreateJSで公開されているデモです。クール。ただ、これ・・・Raphaelでもできそうやないの！ちょっと試してみるかあ！という事でオマージュしてみたいと思いま…

【Raphael.js】指定時間後にアニメーションを動かす方法 delay関数 基本的にアニメーションはanimate関数の後に即実行されます。数秒後に動かすディレイ効果を追加したい場合、delay関数を使用します。delay関数はアニメーションオブジェクトが持っている関…

data関数 data関数を使用すると、エレメント固有の情報をエレメントごとに持たせておくことが出来ます。名札をつけて雑多なエレメントの中から目的のものを探すといった使い方から、グラフのデータを格納したりと様々な利用方法があります。地味な関数ながら…

hover関数 hover関数を使用すると、マウスがエレメント内部に侵入した場合と出て行った時の両方のイベントを追加できます。使用頻度は何気に高そうです。 実行結果 FullScreen http://jsfiddle.net/nekosmash/gerWz/embedded/result/ 解説 エレメント内にマ…

click関数 Raphaelエレメントをクリックした時のイベントを追加する方法です。この辺は比較的親切な設計になってますね。click関数の引数にハンドラを渡すだけでOKです。 実行結果 FullScreen http://jsfiddle.net/nekosmash/V2MBB/embedded/result/ 解説 ク…

clone関数 複雑な過程で描いたRaphaelエレメントがあったとします。そんな超大作エレメントをもう一つ作る必要が出てきました。そんな時はエレメントをコピペしましょう。コピペはcloneメソッドです。 実行結果 FullScreen http://jsfiddle.net/nekosmash/Rz…

rotate関数 Raphaelのエレメントを回転させる事ができます。角度と軸となるポイントを指定することで回転可能です。 実行結果 フルスクリーンhttp://jsfiddle.net/nekosmash/5NMXz/embedded/result/ 解説 角度だけを指定した場合は、自動的にエレメント全体…

scale関数 Raphaelエレメントの拡大縮小を行える関数があります。変更後のサイズを指定するのではなく、倍率を指定することで大きさの指定を行います。 実行結果 解説 幅拡張をクリックするとrectエレメントの横幅が、高さ拡張をクリックするとrectエレメン…

使えます 単刀直入になりますが、普通に使えますね。あまり使う機会は無いかもしれませんが…。 実行結果

個別描画 VS まとめて描画 青コーナー！繊細な描画に定評のあるコベツ選手の入場です。迎え撃つ赤コーナーは配列の描画をまとめて行うジェイソン選手！その剛腕が期待されます！ 競技のルールは至ってシンプル。格子状の矩形を計2500個早く描画したら勝ちで…

紙がなくては始まらない 例えば現実世界でも、何か絵を描くには、紙とペンが必要になりますよね。Raphael上でも紙とペンを準備してやる必要があります。といってもその書き方は本当に簡単です。 実行結果 以下が実行結果になります。Resultタブをクリックし…