ウェブリ/ブログログイン

[ ]

トップ  プロフ  フレンド  サークル

JavaScript によるアニメーションエフェクト用クラス２種を公開しました。 Animation.Raster（ラスタスクロール）と、Animation.Cube（サイコロ回転）です。 どちらのエフェクトも、事前の画像加工処理（分割や変形）などの準備は不要で、 JavaScript による CSS/DOM 操作でリアルタイムにアニメーション描画を行います。      さっそくネタ（仕組み）をバラしてしまうと、Raster は横長、Cube は縦長の短冊状に 区切った画像を cloneNode で複製しているのがミソです。 １ピクセル単位の画像処理でなく、数ライン単位でブロックで処理するため、 現実的な速度（フレーム数）でアニメーションできます。 また、ブラウザのキャッシュが効くので、元画像ファイル自体の読み込みは１回で済みます。 Raster（ラスタスクロール）は分割と移動だけですが、Cube（サイコロ回転）は 画像縮小処理が入るため、より高速な CPU が要求されます。 とはいえ、Pentium III 800MHz の古いノート（愛機 DynabookSS/S5）でもそれなりに 再生できる程度にはチューニングしています。最近の高速マシン（3GHz〜等）なら、 大きな画像でもより快適に、多くのフレーム数でスムーズに再生されます。 このようなタイプの JavaScript は、IE/Firefox よりも Opera の動作が速いですね。 ラスタスクロールの動作（Wave）は、IE 専用なら DXImageTransformを使って高速に実現できそうだけど、 Opera・Firefox のクロスブラウザを実現するのは本ライブラリだけ!? script.aculo.us（の少なくともデモページには）にも、似たのはないよね？ JSAN にも順次上げています。 PS) Raster・Cube と同じ手順で、ジニーエフェクトもどきも作れそう。 でも Apple が特許を持っているそうなので、やらない方がいいかな…。

<< 前記事（2006/04/16）

トップへ

後記事（2006/04/21）>>

<< 前記事（2006/04/16）

トップへ

後記事（2006/04/21）>>

[JavaScript] リアルタイム描画のアニメーションエフェクト処理クラス Kawa.netブログ（川崎有亮）/BIGLOBEウェブリブログ