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

» 2008年01月07日 00時00分公開

[志田裕樹，アークウェブ株式会社]

パラメータの変化スピードを変える、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});

      }