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

Archives Details

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

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

Comment

Related Article

「Band’s」スマートフォン版リリースしました!

2015.06.24

スマートフォンサイト制作における SCSSディレクトリ構成、Class命名について

2014.06.01

ドラクエモンスターズ スーパーライト ジェム 50,000円分 無料GET!! と謳っている【manekin】(マネキン)をやってみた!

2014.05.24

HTML5 WebビューApp ソーシャルゲーム制作時のまとめ

2013.08.17

スマートフォン タッチイベント、距離、速さ等確認ページ

2013.03.07

weinreでiPhone/Androidをリモートデバック

2013.01.27

translateプロパティでAndroid,iPhone端末で画像がちらつく件

2012.09.13

CSS3 アイコン作成 背景指定1つ 光彩グラデーションの表現

2012.05.19

スマートフォン JavaScript タッチ、フリックイベント実装その2 「ボールを投げる」

2012.02.18

スマートフォン JavaScript タッチ、フリックイベント実装

2012.02.18

CATEGORY LIST

LATEST NEWS

バキバキ画面割れ、バッテリー膨張している iPhoneXを修理した話

iPhone

2021.09.05

Macのデータ復旧を簡単に! EaseUS Data Recovery Wizard for Mac Pro を使用してみた。

tool

2021.08.24

パーティション管理ソフト「MiniTool Partition Wizard」を使ってみた。

tool

2021.08.18

【2021】ゲオのサマーセール 980円以下のゲームソフトが半額!8月16日(月)まで。で購入したもの。

Game

2021.08.08

M1 Macで始める「ゼロからのOS自作入門」- 第1章

自作OS

2021.07.24

2021年6月 Amazonプライムデーで購入したもの。(今更)

イベント

2021.06.30

Go言語開発者、Unity開発者必見!! 【Golang】「クソコードをシンプルにする」,【Unity】「Singletonを使わないUnityを用いたApplication開発」

イベント

2021.05.23

TypeScriptでStateMachine

AI・Bot・algorithm

2021.05.16

iPad Air で、Web開発環境構築(iSH Alpine使用)

mac

2021.04.11

【Qt】Mac開発 ソートダイアログ (拡張するダイアログ)を作成

C++

2021.04.01

M1 (Appleシリコン)Macで Widowsアプリを起動

mac

2021.03.27

M1(Appleシリコン)Macで、ファミコンソフトプログラミング。 サクッと開発環境準備編

Game

2021.03.21

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US