エフェクト

通常のエフェクトを実行する

エフェクトを実行するにはEffectクラスを使用します。
現在使用可能なエフェクトはSlide / Fade / Highlightの3種類です。

	var effect = new Sabel.Effect();
	effect.add(new Sabel.Effect.Slide("smpl1"));
	effect.play();

	var effect = new Sabel.Effect();
	effect.add(new Sabel.Effect.Fade("smpl1"));
	effect.play();

	var effect = new Sabel.Effect();
	effect.add(new Sabel.Effect.Highlight("smpl1"));
	effect.play();

オプションの指定

アニメーションの時間を変えたり、アニメーション完了時に処理を行ないたい場合は、以下の様にインスタンス生成時にオプションとして渡せます。

	var effect = new Sabel.Effect({
    interval: 10,
    duration: 500,
    callback: function() { alert("アニメーションが終了しました"); }
  })
	effect.add(new Sabel.Effect.Highlight("smpl2"));
	effect.play();

逆再生

アニメーションの再生を逆にしたい場合、エフェクトを追加時の第2引数にtrueを渡すか、playメソッドの変わりにreverseメソッドを呼び出します。

	var effect = new Sabel.Effect()
	effect.add(new Sabel.Effect.Slide("smpl3"), true);
	effect.play();

	var effect = new Sabel.Effect()
	effect.add(new Sabel.Effect.Slide("smpl3"));
	effect.reverse();

複数同時実行

	var effect = new Sabel.Effect();
	effect.add(new Sabel.Effect.Highlight("smpl4"));
	effect.add(new Sabel.Effect.Fade("smpl4"));
	effect.play();

連続実行

	var chain = new Sabel.Effect.Chain();
	chain.add(new Sabel.Effect().add(new Sabel.Effect.Slide("smpl5")));
	chain.add(new Sabel.Effect().add(new Sabel.Effect.Slide("smpl5"), true));
	chain.play();

	var effect = new Sabel.Effect({callback: smpl});
	effect.add(new Sabel.Effect.Slide("smpl5")).add(new Sabel.Effect.Fade("smpl5")).reverse();
	function smpl() { effect.play(); }

<< 戻る