スマートフォン JavaScript タッチ、フリックイベント実装その2 「ボールを投げる」
2012.02.18
この記事は最終更新日から1年以上が経過しています。
前回の
スマートフォン JavaScript タッチ、フリックイベント実装
の続きとなります。
今回は、フリックの判定、CSS3アニメーションでフリック判定によってボールを飛ばす。の2点をお届けします。
では、
タッチ、フリックイベント判定
なにを判定するかというと、右にフリックされたのか、左にフリックされたのかを判定したいと思います。
前回のhttp://webcyou.com/demo/js/flick/flick004.htmlの記述を若干変更します。
JavaScript
function touchHandler(e){ e.preventDefault(); var touch = e.touches[0]; if(e.type == "touchstart"){ $("#txt").text(touch.pageX); startX = touch.pageX; } if(e.type == "touchmove"){ $("#txt").text(touch.pageX); curX = touch.pageX; } if(e.type == "touchend"){ if(startX < curX){ $("#txt").text("右にフリックされました。"); }else if(startX > curX){ $("#txt").text("左にフリックされました。"); } } }
ざっと変更した箇所を説明。
“touchstart”イベントが実行されたとき、変数「startX」にタッチの始まりの座標を代入。
“touchmove”イベントが実行されたとき、変数「curX」に現在の座標を代入。
“touchend”イベントが実行されたとき、「startX」と「curX」の座標を比較し、終了時の座標が大きければ「右にフリック」、終了時の座標が小さければ「左にフリック」と判別しております。
そのまま、テキストとして出力。では確認。
良い感じ。
確認は以下のページで出来ます。(スマートフォンで確認してください。)
確認ページ
http://webcyou.com/demo/js/flick/flick005.html
縦の場合はpageYを使用すればOK! 注意点は終了座標が大きい場合は「下」、終了座標が小さい場合は「上」となります。
CSS3アニメーション フリックによるボール投げ
それでは、CSS3を使いボールを放り投げましょう。
CSSで円形を作ります。
CSS
#touchBox{ position:absolute; bottom:10px; border:#999999 1px solid; -webkit-border-radius:40px; height:80px; width:80px; background:#666; }
大きさ、色等はすべて任意で。position:absolute;で動かしますのでこちらは必須となります。
更に、フリックされた時、クラス「on」を追加してアニメーションを実行させます。
その時のアニメーション設定をcss3で設定。
#touchBox.on{ -webkit-animation: effect 1s 1 ease-in; } @-webkit-keyframes effect{ 0%{bottom:10px;} 45%{bottom:220px;} 50%{bottom:230px;} 55%{bottom:220px;} 100%{bottom:10px;} }
上に放り投げて落ちてくるアニメーションです。(簡易なので許してください。)
では、フリックイベントの用意。
JavaScript
function touchHandler(e){ e.preventDefault(); var touch = e.touches[0]; $('#touchBox').removeClass('on'); if(e.type == "touchstart"){ startY = touch.pageY; } if(e.type == "touchmove"){ curY = touch.pageY; } if(e.type == "touchend"){ if(startY < curY){ $("#txt").text("下へは投げれません。"); }else if(startY > curY){ $('#touchBox').addClass('on'); } } }
ちょこっと扱った程度になります。
pageXだったのをpageYに変更。(終了座標が大きい場合は「下」となるので注意。)
$(‘#touchBox’).removeClass(‘on’);で
touchHandlerが実行された時、一旦ボールに付与されたクラス「on」を削除しております。
$(‘#touchBox’).addClass(‘on’);で
上にフリックされた時、ボール(#tochBox)にクラス「on」を付与しております。
そのぐらいです。w では確認。
わー。いいですねw
確認は以下のページで出来ます。(スマートフォンで確認してください。)
確認ページ
http://webcyou.com/demo/js/flick/flick006.html
次回は様々なアニメーションを実装したいと思います。