AlloyTeam/PhyTouch-网页触摸运动方案

【Github】项目名：AlloyTeam/PhyTouch – 网页触摸运动方案

项目简介

AlloyTeam/PhyTouch是一个为网页提供丝般顺滑的触摸运动方案的项目，包括平滑滚动、旋转、下拉刷新、页面转换等触摸相关的运动效果。

项目使用

可以通过npm安装phy – touch（https://unpkg.com/phy – [email protected]/index.js）。使用时，例如创建一个PhyTouch实例：var phyTouch = new PhyTouch({ touch: “#wrapper”, vertical: true, touchtarget: {y: 0}, property: “y”, min: 100, max: 2000, sensitivity: 1, factor: 1, moveFactor: 1, step: 45, bindSelf: false, maxSpeed: 2, value: 0, change: function(value){target.style.transform = “translate(0,”+value+”px)”target.style.webkitTransform = “translate(0,”+value+”px)”}, touchStart: function(evt, value){}, touchMove: function(evt, value){}, touchEnd: function(evt, value){}, tap: function(evt, value){}, pressMove: function(evt, value){}, animationEnd: function(value){}})。还可以通过实例自行运动DOM（phyTouch.to(value, time, ease)）或者停止DOM运动（phyTouch.stop()）。

实践案例

有多个实践案例的Demo（需在移动设备上查看），例如：PullToRefresh: http://alloyteam.github.io/PhyTouch/refresh/pull_refresh/；QQKanDian: http://alloyteam.github.io/PhyTouch//refresh/infinite/kandian.；FullPageScroll: http://alloyteam.github.io/PhyTouch/full_page/；Simple: http://alloyteam.github.io/PhyTouch/example/simple.；3D: http://alloyteam.github.io/PhyTouch/example/3d.；Rotate: http://alloyteam.github.io/PhyTouch/example/rotate.；Carousel: http://alloyteam.github.io/PhyTouch/example/carousel.；Carousel2: http://alloyteam.github.io/PhyTouch/example/carousel2.；Three.js: http://alloyteam.github.io/PhyTouch/example/threejs/。

项目总结

AlloyTeam/PhyTouch为网页触摸相关的运动提供了很好的解决方案，无论是滚动、旋转还是页面转换等需求都能满足。如果大家对这个项目有任何想法或者建议，欢迎在下方留言一起参与讨论。

项目地址

GitHub链接直达