メモ

Edge Animateでスワイプを実装してみた

Posted on by seigo

Edge Animateでtouchendやtouchstartが使えるのでスマートフォンのスワイプ動作を実装してみました。

※執筆時点ではv1.0.1のバージョンでご紹介します。

サンプル

今回はソースを見えるようにするためパブリッシュをしてない素のデータとなります。

左右にスワイプすると脇から灰色の矩形が通り過ぎます（ややわかりにくい＾＾；

→別ページで開く　

PCでのタッチイベント検証でChromeのデベロッパーツールのTouch Event Emulateが便利

この制作をするなかでPCでmouseup/mousedownしかとれずタッチイベントは基本的に検知できませんでした。ですので、当初はスマートフォンで出来上がったEdge AnimateのURLを何度見てテストしたので大変でした。

そんな時に、PCでのタッチイベント検証でChromeのデベロッパーツールのTouch Event Emulateが素晴らしかった。

参考リンク：PCブラウザでタッチイベントをエミュレートする！ – するめとめがね

これでPCでタッチイベントを見ることが出来、開発精度が一気に上がりました！

Edge Animate内のアクション

さて、上記のテストが出来たおかげで気づいたのですが、タッチイベントでの自分の取得したい情報に若干クセがありました。

以下のリンクのとおりで、

タッチイベントで座標が上手く取れない問題のメモ｜Blog｜Skyward Design

今回のタッチ情報はevent.originalEventオブジェクトにアクセスすることで取得できるようです。

それを元にStageのtouchstartとtouchendに以下のように仕込んでいます。

image_20130208_210128_1

image_20130208_210555_5

タッチ場所（e.originalEvent.changedTouches[0].pageX）を使って、touchstartで記録したprePageXをもとにtouchendで移動量を計算してアニメーションをさせています。

Stageのtouchstartイベント

// イベントのキャンセルを通知
// こうすることでtouchendが同じ座標以外でも反応する。
e.preventDefault();
// イベント状態をテキスト(TextEventInfo)に反映
sym.$("TextEventInfo").html("touchstart");
// タッチ位置(pageX)を記憶
prePageX = e.originalEvent.changedTouches[0].pageX;

Stageのtouchendイベント

// イベント状態をTextEventInfoテキストに反映
sym.$("TextEventInfo").html("touchend");
// touchstartで記録したprePageXをもとに移動量を計算
var goX = e.originalEvent.changedTouches[0].pageX - prePageX;
// 移動量を下部テキスト(TextMoveNum)に表示
sym.$("TextMoveNum").html( goX );
// 移動量の正負に応じて再生/逆再生
if( goX > 0 ){
	// 左から右に
	sym.play(0);
} else if( goX < 0 ){
	// 右から左に
	sym.play(500);
}

雑感

今回はわかりやすいサンプルにするためスワイプ重視で動くようにしていますが、手元のAndroid2.3,4.0,iPod Touch(iPhone4相当 iOS5)の実機で無事動いております。若干iPod Touchで右から左のモーションが怪しいですが、タッチイベント自体の判定はちゃんとしています。

もし実戦投入用に改善するなら、touchmoveも取って動き検知の精度を増してみたり、単純なタッチも反応してしまうので幾らか左右のしきい値を持ったほうが良さそうだと思っています。

おわりに

いかがでしたでしょうか。

Edge Animateではtouchstartとtouchendがちゃんと準備されていて、すんなり組むことが出来ました。

今回のソースコードも以下においておきます。

Edge Animateデータダウンロード：edge_animate_swipe_action.zip

それでは、よき Edge Animate Life を！

、、
seigo