このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

前回の

スマートフォン 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

次回は様々なアニメーションを実装したいと思います。