プログラミング雑記: HTML5+JavaScriptで画面をスライドさせて切り替える方法

Manifest+LocalStorageによるオフラインアプリ作成(3)

サンプルアプリではメイン画面のテーブル行を選択すると左にスライドして次の画面へ移動し、「戻る」ボタンでメイン画面に戻ります。

画面AからBへスライドして移動させる場合、次のような手順となります。

同一HTML内にA、Bの両方のDIVを作る。
スライド前はAのみ表示する。
画面固定にするために同時に表示される領域をデバイスのスクリーン内に収まるようにします。
スライド実行時にBをAの右側の位置に表示させる。
A、Bを同時に左方向にスライドさせる。
Aを非表示にする。

transformとtransitを用いて画面をスライドさせますが、アニメーションは非同期で行われるため、上記の手順を単純に記述したのでは一気に処理が終わり、アニメーション効果が出せません。そこでtimeoutを使用し、transit終了後に次の処理を開始するようにします。

サンプルアプリで画面スライドに関わる部分のJavaScriptは次のようになっています。

//グローバル変数
var mainBox = null;
var slideBox = null;

//body.onloadなどで初期化する。
function init() {
mainBox = new SlideBox(divMainBox, null);
}

//テーブル行がタップされたとき呼ばれる。
function cellClicked(event) {
slideBox = new SlideBox(slideDiv, mainBox);
slideBox.show();
}

//画面スライドを行うオブジェクト
SlideBox = function(div, prevBox) {
this.div = div;
this.div.className = "SlideBox";
this.prevBox = prevBox;
}

SlideBox.sec = "0.3s";
SlideBox.msec = 300;
SlideBox.currBox = null;
SlideBox.divR = null;
SlideBox.divL = null;

//cellClickedから呼ばれ、画面スライドを開始する。
SlideBox.slide = function(moveX) {
SlideBox.divL.style.webkitTransition = "all " + sec + " linear";
SlideBox.divR.style.webkitTransition = "all " + sec + " linear";
SlideBox.divL.style.webkitTransform = "translateX("+moveX+"px)";
SlideBox.divR.style.webkitTransform = "translateX("+moveX+"px)";
}

SlideBox.hideBox = function(div1, div2) {
div1.style.webkitTransition = "all 0s linear";
div1.style.webkitTransform = "translateX(0px)";
div2.style.display = "none";
}

SlideBox.prototype.show = function() {
SlideBox.divR = this.div;
SlideBox.divL = this.prevBox.div;
SlideBox.divR.style.display = "block";
setTimeout("SlideBox.postSlide()", 0);
}

SlideBox.postSlide = function() {
SlideBox.slide(-320);
setTimeout("SlideBox.postSlide2()", msec);
}

SlideBox.postSlide2 = function() {
SlideBox.hideBox(SlideBox.divR, SlideBox.divL);
return;
}

SlideBox.prototype.back = function() {
SlideBox.divR = this.div;
SlideBox.divL = this.prevBox.div;
SlideBox.divL.style.display = "block";
this.div.style.webkitTransform = "translateX(-320px)";
setTimeout("SlideBox.postBack()", 0);
}

SlideBox.postBack = function() {
SlideBox.slide(0);
setTimeout("SlideBox.postBack2()", msec);
}

SlideBox.postBack2 = function() {
SlideBox.hideBox(SlideBox.divL, SlideBox.divR);
return;
}

Manifest+LocalStorageによるオフラインアプリ作成

HTML5+JavaScriptでiPhoneでスクロールしない画面を作る方法

HTML5+JavaScriptで画面をスライドさせて切り替える方法

HTML5+JavaScriptによるSwipeの実装例

HTML5+JavaScriptによるパノラマ写真実装例

localStorageの実装例

Cache Manifest使用時のXMLHttpRequest

Cache Manifestを無効にする方法

3D Translateの実装例

3D Translate実装例(2) Diceについて