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