script.aculo.usを読み解く

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

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

Effect.SwitchOff

0613:Effect.SwitchOff = function(element) {
0614:  element = $(element);
0615:  var oldOpacity = element.getInlineOpacity();
0616:  return new Effect.Appear(element, Object.extend({
0617:    duration: 0.4,
0618:    from: 0,
0619:    transition: Effect.Transitions.flicker,
0620:    afterFinishInternal: function(effect) {
0621:      new Effect.Scale(effect.element, 1, { 
0622:        duration: 0.3, scaleFromCenter: true,
0623:        scaleX: false, scaleContent: false, restoreAfterFinish: true,
0624:        beforeSetup: function(effect) { 
0625:          effect.element.makePositioned().makeClipping();
0626:        },
0627:        afterFinishInternal: function(effect) {
0628:          effect.element.hide().undoClipping().undoPositioned().setStyle({opacity: oldOpacity});
0629:        }
0630:      })
0631:    }
0632:  }, arguments[1] || { }));
0633:};
0634:

613~634行目のEffect.SwitchOffは,テレビのスイッチを切るように消えるエフェクトです。一瞬明るく見せるEffect.Appearと,その後で中央に向かってだんだん縦幅を小さくするEffect.Scaleの2段がまえでできています。このEffect.Appearの芸が細かい!ブラウン管の電子線のゆらめきをflickerを使って表現しています。

615行目で,要素の透明度を取得します。エフェクト後に元に戻すためです。

616行目で,Effect.Appearでブラウン管をまたたかせるように見せます。オプションは以下です。

617行目で,持続時間は0.4秒です。

618行目で,初期透明度は0(不透明)です。

619行目で,透明度の動きは,flicker(乱数で震えつつ1.0に収束する)です。

620行目で,終了後のフックで,Effect.Scaleで中央に向かって縦幅を小さくします。倍率は1%(とても小さい)です。オプションは以下です。

622行目で,持続時間は0.3秒です。中央を動かさないように縮小します。

623行目で,横幅は変えません。要素の内容のフォントサイズは変えません。終了後に元に戻します。

624行目で,初期化前のフックで,makePositionedでpositionを'relative'にして,移動に備えます。makeClippingでoverflowを'hidden'にし,クリップされるようにします。

627行目で,終了後のフックで,要素を隠すとともに,undoClippingでoverflowを元に戻し,undoPositionedでpositionを元に戻し,要素の透明度をエフェクト前の値に戻します。

Effect.DropOut

0635:Effect.DropOut = function(element) {
0636:  element = $(element);
0637:  var oldStyle = {
0638:    top: element.getStyle('top'),
0639:    left: element.getStyle('left'),
0640:    opacity: element.getInlineOpacity() };
0641:  return new Effect.Parallel(
0642:    [ new Effect.Move(element, {x: 0, y: 100, sync: true }), 
0643:      new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
0644:    Object.extend(
0645:      { duration: 0.5,
0646:        beforeSetup: function(effect) {
0647:          effect.effects[0].element.makePositioned(); 
0648:        },
0649:        afterFinishInternal: function(effect) {
0650:          effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle);
0651:        } 
0652:      }, arguments[1] || { }));
0653:};
0654:

635~654行目のEffect.DropOutは,ポロリと落ちるように消えるエフェクトです。位置を下に動かす Effect.Moveと,だんだん透明にする Effect.Opacityを,Effect.Parallelで並列に動かすことからできています。

637行目で,要素の位置と透明度を取得します。エフェクト後に元に戻すためです。

641行目で,Effect.Parallelで,2つのエフェクト(MoveとOpacity)を並列に動かします。

642行目で,Effect.Moveで,yを100px,下に移動します。ポロリと落ちるように見えます。

643行目で,Effect.Opacityで,透明(0.0)にします。消えるように見えます。

645行目で,これらの持続時間はデフォルトでは0.5秒です。

646行目で,初期化前のフックで,makePositionedでpositionを'relative'にして,移動に備えます。

649行目で,終了後のフックで,要素を隠すとともに,undoPositionedでpositionを元に戻し,要素の位置と透明度をエフェクト前の値に戻します。

著者プロフィール

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

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

ブログ:Gemmaの日記

コメント

コメントの記入