Ajaxの弱点を補うscript.aculo.usの楽しいエフェクトパターンとライブラリで作るAjaxおいしいレシピ(4)(4/4 ページ)

» 2008年01月07日 00時00分 公開
[志田裕樹アークウェブ株式会社]
前のページへ 1|2|3|4       

パラメータの変化スピードを変える、Transitionの使用例

サンプル【6】Y方向の進行スピードを変えてみる

 次のサンプルは、X方向は一定のスピードで移動していますが、Y方向は、だんだん早くなり、目的地に近づくにつれてだんだん遅くなるように、進行スピードを変化させたものです。

サンプル【6】(拡大表示はこちら※注意:Operaブラウザでは、一部表示が異なる部分があります)

 ソースコードは次のようになります。

deleteItem: function(id) {
    var img = $("img" + id);
    img.absolutize();
    var trashPosition = Position.page($('trash'));
    new Effect.Parallel(
        [new Effect.Morph(img,
            {style: {
                left: trashPosition[0] + 'px'},
            transition: Effect.Transitions.linear,
            sync: true}),
        new Effect.Morph(img,
            {style: {
                top: trashPosition[1] + 'px'},
            transition: Effect.Transitions.sinoidal,
            sync: true})
        ],
        {duration: 2,
        queue: 'end'});
    new Effect.DropOut("item" + id,

……(略)……

}

 このように、「option」の「transition」を設定をすることで、パラメータの変化スピードを変えることが可能になります。

Transitionでパラメータの変化スピードに変化を

 「options」の「transition」を設定することで、パラメータの変化スピードに変化を与えることが可能です。Transitionには、次の種類があります。

  • Effect.Transitions.sinoidal(デフォルト)
  • Effect.Transitions.linear
  • Effect.Transitions.reverse
  • Effect.Transitions.wobble
  • Effect.Transitions.flicker

 Transitionを変更するとどのような効果になるか、いろいろ試してみると面白いと思います。Effect.Transitions.flickerなどは、Effect.ScaleやEffect.Highlightなどに使用するのも効果的です。

自作したTransitionの適用例

サンプル【7】商品画像をバウンドさせてみる

 次のサンプルは、Y方向のTransitionを、新しく用意することで、縦方向でバウンドができるようにしたものです。

サンプル【7】(拡大表示はこちら※注意:Operaブラウザでは、一部表示が異なる部分があります)

 ソースコードは次のようになります。

Effect.Transitions.easeOutBounce = function(pos) {
    if(pos < (1/2.75)) {
        return (7.5625*pos*pos);
    } else if(pos < (2/2.75)) {
        return (7.5625*(pos-=(1.5/2.75))*pos + .75);
    } else if (pos < (2.5/2.75)) {
        return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
    } else {
        return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
    }
}


……(略)……

new Effect.Morph(img,
    {style: {
        top: trashPosition[1] + 'px'},
    transition: Effect.Transitions.easeOutBounce,
    sync: true})

Transitionは新しく追加が可能

 script.aculo.usにデフォルトで用意されているTransitionは種類が多くありませんが、「サンプル【7】」のように簡単に追加ができます。

 Transitionに渡る引数「pos」は、エフェクト開始から終了までの合計時間(totaltime)に対する経過時間(time)の割合、つまりtime/totaltimeです。戻り値は、初期値から目的値までの差分に対する現在値の割合を0〜1の範囲で返します。

 今回は、secondlifeさん(舘野さん)が作成されたJSTweenerのeaseOutBounceの数式を変換して導入しました。JSTweenerは、JavaScriptによるモーショントゥイーン用ライブラリです。

独自エフェクトの作成例

サンプル【8】合計金額の変化を連続的に見せる

 最後のサンプルは、合計金額の変化を連続的にしたものです。

サンプル【8】(拡大表示はこちら※注意:Operaブラウザでは、一部表示が異なる部分があります)

 ソースコードは次のようになります。

Effect.CartTotalUpdater = Class.create(Effect.Base, {
    initialize: function(element) {
        this.element = $(element);
        var options = Object.extend({
            from: this.element.innerHTML || 0,
            to: 100
        }, arguments[1] || { });
        this.start(options);
    },
    update: function(position) {
        this.element.innerHTML = Math.round(position);
    }
});


……(略)……

updateSum: function() {
    var sum = cart.EffectiveCart.getSum();
    new Effect.CartTotalUpdater("cost",
        {from: $("cost").innerHTML,
        to: sum});

}

フレームワークを理解すれば独自エフェクトの作成も可能

 このサンプルでは、Effect.Baseを継承して、「Effect.CartTotalUpdater」という新しいエフェクトを作成しています。今回は、initialize()とupdate()という2つのメソッドをオーバーライドしました。

 Effect.Baseのstart();を実行すると、エフェクトが開始されます。Effect.Baseのupdate()は、エフェクト実行時に呼び出されます。update()に渡される「position」は、現時点でのパラメータの値になっています。

 Effect.Baseの正式なドキュメントは見当たりませんでしたが、script.aculo.usのフレームワークを理解すれば、どうしても既存のエフェクトが要望にマッチしない場合などに、自分でエフェクトを新しく作成をしてしまうことも可能です。

新しいユーザーエクスペリエンスを

 以上、8つのサンプルを通して、script.aculo.usの使用方法を解説しました。

 Ajaxを活用したシステムでは、画面遷移がないため、画面要素が書き換わっても、ユーザーがそれに気付かない場合があります。エフェクトはユーザーに情報の更新を気付かせる方法の1つです。

 さらにエフェクトをうまく活用し、楽しいギミックを実装できれば、ほかのサイトにはない新しいユーザーエクスペリエンスを利用者に提供することもできるのではないでしょうか。ぜひ、script.aculo.usを使いこなして、楽しいAjaxライフに役立てていただければと思います。

 今回使ったソースコードはこちらからダウンロードできますサンプルのライセンスはGPL 2となります

著者紹介

プロフィール:志田 裕樹(しだ ゆうき)

株式会社アークウェブ取締役。Webシステムのシステムエンジニアとして開発に従事している。
Ajax、Ruby on Rails等を使用したWeb 2.0的システムの開発実績を持つ。
オープンソースのECサイト用CMS、Zen Cartの日本語コミュニティでコミッターとして活動している。



前のページへ 1|2|3|4       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。