03 | 2017/04 |  05

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

jquery.js のアニメーションコードの活用 ( 1 ) slideToggleEx メソッドの作成

アニメコードの活用とは

これまで 9 回に亘ってエントリイしてきたアニメーションコードの解読を踏まえて、今度はアニメーションコードを活用した、実例を掲載してみようと思います。

作成した(及び作成予定の)実例
  1. slideToggleEx() プラグインメソッド

    こちらは苦労の末やっと作成を完了し、このエントリイの下の方にその実例とコードを掲載しました。

    このプラグインメソッドは、端的に言って slideToggle() メソッドの拡張版です。

    jquery.js に収められている slideToggle() は slideDown() と slideUp() メソッドを交互に実行する切り替えメソッドで、ボックス領域の表示と隠蔽を上辺を基点として切り替える作用を起こします。

    今回作成した slideToggleEx() メソッドは、slideToggle() が表示/隠蔽を上辺だけから行うのに対して、以下のように様々な箇所から表示され、隠蔽されるように、大幅に機能拡張したものです。

    slideToggleEx() メソッドは、ボックスの (0) 中心、(1) 左上、(2) 右上、(3) 右下、(4) 左下、(5) 上辺、(6) 右辺、(7) 下辺及び (8) 左辺の、全部で 9 つのアニメ起終点に対応させた、ボックスの縮小隠蔽 / 展開表示を行うアニメーションです。

    起終点は簡単に引数だけで指定出来るように工夫し、更に、同一ボタンのクリックによる、或る起終点からの隠蔽/表示アニメーションだけでなく、様々な起終点からのアニメを、連続して起動しながら、隠蔽/表示を繰り返す連続アニメーションにも対応させた、まさしく機能拡張版です。

  2. easing 関数の値をグラフ化するアニメーションを作成します。

    これはボックスのサイズを大きくするアニメーションを行なわせながら step メソッドを活用し、その時に使用している easing 関数の値を、当該ボックスの中にグラフとして示すものです。グラフをアニメーション機能を使って描くという試みにチャレンジしてみます。

    実は次のエントリイにそのグラフ描画アニメーションを掲載しました。

  3. ボックスだけでなく画像も同時に animate するメソッド

    こちらはまだ未着手です。cycle アニメーションのように、画像も一緒に拡大縮小するアニメーションを作る予定です。

    なおこのメソッドは、これまでのように表示されているコンテンツをアニメートするのではなく、非表示あるいは存在していなかったものをアニメートで出現させるタイプになるはずです。

  4. その他これから考えますが、余り複雑にしても意味はないでしょう。組み合わせれば済むことですから。

▲ToTop

完成した slideToggleEx() メソッドについて

何はともあれ、結果をお披露目します。

当然のことですが、 slideToggleEx() メソッドはプラグイン形式、つまり、jQuery プロトタイプオブジェクトとして作成しました。こうすれば使い勝手がより一層汎用的になるからです。

 
 
18 個のアニメーションを slideToggleEx() で一気に履行する

上の 「 slideToggleEx() 一気履行 」 ボタンをクリックすると、「 ボックスを終点に隠蔽し、そこを始点として展開する 18 の連続アニメーション 」 が始まります。

アニメーションは、ボックスの (0) 中心、(1) 左上、(2) 右上、(3) 右下、(4) 左下、(5) 上辺、(6) 右辺、(7) 下辺及び (8) 左辺の 9 つの点または辺をこの順番に起終点/線とし、 閉じて開く 2 回 × 9 種類、つまり 18 回連続して起動されます。このアニメではそれぞれのアニメ継続時間は全て 1 秒とし、easing 関数は全て同一の、穏やかな swing を使いました。

なお、この連続起動アニメも、上で説明する 3 つの個別起動アニメも全て、上の薄黄色地ボックスの中にある、 青地金色ボーダーのボックスを対象として作動します。また動くボックスの元の位置が分かるように、アニメ対象ボックスを包み込む不動の背景ボックス(背景色ブラウン)を配置してあります。これにより margin を含めてアニメ対象になっていることが視覚的にも確認できるはずです。

