一、前言
這幾個月事情比較多,寫了一些博客都沒有來得及整理發(fā)布,今天剛好有一位同事在開發(fā)前端頁面的時候用到了手勢判斷。所以翻出了之前寫的 demo,順便整理一下作為記錄。
手勢判斷在各種應用中都十分常見,如 APP 中的手勢翻頁,前進后退等等,如微博做得就特別好,微信的話就不想吐槽了。不扯太遠,H5 開發(fā)中手勢判斷一般多用于一些交互比較靈活的場景,例如大轉盤抽獎游戲,旋轉菜單,酷跑,打磚塊游戲等等。今天不具體到這些小游戲的開發(fā),我們重點講講實現(xiàn)的原理。其實比較基礎,大神請自動忽略。
二、實現(xiàn)原理
前提事件,所謂手勢,就是你的手對于屏幕觸摸的方向或者說軌跡。其實移動端只不過是用戶的手指代替了 PC 端的鼠標。所以如果你做過 PC 端頁面的鼠標軌跡判斷,那移動端的手勢判斷思路也就可以秒殺了。
上面我們提到,要對用戶手指對屏幕的操作進行捕捉,在 H5 中提供了這樣幾個關鍵的事件監(jiān)聽 touchstart
、touchmove
、touchend
。因為比較基礎我下面就簡單帶過了。
首先
延伸閱讀
學習是年輕人改變自己的最好方式