script.aculo.usを読み解く

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

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

前回の基礎エフェクトの解説に引き続いて,今回は,それら基礎エフェクトの組み合わせからなる15種類の複合エフェクトを解説します。

このような複雑でドラマチックなエフェクトが,実は単純な,移動や拡大縮小や透明度変化といった基礎エフェクトの組み合わせからできているというのは,このライブラリのクラス設計が成功している証拠でしょう。

基礎エフェクトを組み合わせてできる15種類の複合エフェクト

Effect.Fadeフェードアウトするエフェクト
Effect.Appearフェードインするエフェクト
Effect.Puffホワッと消えるエフェクト
Effect.BlindUpすだれを上げるようなエフェクト
Effect.BlindDownすだれを降ろすようなエフェクト
Effect.SwitchOffテレビのスイッチを切るように消えるエフェクト
Effect.DropOutポロリと落ちるように消えるエフェクト
Effect.Shakeブルブルと左右に震えるエフェクト
Effect.SlideDownお店のシャッターを降ろすようなエフェクト
Effect.SlideUpお店のシャッターを上げるようなエフェクト
Effect.Squish縮小して消えるエフェクト
Effect.Grow飛び出すように拡大して現れるエフェクト
Effect.Shrink吸い込まれるように縮小して消えるエフェクト
Effect.Pulsate透明と不透明の間で点滅するエフェクト
Effect.Fold縦に縮んだあと,横に縮むエフェクト

それでは前回の続きからコードを見ていきましょう。

Effect.Fade

0526:/* ------------- combination effects ------------- */
0527:
0528:Effect.Fade = function(element) {
0529:  element = $(element);
0530:  var oldOpacity = element.getInlineOpacity();
0531:  var options = Object.extend({
0532:    from: element.getOpacity() || 1.0,
0533:    to:   0.0,
0534:    afterFinishInternal: function(effect) { 
0535:      if (effect.options.to!=0) return;
0536:      effect.element.hide().setStyle({opacity: oldOpacity}); 
0537:    }
0538:  }, arguments[1] || { });
0539:  return new Effect.Opacity(element,options);
0540:};
0541:

526~541行目のEffect.Fadeは,フェードアウトをするエフェクトです。Effect.Opacityからできています。Effect.Opacityでだんだん透明にするまでは同じですが,最後に,要素をhideで非表示にするところが違います。

530行目で,エフェクトをかける前の透明度を保存しておきます。

532行目で,初期値は,現在の透明度か,それが取得できなければ1.0(不透明)です。

533行目で,目標値は,デフォルトでは0.0(透明)です。

534行目で,終了後のフックで,要素をhideで非表示にします。透明度はエフェクトをかける前の値に戻すようにします。これから何度もこのinternalフックが出てきます。これには、エフェクトを崩さないために必須なもので、ライブラリの利用者にいじってほしくない、というニュアンスがあります。

536行目の、hideメソッドとsetStyleメソッドのチェーンが美しいです。

539行目で,以上のオプションでEffect.Opacityを使います。

Effect.Appear

0542:Effect.Appear = function(element) {
0543:  element = $(element);
0544:  var options = Object.extend({
0545:  from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
0546:  to:   1.0,
0547:  // force Safari to render floated elements properly
0548:  afterFinishInternal: function(effect) {
0549:    effect.element.forceRerendering();
0550:  },
0551:  beforeSetup: function(effect) {
0552:    effect.element.setOpacity(effect.options.from).show(); 
0553:  }}, arguments[1] || { });
0554:  return new Effect.Opacity(element,options);
0555:};
0556:

542~556行目のEffect.Appearは,フェードインをするエフェクトです。Effect.Opacityからできています。 Effect.Opacityでだんだん不透明にするまでは同じですが,エフェクトの前に要素をshowで表示にするところが違います。

545行目で,初期値は,要素が非表示ならば0.0(透明)を,表示ならば現在の透明度を,それが取得できなければ0.0(透明)です。

546行目で,目標値は,デフォルトでは1.0(不透明)です。

548行目で,終了後のフックで,forceRerenderingを呼びます。これはSafariのバグを回避するためです。

551行目で,初期化前のフックで,要素の透明度を初期値に戻してから,showで表示にします。

554行目で,以上のオプションでEffect.Opacityを使います。

著者プロフィール

源馬照明(げんまてるあき)

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

ブログ:Gemmaの日記

コメント

コメントの記入