一个页面，日均亿人围观，数以百计终端承载；

跳跃指尖，点按触碰拖拽，丝般顺滑，极致体验；

你还在为手势交互开发困扰吗，你还在为碎片化兼容性心塞吗？

去 exp touch 看看：
丰富手势交互封装，完美 demo 尽现。
让我们共同见证，指尖滑起的瞬间。

Martin Garrix 在 TomorrowLand 2017

本文是一篇纯软文，PM、运营、后端、老板、水果大哥、酸奶小妹、保洁阿姨，阅读统统绝无障碍（技术细节文章会令写），底部超多可爱的 gif 图 demos。如果你已经厌倦营销文章的自吹自擂，那么作为前端程序员，以下内容，我想先和你谈谈产品和交互体验。

首先 exp touch 是一个超级 tiny & sexy 的前端手势库，而且 exp touch 要开源啦！这是百度经验前端自研的交互类库。

包含：单点、双击、长摁、拖拽、滑动、旋转等交互；
覆盖：轮播图、抽奖转盘、3D 旋转、捏合缩放、上提（下拉）刷新等 demos；
采用: ES Next 语法以及面向对象思想开发，辅以大量数学计算；
最终：以极致用户体验和高效性能为亮点，横空出世！

Wap VS Native: 天空是否有边际

前端 Wap 开发，不同于我们认知的 Native App。天生决定，我们开发的宿主是浏览器。这个绝好舞台的另一面，隐藏着我们带镣铐起舞的尴尬。没错，我有多爱浏览器，就有多恨浏览器。

尤其是移动端，主流浏览器内核夹杂国产各种山寨，同时安卓和苹果两大手机系统天然鸿沟，种种碎片化导致事件规范不一致，最终成为产品体验的绊脚石。

尤其关于触摸事件，更是一部血泪史。为此，我会另起技术文章分析，这里不在展开。说回产品，直面我们的痛楚：可爱的 PM 童鞋，在设计交互大开脑洞（褒义）的同时，对齐标准完全是 Native App！想想在评审时，wuli 我 PM 总会说： “就是这样，XX App 你用过的吧，你们像 XX App 一样做就可以了！”

真的就可以吗？每次都想以：“你了解 App 和 Wap 的技术实现差别吗？”这种正当的技术理由怼回去，可是转念就压在心里，仅供五脏六腑之间交流。同时理智占据上风，信念控制住马上要抽起藏在抽屉中砍刀的麒麟臂，老老实实把胳膊肘放回到键盘上。

夜深人静时，我也想：“Wap 端真的就不可以实现 Native 那样的触控操作吗？”为此，我遍访了众多 Wap 页面，无奈都是饮恨而归。比如，我从来没有看到过： Wap 端手指捏和缩放图片时，是以手指中心为焦点：图片放大的同时图片自身也进行位移，保持预期中的放大焦点始终在双指中心，不脱离屏幕。如同在微信朋友圈中的图片缩放效果那般自然。可是在 Wap 页上，真的很少有实现！

我一直不甘心，直到这次的百度经验步骤页改版，让我向不可能发起挑战。来，慢慢跟你说。

新版步骤页：拥抱视频化 + 奢华体验升华

你也许没听说过百度经验，但很有可能无意中受益于他。打开搜索引擎，查找方法窍门，常识妙招：步骤化的阅读，左右滑动间，获益匪浅。

经验步骤页

百度经验步骤页是百度经验最重要的页面。无论从 PV、UV 还是变现能力来看，都处在毫无争议的核心地位。这次百度经验步骤页改版，最重要的目的除了拥抱视频化以外，就是打造更加完美、流畅的使用体验。

前端开发，在视频化方面也面临严重的机遇和挑战，由于此文推销主题原因，暂且不表，同样也会有技术文章稍后奉上。这里主要谈谈手势上的交互体验。

负责任地说，我从来没见到过像百度经验步骤页一样，极尽手势掌控之能事，尤其是在天生畸形的浏览器上，我们看看它都实现了什么：