slideToggleEx() を単独で使ってみる。

(1) 起終点がボックス中心、(2) 起終線が左辺、(3) 起終点が右下隅 ── の 3 つを上に用意しました。

これらはそれぞれに単独で作動し、1 回目のボタンクリックで隠蔽アニメが、同一ボタンの2 回目のクリックで表示アニメが、それぞれ起動します。アニメ継続時間は全て 2 秒に設定しました。

easing 関数と IE

ここで easing 関数と IE の関係について一言付言しておきます。上の単独起動のアニメーションには全て IE で動くことを確認した、それぞれ異なる easing 関数を使用しています。

値が 0 を下回るか、1 を越えるような easing 関数を指定すると、Firefox では問題なく動くのですが、IE の場合固まってしまいます。使っている easing 関数セットは、最も有名と思われるオーソドックスな jQuery Easing Plugin (version 1.3) なので、関数指定に問題があるとは思えません。

どうして IE では動かないのか解明出来ず、このために上のサンプルでは、関数値が 0 ~ 1 に収まるような easing 関数を選んで指定しました。

▲ToTop

プラグイン slideToggleEx() の仕様

■ slideToggleEx() の仕様

 書式: slideToggleEx ( type, duration, easing, function )

 type: 0-中心、1-左上端、2-右上端、3-右下端、4-左下端、
     5-上辺、6-右辺、7-下辺、8-左辺
      ─── この数値でアニメ起終点位置を指定します。
 duration; アニメ継続時間(ミリ秒単位、または "slow","fast"。
       無指定の場合 jquery.js の仕様により 400 ミリ秒となります。)
       なお、オブジェクト形式でこの第 2 引数を指定することも可能です。
 easing: easing 関数(文字列で指定します。無指定の場合 
            jquery.js の仕様により swing が適用されます)
 function: アニメ終了後に起動する関数を指定します(不要ならば無指定)
 
 ※ 第 2 引数をオブジェクト形式で指定する場合には、第 3、第 4 引数は指定しません。

slideToggleEx() の仕様上の特徴

アニメ位置指定について

アニメの位置指定を絶対指定にするか、相対指定とするか、最初は悩みました。そしてその是非を判断するために、両方を作成した上で、ここには相対指定版を掲載しました。相対指定の方がコードをぱっと見て分かりやすいと判断したためです。

アニメの位置指定を絶対指定方式で行う場合には、アニメ対象をラップするボックスが位置指定の基準座標となるため、指定上の容易性を考慮するとアニメボックスのマージン辺と同じサイズの 「 基準ボックス 」 を作らねばなりません。

アニメ位置を相対位置で指定すれば、このような基準座標ボックスの必要性はないので、その意味からも相対指定方式の方が利便性がよいと思われます。

アニメ対象の position 指定について

当初はアニメ対象の CSS に position:relative を指定していましたが、slideToggleEx プラグインの運用を重ねるに連れ、その都度指定することが面倒であることに気がつきました。

slideToggleEx プラグインメソッドは top と left をアニメ対象としていますので、アニメ対象には static 以外の position 指定が為されていなければなりません。しかし、それを一々対象要素に指定するのは結構面倒です。

このため、仮にアニメ対象に position 指定が為されていない場合でも相対指定となるよう、Javascript コードによって強制的に指定することにしました。

outerWidth、outerHeight の true 指定について

