|
|
如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里
前言
随着 H 应用的丰富，HTML5 工程师们已经不满足于把桌面端体验简单移植到移动端，他们觊觎移动原生应用人性化的操作体验，特别是原生应用与生俱来的丰富的手势系统。HTML5 没有提供开箱即用的手势系统，但是提供了更底层一些的对 事件的监听。基于此，我们可以做出自己的手势库。
手势
常用的 HTML5 手势可以分为两类，单点手势和两点手势。单点手势有 （单击）， （双击）， （长按），（挥），（移动）。两点手势有 （缩放），（旋转）。
接下来我们实现一个检测这些手势的 S 库，并利用这个手势库做出炫酷的交互效果。
移动
关于移动手势检测我们这里不再赘述。总结一下就是在每次事件发生时，把两个位移点之间的坐标位置相减，就可以了。
单击（）
手势检测的关键是用，， 三个事件对手势进行分解。
那么怎么分解单击事件呢？
在 发生时进入单击检测，只有一个接触点。因为单击事件限制为一个手指的动作。
没有发生 事件或者 在一个很小的范围（如下图）。限制 在一个很小范围，是为了给用户一定的冗余空间，因为不能保证用户手指在接触屏幕的时候不发生轻微的位移。
3 发生在 后的很短时间内（如下图）。这个时间段的阈值是毫秒级，用来限制手指和屏幕接触的时间。因为单击事件从开始到结束是很快的。
有了上面的流程，就可以开始实现 事件监测了。
_T() {D()T();
}
_TS() { 记录开始的位置 X = [0]X; Y = [0]Y; ( 1) { 多点监测
} { 记录开始的时间 T = _T();
}
}
_TM() {
记录手指移动的位置 X = [0]X; Y = [0]Y;
}
_TE() {= _T(); (X !==M(X - X) 10 || Y !==M(Y - Y) 10) {
} { 手指移动的位移要小于10像素并且手指和屏幕的接触时间要短语500毫秒 ( - T 500) { _E('T')
}
}
}
双击（ ）
和单击一样，双击事件也需要我们对手势进行量化分解。
双击事件是一个手指的行为。所以在 时，我们要判断此时屏幕有几个接触点。
双击事件中包含两次独立的单击行为。理想情况下，这两次点击应该落在屏幕上的同一个点上。为了给用户一定的冗余空间，将两次点击的坐标点距离限制在10个像素以内。
双击事件本质是两次快速的单击。也即是说，两次点击的间隔时间很短。通过一定的测试量化后，我们把两次单击的时间间隔设为300毫秒。
注意双击事件中我们检测了相邻两个 事件的位移和时间间隔。
_TS() { ( 1) {
} { (TP) { 两次相邻的之间距离要小于10，同时时间间隔小于300 ( M(X -TPX) 10 M(Y - TPY) 10 M(T - TT) 300) { _E('DT');
}
} 保存上一次的时间和位置信息 TT = T; TP = {
X : X,
Y : Y
};
}
}
长按（ ）
长按应该是最容易分解的手势。我们可以这样分解：在 发生后的很长一段时间内，如果没有发生 或者 事件，那么就触发长按手势。
长按是一个手指的行为，需要检测屏幕上是否只有一个接触点。
如果手指在空间上发生了移动，那么长按事件取消。
如果手指在屏幕上停留的时间超过800，那么触发长按手势。
如果手指在屏幕上停留的时间小于800，也即 在 发生后的800内触发，那么长按事件取消。
_TS() {
T(PT); ( 1) {
} { PT = T(()={ _E('LP');
});
}
}
_TM() {
T(PT);
}
_TE() {
T(PT);
}
缩放（）
缩放是一个非常有趣的手势，还记得第一代P双指缩放图片给你带来的震撼吗？虽然如此，缩放手势的检测却相对简单。
缩放是两个手指的行为，需要检测屏幕上是否有两个接触点。
缩放比例的量化，是通过两次缩放行为之间的距离的比值得到，如下图。
所以缩放的核心是获取两个接触点之间的直线距离。
勾股定理 _D(L,L) { M(L * L + L * L);
}
这里的L是两个接触点坐标差的绝对值，L相应的就是坐标差的绝对值。
_TS() { ( 1) { 1 = [0]; 2 = [1]; L = M(2X - 1X); L = M(2Y - 1Y); D = _D(L, L);
} {
}
}
在_TS函数中获取并且保存 发生时两个接触点之间的距离。
_TM() { ( 1) { L = M([0]X - [1]X); L = M([1]Y - [1]Y); D = _D(L,L); (D) { S = D D; _E('P',{:S - PS}); PS = S;
}
} {
}
}
旋转()
旋转手势需要检测两个比较重要的值，一是旋转的角度，二是旋转的方向（顺时针或逆时针）。
其中旋转角度和方向的计算需要通过向量的计算来获取，本文不再展开。
首先，需要获取向量的旋转方向和角度。
这两个方法属于向量计算，具体原理请阅读本文最后的参考文献 _RD(1,2) { 1 * 2 - 2 * 1;
}
_RA(1,2) {= _RD(1,2);
=0 ? -1 : 1; 1 = _D(1,1); 2 = _D(2,2);= 1 * 2; ( === 0) 0;= 1 * 2 + 1 * 2;=; ( 1) = 1; ( -1) = -1; M() * * 180 MPI;
}
然后，我们在手指发生移动时，调用获取旋转方向和角度的方法。
_TS() {
( 1) { V = {
: 2X - X,
: 2Y - Y
};
}
}
_TM() {
(V) {= {
: [1]X - [0]X,
: [1]Y - [0]Y
};= _RA(,V); _E('R',{
}); V = ; V = ;
}
}
实战
好了，我们的手势系统到这里就完成了。接下来要在实战中检验这套系统是否可靠，做一个简单的图片浏览器，支持图片缩放，旋转，移动，长按。
首先，做好DOM规划，和“之前”一样，我们的事件监听机制并不直接作用在图片上，而是作用在图片的父元素上。
然后，可以开始使用上面的手势检测系统了。
() { ( G P={P} M={M} R={R} DT={DT} LP={LP} N=""  G );
}
由于我们的手势系统检测的增量，因此不能直接把增量应用在对象上，而是需要把这些增量累加。以旋转为例：
R() { 对增量进行累加 += S({
:
});
}
至此，我们的手势检测就完成了。
蓝蓝设计()是一家专注而深入的界面设计，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、界面设计、界面设计、包装设计、图标定制、用户体验、交互设计、建设、平面设计服务
长期以来交通应急软件交互设计就有着不凡的发展速度，相信未来也是一如既往，势如破竹。北京兰亭妙微（蓝蓝设计）是一家专注而卓越的UI界面设计公司,以良好的服务为众多优秀企业提供卓越的UI咨询、竞品分析、交互设计、UI界面设计、大数据可视化设计、嵌入式软件界面设计开发、图标icon设计、大型网站设计、用户体验设计、软件开发....是一家从用户研究、交互设计及优化咨询、软件和网站设计、界面开发实施全方位提供解决方案的创新型设计公司。http://www.lanlanwork.com
|
|
发表于 