Touch.js 百度云的移动设备手势识别与事件库 - 文章教程

Touch.js 百度云的移动设备手势识别与事件库

发布于 2019-12-16 字数 5405 浏览 1824 评论 0

Touch.js 是移动设备上的手势识别与事件库,由百度云 Clouda 团队维护,也是在百度内部广泛使用的开发工具,Touch.js 的代码已托管于 github 并开源,希望能帮助国内更多的开发者学习和开发出优秀的 App 产品。

Touch.js 手势库专为移动设备设计,请在 Webkit 内核浏览器中使用。

特点

  • 无侵入设计,与现有代码与框架共存
  • 原生出色的加速度感知与缓动效果,优秀的单指旋转手势
  • 基于原生事件,支持事件代理,性能更好
  • 极简的 API,秒速上手,玩转手势

安装

极速CDN

<script src="http://code.baidu.com/touch-0.2.14.min.js"></script>

也可以通过下载 Touch.js 的原文件,你可以访问 Touch.js 的 Github 地址获取到完整的文件。

包管理器

Touchjs 已发布至多种包管理器,可以通过以下包管理器来管理 Touchjs:

NPM

  • 安装: npm install touchjs
  • 更新: npm update touchjs
  • 卸载: npm uninstall touchjs

spm

  • 安装: spm install touchjs

Bower

  • 安装: bower install touchjs
  • 更新: bower update touchjs
  • 卸载: bower uninstall touchjs

Component

  • 安装: conponent install brandnewera/touchjs

示例代码

你可以查阅下面的代码看看是如何工作的

//swipe example
touch.on('.target', 'swipeleft swiperight', function(ev){
    console.log("you have done", ev.type);
});

Rotate

利用startRotate, 单指触发滚动事件

//rotation
var angle = 0;
touch.on('#target', 'touchstart', function(ev){
    ev.startRotate();
    ev.preventDefault();
});

touch.on('#target', 'rotate', function(ev){
    var totalAngle = angle + ev.rotation;
    if(ev.fingerStatus === 'end'){
        angle = angle + ev.rotation;
    }
    this.style.webkitTransform = 'rotate(' + totalAngle + 'deg)';
});

Scale

双指放大与缩小目标。

var target = document.getElementById("target");
target.style.webkitTransition = 'all ease 0.05s';

touch.on('#target', 'touchstart', function(ev){
    ev.preventDefault();
});

var initialScale = 1;
var currentScale;

touch.on('#target', 'pinchend', function(ev){
    currentScale = ev.scale - 1;
    currentScale = initialScale + currentScale;
    currentScale = currentScale > 2 ? 2 : currentScale;
    currentScale = currentScale < 1 ? 1 : currentScale;
    this.style.webkitTransform = 'scale(' + currentScale + ')';
    log("当前缩放比例为:" + currentScale + ".");
});

touch.on('#target', 'pinchend', function(ev){
    initialScale = currentScale;
});

Tap & Hold

识别tap、doubletap和hold事件。

touch.on('#target', 'hold tap doubletap', function(ev){
    //console.log(ev.type);
});

Swipe

向左、向右swipe滑动

touch.on('#target', 'touchstart', function(ev){
    ev.preventDefault();
});

var target = document.getElementById("target");
target.style.webkitTransition = 'all ease 0.2s';

touch.on(target, 'swiperight', function(ev){
    this.style.webkitTransform = "translate3d(" + rt + "px,0,0)";
    log("向右滑动.");
});

touch.on(target, 'swipeleft', function(ev){
    log("向左滑动.");
    this.style.webkitTransform = "translate3d(-" + this.offsetLeft + "px,0,0)";
});

Drag

抓取并移动目标

touch.on('#target', 'touchstart', function(ev){
    ev.preventDefault();
});

var target = document.getElementById("target");
var dx, dy;

touch.on('#target', 'drag', function(ev){
    dx = dx || 0;
    dy = dy || 0;
    log("当前x值为:" + dx + ", 当前y值为:" + dy +".");
    var offx = dx + ev.x + "px";
    var offy = dy + ev.y + "px";
    this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)";
});

touch.on('#target', 'dragend', function(ev){
    dx += ev.x;
    dy += ev.y;
});

Touch

当前为原生事件: mousemove

touch.on('#target', 'touchstart touchmove touchend', function(ev){
    console.log(ev.type);
});

版本兼容

与0.2.6及之前的touch.js兼容问题

兼容原因

0.2.6 及之前的 touch.js 不支持事件代理机制,而新的 touch.js 通过手势识别,事件冒泡及原生的事件对象,提供事件代理机制和自定义事件的能力,从而极大提升性能。原有的 stopPropagation 会阻止原生事件冒泡,从而使手势识别失效,因此,需要手动删除/注释 stopPropagation 语句。麻烦各位根据自己项目的实际情况,选择性升级 touch.js。

兼容方法

删除/注释所有绑定中的 stopPropagation 方法

touch.on('#rotation .target', 'touchstart', function(ev){ ev.startRotate();
    ev.originEvent.preventDefault(); 
    //ev.originEvent.stopPropagation();
    //注释掉或者删掉stopPropagation方法
});

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0