Rx.jsでTinder風UIを実装する
業務でTinder風UIを作るオーダーが来たので，勉強も兼ねてRx.jsで作ることにした．
コードと処理の流れ
下記のコードはRx.js ver5.8.8で動作を確認しています． v6.0.0では動作しないので適宜読み替えてください．
また，モバイルでの動作を想定して記述しています．
const tolerance = 200;
const windowWidth = window.innerWidth
const imageElem = document.querySelector('.characterImage') // dom
// 現在のスワイプ位置を取得
const touchstart$ = Rx.Observable.fromEvent(imageElem, 'touchstart')
.switchMap(startEvent =>
Rx.Observable.fromEvent(imageElem, "touchend")
.map(e => e.changedTouches[0].pageX)
)
touchstart$
.do(val => {
// スワイプ位置を判断して画像を振り分ける
if(val > windowWidth - tolerance) {
imageElem.classList.add('rotate-right')
}
else if(val < windowWidth / 2.0 - tolerance) {
imageElem.classList.add('rotate-left')
}
})
.delay(1000)
.subscribe(val => {
imageElem.classList.remove('rotate-right')
imageElem.classList.remove('rotate-left')
})
対象のDOMをfromEventで監視して，touchend時の座標を基に判定する． torelanceをいじることで動作をもう少し過敏にしたりできる．
subscribeではサンプル用に画像の復帰処理をしているが，画像の追加変更も任意で行える．
所感
まだRx.jsの勉強中なので掴めていないところが多々あるが，一旦は目標のものが出来上がった． Rx.jsは出来ることがたくさんあって使い所が分かっていなかったり，そもそも書き方がまだおぼつかなかったり… 使いながら覚えていくしかなさそう．
上記コードの指摘等あればプルリクを投げてもらえると嬉しいです．
サンプルプロジェクト
https://github.com/heimusu/rxtinder
