| ブログ ログイン | [ ] | トップ プロフ フレンド サークル |
[JavaScript] リアルタイム描画のアニメーションエフェクト処理クラス
|
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) >> |
| タイトル （本文） | ブログ名／日時 |
|---|---|
JavaScript でアニメーションエフェクト
JavaScript でアニメーションエフェクト ...続きを見る |
青柳臣一 blog : .NET や C... 2006/04/24 13:18 |
| 内 容 | ニックネーム／日時 |
|---|
| << 前記事(2006/04/16) | ブログのトップへ | 後記事(2006/04/21) >> |
ブログ気持玉 11
ニコッとタウン