このサイトは、只今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

Mac 容量足りない問題は、外付けSSDで快適に解決!おすすめ外付けSSD

mac

2024.10.16

Z80エミュレータ- EMUZ80の組み立て

電子工作

2024.10.13

Mac VSCodeで、SFML C++開発環境を作る。

C++

2024.09.09

Rust-SDL2 examplesをすべて試す

Rust

2024.09.01

JavaScriptで、DOMを放り投げる処理

JavaScript

2024.07.27

Rustで創る MOS 6502 CPU その2

Rust

2024.07.23

Rustで創る MOS 6502 CPU その1

Rust

2024.07.19

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US