English Japanese Kawa.netxp [JavaScript] Animation.Raster - ラスタスクロールだ！

Animation.Raster クラスは、 JavaScript で 擬似ラスタースクロール するためのライブラリです。
10年以上前のゲームみたいに、「うねうね」するエフェクトを楽しめます。
CPU の速いマシンでも遅いマシンでも、同じ実時間内でアニメ表示します。
速いマシンの方がスムーズに表示されます。（GHzクラスのCPUが必要です）
Internet Explorer 7.0、Firefox 1.5、Opera 8.5、Safari 2.0.3、OmniWeb 5.1.3 で 動作確認しています。
ただし、IE は『ページを表示するごとに確認する』にはしないでください。

アーカイブ： Animation.Raster-0.02.tar.gz TARGZ JSAN
.js ソースファイル単体： lib/Animation/Raster.js JavaScript

長音『ラスタースクロール』or『ラスタスクロール』どっちでもいいのかな？(検索対策)
このページのタイトルは、元 MSX ユーザの方はあの感動を覚えているかもしれない……。

※ Animation.Cube（サイコロ回転エフェクト）も合わせてどうぞ。

画像URLを指定してラスタスクロール

URL: px

［ここに表示されます］

flickrの画像でお試しラスタスクロール

↓の画像をクリックすると、とりあえず試せます。 (flickr)

[ここに表示されます]

HTML 要素もラスタスクロールできます

画像だけでなくて、<div> 要素や <table> 要素などもラスタスクロールできます。

April 2006
12
3456789
10111213141516
17181920212223
24252627282930

※4月2日が1日になっていた点と、 31日まであった点を修正しました。

JavaScript 技術メモ

先日書いた Nクイーン問題 を解く JavaScript と同様に、アニメーションの１コマずつ
1ミリ秒のタイマー割り込み(というかsetTimeout)を使って表示を行っています。
JavaScript の処理をロックせずに、ブラウザに画面描画を行わせるためのテクニックです。
もちろん、垂直同期とか本来のラスタスクロール的な技術は使っていません。

Raster.js スクリプトをロードした上で、以下のように使います。

	var ras = new Animation.Raster( id_or_elem, image_url );
	ras.scroll();

new() コンストラクタの 第1引数 id_or_elem は、描画キャンバスを設置する要素（または要素id文字列）を指定します。

第2引数 image_url は、ラスタスクロールさせる画像ファイル URL を指定します。
第2引数を省略した場合は、描画キャンバスの内容自体をアニメーションします。(任意のHTML)

scroll() メソッドで、実際のラスタスクロールのアニメーション処理が開始します。

描画キャンバスの大きさは、 画像ファイルの縦横ピクセル数(offsetWidth×offsetHeight)から 自動的に設定します。
Opera では、画像の読込みが完了するまでは、 offsetWidth×offsetHeight の値が不正（ALTか『画像』という文字の大きさ）になります。 本ライブラリでは onLoad イベントで画像の読み込み完了を待ってから アニメーション処理を開始することで回避しています。

オプションとして、以下のようにプロパティ値を指定することができます。 

    var ras = new Animation.Raster( id_or_elem, image_url );
    ras.lineHeight  = 4;                    // スクロールさせるラインの高さ（ピクセル）
    ras.clip        = false;                // 枠からはみ出した部分を隠すか否か（デフォルトtrue）
    ras.background  = "#000000";            // アニメーション時の背景色
    ras.downSeconds = 1.0;                  // 上から落ちてくるアニメーションの秒数
    ras.fadeSeconds = 4.0;                  // 落ちた後、揺れの幅が収まるまでの秒数
    ras.waveSpeed   = 0.5;                  // 揺れが移動する速度
    ras.onComplete  = function () { ... };  // アニメ終了後に呼ばれるコールバック関数
    ras.scroll();

１ピクセル単位でラスタスクロールさせるとアニメーションの処理が重くなるため、 4〜8 ピクセル程度を1ラインとするのが現実的です。（lineHeight）
このラインの数だけ、画像（または要素）がコピー(cloneNode)されます。

また、描画キャンバスをマウスでクリックすると、 アニメーション処理を終了します。

更新履歴

2006/05/31
web creators 2006年7月号 で紹介されました。(P.38)
2006/04/10 (0.02)
Pentium 4 3GHz以上の高速 CPU 搭載マシンでも正常に動くようにした（つもり）。
0.01 では、早すぎて「うねうね」に見えなかったんじゃないかと思う多分。
このタイマー処理の改良に伴い、秒数を指定できるようにした。
<div> 等のエレメントも「うねうね」できるようにした。
2006/04/07 (0.01)
とりあえず「うねうね」が見たくて作ってみた。（画像のみ対応）

コメントはこちらへ by AjaxCom

その他のページへのリンク

このページへのトラックバック by AjaxTB

トラックバックURL：http://www.kawa.net/service/tb/ajaxtb.cgi/works/js/animation/raster.html

Kawa.netxp © Copyright 2006 Yusuke Kawasaki