【Raphael.js】様々なアニメーション方式
アニメーション方式は全部で8つ
Raphael.jsでは8つのアニメーション方式があります。jQueryやmootoolsなどではおなじみの動きです。ここでは実際にそれらのアニメーションがどのように動くのかを見てみましょう。
実行結果
FullScreen http://jsfiddle.net/nekosmash/n9NdW/embedded/result/
解説
animate関数に以下の文字列を渡す事で、対応したアニメーションが実行されます。緩急のあるアニメーションを行いたい場合は必須でしょう！ サンプルでは各エレメントをクリックすることで、ラベルに書かれた通りのアニメーションを実行します。
| easingパラメータ | 説明 |
| linear | ひたすら一定の速度を保つアニメーション |
| < | 徐々に速くなるアニメーション |
| > | 徐々に遅くなるアニメーション |
| <> | 中盤が速いアニメーション |
| backIn | 弓矢のように一度引いてから動き出すアニメーション |
| backOut | 目標値を一瞬オーバーするアニメーション |
| elastic | ゴムのような弾性のアニメーション |
| elastic | ボールがバウンドするようなアニメーション |
Element.animate({parameter},timespan,easing,callback);
- Element: アニメーションさせるRaphaelエレメント
- parameter: アニメーションさせる属性を指定するパラメータ配列
- (省略可能)timespan: アニメーションにかける時間。省略した場合、一瞬でアニメーション後の見た目に変化する。
- (省略可能)easing: アニメーションの仕方を指定する。省略した場合は均一なアニメーションとなる。
- (省略可能)callback: アニメーション後に呼び出されるコールバック関数
- 返り値: アニメーションさせるRaphaelエレメント
【Raphael.js】Raphaelエレメントをアニメーションする
animate関数
Raphael.jsの中で最も光り輝いている部分があるとすればずばりコレ！アニメーション機能です。この関数を使えば、様々なアニメーションが可能になります。
使い方はattr関数と非常によく似ています。animate関数はアニメーションさせる属性に加え、アニメーションが完了するまでの秒数やアニメーションタイプを指定する事で様々なアニメーションが可能になります。
実行結果
FullScreen http://jsfiddle.net/nekosmash/n9NdW/embedded/result/
Raphael最強伝説
このSVGのアニメーション処理は、モダンブラウザの中には対応しているものもあります。ですが、IE8以前のものはもちろんSVGに対応していませんし、あのIE9もSVGは対応していますがSVGのアニメーションには対応していません(oh...)。
その違いを見事に吸収してくれるのがRaphael.jsの素晴らしいところです。HTML5でのcanvasでもアニメーションは出来るんですが、IE7などに対応させる為にはとてつもない労力が必要になります。何故ならcanvasライブラリの多くがIE8以前に対応していませんし、googleが提供しているexcanvas.jsを使っても出来る事と言えばせいぜいcanvas上に図を描くくらい。アニメーションはできません。
というわけでアニメーションというジャンルだけならIE8以前にもきちんと対応しているRaphael.jsが最強伝説です！
解説
クリックすると、円が徐々に小さくなっていきます。ここでは1秒間の間にリニアなアニメーションを実行しています。
Element.animate({parameter},timespan,easing,callback);
- Element: アニメーションさせるRaphaelエレメント
- parameter: アニメーションさせる属性を指定するパラメータ配列
- (省略可能)timespan: アニメーションにかける時間。省略した場合、一瞬でアニメーション後の見た目に変化する。
- (省略可能)easing: アニメーションの仕方を指定する。省略した場合は均一なアニメーションとなる。
- (省略可能)callback: アニメーション後に呼び出されるコールバック関数
- 返り値: アニメーションさせるRaphaelエレメント
【Raphael.js】Raphaelエレメントにクリックイベントを追加する
click関数
Raphaelエレメントをクリックした時のイベントを追加する方法です。この辺は比較的親切な設計になってますね。click関数の引数にハンドラを渡すだけでOKです。
実行結果
FullScreen http://jsfiddle.net/nekosmash/V2MBB/embedded/result/
解説
クリックすると、敏感なメッセージが表示されます。ただし、HTMLエレメントが前面にある場合は、イベントを拾う事はできません。
Element.click(handler);
- Element: クリックイベントを付与するRaphaelエレメント
- handler: クリックイベント時に実行される関数
- 返り値: クリックイベントを付与されたRaphaelエレメント
【Raphael.js】Raphaelエレメントをコピーする方法
clone関数
複雑な過程で描いたRaphaelエレメントがあったとします。そんな超大作エレメントをもう一つ作る必要が出てきました。そんな時はエレメントをコピペしましょう。コピペはcloneメソッドです。
実行結果
FullScreen http://jsfiddle.net/nekosmash/RzbDf/embedded/result/
解説
ボタンをクリックすると、同じ場所に同じエレメントが作成されます。ここでは分かりやすいように透明度を10%にしています。引数も特にありませんので、Raphael.jsの中では最も簡単な関数と言えるでしょう。
Element.clone();
- Element: コピーするRaphaelエレメント
- 返り値: コピーされたRaphaelエレメント
【Raphael.js】Raphaelエレメントを回転させる方法
rotate関数
Raphaelのエレメントを回転させる事ができます。角度と軸となるポイントを指定することで回転可能です。
実行結果
フルスクリーン
http://jsfiddle.net/nekosmash/5NMXz/embedded/result/
解説
角度だけを指定した場合は、自動的にエレメント全体の中央点を軸に回転します。サンプルでは中央点を軸とした回転と、左上を軸とした回転の二種類を用意しています。
Element.rotate(degree, centerx, centery);
- Element: 回転するRaphaelエレメント
- degree: 回転する角度
- centerx: 回転の軸となる点のX座標
- centery: 回転の軸となる点のY座標
- 返り値: 回転したRaphaelエレメント
【Raphael.js】Raphaelエレメントの位置やサイズを取得する方法
getBBox関数
拡大縮小などを行ったRaphaelエレメントのサイズを取得したい時があります。そんな時はgetBBox関数を使用してBoxエレメントを取得すれば一発で解決です。
実行結果
フルスクリーン
http://jsfiddle.net/nekosmash/K69v6/6/embedded/result/
解説
引数はbool型がひとつだけで、trueであれば拡大縮小前のサイズを取得し、falseであれば今現在のありのままのサイズを取得します。サンプルはfalseで実行しています。
Element.getBBox(bool);
- Element: サイズを取得するRaphaelエレメント
- bool: オリジナルの位置サイズを表示するかどうかを指定
- 返り値: 位置サイズの情報を格納したオブジェクト
- x: 対象のX座標
- y: 対象のY座標
- width: 対象の幅
- height: 対象の高さ
関連エントリー
【Raphael.js】Raphaelエレメントを自由に拡大縮小する方法
scale関数
Raphaelエレメントの拡大縮小を行える関数があります。変更後のサイズを指定するのではなく、倍率を指定することで大きさの指定を行います。
実行結果
解説
幅拡張をクリックするとrectエレメントの横幅が、高さ拡張をクリックするとrectエレメントの高さが高くなります。ここでは1.5倍の拡大を行うように設定しています。また、ssclae関数では拡大縮小の中心となるポイントを設定することもできます。
Element.scale(horizontal,vertical,centerx,centery);
- Element: 拡大縮小を行うRaphaelエレメント
- horizontal: 幅の拡大縮小倍率
- vertical: 高さの拡大縮小倍率
- centerx: (省略可能)拡大縮小の中心となるポイントのX座標
- centery: (省略可能)拡大縮小の中心となるポイントのY座標
- 返り値: 拡大縮小後のエレメント