丑图

上图中的文字仅仅涵盖了图片画廊手势交互一部分，各种自适应以及各种物理惰性回弹、缩放摩擦系数、缩放阈值、缓冲区域、回弹系数等等也就不一一列举了。

同时，图片画廊并不是一个新的页面，全部以原页面加遮罩形式出现。你可以理解为 SPA（单页面应用），各种消息交互，手势触控矛盾处理耦合，继续如图：

组件消息通信

单纯的双指缩放其实并不难，你可能也会想到就是二维坐标轴的各种计算罢了。

可是：单击双击时间差如何区分；有角度的滑动算左滑还是右滑；指定元素上 touch move 期间滑动出了手机屏要不要触发 touch end 事件；一根手指和两根手指和多根手指放在不同的元素上要怎么划分？

诸如此类太多逻辑和细节交织，这酸爽足以醉人。再加上隔着浏览器兼容性的壁垒，这都构成 Wap 页面很少有大规模手势操控实现的原因。不信你去找找，Wap 上图片画廊支持切换图片且支持手指中心图片缩放的 case......额，找到有奖，找到源代码？有大奖！

可是这次的步骤页改版，我们偏偏要把这些实现。

新版步骤页和新新版步骤页和新新新新新版步骤页

经过呕心吐血的骚操作，在去年步骤页改版全量上线之后，不管是 PV、UV、还是广告收益都有大幅度上涨。可是改版常年有，难道以后年年折腾一遍？

我选择拒绝，之前的开发心得并没有白积累。我利用周末时间，基于 AlloyTouch 等良心作品，开发了 exp touch 这个百度经验手势库。

它采用 ES Next 完全面向对象，封装了大量必要的计算过程，同时对外暴露出各种贴心的回调。我个人很厌恶功能大而全的 UI 库，限定死了太多内容而无法拓展。因此 exp touch 只进行兼容性处理以及数学计算。同时为了增强可用性和学习成本，基于 exp touch 手势库，我实现了海量 demos，第三方开发者完全可以复制粘贴，分分钟解锁各种姿势。

解锁各种姿势

海量 demo 即插即用

那我们直接看看 Gif 图好咯：

demo: 这是一个简单的滚动。但是不出现滚动条，因为完全不依靠浏览器 scroll，而是根据 touchmove 实时计算 transformY，同时包含了缓冲区域设置：

神奇的滚动

demo: 这是一个常见的移动端轮播图

仿百度经验轮首页播图

demo: 这是一个常见的整屏幕翻动 H5:

H5 Slides

demo: 这是一个信息流展现，包含下拉刷新，和头部动画：

综合 demo

demo: 这是一个 2D 抽奖转盘，手势转动开启；

转盘 demo

demo: 这是一个拖拽：

拖拽 demo

（这些 demos 灵感全部来自 AlloyTeam 团队，照着自己实现了一下，完全参考AlloyTouch 官网，强烈安利 AlloyTouch！！！）

最后几句话

1. 这个库当然还存在一些不完善的地方，大家后续尽可以提 PR，或者当面交流；
2. 极度支持采用 exp touch，玩出更多花样，做出的最终页面欢迎反馈给我；
3. 它将会在新版步骤页上线后正式开源。在此之前，任何有兴趣的，可以与我一起开发。虽然我已经实现了 99%，剩下 1% 给你一个 contributor；
4. 多多关注百度经验，我们是一个小而美的团队；
5. 写这个其实挺没意思的，我更喜欢 React；
6. 前些时间有几家出版社找到我约书，最终我选择和电子工业出版社签订约稿合同，在写一本关于 React 技术栈的书；
7. 如果你对 React 以及出书感兴趣，我已经拉上了厂内外两个大佬，也强烈欢迎你来跟我一起写，出谋划策或者做做校审玩玩；
8. 如果你单纯对 React 技术栈感兴趣，可以关注我的知乎，最近半年不定期在发表一些技术心得（我是来骗粉的）。
9. 同 4；
10. 同上。