ほとんど気付かれていないかもしれませんが、先日トップページの最新記事を表示する部分のスクリプトを改良して、記事内容がアニメーションして出てくるようにしました。これまでの意味不明な挙動に比べれば（＾＾；）、いくぶん使いやすくなったかと思います。

で、このアニメーションを実装するのに Ext JS というライブラリを使ってみました。 Ext JS は多彩な機能を実装した強力な JavaScript ライブラリで、 Yahoo! UI, jQuery, Prototype と組み合わせても使えるという特徴があります。 InfoSketch でも採用を検討しているので、評価も兼ねて使ってみました。ちょっと重いライブラリなので、本来はこういうちょっとした使い方には向かないんですけどね。

というわけで、本日はこの Ext JS のアニメーション機能をご紹介したいと思います。 Ext JS の使い方としてはごく基本的な部分ですが、公式マニュアルでもあまり解説されていなかったりするので、それなりに資料性はあるかな、と思っています。

それでは、まずは Ext JS を自分の Web サイトにインストールしてみましょう。 Ext JS のアーカイブにはけっこうたくさんのファイルが入っていますが、実際に必要なのはそのうちの 2 つだけなので、簡単です。

1. ダウンロードページから Ext 1.1 beta 1 をダウンロードする。
2. 適当なディレクトリに展開。
3. "ext-core.js" と "adapter/ext/ext-base.js" を Web サイトに転送します。両方とも同じディレクトリに転送してしまってかまいません。

あとは、 Ext JS を利用したいページの HEAD 要素内に以下の記述を追加すれば、基本機能が使えるようになります。

<script type="text/javascript" src="path/to/ext-base.js"></script>
<script type="text/javascript" src="path/to/ext-core.js"></script>

"ext-core.js" の代わりに "ext-all.js" を使うと、各種ウィジェットを含めて Ext JS の全機能が使えます。その代わりサイズが 468kbyte もありますので（´Д｀；）、うまく使い分けてください。

Ext JS で HTML 要素を操作する機能のほとんどは、 Ext.Element クラスのメソッドとして実装されています。したがって、まず最初に Ext.Element のインスタンスを作成しなければなりません。以下のように Ext.get メソッドを使うのが良いでしょう。

var element = Ext.get(DOMエレメント or ID);

これで、引数に指定した DOM エレメント（ID を指定した場合は、その ID を持つ DOM エレメント）に対応する Ext.Element オブジェクトが取得できます。

さて、さっそくアニメーションをさせてみたいところですが、その前に普通に各種パラメータを設定する方法を見ていきましょう。例えば、要素の高さを設定するには、 Ext.Element の setHeight メソッドを使用します（以下は高さを 300 ピクセルにする例）。

element.setHeight(300);

それでは、これを 0.5 秒かけて滑らかに変化させるにはどうすればいいかというと、単にアニメーション用のパラメータを setHeight メソッドに渡すだけです。

element.setHeight(300, { duration : 0.5 });

なんと、これだけでアニメーションができてしまいます。すごく簡単ですね！

Ext.Element には、このようにアニメーション指定が可能なメソッドが多数用意されています。 Ext.Element のリファレンスで引数に "[Boolean/Object animate]" と書いてあるものは、全てアニメーション可能ですので、検索すれば簡単に把握できると思います。

アニメーション用のパラメータには、先ほどの duration も含めて以下のものがあります。

その他、 Ext.Fx クラスにもよく使うアニメーションや細かい制御を行うための機能がありますので、必要に応じて調べてみてください。

サンプルとして、いくつか簡単なアニメーションを作ってみました。とくに最後のサンプルは Ext JS 1.1 beta 1 の時点で利用可能な補間方法をすべて試して、効果を確かめることができます。前述の easing パラメータを選ぶ際にご利用ください。

位置とサイズをアニメーションさせるサンプルです。 Ext JS にはこれらのパラメータを指定するメソッドが何種類もありますが、今回は単純に X, Y 座標と幅、高さを指定する setBounds を使ってみました。

<script type="text/javascript">
function reset()
{
  Ext.get('mover').setBounds(10, 10, 20, 20);
}
 
function animate()
{
  reset();
  Ext.get('mover').setBounds(80, 80, 100, 100, { duration: 1.0 });
}
</script>
 
<div style="width: 200px; height: 200px;">
  <div id="mover"></div>
</div>
 
<div style="text-align: center;">
  <input type="button" value="実行" onclick="animate();">
  <input type="button" value="リセット" onclick="reset();">
</div>

要素の透明度をアニメーションさせるサンプルです。透明度の制御は setOpacity メソッドで行います。残念ながら IE6 ではフェードインがうまく動かないようです。

<script type="text/javascript">
function fadein()
{
  Ext.get('mover').setOpacity(1.0, { duration: 1.0, easing: 'easeNone' });
}
 
function fadeout()
{
  Ext.get('mover').setOpacity(0.0, { duration: 1.0, easing: 'easeNone' });
}
</script>
 
<div style="width: 200px; height: 100px;">
  <div id="mover"></div>
</div>
 
<div style="text-align: center;">
  <input type="button" value="フェードイン" onclick="fadein();">
  <input type="button" value="フェードアウト" onclick="fadeout();">
</div>

Ext JS が標準で提供している補間方法（easing パラメータ）をすべて試せるようにしました。基本的には Yahoo! UI で使えるのと同じもののようです。凝った補間は使いすぎるとうるさくなりますから、ピンポイントでセンス良く使いたいですね。

<script type="text/javascript">
function reset()
{
  Ext.get('mover').setLocation(10, 10);
}
 
function animate()
{
  reset();
  var easingMethod = document.getElementById('easing').value;
  Ext.get('mover').setLocation(270, 10, {
    duration: 2.0,
    easing:   easingMethod
  });
}
</script>
 
<div style="width: 200px; height: 40px;">
  <div id="mover"></div>
</div>
 
<div style="text-align: center;">
  <select id="easing">
    <option value="easeNone">easeNone</option>
    <option value="easeIn">easeIn</option>
    <option value="easeOut">easeOut</option>
    <option value="easeBoth">easeBoth</option>
    <option value="easeInStrong">easeInStrong</option>
    <option value="easeOutStrong">easeOutStrong</option>
    <option value="easeBothStrong">easeBothStrong</option>
    <option value="elasticIn">elasticIn</option>
    <option value="elasticOut">elasticOut</option>
    <option value="elasticBoth">elasticBoth</option>
    <option value="backIn">backIn</option>
    <option value="backOut">backOut</option>
    <option value="backBoth">backBoth</option>
    <option value="bounceIn">bounceIn</option>
    <option value="bounceOut">bounceOut</option>
    <option value="bounceBoth">bounceBoth</option>
  </select>
  <input type="button" value="実行" onclick="animate();">
  <input type="button" value="リセット" onclick="reset();">
</div>

以上、本日は Ext JS のアニメーション機能をご紹介しました。ご覧のように、とても簡単に使えますので、ぜひ試してみてください。 Ext JS には他にも多彩な機能がありますので、また機会があればご紹介したいと思います。お楽しみに！（＾＾）