alloyTouch这个库其实可以做很多事的, 比较抽象, 需要我们用户好好的思考作者提供的实例属性和一些回调方法(touchStart,
change, touchMove, pressMove, tap, touchEnd, touchCancel, reboundEnd, animationEnd, correctionEnd).
哇, 提供了这么多回调啊, 因为我也刚玩，用到的不多。
change回调很常用(比如上拉，下拉刷新要用到),配合touchStart, animationEnd等,看需求吧
touchEnd, animationEnd(写轮播用到)。
因为我也刚用, 暂时没怎么研究其他回调的用法,但是我都在源码中标记了什麽时候触发回调的。
原理说明:
alloyTouch库其实是一个数字运动的库,我再看源码时，看见源码里_end()中计算各种比值和目标值,目的就是让dom在什么时间内运动到什么目标值。
当然对外也提供了to方法,让dom运动到用户指定的目标值。具体看源码注释。
源码笔记：
由于demo没全看完，所以有的注释理解的不太到位。有问题，欢迎指正。
/* AlloyTouch v0.2.1
* By AlloyTeam http://www.alloyteam.com/
* Github: https://github.com/AlloyTeam/AlloyTouch
* MIT Licensed.
* Sorrow.X --- 添加注释,注释纯属个人理解
*/ // 兼容不支持requestAnimationFrame的浏览器
;(function () {
'use strict'; if (!Date.now)
Date.now = function () { return new Date().getTime(); }; var vendors = ['webkit', 'moz'];
for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
var vp = vendors[i];
window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
window.cancelAnimationFrame = (window[vp + 'CancelAnimationFrame']
|| window[vp + 'CancelRequestAnimationFrame']);
}
if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
|| !window.requestAnimationFrame || !window.cancelAnimationFrame) {
var lastTime = 0;
window.requestAnimationFrame = function (callback) {
var now = Date.now();
var nextTime = Math.max(lastTime + 16, now);
return setTimeout(function () { callback(lastTime = nextTime); },
nextTime - now);
};
window.cancelAnimationFrame = clearTimeout;
}
}()); (function () { // 给元素绑定事件, 默认冒泡
function bind(element, type, callback) {
element.addEventListener(type, callback, false);
}; // 三次贝塞尔
function ease(x) {
return Math.sqrt(1 - Math.pow(x - 1, 2));
}; // 相反的三次贝塞尔
function reverseEase(y) {
return 1 - Math.sqrt(1 - y * y);
}; // INPUT|TEXTAREA|BUTTON|SELECT这几个标签就不用阻止默认事件了
function preventDefaultTest(el, exceptions) {
for (var i in exceptions) {
if (exceptions[i].test(el[i])) {
return true;
};
};
return false;
}; var AlloyTouch = function (option) { this.element = typeof option.touch === "string" ? document.querySelector(option.touch) : option.touch; // 反馈触摸的dom
this.target = this._getValue(option.target, this.element); // 运动的对象
this.vertical = this._getValue(option.vertical, true); // 不必需，默认是true代表监听竖直方向touch
this.property = option.property; // 被滚动的属性
this.tickID = 0; this.initialValue = this._getValue(option.initialValue, this.target[this.property]); // 被运动的属性的初始值,默认从Transform原始属性拿值
this.target[this.property] = this.initialValue; // 给运动的属性赋值
this.fixed = this._getValue(option.fixed, false);
this.sensitivity = this._getValue(option.sensitivity, 1); // 默认是1, 灵敏度
this.moveFactor = this._getValue(option.moveFactor, 1); // move时的运动系数
this.factor = this._getValue(option.factor, 1); // 系数
this.outFactor = this._getValue(option.outFactor, 0.3); // 外部系数
this.min = option.min; // 不必需,滚动属性的最小值,越界会回弹
this.max = option.max; // 不必需,运动属性的最大值,越界会回弹, 一般为0
this.deceleration = 0.0006; // 减速系数
this.maxRegion = this._getValue(option.maxRegion, 600); // 最大区域, 默认60
this.springMaxRegion = this._getValue(option.springMaxRegion, 60); // 弹动的最大值区域, 默认60
this.maxSpeed = option.maxSpeed; // 最大速度
this.hasMaxSpeed = !(this.maxSpeed === undefined); // 是否有最大速度属性
this.lockDirection = this._getValue(option.lockDirection, true); // 锁定方向 var noop = function () { }; // 空函数
this.touchStart = option.touchStart || noop;
this.change = option.change || noop;
this.touchMove = option.touchMove || noop;
this.pressMove = option.pressMove || noop;
this.tap = option.tap || noop;
this.touchEnd = option.touchEnd || noop;
this.touchCancel = option.touchCancel || noop;
this.reboundEnd = option.reboundEnd || noop; // 回弹回调
this.animationEnd = option.animationEnd || noop;
this.correctionEnd = option.correctionEnd || noop; // 修改回调 this.preventDefault = this._getValue(option.preventDefault, true); // 默认是true,是否阻止默认事件
this.preventDefaultException = { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }; // 这几个tag标签,阻止默认事件例外
this.hasMin = !(this.min === undefined); // 是否有min,和max属性
this.hasMax = !(this.max === undefined);
if (this.hasMin && this.hasMax && this.min > this.max) { // 最小值不能比最大值大啊
throw "the min value can't be greater than the max value."
};
this.isTouchStart = false; // 触摸是否开始
this.step = option.step; // 步数(回弹)
this.inertia = this._getValue(option.inertia, true); // 默认true,开启惯性效果 this._calculateIndex(); // 添加this.currentPage属性,如果写轮播的话 this.eventTarget = window;
if(option.bindSelf){
this.eventTarget = this.element; // 默认touchmove, touchend, touchcancel绑定在 window 上的, 如果option.bindSelf为真值,则绑定到反馈触摸的dom
}; this._moveHandler = this._move.bind(this); // 函数赋值
// 反馈触摸的dom只绑定了touchstart(_start), window绑定了 touchmove(_move), touchend(_end), touchcancel(_cancel)方法
bind(this.element, "touchstart", this._start.bind(this));
bind(this.eventTarget, "touchend", this._end.bind(this));
bind(this.eventTarget, "touchcancel", this._cancel.bind(this));
this.eventTarget.addEventListener("touchmove", this._moveHandler, { passive: false, capture: false }); // 使用 passive 改善的滚屏性能
this.x1 = this.x2 = this.y1 = this.y2 = null; // start时的坐标和move时的坐标
}; AlloyTouch.prototype = {
_getValue: function (obj, defaultValue) { // 取用户的值还是使用默认值
return obj === undefined ? defaultValue : obj;
},
_start: function (evt) {
this.isTouchStart = true; // 触摸开始
this.touchStart.call(this, evt, this.target[this.property]); // (1. touchStart(evt, propValue)回调)
cancelAnimationFrame(this.tickID); // 只要触摸就停止动画
this._calculateIndex(); // 重新计算this.currentPage属性值
this.startTime = new Date().getTime(); // 开始的时间戳
this.x1 = this.preX = evt.touches[0].pageX; // 开始前的坐标保存到x,y 和 preXY去
this.y1 = this.preY = evt.touches[0].pageY;
this.start = this.vertical ? this.preY : this.preX; // 如果监听竖直方向则取y坐标,否则横向方向取x坐标
this._firstTouchMove = true; // 开始move(这个条件为_move做铺垫)
this._preventMove = false; // 不阻止dom继续运动(开启惯性运动之旅的条件之一 哈哈)
},
_move: function (evt) {
if (this.isTouchStart) { // 触摸开始了
var len = evt.touches.length, // 手指数量
currentX = evt.touches[0].pageX, // move时的坐标
currentY = evt.touches[0].pageY; if (this._firstTouchMove && this.lockDirection) { // 开始move 且 锁定方向
var dDis = Math.abs(currentX - this.x1) - Math.abs(currentY - this.y1); // 是左右滑动还是上下滑动(x>y为水平, y>x为竖直)
if (dDis > 0 && this.vertical) { // 左右滑动 且 监听竖直方向
this._preventMove = true; // 阻止dom继续运动
} else if (dDis < 0 && !this.vertical) { // 竖直滑动 且 监听横向方向
this._preventMove = true;
}; // 以上2种情况直接不开启惯性运动之旅(因为左右滑动的话this.vertical需为false,竖直滑动的话this.vertical需为true)
this._firstTouchMove = false; // 变成false, 为了手指连续移动中,此方法就不用进来了
};
if(!this._preventMove) { // move时 属性运动(关闭惯性运动后, 其实只有此运动了, 手指移动才会运动, 离开则不会运动了) var d = (this.vertical ? currentY - this.preY : currentX - this.preX) * this.sensitivity; // 根据竖直还是左右来确定差值 * 灵敏度
var f = this.moveFactor; // 变量f的值为 move时的运动系数(默认1)
if (this.hasMax && this.target[this.property] > this.max && d > 0) { // 有最大值 且 运动属性值>最大值 且 坐标差值d>0
f = this.outFactor;
} else if (this.hasMin && this.target[this.property] < this.min && d < 0) { // 有最小值 且 运动属性值<最小值 且 坐标差值d<0
f = this.outFactor; // 满足以上2中条件 变量f 的值就变成 this.outFactor(默认0.3)
};
d *= f; // 坐标差值再乘以运动系数
this.preX = currentX; // 把move时的坐标保存到preXY去
this.preY = currentY;
if (!this.fixed) { // this.fixed默认false(fixed一旦固定了,move时, dom也不会运动)
this.target[this.property] += d; //把坐标的差值且乘以运动系数后的结果累加给运动的对象(被transform.js加工后的dom对象)
// console.log('_move: ' + this.target[this.property]);
};
this.change.call(this, this.target[this.property]); // (2. move时的change(evt, propValue)回调)
var timestamp = new Date().getTime(); // move时的时间戳
if (timestamp - this.startTime > 300) { // move时的时间戳和start时的时间戳大于300的话
this.startTime = timestamp; // move时的时间戳赋值给start时的时间戳
this.start = this.vertical ? this.preY : this.preX; // 重新计算this.start值
};
this.touchMove.call(this, evt, this.target[this.property]); // (3. touchMove(evt, propValue)回调)
}; if (this.preventDefault && !preventDefaultTest(evt.target, this.preventDefaultException)) { //阻止默认事件除了INPUT|TEXTAREA|BUTTON|SELECT这几个标签
evt.preventDefault();
}; if (len === 1) { // 一根手指
if (this.x2 !== null) { //一开始为null
evt.deltaX = currentX - this.x2; // move移动时的差值
evt.deltaY = currentY - this.y2; } else {
evt.deltaX = 0; // 一开始差值为0啦
evt.deltaY = 0;
}
this.pressMove.call(this, evt, this.target[this.property]); // (4. pressMove(evt, propValue)回调)
}
this.x2 = currentX; //把本次坐标赋值给x2,y2
this.y2 = currentY;
}
},
_end: function (evt) {
if (this.isTouchStart) { // 触摸开始了 this.isTouchStart = false; // 触摸开始变量置为false(_move方法进不去了)
var self = this, // 存个实例
current = this.target[this.property], // 当前运动对象的运动属性的值
triggerTap = (Math.abs(evt.changedTouches[0].pageX - this.x1) < 30 && Math.abs(evt.changedTouches[0].pageY - this.y1) < 30); // 是否触发tap事件回调
if (triggerTap) { // 触发tap事件
this.tap.call(this, evt, current); // (5. tap(evt, propValue)回调)
}; if (this.touchEnd.call(this, evt, current, this.currentPage) === false) return; // (6. touchEnd(evt, propValue, 当前第几页)回调)这个主要给轮播用的吧 if (this.hasMax && current > this.max) { // 有最大值 且 当前运动对象的运动属性的值大于最大值 this._to(this.max, 200, ease, this.change, function (value) { // (最大小值, time, 曲线, change函数, fn)
this.reboundEnd.call(this, value);
this.animationEnd.call(this, value);
}.bind(this)); } else if (this.hasMin && current < this.min) { // 有最小值 且 当前运动对象的运动属性的值小于最小值 this._to(this.min, 200, ease, this.change, function (value) {
this.reboundEnd.call(this, value);
this.animationEnd.call(this, value);
}.bind(this)); } else if (this.inertia && !triggerTap && !this._preventMove) { // 开启惯性效果(默认为true) 且 不触发tap事件 且 this._preventMove为false; var dt = new Date().getTime() - this.startTime; // _end时的时间戳和_move时的时间戳的差值
if (dt < 300) { // 小于300ms就执行惯性运动
var distance = ((this.vertical ? evt.changedTouches[0].pageY : evt.changedTouches[0].pageX) - this.start) * this.sensitivity, // _end中的坐标与_move中坐标的差值乘以灵敏度
speed = Math.abs(distance) / dt, // 速度为坐标差值/时间戳差值
speed2 = this.factor * speed; // 速度2为 系数(默认1)乘以速度
if(this.hasMaxSpeed && speed2 > this.maxSpeed) { // 有最大速度 且 速度2大于最大速度
speed2 = this.maxSpeed; // 速度2就为最大速度
}; // 目标值destination = 当前运动对象的运动属性的值 + (速度2*速度2)/(2*减速系数)*(-1||1);
var destination = current + (speed2 * speed2) / (2 * this.deceleration) * (distance < 0 ? -1 : 1);
// console.log('distance： '+ distance);
// console.log('目标值destination： '+ destination);
// console.log('差值： '+ destination > current); var tRatio = 1; // 比例
if (destination < this.min ) { // 目标值 比 最小值 小
if (destination < this.min - this.maxRegion) {
tRatio = reverseEase((current - this.min + this.springMaxRegion) / (current - destination));
destination = this.min - this.springMaxRegion;
} else {
tRatio = reverseEase((current - this.min + this.springMaxRegion * (this.min - destination) / this.maxRegion) / (current - destination));
destination = this.min - this.springMaxRegion * (this.min - destination) / this.maxRegion;
}
} else if (destination > this.max) { // 目标值 比 最大值 大
if (destination > this.max + this.maxRegion) {
tRatio = reverseEase((this.max + this.springMaxRegion - current) / (destination - current));
destination = this.max + this.springMaxRegion;
} else {
tRatio = reverseEase((this.max + this.springMaxRegion * ( destination-this.max) / this.maxRegion - current) / (destination - current));
destination = this.max + this.springMaxRegion * (destination - this.max) / this.maxRegion; }
}; // 持续时间duration = 数字舍入(速度/减速系数) * 比例;
var duration = Math.round(speed / self.deceleration) * tRatio;
// console.log('持续时间duration: ' + duration); // end方法计算好的目标值和持续时间传入_to方法,运动起来吧
self._to(Math.round(destination), duration, ease, self.change, function (value) { // 回调函数的value 就是 destination if (self.hasMax && self.target[self.property] > self.max) { // 有最大值 且 运动属性的值大于最大值 cancelAnimationFrame(self.tickID);
self._to(self.max, 600, ease, self.change, self.animationEnd); } else if (self.hasMin && self.target[self.property] < self.min) { // 有最小值 且 运动属性的值小于最小值 cancelAnimationFrame(self.tickID);
self._to(self.min, 600, ease, self.change, self.animationEnd); } else {
self._correction(); // 回弹
}; self.change.call(this, value); // (7. change(运动属性的值)回调函数)
});
} else {
self._correction(); // 回弹
}
} else {
self._correction(); // 回弹
}; // 阻止默认事件
if (this.preventDefault && !preventDefaultTest(evt.target, this.preventDefaultException)) {
evt.preventDefault();
}; };
// 坐标置null
this.x1 = this.x2 = this.y1 = this.y2 = null;
},
// 提供目标值, 持续时间, 然后根据时间戳和time持续时间的差值比较, 时间戳< time的话就一直调用动画,否则结束
_to: function (value, time, ease, onChange, onEnd) { // value:目标值, time:持续时间, ease: 曲线动画, onChange: this.change回调函数(用户的), onEnd回调
if (this.fixed) return; // fixed(默认false)有真值就return掉
var el = this.target, // 运动的对象
property = this.property; // 运动的属性
var current = el[property]; // 运动对象运动属性当前的值
var dv = value - current; // 目标值与当前属性的差值
var beginTime = new Date(); // 开始时间戳
var self = this; // 存个实例
var toTick = function () { var dt = new Date() - beginTime; // 时间戳差值
if (dt >= time) { // 时间戳差值大于持续时间
el[property] = value; // 把目标值赋值给dom属性
onChange && onChange.call(self, value); // (7. change(目标值)回调函数)
onEnd && onEnd.call(self, value); // onEnd回调
return;
};
el[property] = dv * ease(dt / time) + current;
// console.log(el[property]);
self.tickID = requestAnimationFrame(toTick); // 动画自调用
onChange && onChange.call(self, el[property]); //(7. change(属性值)回调函数)
};
toTick(); // 调用
},
// 该函数用来当动画完成后根据this.step修正一点(回弹效果)
_correction: function () {
if (this.step === undefined) return; // step没赋值的话就return掉
var el = this.target, // 运动的对象
property = this.property; // 运动对象的运动属性
var value = el[property]; // 运动对象运动属性的值
var rpt = Math.floor(Math.abs(value / this.step)); // 向下取整(取绝对值(运动对象运动属性的值/ this.step值))
var dy = value % this.step; // 运动对象运动属性的值取余数 if (Math.abs(dy) > this.step / 2) { // 我想这里又应用了啥物理原理根据条件判断,来计算value目标值的,然后调用_to方法执行惯性运动
this._to((value < 0 ? -1 : 1) * (rpt + 1) * this.step, 400, ease, this.change, function (value) {
this._calculateIndex();
this.correctionEnd.call(this, value);
this.animationEnd.call(this, value);
}.bind(this));
} else {
this._to((value < 0 ? -1 : 1) * rpt * this.step, 400, ease, this.change, function (value) {
this._calculateIndex(); // 重新计算this.currentPage值
this.correctionEnd.call(this, value); // (8. correctionEnd(属性值)回调函数)
this.animationEnd.call(this, value); // (9. animationEnd(属性值)回调函数)
}.bind(this));
}
},
_cancel: function (evt) {
var current = this.target[this.property];
this.touchCancel.call(this, evt, current);
this._end(evt);
},
// 给用户使用的, 控制dom以不同的曲线动画运动
to: function (v, time, user_ease) {
this._to(v, this._getValue(time, 600), user_ease || ease, this.change, function (value) {
this._calculateIndex();
this.reboundEnd.call(this, value); // (10. reboundEnd(属性值)回调函数)
this.animationEnd.call(this, value); // (9. animationEnd(属性值)回调函数)
}.bind(this)); },
// 计算this.currentPage值
_calculateIndex: function () {
if (this.hasMax && this.hasMin) {
this.currentPage = Math.round((this.max - this.target[this.property]) / this.step); // 当前第几页,比如轮播图的第几个,从0开始
}
} }; // 抛出去
if (typeof module !== 'undefined' && typeof exports === 'object') {
module.exports = AlloyTouch;
} else {
window.AlloyTouch = AlloyTouch;
}; })();
使用姿势：(由于此库比较抽象，使用姿势需要根据需求来使用，以下提供了3个demo的使用姿势，基本差不多，可以用手机扫二维码看看(由于编写html页面时，没考虑手机屏幕的适应，所以凑合这点吧，哈哈))
// es5 语法
// 列表加载更多
var List = function() {
this.list_Target = document.querySelector("#list_target");
this.Ul = this.list_Target.children[0];
this.oList = document.querySelector("#list");
//给element注入transform属性
Transform(this.list_Target); this.at = null;
this.loading = false;
this.index = 21;
}; Object.assign(List.prototype, {
init: function() {
var self = this;
this.at = new AlloyTouch({
touch: '#list',//反馈触摸的dom
vertical: true,//不必需，默认是true代表监听竖直方向touch
target: this.list_Target, //运动的对象
property: "translateY", //被滚动的属性
factor: 1,//不必需,默认值是1代表touch区域的1px的对应target.y的1
inertia: true,
min: this.oList.offsetHeight - this.list_Target.offsetHeight, //不必需,滚动属性的最小值
max: 0, //不必需,滚动属性的最大值
step: 2,
touchStart: function() {
self.getMin();
},
change: function(v) {
// console.log(v);
if (v < this.min && !self.loading) {
self.loading = true;
self.loadMore();
};
}
});
},
getMin: function() {
this.at.min = -parseInt(getComputedStyle(this.list_Target).height) + this.oList.offsetHeight;
},
loadMore: function() {
setTimeout(function() {
this.loading = false;
var Oli = null,
i = 0,
len = 20; for (; i < len; i ++) {
this.index += 1;
Oli = document.createElement('li');
Oli.innerHTML = this.index;
this.Ul.appendChild(Oli); // 这里测试，不推荐这么写啊, 太消耗性能了
}; this.getMin();
}.bind(this), 500);
}
}); new List().init(); // es6 语法
/*let flower = (new class {
constructor() {
this.at = null;
this.target = this.$('testImg');
Transform(this.target);
} $(id) {
return document.querySelector('#' + id);
} init() {
this.at = new AlloyTouch({
touch: this.target,//反馈触摸的dom
vertical: false,//不必需，默认是true代表监听竖直方向touch
target: this.target, //运动的对象
property: "rotateY", //被滚动的属性
factor: 1,//不必需,默认值是1代表touch区域的1px的对应target.y的1
inertia: true,
step: 100
});
}
}).init();*/ // 花朵
var flower = function() { var target = $('testImg');
Transform(target); function $(id) {
return document.querySelector('#' + id);
}; return function() {
return new AlloyTouch({
touch: target,//反馈触摸的dom
vertical: false,//不必需，默认是true代表监听竖直方向touch
target: target, //运动的对象
property: "rotateY", //被滚动的属性
factor: 1,//不必需,默认值是1代表touch区域的1px的对应target.y的1
inertia: true,
step: 100
});
};
}()(); // 轮播
var carousel = function() {
var scroller = document.querySelector('#carousel_scroller');
Transform(scroller);
var aA = document.querySelectorAll('#nav a');
var at = null;
var tickId = null; function init() {
at = new AlloyTouch({
touch: '#carousel_container',
target: scroller,
vertical: false,
property: 'translateX',
step: window.innerWidth,
max: 0,
min: - window.innerWidth * 3,
touchStart: function() {
clearInterval(tickId);
},
touchEnd: function(evt, v, index) {
var value = -(this.step * index);
var dt = v - value;
console.log(dt); if (v > this.max) { // 属性值大于最大值取最大值
this.to(this.max);
} else if (v < this.min) { // 属性值小于最小值取最小值
this.to(this.min);
} else if (Math.abs(dt) < 30) { // 2边空隙小于30就回到当前值
this.to(value);
} else if (dt > 0) { // 大于0往右边滚动一个
this.to(value + this.step);
} else { // 小于0就往左边滚动一个
this.to(value - this.step);
};
loop();
return false;
},
animationEnd: function(evt, v) {
Array.prototype.slice.call(aA).forEach(function(item, index) {
item.className = '';
});
aA[this.currentPage].className = 'active';
}
});
}; // 循环播放
function loop() {
tickId = setInterval(function() {
this.currentPage += 1;
if (this.currentPage > 3) {
this.currentPage = 0;
};
this.to(-(this.currentPage * this.step));
}.bind(at), 2000);
}; return {
init: init,
loop: loop
};
}();
carousel.init();
carousel.loop();
我觉得还是用手机体验一把alloyTouch的灵活和强大吧，手机对准扫一扫吧。
3个关于alloyTouch的小demo。
更多demo，请去github看看。
ps:
此库还是很有用的，很喜欢。
github: https://github.com/AlloyTeam/AlloyTouch