03 | 2017/04 |  05

  1. 無料サーバー

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

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

スポンサーサイト

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

 

jquery.js におけるアニメーションコードの解読 ( 6 )

jQuery().animate(prop, speed, easing, callback)───その 3

このエントリイでは下の模式図における色づけ部分( e.custom → e.step → e.update )、すなわち二重巡回処理内での「初期値設定、終了値設定、経過時刻取得、その時点の要素表示」という一連の流れを跡付け、愈々 「 動き 」 演出過程の核心に迫ります。

$().animate(prop,speed,easing,callback){
 $().each(func(){ || $().queue(func(){ //イテレートその1( 対象要素毎 )
  $.each(prop,func(name,val){ //イテレートその2( CSSスタイルプロパティ毎 )
■このエントリイで解読する部分
  ▼ val が toggle || show || hide 
     → e.show || e.hide メソッド起動
      これらのメソッド内で最終的に e.custom メソッドを起動
  ▲ val がその他ならば
     → e.custom メソッドを起動

  ● e.custom =初期値を取得し、アニメ開始時刻を記録する。
     ↓
     e.step =開始時刻からの経過時刻、その時点におけるCSS値などを設定する。
      ↓
      e.update =その時点のCSS値に基づいて要素を表示する。
  }); // prop 巡回function  }); // jQueryインスタンスに登録された要素を巡回するfunction };

jQuery.fx(elem, options, prop) コンストラクタと e インスタンス

引数:順にタグ要素、オブジェクト、プロパティ名称

役割:アニメーションを具体化する各種メソッドやプロパティを持つインスタンスを生成する。

このコンストラクタに new 演算子を適用して生成されるインスタンス e は、当初はコンストラクタの定義から次の 3 つのプロパティを持ちます。

 e ={
   elem : 第 1 引数, options : 第 2 引数, prop : 第 3 引数, options.orig : {}
 }

その後、各種メソッドによる e のプロパティの拡張/追加や、当該コンストラクタの prototype オブジェクトも定義されるので、e オブジェクトは最終的に次のように拡張されます。こうして e オブジェクトは現在進行中のアニメに係る各種情報を満載したオブジェクトになります。また、#4151 ~ 4171 によって、jQuery.fx クラスは 2 つのクラスプロパティを与えられます。

これらのことを模式図的にまとめると以下のようになります。

■ jQuery.fx コンストラクタの e インスタンス
 e = {
 elem:elem,// 第 1 引数
 prop:propName, // 第 3 引数
 options: {
  queue:false || true, step:function(){・・・}, // これらはユーザーが指定する。
  old,complete,easing,duration,display,overflow,// animateメソッドから引き継がれる。
  curAnim, //animateメソッドの第一引数である prop オブジェクトが格納される。
  orig:{prop},
  show:true || false || undefined, hide:true || false || undefined
 },
 startTime, start, end, unit, now, pos, state,
 // メソッド
 cur(), custuom(), step(), update(), show(), hide()
}

■ jQuery.fx コンストラクタのクラスプロパティ
 jQuery.fx.speeds = {"slow":600, "fast":200, _default:400}
 jQuery.fx.step = {opacity:fn(e){・・}, _default:fn(e){・・}}

それでは上の「 このエントリイで解読する部分 」 の模式図に従って、e インスタンスの各種メソッドを跡付けることにします。最初に登場するのは e.show() メソッドです。

▲ToTop

はじめに ─── $().show() / $().hide() と e e.show() / e.hide()

これから解読する e.show() メソッドと e.hide() メソッドは、jQuery インスタンスから起動される show() メソッド、hide() メソッドと表現が酷似しています。最初は余りに似ているこの表現に戸惑いました。

jQuery インスタンスの show / hide メソッドを引数なしで起動した場合には、displayプロパティが none 以外( show の場合 )、あるいは none( hide の場合 )に設定されて、対象タグ要素が瞬時に表示 / 隠蔽されます。

これに対して、jQuery インスタンスの show / hide メソッドをアニメ所要時間などの引数付きで起動した場合には、animate メソッドが呼び出されて、そこから更に e.show / e.hide メソッドが呼び出されます。この時 e.show / e.hide メソッドは決して display 値を none とすることはなく、常に表示モードのママ保たれます。

瞬時アニメと時間を掛けて行うアニメ動作では、時間要素の有無という根本的な差異があるため、スクリプト動作も本質的に変わります。

jQuery インスタンスの show / hide メソッドは、style.display プロパティの none と block、inline などの値を使用して表示と隠蔽を操作し、これに対して e.show / e.hide メソッドは、時間を掛けて当該タグ要素の大きさ等に係る各種 CSS プロパティ値(マージン、パディング、内容及び不透明度の他、ボーダーサイズ、フォントサイズ等々も対象となる)を操作して、要素の表示状態を変化させます。ここでは表示状態を操作するのであって、決して要素を隠蔽することはありません。

e.show() メソッド

引数:なし

返値:なし

機能:対象要素の対象 CSS プロパティ値の、初期値( 0 又は 1 )と終了値を設定し、これらを custom メソッドに渡します。こうして最小或いは透明な表示状態 =「 実質的な非表示状態 」から、表示状態へと移行するアニメーションが実現されます。

このメソッドは対象要素に対して、「実質的な」非表示状態からアニメ前にブラウザが描画していた値までのアニメーションを引き起こします。その進行は次の 3 過程に分けられます。

第 1 過程( #4070~4072 )はアニメ開始前の style.properties 値の記憶です。アニメーション開始前に、アニメ対象タグ要素 elem の elem.style.properties を、e.options.orig プロパティに待避/記憶させます。このメソッドから最終的に起動される update メソッドが、elem.style.properties を書き換えてアニメーションを実現するので、この過程が必要となります。

また、CSS プロパティ値を記憶させた後に e.options.show 値を true に設定し、e.show() メソッドが起動されたことも記憶させます。

第 2 過程( #4077 )では、対象 CSS プロパティの初期値と終了値を custom メソッドに渡します。初期値はプロパティが width または height の場合には 1 、その他の場合には 0 とし、終了値は e.cur メソッドを起動して取得します。こうして得られた初期値と終了値を引数にして custom が起動されます。

ここに対象 CSS プロパティの初期値を 1 又は 0 とするのは、言うまでもなく当該要素のアニメーションを「実質的な非表示状態」から開始するためです。

第 3 過程は $(this).show()メソッドの起動です。これにより custom メソッドが終了し、既に当該要素が表示状態になっていることを "olddisplay" という名称で当該要素に関連づけます。

4068: // Simple 'show' function
4069: show: function(){
4070:  // Remember where we started, so that we can go back to it later
     // 4077 行でスタイル属性値を 1 又は 0 ゼロにするので、現在値を記憶させておく。
     // options.orig オブジェクトの prop プロパティに
     // 当該要素のスタイル属性オブジェクトの prop プロパティの値を代入する。
4071:  this.options.orig[this.prop] = jQuery.attr( this.elem.style, this.prop );
4072:  this.options.show = true; // e.show メソッドが起動されたことを記録する。
4073:
4074:  // Begin the animation
4075:  // Make sure that we start at a small width/height to avoid any
4076:  // flash of content
     // ちらつきを避けるために幅と高さの最小値はゼロとせず、その他のスタイル
     // 属性値は CSS 値はゼロとして start CSS 値を設定し、end CSS 値をカレント
     // スタイル値として、custom メソッドを起動する。
4077:  this.custom(this.prop == "width" || this.prop == "height" ? 1 : 0, this.cur());
4078:
4079:  // Start by showing the element
4080:  jQuery(this.elem).show(); // jQuery インスタンスメソッド show()の起動により、
4081: },// 当該要素が表示状態にある等の情報を記録させる。

▲ToTop

e.hide() メソッド

引数:なし

返値:なし

機能: e.show() メソッドの逆のことを行います。表示状態から「 実質的な 」非表示状態へと移行するアニメーションを引き起こします。

このメソッドの進行過程は単純です。最初に行うことは、e.show() メソッドと全く同一です。当初描画時の CSS プロパティ値を e.options.orig プロパティに待避/記憶させ、かつ、e.options.hide 値を true に設定し、e.hide() メソッドが起動されたことも記憶させます。(#4085~4087)

次に、 custom メソッドに対象 CSS プロパティの初期値と終了値を渡して、表示状態から隠蔽状態へ移行するアニメーションを励起します。この初期値は e.cur() メソッドを起動させて現在表示値を取得し、終了値は 0 です。(#4089~4090)

ここに、e.show メソッドの場合と異なり、非表示状態の CSS 値を全てゼロとしていることに留意する必要があります。

showメソッドの場合には、非表示状態から表示状態へ遷移する際の "ちらつき" を防止するため、プロパティ名が width と height の時にはプロパティ初期値を 1 としていましたが、e.hide メソッドの非表示状態値(=アニメ終了値)は、プロパティに関わらず全てゼロとしています。隠蔽する場合にはちらつき問題が発生しないから、全てのプロパティ値をゼロにしても支障がないのです。

それでも決して display 値は none にしていないことも同時に確認しておく必要があります。e.hide メソッドは要素を CSS 的には隠蔽せず、実質的な非表示状態で表示し続ける、と言えばよいでしょうか。

4083: // Simple 'hide' function
4084: hide: function(){
4085:  // Remember where we started, so that we can go back to it later
4086:  this.options.orig[this.prop] = jQuery.attr( this.elem.style, this.prop );
4087:  this.options.hide = true; // this.options.hide プロパティを true とする。
4088:
4089:  // Begin the animation
     // CSS 現在値を start に、end 値をゼロとして custom メソッドを起動する。
4090:  this.custom(this.cur(), 0);
4091: },

▲ToTop

e.custom(from,to,unit) メソッド

引数:順に、初期値、終了値、単位

返値:なし

機能:初期値、アニメ開始時刻、e インスタンスのアニメ用の各種プロパティ( start、end、unit、now、pos 及び state )と 1 つの関数( t 関数 )を次々に設定し、その後 e.step() メソッドを起動して、インターバル関数によって 13 ミリ秒毎、当該要素の各プロパティ毎にプロパティ値を変化させ、もってそれを表示させてアニメーションを実現し、更に終了処理を行います。

このメソッドはその名の通り、カスタム ( slideUp や fadeOut などの既成アニメーションではない、ユーザー指定の ) アニメーションの中核を為します。その役割により 2 つのブロックに分けて考察します。

前半の過程
#4038 ~ 4050 では、現在対象としているプロパティのアニメ開始時刻、アニメ初期値、アニメ終了値、単位等を設定し、それを利用して演算する e.step メソッドを起動させる t 関数を定義します。また t 関数のプロパティとして対象要素を登録します。ここまでは非常に分かりやすい簡単なコード進行です。
後半の過程

#4050 ~ 4065 は、前半とは対照的に大変複雑です。

改めてアニメコードの全体を思い起こすと、今対象としている動作は animate メソッドの jQuery インスタンスの各要素毎の巡回処理の、その中での各 CSS プロパティ毎の巡回処理過程で引き起こされている事象です。この複雑さ故にコード進行過程が分かりにくいので、操作対象を以下のように可視化してみます。

対象としている jQuery インスタンスに登録されているタグ要素数を m 、アニメ用の CSS オブジェクトに登録されているプロパティ数を n として、或る t 関数がどの要素のどのプロパティのためのものなのか分かるように、以下のように表示します。但し、この数列に酷似した表示はあくまでも説明用です。

  • 最初の要素に対する最初のアニメプロパティ用 t 関数……e1 t p1
  • 最初の要素に対する 2 番目のアニメプロパティ用 t 関数……e1 t p2
  • j 番目の要素に対する k 番目のアニメプロパティ用 t 関数……ej t pk
  • m 番目の要素に対する n 番目のアニメプロパティ用 t 関数……em t pn

上のように各々が識別できる( m × n )個の t 関数を名付けた上で、#4052-4064 を解読します。

▲ToTop

後半の過程の詳説
  1. e1 t p1 、つまり最初の要素に対する最初のアニメプロパティに係る t 関数が 4052 行で実行されると、初めて step メソッドが起動され、その時の時刻が ローカル変数 t に記録されます。この 変数 t が custom メソッドで定義された e.startTime(s)に、animate メソッドの引数から定められた duration 時間(d)を加算した時刻( s + d )以内であれば ( つまり t ≦ s + d であれば )、step メソッドは、それ自信の中で算出するその時のプロパティ値に基づいて、対象要素の表示サイズなどを算出してから、update にそれを渡します。そして update メソッドは受け取った値からブラウザに要素を表示してから true を custom メソッドに返します。
  2. 4052 行において、t() に拠る返値が true となるので、jQuery.timers 配列の要素にその t 関数 e1 t p1 が追加され、3 番目の式 !timerId が評価されます。ここに、jquery.js トップレベルで定義されている変数 timerId は jquery.js コードの中で custom メソッドでしか使われていませんから、step メソッドから 1 つ目の true が返された時には、timerId は未定義です。つまり !timerId === true となります。こうして 4052 行の if 文が成立して、インターバル関数が起動され、以後は 13 ミリ秒ごとに t 関数が呼び出され、その返値の評価を行う行為が繰り返されます。
  3. 4052 行の if 文が成立した 13 ミリ秒後には、4056 行により timers 配列の 0 番目の要素である e1 t p1 が再度実行されます。このとき依然として 変数 t ≦ s + d ならば、step メソッド内で算出された値に基づいて、e1 要素の 2 度目の描画がおこなわれます。そして当該要素は 13 ミリ秒後に再び起動されるために配列内に残されたママとなります。他方 変数 t > s + d ならば、step メソッドが当該プロパティに係る終了処理 ( その内容については step メソッドで解説します ) を行ってから false を返すので、4057 行の if 文が成立して、e1 t p1 関数が配列から削除されます。(#4058)
    以上のような e1 t p1 の 13 ミリ秒毎の反復起動によって、e1 要素の変化が演出されます。
  4. さて、13ミリ秒毎の繰り返しと並行して、Javascript インタープリタは setInterval 関数を起動した直ぐ後に 同一要素の次のプロパティ(e1p2)を対象とした処理に進みます。3892 行の jQuery.each メソッドが 2 つめの prop を対象とした処理を行うのです。そして再び custom メソッドが起動され、その前半過程が処理され後半過程に入ってきます。今度 4052 行で起動される t 関数は e1 t p2 となり、再び jQuery.timers 配列にその t 関数 e1 t p2 が追加されます。
  5. この t 関数を追加した時点でまだ e1p1 のアニメが終わっていなければ 4052 行の if 文は成立しませんが、timers 配列には今追加したばかりの t 関数も含まれるので、13ミリ秒毎に繰り返される e1 要素のプロパティ値の変化過程が 2 つのプロパティで行われることになります。
  6. 他方、e1 t p2 関数追加時点で e1p1 に係るアニメが終わっていれば、4062 行により timerId は未定義となっているので、4052 行の!timerId が成立して、再びインターバル関数が 13 ミリ秒毎の t 関数実行を開始します。こうして最初の要素の 2 つ目のアニメプロパティに係る動きが演出されていきます。
  7. 以上のような過程が、対象とした jQuery インスタンスに格納されている m 個の要素毎の、それぞれ n 個のアニメプロパティにおいて繰り返されます。そして n × m 回の custom - step - update の連鎖起動の反復繰り返しを経て、遂に、対象とした jQuery インスタンスから起動された animate メソッドはその役割を終えます。
4036: // Start an animation from one number to another
4037: custom: function(from, to, unit){
4038:  this.startTime = now(); // 現在時刻を登録する。
4039:  this.start = from; // アニメ開始値
4040:  this.end = to; // アニメ終了値
4041:  this.unit = unit || this.unit || "px";
4042:  this.now = this.start; // = from となる。
4043:  this.pos = this.state = 0;
4044:
4045:  var self = this; // this は jQuery.fx クラスのインスタンス
4046:  function t(gotoEnd){ // t 関数を定義する
4047:   return self.step(gotoEnd); // step メソッドの実行結果を返す。
4048:  }
4049:
4050:  t.elem = this.elem; // t の elem プロパティ値に、this.elem を代入する。
4051:  // t 関数の実行結果が true で、t 関数を追加した timers 配列が存在し、
     // かつ timerId が存在しなければ
4052:  if ( t() && jQuery.timers.push(t) && !timerId ) {
4053:   timerId = setInterval(function(){
4054:    var timers = jQuery.timers;
4055:
4056:    for ( var i = 0; i < timers.length; i++ )
4057:     if ( !timers[i]() ) // timers[i] の実行結果が false ならば
4058:      timers.splice(i--, 1); // i 番目の要素を削除してから i を 1 減じる。
4059:
4060:    if ( !timers.length ) { // timers 配列の要素がなくなれば
4061:     clearInterval( timerId ); // timerId を停止し、
4062:     timerId = undefined; // timerId を未定義とする。
4063:    }
4064:   }, 13);
4065:  }
4066: },

▲ToTop

e.cur(force) メソッド

引数:強制的に算出スタイル値の取得を行う場合 true とする。

返値:スタイル値(タグ属性に記述されたスタイル値、又はスタイルオブジェクトで設定されているスタイル値、又は算出スタイル値)

機能:返値の説明の通り。

e.cur メソッドは、animate、e.show、e.hide などの各種メソッドから呼び出されて、タグ属性や style オブジェクトに設定されているスタイル値を取得し、あるいは指定があれば算出スタイル値を取得します。

まず、animate メソッドからは引数 true 付きで呼び出されます。(#3899)true 付きなので対象要素のアニメ開始前の算出スタイル値が強制的に取得され、その値がアニメ開始値とされます。

他方、e.show メソッド及び e.hide メソッドからは引数なしで呼び出されるので(#4077)、アニメ開始前の対象要素のタグ属性値又は style オブジェクト値が取得されて、アニメ終了値となります。

4027: // Get the current size
4028: cur: function(force){
     // 要素属性に当該プロパティ値が存在し、かつスタイル属性がないか、
     // あっても当該プロパティ値がない場合には
4029:  if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) )
4030:   return this.elem[ this.prop ]; // 要素属性値を返す。
4031:  // 当該要素の当該プロパティ値を単位名なしで取得する。
4032:  var r = parseFloat(jQuery.css(this.elem, this.prop, force));
     // r がゼロ以外で -1 万よりも大きければ r を返す。
     // さもなければ force 引数なしで当該要素の当該プロパティの CSS 値を取得する。
     // 取得できなければ 0 を返す。
4033:  return r && r > -10000 ? r : parseFloat(jQuery.curCSS(this.elem, this.prop)) || 0;
4034: },

▲ToTop

e.step(gotoEnd) メソッド

引数:gotoEnd を true に設定すると対象要素のアニメーションを停止させます

返値:false(アニメが終了した時) 又は true(アニメ実行中の時)

機能:2つの役割があり、第 1 はアニメ開始とアニメ終了の始点/終点間のプロパティ値を経過時間に基づいて刻むことです。この場合、返値 true を e.custom メソッドに返します。第 2 は、アニメ終了後の処理を行うことです。この場合返値 false を e.custom メソッドに返します。

このメソッドを理解する前提として、呼び出し元の e.custom メソッド及びその呼び出し元の animate メソッドによって、e.options オブジェクトの各種プロパティが既に拡張されていること、そしてそれらが e.step メソッドで縦横に利用されることを踏まえておく必要があります。

step メソッドはまず最初に、このメソッドが呼び出された時刻を変数 t に記録します。最初に行うこの作業は、時間という 「 変数 」 を管理し、要素の描画を自在に操作する上で不可欠です。

アニメーションを刻む場合

変数 t の値 ( step メソッドの起動時刻 ) が、e.custom メソッドが起動された時刻 ( startTime ) と e,options.duration の合算値よりも小さければ、すなわち、アニメが起動してからまだ duration で指定されている時間が経過しきらない内に step メソッドが起動された場合には、e.step メソッドはアニメーションを刻むためのプロパティ値の設定を以下のように行います。( #4134 ~ 4144 )

  1. #4135 の変数 n は経過時間です。
  2. #4136 の e. state は動作状態変数 ( 「 動作ステータス 」とも呼ばれるらしい )と呼ぶべきもので、duration 時間を 1 としたときの経過時間の割合を表します。0 ~ 1 未満の値となります。例えば e.state == 0.5 ならば ( その値は options.step メソッドによって取り出さない限りユーザーには見えませんが ) アニメが半分進行したその瞬間を表すことになります。
  3. #4139 の e.pos には n 、e.state 及び e.options.duration の 3 つの値から easing 関数を使用して、その時点における変化率を算出した結果が代入されます。なお、easing 関数は、(1)ユーザー指定のもの、(2)それがなければ jquery.js で定義されている swing、(3)何らかの理由によりそれも定義されていなければ linear が使用されます。裏返せば default easing は swingです。
  4. #4140 の e.now には直前で取得した変化率に、アニメによる変化量( 終了値 -開始値 ) を乗じて変化値を算出し、それを開始値に加算した結果が代入されます。
    こうして、その state におけるプロパティ値が得られます。
  5. 最後に #4143 にて e.update メソッドによりブラウザ表示を更新してアニメーションの刻みが終わります。

▲ToTop

アニメーションの終了処理を行う場合

(1) e.step の引数が true の場合、または (2) 変数 t の値 ( step メソッドの起動時刻 ) が、e.custom メソッドが起動された時刻 ( startTime ) と e,options.duration の合算値以上の場合には、すなわち、アニメ停止が指示されたか、またはアニメが起動してから既に duration 時間が経過してしまった時点で step メソッドが起動された場合には、e.step メソッドはアニメーション終了後の一連の終了処理を行います。( #4097 ~ 4134 )

  1. (#4098)その段階ではプロパティ値 e.now は e.end ( 既に設定済みの終了値 ) とします。
  2. (#4099)変化率 e.pos も 状態変数 e.state も共に 1 とすることによって、アニメーション進行中に既にこれらに代入されていた別の値 ( 共に 0 以上で 1 より小さい値 ) を上書きし初期化します。
  3. (#4100)以上の値によりブラウザ表示を更新します。これでアニメーションの最終形が描かれます。
  4. 次に、アニメーション終了処理、すなわちプロパティ値をアニメ開始前の値へ戻す初期化作業を行います。
    1. (#4102)まず、animete メソッドによって e.options.curAnim に登録済みの、今対象としているプロパティの値を true とします。これはそのプロパティのアニメーションが終わったことを意味する flag です。
    2. (#4104 ~ 4107)次に、ローカル変数 done を用意して値を true とします。この変数は次の for ループコードとセットになって、animate メソッドの第 1 引数で指定した prop オブジェクトの全てについて、それぞれがアニメーションを終えたかどうかが検証するために使われます。

      ひとつでもアニメーションを終えていないプロパティがあれば done は false となり、#4109 ~ 4131 は実行されないまま #4133 の false が e.custom メソッドに return されます。後処理を施さないまま step メソッドを終えてしまうわけです。( ※ これで果たして良いのか、疑問があるのですが解消出来ていません。)

    3. (#4110 ~ 4131)他方、上の #4104 ~ 4107 において全てのプロパティのアニメーション終了が確認されれば、つまり done が true のままならば、#4109 の if 文が成立してそれに続くブロックが実行されます。このブロックではアニメの対象となったプロパティを、アニメ開始前のプロパティ値に復元する ( 初期化すると言っても良い ) 作業が行なわれます。
      1. (#4110 ~ 4118)まず、e.options.display 値が空ではない場合の処理です。元々この値は animete メソッドの #3880 においてアニメ開始前の状態から待避/取得されています。もし、style.display があればその値が代入され、なければ算出スタイル値が代入されています。また、null 値以外の値とは、block、inline、inherit、none など display プロパティが取り得る値を指します。

        #4112 ではアニメ開始前に animate メソッドによって e.options.overflow に待避しておいた初期値を、対象要素の style.overflow プロパティに戻して復元します。

        次に、#4115 では、e.options.display に待避しておいた値を対象要素の style.display プロパティに戻します。その上で、#4116 ~ 4117 では、対象要素の display プロパティ値が "none" ならば ( null ではなく "none" であることに注意!! )、対象要素の style.display プロパティを "block" に書き換えます。
        この最後の処理は非表示になっている要素を強制的に「一旦」表示することになります。

      2. (#4121 ~ 4122)ここで先の「一旦」と記した意味が明らかになります。もし animate メソッドにおいて e.hide メソッドの起動があった場合には、当該要素を隠蔽します。どうして「一旦 block 表示させておき、その直後に隠蔽する」という煩わしい処理を行う必要があるのか───それは未解明です。
      3. (#4125 ~ 4127)animate メソッドにおいて e.show または e.hide メソッドが起動されていれば、e.options.curAnim オブジェクトに待避させておいた animate メソッドの第 1 引数のプロパティを巡回走査して、対象要素の style オブジェクトの当該プロパティ値を、e.options.orig オブジェクトの同一プロパティ名に格納しておいた値で上書きします。ここに e.options.orig オブジェクトには、e.show や e.hide メソッドによって、対象要素の style オブジェクトのアニメ前の当該プロパティ値が待避されています。───このような複雑な工程がどうして必要なのか未解明です。
  5. (#4130)最後に animate メソッドにおいてアニメ終了後に起動することを指定しておいた関数等を起動します。
■ e.step() メソッドコード
4093: // Each step of an animation
4094: step: function(gotoEnd){
4095:  var t = now(); // 現在時刻を代入する。
4096:  // gotoEnd があるか、t が所定時間よりも大きい場合には
4097:  if ( gotoEnd || t >= this.options.duration + this.startTime ) {
4098:   this.now = this.end;
4099:   this.pos = this.state = 1;
4100:   this.update(); // 要素のカレントサイズを測る。
4101:   // curAnim の当該プロパティ値を true とする。
4102:   this.options.curAnim[ this.prop ] = true;
4103:
4104:   var done = true;
4105:   for ( var i in this.options.curAnim )
4106:    if ( this.options.curAnim[i] !== true )
4107:     done = false; // trueでなければ
4108:
4109:   if ( done ) { // done===true ならば
4110:    if ( this.options.display != null ) { // display が null 値でないならば
4111:     // Reset the overflow
        // options の overflow 値を要素の overflow style 属性に代入する。
4112:     this.elem.style.overflow = this.options.overflow;
4113:
4114:     // Reset the display
        // options の display 値を要素の display style 属性に代入する。
4115:     this.elem.style.display = this.options.display;
        // display 値が none ならば
4116:     if ( jQuery.css(this.elem, "display") == "none" )
4117:      this.elem.style.display = "block"; // block とする。
4118:    }
4119:
4120:    // Hide the element if the "hide" operation was done
4121:    if ( this.options.hide ) // hide プロパティがあれば
4122:     jQuery(this.elem).hide(); // 隠す。
4123:
4124:    // Reset the properties, if the item has been hidden or shown
       // hide 又は show プロパティがあれば
4125:    if ( this.options.hide || this.options.show )
4126:     for ( var p in this.options.curAnim ) // curAnim オブジェクトを巡回走査
         // style 属性オブジェクトの p プロパティの値を options.orig[p] とする。
4127:      jQuery.attr(this.elem.style, p, this.options.orig[p]);
4128:     
4129:    // Execute the complete function
4130:    this.options.complete.call( this.elem ); // complete 関数を実行する。
4131:   }
4132:
4133:   return false; // false を返す。
4134:  } else {// 引数がないか、t が所定時間以下の場合には
4135:   var n = t - this.startTime; // 現在時刻とアニメ開始時刻との差を n に代入。
      // n を継続時間で除した値を state に代入。state は 1 未満の値となる。
4136:   this.state = n / this.options.duration;
4137:
4138:   // Perform the easing function, defaults to swing
      // easing 関数を実行する。それが指定されていなければ swing 関数を実行する。
      // その時の引数は順に this.state, n, 0, 1, this.options.duration
4139:   this.pos = jQuery.easing[this.options.easing || (jQuery.easing.swing ? "swing" : "linear")](this.state, n, 0, 1, this.options.duration);
      // 終了点から開始点を差し引いてから、easing 計算値を乗じた値を開始点に加算する。
4140:   this.now = this.start + ((this.end - this.start) * this.pos);
4141:
4142:   // Perform the next step of the animation
4143:   this.update(); // 次の段階へ進む。
4144:  }
4145:
4146:  return true; // true を返す。
4147: }

▲ToTop

e.update() メソッド

引数:なし

返値:なし

機能:アニメが進行している要素のブラウザ表示を更新します。

このメソッドは animate メソッドから呼び出される一連のメソッドの最後に位置しています。名前の通り表示を更新するメソッドですが、大切なことはこのメソッドのどこにも display = none が存在しないことです。

このメソッドは、step メソッドから時々刻々伝達される、遷移しつつある大きさや不透明度の値を受け取り、それに従って要素の表示状態を更新する役目を負っているのであって、例え各種プロパティの表示サイズがゼロとなり、不透明度がゼロとなった場合でも、display 値を block 、inline などの ( none ではない ) 表示用の値に設定したままで機能します。決して none にはしません。このことをしっかり踏まえなければ成りません。

  1. (#4017) e.options.step オブジェクトが存在すれば、e.now と e を引数にして、アニメ対象要素からそれを起動します。

    animate メソッドの第 4 引数や completeプロパティに指定する関数が、アニメーションが終わってから起動されるのに対して、この e.options.step は、アニメションの途中で何かを行うためにユーザーが指定する関数です。進行中のアニメーションの状態変数 e.state が変化する度に、何かを行わせたい時に使用します。

    なお、このメソッドの指定方法は queue プロパティと同様に speed オブジェクトのプロパティとして { queue:false, step:function(){}, duration:duration,・・・・} のようになります。この step 関数を使えば、アニメ中の各状態毎に「アニメ進捗状況に関する情報を表示する」、「背景色や文字色を変える」などが可能となります。とは言え色替えはとても推奨できません。変わる度にディスプレイ画面がちらつくからです。

  2. #4151 ~ 4171 によって jquery.js 読み込み時に speed と step プロパティが jQuery.fx オブジェクトに追加されます。 #4020 はそれを呼び出して使用する箇所です。

    ここに、jQuery.fx オブジェクトは #4001 ~ 4009 において定義されているコンストラクタ関数オブジェクトで、そのインスタンス e を縦横に駆使してアニメーションが実現されていることはこれまで見てきたとおりです。

    では jQuery.fx オブジェクトに追加された speed と step の 2 つのプロパティと、インスタンス e との関係はどうなるのか、直ぐに疑問が湧いてきます。

    答えは簡単で、e インスタンスにはこれらのプロパティは登録されません。これらがいわゆるクラスプロパティだからです。

    一寸脱線しましたが、 #4020 では、e.step メソッドから渡された値を基に、この jQuery.fx オブジェクトのクラスプロパティを利用してブラウザ上で要素を表示します。

    jQuery.fx.step クラスプロパティには、#4158 ~ 4170 により 2 つのメソッドが登録されています。jQuery.fx.step.opcity() と jQuery.fx.step._default() です。#4020 における引数 this が this の仕様から呼び出し元の e インスタンスを指していることを踏まえれば、4020行 は決して難解ではありません。但し、インスタンスメソッドである e.step とは全く別物であることに気をつけなければなりませんが...。

    前半の jQuery.fx.step[this.prop] は、アニメ対象プロパティ( this.prop )が opacity の時だけ true となり、jQuery.fx.step.opacity(this) を実行します。その結果、#4160 ~4162 によってアニメ対象要素の style オブジェクトの opacity プロパティが、fx.now となり、現在値の不透明度でアニメ対象要素が描画されます。( elem をアニメ対象要素として、elem.style.opacity = fx.now となります。)

    他方、e.step メソッドから渡されたアニメ対象プロパティ( this.prop )が opacity でない場合には、後半部分の jQuery.fx.step._default(this) が実行されます。_default() メソッドは、アニメ対象要素に style 属性が存在し、しかも style[ this.prop ] が空でない場合には、 style[ this.prop ] に単位付きで fx.now を代入します。

    また、アニメ対象要素に style 属性が存在しない場合、あるいは存在しても style[ this.prop ] が空の場合には、当該要素の this.prop 属性値を単位なしで fx.now とします。

    文章化するとわかりにくいのですが、アニメ対象要素が width の場合を例示すれば、前者は elem.style.width = fx.now+"px" であり、後者は elem.width = fx.now ということです。

  3. update メソッドの最後では(#4022 ~ 4025)、アニメ対象プロパティが height または width で、かつ、アニメ対象要素にスタイルオブジェクトが存在すれば、その display 値を block とします。

    このことの意味は、inline ではなく block にするということであり、決して none を block に変えることではありません。最初に触れたように、update メソッドは決してdisplay 値を none にすることはありません。飽くまでも「 表示 」を更新する役割を担っているからです。

4015: // Simple function for setting a style value
4016: update: function(){
     // options に step プロパティがあれば this.now と this を引数として
     // step を起動する。ここに step はユーザーが独自に指定するメソッドである。
4017:  if ( this.options.step )
4018:   this.options.step.call( this.elem, this.now, this );
4019:  // this を引数として jQuery.fx.step[this.prop] 関数
     // 又は jQuery.fx.step._default関数を実行する。
4020:  (jQuery.fx.step[this.prop] || jQuery.fx.step._default)( this );
4021:  // アニメ対象プロパティが height または width であって、
     // かつ、アニメ対象要素にスタイルオブジェクトが存在すれば
4022:  // Set display property to block for height/width animations
4023:  if ( ( this.prop == "height" || this.prop == "width" ) && this.elem.style )
4024:   this.elem.style.display = "block"; // style.display を "block" とする。
4025: },

▲ToTop

 

■ コメントの投稿 ■

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

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/723-5745a8be

●参照元一覧●

<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が開きます。

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