script.aculo.usを読み解く

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

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

Effect.Puff

0557:Effect.Puff = function(element) {
0558:  element = $(element);
0559:  var oldStyle = { 
0560:    opacity: element.getInlineOpacity(), 
0561:    position: element.getStyle('position'),
0562:    top:  element.style.top,
0563:    left: element.style.left,
0564:    width: element.style.width,
0565:    height: element.style.height
0566:  };
0567:  return new Effect.Parallel(
0568:   [ new Effect.Scale(element, 200, 
0569:      { sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }), 
0570:     new Effect.Opacity(element, { sync: true, to: 0.0 } ) ], 
0571:     Object.extend({ duration: 1.0, 
0572:      beforeSetupInternal: function(effect) {
0573:        Position.absolutize(effect.effects[0].element)
0574:      },
0575:      afterFinishInternal: function(effect) {
0576:         effect.effects[0].element.hide().setStyle(oldStyle); }
0577:     }, arguments[1] || { })
0578:   );
0579:};
0580:

557~580行目のEffect.Puffは,ホワッと消えるエフェクトです。だんだん大きくするEffect.Scaleと,だんだん透明にするEffect.Opacityを,Effect.Parallelを使って並列に動かすことからできています。並列に動かすために、sync : true として、キューで管理されないようにする必要があります。

559~566行目で,エフェクトをかける前のCSSの値をいくつか保存しておきます。

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

568行目で,Effect.Scaleで大きさを200%(2倍)にします。中心を動かさない拡大をします。内容のフォントサイズも拡大します。restoreAfterFinishは,エフェクトの後でCSSを元に戻すオプションです(これは先ほど保存したCSSと一部かぶっている項目もあります)⁠

570行目で,Effect.Opacityでだんだん透明にします。よって目標値は0.0(透明)です。

572行目で,初期化前のフックで,Position.absolutizeを使って要素をposition: 'absolute'に変更します。

575行目で,終了後のフックで,要素を隠し,CSSのいくつかの値をエフェクトをかける前の値に戻すようにします。

Effect.BlindUp

0581:Effect.BlindUp = function(element) {
0582:  element = $(element);
0583:  element.makeClipping();
0584:  return new Effect.Scale(element, 0,
0585:    Object.extend({ scaleContent: false, 
0586:      scaleX: false, 
0587:      restoreAfterFinish: true,
0588:      afterFinishInternal: function(effect) {
0589:        effect.element.hide().undoClipping();
0590:      } 
0591:    }, arguments[1] || { })
0592:  );
0593:};
0594:

581~594行目のEffect.BlindUpは,すだれを上げるようなエフェクトです。だんだん縦幅を小さくするEffect.Scaleからできています。

583行目で,makeClippingを使って,要素をoverflow: 'hidden'にして,クリップされる状態にします。これで要素の縮小につれて文字が隠れます。

584行目で,Effect.Scaleを,倍率0%(大きさ0)でかけます。オプションは以下の通りです。

585行目で,要素の内容のフォントサイズは変えません。(scaleContent : false)

586行目で,横幅は変えません。(scaleX : false)

587行目で,エフェクト後に大きさを元に戻します。(restoreAfterFinish : true)

588行目で,終了後のフックで,要素をhideで隠すとともに,undoClippingを使ってoverflowの設定を元に戻します。

Effect.BlindDown

0595:Effect.BlindDown = function(element) {
0596:  element = $(element);
0597:  var elementDimensions = element.getDimensions();
0598:  return new Effect.Scale(element, 100, Object.extend({ 
0599:    scaleContent: false, 
0600:    scaleX: false,
0601:    scaleFrom: 0,
0602:    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
0603:    restoreAfterFinish: true,
0604:    afterSetup: function(effect) {
0605:      effect.element.makeClipping().setStyle({height: '0px'}).show(); 
0606:    },  
0607:    afterFinishInternal: function(effect) {
0608:      effect.element.undoClipping();
0609:    }
0610:  }, arguments[1] || { }));
0611:};
0612:

595~612行目のEffect.BlindDownは,すだれを降ろすようなエフェクトです。だんだん縦幅を大きくするEffect.Scaleからできています。

597行目で,getDimensionsで,要素のサイズを取得します。

598行目で,Effect.Scaleを,倍率100%(等倍)でかけます。オプションは以下の通りです。

599行目で,要素の内容のフォントサイズは変えません。

600行目で,横幅は変えません。

601行目で,最初の大きさは倍率0%(大きさ0)から始めます。

602行目で,高さ,幅については先ほどのgetDimensionsで取得したものを基準にします。

603行目で,エフェクト後に大きさを元に戻します。

604行目で,初期化後のフックで,要素をmakeClippingでoverflow: 'hidden'にして,クリップされる状態にするとともに,CSSのheightプロパティを'0px'にし(これは初期化後なのでrestoreAfterFinishに影響しません)⁠showで表示にします。

607行目で,終了後のフックで,undoClippingでoverflowの設定を元に戻します。

著者プロフィール

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

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

ブログ:Gemmaの日記