【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エレメント