移动开发框架剖析(二) Hammer专业的手势控制

简介:

浏览器底层并没有给元素提供类似,单击,双击,滑动,拖动这些直接可以用的控制接口,一切的手势动作都只能通过模拟出来。移动端浏览器唯一给我们提供的就只是mousedown -> mousemove -> mouseup三种最基本的事件接口。那么我们只能通过这些简单的接口模拟出复杂的手势出来。

常规的做法流程:

1.给元素上绑定三个事件,mousedown ,mousemove,mouseup

2.在交互的时候,用户只触发mousedown,mouseup没有触发mousemove,就可以单算是一次点击的动作, 这里可以是 单击,双击与长按,具体可以通过间隔的时间判断

3.如果mousemove触发了,自然就是滑动与拖动了

当然手势还要涉及到多点操作缩放与旋转的处理,就之后在讨论。

 


先抛开流程,我们要知道设计一个手势库需要考虑的问题,至少有2点:

1.运行的平台

2.用户的手势

 

那么我们可以总结市面上的终端设备有那么三种:

1 手机/pad移动端

2 pc类

3 还有种带触摸屏的电脑一类

 

用户的手势行为大体分:

单击tap , 双击doubletap,平移pan,滑动swipe,长按press,缩放pinch,旋转rotate

 


从设计的角度来讲,有着不同的兼容与选择问题,却又有着一些相同的共性与处理我们要如何去组织结构?

当然依旧是OOP设计了,抽出父类,实现继承,引入策略模式

我们看看Hammer在结构上是如何实现这类设计的

常规来说手势的处理,要分为初始化与执行期。初始化的时候构建所有相关的参与与方法

hammer源码里面分几大块:

1. Hammer类,一个简单的工厂方法,用来创建一个管理和初始化默认的识别器。Hammer.defaults配置一些基本的选项

包括针对每种识别器的配置与元素CSS属性的设置

2. Manager类,整个库的管理类。内部初始化了input输入对象,所有手势对象,元素css设置对象touchAction

3. InputHandler类,事件回调的具体加工类,用来生成包装后的事件对象与派发事件到每一个识别器

4. TouchAction类,设置元素的touchAction属性

5. Input类,事件处理类。用来处理绑定与销毁,事件句柄的回调。每一个输入类都需要继承

6. Recognizer类,所有识别器需要继承的基类

以上就是整个库的类块了,当然5与6都是属于基类继承的,在代码运行的时候就自动构建完毕了

 


关于继承inherit方法

hammer用的是传统的类似继承

复制代码
function inherit(child, base, properties) {
    var baseP = base.prototype,
        childP;

    childP = child.prototype = Object.create(baseP);
    childP.constructor = child;
    childP._super = baseP;

    if (properties) {
        extend(childP, properties);
    }
}
复制代码

只继承了原型的方法,因为原型都是共享的,如果放置属性可以被任何一个继承的子类所有修改,所以属性的继承需要用call方法

继承的子类有一个私有属性 _super指向父类,同时还能额外的扩展方法

