資訊專欄INFORMATION COLUMN
摘要：不論實在應用游戲操作系統(tǒng)等許多層面，監(jiān)聽用戶觸摸，給用戶真實的運動反饋是很常見的應用場景。正是為了解決這類問題而生。版本不支持該事件運動結(jié)束比如上面是運動的屬性，必須要擁有屬性才能正常工作。
傳送門
Github地址：https://github.com/AlloyTeam/...
簡介AlloyTouch的本質(zhì)是運動一個數(shù)字，把數(shù)字的物理變化映射到你想映射的任何屬性上。所以帶來了廣泛的應用場景。不論實在應用、游戲、操作系統(tǒng)等許多層面，監(jiān)聽用戶觸摸，給用戶真實的運動反饋是很常見的應用場景。如王者榮耀里，旋轉(zhuǎn)用戶角色，抽獎程序滾動轉(zhuǎn)盤、頁面滾動、局部滾動等。
上面的那些場景，都會使用到下面三種過程之一：
觸摸、運動、減速、停止
觸摸、運動、減速、回彈、停止
觸摸、回彈、停止
上面的運動可以是任何形式，如旋轉(zhuǎn)、平移、zoom等運動形式。當然，在上面過程執(zhí)行的過程中，如果有其他用戶交互介入，會停止當前的過程，繼而反饋用戶新的觸摸手勢。AlloyTouch正是為了解決這類問題而生。同時做到了:
極小的文件大?。ú坏?00行代碼）
與頁面布局無關(guān)
運動屬性無關(guān)，能運動對象字量（如｛x:100｝）
渲染無關(guān)的設(shè)計（dom、canvas、webgl、svg都能使用）
真實的物理運動軌跡
高效的運動方式
極簡的API設(shè)計
安裝npm install alloytouch使用姿勢
new AlloyTouch({
touch:"#wrapper",//反饋觸摸的dom
target: target, //運動的對象
property: "translateY", //被運動的屬性
min: 100, //不必需,運動屬性的最小值,越界會回彈
max: 2000, //不必需,滾動屬性的最大值,越界會回彈
vertical: true,//不必需，默認是true代表監(jiān)聽豎直方向touch
sensitivity: 1,//不必需,觸摸區(qū)域的靈敏度，默認值為1，可以為負數(shù)
factor: 1,//不必需,表示觸摸位移與被運動屬性映射關(guān)系，默認值是1
step: 45,//不必需，用于校正到step的整數(shù)倍
change:function(){ }, //不必需，屬性改變的回調(diào)。alloytouch.css版本不支持該事件
touchStart:function(value){ },
touchMove:function(value){ },
touchEnd:function(value){ },
animationEnd:function(value){ } //運動結(jié)束
})
比如上面是運動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
我們會在第一時間響應你的意見和建議。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/91257.html
摘要：所以制作各種各樣的輪播組件還是得心應手。第一種輪播圖如上圖所示。因為初始值是，所有向左邊滑動一定是負值?？梢缘玫揭欢ㄊ?。可以拿到當前的位置以及當前所處的位置。是運動結(jié)束后的回調(diào)，用來設(shè)置的。 輪播圖也涉及到觸摸和觸摸反饋，同時，AlloyTouch可以把慣性運動打開或者關(guān)閉，并且設(shè)置min和max為運動區(qū)域，超出會自動回彈。除了一般的豎向滾動，AlloyTouch也可以支持橫向滾動，甚...
原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先驗貨 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代碼可以在這里找到。 注意，雖然是掃碼體驗，但是AlloyTouch.FullPag...
閱讀 3492·2022-01-04 14:20
閱讀 3179·2021-09-22 15:08
閱讀 2276·2021-09-03 10:44
閱讀 2367·2019-08-30 15:44
閱讀 1561·2019-08-29 18:40
閱讀 2728·2019-08-29 17:09
閱讀 3058·2019-08-26 13:53
閱讀 3276·2019-08-26 13:37
