挪动Web触摸与活动解决方案AlloyTouch开源啦

2019年8月31日 147次阅读 来源: dntzhang

传送门

Github地点：https://github.com/AlloyTeam/…

简介

AlloyTouch的实质是活动一个数字，把数字的物理变化映照到你想映照的任何属性上。所以带来了普遍的运用场景。不管着实运用、游戏、操作系统等很多层面，监听用户触摸，给用户实在的活动反应是很罕见的运用场景。如王者光荣里，扭转用户角色，抽奖顺序转动转盘、页面转动、部分转动等。

《挪动Web触摸与活动解决方案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({
...
...

功用演示

《挪动Web触摸与活动解决方案AlloyTouch开源啦》

《挪动Web触摸与活动解决方案AlloyTouch开源啦》

《挪动Web触摸与活动解决方案AlloyTouch开源啦》

在线Demo

《挪动Web触摸与活动解决方案AlloyTouch开源啦》

最先AlloyTouch吧

Github地点：https://github.com/AlloyTeam/AlloyTouch
迎接issues:https://github.com/AlloyTeam/AlloyTouch/issues
我们会在第一时间相应你的看法和发起。

    原文作者：dntzhang
    原文地址: https://segmentfault.com/a/1190000007697113
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