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

傳送門

Github地址：https://github.com/AlloyTeam/...

簡介

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咱們會在第一時間響應你的意見和建議。