jquery.js では outerWidth(true)、outerHeight(true) と指定すると margin 辺迄のボックスサイズを計測する仕様になっています。(#4342 ~ 4346)

ところが、非圧縮版の jquery.js においてはその通り機能するのですが、packed 版ではそのコードをチェックしても間違ってはいないと思われるのですが、巧く作動せずボーダー辺迄の採寸しかしてくれませんでした。

ここでは margin 辺までの外寸が欲しかったのでやむを得ず、outerWidth、outerHeight には引数 true を付けずに、ボーダー辺までのサイズを取得しておき、それに margin サイズを追加して margin 辺までの採寸を行わざるを得ませんでした。

▲ToTop

以下のコード等の表示/隠蔽ボタンには slideToggleEx を利用した

コードなどを表示したり隠蔽したりするボタンは、従来から slideToggle メソッドを仕込んでいました。

そして今回、当然ですが、そのボタンには slideToggle ではなく slideToggleEx を仕込みました。

早速実用に供したわけですが、使う上での注意点を列挙しておきます。

実用上の注意点
  1. 表示/隠蔽対象となる要素タグスクロールバーがある場合

    表示/隠蔽対象となる要素タグが、縦または横にスクロールバーがある場合、その要素を隠蔽後に表示させた場合、スクロールバーの幅や高さ分だけ、左にインデントが掛ってしまったり、下が空いてしまったりします。

    これは jquery.js における アニメ時の overflow プロパティの扱いに起因すると思われますが、確定的なことは調査し切れていません。

    従って、特に縦スクロールバーがある要素を slideToggleEx 対象とする場合には、ボックスの右の 2 つの端部や右辺を起終点/線にしないようにするか、あるいはボックス幅を明示的に指定することが賢明です。

  2. IE 対策

    IE ではボックスの右側を起終点とするアニメは巧く作動しません。スクリプトが固まってしまいます。

    このため右上端、右辺及び右下端の 3 つの起終点を指定した場合には、IE だけは、左上端、左辺及び左下端が指定されたものと読み替えるよう、コードを改変しました。

上のアニメ実例における slideToggleEx() の指定内容

直下のボタンをクリックすると、上のアニメ実例を起動させる指定内容が表示されますが、このボタンには No 5 の slideToggleEx 、つまり上辺からのスライドダウン/アップを仕込みました。不透明度もアニメ対象にしているので、slideToggle よりもより印象的になっている、と思います。なお、効果を確認するためにも幾つかのアニメは時間を 1 秒掛けるようにしました。

■上で示した実例の slideToggleEx() 指定内容
<script type="text/javascript">//<!--
$(function(){
 // 18 アニメ連続起動
 $.box = $("#box1_727");
 $("#btn1_727").click(function(){
  $box
   .slideToggleEx(0,1000,"swing")
   .slideToggleEx(0,1000,"swing")
   .slideToggleEx(1,1000,"swing")
   .slideToggleEx(1,1000,"swing")
   .slideToggleEx(2,1000,"swing")
   .slideToggleEx(2,1000,"swing")
   .slideToggleEx(3,1000,"swing")
   .slideToggleEx(3,1000,"swing")
   .slideToggleEx(4,1000,"swing")
   .slideToggleEx(4,1000,"swing")
   .slideToggleEx(5,1000,"swing")
   .slideToggleEx(5,1000,"swing")
   .slideToggleEx(6,1000,"swing")
   .slideToggleEx(6,1000,"swing")
   .slideToggleEx(7,1000,"swing")
   .slideToggleEx(7,1000,"swing")
   .slideToggleEx(8,1000,"swing")
   .slideToggleEx(8,1000,"swing",function(){alert("18 の連続アニメが完了しました")});
 });
 // 起終点をボックス中心とするアニメ起動
 $("#btn2_727").click(
  function(){
	 $box.slideToggleEx(0,1000,"easeInOutQuint");
	}
 );

 // 起終線をボックス左辺とするアニメ起動
 $("#btn3_727").click(
  function(){
	 $box.slideToggleEx(8,1000,"easeInOutSine");
	}
 );

 // 起終点をボックス右下端とするアニメ起動
 $("#btn4_727").click(
  function(){
	 $box.slideToggleEx(3,1000,"easeInOutQuart");
	}
 );

 // ボタン
 $("button")
  .mousedown(function(){$(this).css({backgroundColor:"lightgreen"})})
  .mouseup(function(){$(this).blur().css({backgroundColor:""})})
  .hover(function(){
    $(this).css({backgroundColor:"pink"});
   },function(){
    $(this).css({backgroundColor:""});
  })
  .blur();

// regist click Event to fire slideToggleEx() for nextBox
// button の次にあるブロックを slideToggleEx の操作対象とするための一般的コード
 	var duration=1000, easing=null,fn=function(){}, clk={};
	function func(i){
		$.each(clk[i],function(){
			var $target={};
			$target[i] = $(this).css("display")=="block" ? $(this).next() : $(this).parent().next();
			if ($target[i].length) {
				$(this).click(function(){
					if (jQuery.browser.msie)
						var k = i==2 && 1 || i==3 && 4 || i==6 && 8 || i;
					else k = i;
					$target[i].slideToggleEx(k, duration, easing, fn);
					$(this).blur();
				});
			}
		});
	}
	for (var i=0; i<9; i++){
		clk[i] = $(".fireSlideToggleEx-" + i);
	  	if (!clk[i].length) continue;
		func(i);
		clk[i].hover(
			function(){$(this).css({backgroundColor:"pink"})},
			function(){$(this).css({backgroundColor:""})}
		)
		.mousedown(function(){$(this).css('background-color','palegreen')})
	}
});
//--></script>

プラグイン slideToggleEx() に係るスタイスシートと Javascript コード

直下のボタンには No 2 の slideToggleEx 、つまり右上端部からのスライドダウン/アップを仕込みました。最初は縦スクロールバーがないので、右上端部からの起終点も簡単に実行できると思いましたが、幅を明示的に指定して初めて思い通りに作動しました。

但し、またしても IE で障害が出ました。右上端部への隠蔽が起動せず、何故かスクロールバーが消えてしまうだけで他には何も起こりませんでした。仕方なく IE の場合のみ No1 つまり左上端部を起終点とするようにコーディングし直しました。

■ スタイルシート
<style type="text/css"><!--
 #animArea_727 {
  position :relative; z-index:1; margin:1em auto; top:0px;left:0px;font-size:16px;color:black;
  width:650px;height:300px;background-color:cornsilk;border:dotted 2px goldenrod;
 }
 #animArea_727 > div {
  position: absolute; z-index:2; top:50px; left: 170px;
  width:336px; height:186px; background-color:brown;
 }
 #box1_727 { /* 敢えて position 指定は行っていません。*/
  margin:10px 10px 10px 10px;width:300px; height:150px;
  background-color:royalblue; border:ridge 8px palegoldenrod;
 }
 button {overflow:visible;padding:2px;}
