CSSスプライトによるアニメーションでプログレスバーを作ってみた
オライリーの書籍「javascriptグラフィックス」第2章「DHTML」より、CSSスプライトというテクニックを学んだ。
HTML5Canvas、Adobe Flashを使わないので互換性が高いのもさることながら、上のデモを見ると分かるようにかなりスムーズに動いているのでビビった。プラグインを使わなくてもjavascriptとDHTMLだけで事足りる場面は多いのかも。
今回はライブラリも使わないようにしました、いわゆるVanilla JSです（最近このネタを知って言いたいだけ）。CSS3も使ってないけど古いIEは未検証（無視）です。
CSSスプライトとは？
アニメーションは複数の画像を切り替えて表示することで実現しますが、img要素を使って1コマずつ画像ファイルを読み込むような方法だとDOM操作においてもファイルの管理においてもコストが高くなってしまいます。
HTML要素では背景に画像を設定し、その表示位置を調整することで画像の一部だけを表示することが出来ます。これを利用してdiv要素などの背景に、複数の画像を並べた大きな画像を設定し、その一部だけを表示させるテクニックのことを「CSSスプライト」と呼ぶそうです。
また、グラフィック分野の専門用語では「動的テクスチャ座標」というらしい。
とりあえずプログレスバーを作ってみた
なんでもいいから、とにかく動くものを作ってみたかったのでプログレスバーを作ってみました。
せっかく作ったので何かの進捗を反映させてみたいと思い、Flickr APIから写真を検索して写真をダウンロードするデモにしました。むしろ、このFlickr APIを調べるほうに時間がかかったけどまあよくあることですね。
Flickr APIについては以下のサイトを参考にしました。
「Search Flickr」をクリックするとダウンロードが始まります。
初期値で500px大の写真200枚をダウンロードします、モバイルとかで通信料かかっちゃう人とかは「Number of photos」で枚数をいい感じに変更してくださいお願いします。
アニメーション部分の仕組み
100x20pxのdivに400x140pxの（100x20pxを4x7で並べた）画像をbackground-imageに設定。
(グレーの部分は実際には透明色。透明地に白の矢印）
setIntervalでbackground-positionの値を一定間隔で更新し、アニメーションさせる。
同じものを6つ横に並べる。デモを読み込む
親要素のleftを-100pxから0pxの間でループさせる。デモを読み込む
親の親要素を5つ分の幅に設定しoverflowにhiddenを設定する事によって、右に流れ続けているように見える。デモを読み込む
その他の部分
ざっくりと説明すると、
- FlickrAPIに検索するワードと取得する写真の枚数などの情報をリクエストする。
- 写真のURLなどの情報をJSONP形式で取得。コールバック関数の名前は
jsonFlickrApiから変えられないみたい。 - 指定した枚数分（初期値は5つ）
img要素を生成する、onloadイベントにまだリクエストしてない写真が残っていたら再びimg要素を生成しonloadイベントを設定する処理を代入。（すべての写真を取得するまでリクエストが繰り返される） - (
onloadインベントが発火した数 / リクエストするすべての写真の数)で全体の進捗を判定して、プログレスバーのwidthに反映させる。
という感じになっている。
まとめ
- HTML5Canvas、CSS3、Flashもいいけど、DHTMLもいいね！
- 当初はもっと簡単なデモで終わるつもりだったので、コードがスパゲティカルになっちまってる。
もうちょっと、ってやってるとすぐに肥大化するからもっとMVC的な、オブジェクト指向的なやつをちゃんとしないとダメですね。
おしまいケル。
