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

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

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

コンビネーションエフェクトの使用例

■ サンプル【3】「削除」時のエフェクトをDropOutに

　「サンプル【2】」では、「削除」時のエフェクトはEffect.Opacityでしたが、これを、Effect.DropOutに変更しました。

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

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

deleteItem: function(id) {

          new Effect.DropOut("item" + id, 

        {afterFinish: function() {

            $("item" + id).remove();

            this.updateSum();

        }.bind(this)});

      },

　この「Effect.DropOut」のようなエフェクトをscript.aculo.usでは、「コンビネーションエフェクト」と呼んでいます。

■ コンビネーションエフェクトとは？

　コンビネーションエフェクトとは、コアエフェクトを組み合わせることでより凝ったビジュアルエフェクトを実現できるようにしたものです。

　例えば、Effect.DropOutは、Effect.Opacityで、Opacityを「0」に近づけると同時に、Effect.Moveを用いて、表示位置を下に移動させることで実現されています。

　コンビネーションエフェクトの利用の仕方は基本的にコアエフェクトと同じです。いろいろなエフェクトが用意されていますので、ぜひ試してみてください（参考「Combination Effects in script.aculo.us wiki」）。

エフェクトを順番に実行させる、Queueの使用例

■ サンプル【4】商品画像をゴミ箱にEffect.MoveしてからEffect.DropOut

　「削除」時に、サンプル【3】で変更したEffect.DropOutを実行する前に、商品画像をゴミ箱にEffect.Moveするようにしました。

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

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

deleteItem: function(id) {

          var img = $("img" + id);

    img.absolutize();

    var trashPosition = Position.page($('trash'));

    new Effect.Move(img, 

        {x: trashPosition[0],

        y: trashPosition[1],

        mode: 'absolute',

        queue: 'end'});

          new Effect.DropOut("item" + id, 

              {queue: 'end',

              afterFinish: function() {

                  $("item" + id).remove();

                  this.updateSum();

              }.bind(this)});

      },

　$('trash')で、ゴミ箱の位置を取得し、その座標に商品画像をEffect.Moveで移動させています。

　今回のサンプルでは、Effect.Move、Effect.DropOutの「options」パラメータに、「queue: 'end'」が指定されています。これはscript.aculo.usの「Queue」という仕組みです。

■ Queueはエフェクトを順番に実行させるための仕組み

　エフェクトのオブジェクトを生成すると、新しい（疑似）スレッドが立ち上がり、その上で実行が行われます。そのため、Effect.MoveとEffect.DropOutを続けて書くと、2つのエフェクトが同時に実行されてしまいます。

　もし、エフェクトを順番に実行させたい場合は、Queueを使用します。Queueとは、グローバルな待ち行列のようなもので、例えば、エフェクトAとエフェクトBがQueueの中に存在し、エフェクトCを「queue: 'end'」と指定すると、そのエフェクトは待ち行列の一番後ろに追加されます。

　もし、エフェクトCを「queue: 'front'」と指定すると、待ち行列の先頭に追加されます（参考「Effect Queues in scriptaculous wiki」）。

複数のエフェクトを同時実行する、Parallelの使用例

■ サンプル【5】X方向、Y方向それぞれの移動をEffect.Morphで別々に指定

　「サンプル【4】」では、ゴミ箱への移動にEffect.Moveを使用しましたが、汎用的なパラメータの変化を行う、Effect.Morphを使用することでも同様のことが実現できます。

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

　Effect.Moveの代わりに、次のように記述します。

 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'},

                sync: true}), 

        new Effect.Morph(img, 

            {style: {

                top: trashPosition[1] + 'px'},

                sync: true})

        ], 

              {duration: 2,

              queue: 'end'});

      }

　このように、複数のエフェクトを同期させながら実行させる仕組みがParallelです。

■ Parallelで複数のエフェクトを同期で実行

　Parallelは、同時実行をさせたい要素を第1引数に配列として受け取ります。サンプル【5】では、下記の2つのエフェクトからなる配列を渡しています。

left値をゴミ箱のleft値に近づけるEffect.Morph
top値をゴミ箱のtop値に近づけるEffect.Morph

　また、Parallelに渡される個々のエフェクトでは「options」に「sync: true」を指定します。これにより、一方のエフェクトだけが実行されたりすることなく、各エフェクトが同期を取りながら実行されます（参考「Effect.Parallel in script.aculo.us wiki」）。

　Parallelを使うことで、デフォルトにはないコンビネーションエフェクトを作成することも可能になります。

　最後に次ページでは、Transitionの使用例、自作のTransitionの適用例、自作エフェクトの作成例について解説します。

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

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