03 | 2017/04 |  05

  1. 無料サーバー

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

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

スポンサーサイト

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

 

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

jQuery().animate() メソッド───その 2( 逐次実行と併行実行 )

このエントリイでは animate メソッドによって、複数のアニメーションを起動する 2 つの方法について考察します。複数アニメーションを、1 つずつ順番に起動する方法と、恰も同時に引き起こされているかのように並行して表示する─── こうした 2 つの異なるアニメ起動方法について、その差異をもたらすコード進行過程を考えてみます。

アニメーションの逐次起動はどのように行われるか?

【 opt.queue!==false ( opt.queue が true か undefined の時 )のコード進行 】

逐次実行アニメーションサンプル

本題に入る前に逐次実行アニメーションのサンプルを見てみます。

逐次実行アニメの一例

アニメの逐次実行とは、複数のアニメーションを 1 つずつ順番に実行することです。例えば、(1) 或るボックスを右に 200 ピクセル移動させ、(2) 背景色を変化させ、(3) 文字サイズ小さくしてからまた色を変更し、(4) 最後に文字サイズを大きくするアニメーションは以下のようになります。

なお、色は animate メソッドの操作対象外ですから、animate メソッドの引数である complete メソッドを利用してアニメートさせています。animate メソッドで作動させたアニメーションが終わる時に、色が変わるようにしたわけです。

 
逐次実行アニメ sample

上の逐次実行アニメーションのスタイルシートとスクリプトコードは以下のように作成しました。

■ スタイルシート
 #animTestIn722, #animTest2In722{
   width:200px;background-color:royalblue;
   border:2px white solid;font-size:1em;
   margin-left:100px;
 }

■スクリプトコード
var goSequential = function(){
 $("#animTestIn722").animate({marginLeft:"+=200px"},2000,
  function(){$(this).css({backgroundColor:"darkgreen"});})
  .animate({fontSize:"0.75em"},2000,
  function(){$(this).css({backgroundColor:"indigo"});})
  .animate({fontSize:"1.5em"},2000,function(){$(this).text("逐次実行アニメ終了")});
}
var backSequential = function(){
 $("#animTestIn722")
  .animate({fontSize:"0.75em"},2000,
   function(){$(this).css({backgroundColor:"darkgreen"});})
  .animate({marginLeft:"-=200px"},2000,
   function(){$(this).css({backgroundColor:"royalblue"});})
  .animate({fontSize:"1em"},2000,function(){$(this).text("逐次実行アニメ sample")});
}
var startSequential = function(){
 $("#animTestIn722").text("逐次実行アニメ sample")
  .css({backgroundColor:"royalblue",marginLeft:"100px",fontSize:"1em"});
}
var endSequential = function(){
 $("#animTestIn722").text("逐次実行アニメ終了")
  .css({backgroundColor:"indigo",marginLeft:"300px",fontSize:"1.5em"});
}
$("#btn1In722").click(function(){
 if ($(this).css("margin-left")!==100+"px") startSequential();
 goSequential();
});
$("#btn2In722").click(function(){
 if ($(this).css("margin-left")!==300+"px") endSequential();
 backSequential();
});
逐次実行アニメーションコードの解読

問題を単純化するために、まず、或るインスタンスから animate メソッドが初めて起動される場合を考えます。animate メソッドは非常に複雑なコード進行をするので、問題を単純化・細分化して考察する必要があるのです。

  1. animate メソッドの最初のサブルーチン speed メソッドが実行されると、opt.complete プロパティに、$(this).dequeue() と opt.old.call(this) の 2 つのメソッドが登録されます。なお、ここではあくまで登録が行われるだけで登録されたメソッドは実行されません。
  2. その後 $(this).queue メソッドが実行され、animate メソッドの唯一の引数である無名関数全体が、"fxqueue" 名で新たに関連づけられた配列に追加されます。これで関連づけ配列の要素は 1 つとなります。
  3. すると queue メソッドの定義により、queue メソッドによって当該配列に追加された当該無名関数が実行されます
  4. そしてこの無名関数が実行されて初めて、アニメーションを具体化するコードの履行が進み、そのアニメーションコード進行の最後段階で opt.complete メソッドが起動されると、opt.old に登録済みの、animeteメソッドの第 4 引数である callback 関数(すなわちアニメ終了後に起動することを命じられていた関数)が実行されます。
  5. このとき opt.old に登録済みのもう 1 つのメソッドである $(this).dequeue() メソッドは、引数がないので、インスタンスの要素毎に $.dequeue(this) が起動されます。その結果、各要素に既に "fxqueue" 名にて関連づけられている配列から、最初の要素が削除されます。この削除される最初の要素とは、2. で追加された関数そのものです。また $.dequeue メソッドが第 2 引数なしで呼び出されるため、関連づけ配列の 2 番目の要素があれば実行されますが、それは存在しないので、 $.dequeue(this) メソッドは、関連づけ配列の第一要素を削除する以外のことは何もしません。
  6. こうして $() インスタンスから起動された最初のアニメーションが終わります。

▲ToTop

次に、以上に続けて、同一インスタンスに 2 番目の animate メソッドが適用される場合を考えてみます。特に先行するアニメーションが未だ進行中の段階で、2 番目の animate メソッドが起動される場合を考えてみます。

