07 | 2017/08 |  09

  1. 無料サーバー

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

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

スポンサーサイト

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

 

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

これまで 8 回に亘って jquery.js のアニメーションコードを解読してきました。自らの理解を深めるために、また閲覧者により関心を抱いて戴くためにも、いくつかのサンプルアニメーションも作成し、その解説もおこなってきました。

そしてついに、このエントリイをもって jquery.js のアニメーションコードの全ての解読を終えることになります。既に高い山は登り終えているので、残されたメソッドは比較的簡単なものばかりです。

jQuery().slideDown() メソッド

引数:speed、callback

返値:jQueryインスタンス

機能:要素の幅を一定に保ちつつ、高さを 0 から徐々に所定の高さまで変化させながら要素を表示します。

第 1 引数に高さに関わる各種の CSS プロパティ値を全て "show" に設定した CSS オブジェクトを、第 2 引数に speed を、第 3 引数に callback を設定して、animate メソッドを起動し、その返値を返します。

このメソッドは具体的には次のように定義されます。
 jQuery.fn.slideDown = function(speed,callback){
  return this.animate({
    height:"show", marginTop:"show", marginBottom:"show",
    paddingTop:"show", paddingBottom:"show"
  },speed,callback)
 } //(#3954~3964より)

slideDown メソッドのコード進行を具体的に跡付けると次のようになります。

  1. 高さに関わる各 CSS プロパティ値を全て "show" に設定した CSS オブジェクトを第 1 引数とすることにより、animate メソッドからそれらの各 CSS プロパティ毎に、当該 CSS プロパティ名称を引数として e.show(prop) メソッドが起動されます。(#3892-3896)
  2. 各プロパティ毎に起動される e.show(prop) メソッドは、プロパティが対象ノードのマージン上下、ボーダー上下、又はパッディング上下値の場合には初期値を 0 に設定し、それが要素高さの場合には 1 に設定します。また e.cur() メソッドを呼び出して、各々の要素属性値、styleオブジェクトのプロパティ値または算出スタイル値を終了値に設定します。こうして初期値と終了値を設定してから、各プロパティ毎に e.custom() メソッドを実行します。
  3. e.show() メソッドから起動された e.custom() メソッドは、e オブジェクトのプロパティに初期値、終了値、現在時刻などを格納してから、当該 CSS プロパティに対して、今度は e.step() メソッドを起動します。
  4. e.custom() メソッドから起動された e.step() メソッドは、その時迄の経過時間が duration 時間を下回っている場合には、指定された easing 関数があればそれを使い、なければ swing 関数を使って、jQuery.easing() メソッドを起動します。
  5. easing メソッドは、経過時間と継続時間を変数とする所定の easing 関数により、0 から 1 の間の数値を返す関数で、この値が得られたらば、次に easing 関数による値と、初期値と終了値の差などからその時点のプロパティ値を算出します。そしてこの当該 CSS プロパティの値を、e.now プロパティに代入します。
  6. こうして当該時点の当該プロパティの CSS 値を取得した後、e.update() メソッドを起動します。
  7. update メソッドは、当該要素に style オブジェクトがあって、かつ当該プロパティ値が null 値ではないときには、当該 style オブジェクトの当該プロパティに、e.now の値を単位付きで代入します。
    他方、当該要素に style オブジェクトがないか、それがあっても当該プロパティ値が null だったら、当該要素の当該属性に e.now の値を代入します。(#4020)
    その後、処理対象プロパティが height で当該要素に style オブジェクトが存在すれば、その display プロパティを block とし、style オブジェクトがなければ何もしません。
  8. こうして高さに係る style オブジェクトの各 CSS 値または要素属性に e.now を与えられた当該要素は、ブラウザによりその e.now 値に従って画面に表示されます。
  9. 以上の 3. ~ 7. までの、一部にクラスメソッドを含む、e インスタンスオブジェクトに属するメソッドの連続実行( e.show → e.custom → e.step → $.easing → e.update ) により、当該要素の当該プロパティの、その時の値を style オブジェクトか要素のタグ属性に代入してから、e.show メソッド実行過程の最後において、show() インスタンスメソッドが引数なしで起動されます。(#4080)
  10. しかし、既に 7. において 要素属性に e.now 値が代入されるか、elem.style.display 値が "block" となっているので、この時点で表示行為は終わっています。
  11. では、何故引数なしで show() インスタンスメソッドを起動する必要があるのでしょうか。
    この疑問を質すにはこのメソッドが、jQuery.data() クラスメソッドを使用して、インスタンスの各要素に elem.style.display プロパティ値を関連づけることを思い出す必要があります。つまり、このメソッドは単に画面に要素を表示するだけではなく、その要素が直前に表示済みか、隠蔽されているかを記録する機能を有しています。ここで show() インスタンスメソッドを起動する目的は、この「履歴情報」を設定し、あるいは確認する事にあります。
  12. 具体的に言えば、ここで起動される show() メソッドにより、display 値が block であることが当該要素への紐付け行為( $.data() メソッドの実行)によって「登録され」、あるいは登録済みであることが確認されます。

▲ToTop

jQuery().sideUp()

引数:speed、callback

返値:jQueryインスタンス

機能:要素の幅を一定に保ちつつ、高さを所定の高さから 0 まで変化させながら要素を隠蔽します。

このメソッドは具体的には次のように定義されます。
 jQuery.fn.slideUp = function(speed,callback){
  return this.animate({
    height:"hide", marginTop:"hide", marginBottom:"hide",
    paddingTop:"hide", paddingBottom:"hide"  },speed,callback)
 } //(#3954~3964より)

このメソッドは、高さに関わる各種の CSS プロパティ値を全て "hide" に設定したCSSオブジェクトを第1引数に、speed を第2引数に、そして callback を第3引数にして animate メソッドを起動し、その返値を返します。言うまでもなく、jQuery().slideDown() メソッドの逆のことを行うメソッドです。

e.hide() を起動することにより、高さに係る各種 CSS スタイルプロパティのカレントスタイル値を初期値をとし、最終値をゼロに設定してアニメーションを行います。

具体的なコード進行は slideDown と酷似しますが、e.show()メソッドよりも、e.hide()メソッドの方が、また show()インスタンスメソッドよりも hide() インスタンスメソッドの方が、共にコード文字数は少なく、単なる対照的な関係ではありません。

  1. 高さに関わる各 CSS プロパティ値を全て "hide" に設定したCSSオブジェクトを第1引数とすることにより、animate メソッドからそれらの各 CSS プロパティ毎に、CSS プロパティ名称を引数として e.hide(prop) メソッドが起動されます。(#3892-3896)
  2. 各プロパティ毎に起動される e.hide(prop) メソッドは、当該要素の style オブジェクトの当該プロパティ値を this.options.orig[this.prop] に代入してから、高さに係る当該 CSS プロパティのカレントスタイル値を初期値に設定し、終了値をゼロに設定して、各プロパティ毎に e.custom() メソッドを実行します。
  3. e.hide() メソッド内で起動された e.custom() メソッドは、アニメーションの各種条件を設定するためのものです。
  4. e オブジェクトに初期値や終了値、現在時刻などをプロパティとして格納してから、当該 CSS プロパティに対して、今度は e.step() メソッドを起動します。
  5. e.custom() メソッドから起動された e.step() メソッドは、custom メソッドで設定された諸条件値を使ってアニメーションを「刻みます」。つまり、時間経過と共に変動する CSS 値を経過時間に即して設定します。
  6. その時迄の経過時間が指定された duration 時間を下回っている場合には、指定された easing 関数があればそれを使って、なければ swing 関数を使って、jQuery.easing() メソッドを起動します。
  7. easing メソッドは、経過時間と継続時間を変数とする所定の easing 関数により、0 から 1 の間の数値を返す関数で、この値と初期値と終了値の差などから、その時点のプロパティ値を算出します。そしてこの当該 CSS プロパティの値を、e.now プロパティに代入します。
  8. こうして当該時点の当該プロパティのCSS値を取得してから、表示を制御する e.update() メソッドを起動します。
  9. update メソッドは、まさに表示の「更新」を行うものです。
  10. 当該要素に style オブジェクトがあって、かつ当該プロパティが null 値ではないときには、当該 style オブジェクトの当該プロパティに、e.now の値を単位付きで代入します。他方、当該要素に style オブジェクトがないか、それがあっても当該プロパティが null だったら、当該要素の当該属性値に e.now の値を代入します。その後、処理対象プロパティが width か height だったら、当該要素の style オブジェクトの display プロパティを block とします。block により、幅や高さは初期値から次第にゼロに近づく e.now 値に応じて、表示サイズが小さくなっていき、最終的にはゼロに到達して当該要素は全く表示されなくなります。
  11. 3 ~ 7 までの、一部にクラスメソッドを含む e オブジェクトに属する一連のメソッド連続実行( e.show → e.custom → e.step → $.easing → e.update )により、当該要素の当該プロパティの、その時の値をstyleオブジェクトか要素のタグ属性に代入するわけです。

▲ToTop

jQuery().slideToggle()

引数:speed、callback

返値:jQueryインスタンス

機能:e.show() 又は e.hide() メソッドを交互に起動するメソッドです。対象としたタグ要素が表示されていれば e.hide()メソッドを起動して隠蔽し、隠蔽されていれば e.show() メソッドを起動して表示します。

jQuery().fadeIn()

引数:speed、callback

返値:jQueryインスタンス

機能:CSS オブジェクト {opacity:"show"} を第1引数に、speed を第2引数に、callback を第3引数にして animate メソッドを起動し、その返値を返します。これにより要素が透明から次第に不透明になっていって、表示されるアニメが実現されます。

このメソッドは具体的には次のように定義されます。
 jQuery.fn.fadeIn = function(speed,callback){
  return this.animate({opacity:"show"},speed,callback)
 }
  1. 第1引数により、animate メソッド内から e.show()メソッドが起動され、opacityスタイル値の初期値を 0 に、終了値を現在値に設定して、e.custom メソッドを作動させます。
  2. e.custom メソッド→ e.step メソッド→ e.update メソッドの連鎖起動を通じて、不透明度アニメーションの初期値などの設定とその時点における値設定を行ってから、e.update メソッド内から e インスタンスを引数にして、jQuery.fx.step[opacity] クラスプロパティメソッドが起動されます。
  3. jQuery.fx.step.opacity メソッドにより、当該要素の不透明度が step メソッド内で設定された e.now 値に設定されます。

jQuery().fadeOut()

引数:speed、callback

返値:jQueryインスタンス

機能:fadeIn メソッドとの違いは animate メソッド第 1 引数の opacity プロパティ値が hide になることだけです。これにより要素が不透明から次第に透明化していき最後には完全透明になって、表示が消えます。

このメソッドは具体的には次のように定義されます。
 jQuery.fn.fadeIn = function(speed,callback){
  return this.animate({opacity:"hide"},speed,callback)
 }

▲ToTop

jQuery().stop(clearQueue,gotoEnd) メソッド

引数:2 つの引数は共に boolean 型。最初の引数を true に設定すると、アニメ待ち行列配列を空にすることによって、次以降に登録されているアニメを全て登録から削除します。2 番目の引数を true に指定すると、全てのアニメーションの全ての step メソッドを格納している jQuey.timers 配列から、今まさにアニメを停止しようとしているタグ要素に関わる step メソッドを特定し、当該要素の当該アニメを、その step メソッドを最後に終了させます。

返値:jQuery インスタンス

機能:このメソッドは登録されているアニメーションを削除したり、進行中のアニメーションを停止させます。

引数に何も指定しないと、単に現在動いているアニメーションを停止させます。同じ要素に登録されている次のアニメーションは停止されませんし、停止指示の前の時点で動き出していて未だ終わっていない e.step メソッドも停止されません。

3927: stop: function(clearQueue, gotoEnd){
3928:  var timers = jQuery.timers;
3929:
3930:  if (clearQueue) // clearQueue が true ならば
3931:   this.queue([]); // 空配列を queue メソッドの引数として、待ち行列を空にし
3932:   // jQuery インスタンスに登録されているアニメーションを削除する。
3933:  this.each(function(){ // インスタンスの要素毎に巡回処理
3934:   // go in reverse order so anything added to the queue during the loop is ignored
3935:   for ( var i = timers.length - 1; i >= 0; i-- )
       // timers 配列の要素は custom メソッド内の #4046 行で定義されている
       // t 関数であり、これは e.step メソッドを起動させアニメを刻む役割を果たす。
       // この関数には animate メソッドが起動された全てのタグ要素の、全てのアニメーションの
       // 各 CSS プロパティ毎の e.step メソッドが登録されている。
       // それを逆順に巡回走査して、それが現在対象としている要素のメソッドだったら
3936:    if ( timers[i].elem == this ) {
3937:     if (gotoEnd) // gotoEnd が true に指定されていれば
3938:      // force the next step to be the last
3939:      timers[i](true); // 次に起動する e.step メソッドを最後にそのアニメを終わる。
3940:     timers.splice(i, 1); // timers 配列の i 番目を削除。実行中の e.step メソッドを削除する。
3941:    }
3942:  }); // 巡回処理終わり
3943:
3944:  // start the next in the queue if the last step wasn't forced
     // gotoEnd が 未定義か false ならば当該要素に登録されている次のアニメ関数を実行する。
3945:  if (!gotoEnd)
3946:   this.dequeue();
3947:
3948:  return this;
3949: }

jQuery.easing() クラスメソッド

引数:easing 関数名を文字列形式で指定します

返値:easing 関数による産出値

機能:初期値、アニメ継続時間、経過時間などから計算が行われますが、単純に言えば、様々な代数式に、経過時間割合( この割合のことを「 動作ステータス 」というらしい )を変数として代入して値が算出されます。

留意すべき点は、経過した時間そのものではなく、そのアニメ継続時間に対するその割合が変数となることでしょうか。

なお以前にも紹介しましたが、 easing 関数の極めて分かりやすい例示として、以下のサイトが非常に参考になります。「その Easing の各々の動きの違いを示したサイトとして興味深いのは、flash ムービーですが、 easing_demo が実に分かりやすく有益です。これによりそれぞれの Easing がどんな挙動をするのか一目瞭然に理解できます。easing 関数内の代数式がグラフ化されていることも非常に有益です。」( jQuery プラグインとしてアニメーションポップアップ : animatedPopup を自作した。 )

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

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