07 | 2017/08 |  09

  1. 無料サーバー

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

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

スポンサーサイト

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

 

jquery.js のアニメーションコードの解読 ( 10 ) 番外編 easing関数解読

easing 関数<解読>

解読とは大袈裟すぎるかもしれませんが、一見複雑に見える easing 関数式ですが、実は中学生程度の関数の知識があれば十分理解できるものであることを、恥ずかしながら最近納得したばかりなのです。

そこで、easing 関数が実は簡単な代数式であることを改めて整理しておこうと思います。それも中学校で倣う関数の形式に、表現し直してみます。

対象とする easing 関数は jquery.js で定義されている linear 及び swing の他、George Smith 氏による 30 種類の easing 関数です。

以下の表における大前提
  1. 数値の正規化

    大前提として、jquery.js における正規化を踏まえるので、easing 代数式の文字の意味は次のようになります。

    t: current time :これは経過時間ですが、jquery.js においては、t を d で割った経過時間推移率とでも呼ぶべき値が t に代入され、それがグラフの横軸変数値となります。

    b: begInnIng value : 初期値は jquery.js では常に 0 です。b = 0

    c: change In value : 変動値は jquery.js では常に 1 です。c = 1

    d: duration : 継続時間ですが、関数式の中には直接登場することは殆どありません。

  2. easeIn と easeOut の関係

    x → 1-x, y → 1 - y へと座標変換を施すことによって、easeIn 関数から自動的・反射的に easeOut 関数が導き出せます。

  3. easeInOut 関数の作り方

    この関数は、経過時間推移率が 0.5 以下の場合には easeIn 関数を、それ以上の時には easeOut 関数を適用するだけのことです。

  4. 解読は easeIn だけで十分

    つまり、easeIn 関数が分かれば、座標変換と場合分けによって、簡単に easeOut 関数とeaseInOut 関数が出来てしまうので、easeIn 関数だけ<解読>すれば必要にして十分です。

見慣れた関数式への変換

以下の式において、x は時間推移率( t/d )を、y は easing 関数値を表しています。b,c,t,d は easing 関数で定められている通りの定義です。上に述べた事を踏まえて b = 0, c = 1, t/=d → x としました。

関数名Javascript関数式見慣れた関数式
linearb + c * ty = x
swing((-Math.cos(t * Math.PI)/2) + 0.5) * c + b y = -( cos(x * π) ) / 2 + 0.5
easeInQuadc*(t/=d)*t + by = x 2
easeInCubicc*(t/=d)*t*t + by = x 3
easeInQuartc*(t/=d)*t*t*t + by = x 4
easeInQuintc*(t/=d)*t*t*t*t + by = x 5
easeInSine-c * Math.cos(t/d * (Math.PI/2)) + c + by = - cos(x * π/2) + 1
easeInExpo(t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + by = 2 10 * ( x-1 ),
x が 0 の時は y = 0
easeInCirq-c * (Math.sqrt(1 - (t/=d)*t) - 1) + by = - (1 - x * x)0.5 + 1
easeInBackif (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; y = x * x * ( 2.70158 * x - 1.70158 )
easeOutBounce((t/=d) < (1/2.75))
 c*(7.5625*t*t) + b;
(t < (2/2.75))
 c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
(t < (2.5/2.75))
 c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
else
 c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
・x < 1/2.75 → 7.5625* x * x
・x < 2/2.75 → 7.5625* (x-1.5/2.75) * (x-1.5/2.75) +0.75
・x < 2.5/2.75 → 7.5625* (x-2.25/2.75) * (x-2.25/2.75) +0.9375
・x >= 2.5/2.75 → 7.5625* (x-2.625/2.75) * (x-2.625/2.75) +0.984375
easeInElastic var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
作成中

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

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