09 | 2017/10 |  11

  1. 無料サーバー

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

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

スポンサーサイト

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

 

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

愈々、jquery アニメーションの中核をなす animate メソッドを解読します。なお、このメソッドは多くのサブルーチンを階層的に伴うので、その階層構造に見合った構成で記述します。

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

引数:順にアニメ用CSSオブジェクト、アニメ継続時間、easing、アニメ終了時の実行関数。但し、speed をオブジェクト形式で与える場合には第 3、第 4 引数はなし。

返値:jQueryインスタンス

機能:animateメソッドは言うまでもなく、アニメーションの中心的役割を果たすメソッドで、多くのサブルーチンを利用してアニメーションを実現します。

以下順にそのサブルーチンを見ていきます。

jQuery.speed(speed, easing, fn) クラスメソッド( 起動元は#3866 )

最初に、animate メソッドの引数をチェックし確定し、返値となるオブジェクトのプロパティを整理する jQuery.speed メソッドが登場します。このメソッドでは3つの引数の順番がどのように与えられても、そのデータ型などから内容が判断され、適正に処理されます。

引数:引数は全て animate メソッドから渡されます。

返値:オブジェクトで次の 5 つのプロパティを持ちます。 old、complete、queue、duration(= speed)、easing。この返値オブジェクトは変数 optall に代入されます。

機能:アニメーションの第 1 段階の情報整理を行います。

duration

ここにアニメーション継続時間 duration 値は 4 つのケース別に設定されます。

第 1 は jQuery.fx.off が true の時です。このときには duration 値がゼロになり、アニメーションは瞬時に履行されます。

一旦 jQuery.fx.off = true とすると、opt.duration 値がゼロになるので、同じ要素に登録されたそれ以降に起動される予定のアニメーションは、たとえ各々の継続時間がどのように指定されていようとも、全て duration 値はゼロとなり、全て瞬時に起動されます。言い換えれば全てが想定したアニメ後の状態になります。

なお、 jQuery.fx.off = true の指定は、アニメの継続時間をゼロにするのであって、アニメそのものを停止するわけではありません。アニメーションを停止させるメソッド $().stop() との差異に留意する必要があります。

jQuery.fx.off の値は引数などから与えられないので、ユーザーが外挿します。

第 2 は引数 speed が数値型の時です。このときには speed 値がそのまま opt.duration 値となります。( opt は speed メソッド内のローカル変数。以下同様)

第 3 は引数 speed が数値型でもオブジェクト型でもない場合です。この場合 speed が "slow" ならば 600 が、"fast" ならば 200 が、speed がこれらのいずれでもない場合には 400 が、それぞれ opt.duration に代入されます。(#3976~3977)

第 4 は、speed がオブジェクト型の時です。この場合には当該オブジェクトのプロパティである duration のプロパティ値が duration の値となるだけではなく、この形式で引数を指定する事によって初めて、併行起動のための指定( options.queue = false )やアニメーション途中で何かを行わせるメソッドの指定( options.step メソッド)が可能となります。

アニメ完了後に実行する関数を登録し、実行する

speed メソッドの 1 つの重要な作用として、アニメ終了後に起動するメソッドを指定する役割があります。

speed メソッドは #3980~3986 において、opt.old に animate メソッドの第 4 引数 callback を代入し、opt.complete に「 opt.queue が 未定義又は true ならば(つまりアニメを逐次起動する場合)dequeueメソッドを起動し、opt.old が関数ならばそれを実行する 」関数を登録します。

こうすることにより、opt.complete が実行されると 2 つ又は 1 つののメソッドが起動されます。dequeue メソッドが起動される場合には、当該要素に登録されている次の アニメーションが起動され、opt.old に登録されている callback( 最初のアニメーション終了後に起動するよう登録されたもの )が関数ならば、それが起動されます。

アニメを逐次起動するか、併行起動するか

更に重要なポイントがあります。それはアニメの逐次起動か、並行起動かの指定がここで行われていることです。animate メソッドの第 2 引数 speed をオブジェクト形式で与え、そのプロパティ queue をユーザーが false とします。この場合には第 3 及び第 4 引数は不要です。すると 3983 行の jQuery(this).dequeue() は opt.complete メソッドに登録されず、かつ jQuery(this).queue() ではなく jQuery(this).each() メソッドが起動されます。

これらの結果、、同一インスタンスの同一要素に登録されている別々のアニメーションの起動は相互に抑止されず、コード進行に応じて複数のアニメーションが並行的に起動されます。

他方、 opt.queue を 指定しないか true とすれば、3983 行の jQuery(this).dequeue() が opt.complete メソッドに登録され、かつ jQuery(this).each() ではなく jQuery(this).queue() メソッドが起動されます。

すると、同一インスタンスの同一要素に複数の animate メソッドが登録されている場合において、先行する アニメーション用メソッドが終わり opt.complete が呼び出され、その中にある jQuery(this).dequeue() が起動されるまでの間は、後に続く アニメーション用メソッドは起動を抑止され続けます。そして先行するアニメーション用メソッドによるアニメーションが終わり jQuery(this).dequeue() が実行されたその後に、後続するアニメーション用メソッドの内、最初に位置するそれが起動され、当該アニメーションが開始されます。

このように speed クラスメソッドと each または queue インスタンスメソッドの組み合わせによって、アニメの逐次起動か並行起動かが分岐処理されます。

▲ToTop

$().each 又は $().queueメソッド(起動元は#3868)

引数:1 つの function

返値:jQuery インスタンス

機能:このメソッドはアニメーションコード全体の 1 つの根幹的位置を占めています。インスタンスの個々の要素毎、ここのプロパティ毎に、それぞれ初期値、終了値、定期的変動値、経過時間等々を設定し、操作します。

jQuery.speed メソッドの返値を受け取った変数 optall の queue プロパティ値によって、処理が分岐されます。( なお、animate メソッドの第 2 引数 speed をオブジェクト形式で与え、そのプロパティ queue をユーザーが与えない限り queue===true に指定したことと同意になります。queue をユーザーが与えた場合には、speed メソッドの返値オブジェクト optall のプロパティに queue が設定されます。)

optall.queue プロパティが false の場合には each インスタンスメソッドが起動され、引数である唯一の関数が無条件に実行されます。他方、optall.queue プロパティが未定義か true の場合には、queue インスタンスメソッドが起動され、その時点で当該要素に関連づけられている待ち行列配列が空ならば、引数である関数が実行され、配列が空でなければ、当該関数が配列の要素に追加されます(追加された関数はこのときには実行されません)。

このようにしてアニメーションの同時並行的実行と、順次実行がコントロールされることになります。

each 並びに queue インスタンスメソッドの定義から、いずれの場合もインスタンスに登録されている各要素ノードを対象にして、巡回処理を行います。以下はこの関数の処理内容です。

▲ToTop

1. ローカル変数定義(#3870-3872)

第一引数 prop を処理するために必要なローカル変数を定義します。(1) optall から未定義プロパティを除いたプロパティを持つ opt、(2) hidden 属性の有無を登録する hidden、(3) jQuery インスタンスに格納されている要素ノードを指し示す self などが定義されます。

2. 第一引数であるpropオブジェクトの走査その1(#3875-3877)

第一引数 prop はオブジェクト形式で与えます。そのプロパティ値が hide で、変数 hidden が存在する場合(つまり当該要素は隠蔽済みとなっている)、あるいは、プロパティ値が show で変数 hidden が存在しない場合(つまり当該要素は表示済みとなっている)には、opt.complete に登録されている関数を実行します。

これは hidden 変数の値からアニメ処理が完了したと見なして、アニメ完了後のメソッドを起動するものです。

なお、opt.complete には queue 値に応じて 2 つまたは 1 つの関数が登録されていること、これによりアニメの同時並行進行か、逐次進行かが左右されることを改めて思い出すべきでしょう。(詳細は speed メソッドの項を参照)

3. 第一引数であるpropオブジェクトの走査その2(#3878-3889)

プロパティ名が height か width の場合で、当該要素が style 属性を有する場合、opt.displayプロパティに style.display 値または算出 display 値を代入し、また、style.overflow 値を opt.overflow に代入します。これらの操作は、当該要素の display プロパティと overflow プロパティの初期値を、opt オブジェクトに記憶させるもので、アニメ完了後にこれらのプロパティを初期化するときに使用します。

ここにおいて留意すべき点は、後者は styleオブジェクトのプロパティ値に限定されますが、前者は算出スタイル値の場合もあるということです。算出値と定義値との使い分けと区別は、以後にもたびたび登場しますが、animate メソッドを理解する上で重要なポイントです。

代入された opt.overflow 値が null 値でなければ、つまり overflow 値に何らかの値が定義されていれば、要素ノードの style.overflow 属性値を hidden とします。これはIE6以前のバージョンに対するバグ対策です。( 参照 → 要素のはみ出しの処理の不具合(IE/overflow):スタイルシート(CSS)辞典 - HTMLタグボード

4. prop オブジェクトの複写・待避(#3890-3891)

prop オブジェクトの未定義以外のプロパティを、opt オブジェクトのプロパティ curAnim に複写待避します。これは初期値を保存する処置であり、アニメ終了時にここで複写された値が利用されます。

▲ToTop

5. propオブジェクトをそのプロパティ毎に走査しアニメーションを描画する(#3892-3925)

jQuery インスタンスの各要素を巡回処理する中で、それぞれの要素毎にその prop オブジェクトのプロパティを巡回処理します。つまり二重の巡回処理を行うのですが、このシーンで、愈々 jquery アニメーションの肝とも言うべき jQuery.fx クラスが登場します。

5-1. jQuery.fx インスタンスの生成(#3892)

jQuery.fx クラスのインスタンス e を作り、その各プロパティを利用してアニメーションを実現しますが、まず fx クラスの定義(#4002-4009)により、次の 3 つの引数が e のプロパティとなります。

(1) e.elem = self(各要素)、(2) e.options = opt(duration、easing、old、complete、display、curAnim、及び queue の各プロパティから成るオブジェクト)、(3) e.prop = name(propオブジェクトのプロパティ名)です。

これらの 3 つのプロパティの他に、fx インスタンスには、#4013-4149 において prototype オブジェクトが定義され、update、cur、custom、show、hide、step の各メソッドが付加され、更に #4151-4171 において speeds と step というクラスプロパティも設定されます。これらについては後述しますが、同一の単語が異なる意味で使われたり、メソッド内で別のメソッドが呼び出される多重構造になっているため、jQuery.fx インスタンス e は非常にわかりにくくなっています。

5-2. propオブジェクトのプロパティ巡回の中で、その値が toggle、show または hide の場合の処理(#3895-3896)

(1) そのプロパティ値が toggle で当該要素に hidden 属性があれば、e.show(prop) メソッドが実行され、(2) そのプロパティ値が toggle で当該要素に hidden 属性がなければ、e.hide(prop) メソッドが実行され、(3)そのプロパティ値が show ならば e.show(prop)を、hideならば e.hide(prop) が実行されます。

なお、ここで登場する e インスタンスの 2 つのメソッド、e.show(prop)、e.hide(prop) については後述します。

5-3. prop オブジェクトのプロパティ巡回の中で、その値が toggle、show 及び hideでない場合の処理(#3897-3919)

このブロックでは、prop の値が数値で指定されている場合、または toggle、show、hideでも数値でもない場合(具体的にどのようなプロパティ値の場合がこれに該当するのかは解明できていません)の対応が記述されています。

まず、数値指定の場合には、算出スタイル値を変数 start に、prop オブジェクトのプロパティ値を変数 end に、それぞれ単位付きで登録します。ここで初期値と終了値が登録されます。px 以外の単位指定がされている場合には、指定された単位表現に叶う値に start 値が換算され、相対加減値指定(+= や -=)の場合にも対応しています。

こうして得られた start、end 及び unit の 3 つの引数を伴って e.custom メソッドが起動されます。

また prop の値が数値でもない何らかの値(valとする)の場合には、start( #3899 により算出スタイル値が入っているはず )、val 及び空文字をの 3つを引数として e.custom メソッドが起動されますが、具体的にどのようなプロパティがこうしたケースに該当するのか未解明です。

■ $().animate メソッド
3865: animate: function( prop, speed, easing, callback ) {
     // speed メソッドの返値 (object) を optall に代入する。
3866:  var optall = jQuery.speed(speed, easing, callback);
3867:  // queue が false ならば each メソッドを、さもなければ queue メソッドを実行
3868:  return this[ optall.queue === false ? "each" : "queue" ](function(){
3869:   // 変数定義 opt には optall のプロパティの内未定義ではないものが代入される。
3870:   var opt = jQuery.extend({}, optall), p,
       // イテレートの都度 hidden 属性の有無を hidden に登録する。
3871:    hidden = this.nodeType == 1 && jQuery(this).is(":hidden"),
3872:    self = this;
3873: 
3874:   for ( p in prop ) { // prop オブジェクトを走査
       // プロパティ値が hide で hidden が true、または
       // プロパティ値が show で hidden が false ならば
3875:    if ( prop[p] == "hide" && hidden || prop[p] == "show" && !hidden )
        // opt オブジェクトの complete メソッドを呼出しを返す。
3876:     return opt.complete.call(this);
3877:    // プロパティ名が height か width で style 属性があれば
3878:    if ( ( p == "height" || p == "width" ) && this.style ) {
3879:     // Store display property
        // opt.displayプロパティに display 値を代入する。
3880:     opt.display = jQuery.css(this, "display");
3881:
3882:     // Make sure that nothing sneaks out
3883:     opt.overflow = this.style.overflow; // overflow 属性値を代入する。
3884:    }
3885:   }
3886:
3887:   if ( opt.overflow != null ) // nullでなければ
3888:    this.style.overflow = "hidden"; // overflow 値を hidden とする。
3889:   // 引数 prop の未定義値でないプロパティを opt.curAnim に代入する。
3890:   opt.curAnim = jQuery.extend({}, prop);
3891:   // prop オブジェクトのプロパティ毎に走査
3892:   jQuery.each( prop, function(name, val){
       // $.fx クラスのインスタンス e を作る。
3893:    var e = new jQuery.fx( self, opt, name );
3894:    // プロパティ値に toggle、show、又は hide がある場合には
3895:    if ( /toggle|show|hide/.test(val) )
        // val が toggle で hidden が true ならば e.show(prop) を実行し、
        // val が toggle で hidden が false ならば e.hide(prop) を実行し、
        // val が toggle でないならば e.val(prop) を実行する。
3896:     e[ val == "toggle" ? hidden ? "show" : "hide" : val ]( prop );
3897:    else { // プロパティ値に toggle、show、及び hide がない場合には
        // valを文字列に変換してから match メソッドで調べ、最初に見つかる
        // +=数値 又は -=数値 、あるいは数値を変数 parts に代入する。
3898:     var parts = val.toString().match(/^([+-]=)?([\d+-.]+)(.*)$/),
          // e.cur(true) 実行結果があれば、変数 start にそれを代入する。
          // ここに e.cur(true) は、jQuery インスタンスに登録されて
          // いる各要素が持つ、当該プロパティ名のタグ属性値または
          // カレントスタイル値を px 単位で取得するメソッドである。
3899:       start = e.cur(true) || 0; // なければ 0を代入する。
3900:
3901:     if ( parts ) { // parts が存在すれば
3902:      var end = parseFloat(parts[2]), // /[\d+-.]+/ の値を変数 end に 代入。
3903:        unit = parts[3] || "px"; // 単位名称を 変数 unit に代入。
3904:      // start 値を所定の単位に基づく値に変換する。
3905:      // We need to compute starting value
3906:      if ( unit != "px" ) { // 単位名が px でない場合
          // 数値と単位名を連結して end 値に対応する name スタイル値を設定する。
3907:       self.style[ name ] = (end || 1) + unit;
          // 所定単位による end値 を px 単位による end 値【e.cur(true)】で除し、
          // その比率に px 単位による start 値を乗じて所定単位の start 値を得る。
3908:       start = ((end || 1) / e.cur(true)) * start;
          // 所定単位値で name スタイル値を設定する。
3909:       self.style[ name ] = start + unit;
3910:      }
3911:
3912:      // If a +=/-= token was provided, we're doing a relative animation
3913:      if ( parts[1] ) // 相対加減値が指定されている場合には
          // start 値に end 値を加減する。
3914:       end = ((parts[1] == "-=" ? -1 : 1) * end) + start;
3915:
3916:      e.custom( start, end, unit ); // custom メソッドを起動
3917:     } else // parts が存在しない場合
3918:      e.custom( start, val, "" ); // end 値は val で、unit はなしでcustom起動
3919:    }
3920:   }); // each メソッド終了
3921:
3922:   // For JS strict compliance
3923:   return true;
3924:  }); // #3868 の each or queue メソッド終了
3925: },

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

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