04 | 2017/05 |  06

  1. 無料サーバー

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

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

スポンサーサイト

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

 

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

jquery.js におけるアニメーションコードの全容解明のために、まずは基本的事項から認識を深めていこうと思います。

Javascript によるアニメーションとは何か

アニメーションとは、多数の静止画を所定の時間内で連続的に切り替えて「動き」を演出する一連の動作です。アナログ動画は Max 30 枚/秒の静止画から構成され、0.03 秒ごとに切り替わることにより動きを演出しますが、スクリプトによるアニメーションでも静止画の切り替えを連続的に行うことによって動きを表現します。

具体的には対象とするタグ要素の CSS スタイル属性値を、スクリプトから定期的に変化させてアニメーションを実現します。コンテンツの幅や高さなどの CSS スタイル値に、初期値、定期的増減値及び終了値の 3 つの値を与え、それらを時間軸上で処理することにより「動き」を演出します。

jquery.js ではアニメーションをどのように実現しているのか

jquery.js においてこのようなアニメーションを実現しているプロセスは以下のようになります。

  1. まずアニメーションが終わる状態である「 終了値 」を animate メソッドの第 1 引数 prop オブジェクトで指定します。animete メソッドでは他に引数として、アニメに必要となる easing、duration、並びにアニメ終了後に起動する callback 関数を指定し、結局これらの 4 つの引数によってアニメーションに係る全ての要素を指定します。

    なお、speed をオブジェクト形式で指定して、第 3 と第 4 引数を指定しない引数指定方法もあり、この方法によってのみ指定可能な値があります。queue と step メソッドです。

    queue は、同一要素の対する複数のアニメーションを、順次起動するか、並行的に起動するかを指定するプロパティです。queue を指定しないか true とすれば順次起動に、false とすれば並行的起動となります。

    step はアニメ進行中に何かを行わせる場合に指定するメソッドです。

    オブジェクト形式で指定する場合には、duration と easing もそのオブジェクト内の各プロパティとして指定します。

  2. アニメ-ション開始時の状態: 「 初期値 」 は、既にブラウザで描画済みの要素の状態から、e.custom メソッドによって取得します。

    ここに e は jquery.js 内部において、jQuery.fx コンストラクタから生成されるインスタンスです。

  3. アニメーションの定期的増減値は、初期値、終了値、easing関数、並びに開始時刻、継続時間及び現在時刻の6つの要因から e.step メソッドにより設定されます。

    なお、この e.step メソッドは、animate メソッドの第 2 引数をオブジェクト形式で指定して、そのプロパティで定義する step メソッドとは別物です。

  4. 最後に e.custom メソッドとその中から呼び出される e.step メソッドによって、必要な全ての値を取得し終えてから、e.update メソッドによって描画を更新します。

ここにおいて、以上の 2.~4.、すなわち初期値設定から描画更新までのフローは、animate メソッドを起動した jQuery インスタンスの登録要素毎に、かつ指定した CSS プロパティ毎に何百回、何千回と繰り返されます。この二重のイテレートによってアニメーションが実現されていることを理解することが、animate メソッドを理解する大きなポイントです。

因みにこれらの連続して起動される一連のメソッドを図式化すると以下のようになります。
$().animate(prop,speed,easing,callback){
 $().each(func(){ || $().queue(func(){ //イテレートその1( 対象要素毎 )
  $.each(prop,func(name,val){ //イテレートその2( CSSスタイルプロパティ毎 )
   ・val が toggle || show || hide
        → e.toggle || e.show || e.hide メソッド起動
         これらのメソッド内で最終的に e.custom メソッドが起動される
   ・val がその他ならば        → e.custom メソッドが起動される
   ・e.custom =初期値を取得し、アニメ開始時刻を記録する。
     ↓
    ・e.step =開始時刻からの経過時刻、その時点における CSS 値などを設定する。
      ↓
     ・e.update =その時点の CSS 値に基づいて要素を表示する。
  })
 });
};

▲ToTop

animate メソッドに登場するオブジェクトのプロパティ名一覧

animate は、CSSプロパティ値を頻繁に操作し、変化させるメソッドです。それらのプロパティ値を含むオブジェクトは animete メソッド内で複数個登場しますが、最終的には e インスタンスのプロパティに統合されます。

ですから、animeteメソッドを理解するには、オブジェクトとそのプロパティのそれぞれの役割を知ることが重要になります。

以下に、animate メソッドに登場する e インスタンスのプロパティとメソッド、並びに jQuery.fx のクラスプロパティを、簡略化した独自の表示形式で、最小限の説明を加えて羅列しておきます。

それぞれのプロパティの役割については、各メソッドの解読の中で行います。

■ e インスタンス ( コンストラクタは jQuery.fx )
 e = {
 elem:elem,// jQuery.fx の第 1 引数で、animete メソッドの起動元となる
       // jQuery インスタンスに登録されている要素
 prop:propName, // jQuery.fx の第 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)} 

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

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