--></style>

▲ToTop

直下のボタンには No 7 の slideToggleEx 、つまり下辺からのスライドアップ( 表示する場合 )/ダウン( 隠蔽する場合 )を仕込みました。スライドが下から始まると独特の雰囲気になります。

■プラグイン slideToggleEx() メソッドコード
<script type="text/javascript">//<!--
// top と left をアニメ対象プロパティにする position relative バージョン
(function($){ // jQuery plugin : slideToggleEx() Release at 2009.8.21, verup 2009.9.9
var ver="not absolute but relative animation on position relative";
$.fn.slideToggleEx = function( type, duration, easing, fn ){
 var $target=this;
 var o = $.extend({},$.fn.slideToggleEx.opts);
 // 初めてそのインスタンスから呼ばれたか、インスタンスが変わった場合のみ
 if(!o.target || o.target[0]!==$target[0]) {
  $.extend(o,{
   orig : o, // backup しておく
   target : $target, // 起動インスタンスを記録する
   oH : $target.outerHeight() + parseInt($target.css("margin-top"))
    + parseInt($target.css("margin-bottom")), // インスタンスの第一要素の margin 辺迄の高さを測る
   oW : $target.outerWidth() + parseInt($target.css("margin-left"))
    + parseInt($target.css("margin-right")), // インスタンスの第一要素の margin 辺迄の幅を測る
   odd : false
  });
  // opts オブジェクトに上で得た o オブジェクトを併合し、Ex メソッドが終わっても情報を保存する
  $.extend($.fn.slideToggleEx.opts,o);
  // インスタンスの要素の position 指定を確認し、必要な指定を行う。
  if ($target.css("position") ==="static") $target.css({position:"relative",top:"0",left:"0"});
 }
 // 起動回数が偶数か奇数かを記録する。連続起動の際にはこれによって hide メソッドを起動するのか、
 // showメソッドを起動するのかを判断する。
 o.odd = $.fn.slideToggleEx.opts.odd = !$.fn.slideToggleEx.opts.odd;
 o.hidden = $target.is(":hidden"); // 要素が隠れているかどうか判定する
 o.duration = duration || o.duration; // duration が オブジェクトの場合も含めて対応
 // 以下の 2 つは、duration がオブジェクトの時には空文字を代入する。
 o.easing = typeof duration !=="object" ? (easing || o.easing) : "";
 o.complete = typeof duration !=="object" ? ($.isFunction(fn) && fn || o.complete) : "";

 function makeAnimCSS(type,showhide){ // アニメCSSプロパティを作成する関数
  var type = new Number(type);
  var plmn = showhide ? "-=" : "+="; // showhide == true → "-="
  return type==0 ? {top: plmn + o.oH/2 +"px", left: plmn + o.oW/2 +"px"} : // center
  type==1 ? {top: plmn + 0, left: plmn + 0} : // 左上端
  type==2 ? {top: plmn + 0, left: plmn + o.oW +"px"} : // 右上端
  type==3 ? {top: plmn + o.oH +"px", left: plmn + o.oW +"px"} : // 右下端
  type==4 ? {top: plmn + o.oH +"px", left: plmn + 0} : // 左下端
  type==5 ? {top: plmn + 0, left: plmn + 0} : // 上辺
  type==6 ? {top: plmn + 0, left: plmn + o.oW +"px"} :// 右辺
  type==7 ? {top: plmn + o.oH +"px", left: plmn + 0} :// 下辺
  type==8 ? {top: plmn + 0, left:plmn + 0} : {top:plmn + 0, left:plmn + 0} ;// 左辺
 }

 if (new Number(type) > 8) // エラー対処
  (function(){
   alert("第 1 引数は 0~8 だけが指定できます。\nやり直してください。\n"+"slideToggleEx( 0~8, 継続時間, easing関数 )"); return;
  })();
 else {
  var obj = (!o.odd || o.hidden) 
   ? makeAnimCSS(type,true)  // 偶数回目の起動か、または要素が隠蔽されている時の CSS 作成
   : makeAnimCSS(type,false); // 奇数回目の起動か、要素が表示されている時の CSS 作成
  $.extend( obj, // top と left だけのCSSオブジェクトに幅と高さ関係値も追加
    ( type==5 || type==7 ) ? {} : o.animWidth, // 上辺か下辺の時には幅方向CSSは対象外
    ( type==6 || type==8 ) ? {} : o.animHeight, // 右辺か左辺の時には高さ方向CSSは対象外
    {opacity:"toggle"} ); // 透明度もアニメ対象プロパティとする
  return this.animate(obj, o.duration, o.easing, o.complete); // アニメ起動
 }
}; // End of $.fn.slideToggleEx
// default 値設定と記憶用プロパティとしての機能のために
$.fn.slideToggleEx.opts = {
 duration:1000, easing:null, complete:function(){},
 animHeight : {
  height:"toggle", marginTop:"toggle", marginBottom:"toggle", paddigTop:"toggle",
  paddingBottom:"toggle", borderTopWidth:"toggle", borderBottomWidth:"toggle"
 }, animWidth : {
  width:"toggle", marginLeft:"toggle", marginRight:"toggle", paddigLeft:"toggle",
  paddingRight:"toggle", borderLeftWidth:"toggle", borderRightWidth:"toggle"
 }
};
})(jQuery);
//--></script>

▲ToTop

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/727-528c8a0a

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200908201146
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。