アニメーションの逐次起動とは、このような場合でも、後のアニメーションが起動されないことなのですから...

  1. animate メソッドの最初のサブルーチン speed メソッドが実行されると、opt.complete プロパティに、$(this).dequeue() 及び opt.old.call(this) が登録されます。登録されるだけで実行されないことも含めて最初のアニメーションの場合と何ら変わりません。
  2. その後、$(this).queue メソッドが実行され、animateメソッドの唯一の引数である無名関数が関連づけ配列に追加されます。これも上と同一です。異なるのは、最初のアニメーションが作動中ですから、関連づけ配列に登録された無名関数はこの時点で 2 つとなります。まだ 5. による最初の要素の削除は起こっていないのです。するとこの時点では関連づけ配列の要素数は 2 以上となるので、$(this).queue メソッドの定義から 2 番目の無名関数の実行は引き起こされず、$(this).queue メソッドは関連づけ配列に 2 番目の無名関数を追加しただけでその役割を終えます。
  3. こうして、2 番目の無名関数、すなわち 2 つめのアニメーションを実行する関数は「待機」状態となります。
  4. さて、その待機関数が実行されるのは、最初のアニメーションが終わろうとする段階です。それは上の 5. の段階です。この段階では、関連づけ配列の最初の要素(つまり最初の無名関数)が削除されます。しかしここでは、既に 2 番目の animate メソッドが起動済みで、2 番目の無名関数が関連づけ配列に登録済みとなっています。従って、最初の要素が削除された後の関連づけ配列には、1つの要素=「2 番目に追加された無名関数」が存在しています。そして $.dequeue(this) メソッドは、関連づけ配列の要素数が 1 の場合にはその要素を実行します
  5. こうして、2 つめのアニメーションを引き起こす無名関数が起動され、2 つめのアニメーションが引き起こされます。このようにして、前のアニメーションが終わってから、次のアニメーションが励起されるのです。

▲ToTop

アニメーションの並行起動はどのように行われるか?【 opt.queue===false の時 】

併行実行アニメーションサンプル

本題に入る前に併行実行アニメーションのサンプルを見てみます。

併行実行アニメの一例

アニメの併行実行とは、複数のアニメーションをほぼ同時に実行することです。例えば、(1) 或るボックスを右に 200 ピクセル移動させながら、(2) 併行して文字サイズ大きくするアニメーションは以下のようになります。

但し、そもそも色は animate メソッドの操作対象外ですから、色は併行起動できません。animate メソッド内の complete メソッドを利用して逐次起動せざるを得ません。

 
併行実行アニメ sample

上の併行実行アニメーションのスクリプトコードは以下のように作成しました。(スタイルシートは上の逐次起動のものと同一であり、そちらに記載してあります。)

■ スクリプトコード
var goSidebyside = function(){
 $("#animTest2In722").animate(
  {marginLeft:"+=200px"},{queue:false,duration:2000,easing:"swing",
   complete:function(){$(this).css({backgroundColor:"darkgreen"})}})
  .animate({fontSize:"1.5em"},2000,function(){$(this).text("併行実行アニメ終了")});
}
var backSidebyside = function(){
 $("#animTest2In722")
  .animate({fontSize:"1em"},{queue:false,duration:2000,
   complete:function(){$(this).css({backgroundColor:"royalblue"})}})
  .animate({marginLeft:"-=200px"},2000,
   function(){$(this).text("併行実行アニメ sample")});
}
var startSidebyside = function(){
 $("#animTest2In722").text("併行実行アニメ sample")
  .css({backgroundColor:"royalblue",marginLeft:"100px",fontSize:"1em"});
}
var endSidebyside = function(){
 $("#animTest2In722").text("併行実行アニメ終了")
  .css({backgroundColor:"darkgreen",marginLeft:"300px",fontSize:"1.5em"});
}
$("#btn3In722").click(function(){
 if ($(this).css("margin-left")!==100+"px") startSidebyside();
 goSidebyside();
});
$("#btn4In722").click(function(){
 if ($(this).css("margin-left")!==300+"px") endSidebyside();
 backSidebyside();
});
併行実行アニメーションコードの解読

解説書には「同時起動」と言う表現もありますが、以下に見るように複数のアニメーションを全く同時に引き起こせる訳ではありません。「先行するアニメーションが終わる前に、次のアニメーションを起動する」意ですから、正確には「並行」起動というべきでしょう。

さて、queue プロパティに何も指定しなければアニメーションは 1 つずつ逐次起動されますが、並行起動はユーザーが opt.queue の値を意図的に false としない限り引き起こせません。ここに opt オブジェクトの queue プロパティ指定は次のように行います。

animate メソッドの第 2 引数 speed を { queue:false, duration:nn, easing:"xyz" } のようなオブジェクトとします。この方法によってのみ opt.queue を false に指定することが出来ます。

  1. この場合、speed メソッド内において opt.complete メソッドに登録されるメソッドは、opt.old.call(this) だけであって、$(this).dequeue() は登録されません。
    また、speedメソッド実行後に起動されるイテレータは $().queue メソッドではなく、$().each メソッドです。
  2. こうして、each メソッドが無条件で無名関数を実行しアニメーションが引き起こされます。
  3. そして当該アニメーションの最後の段階で opt.complete メソッドが起動されて、animate メソッドの第 4 引数に記述された callback 関数が実行され、アニメート終了後の何らかの操作が行われます。
  4. 次に同一インスタンスに登録された 2 つめの animate メソッドが、1 つ目の animate メソッドによるアニメーションが終わる前に起動された場合を考えます。この場合には。直上の 1. ~ 3. の過程が新しい animete メソッド内で進行します。すなわち dequeue メソッドは登録されず、たとえ先の animate メソッドが起動中であっても淡々と 2 つ目の無名関数が実行されます。こうして 1 つ目のアニメーションに並行して 2 つ目のアニメーションが引き起こされる訳です。

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

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