[JavaScript] リアルタイム描画のアニメーションエフェクト処理クラス

JavaScript によるアニメーションエフェクト用クラス2種を公開しました。
Animation.Raster(ラスタスクロール)と、Animation.Cube(サイコロ回転)です。
どちらのエフェクトも、事前の画像加工処理(分割や変形)などの準備は不要で、
JavaScript による CSS/DOM 操作でリアルタイムにアニメーション描画を行います。

    


さっそくネタ(仕組み)をバラしてしまうと、Raster は横長、Cube は縦長の短冊状に
区切った画像を cloneNode で複製しているのがミソです。
1ピクセル単位の画像処理でなく、数ライン単位でブロックで処理するため、
現実的な速度(フレーム数)でアニメーションできます。
また、ブラウザのキャッシュが効くので、元画像ファイル自体の読み込みは1回で済みます。

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 が特許を持っているそうなので、やらない方がいいかな…。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 12

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた 驚いた
面白い 面白い
ガッツ(がんばれ!) ガッツ(がんばれ!)

この記事へのコメント

この記事へのトラックバック

  • JavaScript でアニメーションエフェクト

    Excerpt: JavaScript でアニメーションエフェクト Ajax とか見てると 「JavaScript でここまでやるか / やれるのか」 と思うことが多いんですが、このゆうすけさんのも凄いです。。。.. Weblog: 青柳臣一 blog : .NET や C# がメインの blog racked: 2006-04-24 13:18