inherit(MouseInput, Input, {
     handler: function MEhandler(ev){
    }
}

子类MouseInput继承父类Input类的所有原型方法,并扩展了handler方法

 


输入设备初始化继承:就是通过什么设备触发动作(PC,手机,ipad等等)

输入设备hammer分为

MouseInput,PointerEventInput,SingleTouchInput,TouchInput,TouchMouseInput

我们看看最简单的桌面PC的鼠标输入处理MouseInput,其余的结构基本类似。

复制代码
function MouseInput() {
    this.evEl = MOUSE_ELEMENT_EVENTS;
    this.evWin = MOUSE_WINDOW_EVENTS;
    //用来禁止TouchMouse事件
    this.allow = true; // used by Input.TouchMouse to disable mouse events
    //鼠标按下的状态
    this.pressed = false; // mousedown state
    Input.apply(this, arguments);
}

inherit(MouseInput, Input, {
     handler: function MEhandler(ev){
       ..//////////////
    }
}
复制代码

MouseInput初始化了几个必要的判断属性,然后就只handler方法, 此外还集成了Input输入类

比如我们调用

new MouseInput(callback)的时候,通过Input.apply(this, arguments)去初始化了基类input类,然后基类内部的init绑定了事件,并且把事件的回调,

this.domHandler指向了外部的callback回调,其实也就是handler方法了

addEventListeners(this.element, this.evEl, this.domHandler);

 

另一个基类就是Recognizer

因为我们把用户的行为分为单击tap , 双击doubletap,平移pan,滑动swipe,长按press,缩放pinch,旋转rotate,那么类似相同点我们也必须抽象成一个基类

Recognizer比如复杂,留在执行期的时候讲解。

 


Hammer 使用:

var mc = new Hammer(el);

那么内部的构建

复制代码
function Hammer(element, options) {
    options = options || {};
    //配置手势识别器参数
    options.recognizers = ifUndefined(options.recognizers, Hammer.defaults.preset);
    return new Manager(element, options);
}
复制代码

可见最终是Manager构建的对象实例了

Manager内部,通过createInputInstance创建一个输入环境的实例对象,创建一个输入环境的实例对象

this.input = createInputInstance(this);

createInputInstance的作用主要是用来选择当然的平台,不同的平台会调用不同的手势输入处理,这里就有策略选择了的处理了

复制代码
function createInputInstance(manager) {
    var Type;
    var inputClass = manager.options.inputClass;

    if (inputClass) {
        Type = inputClass;
    } else if (SUPPORT_POINTER_EVENTS) {
        Type = PointerEventInput;
    } else if (SUPPORT_ONLY_TOUCH) {
        Type = TouchInput; //移动手机端
    } else if (!SUPPORT_TOUCH) {
        Type = MouseInput; //桌面
    } else {
        Type = TouchMouseInput;
    }
}
复制代码

如果是桌面PC端,我们就会走MouseInput

return new MouseInput(manager, inputHandler);

这样把具体的通过Input类绑定的回调放到MouseInput的handler处理了,最终的回调会进入总处理inputHandler类

inputHandler类就会遍历所有的手势识别器把输入的input传入

manager.recognize(input);

每一个识别器各自处理其行为了,当然这里面倒是如何触发,手势识别器如何判断是那种手势,就放一章了。

 

本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/p/4029304.html,如需转载请自行联系原作者

相关文章
|
27天前
|
前端开发 JavaScript C#
移动应用开发中的跨平台框架解析
【9月更文挑战第5天】在移动应用开发领域,跨平台框架因其“一次编写,处处运行”的便利性而受到开发者的青睐。本文将深入探讨几种流行的跨平台框架,包括React Native、Flutter和Xamarin,并比较它们的优势与局限。我们将通过代码示例揭示这些框架如何简化移动应用的开发过程,同时保持高性能和良好的用户体验。无论你是新手还是有经验的开发者,这篇文章都将成为你了解和选择跨平台框架的宝贵资源。
50 19
|
24天前
|
人工智能 开发框架 搜索推荐
移动应用开发的未来:跨平台框架与AI的融合
在移动互联网飞速发展的今天,移动应用开发已成为技术革新的前沿阵地。本文将探讨跨平台框架的兴起,以及人工智能技术如何与移动应用开发相结合,从而引领行业走向更加智能化、高效化的未来。文章通过分析当前流行的跨平台开发工具和AI技术的应用实例,为读者提供对未来移动应用开发的独到见解和预测。
47 3
|
25天前
|
开发框架 前端开发 Android开发
移动应用开发的演变:从原生到跨平台框架
在数字化时代,移动应用已成为我们日常生活不可或缺的一部分。随着技术的不断演进,移动应用开发也经历了从原生开发到跨平台框架的变革。本文将探讨这一演变过程,分析不同开发模式的优势与挑战,并展望未来移动应用开发的发展趋势。
|
2月前
|
Dart API 开发者
探索移动应用开发的未来:跨平台框架与原生系统的协同
【8月更文挑战第27天】在移动应用的宇宙中,跨平台框架如同星辰般璀璨,它们承诺着高效、统一的开发体验。然而,在这耀眼的光芒下,原生系统的细节和深度却往往被忽视。本文将深入探讨跨平台框架与原生系统之间的微妙平衡,揭示如何在追求效率的同时保持对原生特性的尊重和利用。通过分析Flutter等框架的案例,我们将一窥未来移动应用开发的可能路径,并理解为何在跨平台的光辉下,原生系统的价值依然不减。
|
24天前
|
人工智能 开发框架 前端开发
移动应用开发的未来:探索跨平台框架与AI的融合
随着智能手机的普及和移动技术的飞速发展,移动应用已成为我们日常生活的一部分。本文将探讨移动应用开发的最新趋势,特别是跨平台开发框架的兴起和人工智能技术的结合如何塑造未来移动应用的发展方向。我们将从React Native和Flutter等流行框架谈起,分析它们如何简化开发流程、降低成本并提高应用性能。同时,本文也将深入讨论人工智能如何在用户体验、安全性和个性化服务方面为移动应用带来革命性的变化。最后,我们将展望未来移动应用开发的新机遇和挑战。
22 0
|
2月前
|
前端开发 Android开发 开发者
移动应用开发的未来:跨平台框架与原生开发的较量
在数字时代的浪潮中,移动应用已成为我们日常生活不可或缺的一部分。随着技术的进步和用户需求的多样化,开发者面临着选择何种开发模式以满足市场的挑战。本文将深入探讨移动应用开发领域中的两大阵营——跨平台框架与原生开发,通过比较它们的优势与局限,揭示未来移动应用开发的趋势和挑战。
72 1
|
28天前
|
开发框架 缓存 前端开发
移动应用开发的未来趋势:跨平台框架与性能优化
随着智能手机的普及和移动计算能力的提升,移动应用开发正迎来前所未有的机遇与挑战。本文将探讨移动应用开发的最新趋势,重点分析跨平台开发框架的兴起以及开发者如何通过性能优化来满足用户对高质量移动体验的需求。我们将从技术角度出发,深入讨论Flutter、React Native等热门框架的优势与局限,并分享实用的性能优化技巧,旨在为移动应用开发者提供有价值的参考和启示。
|
2月前
|
开发框架 前端开发 JavaScript
探索移动应用开发的未来:跨平台框架的兴起
【8月更文挑战第10天】随着智能手机用户数量的激增,移动应用市场呈现出前所未有的繁荣。开发者面临着如何在多个操作系统上高效、快速地部署应用的挑战。跨平台开发框架应运而生,它们承诺能够简化开发过程,减少成本,并加速产品上市时间。本文将探讨跨平台框架的发展,分析其对移动应用开发生态的影响,并预测未来的发展趋势。
|
2月前
|
开发者 C# Android开发
Xamarin 与 .NET:解锁现代化移动应用开发的超级武器——深入探讨C#与.NET框架如何赋能跨平台应用,实现高效编码与卓越性能
【8月更文挑战第31天】Xamarin 与 .NET 的结合为开发者提供了强大的平台,用于构建现代化移动应用。通过 C# 和 .NET 框架,Xamarin 可以实现一次编写、多平台运行,覆盖 iOS、Android 和 Windows。这种方式不仅节省了开发时间和成本,还保证了应用的一致性和高质量。Xamarin 是一个开源框架,专为跨平台移动应用开发设计,允许使用 C# 语言和 .NET 核心库构建原生应用,并访问各平台特定功能。微软维护的 Xamarin 是 Visual Studio 生态系统的一部分,极大地提高了开发效率。
61 0
|
2月前
|
移动开发 开发框架 前端开发
移动应用开发中的跨平台框架选择与实践
【8月更文挑战第31天】随着移动设备的普及,移动应用开发成为了软件开发领域的一大热点。面对iOS和Android两大操作系统,开发者常常面临一个选择:是专注于单一平台还是寻求跨平台的解决方案?本文将探讨几种流行的跨平台移动应用开发框架,并通过一个简单的代码示例来展示如何使用这些框架进行开发。我们将从技术角度出发,对比不同框架的优劣,并给出一些实用的建议。

热门文章

最新文章

下一篇
无影云桌面