« ドラッグ&ドロップ | トップページ | Dojoを利用しているツール »

2007年4月 3日 (火)

Effect

効果を指定するときは、以下のように記述する。1つ目の引数としてID(配列として渡すことで複数指定できる)、2つ目の引数として効果を実行にかかる時間をミリタイムで指定する。play()メソッドを指定して実行する。play()メソッドの引数として実行時間をミリタイムで指定することもできる。

dojo.lfx.fadeOut("elem", 500).play();

以下にEffectの例を一覧で示す。

フェードイン/アウト、ワイプイン/アウト

  • dojo.lfx.fadeOut: フェードイン
  • dojo.lfx.fadeIn: フェードアウト
  • dojo.lfx.fadeShow: フェードイン、既に表示されているときは消してからフェードインする
  • dojo.lfx.fadeHide: フェードアウト、display:noneを適用する
  • dojo.lfx.wipeIn: ワイプイン
  • dojo.lfx.wipeOut: ワイプアウト
  • dojo.lfx.fadeWipeIn: フェードインしながらワイプイン
  • dojo.lfx.fadeWipeOut: フェードアウトしながらワイプアウト

フェードイン/ワイプインするオブジェクトは、display: none、またはopacity:0の状態から現れる。以下の4つの引数を取る。

  • nodes: 効果を指定するDOMノード (配列により複数指定できる)
  • duration: 効果を実行する時間(ミリ秒)
  • easing (option): dojo.lfx.easeIn, dojo.lfx.easeOut, dojo.lfx.easeInOutのいずれかを指定する
  • callbackfunc (option): 効果が終わった後に呼び出す関数

なめらかな移動

  • dojo.lfx.html.slideBy: 全体位置を指定して移動
  • dojo.lfx.html.slideTo: 相対位置を指定して移動

以下の5つの引数を取る。

  • nodes: 効果を指定するDOMノード (配列により複数指定できる)
  • coords: 移動位置を指定する。{ top: Decimal, left: Decimal }
  • duration: 効果を実行する時間(ミリ秒)
  • easing (option): dojo.lfx.easeIn, dojo.lfx.easeOut, dojo.lfx.easeInOutのいずれかを指定する
  • callbackfunc (option): 効果が終わった後に呼び出す関数

拡大/縮小表示

  • dojo.lfx.html.explode: 拡大表示
  • dojo.lfx.html.implode: 縮小表示

以下の5つの引数を取る。

  • start: スタート位置を示すDOMノード
  • endNode: 終了位置を示すDOMノード
  • duration: 効果を実行する時間(ミリ秒)
  • easing (option): dojo.lfx.easeIn, dojo.lfx.easeOut, dojo.lfx.easeInOutのいずれかを指定する
  • callbackfunc (option): 効果が終わった後に呼び出す関数

ハイライト

  • dojo.lfx.html.highlight: ハイライト
  • dojo.lfx.html.unhighlight: アンハイライト

以下の4つの引数を取る。

  • startColor/endColor: 変化を始める/終わるときの色
  • duration: 効果を実行する時間(ミリ秒)
  • easing (option): dojo.lfx.easeIn, dojo.lfx.easeOut, dojo.lfx.easeInOutのいずれかを指定する
  • callbackfunc (option): 効果が終わった後に呼び出す関数

縮尺

  • dojo.lfx.html.scale: 縮尺を変える

以下の7つの引数を取る。

  • nodes: 効果を指定するDOMノード (配列により複数指定できる)
  • percentage: 縮尺を変える割合をパーセンテージで指定する
  • scaleContent: trueのとき、コンテンツ内のフォントの縮尺も変える
  • fromCenter: trueのときは、右上ではなく中心から変化させる
  • duration: 効果を実行する時間(ミリ秒)
  • easing (option): dojo.lfx.easeIn, dojo.lfx.easeOut, dojo.lfx.easeInOutのいずれかを指定する
  • callbackfunc (option): 効果が終わった後に呼び出す関数

アニメーション

  • dojo.lfx.html.propertyAnimation: 変化内容を指定してアニメーション

以下の5つの引数を取る。

  • nodes: 効果を指定するDOMノード (配列により複数指定できる)
  • propertyMap: 変更するプロパティの値を定義するオブジェクト {property: String start: Decimal, end: Decimal?, units: String} の配列
  • duration: 効果を実行する時間(ミリ秒)
  • easing (option): dojo.lfx.easeIn, dojo.lfx.easeOut, dojo.lfx.easeInOutのいずれかを指定する
  • handlers (option): 効果が終わった後に呼び出す関数(複数指定することもできる)

効果の組み合わせ

dojo.lfx.chainを使って、複数のEffectを連続して実行できる。
dojo.lfx.chain(
  dojo.lfx.fadeOut("3", 500),dojo.lfx.fadeIn("3", 500)
).play();
dojo.lfx.combineを使うと、複数のEffectを同時に実行できる。
dojo.lfx.combine(
  dojo.lfx.scale("16", 0, true, false, 1000),
  dojo.lfx.fadeOut("16", 1000)
).play(1000);

サンプルコード

//Fade Out
dojo.lfx.fadeOut("1", 1000).play();

//Fade In
dojo.lfx.fadeIn("2", 1000).play();

//Fade Out-In
dojo.lfx.chain(
  dojo.lfx.fadeOut("3", 500),dojo.lfx.fadeIn("3", 500)
).play();

//Fade Out-All
dojo.lfx.fadeOut(["1","2","3","4"], 1000).play();

//透明度50%
dojo.html.setOpacity(dojo.byId('5'), 0.5);

//200, 200へ
dojo.lfx.html.slideTo('6', { top: 200, left: 200 }, 1000).play();

//現在位置から50,50へ
dojo.lfx.html.slideBy('7', { top: 50, left: 50 } , 1000).play();

//Highlight
dojo.lfx.html.highlight("8", [230, 180, 180], 1000).play();

//Unhighlight
dojo.lfx.html.unhighlight("9", [230, 180, 180], 1000).play();

//Explode
dojo.lfx.explode(dojo.byId('button10'), "10", 1000).play();

//Implode
dojo.lfx.implode("10", dojo.byId('button11'), 1000).play();

//Wipeout
dojo.lfx.html.wipeOut('12', 1000).play();

//Wipein
dojo.lfx.html.wipeIn('13', 1000).play();

//Wipein-out
var wipeOut = dojo.lfx.wipeOut('14', null, null, function(n) {
  n.innerHTML = "innerHTMLを変更";
  dojo.lfx.wipeIn(n).play();
});
wipeOut.play();

//PropertyAnimation
var anim = dojo.lfx.propertyAnimation(
  ["15"],
  [
    { property: "height", end:1},
    { property: "opacity", end: 0} ,
    { property: "top", end: 0},
    { property: "left", end: 0},
    { property: "width", end: 0}
  ],
  1000,
  dojo.lfx.easeInOut
).play();

//Scale
dojo.lfx.scale("16", 30, true, true, 500).play(1000);

//Fade Wipeout
dojo.lfx.fadeWipeOut('17', 1000).play();

//Fade Wipein
dojo.lfx.fadeWipeIn('18', 1000).play();

//Fade Show
dojo.lfx.fadeShow('19', 1000).play();

//Fade Hide
dojo.lfx.fadeHide('20', 1000).play();

« ドラッグ&ドロップ | トップページ | Dojoを利用しているツール »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/5954438

この記事へのトラックバック一覧です: Effect:

« ドラッグ&ドロップ | トップページ | Dojoを利用しているツール »