移動Web觸控與運動解決方案AlloyTouch開源啦

傳送門

Github地址：github.com/AlloyTeam/A…

簡介

AlloyTouch的本質是運動一個數字，把數字的物理變化對映到你想對映的任何屬性上。所以帶來了廣泛的應用場景。不論實在應用、遊戲、作業系統等許多層面，監聽使用者觸控，給使用者真實的運動反饋是很常見的應用場景。如王者榮耀裡，旋轉使用者角色，抽獎程式滾動轉盤、頁面滾動、區域性滾動等。

上面的那些場景，都會使用到下面三種過程之一：

• 觸控、運動、減速、停止
• 觸控、運動、減速、回彈、停止
• 觸控、回彈、停止

上面的運動可以是任何形式，如旋轉、平移、zoom等運動形式。當然，在上面過程執行的過程中，如果有其他使用者互動介入，會停止當前的過程，繼而反饋使用者新的觸控手勢。AlloyTouch正是為了解決這類問題而生。同時做到了:

• 極小的檔案大小（不到300行程式碼）
• 與頁面佈局無關
• 運動屬性無關，能運動物件字量（如｛x:100｝）
• 渲染無關的設計（dom、canvas、webgl、svg都能使用）
• 真實的物理運動軌跡
• 高效的運動方式
• 極簡的API設計

安裝

npm install alloytouch複製程式碼

使用姿勢

new AlloyTouch({
    touch:"#wrapper",//反饋觸控的dom
    target: target, //運動的物件
    property: "translateY",  //被運動的屬性
    min: 100, //不必需,運動屬性的最小值,越界會回彈
    max: 2000, //不必需,滾動屬性的最大值,越界會回彈
    vertical: true,//不必需，預設是true代表監聽豎直方向touch
    sensitivity: 1,//不必需,觸控區域的靈敏度，預設值為1，可以為負數
    factor: 1,//不必需,表示觸控位移與被運動屬性對映關係，預設值是1
    step: 45,//不必需，用於校正到step的整數倍
    change:function(){  }, //不必需，屬性改變的回撥。alloytouch.css版本不支援該事件
    touchStart:function(value){  },
    touchMove:function(value){  },
    touchEnd:function(value){  },
    animationEnd:function(value){  } //運動結束
 })複製程式碼

比如上面是運動target的translateY屬性，必須要target擁有translateY屬性才能正常工作。
你可以使用transformjs賦予dom的快速tranformation能力。所以一般需要AlloyTouch dom元素的話，可以：

var target = document.querySelector("#scroller");
//給element注入transform屬性
Transform(target,true);

new AlloyTouch({
...
...複製程式碼

功能演示

線上Demo

開始AlloyTouch吧

Github地址：github.com/AlloyTeam/A…
歡迎issues:github.com/AlloyTeam/A…
我們會在第一時間響應你的意見和建議。