script.aculo.usを読み解く

第6回　effects.js（後編）基礎エフェクトの組み合わせからなる15種類の複合エフェクト

この記事を読むのに必要な時間：およそ 23.5 分

Effect.Transform

Effect.Transformは，これまでのエフェクトの枠組を抽象化する試みです。idやCSSセレクタで複数の要素を指定して，まとめてEffect.Morphエフェクトに渡すことができます。基本エフェクトの組み合わせではなく，そもそもEffect.Baseを継承していません。バージョン1.7で導入されました。

デモをご覧ください。このように使います。

// Effect.Transformを作って，後で呼び出す例
var transformation = new Effect.Transform([
  { 'div.morphing': // DIV要素で，CSSクラスが'morphing'のものを指定する
      'font-size:20px;padding-left:40em;opacity:0.5' }, //目標のCSSに向かって徐々に変化する
  { 'error_message': // DOM idでの指定。やはり'#error_message'とCSSセレクタで指定することもできる。
      'width:480px;border-width:10px;' + //目標のCSS
      'border-right-width:20px;' +
      'margin:20px;margin-bottom:-20px;' +
      'font-size:30px;' +
      'background:#954' }
  ],{ duration: 1.3 });
// 後で呼ぶ。
transformation.play();

1004:Effect.Transform = Class.create({
1005:  initialize: function(tracks){
1006:    this.tracks  = [];
1007:    this.options = arguments[1] || { };
1008:    this.addTracks(tracks);
1009:  },

1004～1021行目のinitializeは，初期化をする関数です。tracksは，並列に実行するエフェクトの情報を入れる配列です。

1010:  addTracks: function(tracks){
1011:    tracks.each(function(track){
1012:      track = $H(track);
1013:      var data = track.values().first();
1014:      this.tracks.push($H({
1015:        ids:     track.keys().first(),
1016:        effect:  Effect.Morph,
1017:        options: { style: data }
1018:      }));
1019:    }.bind(this));
1020:    return this;
1021:  },

1010～1021行目のaddTracksは，tracksの情報を統一してから追加する関数です。

配列で与えられた、要素のidと目標のCSSをそれぞれkeys().first()とvalues().first()を使って取りだして、this.tracksに追加します。 

1022:  play: function(){
1023:    return new Effect.Parallel(
1024:      this.tracks.map(function(track){
1025:        var ids = track.get('ids'), effect = track.get('effect'), options = track.get('options');
1026:        var elements = [$(ids) || $$(ids)].flatten();
1027:        return elements.map(function(e){ return new effect(e, Object.extend({ sync:true }, options)) });
1028:      }).flatten(),
1029:      this.options
1030:    );
1031:  }
1032:});
1033:

1022～1033行目のplayは，Effect.Parallelで並列に，tracksのエフェクトたちを実行する関数です。

1025行目で，tracksの情報を取り出します。

1026行目で，DOM id か CSSセレクタで，複数の要素を対象に指定できるようになっています。$$(ids)のほうは入れ子になった配列を返すかもしれないので、flattenが必要です。

1027行目で，複数の要素のそれぞれにEffect.Morphをかけます。

1028行目で、mapのmapからできた配列の入れ子を、flattenでつぶして、Effect.Parallelに渡せる形にします。

著者プロフィール

源馬照明（げんまてるあき）

名古屋大学大学院多元数理科学研究科1年。学部生のときにSchemeの素晴らしさを知ったのをきっかけに，関数型言語の世界へ。JavaScriptに，ブラウザからすぐに試せる関数型言語としての魅力と将来性を感じている。

ブログ：Gemmaの日記