移动 Web 触摸与运动解决方案 AlloyTouch 开源啦
传送门
Github地址:https://github.com/AlloyTeam/AlloyTouch
简介
AlloyTouch的本质是运动一个数字,把数字的物理变化映射到你想映射的任何属性上。所以带来了广泛的应用场景。不论实在应用、游戏、操作系统等许多层面,监听用户触摸,给用户真实的运动反馈是很常见的应用场景。如王者荣耀里,旋转用户角色,抽奖程序滚动转盘、页面滚动、局部滚动等。
上面的那些场景,都会使用到下面三种过程之一:
- 触摸、运动、减速、停止
- 触摸、运动、减速、回弹、停止
- 触摸、回弹、停止
上面的运动可以是任何形式,如旋转、平移、zoom等运动形式。当然,在上面过程执行的过程中,如果有其他用户交互介入,会停止当前的过程,继而反馈用户新的触摸手势。AlloyTouch正是为了解决这类问题而生。同时做到了:
- 极小的文件大小(不到300行代码)
- 与页面布局无关
- 运动属性无关,能运动对象字量(如{x:100})
- 渲染无关的设计(dom、canvas、webgl、svg都能使用)
- 真实的物理运动轨迹
- 高效的运动方式
- 极简的API设计
安装
npm install alloytouch
使用姿势
new AlloyTouch({
touch:"#wrapper",//反馈触摸的dom
target: target, //运动的对象
property: "translateY", //被运动的属性
min: 100, //不必需,运动属性的最小值,越界会回弹
max: 2000, //不必需,滚动属性的最大值,越界会回弹
vertical: true,//不必需,默认是true代表监听竖直方向touch
sensitivity: 1,//不必需,触摸区域的灵敏度,默认值为1,可以为负数
factor: 1,//不必需,表示触摸位移与被运动属性映射关系,默认值是1
step: 45,//不必需,用于校正到step的整数倍
change:function(){ }, //不必需,属性改变的回调。alloytouch.css版本不支持该事件
touchStart:function(value){ },
touchMove:function(value){ },
touchEnd:function(value){ },
animationEnd:function(value){ } //运动结束
})
比如上面是运动target的translateY属性,必须要target拥有translateY属性才能正常工作。
你可以使用transformjs赋予dom的快速tranformation能力。所以一般需要AlloyTouch dom元素的话,可以:
var target = document.querySelector("#scroller");
//给element注入transform属性
Transform(target,true);
new AlloyTouch({
...
...
功能演示
##在线Demo
##开始AlloyTouch吧
Github地址:https://github.com/AlloyTeam/AlloyTouch
欢迎issues:https://github.com/AlloyTeam/AlloyTouch/issues
我们会在第一时间响应你的意见和建议。
移动 Web 触摸与运动解决方案 AlloyTouch 开源啦的更多相关文章
- 移动Web触摸与运动解决方案AlloyTouch开源啦
传送门 Github地址:https://github.com/AlloyTeam/AlloyTouch 简介 AlloyTouch的本质是运动一个数字,把数字的物理变化映射到你想映射的任何属性上.所 ...
- layer:web弹出层解决方案
layer:web弹出层解决方案 一.总结 一句话总结:http://layer.layui.com/ 1.layer中弹出层tips的使用(代码)是怎样的? 使用还是比较简单方便的 //tips层- ...
- iOS事件:触摸事件.运动事件.远程控制事件
iOS中,提供了事件处理:触摸事件,运动事件,远程控制事件.这很大得方便程序猿的工作. 这里先简单做个介绍: // // ViewController.m // demo // // Created ...
- .atitit.web 推送实现解决方案集合(3)----dwr3 Reverse Ajax
.atitit.web 推送实现解决方案集合(3)----dwr3 Reverse Ajax 1. 原理实现 1 2. Page 增加配置,增加回调函数dwr.engine.setActiveRev ...
- Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案
Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案 1. 业务场景 android+webview h5 css背景图性能提升1 2. ...
- 小公司0成本基于Pythony的单元\GUI\Web自动化\性能的几个开源软件测试工具
以下是当前流行的几款适合小公司0成本的几个开源软件测试解决方案: 1.单元测试 a.unittest :Python自带的单元测试框架 b.pyunit:Junit的Python版本 2.使用Pyho ...
- python之web自动化验证码识别解决方案
验证码识别解决方案 对于web应用程序来讲,处于安全性考虑,在登录的时候,都会设置验证码,验证码的类型种类繁多,有图片中辨别数字字母的,有点击图片中指定的文字的,也有算术计算结果的,再复杂一点就是滑动 ...
- 常见的H5移动端Web页面Bug问题解决方案总汇
解决jquery ajax调用远程接口的跨域问题 首先,接口必须允许远程调用.这是后端或者运维的事情.你必须保证你得到的一个接口是允许远程调用的.否则,就没啥了. $.ajax({ type:'get ...
- Greenplum数仓监控解决方案(开源版本)
Greenplum监控解决方案 基于Prometheus+Grafana+greenplum_exporter+node_exporter实现 关联图 一.基本概念 1.Prometheus Pr ...
随机推荐
- lambda 表达式 比较时间大小
data.Orderdetails.Where(r => r.orderstatus == id && DateTime.Compare((DateTime)r.OrderTim ...
- 关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用
关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用 工作环境:window下 在一切的最开始,安装node.js (中文站,更新比较慢http://nodejs.cn/) ...
- Git 源代码管理工具
Git 源代码管理工具 Git基本信息 Git :Git是一个“分布式”的版本控制工具 Git的作者是Linux之父 Linus Benedict Torvolds,当初开发Git仅仅是为了辅助Lin ...
- 字符串s中从第i个位置起取长度为len的子串,函数返回子串链表
/*已知字符串采用带结点的链式存储结构(详见linksrting.h文件),请编写函数linkstring substring(linkstring s,int i,int len),在字符串s中从第 ...
- IntegerCache类
先看代码实例现象: 问题:为什么都是比较数值,第一个为true,第二个确为false呢? 查找源码(java.lang.Integer),看到如下代码: /** * Cache to support ...
- 查询时,如何保存获取相关路径url
作为新人,总是会有许多小问题不懂,不知道如何解决的. 这不,这次,遇到了路径获取问题. 在Jsp页面中,获取当前路径,在<script></script>中添加 var ur ...
- HtmlAgilityPack组件
HtmlAgilityPack组件用于解析Html字符串,一个典型的应用场景是用于网页爬虫. 示例程序 using Common.Tools; using Datebase.Entity; using ...
- 为Page添加INotifyPropertyChanged功能
在Page页面里面, DataContext 更新后,前台数据要求会自动更新. 但前台的绑定如果用x:bind 语法. 它要求强类型.直接关联到DataContext上就不行了. 需要为Page 添加 ...
- 转发 win7+iis7.5+asp.net下 CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files 解决方案
win7+iis7.5+asp.net下 CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NE ...
- 页面加载完成后加载多个函数的js完美解决方案
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') ...