傳送門
Github地址：https://github.com/AlloyTeam/AlloyTouch
簡介
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地址：https://github.com/AlloyTeam/AlloyTouch
歡迎issues:https://github.com/AlloyTeam/AlloyTouch/issues
我們會在第一時間響應你的意見和建議。